ordering-ui-react-native 0.14.83 → 0.14.84-release

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform, PlatformIOSStatic } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import moment from 'moment'
 import { useLanguage, useUtils } from 'ordering-components/native';
@@ -8,6 +8,10 @@ import {
   Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
 } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import DeviceInfo from 'react-native-device-info';
+
+const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 export const PreviousOrders = (props: any) => {
   const {
@@ -16,42 +20,51 @@ export const PreviousOrders = (props: any) => {
     getOrderStatus,
     handleClickOrder,
     isLogisticOrder,
-    handleClickLogisticOrder
+    handleClickLogisticOrder,
+    slaSettingTime,
+    currentTabSelected,
+    currentOrdenSelected
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
   const [currentTime, setCurrentTime] = useState()
+  const [orientationState] = useDeviceOrientation();
+
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+
+  const platformIOS = Platform as PlatformIOSStatic
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
     handleClickOrder && handleClickOrder(order)
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    if (props.handleClickEvent) {
+      props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
+    } else {
+      onNavigationRedirect &&
+        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    }
   };
 
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      minHeight: isLogisticOrder ? 50 : 64,
-      marginBottom: isLogisticOrder ? 0 : 30,
+      paddingVertical: (isIpad || isTablet) ? 20 : 0,
+      marginBottom: IS_PORTRAIT ? 25 : 0,
       marginLeft: 3,
     },
     icon: {
       borderRadius: 7.6,
-      width: 75,
-      height: 75,
+      width: 60,
+      height: 60
     },
     logo: {
       borderRadius: 10,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.20,
-      shadowRadius: 1.41,
-      elevation: 2,
+      shadowColor: "#0000006e",
+      shadowRadius: 10,
+      elevation: 15,
       justifyContent: 'center',
       alignItems: 'center',
       marginLeft: 3,
@@ -99,9 +112,9 @@ export const PreviousOrders = (props: any) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      const date:any = Date.now()
+      const date: any = Date.now()
       setCurrentTime(date)
-    }, 60000)
+    }, slaSettingTime)
 
     return () => clearInterval(interval)
   }, [])
@@ -118,8 +131,9 @@ export const PreviousOrders = (props: any) => {
             return (
               <View
                 style={{
-                  backgroundColor: order?.locked && isLogisticOrder ? '#ccc' : '#fff',
-                  marginBottom: isLogisticOrder ? 10 : 0
+                  backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
+                  marginBottom: isLogisticOrder ? 10 : 0,
+                  // justifyContent: 'center'
                 }}
                 key={order.id}
               >
@@ -130,7 +144,7 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                    <Timestatus style={{backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }}/>
+                    <Timestatus style={{ backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }} />
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -163,7 +177,7 @@ export const PreviousOrders = (props: any) => {
                           />
                         </NotificationIcon>
                       )}
-                      <View style={{flexDirection: 'row'}}>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                         <OText
                           style={styles.date}
                           color={theme.colors.unselectText}
@@ -173,9 +187,14 @@ export const PreviousOrders = (props: any) => {
                           {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('NO', 'Order No.') + order.id)) + ' · '}
                           {order?.delivery_datetime_utc
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
-                            : parseDate(order?.delivery_datetime, { utc: false })}{' · '}
+                            : parseDate(order?.delivery_datetime, { utc: false })}
                         </OText>
