ordering-ui-react-native 0.12.44 → 0.12.45

package/themes/single-business/src/components/OrderDetails/index.tsx

@@ -44,6 +44,9 @@ import { USER_TYPE } from '../../config/constants';
 import { GoogleMap } from '../GoogleMap';
 import { verifyDecimals } from '../../utils';
 import NavBar from '../NavBar';
+import { OSRow } from '../OrderSummary/styles';
+import { TaxInformation } from '../TaxInformation';
+import AntIcon from 'react-native-vector-icons/AntDesign'
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
 	const {
@@ -99,6 +102,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 		business: false,
 		driver: false,
 	});
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+
 	const { order, businessData } = props.order;
 
 	const getOrderStatus = (s: string) => {
@@ -327,6 +332,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 		navigation.navigate('BottomTab');
 	};
 
+  const getIncludedTaxes = () => {
+    if (order?.taxes?.length === 0) {
+      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)
+      }, 0)
+    }
+  }
+
+
 	useEffect(() => {
 		BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
 		return () => {
@@ -678,7 +694,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 							<Table>
 								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL', 'Subtotal')}</OText>
 								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{parsePrice(order?.summary?.subtotal || order?.subtotal)}
+                  {parsePrice(((order?.summary?.subtotal || order?.subtotal) + getIncludedTaxes()))}
 								</OText>
 							</Table>
 							{(order?.summary?.discount > 0 || order?.discount > 0) && (
@@ -699,17 +715,59 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 									</OText>
 								</Table>
 							)}
-							{order?.tax_type !== 1 && (
-								<Table>
-									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-										{t('TAX', 'Tax')}
-										{`(${verifyDecimals(order?.tax, parseNumber)}%)`}
-									</OText>
-									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-										{parsePrice(order?.summary?.tax || order?.totalTax)}
-									</OText>
-								</Table>
-							)}
+							{
+                order?.taxes?.length === 0 && order?.tax_type === 2 && (
+                  <Table>
+                    <OText size={12}>
+                      {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
+                    </OText>
+                    <OText size={12}>{parsePrice(order?.summary?.tax || 0)}</OText>
+                  </Table>
+                )
+              }
+              {
+                order?.fees?.length === 0 && (
+                  <Table>
+                    <OText size={12}>
+                      {t('SERVICE_FEE', 'Service fee')}
+                      {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
+                    </OText>
+                    <OText size={12}>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+                  </Table>
+                )
+              }
+              {
+                order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  <Table key={tax.id}>
+                    <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 })}>
+                        <AntIcon name='exclamationcircleo' size={14} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  </Table>
+                ))
+              }
+              {
+                order?.fees?.length > 0 && order?.fees?.filter((fee : any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+                    <Table key={fee.id}>
+                      <OSRow>
+                        <OText size={12} numberOfLines={1}>
+                          {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                          ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
+                        </OText>
+                        <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })}>
+                          <AntIcon name='exclamationcircleo' size={14} color={theme.colors.primary} />
+                        </TouchableOpacity>
+                      </OSRow>
+                      <OText size={12}>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    </Table>
+                ))
+              }
 							{(order?.summary?.delivery_price > 0 ||
 								order?.deliveryFee > 0) && (
 									<Table>
@@ -735,17 +793,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 									)}
 								</OText>
 							</Table>
-							<Table>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{t('SERVICE_FEE', 'Service Fee')}
-									{`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
-								</OText>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{parsePrice(
-										order?.summary?.service_fee || order?.serviceFee || 0,
-									)}
-								</OText>
-							</Table>
 							<Total>
 								<Table>
 									<OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
@@ -772,6 +819,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 					onClose={() => handleCloseModal()}
 				/>
 			</OModal>
+      <OModal
+        open={openTaxModal.open}
+        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        entireModal
+      >
+        <TaxInformation data={openTaxModal.data} products={order?.products} />
+      </OModal>
 		</OrderDetailsContainer>
 	);
 };

package/themes/single-business/src/components/OrderSummary/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import {
 	Cart,
 	useOrder,
@@ -13,7 +13,8 @@ import {
 	OSContainer,
 	OSProductList,
 	OSBill,
-	OSTable
+	OSTable,
+  OSRow
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -21,7 +22,9 @@ import { CouponControl } from '../CouponControl';
 import { OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
-
+import { useTheme } from 'styled-components/native';
+import { TaxInformation } from '../TaxInformation';
+import AntIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderSummaryUI = (props: any) => {
 	const {
@@ -34,6 +37,7 @@ const OrderSummaryUI = (props: any) => {
 		isFromCheckout
 	} = props;
 
+  const theme = useTheme()
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [orderState] = useOrder();
@@ -41,6 +45,7 @@ const OrderSummaryUI = (props: any) => {
 	const [validationFields] = useValidationFields();
 	const [openProduct, setModalIsOpen] = useState(false)
 	const [curProduct, setCurProduct] = useState<any>(null)
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
 	const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
@@ -59,6 +64,16 @@ const OrderSummaryUI = (props: any) => {
 		}
 	}
 
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      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)
+    }
+  }
+
 	return (
 		<OSContainer>
 			{cart?.products?.length > 0 && (
@@ -83,9 +98,7 @@ const OrderSummaryUI = (props: any) => {
 						<OSBill>
 							<OSTable>
 								<OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-								<OText size={12}>{cart.business.tax_type === 1
-									? parsePrice((cart?.subtotal + cart?.tax) || 0)
-									: parsePrice(cart?.subtotal || 0)}</OText>
+								<OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
 							</OSTable>
 							{cart?.discount > 0 && cart?.total >= 0 && (
 								<OSTable>
@@ -100,15 +113,38 @@ const OrderSummaryUI = (props: any) => {
 									<OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
 								</OSTable>
 							)}
-							{cart.business.tax_type !== 1 && (
-								<OSTable>
-									<OText size={12}>
-										{t('TAX', 'Tax')}
-										{`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.tax || 0)}</OText>
-								</OSTable>
-							)}
+							{
+                cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  <OSTable key={tax?.id}>
+                    <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 })} >
+                        <AntIcon name='exclamationcircleo' size={14} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+                  <OSTable key={fee.id}>
+                    <OSRow>
+                      <OText size={12} numberOfLines={1}>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                        <AntIcon name='exclamationcircleo' size={14} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  </OSTable>
+                ))
+              }
 							{orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
 								<OSTable>
 									<OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -129,15 +165,6 @@ const OrderSummaryUI = (props: any) => {
 									<OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
 								</OSTable>
 							)}
