ordering-ui-react-native 0.16.75 → 0.16.76-release

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

@@ -17,8 +17,11 @@ import {
   ProgressBar,
   TimeWrapper,
   ProgressTextWrapper,
-  OrderInfoWrapper
+  OrderInfoWrapper,
+  OrderProgressWrapper
 } from './styles'
+import { getOrderStatus } from '../../utils'
+
 const OrderProgressUI = (props: any) => {
   const {
     orderList,
@@ -33,6 +36,7 @@ const OrderProgressUI = (props: any) => {
   const [{ optimizeImage, parseDate, parseTime }] = useUtils()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
+  const [initialLoaded, setInitialLoaded] = useState(false)
 
   const styles = StyleSheet.create({
     main: {
@@ -46,9 +50,9 @@ const OrderProgressUI = (props: any) => {
         height: 1
       },
       shadowColor: '#000',
-      shadowOpacity: 0.1,
-      shadowRadius: 1,
-      elevation: 2
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+      elevation: 3
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -72,49 +76,12 @@ const OrderProgressUI = (props: any) => {
     }
   });
 
-  const getOrderStatus = (s: any) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending'), slug: 'PENDING', percentage: 25 },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed'), slug: 'COMPLETED', percentage: 100 },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected'), slug: 'REJECTED', percentage: 0 },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business'), slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed'), slug: 'PREPARATION_COMPLETED', percentage: 70 },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business'), slug: 'REJECTED_BY_BUSINESS', percentage: 0 },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver'), slug: 'REJECTED_BY_DRIVER', percentage: 0 },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business'), slug: 'ACCEPTED_BY_BUSINESS', percentage: 35 },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver'), slug: 'ACCEPTED_BY_DRIVER', percentage: 45 },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver'), slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 80 },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver'), slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver'), slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver'), slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder'), slug: 'PREORDER', percentage: 0 },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready'), slug: 'ORDER_NOT_READY', percentage: 65 },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer'), slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer'), slug: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER', percentage: 0 },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer'), slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER', percentage: 0 },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', percentage: 55 },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', percentage: 90 },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
   const convertDiffToHours = (order: any) => {
-    const time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time
+    const minute = order?.eta_time
     const deliveryTime = order?.delivery_datetime_utc
       ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
       : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
-    const hour = time?.split(':')?.[0]
-    const minute = time?.split(':')?.[1]
-    const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
-    const returnedDate = moment(deliveryTime).add(result, 'minutes').format('hh:mm A')
+    const returnedDate = moment(deliveryTime).add(minute, 'minutes').format('hh:mm A')
     return returnedDate
   }
 
@@ -135,73 +102,82 @@ const OrderProgressUI = (props: any) => {
     }
   }, [isFocused])
 
