ordering-ui-react-native 0.17.65-release → 0.17.66-release

package/package.json

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

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

@@ -5,20 +5,23 @@ import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
 import { OText, OButton, OIcon } from '../../shared';
-import OtpInputs from 'react-native-otp-inputs';
+import OtpInputs, { OtpInputsRef } from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
+import { ActivityIndicator } from 'react-native';
 
 export const Otp = (props: otpParams) => {
   const {
+    pinCount,
+    otpError,
+    setOtpError,
+    setAlertState,
     willVerifyOtpState,
+    isCheckingCode,
+    setCheckingCode,
     setWillVerifyOtpState,
-    onSubmit,
     handleLoginOtp,
-    setAlertState,
-    pinCount,
-    otpError,
-    setOtpError
+    onSubmit,
   } = props
 
   const theme = useTheme();
@@ -26,8 +29,7 @@ export const Otp = (props: otpParams) => {
   const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
     600, willVerifyOtpState)
 
-  const [code, setCode] = useState('')
-  const inputRef = useRef<any>()
+  const inputRef = useRef<OtpInputsRef | any>(null)
 
   const handleOnSubmit = () => {
     setAlertState({
@@ -39,7 +41,12 @@ export const Otp = (props: otpParams) => {
   }
 
   const handleChangeCode = (code : string) => {
-    setCode(code)
+    if (code?.length === pinCount) {
+      setCheckingCode(true)
+      handleLoginOtp(code)
+      inputRef.current?.reset && inputRef.current.reset()
+      setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
+    }
     setOtpError(null)
   }
 
@@ -58,13 +65,6 @@ export const Otp = (props: otpParams) => {
     }
   }, [otpLeftTime])
 
-  useEffect(() => {
-    if (code?.length === (pinCount || 6)) {
-      handleLoginOtp(code)
-      inputRef?.current?.reset()
-    }
-  }, [code])
-
   const loginStyle = StyleSheet.create({
     container: {
       width: '100%',
@@ -95,6 +95,13 @@ export const Otp = (props: otpParams) => {
       width: '100%',
       flexDirection: 'row',
       alignItems: 'center'
+    },
+    checkingCode: {
+      height: 50,
+      width: '100%',
+      marginVertical: 30,
+      justifyContent: 'center',
+      alignItems: 'center'
     }
   });
 
@@ -116,14 +123,24 @@ export const Otp = (props: otpParams) => {
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>
-        <OtpInputs
-          ref={inputRef}
-          autofillFromClipboard
-          numberOfInputs={pinCount || 6}
-          style={loginStyle.container}
-          inputStyles={loginStyle.underlineStyleBase}
-          handleChange={handleChangeCode}
-        />
+        {isCheckingCode && (
+          <View style={loginStyle.checkingCode}>
+            <OText size={18}>
+              <ActivityIndicator size="large" color={theme.colors.primary} />
+            </OText>
+          </View>
+        )}
+        {!isCheckingCode && (
+          <OtpInputs
+            ref={inputRef}
+            autofillFromClipboard={false}
+            numberOfInputs={pinCount}
+            style={loginStyle.container}
+            returnKeyType={'done'}
+            inputStyles={loginStyle.underlineStyleBase}
+            handleChange={handleChangeCode}
+          />
+        )}
         {!!otpError && (
           <OText
             color={theme?.colors?.error}
@@ -150,3 +167,7 @@ export const Otp = (props: otpParams) => {
     </SafeAreaView>
   )
 }
+
+Otp.defaultProps = {
+  pinCount: 6
+}

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

@@ -104,6 +104,8 @@ const LoginFormUI = (props: LoginParams) => {
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
+	const [isCheckingCode, setCheckingCode] = useState(false)
+
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
 	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
@@ -268,6 +270,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleLoginOtp = async (code: string) => {
 		if (!code) return
 		const logged = await handleButtonLoginClick({ code })
+		setCheckingCode(false)
 		if (logged) {
 			setWillVerifyOtpState(false)
 		} else {
@@ -854,6 +857,8 @@ const LoginFormUI = (props: LoginParams) => {
 				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
 					willVerifyOtpState={willVerifyOtpState}
 					otpError={otpError}
 					setOtpError={setOtpError}

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

@@ -64,7 +64,8 @@ const MultiCheckoutUI = (props: any) => {
     cartGroup,
     walletState,
     onNavigationRedirectReplace,
-    merchantId
+    merchantId,
+    cartsInvalid
   } = props
 
   const theme = useTheme();
@@ -89,7 +90,7 @@ const MultiCheckoutUI = (props: any) => {
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
   const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-
+  const cartsToShow = openCarts?.length > 0 ? openCarts : cartsInvalid
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -138,7 +139,7 @@ const MultiCheckoutUI = (props: any) => {
   const isDisablePlaceOrderButton = cartGroup?.loading || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
     (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data) ||
     walletCarts.length > 0
-    || (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
+    || (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) || openCarts?.length === 0
 
   const handleMomentClick = () => {
     if (isPreOrder) {
@@ -179,7 +180,7 @@ const MultiCheckoutUI = (props: any) => {
     setPhoneUpdate(val)
   }
 
-  const handlePlaceOrder = (confirmPayment ?: any) => {
+  const handlePlaceOrder = (confirmPayment?: any) => {
     if (!userErrors.length) {
       handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
       return
@@ -199,14 +200,14 @@ const MultiCheckoutUI = (props: any) => {
   }, [validationFields, user])
 
   useEffect(() => {
-    if (openCarts.length === 1) {
+    if (cartsToShow?.length === 1) {
       onNavigationRedirectReplace('CheckoutPage', {
-        cartUuid: openCarts[0]?.uuid,
+        cartUuid: cartsToShow[0]?.uuid,
         fromMulti: true
       })
       return
     }
-  }, [openCarts])
+  }, [cartsToShow])
 
   useEffect(() => {
     if (walletState.error) {
@@ -221,14 +222,14 @@ const MultiCheckoutUI = (props: any) => {
   }, [cartUuid])
 
   useEffect(() => {
-    if(paymethodSelected?.gateway === 'global_google_pay'){
+    if (paymethodSelected?.gateway === 'global_google_pay') {
       setMethodPaySupported({
         enabled: true,
         loading: false,
         message: null
       })
     }
-	}, [paymethodSelected])
+  }, [paymethodSelected])
 
   return (
     <>
@@ -309,27 +310,27 @@ const MultiCheckoutUI = (props: any) => {
             </ChAddress>
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
           </ChSection>
-
-          <ChSection>
-            <MultiCartsPaymethodsAndWallets
-              openCarts={openCarts}
-              paymethodSelected={paymethodSelected}
-              walletsPaymethod={cartGroup?.result?.wallets}
-              handleSelectPaymethod={handleSelectPaymethod}
-              handleSelectWallet={handleSelectWallet}
-              handlePaymethodDataChange={handlePaymethodDataChange}
-              cartUuid={cartUuid}
-              merchantId={merchantId}
-              setMethodPaySupported={setMethodPaySupported}
-              methodPaySupported={methodPaySupported}
-              placeByMethodPay={placeByMethodPay}
-              setPlaceByMethodPay={setPlaceByMethodPay}
-              cartTotal={totalCartsPrice}
-              handlePlaceOrder={handlePlaceOrder}
-            />
-            <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
-          </ChSection>
-
+          {openCarts?.length > 0 && (
+            <ChSection>
+              <MultiCartsPaymethodsAndWallets
+                openCarts={openCarts}
+                paymethodSelected={paymethodSelected}
+                walletsPaymethod={cartGroup?.result?.wallets}
+                handleSelectPaymethod={handleSelectPaymethod}
+                handleSelectWallet={handleSelectWallet}
+                handlePaymethodDataChange={handlePaymethodDataChange}
+                cartUuid={cartUuid}
+                merchantId={merchantId}
+                setMethodPaySupported={setMethodPaySupported}
+                methodPaySupported={methodPaySupported}
+                placeByMethodPay={placeByMethodPay}
+                setPlaceByMethodPay={setPlaceByMethodPay}
+                cartTotal={totalCartsPrice}
+                handlePlaceOrder={handlePlaceOrder}
+              />
+              <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+            </ChSection>
+          )}
           {
             isMultiDriverTips &&
             options?.type === 1 &&
@@ -364,6 +365,7 @@ const MultiCheckoutUI = (props: any) => {
             validationFields?.fields?.checkout?.coupon?.enabled &&
             openCarts.every((cart: any) => cart.business_id && cart.status !== 2) &&
             configs?.multi_business_checkout_coupon_input_style?.value === 'group' &&
+            openCarts?.length > 0 &&
             (
               <ChSection>
                 <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
@@ -390,7 +392,7 @@ const MultiCheckoutUI = (props: any) => {
                   {t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
                 </OText>
               </CartsHeader>
-              {openCarts.map((cart: any) => (
+              {cartsToShow.map((cart: any) => (
                 <React.Fragment key={cart.uuid}>
                   <Cart
                     cart={cart}
@@ -407,7 +409,7 @@ const MultiCheckoutUI = (props: any) => {
                   )}
                 </React.Fragment>
               ))}
-              {!cartGroup?.loading && openCarts.length === 0 && (
+              {!cartGroup?.loading && openCarts.length === 0 && cartsInvalid?.length === 0 && (
                 <CCNotCarts>
                   <OText size={24} style={{ textAlign: 'center' }}>
                     {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
@@ -465,6 +467,7 @@ const MultiCheckoutUI = (props: any) => {
                       </OText>
                     </View>
                   )}
+
                   <OText size={12} color={theme.colors.mediumGray} mRight={70} style={{ marginTop: 10 }}>
                     {t('MULTI_CHECKOUT_DESCRIPTION', 'You will receive a receipt for each business. The payment is not combined between multiple stores. Each payment is processed by the store')}
                   </OText>
@@ -472,6 +475,14 @@ const MultiCheckoutUI = (props: any) => {
               )}
             </ChCarts>
           </ChSection>
+          {cartsToShow?.some((cart: any) => !cart?.valid_products && cart?.status !== 2) && (
+            <OText
+              color={theme.colors.error}
+              size={12}
+            >
+              {t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+            </OText>
+          )}
         </ChContainer>
       </Container>
 

package/themes/original/src/components/OrderDetails/OrderHistory.tsx

@@ -107,8 +107,12 @@ export const OrderHistory = (props: any) => {
               ellipsizeMode='tail'
             >
               {t('ORDER_PLACED', 'Order placed')} {' '}
-              {t('VIA', 'Via')}{' '}
-              {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
+              {!props.hideViaText && (
+                <>
+                  {t('VIA', 'Via')}{' '}
+                  {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
+                </>
+              )}
             </OText>
             <OText size={12}>{parseDate(order?.created_at, { outputFormat: 'MMM DD, hh:mm A' })}</OText>
           </View>

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

@@ -1039,6 +1039,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       >
         <OrderHistory
           order={order}
+          hideViaText={props.hideViaText}
           messages={messages}
           enableReview={(
             parseInt(order?.status) === 1 ||

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

@@ -147,9 +147,6 @@ const OrderProgressUI = (props: any) => {
                     marginBottom: 3
                   }}
                 >{statusToShow.includes(lastOrder?.status) ? t('ORDER_IN_PROGRESS', 'Order in progress') : t('ORDER', 'Order')}</OText>
-                {statusToShow.includes(lastOrder?.status) && (
-                  <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
-                )}
                 <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
                   <View style={styles.navigationButton}>
                     <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>

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

@@ -437,6 +437,7 @@ export interface OrderDetailsParams {
 	onNavigationRedirect?: any,
 	reorderState?: any,
 	handleReorder?: any,
+	hideViaText?: boolean,
 }
 export interface ProductItemAccordionParams {
 	key?: any;
@@ -572,6 +573,9 @@ export interface BusinessPreorderParams {
 	goToBack: any;
 	business: any;
 	handleBusinessClick: (value: any) => {};
+	getActualSchedule?: any;
+	cateringPreorder?: boolean;
+	preorderLeadTime?: number
 }
 export interface BusinessMenuListParams {
 	menu: any;
@@ -720,6 +724,8 @@ export interface otpParams {
 	pinCount: number;
 	otpError: any,
 	setOtpError: any
+	isCheckingCode: boolean
+	setCheckingCode: (value: boolean) => void
 }
 
 export interface FavoriteParams {