ordering-ui-react-native 0.16.93 → 0.16.94-release

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react'
+import { formatSeconds } from '../../../utils'
+import { StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
+import { useLanguage } from 'ordering-components/native';
+import { OTPContainer } from './styles';
+import { OText, OButton } from '../../shared';
+import OTPInputView from '@twotalltotems/react-native-otp-input'
+import { useTheme } from 'styled-components/native';
+import { otpParams } from '../../../types'
+
+export const Otp = (props: otpParams) => {
+    const {
+        willVerifyOtpState,
+        setWillVerifyOtpState,
+        onSubmit,
+        handleLoginOtp,
+        setAlertState,
+        pinCount,
+        formState
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [code, setCode] = useState('')
+    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+        600, willVerifyOtpState)
+
+
+    const handleOnSubmit = () => {
+        setAlertState({
+            open: true,
+            title: t('CODE_SENT', 'The code has been sent'),
+        })
+        resetOtpLeftTime()
+        onSubmit()
+    }
+
+    useEffect(() => {
+        if (otpLeftTime === 0) {
+            setAlertState({
+                open: true,
+                title: t('TIME_IS_UP', 'Time is up'),
+                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+            })
+        }
+    }, [otpLeftTime])
+
+    useEffect(() => {
+        if (!formState?.loading && formState?.result?.error) {
+            Alert.alert(
+                t('ERROR', 'Error'),
+                typeof formState.result?.result === 'string'
+                  ? formState.result?.result
+                  : formState.result?.result[0],
+                [
+                    {
+                        text: t('ACCEPT', 'Accept'),
+                        onPress: () => {},
+                        style: 'cancel'
+                    },
+                ],
+                { cancelable: false }
+            )
+
+            if (code.length === (pinCount || 6)) {
+                setCode('')
+            }
+
+        }
+    }, [formState])
+
+    const loginStyle = StyleSheet.create({
+        underlineStyleBase: {
+            width: 45,
+            height: 60,
+            borderWidth: 1,
+            fontSize: 16
+        },
+        underlineStyleHighLighted: {
+            borderColor: theme.colors.primary,
+            color: theme.colors.primary,
+            fontSize: 16
+        },
+    });
+
+    return (
+        <>
+            <OTPContainer>
+                <OText size={24}>
+                    {formatSeconds(otpLeftTime)}
+                </OText>
+                <OTPInputView
+                    style={{ width: '100%', height: 150 }}
+                    pinCount={pinCount || 6}
+                    codeInputFieldStyle={loginStyle.underlineStyleBase}
+                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
+                    onCodeFilled={(code: string) => handleLoginOtp(code)}
+                    selectionColor={theme.colors.primary}
+                    editable
+                    code={code}
+                    onCodeChanged={(code: string) => setCode(code)}
+                />
+                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+                        {t('RESEND_CODE', 'Resend code')}
+                    </OText>
+                </TouchableOpacity>
+                <OButton
+                    onClick={() => setWillVerifyOtpState(false)}
+                    bgColor={theme.colors.white}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: theme.colors.primary }}
+                    style={{ borderRadius: 8, width: '100%' }}
+                    text={t('CANCEL', 'Cancel')}
+                />
+            </OTPContainer>
+        </>
+    )
+}

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+export const OTPContainer = styled.View`
+  padding: 20px;
+  align-items: center;
+  flex: 1 
+`

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

@@ -28,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';
@@ -36,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,
@@ -54,7 +59,14 @@ const LoginFormUI = (props: LoginParams) => {
     useRootPoint,
     notificationState,
     handleReCaptcha,
-    enableReCaptcha
+    enableReCaptcha,
+
+    useLoginOtp,
+		otpType,
+		setOtpType,
+		generateOtpCode,
+		useLoginOtpEmail,
+		useLoginOtpCellphone,
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -97,6 +109,12 @@ const LoginFormUI = (props: LoginParams) => {
 
   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) {
@@ -179,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);
@@ -208,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();
 
@@ -226,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);
@@ -271,27 +328,17 @@ const LoginFormUI = (props: LoginParams) => {
         showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
         return
       }
