ordering-ui-react-native 0.21.86 → 0.21.87-release

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

@@ -2,13 +2,14 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components/native';
 import { View, StyleSheet, RefreshControl, Platform } from 'react-native';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-
+import { GiftCardOrdersList } from '../GiftCard/GiftCardOrdersList'
 import { OrdersOption } from '../OrdersOption'
 import { HeaderTitle, OButton, OText } from '../shared'
 import { ScrollView } from 'react-native-gesture-handler';
 import { Tab } from './styles'
 import { useTheme } from 'styled-components/native';
 import { Container } from '../../layouts/Container';
+import NavBar from '../NavBar'
 
 export const MyOrders = (props: any) => {
   const {
@@ -40,7 +41,8 @@ export const MyOrders = (props: any) => {
   const MyOrdersMenu = [
     { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
     { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
-    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
+    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab },
+    { key: 'giftCards', value: t('GIFT_CARD', 'Gift card'), disabled: false }
   ]
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -92,29 +94,15 @@ export const MyOrders = (props: any) => {
           ...props.titleStyle
         }}>
           {!props.hideBackBtn && (!isChewLayout || (isChewLayout && hideOrdersTheme)) && (
-            <OButton
-              imgLeftStyle={{ width: 18 }}
-              imgRightSrc={null}
-              style={{
-                borderWidth: 0,
-                width: 26,
-                height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
-                paddingLeft: 0,
-                paddingRight: 0,
-                marginTop: 30,
-              }}
-              onClick={goToBack}
-              icon={AntDesignIcon}
-              iconProps={{
-                name: 'arrowleft',
-                size: 26
-              }}
+            <NavBar
+              title={t('MY_ORDERS', 'My Orders')}
+              titleAlign={'center'}
+              onActionLeft={goToBack}
+              showCall={false}
+              paddingTop={30}
+              btnStyle={{ paddingLeft: 0 }}
             />
           )}
-          <HeaderTitle ph={10} text={t('MY_ORDERS', 'My Orders')} />
         </View>
       )}
       {!hideOrders && !isChewLayout && !showNavbar && (
@@ -124,7 +112,7 @@ export const MyOrders = (props: any) => {
         <ScrollView
           horizontal
           style={{ ...styles.container, borderBottomWidth: 1 }}
-          contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : 20  }}
+          contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : 20 }}
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
         >
@@ -148,7 +136,7 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
-          <View style={{ paddingHorizontal: 20  }}>
+          <View style={{ paddingHorizontal: 20 }}>
             <OrdersOption
               {...props}
               preOrders
@@ -215,7 +203,14 @@ export const MyOrders = (props: any) => {
           setOrdersLength={setOrdersLength}
         />
       )}
+      
+      {selectedOption === 'giftCards' && (
+        <View style={{ paddingHorizontal: 20  }}>
+          <GiftCardOrdersList
+            onNavigationRedirect={props?.onNavigationRedirect}
+          />
+        </View>
+      )}
     </Container>
-
   )
 }

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

