ordering-ui-react-native 0.12.43 → 0.12.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.43",
+  "version": "0.12.47",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/AppleLogin/index.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
+import { useConfig, useApi, useLanguage } from 'ordering-components/native'
+import uuid from 'react-native-uuid';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+
+import { Container, AppleButton } from './styles';
+import { useTheme } from 'styled-components/native';
+import { OText } from '../shared';
+import { AppleLoginParams } from '../../types';
+
+export const AppleLogin = (props : AppleLoginParams) => {
+
+  const {
+    notificationState,
+    handleErrors,
+    handleLoading,
+    handleSuccessApple,
+  } = props
+
+  const [{ configs }] = useConfig()
+  const [ordering] = useApi()
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const buttonText = t('LOGIN_WITH_APPLE', 'Login with Apple');
+
+  const onAppleButtonPress = async () => {
+    const rawNonce: any = uuid.v4()
+    const state: any = uuid.v4()
+
+    if (Platform.OS === 'ios') {
+      try {
+        const appleAuthRequestResponse = await appleAuth.performRequest({
+          requestedOperation: appleAuth.Operation.LOGIN,
+          requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
+          nonce: rawNonce,
+          state
+        });
+        console.log('appleAuthRequestResponse', appleAuthRequestResponse);
+
+        const {
+          user,
+          email,
+          identityToken,
+          authorizationCode,
+        } = appleAuthRequestResponse
+
+        if (identityToken && authorizationCode) {
+          console.log('auth code: ', authorizationCode)
+          handleLoginApple(authorizationCode)
+          console.warn(`Apple Authentication Completed, ${user}, ${email}`);
+        } else {
+          handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
+        }
+
+      } catch (error : any) {
+        handleErrors && handleErrors(error.message)
+      }
+    } else {
+      try {
+        appleAuthAndroid.configure({
+          clientId: configs?.apple_login_client_id?.value,
+          redirectUri: 'https://example-app.com/redirect',
+          responseType: appleAuthAndroid.ResponseType.ALL,
+          scope: appleAuthAndroid.Scope.ALL,
+          nonce: rawNonce,
+          state,
+        });
+        const { code } = await appleAuthAndroid.signIn();
+        handleLoginApple(code)
+      } catch (error : any) {
+        handleErrors && handleErrors(error?.message)
+      }
+    }
+  }
+  const handleLoginApple = async (code: string) => {
+    const body: any = {
+      code,
+      platform: Platform.OS === 'ios' && 'ios'
+    }
+    if (notificationState?.notification_token) {
+      body.notification_token = notificationState.notification_token
+      body.notification_app = notificationState.notification_app
+    }
+
+    try {
+      handleLoading && handleLoading(true)
+      const response: any = await fetch(`${ordering.root}/auth/apple`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      })
+      const { error, result } = await response.json()
+      handleLoading && handleLoading(false)
+      if (!error && result) {
+        handleSuccessApple && handleSuccessApple(result)
+      } else {
+        handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
+      }
+    } catch (error : any) {
+      handleLoading && handleLoading(false)
+      handleErrors && handleErrors(error?.message)
+    }
+  }
+
+  useEffect(() => {
+    if (Platform.OS !== 'ios' && !appleAuth.isSupported) return
+    return appleAuth.onCredentialRevoked(async () => {
+      handleErrors && handleErrors(t('USER_CREDENTIALS_REVOKED', 'User credentials revoked'))
+    });
+  }, []);
+
+  return (
+    <Container>
+      <AppleButton
+        onPress={onAppleButtonPress}
+      >
+        <Icon
+          name="apple"
+          size={34}
+          color={theme.colors.black}
+          style={style.appleBtn}
+        />
+        <OText style={style.textBtn}>
+          {buttonText}
+        </OText>
+      </AppleButton>
+    </Container>
+  );
+}
+
+const style = StyleSheet.create({
+  appleBtn: {
+    position: 'absolute',
+    left: 0,
+    marginHorizontal: 10
+  },
+  textBtn: {
+    fontSize: 16,
+    color: '#000000',
+    marginLeft: 20
+  }
+})