-							{cart?.service_fee > 0 && (
-								<OSTable>
-									<OText size={12}>
-										{t('SERVICE_FEE', 'Service Fee')}
-										{`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.service_fee)}</OText>
-								</OSTable>
-							)}
 							{isCouponEnabled && !isCartPending && (
 								<View>
 									<View style={{ paddingVertical: 5 }}>
@@ -180,6 +207,13 @@ const OrderSummaryUI = (props: any) => {
 							isFromCheckout={isFromCheckout}
 						/>
 					</OModal>
+          <OModal
+            open={openTaxModal.open}
+            onClose={() => setOpenTaxModal({ open: false, data: null })}
+            entireModal
+          >
+            <TaxInformation data={openTaxModal.data} products={cart.products} />
+          </OModal>
 				</>
 			)}
 		</OSContainer>

package/themes/single-business/src/components/OrderSummary/styles.tsx

@@ -33,3 +33,9 @@ export const OSCoupon = styled.View`
   width: 100%;
   padding: 5px 0px;
 `
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

package/themes/single-business/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				styles.container,
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
-			onPress={() => onProductClick(product)}>
+			onPress={() => onProductClick?.(product)}>
 			<CardInfo>
 				<OText
 					size={12}

package/themes/single-business/src/components/TaxInformation/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLanguage, useUtils } from 'ordering-components/native'
+import { SingleProductCard } from '../SingleProductCard'
+import { TaxInformationContainer, ProductContainer } from './styles'
+import { OText } from '../shared'
+
+interface taxInformationParams {
+  data: { name: string, description?: string, rate: string | number, type: number, fixed?: number, percentage?: number, id: number },
+  products: Array<any>
+}
+
+export const TaxInformation = (props: taxInformationParams) => {
+  const {
+    data,
+    products
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+
+  const isTax = typeof data?.rate === 'number'
+  const TaxFeeString = isTax ? 'tax' : 'fee'
+  const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+
+  return (
+    <TaxInformationContainer>
+      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+        {`${data?.name ||
+          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
+      </OText>
+      {data?.description && (
+        <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+        </OText>
+      )}
+      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
+      <ProductContainer>
+        {
+          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
+            <SingleProductCard
+              key={product.id}
+              product={product}
+              isSoldOut={false}
+              businessId={product?.business_id}
+            />
+          ))
+        }
+      </ProductContainer>
+    </TaxInformationContainer>
+  )
+}

package/themes/single-business/src/components/TaxInformation/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native'
+
+export const TaxInformationContainer = styled.ScrollView`
+  padding: 10px;
+`
+
+export const ProductContainer = styled.View`
+  flex: 1
+`

package/themes/uber-eats/src/components/Cart/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { CContainer, CartContent, CheckoutAction } from './styles';
 
-import { OSBill, OSTable, OSCoupon, OSTotal } from '../OrderSummary/styles';
+import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { BusinessItemAccordion } from '../BusinessItemAccordion';
@@ -21,6 +21,9 @@ import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import { TaxInformation } from '../TaxInformation';
+import { TouchableOpacity } from 'react-native';
 
 const CartUI = (props: any) => {
   const {
@@ -47,6 +50,7 @@ const CartUI = (props: any) => {
   const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -93,6 +97,16 @@ const CartUI = (props: any) => {
     })
   }
 
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      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)
+    }
+  }
+
   return (
     <CContainer>
       <BusinessItemAccordion
@@ -124,9 +138,7 @@ const CartUI = (props: any) => {
               <OSTable>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText>
-                  {cart.business.tax_type === 1
-                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                    : parsePrice(cart?.subtotal || 0)}
+                  {parsePrice(cart?.subtotal + getIncludedTaxes())}
                 </OText>
               </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && (
@@ -142,15 +154,38 @@ const CartUI = (props: any) => {
                   <OText>- {parsePrice(cart?.discount || 0)}</OText>
                 </OSTable>
               )}
-              {cart.business.tax_type !== 1 && (
-                <OSTable>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.tax || 0)}</OText>
-                </OSTable>
-              )}
+              {
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  <OSTable key={tax.id}>
+                    <OSRow>
+                      <OText numberOfLines={1} >
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
+                  <OSTable key={fee?.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  </OSTable>
+                ))
+              }
               {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -202,7 +237,7 @@ const CartUI = (props: any) => {
               </OSTotal>
             </OSBill>
           )}
