ordering-ui-react-native 0.16.72-release → 0.16.73-release

package/package.json

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

package/src/components/OrderCreating/index.tsx

@@ -131,7 +131,7 @@ export const OrderCreating = (props: any) => {
           <OText size={14}>{address}</OText>
         </LocationWrapper>
       )}
-      {cart && (
+      {cart && !orderState?.options?.moment && (
         <DeliveryWrapper>
           <DeliveryContentWrapper>
             <SimpleIcon
@@ -175,4 +175,4 @@ export const OrderCreating = (props: any) => {
       )}
     </OrderCreatingContainer>
   )
-}
+}

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

@@ -95,7 +95,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     upper: {
       flex: 1,
       zIndex: 1001,
-      paddingTop: isPage ? 30 : 80,
+      paddingTop: isPage ? 30 : 50,
       marginBottom: 10,
       backgroundColor: theme.colors.backgroundPage
     },
@@ -418,7 +418,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             </Header>
 
             {action === 'accept' && (
-              <View style={{ height: 400, justifyContent: 'center' }}>
+              <View style={{ height: 300, justifyContent: 'center' }}>
                 <Timer onPress={() => openTimerIOnput()}>
                   <OText weight="600" style={{ textAlign: 'center' }} size={55}>
                     {hour}

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) {
@@ -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,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);
@@ -272,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(() => {
@@ -360,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)),
@@ -445,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 (
@@ -461,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}
@@ -522,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
@@ -561,7 +688,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByEmail && loginTab === 'email' && (
+          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
@@ -606,7 +733,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {useLoginByCellphone && loginTab === 'cellphone' && (
+          {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
             <View style={{ marginBottom: 20 }}>
               <PhoneInputNumber
                 data={phoneInputData}
@@ -621,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')}>
@@ -723,7 +852,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 +892,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 +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;
+`;

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { View, Animated } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -36,6 +36,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [{ parsePrice }] = useUtils();
 
   const [isActive, setActiveState] = useState(false);
+  const [isReadMore, setIsReadMore] = useState(false);
+  const [lengthMore, setLengthMore] = useState(false);
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -108,6 +110,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     }
   }, []);
 
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <AccordionSection>
       <Accordion
@@ -288,9 +294,21 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                   color={theme.colors.unselectText}>
                   {t('COMMENT', 'Comment')}
                 </OText>
-                <OText size={12} mLeft={10} color={theme.colors.unselectText}>
+                <OText
+                  size={12}
+                  style={{ width: '100%', paddingLeft: 10 }}
+                  color={theme.colors.unselectText}
+                  onTextLayout={onTextLayout}
+                  numberOfLines={isReadMore ? 15 : 2}
+                  ellipsizeMode="tail"
+                >
                   {product.comment}
                 </OText>
+                {lengthMore && (
+                  <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)} style={{ marginLeft: 10 }}>
+                    <OText size={10} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+                  </TouchableOpacity>
+                )}
               </ProductComment>
             )}
           </AccordionContent>