npm - ordering-ui-react-native - Versions diffs - 0.16.22 → 0.16.25 - Mend

ordering-ui-react-native 0.16.22 → 0.16.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/package.json +1 -1
package/src/components/BusinessController/index.tsx +10 -8
package/src/components/LoginForm/index.tsx +103 -30
package/src/components/LoginForm/styles.tsx +6 -0
package/src/components/SignupForm/index.tsx +128 -61
package/src/theme.json +0 -1
package/src/types/index.tsx +13 -9
package/themes/original/src/components/BusinessItemAccordion/index.tsx +4 -2
package/themes/original/src/components/BusinessListingSearch/index.tsx +76 -53
package/themes/original/src/components/BusinessListingSearch/styles.tsx +8 -1
package/themes/original/src/components/Checkout/index.tsx +17 -14
package/themes/original/src/components/PaymentOptions/index.tsx +16 -14
package/themes/original/src/types/index.tsx +1 -0

package/package.json CHANGED Viewed

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

package/src/components/BusinessController/index.tsx CHANGED Viewed

@@ -146,16 +146,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           />
         </BusinessLogo>
         <BusinessState>
-          {(isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
+          {(!isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
             <View style={styles.businessStateView}>
               {getBusinessOffer(business?.offers) && (
                 <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
                   {getBusinessOffer(business?.offers) || parsePrice(0)}
                 </OText>
               )}
-              <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
+              {!isBusinessOpen && (
+                <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
+                  {t('PREORDER', 'PREORDER')}
+                </OText>
+              )}
             </View>
           )}
         </BusinessState>
@@ -164,10 +166,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
         <BusinessInfo>
           <View style={{ width: '70%', alignItems: 'flex-start' }}>
             <OText
-                size={20}
-                numberOfLines={1}
-                ellipsizeMode='tail'
-              >
+              size={20}
+              numberOfLines={1}
+              ellipsizeMode='tail'
+            >
               {business?.name}
             </OText>
           </View>

package/src/components/LoginForm/index.tsx CHANGED Viewed

@@ -1,9 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Pressable, StyleSheet, View, Keyboard } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import Recaptcha from 'react-native-recaptcha-that-works'
 import {
   LoginForm as LoginFormController,
@@ -28,7 +30,8 @@ import {
   OTab,
   SocialButtons,
   OrSeparator,
-  LineSeparator
+  LineSeparator,
+  RecaptchaButton
 } from './styles';
 import { _removeStoreData } from '../../providers/StoreUtil';
@@ -56,7 +59,9 @@ const LoginFormUI = (props: LoginParams) => {
     handleSendVerifyCode,
     handleCheckPhoneCode,
     onNavigationRedirect,
-    notificationState
+    notificationState,
+    handleReCaptcha,
+    enableReCaptcha
   } = props
   const theme = useTheme()
@@ -70,6 +75,10 @@ const LoginFormUI = (props: LoginParams) => {
       marginBottom: 25,
       borderWidth: 1,
       borderColor: theme.colors.disabled
+    },
+    recaptchaIcon: {
+      width: 100,
+      height: 100,
     }
   });
@@ -89,7 +98,9 @@ const LoginFormUI = (props: LoginParams) => {
       cellphone: null
     }
   });
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const recaptchaRef = useRef<any>({});
   const inputRef = useRef<any>({})
   const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
