ordering-ui-react-native 0.17.53 → 0.17.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.53",
+  "version": "0.17.55",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react'
+import { formatSeconds } from '../../../utils'
+import { StyleSheet, TouchableOpacity } 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
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    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])
+
+    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
+                />
+                <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) {
@@ -209,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();
 
@@ -227,13 +270,27 @@ 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 })
+		setWillVerifyOtpState(false)
+	}
+
+	const closeAlert = () => {
+		setAlertState({
+			open: false,
+			title: '',
+			content: []
+		})
+	}
+
   const handleVerifyCodeClick = () => {
     if (phoneInputData.error) {
       showToast(ToastType.Error, phoneInputData.error);
@@ -360,9 +417,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)),
@@ -445,6 +513,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 (
@@ -461,7 +548,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}
@@ -522,12 +609,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
@@ -561,7 +699,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByEmail && loginTab === 'email' && (
+          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
@@ -606,7 +744,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByCellphone && loginTab === 'cellphone' && (
+          {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
             <View style={{ marginBottom: 20 }}>
               <PhoneInputNumber
                 data={phoneInputData}
@@ -621,54 +759,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')}>
@@ -723,7 +863,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}
@@ -763,7 +903,10 @@ const LoginFormUI = (props: LoginParams) => {
           </>
         )}
 
-      <OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
+      <OModal
+        open={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+      >
         <VerifyPhone
           phone={phoneInputData.phone}
           verifyPhoneState={verifyPhoneState}
@@ -773,6 +916,28 @@ 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}
+				/>
+			</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;
+`;

package/themes/business/src/types/index.tsx

@@ -23,6 +23,20 @@ export interface LoginParams {
   notificationState?: any;
   handleReCaptcha?: any;
   enableReCaptcha?: any;
+
+  otpType?: string,
+	setOtpType: (type : string) => void,
+	generateOtpCode: (values ?: any) => void,
+	useLoginOtpEmail?: boolean,
+	useLoginOtpCellphone?: boolean,
+	useLoginOtp?: boolean
+}
+export interface otpParams {
+	willVerifyOtpState: boolean,
+	setWillVerifyOtpState: (val : boolean) => void,
+	onSubmit: () => void,
+	handleLoginOtp: (code : string) => void,
+	setAlertState: any
 }
 export interface ProfileParams {
   navigation?: any;

package/themes/business/src/utils/index.tsx

@@ -353,3 +353,19 @@ export const transformDistance = (value : number, distanceUnit?: string) => {
       ? (value * 3280.84).toFixed(0)
       : (value).toFixed(2)
 }
+
+export const formatSeconds = (seconds : number) => {
+  // Hours, minutes and seconds
+  const hrs = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  let ret = ''
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}

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

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react'
+import { formatSeconds } from '../../../utils'
+import { StyleSheet, TouchableOpacity } 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
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    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])
+
+    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
+                />
+                <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/kiosk/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 
+`