ordering-ui-react-native 0.15.90 → 0.15.93

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -592,6 +592,19 @@ const CheckoutUI = (props: any) => {
                     {t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
                   </OText>
                 )}
+
+                {options.type === 1 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  validationFields?.fields?.checkout?.driver_tip?.required &&
+                  (Number(cart?.driver_tip) <= 0) && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+                  </OText>
+								)}
               </ChErrors>
             </ChSection>
           )}
@@ -602,8 +615,16 @@ const CheckoutUI = (props: any) => {
           <>
             <FloatingButton
               handleClick={() => handlePlaceOrder()}
-              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
-              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
+              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                              (options.type === 1 &&
+                                validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                                validationFields?.fields?.checkout?.driver_tip?.required &&
+                                (Number(cart?.driver_tip) <= 0))}
+              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                        (options.type === 1 &&
+                          validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                          validationFields?.fields?.checkout?.driver_tip?.required &&
+                          (Number(cart?.driver_tip) <= 0))}
               btnText={cart?.subtotal_to_calculate >= cart?.minimum
                 ? (
                   placing

package/src/components/SingleProductCard/index.tsx

@@ -10,6 +10,7 @@ import {
 import { StyleSheet } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
+import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
   const {
@@ -77,10 +78,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       activeOpacity={1}
       onPress={() => onProductClick?.(product)}
     >
-      <OIcon
-        url={optimizeImage(product?.images, 'h_200,c_limit')}
-        style={styles.productStyle}
-      />
+      {product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
       <CardInfo>
         <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>

package/themes/business/src/components/Chat/index.tsx

@@ -44,6 +44,35 @@ import { USER_TYPE } from '../../config/constants';
 
 import SignatureScreen from 'react-native-signature-canvas';
 
+const ORDER_STATUS: any = {
+  0: 'ORDER_STATUS_PENDING',
+  1: 'ORDERS_COMPLETED',
+  2: 'ORDER_REJECTED',
+  3: 'ORDER_STATUS_IN_BUSINESS',
+  4: 'ORDER_READY',
+  5: 'ORDER_REJECTED_RESTAURANT',
+  6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+  7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+  8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+  9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+  10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+  11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+  12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+  13: 'PREORDER',
+  14: 'ORDER_NOT_READY',
+  15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+  16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+  17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+  18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+  19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
+  20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+  21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+  22: 'ORDER_LOOKING_FOR_DRIVER',
+  23: 'ORDER_DRIVER_ON_WAY'
+}
+
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
+
 const ChatUI = (props: MessagesParams) => {
   const {
     type,
@@ -317,71 +346,6 @@ const ChatUI = (props: MessagesParams) => {
     }
   };
 
-  const getStatus = (status: number, attribute: any) => {
-    const hour = Math.trunc(status / 60);
-    const min = Math.round((status / 60 - hour) * 60);
-
-    if (attribute === 'status') {
-      switch (status) {
-        case 0:
-          return 'ORDER_STATUS_PENDING';
-        case 1:
-          return 'ORDERS_COMPLETED';
-        case 2:
-          return 'ORDER_REJECTED';
-        case 3:
-          return 'ORDER_STATUS_IN_BUSINESS';
-        case 4:
-          return 'ORDER_READY';
-        case 5:
-          return 'ORDER_REJECTED_RESTAURANT';
-        case 6:
-          return 'ORDER_STATUS_CANCELLEDBYDRIVER';
-        case 7:
-          return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
-        case 8:
-          return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
-        case 9:
-          return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
-        case 10:
-          return 'ORDER_PICKUP_FAILED_BY_DRIVER';
-        case 11:
-          return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
-        case 12:
-          return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
-        case 13:
-          return 'PREORDER';
-        case 14:
-          return 'ORDER_NOT_READY';
-        case 15:
-          return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
-        case 16:
-          return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
-        case 17:
-          return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
-        case 18:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
-        case 19:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
-        case 20:
-          return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
-        case 21:
-          return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
-        case 22:
-          return 'ORDER_LOOKING_FOR_DRIVER'
-        case 23:
-          return 'ORDER_DRIVER_ON_WAY'
-        default:
-          return ``;
-      }
-    }
-
-    if (attribute === 'prepared_in' || attribute === 'delivered_in') {
-      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${status > 60 ? 'hours' : 'minutes'
-        }`;
-    }
-  };
-
   const onSubmit = (values: any) => {
     handleSend && handleSend();
     setImage && setImage(null);
@@ -403,28 +367,16 @@ const ChatUI = (props: MessagesParams) => {
           numberOfLines={3}
           style={{ ...styles.firstMessageText, textAlign: 'center' }}>
           {message.change?.attribute !== 'driver_id'
-            ? `${t('ORDER', 'Order')} ${t(
-              message.change.attribute.toUpperCase(),
-              message.change.attribute,
-            )} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null
-              ? t(
-                getStatus(
-                  parseInt(message.change.old, 10),
-                  message.change?.attribute,
-                ),
-              )
-              : '0'
-            } ${t('TO', 'to')} ${t(
-              getStatus(
-                parseInt(message.change.new, 10),
-                message.change?.attribute,
-              ),
-            )}`
+            ?
+            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+              `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+              `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+            }`
             : message.change.new
-              ? `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''
-              } ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''
-              }`
-              : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
+              ?
+              `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+              :
+              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}

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

@@ -8,6 +8,8 @@ import {
   ScrollView,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   ToastType,
@@ -25,6 +27,7 @@ import {
   TabsContainer,
   OrSeparator,
   LineSeparator,
+  RecaptchaButton
 } from './styles';
 import { _setStoreData } from '../../providers/StoreUtil'
 import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
@@ -47,7 +50,10 @@ const LoginFormUI = (props: LoginParams) => {
     handleCheckPhoneCode,
     setCheckPhoneCodeState,
     allowedLevels,
-    useRootPoint
+    useRootPoint,
+    notificationState,
+		handleReCaptcha,
+		enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -61,6 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
+  const [projectName, setProjectName] = useState({name: '', isFocued: false});
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -84,6 +91,50 @@ const LoginFormUI = (props: LoginParams) => {
   const [submitted, setSubmitted] = useState(false);
   const [formValues, setFormValues] = useState(null);
 
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+
+  const recaptchaRef = useRef<any>({});
+
+  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(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(() => {
+    const projectInputInterval = setInterval(() => {
+      if (projectName.name && useRootPoint && projectName.isFocued) {
+        setOrdering({
+          ...ordering,
+          project: projectName.name
+        })
+      }
+    }, 1500)
+    return () => clearInterval(projectInputInterval);
+  }, [projectName])
+
   const getTraduction = (key: string) => {
     const keyList: any = {
       // Add the key and traduction that you need below
@@ -465,6 +516,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({name: e?.target?.value, isFocued: true})
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -493,6 +545,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({...projectName, isFocued: false})
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -590,7 +643,7 @@ const LoginFormUI = (props: LoginParams) => {
 
           {onNavigationRedirect && (
             <Pressable
-              style={{ marginRight: 'auto', marginBottom: 35 }}
+              style={{ marginRight: 'auto', marginBottom: 20 }}
               onPress={() => onNavigationRedirect('Forgot')}>
               <OText style={styles.textForgot}>
                 {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
@@ -598,6 +651,39 @@ const LoginFormUI = (props: LoginParams) => {
             </Pressable>
           )}
 
+          {enableReCaptcha && (
+            <>
+              <TouchableOpacity
+                style={{ marginBottom: 15 }}
+                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={handleLogin}
             text={t('LOGIN', 'Login')}
@@ -657,6 +743,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
   };
 

package/themes/business/src/components/LoginForm/styles.tsx

@@ -46,3 +46,9 @@ export const LineSeparator = styled.View`
   height: 1px;
   background-color: ${(props: any) => props.theme.colors.disabled};
 `;
+
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -23,7 +23,7 @@ const NewOrderNotificationUI = (props: any) => {
   const [ordering] = useApi()
   const { getCurrentLocation } = useLocation();
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  const [currentEvent, setCurrentEvent] = useState<any>(null)
+  let [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
     1: {
@@ -46,6 +46,7 @@ const NewOrderNotificationUI = (props: any) => {
   const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
 
   const handlePlayNotificationSound = () => {
+    if (currentEvent) return
     let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
@@ -63,30 +64,40 @@ const NewOrderNotificationUI = (props: any) => {
 
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
+    currentEvent = null
     setCurrentEvent({ evt: null })
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
     if (value?.driver) {
-      const location = await getCurrentLocation()
-      await fetch(`${ordering.root}/users/${user.id}/locations`, {
-        method: 'POST',
-        body: JSON.stringify({
-          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
-        }),
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
-      })
-      const assignedTimeDiff = moment.utc(value?.driver?.last_order_assigned_at).local().fromNow()
-      if (assignedTimeDiff === 'a few seconds ago' && !isBusinessApp) {
+      try {
+        const location = await getCurrentLocation()
+        await fetch(`${ordering.root}/users/${user.id}/locations`, {
+          method: 'POST',
+          body: JSON.stringify({
+            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+          }),
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+        })
+      } catch (error) {
+          console.log(error)
+      }
+      const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
+      const assignedSecondsDiff = duration.asSeconds()
+      if (assignedSecondsDiff < 5 && !isBusinessApp) {
         handlePlayNotificationSound()
         clearInterval(soundTimeout)
+        currentEvent = { evt: 2, orderId: value?.id }
         setCurrentEvent({ evt: 2, orderId: value?.id })
       }
-      return
     }
-    if (evtType === 3) return
+    if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound()
     clearInterval(soundTimeout)
+    currentEvent = {
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    }
     setCurrentEvent({
       evt: evtType,
       orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -1,6 +1,6 @@
 //React & React Native
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, Platform, ScrollView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -29,7 +29,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import { getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
-
 //Styles
 import { OrderDetailsContainer, Pickup } from './styles';
 
@@ -52,7 +51,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     appTitle,
     handleClickLogisticOrder,
     forceUpdate,
-    getPermissions
+    getPermissions,
+    isGrantedPermissions
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -102,6 +102,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     const _permissions = await getPermissions()
 
     const isBlocked = _permissions.some((_permission: string) => permissions?.locationStatus?.[_permission] === 'blocked')
@@ -128,6 +132,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleViewActionOrder = (action: string) => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -77,6 +77,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   })
 
   const getIncludedTaxes = () => {
+    if (!order?.taxes) return 0
     if (order?.taxes?.length === 0) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {

package/themes/business/src/components/OrdersOption/index.tsx

@@ -725,8 +725,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </View>
       {/* </GestureRecognizer> */}
-
-      <NewOrderNotification isBusinessApp={isBusinessApp} />
+                
+      {isBusinessApp && (
+        <NewOrderNotification isBusinessApp={isBusinessApp} />
+      )}
+      
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer

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

@@ -20,6 +20,9 @@ export interface LoginParams {
   passwordInputIcon?: any;
   allowedLevels?: any;
   useRootPoint?: any;
+  notificationState?: any;
+	handleReCaptcha?: any;
+	enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;

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

@@ -120,32 +120,30 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingTop: 20 }}>
-            <NavBar
-              title={t('MENU_V21', 'Menu')}
-              onActionLeft={goToBack}
-              includeOrderTypeSelector
-              onClickTypes={handleRedirect}
-              rightComponent={cart && (
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                  onPress={onToggleCart}
+          <NavBar
+            title={t('MENU_V21', 'Menu')}
+            onActionLeft={goToBack}
+            includeOrderTypeSelector
+            onClickTypes={handleRedirect}
+            rightComponent={cart && (
+              <TouchableOpacity
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+                onPress={onToggleCart}
+              >
+                <OText
+                  color={theme.colors.mediumGray}
                 >
-                  <OText
-                    color={theme.colors.mediumGray}
-                  >
-                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                  </OText>
-
-                  <MaterialIcon
-                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                    color={theme.colors.primary}
-                    size={30}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
+                  {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                </OText>
+
+                <MaterialIcon
+                  name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                  color={theme.colors.primary}
+                  size={30}
+                />
+              </TouchableOpacity>
+            )}
+          />
 
           <BusinessProductsListing
             { ...businessProductsListingProps }

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import React from 'react';
+import { PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
@@ -21,7 +21,6 @@ const BusinessesListingUI = (props: any) => {
     navigation,
     businessesList,
     handleBusinessClick,
-    paginationProps,
   } = props;
 
   const theme = useTheme();