@@ -152,6 +163,34 @@ const LoginFormUI = (props: LoginParams) => {
     onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
   }
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+    recaptchaRef.current.open()
+  }
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha && handleReCaptcha(token)
+  }
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      setRecaptchaConfig({
+        siteKey: configs?.security_recaptcha_site_key?.value || null,
+        baseUrl: configs?.security_recaptcha_base_url?.value || null
+      })
+    }
+  }, [configs, enableReCaptcha])
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
       formState.result?.result && showToast(
@@ -317,6 +356,39 @@ const LoginFormUI = (props: LoginParams) => {
               rules={{ required: t('VALIDATION_ERROR_PASSWORD_REQUIRED', 'The field Password is required').replace('_attribute_', t('PASSWORD', 'Password')) }}
               defaultValue=""
             />
+            {enableReCaptcha && (
+              <>
+                <TouchableOpacity
+                  onPress={handleOpenRecaptcha}
+                >
+                  <RecaptchaButton>
+                    {recaptchaVerified ? (
+                      <MaterialCommunityIcons
+                        name="checkbox-marked"
+                        size={26}
+                        color={theme.colors.primary}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name="checkbox-blank-outline"
+                        size={26}
+                        color={theme.colors.mediumGray}
+                      />
+                    )}
+                    <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                  </RecaptchaButton>
+                </TouchableOpacity>
+                <Recaptcha
+                  ref={recaptchaRef}
+                  siteKey={recaptchaConfig?.siteKey}
+                  baseUrl={recaptchaConfig?.baseUrl}
+                  onVerify={onRecaptchaVerify}
+                  onExpire={() => setRecaptchaVerified(false)}
+                />
+              </>
+            )}
             <OButton
               onClick={handleSubmit(onSubmit)}
               text={loginButtonText}
@@ -369,13 +441,13 @@ const LoginFormUI = (props: LoginParams) => {
         }
         {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
-            <ButtonsWrapper>
-              <OText size={18} mBottom={10} color={theme.colors.disabled}>
-                {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
-              </OText>
-              <SocialButtons>
-                {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                  configs?.facebook_id?.value && (
+          <ButtonsWrapper>
+            <OText size={18} mBottom={10} color={theme.colors.disabled}>
+              {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
+            </OText>
+            <SocialButtons>
+              {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+                configs?.facebook_id?.value && (
                   <FacebookLogin
                     notificationState={notificationState}
                     handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -383,26 +455,26 @@ const LoginFormUI = (props: LoginParams) => {
                     handleSuccessFacebookLogin={handleSuccessFacebook}
                   />
                 )}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
-                  <GoogleLogin
-                    notificationState={notificationState}
-                    webClientId={configs?.google_login_client_id?.value}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessGoogleLogin={handleSuccessFacebook}
-                  />
-                )}
-                {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
-                  <AppleLogin
-                    notificationState={notificationState}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessApple={handleSuccessApple}
-                  />
-                )}
-              </SocialButtons>
-            </ButtonsWrapper>
-          )}
+              {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+                <GoogleLogin
+                  notificationState={notificationState}
+                  webClientId={configs?.google_login_client_id?.value}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessGoogleLogin={handleSuccessFacebook}
+                />
+              )}
+              {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+                <AppleLogin
+                  notificationState={notificationState}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessApple={handleSuccessApple}
+                />
+              )}
+            </SocialButtons>
+          </ButtonsWrapper>
+        )}
         {onNavigationRedirect && registerButtonText && (
           <ButtonsWrapper>
@@ -440,6 +512,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
     handleSuccessLogin: () => _removeStoreData('isGuestUser')
   };

package/src/components/LoginForm/styles.tsx CHANGED Viewed

@@ -67,3 +67,9 @@ export const LineSeparator = styled.View`
 export const SkeletonWrapper = styled.View`
   width: 90%;
 `
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+  justify-content: center;
+`

package/src/components/SignupForm/index.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { View, Pressable, StyleSheet, Keyboard, Linking, Platform, TouchableOpac
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import Recaptcha from 'react-native-recaptcha-that-works'
 import { PhoneInputNumber } from '../PhoneInputNumber'
 import { FacebookLogin } from '../FacebookLogin'
@@ -23,7 +24,7 @@ import {
   SocialButtons
 } from './styles'
-import { LoginWith as SignupWith, OTab, OTabs } from '../LoginForm/styles'
+import { LoginWith as SignupWith, OTab, OTabs, RecaptchaButton } from '../LoginForm/styles'
 import { _removeStoreData } from '../../providers/StoreUtil';
 import NavBar from '../NavBar'
@@ -58,7 +59,9 @@ const SignupFormUI = (props: SignupParams) => {
     setCheckPhoneCodeState,
     handleSendVerifyCode,
     handleCheckPhoneCode,
-    notificationState
+    notificationState,
+    enableReCaptcha,
+    handleReCaptcha
   } = props
   const theme = useTheme()
@@ -107,6 +110,9 @@ const SignupFormUI = (props: SignupParams) => {
     }
   });
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
   const nameRef = useRef<any>(null)
   const lastnameRef = useRef<any>(null)
   const middleNameRef = useRef<any>(null)
