ordering-ui-react-native 0.16.2 → 0.16.3-release

package/themes/original/src/components/SignupForm/index.tsx

@@ -7,6 +7,7 @@ import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	SignupForm as SignUpController,
@@ -18,10 +19,12 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { FormSide, FormInput, SocialButtons } from './styles';
+import { Otp } from '../LoginForm/Otp'
 
 import {
 	ButtonsWrapper,
 	LoginWith as SignupWith,
+	TabBtn,
 	OTab,
 	OTabs,
 	RecaptchaButton
@@ -30,7 +33,9 @@ import {
 import NavBar from '../NavBar';
 import { VerifyPhone } from '../VerifyPhone';
 
-import { OText, OButton, OInput, OModal } from '../shared';
+import Alert from '../../../../../src/providers/AlertProvider'
+import { OText, OButton, OInput } from '../shared';
+import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
@@ -67,7 +72,18 @@ const SignupFormUI = (props: SignupParams) => {
 		notificationState,
 		handleChangePromotions,
 		enableReCaptcha,
-		handleReCaptcha
+		handleReCaptcha,
+		generateOtpCode,
+		numOtpInputs,
+		setWillVerifyOtpState,
+		handleChangeInput,
+		willVerifyOtpState,
+		setOtpState,
+		setSignUpTab,
+		signUpTab,
+		useSignUpFullDetails,
+		useSignUpOtpEmail,
+		useSignUpOtpCellphone
 	} = props;
 
 	const theme = useTheme();
@@ -104,15 +120,12 @@ const SignupFormUI = (props: SignupParams) => {
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
 	const [{ configs }] = useConfig();
-	const { control, handleSubmit, errors, register, setValue } = useForm();
+	const { control, handleSubmit, clearErrors, errors, register, unregister, setValue } = useForm();
 
 	const [passwordSee, setPasswordSee] = useState(false);
 	const [formValues, setFormValues] = useState(null);
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
-	const [signupTab, setSignupTab] = useState(
-		useSignupByCellphone && !useSignupByEmail ? 'cellphone' : 'email',
-	);
 	const [isFBLoading, setIsFBLoading] = useState(false);
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
@@ -122,9 +135,12 @@ const SignupFormUI = (props: SignupParams) => {
 			country_code: null
 		},
 	});
+	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+	const [tabLayouts, setTabLayouts] = useState<any>({})
 
+	const tabsRef = useRef<any>(null)
 	const nameRef = useRef<any>(null);
 	const lastnameRef = useRef<any>(null);
 	const middleNameRef = useRef<any>(null);
@@ -135,6 +151,17 @@ const SignupFormUI = (props: SignupParams) => {
 	const recaptchaRef = useRef<any>({});
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
+	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+
+	const closeAlert = () => {
+		setAlertState({
+			open: false,
+			title: '',
+			content: []
+		})
+	}
 
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
@@ -160,6 +187,13 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	};
 
+	const handleOnLayout = (event: any, opc: string) => {
+		const _tabLayouts = { ...tabLayouts }
+		const categoryKey = opc
+		_tabLayouts[categoryKey] = event.nativeEvent.layout
+		setTabLayouts(_tabLayouts)
+	}
+
 	const handleFocusRef = (code: string) => {
 		switch (code) {
 			case 'name': {
@@ -203,13 +237,13 @@ const SignupFormUI = (props: SignupParams) => {
 		navigation.navigate('Home');
 	};
 
-	const handleChangeTab = (val: string) => {
-		setSignupTab(val);
-		setPasswordSee(false);
-	};
+	const handleSignUpTab = (tab: string) => {
+		setSignUpTab && setSignUpTab(tab)
+		clearErrors()
+	}
 
-	const onSubmit = (values: any) => {
-		if (phoneInputData.error) {
+	const onSubmit = (values?: any) => {
+		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
 			return;
 		}
@@ -218,7 +252,8 @@ const SignupFormUI = (props: SignupParams) => {
 			!phoneInputData.phone.cellphone &&
 			((validationFields?.fields?.checkout?.cellphone?.enabled &&
 				validationFields?.fields?.checkout?.cellphone?.required) ||
-				configs?.verification_phone_required?.value === '1')
+				configs?.verification_phone_required?.value === '1') &&
+			signUpTab !== 'otpEmail'
 		) {
 			showToast(
 				ToastType.Error,
@@ -229,26 +264,29 @@ const SignupFormUI = (props: SignupParams) => {
 			);
 			return;
 		}
-		if (signupTab === 'email' || !useSignupByCellphone) {
-			handleButtonSignupClick &&
-				handleButtonSignupClick({
-					...values,
-					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
-					country_code: phoneInputData.phone.country_code
-				});
-			if (
-				!formState.loading &&
-				formState.result.result &&
-				!formState.result.error
-			) {
-				handleSuccessSignup && handleSuccessSignup(formState.result.result);
-			}
-			return;
+		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
+			generateOtpCode && generateOtpCode({
+				...values,
+				...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
+				country_code: phoneInputData.phone.country_code
+			})
+			return
+		}
+		handleButtonSignupClick &&
+			handleButtonSignupClick({
+				...values,
+				...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
+				country_code: phoneInputData.phone.country_code
+			});
+		if (!formState.loading && formState.result.result && !formState.result.error) {
+			handleSuccessSignup && handleSuccessSignup(formState.result.result);
 		}
-		setFormValues(values);
-		handleVerifyCodeClick(values);
 	};
 
+	const handleSingUpOtp = (value: string) => {
+		setOtpState && setOtpState(value)
+	}
+
 	const handleVerifyCodeClick = (values: any) => {
 		const formData = values || formValues;
 		handleSendVerifyCode &&
@@ -310,20 +348,44 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+			}
 		}
 	}, [configs, enableReCaptcha])
 
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				return
+			}
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
 			setIsLoadingVerifyModal(false);
@@ -334,15 +396,19 @@ const SignupFormUI = (props: SignupParams) => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
 		}
