ordering-ui-react-native 0.16.24 → 0.16.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.24",
+  "version": "0.16.27",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -112,7 +112,7 @@
     "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "^11.6.4",
+    "react-native-webview": "^11.22.7",
     "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",

package/src/components/BusinessController/index.tsx

@@ -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

@@ -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

@@ -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

@@ -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/types/index.tsx

@@ -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/BusinessListingSearch/index.tsx

@@ -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

@@ -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/PaymentOptions/index.tsx

@@ -216,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/components/SingleProductCard/index.tsx

@@ -9,13 +9,20 @@ import {
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
 import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-import { OText, OIcon } from '../shared';
+import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+import { OText } from '../shared';
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
 
-const SinguleProductCardUI = (props: SingleProductCardParams) => {
+function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
+		prevProps.isSoldOut === nextProps.isSoldOut &&
+		prevProps.productAddedToCartLength === nextProps.productAddedToCartLength &&
+		prevProps.categoryState === nextProps.categoryState
+}
+
+const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const {
 		product,
 		isSoldOut,
@@ -188,9 +195,13 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 						resizeMode={FastImage.resizeMode.cover}
 					/>
 				) : (
-					<OIcon
-						src={theme?.images?.dummies?.product}
+					<FastImage
 						style={styles.productStyle}
+						source={{
+							uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
 					/>
 				)}
 			</LogoWrapper>
@@ -204,7 +215,7 @@ const SinguleProductCardUI = (props: SingleProductCardParams) => {
 			)}
 		</CardContainer>
 	);
-};
+}, SingleProductCardPropsAreEqual);
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const singleProductCardProps = {

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

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