ordering-ui-react-native 0.17.3 → 0.17.4-release

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 
@@ -132,3 +131,13 @@ export const OrderAction = styled.View`
 export const PlaceSpotWrapper = styled.View`
   padding-horizontal: 40px;
 `
+
+export const ProfessionalPhoto = styled.ImageBackground`
+  width: 100%;
+  position: relative;
+  max-height: 80px;
+  height: 80px;
+  width: 80px;
+  resize-mode: cover;
+  margin-right: 10px;
+`;

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

@@ -20,54 +20,58 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
     currentCart,
     handleUpdateProducts,
     navigation,
-    searchValue
+    searchValue,
+    businessSingleId
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
   const { width } = Dimensions.get('window');
-  const productsFilterd = productList?.length > 0 && productList?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf()).filter((product : any) => product?.name?.toLowerCase()?.includes(searchValue?.toLowerCase()))
+  const productsFilterd = productList?.length > 0 && productList.filter((product : any) => !searchValue || product?.name?.toLowerCase()?.includes(searchValue?.toLowerCase()))?.sort((a: any, b:any) => moment(b?.last_ordered_date).valueOf() - moment(a?.last_ordered_date).valueOf())
   return (
-    <Container hide={productsFilterd?.length === 0}>
-      <OText
-        size={16}
-        lineHeight={24}
-        color={theme.colors.textNormal}
-        style={{
-          fontWeight: '600',
-          marginBottom: 6
-        }}
-      >
-        {t('ORDER_IT_AGAIN', 'Order it again')}
-      </OText>
-      <OText
-        size={12}
-        lineHeight={18}
-        color={theme.colors.disabled}
-      >
-        {t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}
-      </OText>
-      <ScrollView
-        horizontal
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-      >
-        {productsFilterd.map((product: any, i: number) => (
-          <ProductWrapper key={'prod_' + product.id + `_${i}`} style={{ width: width - 120, }}>
-            <SingleProductCard
-              isSoldOut={product.inventoried && !product.quantity}
-              product={product}
-              businessId={businessId}
-              categoryState={categoryState}
-              onProductClick={() => onProductClick(product)}
-              productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-              handleUpdateProducts={handleUpdateProducts}
-              navigation={navigation}
-              isPreviously
-            />
-          </ProductWrapper>
-        ))}
-      </ScrollView>
-    </Container>
+    productsFilterd?.length > 0 ? (
+      <Container>
+        <OText
+          size={16}
+          lineHeight={24}
+          color={theme.colors.textNormal}
+          style={{
+            fontWeight: '600',
+            marginBottom: 6
+          }}
+        >
+          {t('ORDER_IT_AGAIN', 'Order it again')}
+        </OText>
+        <OText
+          size={12}
+          lineHeight={18}
+          color={theme.colors.disabled}
+        >
+          {t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}
+        </OText>
+        <ScrollView
+          horizontal
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+        >
+          {productsFilterd.map((product: any, i: number) => (
+            <ProductWrapper key={'prod_' + product.id + `_${i}`} style={{ width: width - 120, }}>
+              <SingleProductCard
+                isSoldOut={product.inventoried && !product.quantity}
+                product={product}
+                businessId={businessId}
+                categoryState={categoryState}
+                onProductClick={() => onProductClick(product)}
+                productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                handleUpdateProducts={handleUpdateProducts}
+                navigation={navigation}
+                isPreviously
+                businessSingleId={businessSingleId}
+              />
+            </ProductWrapper>
+          ))}
+        </ScrollView>
+      </Container>
+    ) : null
   )
 }

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

@@ -12,13 +12,17 @@ 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,
   TimeWrapper,
   ProgressTextWrapper,
-  OrderInfoWrapper
+  OrderInfoWrapper,
+  OrderProgressWrapper
 } from './styles'
+import { getOrderStatus } from '../../utils'
+
 const OrderProgressUI = (props: any) => {
   const {
     orderList,
@@ -30,7 +34,7 @@ const OrderProgressUI = (props: any) => {
   const theme = useTheme();
 
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime }] = useUtils()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
   const [initialLoaded, setInitialLoaded] = useState(false)
@@ -47,9 +51,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',
@@ -73,52 +77,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 time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_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')
-    return returnedDate
-  }
-
   const handleGoToOrder = (index: string) => {
     navigation && navigation.navigate(index)
   }
@@ -144,70 +102,74 @@ const OrderProgressUI = (props: any) => {
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
-        <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>
+          <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 || initialLoaded) && 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>
+        <OrderProgressWrapper>
+          <View style={styles.main}>
+            <OrderInfoWrapper style={{ flex: 1 }}>
+              <View style={styles.logoWrapper}>
+                <FastImage
+                  style={{ width: 50, height: 50 }}
+                  source={orderList?.orders.length === 1 ? {
+                    uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
+                    priority: FastImage.priority.normal,
+                  } : theme.images.logos.logotype}
+                  resizeMode={FastImage.resizeMode.contain}
+                />
+              </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;
+                    <OrderEta order={lastOrder} outputFormat='hh:mm A' />
+                  </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
@@ -228,7 +190,7 @@ export const OrderProgress = (props: any) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 1,
+      pageSize: 10,
       controlType: 'infinity'
     }
   }

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

@@ -26,6 +26,7 @@ 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 +39,16 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes,
+    hideDeliveryFee,
+    loyaltyRewardRate,
+    maxDate
   } = props;
 
   const theme = useTheme()
@@ -51,6 +61,31 @@ const OrderSummaryUI = (props: any) => {
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.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 loyaltyRewardValue = ((
+    Math.trunc(((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate) * 100) / 100
+  ).toFixed(configs.format_number_decimal_length?.value ?? 2), 10)
+
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
   }
@@ -67,16 +102,6 @@ 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)
   }
@@ -93,17 +118,6 @@ const OrderSummaryUI = (props: any) => {
     })
   }
 
-  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'),
-    }
-  }
-
   return (
     <OSContainer>
       {cart?.products?.length > 0 && (
@@ -121,6 +135,7 @@ const OrderSummaryUI = (props: any) => {
                 onDeleteProduct={handleDeleteClick}
                 onEditProduct={handleEditProduct}
                 isFromCheckout={isFromCheckout}
+                isDisabledEdit={!cart?.business_id}
               />
             ))}
           </OSProductList>
@@ -166,7 +181,9 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-              <Divider />
+              {cart?.business_id && (
+                <Divider />
+              )}
               {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
                 <OSTable>
                   <OText size={12} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
@@ -230,10 +247,10 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+              {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !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>
               )}
               {
@@ -279,7 +296,7 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
                 </OSTable>
               ))}
-              {isCouponEnabled && !isCartPending && (
+              {isCouponEnabled && !isCartPending && cart?.business_id && (
                 <View>
                   <View style={{ paddingVertical: 5 }}>
                     <CouponControl
@@ -292,16 +309,23 @@ 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>
+                  {!!loyaltyRewardValue && isFinite(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?.status !== 2 && (
+              {cart?.business_id && cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
                     <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
@@ -336,6 +360,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: '' })}

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

@@ -53,7 +53,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	}
 
 	useEffect(() => {
-		handleChangeType(typeSelected)
+		handleChangeType && handleChangeType(typeSelected)
 	}, [typeSelected])
 
 	return (
@@ -95,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 && (