@@ -114,6 +120,7 @@ const SignupFormUI = (props: SignupParams) => {
   const emailRef = useRef<any>(null)
   const phoneRef = useRef<any>(null)
   const passwordRef = useRef<any>(null)
+  const recaptchaRef = useRef<any>({});
   const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
@@ -196,35 +203,6 @@ const SignupFormUI = (props: SignupParams) => {
     setPasswordSee(false);
   }
-  const onSubmit = (values: any) => {
-    Keyboard.dismiss()
-    if (phoneInputData.error) {
-      showToast(ToastType.Error, phoneInputData.error);
-      return
-    }
-    if (
-      !phoneInputData.phone.country_phone_code &&
-      !phoneInputData.phone.cellphone &&
-      validationFields?.fields?.checkout?.cellphone?.enabled &&
-      validationFields?.fields?.checkout?.cellphone?.required
-    ) {
-      showToast(ToastType.Error, t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required.'))
-      return
-    }
-    if (signupTab === 'email' || !useSignupByCellphone) {
-      handleButtonSignupClick && handleButtonSignupClick({
-        ...values,
-        ...phoneInputData.phone
-      })
-      if (!formState.loading && formState.result.result && !formState.result.error) {
-        handleSuccessSignup && handleSuccessSignup(formState.result.result)
-      }
-      return
-    }
-    setFormValues(values)
-    handleVerifyCodeClick(values)
-  }
   const handleVerifyCodeClick = (values: any) => {
     const formData = values || formValues
     handleSendVerifyCode && handleSendVerifyCode({
@@ -265,6 +243,62 @@ const SignupFormUI = (props: SignupParams) => {
     }
   }
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+    recaptchaRef.current.open()
+  }
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha && handleReCaptcha(token)
+  }
+  const onSubmit = (values: any) => {
+    Keyboard.dismiss()
+    if (phoneInputData.error) {
+      showToast(ToastType.Error, phoneInputData.error);
+      return
+    }
+    if (
+      !phoneInputData.phone.country_phone_code &&
+      !phoneInputData.phone.cellphone &&
+      validationFields?.fields?.checkout?.cellphone?.enabled &&
+      validationFields?.fields?.checkout?.cellphone?.required
+    ) {
+      showToast(ToastType.Error, t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required.'))
+      return
+    }
+    if (signupTab === 'email' || !useSignupByCellphone) {
+      handleButtonSignupClick && handleButtonSignupClick({
+        ...values,
+        ...phoneInputData.phone
+      })
+      if (!formState.loading && formState.result.result && !formState.result.error) {
+        handleSuccessSignup && handleSuccessSignup(formState.result.result)
+      }
+      return
+    }
+    setFormValues(values)
+    handleVerifyCodeClick(values)
+  }
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      setRecaptchaConfig({
+        siteKey: configs?.security_recaptcha_site_key?.value || null,
+        baseUrl: configs?.security_recaptcha_base_url?.value || null
+      })
+    }
+  }, [configs, enableReCaptcha])
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
       formState.result?.result && showToast(
@@ -492,6 +526,38 @@ const SignupFormUI = (props: SignupParams) => {
             </View>
           )}
