ordering-ui-react-native 0.17.37 → 0.17.38-release

package/themes/original/src/components/HelpAccountAndPayment/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Platform } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
@@ -7,8 +8,10 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
-  Content
+  Content,
+  Container
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const {
@@ -18,15 +21,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
     imageStyle: {
       width: '100%',
       height: 300,
@@ -37,18 +31,13 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+    <Container>
+      <NavBar
+        title={t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <Content>
         <OText mBottom={20}>
           -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
@@ -68,6 +57,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

package/themes/original/src/components/HelpAccountAndPayment/styles.tsx

@@ -4,3 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+`

package/themes/original/src/components/HelpGuide/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
+import NavBar from '../NavBar'
 import {
-  Content
+  Content,
+  Container
 } from './styles'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -36,18 +37,13 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
+      <NavBar
+        title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
         <OText mBottom={15}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
@@ -67,6 +63,6 @@ export const HelpGuide = (props: HelpGuideParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

package/themes/original/src/components/HelpGuide/styles.tsx

@@ -4,3 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+    padding-top: ${(props: any) => props.pdng}
+`

package/themes/original/src/components/HelpOrder/index.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { WebView } from 'react-native-webview'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import NavBar from '../NavBar'
 
 import {
-  Content
+  Content,
+  Container
 } from './styles'
 
 export const HelpOrder = (props: HelpOrderParams) => {
@@ -19,15 +20,6 @@ export const HelpOrder = (props: HelpOrderParams) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
     imageStyle: {
       width: '100%',
       height: 120
@@ -41,18 +33,13 @@ export const HelpOrder = (props: HelpOrderParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+    <Container>
+      <NavBar
+        title={t('HELP_WITH_ORDER', 'Help with an order')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
         <OText mBottom={20}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.
@@ -79,6 +66,6 @@ export const HelpOrder = (props: HelpOrderParams) => {
           style={styles.videoStyle}
         />
       </Content>
-    </>
+    </Container>
   )
 }

package/themes/original/src/components/HelpOrder/styles.tsx

@@ -3,4 +3,11 @@ import styled from 'styled-components/native'
 export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
-`
+`
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+`
+

package/themes/original/src/components/Home/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useEffect } from 'react';
+import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
@@ -8,12 +8,21 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
-	const { onNavigationRedirect } = props;
+	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
+	const [{ configs }] = useConfig()
 
 	const theme = useTheme();
+	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
 
 	return (
 		<View style={styles.container}>
@@ -60,7 +69,7 @@ export const Home = (props: any) => {
 					style={{ ...styles.textLink, marginTop: 12 }}
 					onPress={() =>
 						orderState?.options?.address?.address
-							? onNavigationRedirect('BusinessList', { isGuestUser: true })
+							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
 							: onNavigationRedirect('AddressForm', { isGuestUser: true })
 					}>
 					<OText weight="normal" size={18} color={theme.colors.white}>

package/themes/original/src/components/LastOrder/index.tsx

@@ -6,6 +6,7 @@ import { NotFoundSource } from '../NotFoundSource'
 
 import { ItemWrap } from './styles'
 import { OrdersOptionParams } from '../../types'
+import { getOrderStatus } from '../../utils'
 
 import {
 	Placeholder,
@@ -67,40 +68,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		return moment(dateStr).format('MMMM DD,YYYY - hh:mm a');
 	}
 
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s)
-		const orderStatus = [
-			{ key: 0, value: t('PENDING', 'Pending') },
-			{ key: 1, value: t('COMPLETED', 'Completed') },
-			{ key: 2, value: t('REJECTED', 'Rejected') },
-			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-			{ key: 13, value: t('PREORDER', 'PreOrder') },
-			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
-
 	return (
 		<>
 			{/* {(orders.length > 0) && (

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

@@ -1,91 +1,155 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform } 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 { OText, OButton, OIcon } from '../../shared';
+import OtpInputs from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
 
 export const Otp = (props: otpParams) => {
-    const {
-        willVerifyOtpState,
-        setWillVerifyOtpState,
-        onSubmit,
-        handleLoginOtp,
-        setAlertState,
-        pinCount
-    } = props
+  const {
+    willVerifyOtpState,
+    setWillVerifyOtpState,
+    onSubmit,
+    handleLoginOtp,
+    setAlertState,
+    pinCount,
+    otpError,
+    setOtpError
+  } = props
 
-    const theme = useTheme();
-    const [, t] = useLanguage();
-    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
-        600, willVerifyOtpState)
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+    600, willVerifyOtpState)
 
+  const [code, setCode] = useState('')
+  const inputRef = useRef<any>()
 
-    const handleOnSubmit = () => {
-        setAlertState({
-            open: true,
-            title: t('CODE_SENT', 'The code has been sent'),
-        })
-        resetOtpLeftTime()
-        onSubmit()
+  const handleOnSubmit = () => {
+    setAlertState({
+      open: true,
+      title: t('CODE_SENT', 'The code has been sent'),
+    })
+    resetOtpLeftTime()
+    onSubmit()
+  }
+
+  const handleChangeCode = (code : string) => {
+    setCode(code)
+    setOtpError(null)
+  }
+
+  const handleCloseOtp = () => {
+    setWillVerifyOtpState(false)
+    setOtpError(null)
+  }
+
+  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 (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 (code?.length === (pinCount || 6)) {
+      handleLoginOtp(code)
+      inputRef?.current?.reset()
+    }
+  }, [code])
 
-    const loginStyle = StyleSheet.create({
-        underlineStyleBase: {
-            width: 45,
-            height: 60,
-            borderWidth: 1,
-            fontSize: 16
-        },
-        underlineStyleHighLighted: {
-            borderColor: theme.colors.primary,
-            color: theme.colors.primary,
-            fontSize: 16
-        },
-    });
+  const loginStyle = StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginVertical: 30
+    },
+    underlineStyleBase: {
+      width: 45,
+      height: 50,
+      borderWidth: 1,
+      fontSize: 16,
+      borderRadius: 8,
+      borderColor: theme.colors.lightGray,
+      textAlign: 'center'
+    },
+    underlineStyleHighLighted: {
+      borderColor: theme.colors.primary,
+      color: theme.colors.primary,
+      fontSize: 16
+    },
+    wrapperIcon: {
+      marginTop: Platform.OS === 'ios' ? 40 : 12,
+      marginBottom: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: 35
+    },
+    closeContainer: {
+      width: '100%',
+      flexDirection: 'row',
+    }
+  });
 
-    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}
-                />
-                <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>
-        </>
-    )
+  return (
+    <>
+      <OTPContainer>
+        <View
+          style={loginStyle.closeContainer}>
+          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
+            <OIcon
+              src={theme.images.general.close}
+              width={22}
+            />
+          </TouchableOpacity>
+          <OText size={22} style={{
+            marginTop: 5
+          }}>
+            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+          </OText>
+        </View>
+        <OText size={24}>
+          {formatSeconds(otpLeftTime)}
+        </OText>
+        <OtpInputs
+          ref={inputRef}
+          autofillFromClipboard
+          numberOfInputs={pinCount || 6}
+          style={loginStyle.container}
+          inputStyles={loginStyle.underlineStyleBase}
+          handleChange={handleChangeCode}
+        />
+        {!!otpError && (
+          <OText
+            color={theme?.colors?.error}
+            size={20}
+            mBottom={10}
+          >
+            {t(otpError, otpError)}
+          </OText>
+        )}
+        <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={() => handleCloseOtp()}
+          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/original/src/components/LoginForm/Otp/styles.tsx

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