import React, {FC, useState, useEffect} from 'react'; import {AxiosResponse} from 'axios'; import {useForm, Controller} from 'react-hook-form'; import {useNavigation, StackActions} from '@react-navigation/native'; import NetInfo from '@react-native-community/netinfo'; import {useGet} from '@hooks/api'; import {TEST_USER_MOBILE_NUMBER} from '@constants/api'; import ErrorModal from '@components/ErrorModal'; import TextInput from '@components/TextInput'; import Button from '@components/Button'; import Checkbox from '@components/Checkbox'; import {FormData, IAuthProps} from '@components/Auth/types'; // import {SdkService} from '@services/AffinidiSDKService'; import useTncContext from '@contexts/tnc'; import useUserContext from '@contexts/user'; import useLoaderContext from '@contexts/loader'; import {CHECK_USER_REGISTRATION, SIGN_IN_PASSWORD_LESS} from '@constants/api'; import {cloudWalletServiceInstance} from '@services/Axios'; import {ONBOARDING, LOGIN, OTP} from '@constants/navigation/onboarding'; import {TERMS_AND_CONDITION} from '@constants/navigation/terms-and-condition'; import { BodyWrapper, Body, SubmitButton, otpButtonStyle, Field, TermsAndCondition, TermsAndConditionText, TermsAndConditionButton, } from '@styles/components/auth'; const Form: FC = ({isSignUpScreen}) => { const [focus, setFocus] = useState(false); const [error, setError] = useState(); const [isOffline, setOfflineStatus] = useState(false); const {value: tncValue, setValue} = useTncContext(); const {setLoginToken, setPhoneNumber} = useUserContext(); const navigation = useNavigation(); useEffect(() => { const removeNetInfoSubscription = NetInfo.addEventListener(state => { const offline = !(state.isConnected && state.isInternetReachable); setOfflineStatus(offline); }); return () => removeNetInfoSubscription(); }, []); const { control, handleSubmit, formState: {errors, isValid}, getValues, } = useForm({ mode: 'onChange', reValidateMode: 'onChange', }); const {refetch} = useGet( CHECK_USER_REGISTRATION, `${CHECK_USER_REGISTRATION}?userId=${getValues('phoneNumber')}`, { enabled: false, }, ); const {showLoader, hideLoader} = useLoaderContext(); const onSubmit = async (data: FormData) => { try { const isTestUser = data?.phoneNumber === TEST_USER_MOBILE_NUMBER; const checkUserStatus = await refetch(); const userExist = checkUserStatus?.data?.data?.success; if (isSignUpScreen && userExist && !isOffline) { return setError( "This mobile number is already registered with us. Please 'Login' with your registered number to access Asli wallet", ); } else if (!isSignUpScreen && !userExist && !isOffline) { return setError( "This mobile number is not registered with us. Please 'Sign up' with your mobile number to access Asli wallet.", ); } if (isTestUser) { await setPhoneNumber(data?.phoneNumber); navigation.dispatch(StackActions.push(OTP.SCREEN, {isSignUpScreen})); } else { showLoader(); // const logInToken = await SdkService.initiateSignInPasswordless( // data?.phoneNumber, // ); const response: AxiosResponse = await cloudWalletServiceInstance.post( SIGN_IN_PASSWORD_LESS, {username: `+91${data?.phoneNumber}`}, ); hideLoader(); const logInToken = response?.data; if (typeof logInToken === 'object' && logInToken?.error) { setError(logInToken?.error); } else if (typeof logInToken === 'string') { await setPhoneNumber(data?.phoneNumber); await setLoginToken(logInToken); navigation.dispatch(StackActions.push(OTP.SCREEN, {isSignUpScreen})); } } } catch (e: any) { setError(e?.message); throw new Error(`${e?.message} [${data?.phoneNumber}]`); } }; return ( ( setFocus(true)} onBlur={() => setFocus(false)} onChangeText={v => { const specialCharacterRegex = new RegExp('^[0-9]*$'); const whiteSpaceRegex = /^\S*$/; if ( specialCharacterRegex.test(v) && whiteSpaceRegex.test(v) ) { onChange(v); } else { onChange(getValues('phoneNumber') || ''); } }} value={value} error={ errors?.phoneNumber && !focus ? 'Required Field' : undefined } keyboardType="number-pad" maxLength={10} /> )} name="phoneNumber" /> {isSignUpScreen && ( setValue({...tncValue, agree: v})} checked={!!tncValue?.agree} description={ By selecting “Get OTP” you agree to our navigation.dispatch( StackActions.push(TERMS_AND_CONDITION.SCREEN, { showConsentCheckbox: true, }), ) } testID="tncLink"> Terms and conditions & Privacy Policy } testID="tncCB" /> )}