+          {enableReCaptcha && (
+            <>
+              <TouchableOpacity
+                onPress={handleOpenRecaptcha}
+                style={{ marginHorizontal: 4, marginBottom: 10 }}
+              >
+                <RecaptchaButton>
+                  {recaptchaVerified ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={23}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={23}
+                      color={theme.colors.disabled}
+                    />
+                  )}
+                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                </RecaptchaButton>
+              </TouchableOpacity>
+              <Recaptcha
+                ref={recaptchaRef}
+                siteKey={recaptchaConfig?.siteKey}
+                baseUrl={recaptchaConfig?.baseUrl}
+                onVerify={onRecaptchaVerify}
+                onExpire={() => setRecaptchaVerified(false)}
+              />
+            </>
+          )}
           {signupTab === 'cellphone' && useSignupByEmail && useSignupByCellphone ? (
             <OButton
               onClick={handleSubmit(onSubmit)}
@@ -531,40 +597,40 @@ const SignupFormUI = (props: SignupParams) => {
         }
         {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
-            <ButtonsSection>
-              <OText size={18} mBottom={10} color={theme.colors.disabled}>
-                {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
-              </OText>
-              <SocialButtons>
-                {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                  configs?.facebook_id?.value && (
-                    <FacebookLogin
-                      notificationState={notificationState}
-                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                      handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                      handleSuccessFacebookLogin={handleSuccessFacebook}
-                    />
-                  )}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
-                  <GoogleLogin
-                    notificationState={notificationState}
-                    webClientId={configs?.google_login_client_id?.value}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessGoogleLogin={handleSuccessFacebook}
-                  />
-                )}
-                {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
-                  <AppleLogin
+          <ButtonsSection>
+            <OText size={18} mBottom={10} color={theme.colors.disabled}>
+              {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
+            </OText>
+            <SocialButtons>
+              {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+                configs?.facebook_id?.value && (
+                  <FacebookLogin
                     notificationState={notificationState}
                     handleErrors={(err: any) => showToast(ToastType.Error, err)}
                     handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                    handleSuccessApple={handleSuccessApple}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
                   />
                 )}
-              </SocialButtons>
-            </ButtonsSection>
-          )}
+              {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+                <GoogleLogin
+                  notificationState={notificationState}
+                  webClientId={configs?.google_login_client_id?.value}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessGoogleLogin={handleSuccessFacebook}
+                />
+              )}
+              {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+                <AppleLogin
+                  notificationState={notificationState}
+                  handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                  handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                  handleSuccessApple={handleSuccessApple}
+                />
+              )}
+            </SocialButtons>
+          </ButtonsSection>
+        )}
       </FormSide>
       <OModal
         open={isModalVisible}
@@ -581,13 +647,14 @@ const SignupFormUI = (props: SignupParams) => {
         />
       </OModal>
       <Spinner visible={formState.loading || isLoadingSocialButton} />
-    </View >
+    </View>
   );
 };
 export const SignupForm = (props: any) => {
   const signupProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignupFormUI,
   };
   return <SignUpController {...signupProps} />;

package/src/theme.json CHANGED Viewed

@@ -19,7 +19,6 @@
     "backgroundPage": "#FFFFFF",
     "colorPage": "#333",
     "red": "#D83520",
-    "skyBlue": "#1977F2",
     "white": "#fff",
     "whiteGray": "#f7f6f3",
     "dusk": "rgb(65,77,107)",

package/src/types/index.tsx CHANGED Viewed

