ordering-ui-react-native 0.18.55 → 0.18.56-crash-driver-1

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, View, RefreshControl, ScrollView, Pressable } from 'react-native';
+import { StyleSheet, View, Pressable, TouchableOpacity } from 'react-native';
 import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 
@@ -9,6 +9,7 @@ import OButton from '../../components/shared/OButton';
 import { LanguageSelector } from '../../components/LanguageSelector';
 import { LogoutPopup } from '../../components/LogoutPopup';
 import { PORTRAIT, LANDSCAPE, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
+import { OIcon } from '../../components/shared';
 
 const Intro = (props: any): React.ReactElement => {
   const { navigation } = props;
@@ -41,6 +42,19 @@ const Intro = (props: any): React.ReactElement => {
     //     />
     //   }
     // >
+    <>
+      <View style={{ position: 'absolute', top: 25, right: 20, zIndex: 1000 }}>
+        <TouchableOpacity
+          onPress={() => setShowLogoutPopup(true)}
+        >
+          <OIcon
+            src={theme.images.general.menulogout}
+            width={24}
+            height={24}
+            color={theme.colors.disabledContrast}
+          />
+        </TouchableOpacity>
+      </View>
       <Pressable onPress={goBusiness}>
         <View style={{ height: orientationState?.dimensions?.height }}>
           {orientationState.orientation === PORTRAIT ? (
@@ -134,6 +148,7 @@ const Intro = (props: any): React.ReactElement => {
           />
         </View>
       </Pressable>
+    </>
     // </ScrollView>
   );
 };

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

@@ -44,15 +44,15 @@ const LoginFormUI = (props: LoginParams) => {
     useLoginByCellphone,
     useLoginByEmail,
     loginTab,
-		otpType,
-		setOtpType,
-		generateOtpCode,
-		useLoginOtpEmail,
-		useLoginOtpCellphone,
+    otpType,
+    setOtpType,
+    generateOtpCode,
+    useLoginOtpEmail,
+    useLoginOtpCellphone,
   } = props;
 
   const theme = useTheme()
-  const [{ configs }] = useConfig()
+  const [{ configs }, { refreshConfigs }] = useConfig()
   const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
@@ -82,31 +82,32 @@ const LoginFormUI = (props: LoginParams) => {
   });
 
   const isOtpEmail = loginTab === 'otp' && otpType === 'email'
-	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+  const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+  const isDeviceLoginEnabled = configs?.device_code_login_enabled?.value === '1'
 
   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,
-			});
-		}
+      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) => {
@@ -199,23 +200,23 @@ const LoginFormUI = (props: LoginParams) => {
       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
-		},
+      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(() => {
@@ -311,32 +312,32 @@ const LoginFormUI = (props: LoginParams) => {
   };
 
   const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp', type)
-		setOtpType(type)
-	}
-
-	const handleLoginOtp = (code: string) => {
-		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
-	}
-
-	const closeAlert = () => {
-		setAlertState({
-			open: false,
-			title: '',
-			content: []
-		})
-	}
+    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])
+    if (checkPhoneCodeState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+        title: ''
+      })
+    }
+  }, [checkPhoneCodeState])
 
   useEffect(() => {
     const projectInputTimeout = setTimeout(() => {
@@ -348,7 +349,13 @@ const LoginFormUI = (props: LoginParams) => {
       }
     }, 1500)
     return () => clearTimeout(projectInputTimeout);
-  }, [projectName])
+  }, [projectName, isDeviceLoginEnabled])
+
+  useEffect(() => {
+    if (ordering?.project) {
+      refreshConfigs()
+    }
+  }, [ordering?.project])
 
   const logo = (
     <LogoWrapper>
@@ -380,12 +387,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 (
@@ -440,7 +449,7 @@ const LoginFormUI = (props: LoginParams) => {
             </View>
           )}
 
-          {(Number(useLoginByEmail) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
+          {!isDeviceLoginEnabled && (Number(useLoginByEmail) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
             <LoginWith>
               <ScrollView
                 ref={scrollRefTab}
@@ -551,7 +560,7 @@ const LoginFormUI = (props: LoginParams) => {
                         style={{
                           width: '100%',
                           borderBottomColor:
-                          isOtpCellphone
+                            isOtpCellphone
                               ? theme.colors.black
                               : theme.colors.border,
                           borderBottomWidth: 2,
@@ -590,8 +599,29 @@ const LoginFormUI = (props: LoginParams) => {
               )}
             />
           )}
-
-          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
+          {isDeviceLoginEnabled && (
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  placeholder={t('DEVICE_CODE', 'Device Code')}
+                  style={styles.inputStyle}
+                  value={value}
+                  inputStyle={{ textAlign: 'center' }}
+                  onChange={(val: any) => onChange(val)}
+                />
+              )}
+              name="device_code"
+              rules={{
+                required: t(
+                  'VALIDATION_ERROR_DEVICE_CODE_REQUIRED',
+                  'The field DEVICE_CODE is required',
+                ).replace('_attribute_', t('DEVICE_CODE', 'Device Code')),
+              }}
+              defaultValue=""
+            />
+          )}
+          {!isDeviceLoginEnabled && ((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
@@ -626,7 +656,7 @@ const LoginFormUI = (props: LoginParams) => {
             />
           )}
 
-          {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
+          {!isDeviceLoginEnabled && ((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
             <View style={{ marginBottom: 20 }}>
               <PhoneInputNumber
                 data={phoneInputData}
@@ -640,7 +670,7 @@ const LoginFormUI = (props: LoginParams) => {
             </View>
           )}
 
-          {loginTab !== 'otp' && (
+          {!isDeviceLoginEnabled && loginTab !== 'otp' && (
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
@@ -730,26 +760,26 @@ const LoginFormUI = (props: LoginParams) => {
         )}
       </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}
-			/>
+        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>
   );
 };

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

@@ -24,11 +24,6 @@ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const PaymentOptionsUI = (props: any) => {
   const {
-    cart,
-    onNavigationRedirect,
-    isDisabled,
-    paymethodData,
-    handlePaymethodDataChange,
     errorCash,
     isLoading,
     paymethodsList,
@@ -48,11 +43,11 @@ const PaymentOptionsUI = (props: any) => {
   const [orientationState] = useDeviceOrientation();
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isOpenModal, setIsOpenModal] = useState(false)
-  const paymethodSelected =
-    paySelected || props.paymethodSelected || isOpenMethod.paymethod;
+  const paymethodSelected = paySelected || props.paymethodSelected || isOpenMethod.paymethod;
+  const includePaymethods = ['cash', 'card_delivery'];
 
   useEffect(() => {
-    if (paymethodsList.paymethods.length === 1) {
+    if (paymethodsList?.paymethods?.length === 1) {
       handlePaymethodClick &&
         handlePaymethodClick(paymethodsList.paymethods[0]);
     }
@@ -85,23 +80,11 @@ const PaymentOptionsUI = (props: any) => {
     }
   }, [isOpenMethod.paymethod, placing, isLoading, paySelected]);
 
-  // const includePaymethods = ['cash', 'card_delivery', 'stripe'];
-  const includePaymethods = ['cash', 'card_delivery'];
-
-  const supportedMethods = paymethodsList.paymethods.filter((p: any) =>
+  const supportedMethods = paymethodsList?.paymethods?.filter((p: any) =>
     includePaymethods.includes(p.gateway),
   );
 
-  const cashIndex: number = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'cash',
-  );
-  const cardOnDeliveryIndex = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'card_delivery',
-  );
-  const stripeIndex = supportedMethods?.findIndex(
-    (item: any) => item?.gateway === 'stripe',
-  );
-  const onSelectPaymethod = (paymethod: any, isPopupMethod: boolean) => {
+  const onSelectPaymethod = (paymethod: any) => {
     handlePaymethodClick(paymethod);
   };
 
@@ -132,57 +115,15 @@ const PaymentOptionsUI = (props: any) => {
         : orientationState?.dimensions?.height * 0.55,
   };
 
-  const propsOfItems = {
-    CASH_ID:
-      cashIndex !== -1
-        ? {
-          style: cardStyle,
-          title: t('CASH', 'Cash'),
-          description: t(
-            'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-            'Pay with cash in the front counter',
-          ),
-          bgImage: theme.images.general.cash,
-          callToActionText: t('LETS_GO', 'LETS_GO'),
-          VectorIcon: () => <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />,
-          onClick: () =>
-            onSelectPaymethod(supportedMethods[cashIndex], false),
-          ...supportedMethods[cashIndex],
-        }
-        : null,
-
-    CARD_ON_DELIVERY_ID:
-      cardOnDeliveryIndex !== -1
-        ? {
-          style: cardStyle,
-          title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
-          description: t(
-            'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-            'We accept every debit or credit card',
-          ),
-          bgImage: theme.images.general.carddelivery,
-          callToActionText: t("LETS_GO", "Let's go"),
-          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
-          onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
-          ...supportedMethods[cardOnDeliveryIndex],
-        }
-        : null,
-    STRIPE:
-      stripeIndex !== -1
-        ? {
-          style: cardStyle,
-          title: t('STRIPE', supportedMethods[stripeIndex]?.name),
-          description: t('STRIPE', 'Stripe'),
-          bgImage: theme.images.general.carddelivery,
-          callToActionText: t('INSERT_INFO', 'Test info'),
-          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
-          onClick: () => {
-            onSelectPaymethod(supportedMethods[stripeIndex], false);
-            setIsOpenModal(true)
-          },
-          ...supportedMethods[stripeIndex],
-        }
-        : null,
+  const description = {
+    cash: t(
+      'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+      'Pay with cash in the front counter',
+    ),
+    card_delivery: t(
+      'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+      'We accept every debit or credit card',
+    ),
   };
 
   const goToBack = () => navigation?.goBack();
@@ -192,47 +133,40 @@ const PaymentOptionsUI = (props: any) => {
       <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        {supportedMethods?.length > 0 && (
-          <>
-            <NavBar
-              title={t('PAYMENT_METHODS', 'Payment methods')}
-              onActionLeft={goToBack}
-              btnStyle={{ paddingLeft: 0 }}
-            />
-
-            <View
-              style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-              <OText size={orientationState?.dimensions?.width * 0.048}>
-                {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-                <OText
-                  size={orientationState?.dimensions?.width * 0.048}
-                  weight={'700'}>
-                  {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-                </OText>
-              </OText>
-            </View>
-
-            <GridContainer style={{ justifyContent: 'space-between' }}>
-              {propsOfItems.CARD_ON_DELIVERY_ID && (
-                <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
-                  <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
-                </View>
-              )}
-
-              <View
-                style={{
-                  width:
-                    orientationState?.orientation === LANDSCAPE
-                      ? orientationState?.dimensions?.width * 0.0016
-                      : 1,
-                  height:
-                    orientationState?.orientation === PORTRAIT
-                      ? orientationState?.dimensions?.height * 0.018
-                      : 1,
-                }}
-              />
-
-              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+        <NavBar
+          title={t('PAYMENT_METHODS', 'Payment methods')}
+          onActionLeft={goToBack}
+          btnStyle={{ paddingLeft: 0 }}
+        />
+
+        <View
+          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+          <OText size={orientationState?.dimensions?.width * 0.048}>
+            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+            <OText
+              size={orientationState?.dimensions?.width * 0.048}
+              weight={'700'}>
+              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+            </OText>
+          </OText>
+        </View>
+
+        <GridContainer style={{ justifyContent: 'space-between' }}>
+          {supportedMethods?.length > 0 ? (supportedMethods?.map((paymethod: any, i: number) => (
+            <>
+              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                <OptionCard
+                  {...{
+                    style: cardStyle,
+                    title: t(`${paymethod.gateway.toUpperCase().replace(/\s/g, '_')}`, paymethod.name),
+                    description: description[paymethod.gateway] ?? t(`${paymethod.gateway.toUpperCase().replace(/\s/g, '_')}`, paymethod.name),
+                    bgImage: paymethod.name === 'Cash' ? theme.images.general.cash : theme.images.general.carddelivery,
+                    callToActionText: paymethod.name === 'Cash' ? t('LETS_GO', 'LETS_GO') : t('INSERT_INFO', 'Test info'),
+                    VectorIcon: () => paymethod.name === 'Cash' ? <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} /> : <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+                    onClick: () => onSelectPaymethod(paymethod, false),
+                  }}
+                />
+              </View>
 
               <View
                 style={{
@@ -246,13 +180,15 @@ const PaymentOptionsUI = (props: any) => {
                       : 1,
                 }}
               />
-
-              {propsOfItems.STRIPE && (
-                <OptionCard {...propsOfItems?.STRIPE} />
-              )}
-            </GridContainer>
-          </>
-        )}
+            </>
+          ))) : (
+            <OText
+              size={orientationState?.dimensions?.width * 0.048}
+              weight={'700'}>
+              {`${t('NO_PAYMETHODS_AVAILABLES', 'No paymethods availables')}`}
+            </OText>
+          )}
+        </GridContainer>
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal
           open={isOpenModal}

package/themes/original/index.tsx

@@ -99,12 +99,15 @@ import { Promotions } from './src/components/Promotions'
 import { PageBanner } from './src/components/PageBanner'
 import { MultiCart } from './src/components/MultiCart'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
-
+import { DatePickerUI } from './src/components/DatePicker'
+import { WebsocketStatus } from './src/components/WebsocketStatus';
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
 import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
 import { OSItem, OSItemContent, OSItemActions } from './src/components/PaymentOptionStripe/styles';
 
+import { orderTypeList } from './src/utils'
+
 import Alert from './src/providers/AlertProvider'
 
 import {
@@ -263,7 +266,8 @@ export {
 	Promotions,
 	PageBanner,
 	MyOrders,
-  MultiCart,
+	MultiCart,
+	WebsocketStatus,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -340,5 +344,9 @@ export {
 	_retrieveStoreData,
 	_setStoreData,
 	_removeStoreData,
-	_clearStoreData
+	_clearStoreData,
+	orderTypeList,
+
+	// Date Picker
+	DatePickerUI
 }