package/src/components/AppleLogin/styles.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View``
+
+export const AppleButton = styled.TouchableOpacity`
+  background-color: #EFEFEF;
+  border-color: #EFEFEF;
+  border-radius: 30px;
+  font-size: 16px;
+  padding: 15px 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 52px;
+  margin-top: 10px;
+`

package/src/components/BusinessesListing/index.tsx

@@ -101,7 +101,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           style={{ paddingBottom: 0 }}
         />
       )}
-      {auth && (
+      {auth && user?.name && (
         <WelcomeTitle>
           <View style={styles.welcome}>
             <OText style={{ fontWeight: 'bold' }} size={28} >

package/src/components/Cart/index.tsx

@@ -8,9 +8,9 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CContainer, CheckoutAction } from './styles';
+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';
@@ -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 {
@@ -45,6 +48,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
@@ -90,6 +94,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
@@ -118,9 +132,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 && (
@@ -151,15 +163,38 @@ const CartUI = (props: any) => {
                 )}
               </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>
@@ -180,15 +215,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>
@@ -263,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/src/components/LoginForm/index.tsx

@@ -37,6 +37,7 @@ import NavBar from '../NavBar'
 import { OText, OButton, OInput, OModal } from '../shared';
 import { LoginParams } from '../../types';
 import { useTheme } from 'styled-components/native';
+import { AppleLogin } from '../AppleLogin'
 
 const LoginFormUI = (props: LoginParams) => {
   const {
@@ -80,7 +81,7 @@ const LoginFormUI = (props: LoginParams) => {
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isFBLoading, setIsFBLoading] = useState(false);
+  const [isLoadingSocialButton, setIsLoadingSocialButton] = useState(false);
   const [phoneInputData, setPhoneInputData] = useState({
     error: '',
     phone: {
@@ -91,6 +92,10 @@ const LoginFormUI = (props: LoginParams) => {
 
   const inputRef = useRef<any>({})
 
+  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 handleChangeTab = (val: string) => {
     props.handleChangeTab(val);
     setPasswordSee(false);
@@ -133,7 +138,15 @@ const LoginFormUI = (props: LoginParams) => {
     })
   }
 
-  const handleChangeInputEmail = (value : string, onChange : any) => {
+  const handleSuccessApple = (user: any) => {
+    _removeStoreData('isGuestUser')
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const handleChangeInputEmail = (value: string, onChange: any) => {
     onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
   }
 
@@ -353,10 +366,7 @@ const LoginFormUI = (props: LoginParams) => {
           )
         }
 
-        {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 && (
             <ButtonsWrapper>
               <OText size={18} mBottom={10} color={theme.colors.disabled}>
                 {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
@@ -364,26 +374,33 @@ const LoginFormUI = (props: LoginParams) => {
               <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>
             </ButtonsWrapper>
-          )
-        )}
+          )}
 
         {onNavigationRedirect && registerButtonText && (
           <ButtonsWrapper>
@@ -411,7 +428,7 @@ const LoginFormUI = (props: LoginParams) => {
           handleVerifyCodeClick={handleVerifyCodeClick}
         />
       </OModal>
-      <Spinner visible={isFBLoading} />
+      <Spinner visible={isLoadingSocialButton} />
     </Container>
   );
 };

package/src/components/OrderDetails/index.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager } from 're
 import LinearGradient from 'react-native-linear-gradient'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntIcon from 'react-native-vector-icons/AntDesign'
 import { Messages } from '../Messages'
 import { ShareComponent } from '../ShareComponent'
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -48,6 +49,8 @@ import { verifyDecimals } from '../../utils'
 import { useTheme } from 'styled-components/native'
 import { NotFoundSource } from '../NotFoundSource'
 import { OrderCreating } from '../OrderCreating';
+import { OSRow } from '../OrderSummary/styles';
+import { TaxInformation } from '../TaxInformation';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -103,6 +106,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const [isReviewed, setIsReviewed] = useState(false)
   const [openOrderCreating, setOpenOrderCreating] = useState(true)
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
   const { order, loading, businessData, error } = props.order
   const isTaxIncluded = order?.tax_type === 1
 
@@ -195,6 +199,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )
   }
 
+  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 () => {
@@ -216,7 +230,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = {...locations[0], lat: driverLocation.lat, lng: driverLocation.lng}
+      locations[0] = { ...locations[0], lat: driverLocation.lat, lng: driverLocation.lng }
     }
   }, [driverLocation])
 
@@ -341,7 +355,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               </OrderStatus>
             </View>
             <OrderCustomer>
-              <OText size={18} style={{textAlign: 'left'}}>{t('CUSTOMER', 'Customer')}</OText>
+              <OText size={18} style={{ textAlign: 'left' }}>{t('CUSTOMER', 'Customer')}</OText>
               <Customer>
                 <CustomerPhoto>
                   <OIcon
@@ -352,8 +366,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   />
                 </CustomerPhoto>
                 <InfoBlock>
-                  <OText size={18} style={{textAlign: 'left'}} >{order?.customer?.name} {order?.customer?.lastname}</OText>
-                  <OText style={{textAlign: 'left'}}>{order?.customer?.address}</OText>
+                  <OText size={18} style={{ textAlign: 'left' }} >{order?.customer?.name} {order?.customer?.lastname}</OText>
+                  <OText style={{ textAlign: 'left' }}>{order?.customer?.address}</OText>
                 </InfoBlock>
               </Customer>
               {order?.driver && (
@@ -398,7 +412,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               </OrderDriver>
             )}
             <OrderProducts>
-              <OText size={18} style={{textAlign: 'left'}}>{t('YOUR_ORDER', 'Your Order')}</OText>
+              <OText size={18} style={{ textAlign: 'left' }}>{t('YOUR_ORDER', 'Your Order')}</OText>
               {order?.products?.length && order?.products.map((product: any, i: number) => (
                 <ProductItemAccordion
                   key={product?.id || i}
@@ -410,10 +424,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <Table>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText>
-                  {parsePrice(isTaxIncluded
-                    ? (order?.summary?.subtotal + order?.summary?.tax) ?? 0
-                    : order?.summary?.subtotal ?? 0
-                  )}
+                  {parsePrice(((order?.summary?.subtotal || order?.subtotal) + getIncludedTaxes()))}
                 </OText>
               </Table>
               {order?.summary?.discount > 0 && (
@@ -435,40 +446,77 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
                 </Table>
               )}
-              {order?.tax_type !== 1 && (
-                <Table>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(order?.summary?.tax)}</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 && (
                 <Table>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText>{parsePrice(order?.summary?.delivery_price)}</OText>
                 </Table>
               )}
-              <Table>
-                <OText>
-                  {t('DRIVER_TIP', 'Driver tip')}
-                  {order?.summary?.driver_tip > 0 &&
-                    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    (
-                      `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
-                    )}
-                </OText>
-                <OText>{parsePrice(order?.summary?.driver_tip ?? 0)}</OText>
-              </Table>
-              {order?.summary?.service_fee > 0 && (
+              {order?.summary?.driver_tip > 0 && (
                 <Table>
                   <OText>
-                    {t('SERVICE_FEE', 'Service Fee')}
-                    {`(${verifyDecimals(order?.summary?.service_fee, parseNumber)}%)`}
+                    {t('DRIVER_TIP', 'Driver tip')}
+                    {order?.summary?.driver_tip > 0 &&
+                      parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                      (
+                        `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
+                      )}
                   </OText>
-                  <OText>{parsePrice(order?.summary?.service_fee)}</OText>
+                  <OText>{parsePrice(order?.summary?.driver_tip ?? 0)}</OText>
                 </Table>
               )}
               <Total>
@@ -483,7 +531,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 (
                   parseInt(order?.status) === 1 ||
                   parseInt(order?.status) === 11 ||
-                  parseInt(order?.status) === 15 
+                  parseInt(order?.status) === 15
                 ) && !order.review && !isReviewed && (
                   <OButton
                     onClick={() => handleClickOrderReview(order)}
@@ -548,6 +596,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           isOrderDetail
         />
       </OModal>
+      <OModal
+        open={openTaxModal.open}
+        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        entireModal
+      >
+        <TaxInformation data={openTaxModal.data} products={order?.products} />
+      </OModal>
     </OrderDetailsContainer>
   )
 }