-        </CartContent> 
+        </CartContent>
         {cart?.valid_products && (
           <CheckoutAction>
             <OButton
@@ -254,6 +289,13 @@ const CartUI = (props: any) => {
           setCanOpenUpselling={setCanOpenUpselling}
         />
       )}
+      <OModal
+        open={openTaxModal.open}
+        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        entireModal
+      >
+        <TaxInformation data={openTaxModal.data} products={cart.products} />
+      </OModal>
     </CContainer>
   )
 }

package/themes/uber-eats/src/components/OrderDetails/index.tsx

@@ -45,6 +45,9 @@ import { GoogleMap } from '../GoogleMap'
 import { verifyDecimals } from '../../utils'
 import { useTheme } from 'styled-components/native'
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import { OSRow } from '../OrderSummary/styles';
+import { TaxInformation } from '../TaxInformation';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -63,7 +66,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const styles = StyleSheet.create({
     statusBar: {
-      transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
       height: 10,
     },
     logo: {
@@ -85,9 +88,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [{ user }] = useSession()
   const [{ configs }] = useConfig()
   const [, { refreshOrderOptions }] = useOrder()
-  const [openModalForBusiness,setOpenModalForBusiness] = useState(false)
-  const [openModalForDriver,setOpenModalForDriver] = useState(false)
+  const [openModalForBusiness, setOpenModalForBusiness] = useState(false)
+  const [openModalForDriver, setOpenModalForDriver] = useState(false)
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+
   const { order, businessData } = props.order
 
   const getOrderStatus = (s: string) => {
@@ -152,12 +157,22 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       navigation?.canGoBack() && navigation.goBack();
       return
     }
-    if(goToBusinessList){
+    if (goToBusinessList) {
       refreshOrderOptions()
     }
     navigation.navigate('BottomTab');
   }
 
+  const getIncludedTaxes = () => {
+    if (order?.taxes?.length === 0) {
+      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)
+      }, 0)
+    }
+  }
+
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
     return () => {
@@ -202,7 +217,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </Header>
       <Spinner visible={!order || Object.keys(order).length === 0} />
       {order && Object.keys(order).length > 0 && (
-        <>          
+        <>
           <OrderContent>
             <OrderBusiness>
               <View
@@ -303,7 +318,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <OrderBill>
               <Table>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText>{parsePrice(order?.summary?.subtotal || order?.subtotal)}</OText>
+                <OText>{parsePrice(((order?.summary?.subtotal || order?.subtotal) + getIncludedTaxes()))}</OText>
               </Table>
               {(order?.summary?.discount > 0 || order?.discount > 0) && (
                 <Table>
@@ -318,15 +333,59 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText>- {parsePrice(order?.summary?.discount || order?.discount)}</OText>
                 </Table>
               )}
-              {order?.tax_type !== 1 && (
-                <Table>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(order?.summary?.tax || order?.totalTax)}</OText>
-                </Table>
-              )}
+              {
+                order?.taxes?.length === 0 && order?.tax_type === 2 && (
+                  <Table>
+                    <OText>
+                      {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
+                    </OText>
+                    <OText>{parsePrice(order?.summary?.tax || 0)}</OText>
+                  </Table>
+                )
+              }
+              {
+                order?.fees?.length === 0 && (
+                  <Table>
+                    <OText>
+                      {t('SERVICE_FEE', 'Service fee')}
+                      {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
+                    </OText>
+                    <OText>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+                  </Table>
+                )
+              }
+              {
+                order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  <Table key={tax.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  </Table>
+                ))
+              }
+              {
+                order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+                  <Table key={fee.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                        ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  </Table>
+                ))
+              }
               {(order?.summary?.delivery_price > 0 || order?.deliveryFee > 0) && (
                 <Table>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -345,13 +404,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </OText>
                 <OText>{parsePrice(order?.summary?.driver_tip || order?.totalDriverTip)}</OText>
               </Table>
-              <Table>
-                <OText>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText>{parsePrice(order?.summary?.service_fee || order?.serviceFee || 0)}</OText>
-              </Table>
               <Total>
                 <Table>
                   <OText style={styles.textBold}>{t('TOTAL', 'Total')}</OText>
@@ -428,6 +480,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           setMessages={setMessages}
         />
       </OModal>
+      <OModal
+        open={openTaxModal.open}
+        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        entireModal
+      >
+        <TaxInformation data={openTaxModal.data} products={order?.products} />
+      </OModal>
     </OrderDetailsContainer>
   )
 }