-      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'),
-                ),
-        );
+      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(() => {
@@ -359,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 +476,8 @@ const LoginFormUI = (props: LoginParams) => {
       borderRadius: 7.6,
       borderColor: theme.colors.inputSignup,
       backgroundColor: theme.colors.transparent,
+      minHeight: 50,
+      maxHeight : 50
     },
     btn: {
       borderRadius: 7.6,
@@ -444,6 +504,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 (
@@ -460,7 +539,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}
@@ -521,12 +600,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
@@ -560,7 +690,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByEmail && loginTab === 'email' && (
+          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
@@ -605,7 +735,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByCellphone && loginTab === 'cellphone' && (
+          {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
             <View style={{ marginBottom: 20 }}>
               <PhoneInputNumber
                 data={phoneInputData}
@@ -620,54 +750,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')}>
@@ -722,7 +854,7 @@ const LoginFormUI = (props: LoginParams) => {
           )}
           <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}
@@ -762,7 +894,10 @@ const LoginFormUI = (props: LoginParams) => {
           </>
         )}
 
-      <OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
+      <OModal
+        open={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+      >
         <VerifyPhone
           phone={phoneInputData.phone}
           verifyPhoneState={verifyPhoneState}
@@ -772,6 +907,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>
   );
 };
@@ -785,3 +943,4 @@ export const LoginForm = (props: any) => {
 
   return <LoginFormController {...loginProps} />;
 };
+

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;
+`;

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

@@ -21,6 +21,7 @@ const MapViewComponent = (props: MapViewParams) => {
     customerMarkerGroups,
     alertState,
     setAlertState,
+    setDriverLocation,
     onNavigationRedirect,
     getBusinessLocations,
   } = props;
@@ -41,7 +42,7 @@ const MapViewComponent = (props: MapViewParams) => {
     followUserLocation
   } = useLocation();
 
-  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+  const location = { lat: userLocation?.latitude, lng: userLocation?.longitude }
   const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
   const closeAlert = () => {
     setAlertState({
@@ -56,8 +57,8 @@ const MapViewComponent = (props: MapViewParams) => {
         [
           { latitude: location.latitude, longitude: location.longitude },
           {
-            latitude: userLocation.latitude,
-            longitude: userLocation.longitude,
+            latitude: userLocation?.latitude,
+            longitude: userLocation?.longitude,
           },
         ],
         {
@@ -102,7 +103,7 @@ const MapViewComponent = (props: MapViewParams) => {
     return () => {
       stopFollowUserLocation();
     };
-  }, []);
+  }, [isFocused]);
 
   useFocusEffect(
     useCallback(() => {
@@ -211,6 +212,16 @@ const MapViewComponent = (props: MapViewParams) => {
     )
   }
 
+  useEffect(() => {
+    if (userLocation?.latitude !== 0 && userLocation?.longitude !== 0) {
+      const location = {
+        lat: userLocation?.latitude,
+        lng: userLocation?.longitude
+      }
+      setDriverLocation({ location })
+    }
+  }, [userLocation])
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
@@ -220,8 +231,8 @@ const MapViewComponent = (props: MapViewParams) => {
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition.latitude,
-                longitude: initialPosition.longitude,
+                latitude: initialPosition?.latitude,
+                longitude: initialPosition?.longitude,
                 latitudeDelta: haveOrders ? 0.01 : 0.1,
                 longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
@@ -241,7 +252,7 @@ const MapViewComponent = (props: MapViewParams) => {
                     orderIds={marker.map((order: any) => order.id).join(', ')}
                   />
                 ))}
-                {Object.values(customerMarkerGroups).map((marker: any) =>  (
+                {Object.values(customerMarkerGroups).map((marker: any) => (
                   <RenderMarker
                     key={marker[0]?.customer_id}
                     marker={marker[0]}