-	}, [errors]);
+	}, [errors])
 
 	useEffect(() => {
-		register('cellphone', {
-			required: isRequiredField('cellphone')
-				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-				: null
-		})
-	}, [register])
+		if (signUpTab === 'default' || signUpTab === 'otpCellphone') {
+			register('cellphone', {
+				required: isRequiredField('cellphone')
+					? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+					: null
+			})
+		} else {
+			unregister('cellphone')
+		}
+	}, [signUpTab])
 
 	useEffect(() => {
 		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
@@ -379,6 +445,16 @@ const SignupFormUI = (props: SignupParams) => {
 		})
 	}, [configs])
 
+	useEffect(() => {
+		if (checkPhoneCodeState?.result?.error) {
+			setAlertState({
+				open: true,
+				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				content: []
+			})
+		}
+	}, [checkPhoneCodeState])
+
 	return (
 		<View>
 			<NavBar
@@ -392,47 +468,92 @@ const SignupFormUI = (props: SignupParams) => {
 				titleStyle={{ marginLeft: 0, marginRight: 0 }}
 			/>
 			<FormSide>
-				{useSignupByEmail &&
-					useSignupByCellphone &&
-					configs &&
-					Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') && (
-						<SignupWith style={{ paddingBottom: 25 }}>
-							<OTabs>
-								{useSignupByEmail && (
-									<Pressable onPress={() => handleChangeTab('email')}>
-										<OTab>
-											<OText
-												size={18}
-												color={
-													signupTab === 'email'
-														? theme.colors.primary
-														: theme.colors.disabled
-												}>
-												{t('SIGNUP_BY_EMAIL', 'Signup by Email')}
-											</OText>
-										</OTab>
-									</Pressable>
-								)}
-								{useSignupByCellphone && (
-									<Pressable onPress={() => handleChangeTab('cellphone')}>
-										<OTab>
-											<OText
-												size={18}
-												color={
-													signupTab === 'cellphone'
-														? theme.colors.primary
-														: theme.colors.disabled
-												}>
-												{t('SIGNUP_BY_PHONE', 'Signup by Phone')}
-											</OText>
-										</OTab>
-									</Pressable>
-								)}
-							</OTabs>
-						</SignupWith>
-					)}
+				{((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
+					<SignupWith>
+						<OTabs
+							horizontal
+							showsHorizontalScrollIndicator={false}
+							ref={tabsRef}
+						>
+							{useSignUpFullDetails && (
+								<TabBtn
+									onPress={() => handleSignUpTab('default')}
+									onLayout={(event: any) => handleOnLayout(event, 'default')}
+								>
+									<OTab
+										style={{
+											borderBottomColor:
+												signUpTab === 'default'
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												signUpTab === 'default'
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={signUpTab === 'default' ? 'bold' : 'normal'}>
+											{t('DEFAULT', 'Default')}
+										</OText>
+									</OTab>
+								</TabBtn>
+							)}
+							{useSignUpOtpEmail && (
+								<TabBtn
+									onPress={() => handleSignUpTab('otpEmail')}
+									onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
+								>
+									<OTab
+										style={{
+											borderBottomColor:
+												signUpTab === 'otpEmail'
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												signUpTab === 'otpEmail'
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={signUpTab === 'otpEmail' ? 'bold' : 'normal'}>
+											{t('BY_OTP_EMAIL', 'by Otp Email')}
+										</OText>
+									</OTab>
+								</TabBtn>
+
+							)}
+							{useSignUpOtpCellphone && (
+								<TabBtn
+									onPress={() => handleSignUpTab('otpCellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
+								>
+									<OTab
+										style={{
+											borderBottomColor:
+												signUpTab === 'otpCellphone'
+													? theme.colors.textNormal
+													: theme.colors.border,
+										}}>
+										<OText
+											size={14}
+											color={
+												signUpTab === 'otpCellphone'
+													? theme.colors.textNormal
+													: theme.colors.disabled
+											}
+											weight={signUpTab === 'otpCellphone' ? 'bold' : 'normal'}>
+											{t('BY_OTP_CELLPHONE', 'by Otp Cellphone')}
+										</OText>
+									</OTab>
+								</TabBtn>
+							)}
+						</OTabs>
+					</SignupWith>
+				)}
 				<FormInput>
 					{!(useChekoutFileds && validationFields?.loading) ? (
 						<>
@@ -442,7 +563,9 @@ const SignupFormUI = (props: SignupParams) => {
 								(field: any, i: number) =>
 									!notValidationFields.includes(field.code) &&
 									showField &&
-									showField(field.code) && (
+									showField(field.code) &&
+									(signUpTab === 'default' ||
+										(signUpTab === 'otpEmail' && field.code === 'email')) && (
 										<React.Fragment key={field.id}>
 											{errors?.[`${field.code}`] && (
 												<OText
@@ -466,7 +589,7 @@ const SignupFormUI = (props: SignupParams) => {
 														value={value}
 														onChange={(val: any) =>
 															field.code !== 'email'
-																? onChange(val)
+																? (onChange(val))
 																: handleChangeInputEmail(val, onChange)
 														}
 														autoCapitalize={
@@ -498,7 +621,7 @@ const SignupFormUI = (props: SignupParams) => {
 									),
 							)}
 
-							{!!showInputPhoneNumber && (
+							{(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
@@ -512,7 +635,6 @@ const SignupFormUI = (props: SignupParams) => {
 											}
 										})}
 										forwardRef={phoneRef}
-										defaultCode={formState?.country_code ?? formState?.country_phone_code ?? null}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,
 											phone: {
@@ -529,66 +651,79 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
-							{enableReCaptcha && (
+							{(enableReCaptcha && recaptchaConfig?.version) && (
 								<>
-									<TouchableOpacity
-										onPress={handleOpenRecaptcha}
-										style={{ marginHorizontal: 4, marginBottom: 10 }}
-									>
-										<RecaptchaButton>
-											{recaptchaVerified ? (
-												<MaterialCommunityIcons
-													name="checkbox-marked"
-													size={23}
-													color={theme.colors.primary}
-												/>
-											) : (
-												<MaterialCommunityIcons
-													name="checkbox-blank-outline"
-													size={23}
-													color={theme.colors.disabled}
-												/>
-											)}
-											<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-										</RecaptchaButton>
-									</TouchableOpacity>
-									<Recaptcha
-										ref={recaptchaRef}
-										siteKey={recaptchaConfig?.siteKey}
-										baseUrl={recaptchaConfig?.baseUrl}
-										onVerify={onRecaptchaVerify}
-										onExpire={() => setRecaptchaVerified(false)}
-									/>
-								</>
-							)}
-
-							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
-										<CheckBox
-											value={value}
-											onValueChange={newValue => {
-												onChange(newValue)
-												handleChangePromotions()
-											}}
-											boxType={'square'}
-											tintColors={{
-												true: theme.colors.primary,
-												false: theme.colors.disabled
-											}}
-											tintColor={theme.colors.disabled}
-											onCheckColor={theme.colors.primary}
-											onTintColor={theme.colors.primary}
-											style={Platform.OS === 'ios' && style.checkBoxStyle}
+									{recaptchaConfig?.version === 'v3' ? (
+										<ReCaptcha
+											url={recaptchaConfig?.baseUrl}
+											siteKey={recaptchaConfig?.siteKey}
+											containerStyle={{ height: 40 }}
+											onExecute={onRecaptchaVerify}
+											reCaptchaType={1}
 										/>
+									) : (
+										<>
+											<TouchableOpacity
+												onPress={handleOpenRecaptcha}
+												style={{ marginHorizontal: 4, marginBottom: 10 }}
+											>
+												<RecaptchaButton>
+													{recaptchaVerified ? (
+														<MaterialCommunityIcons
+															name="checkbox-marked"
+															size={23}
+															color={theme.colors.primary}
+														/>
+													) : (
+														<MaterialCommunityIcons
+															name="checkbox-blank-outline"
+															size={23}
+															color={theme.colors.disabled}
+														/>
+													)}
+													<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+												</RecaptchaButton>
+											</TouchableOpacity>
+											<Recaptcha
+												ref={recaptchaRef}
+												siteKey={recaptchaConfig?.siteKey}
+												baseUrl={recaptchaConfig?.baseUrl}
+												onVerify={onRecaptchaVerify}
+												onExpire={() => setRecaptchaVerified(false)}
+											/>
+										</>
 									)}
-									name='promotions'
-									defaultValue={false}
-								/>
-								<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
-							</View>
 
+								</>
+							)}
+							{(signUpTab === 'default') && (
+								<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
+									<Controller
+										control={control}
+										render={({ onChange, value }: any) => (
+											<CheckBox
+												value={value}
+												onValueChange={newValue => {
+													onChange(newValue)
+													handleChangePromotions()
+												}}
+												boxType={'square'}
+												tintColors={{
+													true: theme.colors.primary,
+													false: theme.colors.disabled
+												}}
+												tintColor={theme.colors.disabled}
+												onCheckColor={theme.colors.primary}
+												onTintColor={theme.colors.primary}
+												style={Platform.OS === 'ios' && style.checkBoxStyle}
+											/>
+										)}
+										name='promotions'
+										defaultValue={false}
+									/>
+									<OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
+								</View>
+							)}
 							{configs?.terms_and_conditions?.value === 'true' && (
 								<>
 									{errors?.termsAccept && (
@@ -640,7 +775,7 @@ const SignupFormUI = (props: SignupParams) => {
 
 							)}
 
-							{signupTab !== 'cellphone' && (
+							{signUpTab === 'default' && (
 								<>
 									{errors?.password && (
 										<OText
@@ -712,9 +847,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<Spinner visible />
 					)}
 
-					{signupTab === 'cellphone' &&
-						useSignupByEmail &&
-						useSignupByCellphone ? (
+					{(signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') ? (
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={t('GET_VERIFY_CODE', 'Get Verify Code')}
@@ -779,7 +912,9 @@ const SignupFormUI = (props: SignupParams) => {
 						<ButtonsWrapper>
 							<SocialButtons>
 								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-									configs?.facebook_id?.value && (
+									configs?.facebook_id?.value &&
+									facebookLoginEnabled &&
+									(
 										<FacebookLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -787,7 +922,7 @@ const SignupFormUI = (props: SignupParams) => {
 											handleSuccessFacebookLogin={handleSuccessFacebook}
 										/>
 									)}
-								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
 									<GoogleLogin
 										notificationState={notificationState}
 										webClientId={configs?.google_login_client_id?.value}
@@ -796,7 +931,7 @@ const SignupFormUI = (props: SignupParams) => {
 										handleSuccessGoogleLogin={handleSuccessFacebook}
 									/>
 								)}
-								{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+								{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 									<AppleLogin
 										notificationState={notificationState}
 										handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -810,27 +945,40 @@ const SignupFormUI = (props: SignupParams) => {
 				)}
 
 			</FormSide>
-			<OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
-				<VerifyPhone
-					phone={phoneInputData.phone}
-					formValues={formValues}
-					verifyPhoneState={verifyPhoneState}
-					checkPhoneCodeState={checkPhoneCodeState}
-					handleCheckPhoneCode={handleCheckPhoneCode}
-					setCheckPhoneCodeState={setCheckPhoneCodeState}
-					handleVerifyCodeClick={onSubmit}
+			<OModal
+				open={willVerifyOtpState}
+				onClose={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+				entireModal
+				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			>
+				<Otp
+					pinCount={numOtpInputs || 6}
+					willVerifyOtpState={willVerifyOtpState || false}
+					setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+					handleLoginOtp={handleSingUpOtp}
+					onSubmit={onSubmit}
+					setAlertState={setAlertState}
 				/>
 			</OModal>
 			<Spinner
 				visible={formState.loading || validationFields.loading || isFBLoading}
 			/>
+			<Alert
+				open={alertState.open}
+				content={alertState.content}
+				title={alertState.title || ''}
+				onAccept={closeAlert}
+				onClose={closeAlert}
+			/>
 		</View>
 	);
 };
 
 export const SignupForm = (props: any) => {
+	const _numOtpInputs = 6
 	const signupProps = {
 		...props,
+		numOtpInputs: _numOtpInputs,
 		isRecaptchaEnable: true,
 		UIComponent: SignupFormUI,
 	};