ordering-ui-react-native 0.17.50 → 0.17.51-release

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ScrollView, Dimensions, Pressable } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useTheme } from 'styled-components/native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
@@ -17,15 +17,20 @@ import {
 } from 'ordering-components/native';
 
 import {
+  LoginWith,
+  TabsContainer,
   WelcomeTextContainer,
   LogoWrapper,
-  RecaptchaButton
+  RecaptchaButton,
 } from './styles';
 
-import { OText, OButton, OInput, OIcon } from '../shared';
+import { OText, OButton, OInput, OIcon, OModal } from '../shared';
 import { LoginParams } from '../../types';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { _setStoreData } from '../../../../../src/providers/StoreUtil'
+import { Otp } from './Otp'
+import Alert from '../../../../../src/providers/AlertProvider'
+import { PhoneInputNumber } from '../PhoneInputNumber'
 
 const LoginFormUI = (props: LoginParams) => {
   const {
@@ -34,7 +39,16 @@ const LoginFormUI = (props: LoginParams) => {
     handleButtonLoginClick,
     useRootPoint,
     handleReCaptcha,
-    enableReCaptcha
+    enableReCaptcha,
+    checkPhoneCodeState,
+    useLoginByCellphone,
+    useLoginByEmail,
+    loginTab,
+		otpType,
+		setOtpType,
+		generateOtpCode,
+		useLoginOtpEmail,
+		useLoginOtpCellphone,
   } = props;
 
   const theme = useTheme()
@@ -45,17 +59,63 @@ const LoginFormUI = (props: LoginParams) => {
   const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
   const [recaptchaVerified, setRecaptchaVerified] = useState(false)
   const recaptchaRef = useRef<any>({});
-  const { control, handleSubmit, formState: { errors } } = useForm();
+  const { control, handleSubmit, formState: { errors }, clearErrors } = useForm();
   const [orientationState] = useDeviceOrientation();
 
   const [formsStateValues, setFormsStateValues] = useState<any>({ isSubmitted: false })
 
+  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
+  const inputRef = useRef<any>(null);
+  const [windowWidth, setWindowWidth] = useState(
+    parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
+  );
+  const [projectName, setProjectName] = useState('');
+  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+  const [phoneInputData, setPhoneInputData] = useState({
+    error: '',
+    phone: {
+      country_phone_code: null,
+      cellphone: null,
+    },
+  });
+
+  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
+	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+
+  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) => {
+    if (phoneInputData.error) {
+      showToast(ToastType.Error, phoneInputData.error);
+      return;
+    }
+
     if (values?.project_name) {
-      setOrdering({
-        ...ordering,
-        project: values?.project_name
-      })
       _setStoreData('project_name', values?.project_name)
       setFormsStateValues({
         ...formsStateValues,
@@ -65,7 +125,7 @@ const LoginFormUI = (props: LoginParams) => {
       return
     }
 
-    handleButtonLoginClick(values);
+    mainLogin(values)
   };
 
   const handleChangeInputEmail = (value: string, onChange: any) => {
@@ -110,10 +170,52 @@ const LoginFormUI = (props: LoginParams) => {
     },
     forgotStyle: {
       textAlign: 'center',
-      fontWeight: 'bold',
+      fontWeight: '600',
       color: theme.colors.skyBlue,
       marginTop: orientationState?.dimensions?.height * 0.03,
-    }
+    },
+    btn: {
+      borderRadius: 7.6,
+      height: 44,
+    },
+    btnTab: {
+      flex: 1,
+      minWidth: 88,
+      alignItems: 'center',
+    },
+    btnTabText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontSize: 16,
+      marginBottom: 10,
+      paddingLeft: 8,
+      paddingRight: 8,
+    },
+    btnFlag: {
+      width: 79,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      marginRight: 9,
+      borderColor: theme.colors.inputSignup,
+    },
+    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
+		},
   });
 
   useEffect(() => {
@@ -151,7 +253,11 @@ const LoginFormUI = (props: LoginParams) => {
     if (values?.project_name) {
       delete values.project_name
     }
-    handleButtonLoginClick({ ...values })
+    mainLogin(values)
+    setFormsStateValues({
+      ...formsStateValues,
+      isSubmitted: false,
+    })
   }, [ordering, formsStateValues.isSubmitted])
 
 
@@ -190,149 +296,66 @@ const LoginFormUI = (props: LoginParams) => {
     }
   }, [configs, enableReCaptcha])
 
+  const handleChangeTab = (val: string) => {
+    setPhoneInputData({ ...phoneInputData, error: '' });
+    clearErrors([val]);
+    props.handleChangeTab(val);
+
+    if (loginTab === 'email') {
+      scrollRefTab.current?.scrollToEnd({ animated: true });
+    }
+
+    if (loginTab === 'cellphone') {
+      scrollRefTab.current?.scrollTo({ animated: true });
+    }
+  };
+
+  const handleChangeOtpType = (type: string) => {
+		handleChangeTab('otp', type)
+		setOtpType(type)
+	}
+
+	const handleLoginOtp = (code: string) => {
+		handleButtonLoginClick({ code })
+		setWillVerifyOtpState(false)
+	}
+
+	const closeAlert = () => {
+		setAlertState({
+			open: false,
+			title: '',
+			content: []
+		})
+	}
+
+  useEffect(() => {
+		if (checkPhoneCodeState?.result?.error) {
+			setAlertState({
+				open: true,
+				content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+				title: ''
+			})
+		}
+	}, [checkPhoneCodeState])
+
+  useEffect(() => {
+    const projectInputTimeout = setTimeout(() => {
+      if (projectName && useRootPoint) {
+        setOrdering({
+          ...ordering,
+          project: projectName
+        })
+      }
+    }, 1500)
+    return () => clearTimeout(projectInputTimeout);
+  }, [projectName])
+
   const logo = (
     <LogoWrapper>
       <OIcon src={theme.images.logos.logotype} style={styles.logo} />
     </LogoWrapper>
   );
 
-  const InputControllers = (
-    <>
-      {useRootPoint && (
-        <Controller
-          control={control}
-          name='project_name'
-          rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
-          defaultValue=""
-          render={({ onChange, value }: any) => (
-            <OInput
-              name='project_name'
-              placeholder={t('PROJECT_NAME', 'Project Name')}
-              style={styles.inputStyle}
-              value={value}
-              autoCapitalize='none'
-              autoCorrect={false}
-              inputStyle={{ textAlign: 'center' }}
-              onChange={(e: any) => {
-                onChange(e?.target?.value);
-                setFormsStateValues({
-                  ...formsStateValues,
-                  isSubmitted: false,
-                })
-              }}
-            />
-          )}
-        />
-      )}
-
-      <Controller
-        control={control}
-        render={({ onChange, value }: any) => (
-          <OInput
-            placeholder={t('USER', 'User')}
-            style={styles.inputStyle}
-            value={value}
-            autoCapitalize="none"
-            autoCorrect={false}
-            type="email-address"
-            inputStyle={{ textAlign: 'center' }}
-            onChange={(e: any) => {
-              handleChangeInputEmail(e, onChange);
-            }}
-          />
-        )}
-        name="email"
-        rules={{
-          required: t(
-            'VALIDATION_ERROR_EMAIL_REQUIRED',
-            'The field Email is required',
-          ).replace('_attribute_', t('EMAIL', 'Email')),
-          pattern: {
-            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-            message: t(
-              'INVALID_ERROR_EMAIL',
-              'Invalid email address',
-            ).replace('_attribute_', t('EMAIL', 'Email')),
-          },
-        }}
-        defaultValue=""
-      />
-
-      <Controller
-        control={control}
-        render={({ onChange, value }: any) => (
-          <OInput
-            isSecured={true}
-            placeholder={t('PASSWORD', 'Password')}
-            style={styles.inputStyle}
-            value={value}
-            onChange={(val: any) => onChange(val)}
-            inputStyle={{ textAlign: 'center' }}
-          />
-        )}
-        name="password"
-        rules={{
-          required: t(
-            'VALIDATION_ERROR_PASSWORD_REQUIRED',
-            'The field Password is required',
-          ).replace('_attribute_', t('PASSWORD', 'Password')),
-        }}
-        defaultValue=""
-      />
-      {(recaptchaConfig?.version) && (
-        <>
-          {recaptchaConfig?.version === 'v3' ? (
-            <ReCaptcha
-              url={recaptchaConfig?.baseUrl}
-              siteKey={recaptchaConfig?.siteKey}
-              containerStyle={{ height: 40 }}
-              onExecute={onRecaptchaVerify}
-              reCaptchaType={1}
-            />
-          ) : (
-            <>
-              <TouchableOpacity
-                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={handleSubmit(onSubmit)}
-        text={loginButtonText}
-        imgRightSrc={null}
-        isLoading={formState.loading}
-        style={{ borderRadius: 0 }}
-        textStyle={{ fontSize: 24 }}
-      />
-    </>
-  );
-
   const welcome = (
     <WelcomeTextContainer>
       <OText
@@ -357,12 +380,14 @@ const LoginFormUI = (props: LoginParams) => {
   );
 
   const note = (
-    <OText size={24} mBottom={18}>
-      {t('IF_NOT_HAVE_ACCOUNT', 'If you don\'t have and account, please contact Ordering')}&nbsp;
-      <OText size={24} mBottom={18} color={theme.colors.skyBlue}>
-        {t('SUPPORT_DEPARTMENT', 'support department')}
+    useRootPoint && (
+      <OText size={24} mBottom={18}>
+        {t('IF_NOT_HAVE_ACCOUNT', 'If you don\'t have and account, please contact Ordering')}&nbsp;
+        <OText size={24} mBottom={18} color={theme.colors.skyBlue}>
+          {t('SUPPORT_DEPARTMENT', 'support department')}
+        </OText>
       </OText>
-    </OText>
+    )
   )
 
   return (
@@ -416,8 +441,286 @@ const LoginFormUI = (props: LoginParams) => {
               {logo}
             </View>
           )}
-          {InputControllers}
+
+          {(Number(useLoginByEmail) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
+            <LoginWith>
+              <ScrollView
+                ref={scrollRefTab}
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+                horizontal
+                style={{
+                  width: orientationState?.orientation === LANDSCAPE ? orientationState?.dimensions?.width * 0.4 : windowWidth - 42
+                }}
+              >
+                <TabsContainer
+                  width={orientationState?.orientation === LANDSCAPE ? orientationState?.dimensions?.width * 0.4 : windowWidth - 42}
+                >
+                  {useLoginByEmail && (
+                    <Pressable
+                      style={styles.btnTab}
+                      onPress={() => handleChangeTab('email')}>
+                      <OText
+                        style={styles.btnTabText}
+                        color={
+                          loginTab === 'email'
+                            ? theme.colors.black
+                            : theme.colors.lightGray
+                        }
+                        weight={loginTab === 'email' ? '600' : 'normal'}>
+                        {t('BY_EMAIL', 'by Email')}
+                      </OText>
+
+                      <View
+                        style={{
+                          width: '100%',
+                          borderBottomColor:
+                            loginTab === 'email'
+                              ? theme.colors.black
+                              : theme.colors.border,
+                          borderBottomWidth: 2,
+                        }}></View>
+                    </Pressable>
+                  )}
+
+                  {useLoginByCellphone && (
+                    <Pressable
+                      style={styles.btnTab}
+                      onPress={() => handleChangeTab('cellphone')}>
+                      <OText
+                        style={styles.btnTabText}
+                        color={
+                          loginTab === 'cellphone'
+                            ? theme.colors.black
+                            : theme.colors.lightGray
+                        }
+                        weight={loginTab === 'cellphone' ? '600' : 'normal'}>
+                        {t('BY_PHONE', 'by Phone')}
+                      </OText>
+
+                      <View
+                        style={{
+                          width: '100%',
+                          borderBottomColor:
+                            loginTab === 'cellphone'
+                              ? theme.colors.black
+                              : theme.colors.border,
+                          borderBottomWidth: 2,
+                        }}></View>
+                    </Pressable>
+                  )}
+
+                  {useLoginOtpEmail && (
+                    <Pressable
+                      style={styles.btnTab}
+                      onPress={() => handleChangeOtpType('email')}>
+                      <OText
+                        style={styles.btnTabText}
+                        color={
+                          isOtpEmail
+                            ? theme.colors.black
+                            : theme.colors.lightGray
+                        }
+                        weight={isOtpEmail ? '600' : 'normal'}>
+                        {t('BY_OTP_EMAIL', 'By Otp Email')}
+                      </OText>
+                      <View
+                        style={{
+                          width: '100%',
+                          borderBottomColor:
+                            isOtpEmail
+                              ? theme.colors.black
+                              : theme.colors.border,
+                          borderBottomWidth: 2,
+                        }} />
+                    </Pressable>
+                  )}
+                  {useLoginOtpCellphone && (
+                    <Pressable
+                      style={styles.btnTab}
+                      onPress={() => handleChangeOtpType('cellphone')}>
+                      <OText
+                        style={styles.btnTabText}
+                        color={
+                          isOtpCellphone
+                            ? theme.colors.black
+                            : theme.colors.lightGray
+                        }
+                        weight={isOtpCellphone ? '600' : 'normal'}>
+                        {t('BY_OTP_PHONE', 'By Otp Phone')}
+                      </OText>
+                      <View
+                        style={{
+                          width: '100%',
+                          borderBottomColor:
+                          isOtpCellphone
+                              ? theme.colors.black
+                              : theme.colors.border,
+                          borderBottomWidth: 2,
+                        }} />
+                    </Pressable>
+                  )}
+                </TabsContainer>
+              </ScrollView>
+            </LoginWith>
+          )}
+
+          {useRootPoint && (
+            <Controller
+              control={control}
+              name='project_name'
+              rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+              defaultValue=""
+              render={({ onChange, value }: any) => (
+                <OInput
+                  name='project_name'
+                  placeholder={t('PROJECT_NAME', 'Project Name')}
+                  style={styles.inputStyle}
+                  value={value}
+                  autoCapitalize='none'
+                  autoCorrect={false}
+                  inputStyle={{ textAlign: 'center' }}
+                  onChange={(e: any) => {
+                    setProjectName(e?.target?.value)
+                    onChange(e?.target?.value);
+                    setFormsStateValues({
+                      ...formsStateValues,
+                      isSubmitted: false,
+                    })
+                  }}
+                />
+              )}
+            />
+          )}
+
+          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  placeholder={t('USER', 'User')}
+                  style={styles.inputStyle}
+                  value={value}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  type="email-address"
+                  inputStyle={{ textAlign: 'center' }}
+                  onChange={(e: any) => {
+                    handleChangeInputEmail(e, onChange);
+                  }}
+                />
+              )}
+              name="email"
+              rules={{
+                required: t(
+                  'VALIDATION_ERROR_EMAIL_REQUIRED',
+                  'The field Email is required',
+                ).replace('_attribute_', t('EMAIL', 'Email')),
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: t(
+                    'INVALID_ERROR_EMAIL',
+                    'Invalid email address',
+                  ).replace('_attribute_', t('EMAIL', 'Email')),
+                },
+              }}
+              defaultValue=""
+            />
+          )}
+
+          {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
+            <View style={{ marginBottom: 20 }}>
+              <PhoneInputNumber
+                data={phoneInputData}
+                handleData={(val: any) => setPhoneInputData(val)}
+                onSubmitEditing={() => null}
+                textInputProps={{
+                  returnKeyType: 'next',
+                  onSubmitEditing: () => inputRef?.current?.focus?.(),
+                }}
+              />
+            </View>
+          )}
+
+          {loginTab !== 'otp' && (
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  isSecured={true}
+                  placeholder={t('PASSWORD', 'Password')}
+                  style={styles.inputStyle}
+                  value={value}
+                  onChange={(val: any) => onChange(val)}
+                  inputStyle={{ textAlign: 'center' }}
+                />
+              )}
+              name="password"
+              rules={{
+                required: t(
+                  'VALIDATION_ERROR_PASSWORD_REQUIRED',
+                  'The field Password is required',
+                ).replace('_attribute_', t('PASSWORD', 'Password')),
+              }}
+              defaultValue=""
+              forwardRef={inputRef}
+            />
+          )}
+
+          {(recaptchaConfig?.version) && (
+            <>
+              {recaptchaConfig?.version === 'v3' ? (
+                <ReCaptcha
+                  url={recaptchaConfig?.baseUrl}
+                  siteKey={recaptchaConfig?.siteKey}
+                  containerStyle={{ height: 40 }}
+                  onExecute={onRecaptchaVerify}
+                  reCaptchaType={1}
+                />
+              ) : (
+                <>
+                  <TouchableOpacity
+                    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={handleSubmit(onSubmit)}
+            text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
+            imgRightSrc={null}
+            isLoading={formState.loading}
+            style={{ borderRadius: 0 }}
+            textStyle={{ fontSize: 24 }}
+          />
         </View>
+
         {orientationState?.orientation === PORTRAIT && (
           <View style={{
             flexGrow: 1,
@@ -428,6 +731,27 @@ const LoginFormUI = (props: LoginParams) => {
           </View>
         )}
       </View>
+      <OModal
+				open={willVerifyOtpState}
+				onClose={() => setWillVerifyOtpState(false)}
+				entireModal
+				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			>
+				<Otp
+					willVerifyOtpState={willVerifyOtpState}
+					setWillVerifyOtpState={setWillVerifyOtpState}
+					handleLoginOtp={handleLoginOtp}
+					onSubmit={onSubmit}
+					setAlertState={setAlertState}
+				/>
+			</OModal>
+			<Alert
+				open={alertState.open}
+				content={alertState.content}
+				title={alertState.title || ''}
+				onAccept={closeAlert}
+				onClose={closeAlert}
+			/>
     </View>
   );
 };