+  useEffect(() => {
+    if (orderList.loading || initialLoaded) return
+    setInitialLoaded(true)
+  }, [orderList.loading, initialLoaded])
+
   return (
     <>
-      {orderList?.loading && (
-        <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
-          <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
-          <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
-          <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
-        </Placeholder>
+      {(orderList?.loading && !initialLoaded) && (
+        <OrderProgressWrapper>
+          <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
+            <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
+            <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
+            <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
+          </Placeholder>
+        </OrderProgressWrapper>
       )}
-      {!orderList?.loading && orderList?.orders?.length > 0 && lastOrder && (
-        <View style={styles.main}>
-          <OrderInfoWrapper style={{ flex: 1 }}>
-            <View style={styles.logoWrapper}>
-              <FastImage
-                style={{ width: 50, height: 50 }}
-                source={{
-                  uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
-                  priority: FastImage.priority.normal,
-                }}
-                resizeMode={FastImage.resizeMode.cover}
-              />
-            </View>
-            <View style={{
-              paddingHorizontal: 10,
-              flex: 1
-            }}
-            >
-              <OText
-                size={13}
-                style={{
-                  fontWeight: 'bold',
-                  marginBottom: 3
-                }}
-              >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
-              <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
-              <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
-                <View style={styles.navigationButton}>
-                  <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
-                  <IconAntDesign
-                    name='arrowright'
-                    color={theme.colors.primary}
-                    size={13}
-                    style={{ marginHorizontal: 5 }}
-                  />
-                </View>
-              </TouchableOpacity>
+      {(!orderList?.loading || initialLoaded) && orderList?.orders?.length > 0 && lastOrder && (
+        <OrderProgressWrapper>
+          <View style={styles.main}>
+            <OrderInfoWrapper style={{ flex: 1 }}>
+              <View style={styles.logoWrapper}>
+                <FastImage
+                  style={{ width: 50, height: 50 }}
+                  source={{
+                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
+                    priority: FastImage.priority.normal,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+              </View>
+              <View style={{
+                paddingHorizontal: 10,
+                flex: 1
+              }}
+              >
+                <OText
+                  size={13}
+                  style={{
+                    fontWeight: 'bold',
+                    marginBottom: 3
+                  }}
+                >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
+                <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
+                <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
+                  <View style={styles.navigationButton}>
+                    <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
+                    <IconAntDesign
+                      name='arrowright'
+                      color={theme.colors.primary}
+                      size={13}
+                      style={{ marginHorizontal: 5 }}
+                    />
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </OrderInfoWrapper>
+            <View style={{ flex: 1 }}>
+              <ProgressContentWrapper>
+                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
+              </ProgressContentWrapper>
+              <ProgressTextWrapper>
+                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <TimeWrapper>
+                  <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
+                  <OText size={11}>
+                    {lastOrder?.delivery_datetime_utc
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      : parseTime(lastOrder?.delivery_datetime, { utc: false })}
+                    &nbsp;-&nbsp;
+                    {convertDiffToHours(lastOrder)}
+                  </OText>
+                </TimeWrapper>
+              </ProgressTextWrapper>
             </View>
-          </OrderInfoWrapper>
-          <View style={{ flex: 1 }}>
-            <ProgressContentWrapper>
-              <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
-            </ProgressContentWrapper>
-            <ProgressTextWrapper>
-              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
-              <TimeWrapper>
-                <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
-                <OText size={11}>
-                  {lastOrder?.delivery_datetime_utc
-                    ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
-                    : parseTime(lastOrder?.delivery_datetime, { utc: false })}
-                  &nbsp;-&nbsp;
-                  {convertDiffToHours(lastOrder)}
-                </OText>
-              </TimeWrapper>
-            </ProgressTextWrapper>
           </View>
-        </View>
+        </OrderProgressWrapper>
       )}
       {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource

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

@@ -29,3 +29,8 @@ export const OrderInfoWrapper = styled.View`
   align-items: center;
   margin-bottom: 15px;
 `
+export const OrderProgressWrapper = styled.View`
+  margin-top: 37px;
+  margin-bottom: 20px;
+	padding-horizontal: 40px;
+`

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

@@ -292,10 +292,10 @@ const OrderSummaryUI = (props: any) => {
               {cart?.total >= 1 && (
                 <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
                   <OSTable style={{ marginTop: 15 }}>
-                    <OText size={14} style={{ fontWeight: 'bold' }}>
+                    <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                       {t('TOTAL', 'Total')}
                     </OText>
-                    <OText size={14} style={{ fontWeight: 'bold' }} >
+                    <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                       {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
 	OrderTypeControl,
 	useLanguage,
@@ -11,11 +11,13 @@ import { OrderTypeSelectParams } from '../../types'
 import { OIcon, OText } from '../shared'
 import NavBar from '../NavBar';
 import { ORDER_TYPES } from '../../config/constants';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const {
 		navigation,
 		handleChangeOrderType,
+		handleChangeType,
 		typeSelected,
 		defaultValue,
 		configTypes,
@@ -44,12 +46,16 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		if (!orderState.loading) {
 			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
-			if(!isChewLayout){
+			if (!isChewLayout) {
 				goToBack();
 			}
 		}
 	}
 
+	useEffect(() => {
+		handleChangeType && handleChangeType(typeSelected)
+	}, [typeSelected])
+
 	return (
 		<Wrapper>
 			{isChewLayout ? (
@@ -58,7 +64,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						horizontal
 						showsHorizontalScrollIndicator={false}
 					>
-						{chewOrderTypes?.map((type : any) => (
+						{chewOrderTypes?.map((type: any) => (
 							<TabBtn
 								key={type.value}
 								onPress={() => handleChangeOrderTypeCallback(type.value)}
@@ -89,12 +95,13 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 				<>
 					<NavBar
 						onActionLeft={() => goToBack()}
-						btnStyle={{ paddingLeft: 0 }}
-						paddingTop={0}
+						btnStyle={{ paddingLeft: 0, width: 50 }}
+						paddingTop={Platform.OS === 'ios' ? 10 : 0}
 						style={{ paddingBottom: 0 }}
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
 						titleStyle={{ fontSize: 14 }}
+						noMargin
 					/>
 					{
 						items.length > 0 && (
@@ -108,7 +115,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
 													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
 														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-														<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
+														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>
 											</BgImage>

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { BusinessList as BusinessListController, useOrder } from 'ordering-components/native'
+import React from 'react'
+import { useOrder } from 'ordering-components/native'
 import { BusinessController } from '../../BusinessController'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -12,43 +12,12 @@ import {
 } from 'react-native';
 import { PreviousBusinessOrderedParams } from '../../../types';
 
-export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams) => {
-  const {
-    navigation,
-    businessesList,
-    setBusinessLoading,
-    businessId,
-    onNavigationRedirect,
-    isBusinessesSearchList,
-    businessLoading
-  } = props
-
-  const [orderState] = useOrder()
-  const windowWidth = Dimensions.get('window').width;
-
-  const onBusinessClick = (business: any) => {
-    onNavigationRedirect('Business', { store: business.slug })
-  }
-  useEffect(() => {
-    if (businessesList?.loading && businessesList?.businesses?.length === 0) {
-      setBusinessLoading(true)
-    } else {
-      setBusinessLoading(false)
-    }
-  }, [businessesList?.loading])
-
-  const styles = StyleSheet.create({
-    container: {
-      marginBottom: 0,
-    },
-  });
-
-  const BusinessControllerList = ({ style }: any) => {
-    return (
-      <>
-        {businessesList.businesses?.filter((business: any) => businessId?.includes(business?.id))?.map((business: any, i: number) => (
+const BusinessControllerList = ({ businesses, onBusinessClick, navigation, orderState, handleCustomUpdate, style }: any) => {
+  return (
+    <>
+      {businesses?.result?.map((business: any, i: number) => (
+        <View style={style} key={`${business.id}_` + i}>
           <BusinessController
-            key={`${business.id}_` + i}
             business={business}
             isBusinessOpen={business.open}
             handleCustomClick={() => onBusinessClick(business)}
@@ -62,76 +31,115 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
             businessDeliveryTime={business?.delivery_time}
             businessPickupTime={business?.pickup_time}
             businessDistance={business?.distance}
-            style={style}
+            handleCustomUpdate={handleCustomUpdate}
           />
-        ))}
-      </>
-    )
-  }
+        </View>
+      ))}
+    </>
+  )
+}
 
-  const BusinessSkeletons = () => {
-    return (
-      <>
-        {[...Array(4).keys()].map((item, i) => (
-          <Placeholder
-            Animation={Fade}
-            key={i}
-            style={{ marginBottom: 20 }}>
-            <View style={{ width: '100%' }}>
-              <PlaceholderLine
-                height={200}
-                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>
+const BusinessSkeletons = () => {
+  return (
+    <>
+      {[...Array(4).keys()].map((item, i) => (
+        <Placeholder
+          Animation={Fade}
+          key={i}
+          style={{ marginBottom: 20 }}>
+          <View style={{ width: '100%' }}>
+            <PlaceholderLine
+              height={200}
+              style={{ marginBottom: 20, borderRadius: 25 }}
+            />
+            <View style={{ paddingHorizontal: 10 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}>
                 <PlaceholderLine
-                  height={20}
-                  width={30}
+                  height={25}
+                  width={40}
                   style={{ marginBottom: 10 }}
                 />
                 <PlaceholderLine
-                  height={20}
-                  width={80}
+                  height={25}
+                  width={20}
                   style={{ marginBottom: 10 }}
                 />
               </View>
+              <PlaceholderLine
+                height={20}
+                width={30}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={20}
+                width={80}
+                style={{ marginBottom: 10 }}
+              />
             </View>
-          </Placeholder>
-        ))}
-      </>
-    )
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}
+
+export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
+  const {
+    navigation,
+    businesses,
+    onNavigationRedirect,
+    isBusinessesSearchList,
+    handleUpdateBusinesses,
+  } = props
+
+  const [orderState] = useOrder()
+  const windowWidth = Dimensions.get('window').width;
+  const onBusinessClick = (business: any) => {
+    onNavigationRedirect('Business', { store: business.slug, logo: business.logo, header: business.header })
   }
 
+  const styles = StyleSheet.create({
+    container: {
+      marginBottom: 0,
+    },
+  });
+
   return (
-    <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
+    <ScrollView
+      horizontal={isBusinessesSearchList}
+      style={styles.container}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+    >
       {isBusinessesSearchList ? (
         <>
-          {!businessLoading && (
+          {!businesses?.loading && (
             <BusinessControllerList
               style={{ width: windowWidth - 120, marginRight: 20 }}
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
             />
           )}
         </>
       ) : (
         <ListWrapper>
-          <BusinessControllerList />
-          {businessesList.loading && (
+          {businesses?.loading ? (
             <BusinessSkeletons />
+          ) : (
+            <BusinessControllerList
+              onBusinessClick={onBusinessClick}
+              orderState={orderState}
+              navigation={navigation}
+              businesses={businesses}
+              handleCustomUpdate={handleUpdateBusinesses}
+            />
           )}
         </ListWrapper>
       )}
@@ -139,15 +147,3 @@ export const PreviousBusinessOrderedUI = (props: PreviousBusinessOrderedParams)
     </ScrollView>
   )
 }
-
-export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) => {
-  const previousBusinessOrderedController = {
-    ...props,
-    UIComponent: PreviousBusinessOrderedUI,
-    paginationSettings: { initialPage: 1, pageSize: 50, controlType: 'infinity' }
-  }
-
-  return (
-    <BusinessListController {...previousBusinessOrderedController} />
-  )
-}

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -11,6 +11,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   const {
     products,
     onProductClick,
+    handleUpdateProducts,
     isBusinessesSearchList
   } = props
 
@@ -28,12 +29,14 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
         {products?.map((product: any) => (
             <SingleProductCard
               key={product?.id}
+              isProductId
               isSoldOut={(product.inventoried && !product.quantity)}
               product={product}
               businessId={product?.business?.id}
               onProductClick={onProductClick}
               style={style}
               productAddedToCartLength={0}
+              handleUpdateProducts={handleUpdateProducts}
             />
         ))}
       </>