ordering-ui-react-native 0.17.75 → 0.17.76-release

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

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import {
   OrderList,
   useLanguage,
-  useUtils
+  useUtils,
+  useConfig
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -12,6 +13,7 @@ import { NotFoundSource } from '../NotFoundSource'
 import { View, StyleSheet, TouchableOpacity, Platform } from 'react-native'
 import { Placeholder, Fade, PlaceholderLine } from "rn-placeholder";
 import FastImage from 'react-native-fast-image'
+import { OrderEta } from '../OrderDetails/OrderEta'
 import {
   ProgressContentWrapper,
   ProgressBar,
@@ -20,6 +22,8 @@ import {
   OrderInfoWrapper,
   OrderProgressWrapper
 } from './styles'
+import { getOrderStatus } from '../../utils'
+
 const OrderProgressUI = (props: any) => {
   const {
     orderList,
@@ -31,10 +35,12 @@ const OrderProgressUI = (props: any) => {
   const theme = useTheme();
 
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
   const [initialLoaded, setInitialLoaded] = useState(false)
+  const statusToShow = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
 
   const styles = StyleSheet.create({
     main: {
@@ -74,49 +80,6 @@ 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 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 returnedDate = moment(deliveryTime).add(minute, 'minutes').format('hh:mm A')
-    return returnedDate
-  }
-
   const handleGoToOrder = (index: string) => {
     navigation && navigation.navigate(index)
   }
@@ -124,7 +87,15 @@ const OrderProgressUI = (props: any) => {
   useEffect(() => {
     if (orderList?.orders.length > 0) {
       const sortedOrders = orderList.orders.sort((a: any, b: any) => a.id > b.id ? -1 : 1)
-      setLastOrder(sortedOrders[0])
+      const orderInProgress = sortedOrders.find((order: any) => (statusToShow.includes(order.status)))
+
+      let _lastOrder = null
+      if (orderInProgress) {
+        _lastOrder = orderInProgress
+      } else {
+        _lastOrder = sortedOrders[0]
+      }
+      setLastOrder(_lastOrder)
     }
   }, [orderList?.orders])
 
@@ -157,11 +128,11 @@ const OrderProgressUI = (props: any) => {
               <View style={styles.logoWrapper}>
                 <FastImage
                   style={{ width: 50, height: 50 }}
-                  source={{
+                  source={orderList?.orders.length === 1 ? {
                     uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
-                  }}
-                  resizeMode={FastImage.resizeMode.cover}
+                  } : theme.images.logos.logotype}
+                  resizeMode={FastImage.resizeMode.contain}
                 />
               </View>
               <View style={{
@@ -175,8 +146,7 @@ const OrderProgressUI = (props: any) => {
                     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>
+                >{statusToShow.includes(lastOrder?.status) ? t('ORDER_IN_PROGRESS', 'Order in progress') : t('ORDER', '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>
@@ -192,18 +162,22 @@ const OrderProgressUI = (props: any) => {
             </OrderInfoWrapper>
             <View style={{ flex: 1 }}>
               <ProgressContentWrapper>
-                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
+                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${(getOrderStatus(lastOrder.status) as any).percentage * 100}%` : '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_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>
                     {lastOrder?.delivery_datetime_utc
-                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: configs?.general_hour_format?.value || 'HH:mm' })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                     &nbsp;-&nbsp;
-                    {convertDiffToHours(lastOrder)}
+                    {statusToShow.includes(lastOrder?.status) ? (
+                      <OrderEta order={lastOrder} outputFormat={configs?.general_hour_format?.value || 'HH:mm'} />
+                    ) : (
+                      parseDate(lastOrder?.reporting_data?.at[`status:${lastOrder.status}`], { outputFormat: configs?.general_hour_format?.value })
+                    )}
                   </OText>
                 </TimeWrapper>
               </ProgressTextWrapper>
@@ -230,7 +204,7 @@ export const OrderProgress = (props: any) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 1,
+      pageSize: 10,
       controlType: 'infinity'
     }
   }

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

@@ -20,12 +20,12 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
+import { OInput, OModal, OText, OAlert } from '../shared';
 import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
-import { OAlert } from '../../../../../src/components/shared'
+import { MomentOption } from '../MomentOption';
 
 const OrderSummaryUI = (props: any) => {
   const {
@@ -38,7 +38,16 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes,
+    hideDeliveryFee,
+    loyaltyRewardRate,
+    maxDate
   } = props;
 
   const theme = useTheme()
@@ -48,8 +57,32 @@ const OrderSummaryUI = (props: any) => {
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
+  const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
+
+  const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null || !cart?.taxes) {
+      return cart?.business?.tax_type === 1 ? cart?.tax : 0
+    } else {
+      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const clearAmount = (value: any) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
+  const loyaltyRewardValue = clearAmount((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate)
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -67,41 +100,20 @@ const OrderSummaryUI = (props: any) => {
     })
   }
 
-  const getIncludedTaxes = () => {
-    if (cart?.taxes === null || !cart?.taxes) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
-    } else {
-      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
-      }, 0)
-    }
-  }
-
   const getIncludedTaxesDiscounts = () => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
-  }
-
-  const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
-
-  const walletName: any = {
-    cash: {
-      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-    },
-    credit_point: {
-      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-    }
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   return (
@@ -157,9 +169,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -197,8 +209,8 @@ const OrderSummaryUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={fee?.id + i}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -223,9 +235,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -233,10 +245,10 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+              {orderState?.options?.type === 1 && !hideDeliveryFee && (
                 <OSTable>
                   <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
+                  <OText size={12}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
                 </OSTable>
               )}
               {
@@ -250,9 +262,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -302,9 +314,16 @@ const OrderSummaryUI = (props: any) => {
                       {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>
+                  {!!loyaltyRewardValue && (
+                    <OSTable style={{ justifyContent: 'flex-end' }}>
+                      <OText size={12} color={theme.colors.textNormal}>
+                        {t('REWARD_LOYALTY_POINT', 'Reward :amount: on loyalty points').replace(':amount:', loyaltyRewardValue)}
+                      </OText>
+                    </OSTable>
+                  )}
                 </View>
               )}
-              {cart?.business_id && cart?.status !== 2 && (
+              {cart?.business_id && cart?.status !== 2 && !hideCartComments && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
                     <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
@@ -339,6 +358,21 @@ const OrderSummaryUI = (props: any) => {
               )}
             </OSBill>
           )}
+          {cateringTypes.includes(orderState?.options?.type) && maxDate && cart?.business && (
+            <View>
+              <MomentOption
+                maxDate={maxDate}
+                cateringPreorder
+                isCart
+                preorderSlotInterval={preorderSlotInterval}
+                preorderLeadTime={preorderLeadTime}
+                preorderTimeRange={preorderTimeRange}
+                preorderMaximumDays={preorderMaximumDays}
+                preorderMinimumDays={preorderMinimumDays}
+                business={cart?.business}
+              />
+            </View>
+          )}
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
@@ -352,14 +386,6 @@ const OrderSummaryUI = (props: any) => {
               products={cart?.products}
             />
           </OModal>
-          <OAlert
-            open={confirm.open}
-            title={confirm.title}
-            content={confirm.content}
-            onAccept={confirm.handleOnAccept}
-            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-          />
         </>
       )}
     </OSContainer>

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

@@ -96,10 +96,11 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 					<NavBar
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0, width: 50 }}
-						paddingTop={0}
+						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
 					/>
 					{

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

@@ -23,21 +23,21 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
     },
   });
 
-  const ProductList = ({ style }: any) => {
+  const ProductList = () => {
     return (
       <>
-        {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}
-            />
+        {products?.filter((product : any) => product?.business?.available)?.map((product: any) => (
+          <SingleProductCard
+            key={product?.id}
+            isProductId
+            isSoldOut={(product.inventoried && !product.quantity)}
+            product={product}
+            businessId={product?.business?.id}
+            onProductClick={onProductClick}
+            style={{ width: windowWidth - (products?.length > 1 ? 120 : 80), marginRight: 20 }}
+            productAddedToCartLength={0}
+            handleUpdateProducts={handleUpdateProducts}
+          />
         ))}
       </>
     )
@@ -45,7 +45,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
+        <ProductList />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />