ordering-ui-react-native 0.16.37 → 0.16.38-release

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Vibration } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -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,
@@ -78,7 +79,6 @@ const SignupFormUI = (props: SignupParams) => {
 		handleChangeInput,
 		willVerifyOtpState,
 		setOtpState,
-		otpState,
 		setSignUpTab,
 		signUpTab,
 		useSignUpFullDetails,
@@ -120,10 +120,9 @@ 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 [otpErrMsg, setOtpErrMsg] = useState('')
 	const [formValues, setFormValues] = useState(null);
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
@@ -238,9 +237,15 @@ const SignupFormUI = (props: SignupParams) => {
 		navigation.navigate('Home');
 	};
 
+	const handleSignUpTab = (tab: string) => {
+		setSignUpTab && setSignUpTab(tab)
+		clearErrors()
+	}
+
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
+			Vibration.vibrate()
 			return;
 		}
 		if (
@@ -258,6 +263,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
+			Vibration.vibrate()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -326,6 +332,7 @@ const SignupFormUI = (props: SignupParams) => {
 			await Linking.openURL(url);
 		} else {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+			Vibration.vibrate()
 		}
 	}
 
@@ -333,10 +340,12 @@ const SignupFormUI = (props: SignupParams) => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			Vibration.vibrate()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			Vibration.vibrate()
 			return
 		}
 		recaptchaRef.current.open()
@@ -344,22 +353,47 @@ 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) {
-			formState.result?.result &&
-				showToast(ToastType.Error, formState.result?.result[0]);
+			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'))
+				Vibration.vibrate()
+				return
+			}
+			formState.result?.result && showToast(ToastType.Error, formState.result?.result[0]);
+			formState.result?.result && Vibration.vibrate()
 			setIsLoadingVerifyModal(false);
 		}
 	}, [formState]);
@@ -367,16 +401,21 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
+			Vibration.vibrate()
 		}
-	}, [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, '')
@@ -391,6 +430,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
+				verifyPhoneState.result?.result && Vibration.vibrate()
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -415,9 +455,11 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setOtpErrMsg((typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0]) || t('ERROR', 'Error'))
-		} else if (checkPhoneCodeState?.result?.result && checkPhoneCodeState?.result?.result?.[0] === 'VERIFICATION_CODE_WAS_SENT_TO') {
-			setOtpErrMsg(t('CODE_SENT', 'The code has been sent'))
+			setAlertState({
+				open: true,
+				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				content: []
+			})
 		}
 	}, [checkPhoneCodeState])
 
@@ -434,39 +476,41 @@ const SignupFormUI = (props: SignupParams) => {
 				titleStyle={{ marginLeft: 0, marginRight: 0 }}
 			/>
 			<FormSide>
-				{(useSignUpFullDetails) && (
+				{((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
 					<SignupWith>
 						<OTabs
 							horizontal
 							showsHorizontalScrollIndicator={false}
 							ref={tabsRef}
 						>
-							<TabBtn
-								onPress={() => setSignUpTab && setSignUpTab('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>
+							{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={() => setSignUpTab && setSignUpTab('otpEmail')}
+									onPress={() => handleSignUpTab('otpEmail')}
 									onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
 								>
 									<OTab
@@ -492,7 +536,7 @@ const SignupFormUI = (props: SignupParams) => {
 							)}
 							{useSignUpOtpCellphone && (
 								<TabBtn
-									onPress={() => setSignUpTab && setSignUpTab('otpCellphone')}
+									onPress={() => handleSignUpTab('otpCellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
 								>
 									<OTab
@@ -599,7 +643,6 @@ const SignupFormUI = (props: SignupParams) => {
 											}
 										})}
 										forwardRef={phoneRef}
-										defaultCode={formState?.country_code ?? formState?.country_phone_code ?? null}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,
 											phone: {
@@ -616,36 +659,49 @@ 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)}
-									/>
+									{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)}
+											/>
+										</>
+									)}
+
 								</>
 							)}
 							{(signUpTab === 'default') && (
@@ -838,64 +894,65 @@ const SignupFormUI = (props: SignupParams) => {
 						</View>
 					)
 				}
-				<View
-					style={{
-						flexDirection: 'row',
-						width: '100%',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						marginVertical: 30,
-					}}>
-					<View style={style.line} />
-					<OText
-						size={14}
-						mBottom={10}
-						style={{ paddingHorizontal: 19 }}
-						color={theme.colors.disabled}>
-						{t('OR', 'or')}
-					</OText>
-					<View style={style.line} />
-				</View>
-
 				{configs && Object.keys(configs).length > 0 && (
-					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-						(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
+					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
+						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
+						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
 					(
-						<ButtonsWrapper>
-							<SocialButtons>
-								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-									configs?.facebook_id?.value &&
-									facebookLoginEnabled &&
-									(
-										<FacebookLogin
+						<>
+							<View
+								style={{
+									flexDirection: 'row',
+									width: '100%',
+									justifyContent: 'space-between',
+									alignItems: 'center',
+									marginVertical: 30,
+								}}>
+								<View style={style.line} />
+								<OText
+									size={14}
+									mBottom={10}
+									style={{ paddingHorizontal: 19 }}
+									color={theme.colors.disabled}>
+									{t('OR', 'or')}
+								</OText>
+								<View style={style.line} />
+							</View>
+							<ButtonsWrapper>
+								<SocialButtons>
+									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+										configs?.facebook_id?.value &&
+										facebookLoginEnabled &&
+										(
+											<FacebookLogin
+												notificationState={notificationState}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleLoading={(val: boolean) => setIsFBLoading(val)}
+												handleSuccessFacebookLogin={handleSuccessFacebook}
+											/>
+										)}
+									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+										<GoogleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											webClientId={configs?.google_login_client_id?.value}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
-											handleSuccessFacebookLogin={handleSuccessFacebook}
+											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
-									<GoogleLogin
-										notificationState={notificationState}
-										webClientId={configs?.google_login_client_id?.value}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessGoogleLogin={handleSuccessFacebook}
-									/>
-								)}
-								{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
-									<AppleLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessAppleLogin={handleSuccessFacebook}
-									/>
-								)}
-							</SocialButtons>
-						</ButtonsWrapper>
+									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
+										<AppleLogin
+											notificationState={notificationState}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleLoading={(val: boolean) => setIsFBLoading(val)}
+											handleSuccessAppleLogin={handleSuccessFacebook}
+										/>
+									)}
+								</SocialButtons>
+							</ButtonsWrapper>
+						</>
 					)
 				)}
-
 			</FormSide>
 			<OModal
 				open={willVerifyOtpState}