This repository has been archived by the owner on Dec 21, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: added contact details and remove email and phone number com…
…ponents
- Loading branch information
Showing
7 changed files
with
240 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
packages/app/components/login/login-contact-details-field.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React, { useCallback } from "react"; | ||
| import { Button, ButtonLabel, Text, TextInput, View } from "design-system"; | ||
| import { useForm, Controller } from "react-hook-form"; | ||
| import { yupResolver } from "@hookform/resolvers/yup"; | ||
| import { yup } from "app/lib/yup"; | ||
|
|
||
| const validationSchema = yup | ||
| .object({ | ||
| // @ts-ignore | ||
| contact: yup.string().or([yup.string().email(), yup.string().phone()]), | ||
| }) | ||
| .required(); | ||
|
|
||
| type FormData = { | ||
| contact?: string; | ||
| }; | ||
|
|
||
| interface LoginEmailFieldProps { | ||
| onSubmitEmail: (value: string) => void; | ||
| onSubmitPhoneNumber: (value: string) => void; | ||
| } | ||
|
|
||
| export function LoginContactDetailsField({ | ||
| onSubmitEmail, | ||
| onSubmitPhoneNumber, | ||
| }: LoginEmailFieldProps) { | ||
| const { | ||
| control, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| } = useForm<FormData>({ | ||
| resolver: yupResolver(validationSchema), | ||
| mode: "onBlur", | ||
| reValidateMode: "onChange", | ||
| }); | ||
|
|
||
| const handleSubmitContact = useCallback( | ||
| ({ contact }: FormData) => { | ||
| console.log("contact", contact); | ||
| if (contact.includes("@")) { | ||
| onSubmitEmail(contact); | ||
| } else { | ||
| onSubmitPhoneNumber(contact); | ||
| } | ||
| }, | ||
| [onSubmitEmail, onSubmitPhoneNumber] | ||
| ); | ||
| return ( | ||
| <> | ||
| <View tw="p-[16px] mb-[16px] rounded-[16px] bg-gray-100 dark:bg-gray-900"> | ||
| <Text tw="mb-[8px] font-bold text-sm text-gray-900 dark:text-white"> | ||
| Contact details | ||
| </Text> | ||
| <Controller | ||
| control={control} | ||
| render={({ field: { onChange, onBlur, value } }) => ( | ||
| <TextInput | ||
| tw="w-full text-black dark:text-gray-300 rounded-lg focus:outline-none focus-visible:ring-1" | ||
| onBlur={onBlur} | ||
| onChangeText={(value) => onChange(value)} | ||
| value={value} | ||
| placeholder="Enter your email or phone number" | ||
| autoCapitalize="none" | ||
| autoCorrect={false} | ||
| returnKeyType="go" | ||
| /> | ||
| )} | ||
| name="contact" | ||
| /> | ||
| {errors.contact && ( | ||
| <Text tw="text-xs text-red-500 font-semibold mt-[8px]"> | ||
| Please enter a valid email address or phone number. | ||
| </Text> | ||
| )} | ||
| </View> | ||
|
|
||
| <Button | ||
| onPress={handleSubmit(handleSubmitContact)} | ||
| variant="tertiary" | ||
| size="regular" | ||
| tw="mb-[16px]" | ||
| > | ||
| <ButtonLabel tw="text-black dark:text-white">Sign in</ButtonLabel> | ||
| </Button> | ||
| </> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
63 changes: 0 additions & 63 deletions
63
packages/app/components/login/login-phone-number-field.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import * as yup from "yup"; | ||
| import "yup-phone"; | ||
|
|
||
| yup.addMethod(yup.string, "or", function (schemas, msg) { | ||
| return this.test({ | ||
| name: "or", | ||
| message: "Please enter valid value" || msg, | ||
| test: (value) => { | ||
| if (Array.isArray(schemas) && schemas.length > 1) { | ||
| const resee = schemas.map((schema) => schema.isValidSync(value)); | ||
| return resee.some((res) => res); | ||
| } else { | ||
| throw new TypeError("Schemas is not correct array schema"); | ||
| } | ||
| }, | ||
| exclusive: false, | ||
| }); | ||
| }); | ||
|
|
||
| export { yup }; |
Oops, something went wrong.