-                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' } >{getDelayTime(order)}</OText>
+                        {(currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && (
+                          <>
+                            <OText> · </OText>
+                            <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
+                          </>
+                        )}
                       </View>
                       {!isLogisticOrder && (
                         <MyOrderOptions>
@@ -215,28 +234,28 @@ export const PreviousOrders = (props: any) => {
                         textStyle={{ color: theme.colors.primary }}
                       />
                     ) : (
-                    <>
-                      <OButton
-                        text={t('REJECT', 'Reject')}
-                        onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                        bgColor={theme.colors.danger}
-                        borderColor={theme.colors.danger}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.dangerText }}
-                      />
-                      <OButton
-                        text={t('ACCEPT', 'Accept')}
-                        onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                        bgColor={theme.colors.successOrder}
-                        borderColor={theme.colors.successOrder}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.successText }}
-                      />
-                    </>
+                      <>
+                        <OButton
+                          text={t('REJECT', 'Reject')}
+                          onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                          bgColor={theme.colors.danger}
+                          borderColor={theme.colors.danger}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.dangerText }}
+                        />
+                        <OButton
+                          text={t('ACCEPT', 'Accept')}
+                          onClick={() => handleClickLogisticOrder(1, _order?.id)}
+                          bgColor={theme.colors.successOrder}
+                          borderColor={theme.colors.successOrder}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.successText }}
+                        />
+                      </>
                     )}
                   </AcceptOrRejectOrder>
                 )}

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

@@ -8,16 +8,16 @@ export const Card = styled.View`
 `;
 
 export const Logo = styled.View`
-  height: 75px;
-  width: 75px;
+  height: 65px;
+  width: 65px;
 `;
 
 export const Information = styled.View`
   position: relative;
   justify-content: flex-start;
-  margin-horizontal: 10px;
+  margin-horizontal: 5px;
   flex: 1;
-  max-height: 70px;
+  max-height: 60px;
 `;
 
 export const MyOrderOptions = styled.View`
@@ -39,12 +39,7 @@ export const AcceptOrRejectOrder = styled.View`
 export const Timestatus = styled.View`
   position: relative;;
   width: 4px;
-  height: 65px;
+  height: 55px;
   border-radius: 20px;
   top: 5px;
-  margin-right: 5px; 
-  ${(props: any) => props.theme?.rtl && css`
-    left: unset;
-    right: -5px;
- `}
 `

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

@@ -20,6 +20,8 @@ import { FloatingButton } from '../FloatingButton'
 import LinearGradient from 'react-native-linear-gradient'
 import Alert from '../../providers/AlertProvider'
 
+import { reviewCommentList } from '../../../../../src/utils'
+
 import {
   Content,
   ActionButtonWrapper,
@@ -36,7 +38,6 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleChangeQualification,
     handleSendCustomerReview
   } = props
 
@@ -101,11 +102,13 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
   ]
 
-  const commentsList = [
-    { key: 0, content: t('RESPECTFUL', 'Respectful') },
-    { key: 1, content: t('EXCELLENT_COMMUNICATION', "Excellent communication") },
-    { key: 2, content: t('CORDIAL_SERVICE', 'Cordial service') }
-  ]
+  const commentsList = reviewCommentList('customer')
+
+  const handleChangeQualification = (index: any) => {
+    if (index) setReviewState({ ...reviewState, qualification: index, comment: '' })
+    setComments([])
+  }
+
   const isSelectedComment = (commentKey: number) => {
     const found = comments.find((comment: any) => comment?.key === commentKey)
     return found
@@ -251,10 +254,10 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
           size={12}
           style={{ marginTop: 30 }}
         >
-          {t('COMMENTS', 'Comments')}
+          {commentsList[reviewState?.qualification || 1]?.title}
         </OText>
         <CommentsButtonGroup>
-          {commentsList.map(commentItem => (
+          {commentsList[reviewState?.qualification || 1]?.list?.map(commentItem => (
             <OButton
               key={commentItem.key}
               text={commentItem.content}

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

@@ -575,3 +575,7 @@ export interface ReviewCustomerParams {
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

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

@@ -325,6 +325,18 @@ export const getOrderStatus = (s: string, t: any) => {
       slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
       percentage: 95,
     },
+    {
+      key: 22,
+      value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
+      slug: 'ORDER_LOOKING_FOR_DRIVER',
+      percentage: 35
+    },
+    {
+      key: 23,
+      value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+      slug: 'ORDER_DRIVER_ON_WAY',
+      percentage: 45
+    }
   ];
 
   const objectStatus = orderStatus.find(o => o.key === status);

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

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

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

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

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

@@ -126,7 +126,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 0.15, image: theme.images.order.status18 },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 0.90, image: theme.images.order.status19 },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90, image: theme.images.order.status20 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35, image: theme.images.order.status22 },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45, image: theme.images.order.status23 }
     ]
 
 

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

@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
 			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
+			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
+      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -208,7 +210,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
+			? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
 			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
 		useDefualtSessionManager: true,
 		paginationSettings: {

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

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -133,7 +133,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 0.15, image: theme.images.order.status18 },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 0.90, image: theme.images.order.status19 },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90, image: theme.images.order.status20 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95, image: theme.images.order.status21 },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35, image: theme.images.order.status22 },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45, image: theme.images.order.status23 }
     ]
 
 

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