@@ -17,6 +17,8 @@ export interface LoginParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   notificationState?: any;
+  handleReCaptcha?: (token: string) => void;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -99,6 +101,8 @@ export interface SignupParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   notificationState?: any;
+  enableReCaptcha?: boolean;
+  handleReCaptcha?: (token: string) => void;
 }
 export interface PhoneInputParams {
@@ -248,8 +252,8 @@ export interface OrdersOptionParams {
   navigation?: any,
   loadOrders?: any,
   setOrderList?: any,
-  setOrdersLength?: ({activeOrdersLength, previousOrdersLength} : {activeOrdersLength: number, previousOrdersLength: number}) => void,
-  ordersLength: {activeOrdersLength: number, previousOrdersLength: number}
+  setOrdersLength?: ({ activeOrdersLength, previousOrdersLength }: { activeOrdersLength: number, previousOrdersLength: number }) => void,
+  ordersLength: { activeOrdersLength: number, previousOrdersLength: number }
 }
 export interface ActiveOrdersParams {
   orders?: any,
@@ -347,7 +351,7 @@ export interface MessagesParams {
   messages?: any,
   message?: string,
   image?: string,
-  messagesToShow?: any ,
+  messagesToShow?: any,
   sendMessage?: any,
   handleSend?: () => {},
   setImage?: (image: string | null) => {},
@@ -416,7 +420,7 @@ export interface UpsellingProductsParams {
   setOpenUpselling?: any;
   onRedirect?: any;
   businessId?: number;
-  cartProducts?: Array<any>;
+  cartProducts?: Array<any>;
   handleUpsellingPage: () => void;
   openUpselling: boolean;
   canOpenUpselling?: boolean;
@@ -424,16 +428,16 @@ export interface UpsellingProductsParams {
 }
 export interface GoogleMapsParams {
-  location: {lat: number, lng: number}
-  handleChangeAddressMap?: (address : any, details : any) => void
-  setErrors?: (error : string) => void
+  location: { lat: number, lng: number }
+  handleChangeAddressMap?: (address: any, details: any) => void
+  setErrors?: (error: string) => void
   maxLimitLocation?: number
   readOnly?: boolean
   markerTitle?: string,
   saveLocation?: boolean,
   isSetInputs?: boolean,
   locations?: Array<any>,
-  setSaveLocation?: (val : boolean) => void,
+  setSaveLocation?: (val: boolean) => void,
   handleToggleMap?: () => void
 }
@@ -481,7 +485,7 @@ export interface HelpAccountAndPaymentParams {
 export interface StripeMethodFormParams {
   cart: any;
-  handleSource: ({id, card} : {id : string, card : any}) => void;
+  handleSource: ({ id, card }: { id: string, card: any }) => void;
   onCancel: () => void;
   setErrors: (error: string) => void;
   paymethod: string;

package/themes/original/src/components/BusinessItemAccordion/index.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -28,11 +28,13 @@ export const BusinessItemAccordion = (props: any) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice }] = useUtils();
+	const [{ configs }] = useConfig()
 	const theme = useTheme();
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
 	const isProducts = cart?.products?.length
+	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 	const [isActive, setActiveState] = useState(!!singleBusiness)
@@ -91,7 +93,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity

package/themes/original/src/components/BusinessListingSearch/index.tsx CHANGED Viewed

@@ -25,15 +25,17 @@ import {
   SortContainer,
   BrandContainer,
   BrandItem,
-  PriceFilterWrapper
+  PriceFilterWrapper,
+  OptionTitle
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
+import { MyOrders } from '../MyOrders'
-export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
+export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
     businessesSearchList,
@@ -47,10 +49,11 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     businessTypes,
     setFilters,
     brandList,
+    onNavigationRedirect,
     handleUpdateBusinessList,
     handleUpdateProducts
   } = props
   const screenHeight = Dimensions.get('window').height;
   const theme = useTheme()
   const [orderState] = useOrder()
@@ -224,6 +227,60 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     )
   }
+  const BusinessControllerSkeletons = () => {
+    return (
+      <>
+        {[
+          ...Array(
+            paginationProps.nextPageItems
+              ? paginationProps.nextPageItems
+              : 3,
+          ).keys(),
+        ].map((item, i) => (
+          <Placeholder
+            Animation={Fade}
+            key={i}
+            style={{ width: 320, marginRight: 20, marginTop: 20 }}>
+            <View style={{ width: 320 }}>
+              <PlaceholderLine
+                height={155}
+                style={{ marginBottom: 20, borderRadius: 25 }}
+              />
+              <View style={{ paddingHorizontal: 10 }}>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                  }}>
+                  <PlaceholderLine
+                    height={25}
+                    width={40}
+                    style={{ marginBottom: 10 }}
+                  />
+                  <PlaceholderLine
+                    height={25}
+                    width={20}
+                    style={{ marginBottom: 10 }}
+                  />
+                </View>
+                <PlaceholderLine
+                  height={20}
+                  width={30}
+                  style={{ marginBottom: 10 }}
+                />
+                <PlaceholderLine
+                  height={20}
+                  width={80}
+                  style={{ marginBottom: 0 }}
+                />
+              </View>
+            </View>
+          </Placeholder>
+        ))}
+      </>
+    )
+  }
   return (
     <ScrollView style={styles.container}>
       <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
@@ -259,6 +316,20 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
           </View>
         )
       }
