ordering-ui-react-native 0.12.43 → 0.12.47

package/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';
@@ -22,7 +23,8 @@ 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 {
     cart,
@@ -42,6 +44,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;
 
@@ -60,6 +63,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 && (
@@ -84,9 +97,7 @@ const OrderSummaryUI = (props: any) => {
             <OSBill>
               <OSTable>
                 <OText size={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={18}>{cart.business.tax_type === 1
-                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                    : parsePrice(cart?.subtotal || 0)}</OText>
+                <OText size={18}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
               </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && (
                 <OSTable>
@@ -101,15 +112,38 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={18}>- {parsePrice(cart?.discount || 0)}</OText>
                 </OSTable>
               )}
-              {cart.business.tax_type !== 1 && (
-                <OSTable>
-                  <OText size={18}>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText size={18}>{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={18} 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={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={18}>{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={18} 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={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={18}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  </OSTable>
+                ))
+              }
               {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
                   <OText size={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -123,22 +157,13 @@ const OrderSummaryUI = (props: any) => {
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                       !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    (
-                      `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
-                    )}
+                      (
+                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
+                      )}
                   </OText>
                   <OText size={18}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
-              {cart?.service_fee > 0 && (
-                <OSTable>
-                  <OText size={18}>
-                    {t('SERVICE_FEE', 'Service Fee')}
-                    {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                  </OText>
-                  <OText size={18}>{parsePrice(cart?.service_fee)}</OText>
-                </OSTable>
-              )}
               {isCouponEnabled && !isCartPending && (
                 <View>
                   <View style={{ paddingVertical: 5 }}>
@@ -182,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/src/components/OrderSummary/styles.tsx

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

package/src/components/ProductForm/index.tsx

@@ -132,7 +132,7 @@ export const ProductOptionsUI = (props: any) => {
                 ) : (
                   <>
                     <View style={{ flexDirection: 'column', width: '100%' }}>
-                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{'price'}</OText>
+                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
                       <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
                         <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>

package/src/components/SignupForm/index.tsx

@@ -34,6 +34,7 @@ import CheckBox from '@react-native-community/checkbox';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { useTheme } from 'styled-components/native';
+import { AppleLogin } from '../AppleLogin';
 
 const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
 
@@ -97,7 +98,7 @@ const SignupFormUI = (props: SignupParams) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [signupTab, setSignupTab] = useState(useSignupByCellphone && !useSignupByEmail ? 'cellphone' : 'email')
-  const [isFBLoading, setIsFBLoading] = useState(false)
+  const [isLoadingSocialButton, setIsLoadingSocialButton] = useState(false);
   const [phoneInputData, setPhoneInputData] = useState({
     error: '',
     phone: {
@@ -114,8 +115,12 @@ const SignupFormUI = (props: SignupParams) => {
   const phoneRef = useRef<any>(null)
   const passwordRef = useRef<any>(null)
 
-  const handleRefs = (ref : any, code : string) => {
-    switch(code){
+  const anySocialButtonActivated = ((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
+    (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) ||
+    (configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null)
+
+  const handleRefs = (ref: any, code: string) => {
+    switch (code) {
       case 'name': {
         nameRef.current = ref
         break
@@ -138,8 +143,8 @@ const SignupFormUI = (props: SignupParams) => {
     }
   }
 
-  const handleFocusRef = (code : string) => {
-    switch(code) {
+  const handleFocusRef = (code: string) => {
+    switch (code) {
       case 'name': {
         nameRef?.current?.focus()
         break
@@ -163,8 +168,8 @@ const SignupFormUI = (props: SignupParams) => {
     }
   }
 
-  const getNextFieldCode = (index : number) => {
-    const fields = sortInputFields({ values: validationFields?.fields?.checkout })?.filter((field : any) => !notValidationFields.includes(field.code) && showField(field.code))
+  const getNextFieldCode = (index: number) => {
+    const fields = sortInputFields({ values: validationFields?.fields?.checkout })?.filter((field: any) => !notValidationFields.includes(field.code) && showField(field.code))
     return fields[index + 1]?.code
   }
 
@@ -176,6 +181,14 @@ const SignupFormUI = (props: SignupParams) => {
     })
   }
 
+  const handleSuccessApple = (user: any) => {
+    _removeStoreData('isGuestUser')
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
   const handleChangeTab = (val: string) => {
     setSignupTab(val);
     setPasswordSee(false);
@@ -347,7 +360,7 @@ const SignupFormUI = (props: SignupParams) => {
         <FormInput>
           {!(useChekoutFileds && validationFields?.loading && validationFields?.fields?.checkout) ? (
             <>
-              {sortInputFields({ values: validationFields?.fields?.checkout }).map((field: any, i : number) =>
+              {sortInputFields({ values: validationFields?.fields?.checkout }).map((field: any, i: number) =>
                 !notValidationFields.includes(field.code) &&
                 (
                   showField && showField(field.code) && (
@@ -367,7 +380,7 @@ const SignupFormUI = (props: SignupParams) => {
                           autoCompleteType={field.code === 'email' ? 'email' : 'off'}
                           returnKeyType='next'
                           blurOnSubmit={false}
-                          forwardRef={(ref : any) => handleRefs(ref,field.code)}
+                          forwardRef={(ref: any) => handleRefs(ref, field.code)}
                           onSubmitEditing={() => field.code === 'email' ? phoneRef?.current?.focus?.() : handleFocusRef(getNextFieldCode(i))}
                         />
                       )}
@@ -462,17 +475,17 @@ const SignupFormUI = (props: SignupParams) => {
                 }}
                 defaultValue={false}
               />
-              <ScrollView 
-              horizontal
-              showsVerticalScrollIndicator={false}
-              showsHorizontalScrollIndicator={false}
+              <ScrollView
+                horizontal
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
               >
-              <OText size={16} style={{ paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
-              <TouchableOpacity onPress={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}>
-                <OText size={16} color={theme.colors.primary}>
-                  {t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
-                </OText>
-              </TouchableOpacity>
+                <OText size={16} style={{ paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
+                <TouchableOpacity onPress={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}>
+                  <OText size={16} color={theme.colors.primary}>
+                    {t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
+                  </OText>
+                </TouchableOpacity>
               </ScrollView>
             </View>
           )}
@@ -515,10 +528,7 @@ const SignupFormUI = (props: SignupParams) => {
           )
         }
 
-        {configs && Object.keys(configs).length > 0 && (
-          (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-          (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
-          (
+        {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
             <ButtonsSection>
               <OText size={18} mBottom={10} color={theme.colors.disabled}>
                 {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
@@ -526,27 +536,34 @@ const SignupFormUI = (props: SignupParams) => {
               <SocialButtons>
                 {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
                   configs?.facebook_id?.value && (
-                  <FacebookLogin
-                    notificationState={notificationState}
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsFBLoading(val)}
-                    handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
-                )}
+                    <FacebookLogin
+                      notificationState={notificationState}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
                 {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
                   <GoogleLogin
                     notificationState={notificationState}
                     webClientId={configs?.google_login_client_id?.value}
                     handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
                     handleSuccessGoogleLogin={handleSuccessFacebook}
                   />
                 )}
+                {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+                  <AppleLogin
+                    notificationState={notificationState}
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                    handleSuccessApple={handleSuccessApple}
+                  />
+                )}
               </SocialButtons>
             </ButtonsSection>
-          )
-        )}
-      </FormSide >
+          )}
+      </FormSide>
       <OModal
         open={isModalVisible}
         onClose={() => setIsModalVisible(false)}
@@ -561,7 +578,7 @@ const SignupFormUI = (props: SignupParams) => {
           handleVerifyCodeClick={onSubmit}
         />
       </OModal>
-      <Spinner visible={formState.loading || isFBLoading} />
+      <Spinner visible={formState.loading || isLoadingSocialButton} />
     </View >
   );
 };

package/src/components/SingleProductCard/index.tsx

@@ -67,7 +67,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
     <CardContainer
       style={[styles.container, (isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle]}
       activeOpacity={1}
-      onPress={() => onProductClick(product)}
+      onPress={() => onProductClick?.(product)}
     >
       <OIcon
         url={optimizeImage(product?.images, 'h_200,c_limit')}

package/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/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/src/components/UserFormDetails/index.tsx

@@ -23,9 +23,7 @@ export const UserFormDetailsUI = (props: any) => {
     handleChangeInput,
     handleButtonUpdateClick,
     phoneUpdate,
-    hideUpdateButton,
     handleCancelEdit,
-    toggleIsEdit,
     isCheckout
   } = props
 

package/src/navigators/BottomNavigator.tsx

@@ -39,7 +39,7 @@ const BottomNavigator = () => {
     : {height: 40, position: 'relative', bottom: 15}
   return (
     <Tab.Navigator
-      initialRouteName='BusinessList'
+      initialRouteName="BusinessList"
       activeColor={theme.colors.primary}
       barStyle={{ backgroundColor: theme.colors.white, ...androidStyles }}
       labeled={false}

package/src/types/index.tsx

@@ -202,7 +202,7 @@ export interface SingleProductCardParams {
   businessId: any,
   product: any;
   isSoldOut: boolean;
-  onProductClick: any;
+  onProductClick?: any;
 }
 export interface BusinessInformationParams {
   navigation?: any,
@@ -430,6 +430,12 @@ export interface GoogleMapsParams {
   handleToggleMap?: () => void
 }
 
+export interface AppleLoginParams {
+  handleErrors?: (error: string) => {},
+  handleLoading?: (val: boolean) => void,
+  handleSuccessApple?: (result: any) => void,
+  notificationState?: any,
+}
 export interface ShareComponentParams {
   orderId?: number;
   hashkey?: string;

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -136,11 +136,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       timerRef.current.blur();
     }
 
-    if (!isFocus) {
-      if (time.length > 1) timerRef.current.clear();
-      timerRef?.current?.focus?.();
-      handleFocusTimer();
-    }
   };
 
   const openTextTareaOInput = () => {
@@ -163,7 +158,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
     const time = parseInt(hour || '0') * 60 + (parseInt(minsToSend) || 0);
 
-    let bodyToSend : any = {};
+    let bodyToSend: any = {};
     const orderStatus: any = {
       acceptByBusiness: {
         prepared_in: time,
@@ -215,6 +210,17 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
   };
 
+  useEffect(() => {
+    if (actions && action === 'accept') {
+      const interval = setTimeout(() => {
+        timerRef?.current?.focus?.()
+      }, 250)
+      return () => {
+        clearTimeout(interval)
+      }
+    }
+  }, [timerRef?.current])
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -359,7 +365,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onChangeText={handleTime}
           onPressOut={() => handleFixTime()}
           editable={true}
-          autoFocus={actions && action === 'accept'}
           selectionColor={theme.colors.primary}
           placeholderTextColor={theme.colors.textGray}
           color={theme.colors.textGray}

package/themes/doordash/src/components/Cart/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { CContainer, 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';
@@ -22,6 +22,9 @@ import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { Platform } from 'react-native';
+import { TaxInformation } from '../TaxInformation';
+import { TouchableOpacity } from 'react-native';
+import AntIcon from 'react-native-vector-icons/AntDesign'
 
 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
@@ -92,6 +96,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
@@ -120,9 +134,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 && (
@@ -138,15 +150,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>
@@ -167,15 +202,6 @@ const CartUI = (props: any) => {
                 <OText>{parsePrice(cart?.driver_tip)}</OText>
               </OSTable>
             )}
-            {cart?.service_fee > 0 && (
-              <OSTable>
-                <OText>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText>{parsePrice(cart?.service_fee)}</OText>
-              </OSTable>
-            )}
             {isCouponEnabled && !isCartPending && (
               <OSTable>
                 <OSCoupon>
@@ -249,6 +275,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>
   )
 }