@@ -1,3 +1,6 @@
+
+
+
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OText } from '../shared'
@@ -64,6 +67,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			{!props.hideArrowLeft && (
 				<OButton
+					useArrow
 					iconProps={{
 						name: 'arrowleft',
 						size: 26
@@ -114,8 +118,6 @@ const NavBar = (props: Props) => {
 			{props.showCall
 				? (<OButton
 					isCircle={true}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
 					imgRightSrc={null}
 					imgLeftStyle={{ tintColor: 'white', width: 30, height: 30 }}
 					imgLeftSrc={theme.images.general.support}
@@ -131,8 +133,9 @@ NavBar.defaultProps = {
 	textAlign: 'center'
 };
 
-const areEqual = (prevProps: { route?: any; }, nextProps: { route?: any; }) => {
-	return prevProps.route === nextProps.route
+const areEqual = (prevProps: { route?: any, title?: string }, nextProps: { route?: any, title?: string }) => {
+	return prevProps.route === nextProps.route && 
+	JSON.stringify(prevProps.title) === JSON.stringify(nextProps.title)
 	return true
 }
 

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

@@ -45,15 +45,10 @@ export const NetworkError = (props: NoNetworkParams) => {
         />
         <OButton
           text={t('REFRESH', 'Refresh')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
           style={{
             borderRadius: 8,
             marginTop: 45
           }}
-          textStyle={{
-            color: theme.colors.white
-          }}
           onClick={() => RNRestart.Restart()}
         />
       </ImageContainer>

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

@@ -42,11 +42,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
 						style={{ width: '100%', height: 50, ...btnStyle }}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}
 						text={btnTitle}
-						textStyle={{ color: theme.colors.white }}
 					/>
 				</View>
 			)}

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

@@ -10,13 +10,14 @@ export const OrderEta = (props: any) => {
 
   const [{ parseDate }] = useUtils()
   const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
-
+  const deliveryTypes = [1, 7]
+  
   const getEstimatedDeliveryTime = () => {
     let estimatedUtcTime = null
     let totalEta = 0
     if (order?.delivered_in) totalEta += order?.delivered_in
     if (order?.prepared_in) totalEta += order?.prepared_in
-    if (order?.delivery_type === 1 && order?.eta_drive_time) {
+    if (deliveryTypes?.includes?.(order?.delivery_type) && order?.eta_drive_time) {
       totalEta += order?.eta_drive_time
     }
 
@@ -57,7 +58,7 @@ export const OrderEta = (props: any) => {
     }
     estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
     const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
-    setEstimatedDeliveryTime(_estimatedTime)
+    setEstimatedDeliveryTime(order?.status === 13 ? parseDate(_delivery, { utc: !!order?.delivery_datetime_utc, outputFormat: outputFormat }) : _estimatedTime)
   }
 
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTheme } from 'styled-components/native'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OText, OButton } from '../shared'
 import { formatSeconds } from '../../utils'
@@ -17,7 +17,9 @@ export const OrderHistory = (props: any) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig();
   const theme = useTheme()
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     historyItem: {
@@ -62,7 +64,10 @@ export const OrderHistory = (props: any) => {
     20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
     21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
     22: 'ORDER_LOOKING_FOR_DRIVER',
-    23: 'ORDER_DRIVER_ON_WAY'
+    23: 'ORDER_DRIVER_ON_WAY',
+    24: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+    25: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+    26: 'ORDER_DRIVER_ARRIVED_CUSTOMER'
   }
 
   const getLogisticTagStatus = (status: any) => {
@@ -90,7 +95,7 @@ export const OrderHistory = (props: any) => {
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <OText size={20} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {t('DETAILS_OF_ORDER', 'Details of Order_NUMBER_').replace('_NUMBER_', ` # ${order?.id}`)}
+        {t('DETAILS_OF_ORDER', 'Details of Order_NUMBER_').replace('_NUMBER_', (changeIdToExternalId && order?.external_id) || `# ${order?.id}`)}
       </OText>
       {!messages?.loading && order && (
         <View style={styles.historyItem}>
@@ -145,10 +150,10 @@ export const OrderHistory = (props: any) => {
                     </>
                   )
                     : message.change?.attribute === 'prepared_in' ? (
-                    <>
-                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
-                      {formatSeconds(parseInt(message.change.new, 10))}
-                    </>
+                      <>
+                        {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
+                        {formatSeconds(parseInt(message.change.new, 10))}
+                      </>
                     ) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
@@ -170,11 +175,9 @@ export const OrderHistory = (props: any) => {
       ))}
       <OButton
         text={enableReview ? t('REVIEW_ORDER', 'Review order') : t('CONTINUE', 'Continue')}
-        textStyle={{ fontSize: 14, color: theme.colors.white }}
+        textStyle={{ fontSize: 14 }}
         imgRightSrc={theme.images.general.arrow_right}
         imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-        borderColor='transparent'
-        bgColor={theme.colors.primary}
         style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginBottom: 30, marginTop: 20 }}
         onClick={() => handleReview()}
       />

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

@@ -129,11 +129,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [showTitle, setShowTitle] = useState(false)
 
   const { order, businessData } = props.order;
-  const mapValidStatuses = [9, 19, 23]
+  const mapValidStatuses = [9, 19, 23, 26]
   const placeSpotTypes = [3, 4, 5]
   const directionTypes = [2, 3, 4, 5]
-  const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23, 24, 25, 26]
   const reorderStatus = [1, 2, 5, 6, 10, 11, 12]
+  const cateringTypes = [7, 8]
+  const deliveryTypes = [1, 7]
   const [isPickup, setIsPickup] = useState(order?.delivery_type === 2)
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const isGiftCardOrder = !order?.business_id
@@ -148,6 +150,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
   const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
   const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
+
   const progressBarObjt = isPickup ? getOrderStatuPickUp : getOrderStatus
   const walletName: any = {
     cash: {
@@ -185,18 +189,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     navigation.navigate('BottomTab');
   };
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (order?.taxes?.length === 0 || !order?.taxes) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {
       return order?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded + (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') || (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return order?.taxes?.filter((tax: any) => tax?.type === 1 && tax?.target === 'product')?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const handleClickOrderReview = (order: any) => {
@@ -270,7 +274,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       title: t('DRIVER', 'Driver'),
       icon:
         order?.driver?.photo ||
-        'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
+        theme?.images?.general?.driverPng,
     },
     {
       ...order?.business?.location,
@@ -361,7 +365,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [props?.order?.error, props?.order?.loading])
 
-
   useEffect(() => {
     if (!order?.delivery_type) return
     setIsPickup(order?.delivery_type === 2)
@@ -386,7 +389,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 numberOfLines={2}
                 ellipsizeMode='tail'
               >
-                {`${t('ORDER', 'Order')} #${order?.id}`}
+                {`${t('ORDER', 'Order')} ${(changeIdToExternalId && order?.external_id) || `#${order?.id}`}`}
               </OText>
             )}
           </>
@@ -460,16 +463,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <Header>
               <NavBar
                 hideArrowLeft
-                title={`${t('ORDER', 'Order')} #${order?.id}`}
-                titleAlign={'center'}
+                title={`${t('ORDER', 'Order')} ${(changeIdToExternalId && order?.external_id) || `#${order?.id}`}`}
+                titleAlign={'left'}
                 showCall={false}
                 btnStyle={{ paddingLeft: 0 }}
                 style={{ marginTop: Platform.OS === 'ios' ? 0 : 20 }}
                 titleWrapStyle={{ paddingHorizontal: 0 }}
-                titleStyle={{ marginRight: 0, marginLeft: 0 }}
+                titleStyle={{ marginRight: 0, marginLeft: 0, paddingHorizontal: 0 }}
                 subTitle={!hideDeliveryDate && <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
                   {activeStatus.includes(order?.status) ? (
-                    <OrderEta order={order} />
+                    <>
+                      {cateringTypes.includes(order?.delivery_type) ? `${t('CREATED_AT', 'Created at')}: ${parseDate(order?.created_at)}\n` : ''}
+                      {cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}:` : ''} <OrderEta order={order} />
+                    </>
                   ) : (
                     parseDate(order?.reporting_data?.at[`status:${order.status}`])
                   )}
@@ -643,7 +649,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OButton
                       text={t('GET_DIRECTIONS', 'Get Directions')}
                       imgRightSrc=''
-                      textStyle={{ color: theme.colors.white }}
                       style={{
                         alignSelf: 'center',
                         borderRadius: 10,
@@ -719,7 +724,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     )}
                   </InfoBlock>
                 </Customer>
-                {!isGiftCardOrder && order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+                {!isGiftCardOrder && order?.delivery_option !== undefined && deliveryTypes?.includes?.(order?.delivery_type) && (
                   <View style={{ marginTop: 15 }}>
                     <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
                       {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
@@ -750,6 +755,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           }
                           locations={parsedLocations}
                           readOnly
+                          manualZoom
                         />
                       </Map>
                     )}
@@ -832,9 +838,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OButton
                     text={t('YOUR_ORDERS', 'Your Orders')}
                     textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                    bgColor={theme.colors.white}
                     imgRightSrc={null}
-                    borderColor={theme.colors.primary}
-                    bgColor={theme.colors.clear}
                     style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
                     parentStyle={{ marginTop: 29, marginEnd: 15 }}
                     onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
@@ -934,7 +939,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   )
                 }
                 {
-                  order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any) => (
                     <Table key={tax.id}>
                       <OSRow>
                         <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
@@ -983,12 +988,30 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     </Table>
                   ))
                 }
-                {typeof order?.summary?.delivery_price === 'number' && (
+                {typeof order?.summary?.delivery_price === 'number' && !isPickup && (
                   <Table>
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true))}</OText>
                   </Table>
                 )}
+                {
+                  order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                    <Table key={`${tax?.description}_${i}`}>
+                      <OSRow>
+                        <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                          {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                          {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                        </OText>
+                        {setOpenTaxModal && (
+                          <TouchableOpacity onClick={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                            <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                          </TouchableOpacity>
+                        )}
+                      </OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                    </Table>
+                  ))
+                }
                 {
                   order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
                     <Table key={offer.id}>

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 

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

@@ -23,6 +23,7 @@ import {
   OrderProgressWrapper
 } from './styles'
 import { getOrderStatuPickUp, getOrderStatus } from '../../utils'
+import DeviceInfo from 'react-native-device-info'
 
 const OrderProgressUI = (props: any) => {
   const {
@@ -40,7 +41,8 @@ const OrderProgressUI = (props: any) => {
   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 statusToShow = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23, 24, 25, 26]
+  const deliveryTypes = [1, 7]
 
   const styles = StyleSheet.create({
     main: {
@@ -56,7 +58,9 @@ const OrderProgressUI = (props: any) => {
       shadowColor: '#000',
       shadowOpacity: 0.2,
       shadowRadius: 2,
-      elevation: 3
+      elevation: 3,
+      borderWidth: 1,
+      borderColor: 'rgba(0,0,0,0.1)'
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -110,7 +114,7 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
-  const progressBarObjt = lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+  const progressBarObjt = (s: any) => lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp(s) : getOrderStatus(s)
 
   return (
     <>
@@ -130,7 +134,7 @@ const OrderProgressUI = (props: any) => {
               <View style={styles.logoWrapper}>
                 <FastImage
                   style={{ width: 50, height: 50 }}
-                  source={orderList?.orders.length === 1 ? {
+                  source={orderList?.orders.length === 1 && lastOrder?.business?.logo?.includes?.('http') ? {
                     uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
                   } : theme.images.logos.logotype}
@@ -169,7 +173,7 @@ const OrderProgressUI = (props: any) => {
               <ProgressTextWrapper>
                 <OText size={12} style={{ width: '50%' }}>{progressBarObjt(lastOrder.status)?.value}</OText>
                 <TimeWrapper>
-                  <OText size={11}>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
+                  <OText size={11}>{deliveryTypes?.includes?.(lastOrder?.delivery_type) ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>
                     {lastOrder?.delivery_datetime_utc
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: configs?.general_hour_format?.value || 'HH:mm' })
@@ -202,13 +206,29 @@ export const OrderProgress = (props: any) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23, 24, 25, 26],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
       pageSize: 10,
       controlType: 'infinity'
     },
+    propsToFetch: [
+      'id',
+      'name',
+      'business',
+      'status',
+      'delivery_type',
+      'delivery_datetime_utc',
+      'delivery_datetime',
+      'reporting_data',
+      'eta_current_status_time',
+      'eta_previous_status_times',
+      'eta_time',
+      'delivered_in',
+      'prepared_in',
+      'eta_drive_time'
+    ],
     noGiftCardOrders: true
   }
 

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

@@ -47,7 +47,9 @@ const OrderSummaryUI = (props: any) => {
     cateringTypes,
     hideDeliveryFee,
     loyaltyRewardRate,
-    maxDate
+    maxDate,
+    hideCommentsByValidationCheckout,
+    hideCouponByValidationCheckout
   } = props;
 
   const theme = useTheme()
@@ -55,11 +57,10 @@ const OrderSummaryUI = (props: any) => {
   const [{ configs }] = useConfig();
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
-  const [validationFields] = useValidationFields();
   const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-  const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
+  const isCouponEnabled = hideCouponByValidationCheckout
+  const hideCartComments = hideCommentsByValidationCheckout
 
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
 
@@ -72,12 +73,14 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     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)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
@@ -102,7 +105,7 @@ const OrderSummaryUI = (props: any) => {
   }
 
   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)
+    return cart?.taxes?.filter((tax: any) => (tax?.type === 1 && tax?.target === 'product'))?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const OfferAlert = ({ offerId }: any) => {
@@ -194,7 +197,7 @@ const OrderSummaryUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any, i: number) => (
                   <OSTable key={tax.id}>
                     <OSRow>
                       <OText size={12} numberOfLines={1} >
@@ -249,9 +252,25 @@ const OrderSummaryUI = (props: any) => {
               {orderState?.options?.type === 1 && !hideDeliveryFee && (
                 <OSTable>
                   <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={12}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+                  <OText size={12}>{parsePrice(cart?.delivery_price_with_discount + getIncludedTaxes(true))}</OText>
                 </OSTable>
               )}
+              {
+                cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                  <OSTable key={`${tax.description}_${i}`}>
+                    <OSRow>
+                      <OText size={12} numberOfLines={1}>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                        <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
               {
                 cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
                   <OSTable key={offer.id}>

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

@@ -31,14 +31,14 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
-	const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
-	const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
+	const orderTypeTitle = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
+	const orderTypeDescription = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
+	const orderTypeCallAction = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
-			label: orderTypeTitle(type.value) || t(type.content, type.content),
-			description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+			label: t(type.content, type.content),
+			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
 		}
 	})
 
@@ -102,6 +102,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						style={{ paddingBottom: 0 }}
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
 						noMargin
 					/>
 					{
@@ -115,7 +116,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
 													<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}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
 														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>