@@ -89,7 +89,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
       { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)
@@ -205,7 +207,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ...props,
     UIComponent: OrdersOptionUI,
     orderStatus: props.activeOrders
-      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
+      ? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
       : [1, 2, 5, 6, 10, 11, 12, 16, 17],
     useDefualtSessionManager: true,
     paginationSettings: {

package/themes/kiosk/index.tsx

@@ -14,6 +14,7 @@ import { LanguageSelector } from './src/components/LanguageSelector'
 import { LoginForm } from './src/components/LoginForm'
 import { LogoutPopup } from './src/components/LogoutPopup'
 import Navbar from './src/components/NavBar'
+import { NetworkError } from './src/components/NetworkError'
 import { NotFoundSource } from './src/components/NotFoundSource'
 import OptionCard from './src/components/OptionCard'
 import { OrderDetails } from './src/components/OrderDetails'
@@ -82,6 +83,7 @@ export {
   LoginForm,
   LogoutPopup,
   Navbar,
+  NetworkError,
   NotFoundSource,
   OptionCard,
   OrderDetails,

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

@@ -6,6 +6,7 @@ import {
   BusinessController as BusinessSingleCard,
   useUtils,
 } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 
 import { Card, BusinessLogo } from './styles';
 
@@ -26,6 +27,16 @@ export const BusinessControllerUI = (props: any) => {
       alignItems: 'center',
       textAlign: 'center',
       marginTop: 10
+    },
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
     }
   });
 
@@ -39,12 +50,22 @@ export const BusinessControllerUI = (props: any) => {
       activeOpacity={1}
       onPress={() => handleBusinessClick(business)}
     >
-      <BusinessLogo
-        source={business?.logo ? {
-          uri: optimizeImage(business?.logo, 'h_120,c_limit'),
-        } : theme.images.dummies.businessLogo}
-        resizeMode='contain'
-      />
+      {business?.logo ? (
+        <FastImage
+          style={styles.logoStyle}
+          source={{
+            uri: business?.logo,
+            priority: FastImage.priority.high,
+            cache:FastImage.cacheControl.web
+          }}
+          resizeMode={FastImage.resizeMode.contain}
+        />
+      ) : (
+        <BusinessLogo
+          source={theme.images.dummies.businessLogo}
+          resizeMode='contain'
+        />
+      )}
       <OText
         size={WIDTH_SCREEN * 0.012}
         numberOfLines={2}

package/themes/kiosk/src/components/BusinessController/styles.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/native';
 export const Card = styled.TouchableOpacity`
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   margin: 0 15px 20px;
   width: 120px;

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native'
+import { View, StyleSheet, ScrollView, TouchableOpacity, ImageBackground } from 'react-native'
 import { BusinessAndProductList, useLanguage } from 'ordering-components/native'
 import { BusinessProductsListingParams, Business } from '../../types'
 import { OCard, OText, OIcon } from '../shared'
@@ -7,6 +7,7 @@ import GridContainer from '../../layouts/GridContainer'
 import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import styled, { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image'
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {navigation, businessState, resetInactivityTimeout, clearInactivityTimeout, bottomSheetVisibility } = props;
@@ -38,7 +39,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
   });
 
-  const _categories: any = business?.original?.categories;
+  const _categories: any = business?.categories;
   let _promos: any = [];
   _categories?.forEach((categ: any) => {
     const _featuredProds = categ?.products?.filter(
@@ -59,17 +60,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   );
 
   const RenderCategories = ({ item, cardStyle, widthScreen }: any) => {
-    const Category = styled.ImageBackground`
-      position: relative;
-      height: 150px;
-      width: ${(props: any) => props.w * 0.45}px;
-      border-radius: 10px;
-      padding: 10px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    `
+    const stylesCat = StyleSheet.create({
+      categoryStyle: {
+        height: 150,
+        borderRadius: 10,
+        padding: 10,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }
+    })
+
     const WrapText = styled.View`
       height: 90px;
       display: flex;
@@ -78,6 +79,25 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       border-radius: 10px;
     `
 
+    const Category = (props: any) => {
+      const imageProps = {
+        style: props.style,
+        source: props.source,
+        resizeMode: props.resizeMode,
+      }
+      return (
+        props.uri ? (
+          <FastImage {...imageProps}>
+            {props.children}
+          </FastImage>
+        ) : (
+          <ImageBackground {...imageProps}>
+            {props.children}
+          </ImageBackground>
+        )
+      )
+    }
+
     return (
       <TouchableOpacity
         key={item.id}
@@ -92,11 +112,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         }}
       >
         <Category
-          style={cardStyle}
-          source={{uri: item.images}}
-          resizeMode="cover"
-          w={widthScreen}
-          borderRadius={16}
+          style={{ ...cardStyle, ...stylesCat.categoryStyle, width: widthScreen * 0.45 }}
+          uri={!!item.images}
+          source={!!item.images
+            ? {
+              uri: item.images,
+              priority: FastImage.priority.high,
+              cache:FastImage.cacheControl.web
+            }
+            : theme.images.categories.all
+          }
+          resizeMode={FastImage.resizeMode.cover}
         >
           {item?.inventoried && (
             <View style={styles.soldOut}>
@@ -111,7 +137,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               mLeft={0}
               size={32}
               numberOfLines={1}
-              // mBottom={8}
               style={{...props?.titleStyle}}
               weight="bold"
             >
@@ -121,7 +146,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               <OText
                 color={theme.colors.white}
                 numberOfLines={1}
-                // mBottom={4}
                 size={18}
                 style={{...props?.descriptionStyle}}
                 weight="400"
@@ -161,7 +185,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const _renderCategories = (): React.ReactElement => (
     <>
       {_renderTitle(t('CATEGORIES', 'Categories'))}
-      <GridContainer 
+      <GridContainer
         style={{
           paddingLeft: orientationState?.orientation === LANDSCAPE
           ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
@@ -171,9 +195,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         {_categories && _categories.map((category: any) => (
           <OCard
             key={category.id}
+            isCentered
+            isUri={!!category.image}
             title={category?.name || ''}
-            image={{uri: category?.image}}
+            image={category.image ? {uri: category.image} : theme.images.categories.all}
             style={{
+              borderRadius: 10,
               width:
                 orientationState?.orientation === LANDSCAPE
                   ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
@@ -183,8 +210,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               resetInactivityTimeout()
               navigation.navigate('Category', {
                 category,
-                categories: business.original.categories,
-                businessId: business?.api?.businessId,
+                categories: business?.categories,
+                businessId: business?.id,
                 businessSlug: business?.slug,
                 clearInactivityTimeout,
                 resetInactivityTimeout,

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

@@ -379,7 +379,7 @@ const CartUI = (props: any) => {
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -179,7 +179,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}