+      {businessesSearchList.businesses?.length > 0 && (
+        <MyOrders
+          hideOrders
+          businessesSearchList={businessesSearchList}
+          onNavigationRedirect={onNavigationRedirect}
+          BusinessControllerSkeletons={BusinessControllerSkeletons}
+        />
+      )}
+      <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
+        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
+          {t('BUSINESSES', 'Businesses')}
+        </OText>
+      </OptionTitle>
       <ScrollView horizontal>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
           <BusinessController
@@ -283,55 +354,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
           </LoadMoreBusinessContainer>
         )}
         {businessesSearchList.loading && (
-          <>
-            {[
-              ...Array(
-                paginationProps.nextPageItems
-                  ? paginationProps.nextPageItems
-                  : 3,
-              ).keys(),
-            ].map((item, i) => (
-              <Placeholder
-                Animation={Fade}
-                key={i}
-                style={{ width: 320, marginRight: 20, marginTop: 20 }}>
-                <View style={{ width: 320 }}>
-                  <PlaceholderLine
-                    height={155}
-                    style={{ marginBottom: 20, borderRadius: 25 }}
-                  />
-                  <View style={{ paddingHorizontal: 10 }}>
-                    <View
-                      style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                      }}>
-                      <PlaceholderLine
-                        height={25}
-                        width={40}
-                        style={{ marginBottom: 10 }}
-                      />
-                      <PlaceholderLine
-                        height={25}
-                        width={20}
-                        style={{ marginBottom: 10 }}
-                      />
-                    </View>
-                    <PlaceholderLine
-                      height={20}
-                      width={30}
-                      style={{ marginBottom: 10 }}
-                    />
-                    <PlaceholderLine
-                      height={20}
-                      width={80}
-                      style={{ marginBottom: 0 }}
-                    />
-                  </View>
-                </View>
-              </Placeholder>
-            ))}
-          </>
+          <BusinessControllerSkeletons />
         )}
       </ScrollView>
       <ProductsList>
@@ -456,7 +479,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
                 onPress={() => handleChangeFilters('orderBy', item?.value)}
                 style={{ marginBottom: 7 }}
               >
-                <OText
+                <OText
                   weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
                   mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
                 >

package/themes/original/src/components/BusinessListingSearch/styles.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 export const WrapHeader = styled.View`
   width: 100%;
@@ -87,3 +87,10 @@ export const BrandItem = styled.TouchableOpacity`
 export const PriceFilterWrapper = styled.View`
   margin-bottom: 20px;
 `
+export const OptionTitle = styled.View`
+	margin-top: 24px;
+	${(props: any) => props.titleContent && css`
+		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
+	`}
+`

package/themes/original/src/components/Checkout/index.tsx CHANGED Viewed

@@ -142,6 +142,7 @@ const CheckoutUI = (props: any) => {
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
+	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
@@ -171,9 +172,9 @@ const CheckoutUI = (props: any) => {
 		}
 	}
