ordering-ui-react-native 0.16.74 → 0.16.75-release

package/themes/business/src/components/LoginForm/index.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
@@ -27,7 +28,9 @@ import {
   TabsContainer,
   OrSeparator,
   LineSeparator,
-  RecaptchaButton
+  RecaptchaButton,
+  TabBtn,
+  OTab
 } from './styles';
 import { _setStoreData } from '../../providers/StoreUtil'
 import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
@@ -35,6 +38,9 @@ import { PhoneInputNumber } from '../PhoneInputNumber';
 import { VerifyPhone } from '../VerifyPhone';
 import { LoginParams } from '../../types';
 
+import { Otp } from './Otp'
+import Alert from '../../../../../src/providers/AlertProvider'
+
 const LoginFormUI = (props: LoginParams) => {
   const {
     navigation,
@@ -52,8 +58,15 @@ const LoginFormUI = (props: LoginParams) => {
     allowedLevels,
     useRootPoint,
     notificationState,
-		handleReCaptcha,
-		enableReCaptcha
+    handleReCaptcha,
+    enableReCaptcha,
+
+    useLoginOtp,
+		otpType,
+		setOtpType,
+		generateOtpCode,
+		useLoginOtpEmail,
+		useLoginOtpCellphone,
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -67,7 +80,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
-  const [projectName, setProjectName] = useState({name: '', isFocued: false});
+  const [projectName, setProjectName] = useState({ name: '', isFocued: false });
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -92,36 +105,56 @@ const LoginFormUI = (props: LoginParams) => {
   const [formValues, setFormValues] = useState(null);
 
   const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
-	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
   const recaptchaRef = useRef<any>({});
 
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
+	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+
+
   const handleOpenRecaptcha = () => {
-		setRecaptchaVerified(false)
-	  	if (!recaptchaConfig?.siteKey) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			return
-		}
-		if (!recaptchaConfig?.baseUrl) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			return
-		}
-		recaptchaRef.current.open()
-  	}
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+    recaptchaRef.current.open()
+  }
 
-	const onRecaptchaVerify = (token: any) => {
-		setRecaptchaVerified(true)
-		handleReCaptcha(token)
-	}
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    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
-			})
-		}
-	}, [configs, enableReCaptcha])
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      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(() => {
     const projectInputInterval = setInterval(() => {
@@ -164,6 +197,7 @@ const LoginFormUI = (props: LoginParams) => {
         'An error occurred while trying to pay by PayPal',
       ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY:
         'Error adding product, very far for delivery',
+      ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
     };
 
     return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -193,6 +227,31 @@ const LoginFormUI = (props: LoginParams) => {
     handleSubmit(onSubmit)();
   };
 
+  const mainLogin = (values) => {
+    if (loginTab === 'otp') {
+			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
+				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+				return
+			}
+			if (loginTab === 'otp') {
+				generateOtpCode({
+					...values,
+					...phoneInputData.phone
+				})
+			}
+			setWillVerifyOtpState(true)
+		} else {
+			if (phoneInputData.error) {
+				showToast(ToastType.Error, phoneInputData.error);
+				return;
+			}
+			handleButtonLoginClick({
+				...values,
+				...phoneInputData.phone,
+			});
+		}
+  }
+
   const onSubmit = (values: any) => {
     Keyboard.dismiss();
 
@@ -211,13 +270,26 @@ const LoginFormUI = (props: LoginParams) => {
       setSubmitted(true)
       return
     }
-
-    handleButtonLoginClick({
-      ...values,
-      ...phoneInputData.phone
-    });
+    mainLogin(values)
   };
 
+  const handleChangeOtpType = (type: string) => {
+		handleChangeTab('otp', type)
+		setOtpType(type)
+	}
+
+	const handleLoginOtp = (code: string) => {
+		handleButtonLoginClick({ code })
+	}
+
+	const closeAlert = () => {
+		setAlertState({
+			open: false,
+			title: '',
+			content: []
+		})
+	}
+
   const handleVerifyCodeClick = () => {
     if (phoneInputData.error) {
       showToast(ToastType.Error, phoneInputData.error);
@@ -245,27 +317,28 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     if (!formState?.loading && formState?.result?.error) {
-      formState?.result?.result &&
-        showToast(
-          ToastType.Error,
-          loginTab === 'email' && typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result)
-            : loginTab === 'email' &&
-              typeof formState.result?.result !== 'string'
-            ? getTraduction(formState.result?.result[0])
-            : loginTab === 'cellphone' &&
-              typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              )
-            : getTraduction(formState.result?.result[0]).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              ),
-        );
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setSubmitted(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,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
       setSubmitted(false)
     }
+    if (!formState?.loading && !formState?.result?.error) {
+      setWillVerifyOtpState(false)
+    }
   }, [formState]);
 
   useEffect(() => {
@@ -333,9 +406,20 @@ const LoginFormUI = (props: LoginParams) => {
     if (values?.project_name) {
       delete values.project_name
     }
-    handleButtonLoginClick({ ...values })
+    mainLogin(values)
+    setSubmitted(false)
   }, [ordering, submitted])
 
+  useEffect(() => {
+		if (checkPhoneCodeState?.result?.error) {
+			setAlertState({
+				open: true,
+				content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+				title: ''
+			})
+		}
+	}, [checkPhoneCodeState])
+
   Dimensions.addEventListener('change', ({ window: { width, height } }) => {
     setWindowWidth(
       parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
@@ -418,6 +502,25 @@ const LoginFormUI = (props: LoginParams) => {
       fontWeight: 'normal',
       fontSize: 16,
     },
+
+    borderStyleBase: {
+			width: 30,
+			height: 45
+		},
+		borderStyleHighLighted: {
+			borderColor: "#03DAC6",
+		},
+		underlineStyleBase: {
+			width: 45,
+			height: 60,
+			borderWidth: 1,
+			fontSize: 16
+		},
+		underlineStyleHighLighted: {
+			borderColor: theme.colors.primary,
+			color: theme.colors.primary,
+			fontSize: 16
+		},
   });
 
   return (
@@ -434,7 +537,7 @@ const LoginFormUI = (props: LoginParams) => {
         <OText style={styles.title}>{t('LOGIN', 'Login')}</OText>
       </View>
 
-      {(useLoginByEmail || useLoginByCellphone) && (
+      {(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
         <LoginWith>
           <ScrollView
             ref={scrollRefTab}
@@ -495,12 +598,63 @@ const LoginFormUI = (props: LoginParams) => {
                     }}></View>
                 </Pressable>
               )}
+
+              {useLoginOtpEmail && (
+								<Pressable
+                  style={styles.btnTab}
+                  onPress={() => handleChangeOtpType('email')}>
+                  <OText
+                    style={styles.btnTabText}
+                    color={
+                      isOtpEmail
+                        ? theme.colors.textNormal
+                        : theme.colors.disabled
+                    }
+                    weight={isOtpEmail ? 'bold' : 'normal'}>
+                    {t('BY_OTP_EMAIL', 'By Otp Email')}
+                  </OText>
+                  <View
+                    style={{
+                      width: '100%',
+                      borderBottomColor:
+                        isOtpEmail
+                          ? theme.colors.textGray
+                          : theme.colors.tabBar,
+                      borderBottomWidth: 2,
+                    }} />
+								</Pressable>
+							)}
+							{useLoginOtpCellphone && (
+								<Pressable
+                  style={styles.btnTab}
+                  onPress={() => handleChangeOtpType('cellphone')}>
+                  <OText
+                    style={styles.btnTabText}
+                    color={
+                      isOtpCellphone
+                        ? theme.colors.textNormal
+                        : theme.colors.disabled
+                    }
+                    weight={isOtpCellphone ? 'bold' : 'normal'}>
+                    {t('BY_OTP_PHONE', 'By Otp Phone')}
+                  </OText>
+                  <View
+                    style={{
+                      width: '100%',
+                      borderBottomColor:
+                      isOtpCellphone
+                          ? theme.colors.textGray
+                          : theme.colors.tabBar,
+                      borderBottomWidth: 2,
+                    }} />
+								</Pressable>
+							)}
             </TabsContainer>
           </ScrollView>
         </LoginWith>
       )}
 
-      {(useLoginByCellphone || useLoginByEmail) && (
+      {(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
         <FormInput>
           {useRootPoint && (
             <Controller
@@ -516,7 +670,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({name: e?.target?.value, isFocued: true})
+                    setProjectName({ name: e?.target?.value, isFocued: true })
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -534,7 +688,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByEmail && loginTab === 'email' && (
+          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
@@ -545,7 +699,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({...projectName, isFocued: false})
+                    setProjectName({ ...projectName, isFocued: false })
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -579,7 +733,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByCellphone && loginTab === 'cellphone' && (
+          {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
             <View style={{ marginBottom: 20 }}>
               <PhoneInputNumber
                 data={phoneInputData}
@@ -594,54 +748,56 @@ const LoginFormUI = (props: LoginParams) => {
             </View>
           )}
 
-          <Controller
-            control={control}
-            render={({ onChange, value }: any) => (
-              <OInput
-                isSecured={!passwordSee ? true : false}
-                placeholder={t('PASSWORD', 'Password')}
-                placeholderTextColor={theme.colors.arrowColor}
-                style={styles.input}
-                icon={theme.images.logos.passwordInputIcon}
-                iconColor={theme.colors.arrowColor}
-                iconCustomRight={
-                  !passwordSee ? (
-                    <MaterialCommunityIcons
-                      name="eye-outline"
-                      size={24}
-                      color={theme.colors.arrowColor}
-                      onPress={() => setPasswordSee(!passwordSee)}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="eye-off-outline"
-                      size={24}
-                      color={theme.colors.arrowColor}
-                      onPress={() => setPasswordSee(!passwordSee)}
-                    />
-                  )
-                }
-                selectionColor={theme.colors.primary}
-                color={theme.colors.textGray}
-                value={value}
-                forwardRef={inputRef}
-                onChange={(val: any) => onChange(val)}
-                returnKeyType="done"
-                onSubmitEditing={() => handleLogin()}
-                blurOnSubmit
-              />
-            )}
-            name="password"
-            rules={{
-              required: t(
-                'VALIDATION_ERROR_PASSWORD_REQUIRED',
-                'The field Password is required',
-              ).replace('_attribute_', t('PASSWORD', 'Password')),
-            }}
-            defaultValue=""
-          />
+          {loginTab !== 'otp' && (
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  isSecured={!passwordSee ? true : false}
+                  placeholder={t('PASSWORD', 'Password')}
+                  placeholderTextColor={theme.colors.arrowColor}
+                  style={styles.input}
+                  icon={theme.images.logos.passwordInputIcon}
+                  iconColor={theme.colors.arrowColor}
+                  iconCustomRight={
+                    !passwordSee ? (
+                      <MaterialCommunityIcons
+                        name="eye-outline"
+                        size={24}
+                        color={theme.colors.arrowColor}
+                        onPress={() => setPasswordSee(!passwordSee)}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name="eye-off-outline"
+                        size={24}
+                        color={theme.colors.arrowColor}
+                        onPress={() => setPasswordSee(!passwordSee)}
+                      />
+                    )
+                  }
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  value={value}
+                  forwardRef={inputRef}
+                  onChange={(val: any) => onChange(val)}
+                  returnKeyType="done"
+                  onSubmitEditing={() => handleLogin()}
+                  blurOnSubmit
+                />
+              )}
+              name="password"
+              rules={{
+                required: t(
+                  'VALIDATION_ERROR_PASSWORD_REQUIRED',
+                  'The field Password is required',
+                ).replace('_attribute_', t('PASSWORD', 'Password')),
+              }}
+              defaultValue=""
+            />
+          )}
 
-          {onNavigationRedirect && (
+          {onNavigationRedirect && loginTab !== 'otp' && (
             <Pressable
               style={{ marginRight: 'auto', marginBottom: 20 }}
               onPress={() => onNavigationRedirect('Forgot')}>
@@ -650,43 +806,53 @@ const LoginFormUI = (props: LoginParams) => {
               </OText>
             </Pressable>
           )}
-
-          {enableReCaptcha && (
+          {(enableReCaptcha && recaptchaConfig?.version) && (
             <>
-              <TouchableOpacity
-                style={{ marginBottom: 15 }}
-                onPress={handleOpenRecaptcha}
-              >
-                <RecaptchaButton>
-                  {recaptchaVerified ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={26}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={26}
-                      color={theme.colors.mediumGray}
-                    />
-                  )}
-                  <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
+                    style={{ marginBottom: 15 }}
+                    onPress={handleOpenRecaptcha}
+                  >
+                    <RecaptchaButton>
+                      {recaptchaVerified ? (
+                        <MaterialCommunityIcons
+                          name="checkbox-marked"
+                          size={26}
+                          color={theme.colors.primary}
+                        />
+                      ) : (
+                        <MaterialCommunityIcons
+                          name="checkbox-blank-outline"
+                          size={26}
+                          color={theme.colors.mediumGray}
+                        />
+                      )}
+                      <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)}
+                  />
+                </>)
+              }
             </>
-					)}
-
+          )}
           <OButton
             onClick={handleLogin}
-            text={t('LOGIN', 'Login')}
+            text={loginTab !== 'otp' ? t('LOGIN', 'Login') : t('GET_VERIFY_CODE', 'Get verify code')}
             bgColor={theme.colors.primary}
             borderColor={theme.colors.primary}
             textStyle={styles.btnText}
@@ -726,7 +892,10 @@ const LoginFormUI = (props: LoginParams) => {
           </>
         )}
 
-      <OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
+      <OModal
+        open={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+      >
         <VerifyPhone
           phone={phoneInputData.phone}
           verifyPhoneState={verifyPhoneState}
@@ -736,6 +905,29 @@ const LoginFormUI = (props: LoginParams) => {
           handleVerifyCodeClick={handleVerifyCodeClick}
         />
       </OModal>
+      <OModal
+				open={willVerifyOtpState}
+				onClose={() => setWillVerifyOtpState(false)}
+				entireModal
+        hideIcons
+				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			>
+				<Otp
+					willVerifyOtpState={willVerifyOtpState}
+					setWillVerifyOtpState={setWillVerifyOtpState}
+					handleLoginOtp={handleLoginOtp}
+					onSubmit={handleLogin}
+					setAlertState={setAlertState}
+          formState={formState}
+				/>
+			</OModal>
+			<Alert
+				open={alertState.open}
+				content={alertState.content}
+				title={alertState.title || ''}
+				onAccept={closeAlert}
+				onClose={closeAlert}
+			/>
     </View>
   );
 };

package/themes/business/src/components/LoginForm/styles.tsx

@@ -52,3 +52,13 @@ export const RecaptchaButton = styled.View`
   align-items: center;
   margin-bottom: 10px;
 `
+export const OTab = styled.View`
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  margin-end: 14px;
+`;
+
+export const TabBtn = styled.TouchableOpacity`
+  min-height: 30px;
+  height: 30px;
+`;