-	const handlePlaceOrder = () => {
+	const handlePlaceOrder = (confirmPayment) => {
 		if (!userErrors.length) {
-			handlerClickPlaceOrder && handlerClickPlaceOrder()
+			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
 		let stringError = ''
@@ -614,19 +615,21 @@ const CheckoutUI = (props: any) => {
 												</OText>
 											</TouchableOpacity>
 										</CartHeader>
-										<TouchableOpacity
-											onPress={() => setOpenChangeStore(true)}
-											style={{ alignSelf: 'flex-start' }}
-										>
-											<OText
-												size={12}
-												lineHeight={18}
-												color={theme.colors.textSecondary}
-												style={{ textDecorationLine: 'underline' }}
+										{isBusinessChangeEnabled && (
+											<TouchableOpacity
+												onPress={() => setOpenChangeStore(true)}
+												style={{ alignSelf: 'flex-start' }}
 											>
-												{t('CHANGE_STORE', 'Change store')}
-											</OText>
-										</TouchableOpacity>
+												<OText
+													size={12}
+													lineHeight={18}
+													color={theme.colors.textSecondary}
+													style={{ textDecorationLine: 'underline' }}
+												>
+													{t('CHANGE_STORE', 'Change store')}
+												</OText>
+											</TouchableOpacity>
+										)}
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}

package/themes/original/src/components/PaymentOptions/index.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import {
 import {
 	PaymentOptions as PaymentOptionsController,
 	useLanguage,
-  ToastType,
+	ToastType,
 	useToast,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -30,6 +30,7 @@ import {
 	PMCardItemContent
 } from './styles'
 import { getIconCard, flatArray } from '../../utils';
+import { useApplePay } from '@stripe/stripe-react-native';
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 const methodsPay = ['google_pay', 'apple_pay']
@@ -62,7 +63,8 @@ const PaymentOptionsUI = (props: any) => {
 	} = props
 	const theme = useTheme();
-  const [, { showToast }] = useToast();
+	const [, { showToast }] = useToast();
+	const { confirmApplePayPayment } = useApplePay()
 	const getPayIcon = (method: string) => {
 		switch (method) {
@@ -98,18 +100,18 @@ const PaymentOptionsUI = (props: any) => {
 	// ]
 	const handlePaymentMethodClick = (paymethod: any) => {
-    if (cart?.balance > 0) {
-      const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
-      if (webViewPaymentGateway.includes(paymethod?.gateway)) {
-        handlePaymentMethodClickCustom(paymethod)
-      }
-      handlePaymethodClick(paymethod, isPopupMethod)
-      return
-    }
-    showToast(
+		if (cart?.balance > 0) {
+			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+				handlePaymentMethodClickCustom(paymethod)
+			}
+			handlePaymethodClick(paymethod, isPopupMethod)
+			return
+		}
+		showToast(
 			ToastType.Error,
 			t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
-		;
+			;
 	}
 	useEffect(() => {
@@ -134,7 +136,7 @@ const PaymentOptionsUI = (props: any) => {
 	useEffect(() => {
 		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
+			handlePlaceOrder(confirmApplePayPayment)
 		}
 	}, [paymethodData, paymethodSelected])
@@ -214,7 +216,7 @@ const PaymentOptionsUI = (props: any) => {
 			{paymethodSelected?.gateway === 'cash' && (
 				<PaymentOptionCash
-					orderTotal={cart.total}
+					orderTotal={cart.balance ?? cart.total}
 					defaultValue={paymethodSelected?.data?.cash}
 					onChangeData={handlePaymethodDataChange}
 					setErrorCash={props.setErrorCash}

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

@@ -605,6 +605,7 @@ export interface BusinessSearchParams {
 	setFilters: (filters: any) => void,
 	lazySearch?: boolean,
 	brandList?: any;
+	onNavigationRedirect?: any,
 	handleUpdateProducts: any,
 	handleUpdateBusinessList?: any;
 }