ordering-ui-react-native 0.14.39 → 0.14.41-release

package/src/components/OrderDetails/index.tsx

@@ -38,7 +38,8 @@ import {
   Icons,
   OrderDriver,
   Map,
-  LoadingWrapper
+  LoadingWrapper,
+  Divider
 } from './styles'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { ProductItemAccordion } from '../ProductItemAccordion'
@@ -106,10 +107,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const [isReviewed, setIsReviewed] = useState(false)
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
   const { order, loading, businessData, error } = props.order
-  const isTaxIncluded = order?.tax_type === 1
-
 
   const getOrderStatus = (s: string) => {
     const status = parseInt(s)
@@ -209,6 +208,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }
 
+  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)
+  }
+
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
     return () => {
@@ -277,7 +280,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <OText size={20} color={theme.colors.white} space>
                   {t('TOTAL', 'Total')}
                 </OText>
-                <OText size={20} color={theme.colors.white}>{parsePrice(order?.summary?.total || order?.total)}</OText>
+                <OText size={20} color={theme.colors.white}>{parsePrice(order?.summary?.total ?? order?.total)}</OText>
               </View>
             </HeaderInfo>
           </Header>
@@ -376,18 +379,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText style={{ textAlign: 'left' }}>{order?.customer?.address}</OText>
                 </InfoBlock>
               </Customer>
-                {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
-                  <View>
-                    <OText size={18} style={{ textAlign: 'left' }}>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</OText>
-                    <OText style={{ textAlign: 'left' }}>{order?.delivery_option?.name}</OText>
-                  </View>
-                )}
-                {order?.comment && (
-                  <View>
-                    <OText size={18} style={{ textAlign: 'left' }} >{t('COMMENT', 'Comment')}</OText>
-                    <OText style={{ textAlign: 'left' }}>{order?.comment}</OText>
-                  </View>
-                )}
+              {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+                <View>
+                  <OText size={18} style={{ textAlign: 'left' }}>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</OText>
+                  <OText style={{ textAlign: 'left' }}>{order?.delivery_option?.name}</OText>
+                </View>
+              )}
+              {order?.comment && (
+                <View>
+                  <OText size={18} style={{ textAlign: 'left' }} >{t('COMMENT', 'Comment')}</OText>
+                  <OText style={{ textAlign: 'left' }}>{order?.comment}</OText>
+                </View>
+              )}
               {order?.driver && (
                 <>
                   {order?.driver?.location && parseInt(order?.status) === 9 && (
@@ -442,26 +445,49 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <Table>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText>
-                  {parsePrice(((order?.summary?.subtotal || order?.subtotal) + getIncludedTaxes()))}
+                  {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
                 </OText>
               </Table>
-              {order?.summary?.discount > 0 && (
+              {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
                 <Table>
                   {order?.offer_type === 1 ? (
                     <OText>
-                      {t('DISCOUNT', 'Discount')}
-                      <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
+                      {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
+                      <span>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</span>
                     </OText>
                   ) : (
-                    <OText>{t('DISCOUNT', 'Discount')}</OText>
+                    <OText>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
                   )}
-                  <OText>- {parsePrice(order?.summary?.discount)}</OText>
+                  <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
                 </Table>
               )}
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                        )}
+                      </OText>
+                      <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </Table>
+                ))
+              }
+              <Divider />
               {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
                 <Table>
                   <OText>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
-                  <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+                  {order?.tax_type === 1 ? (
+                    <OText>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+                  ) : (
+                    <OText>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+                  )}
                 </Table>
               )}
               {
@@ -470,7 +496,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OText>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
                     </OText>
-                    <OText>{parsePrice(order?.summary?.tax || 0)}</OText>
+                    <OText>{parsePrice(order?.summary?.tax ?? 0)}</OText>
                   </Table>
                 )
               }
@@ -481,7 +507,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       {t('SERVICE_FEE', 'Service fee')}
                       {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
                     </OText>
-                    <OText>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+                    <OText>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
                   </Table>
                 )
               }
@@ -493,11 +519,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })}>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
                         <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </Table>
                 ))
               }
@@ -509,11 +535,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                         ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })}>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </Table>
+                ))
+              }
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                        )}
+                      </OText>
+                      <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText>- {parsePrice(offer?.summary?.discount)}</OText>
                   </Table>
                 ))
               }
@@ -523,6 +567,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText>{parsePrice(order?.summary?.delivery_price)}</OText>
                 </Table>
               )}
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                        )}
+                      </OText>
+                      <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </Table>
+                ))
+              }
               {order?.summary?.driver_tip > 0 && (
                 <Table>
                   <OText>
@@ -534,14 +596,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                       )}
                   </OText>
-                  <OText>{parsePrice(order?.summary?.driver_tip ?? 0)}</OText>
+                  <OText>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
                 </Table>
               )}
               <Total>
                 <Table>
                   <OText style={styles.textBold}>{t('TOTAL', 'Total')}</OText>
                   <OText style={styles.textBold} color={theme.colors.primary}>
-                    {parsePrice(order?.summary?.total ?? 0)}
+                    {parsePrice(order?.summary?.total ?? order?.total)}
                   </OText>
                 </Table>
               </Total>
@@ -616,10 +678,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </OModal>
       <OModal
         open={openTaxModal.open}
-        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
+        title={`${openTaxModal.data?.name ||
+          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
-        <TaxInformation data={openTaxModal.data} products={order?.products} />
+        <TaxInformation
+          type={openTaxModal.type}
+          data={openTaxModal.data}
+          products={order?.products}
+        />
       </OModal>
     </OrderDetailsContainer>
   )

package/src/components/OrderDetails/styles.tsx

@@ -119,3 +119,10 @@ export const LoadingWrapper = styled.View`
   justify-content: flex-start;
   align-content: flex-start;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+`

package/src/components/OrderSummary/index.tsx

@@ -14,12 +14,13 @@ import {
   OSProductList,
   OSBill,
   OSTable,
-  OSRow
+  OSRow,
+  Divider
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
+import { OAlert, OInput, OModal, OText } from '../shared';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import { TaxInformation } from '../TaxInformation';
@@ -36,7 +37,8 @@ const OrderSummaryUI = (props: any) => {
     isFromCheckout,
     commentState,
     handleChangeComment,
-    onNavigationRedirect
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme();
@@ -46,6 +48,7 @@ const OrderSummaryUI = (props: any) => {
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
@@ -55,15 +58,15 @@ const OrderSummaryUI = (props: any) => {
 
   const handleEditProduct = (product: any) => {
     onNavigationRedirect &&
-    onNavigationRedirect('ProductDetails', {
-      isCartProduct: true,
-      productCart: product,
-      businessSlug: cart?.business?.slug,
-      businessId: cart?.business_id,
-      categoryId: product?.category_id,
-      productId: product?.id,
-      isFromCheckout: isFromCheckout,
-		})
+      onNavigationRedirect('ProductDetails', {
+        isCartProduct: true,
+        productCart: product,
+        businessSlug: cart?.business?.slug,
+        businessId: cart?.business_id,
+        categoryId: product?.category_id,
+        productId: product?.id,
+        isFromCheckout: isFromCheckout,
+      })
   }
 
   const getIncludedTaxes = () => {
@@ -76,6 +79,22 @@ 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)
+  }
+
+  const onRemoveOffer = (id: number) => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
+      title: t('OFFER', 'Offer'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveOfferClick(id)
+      }
+    })
+  }
+
   return (
     <OSContainer>
       {cart?.products?.length > 0 && (
@@ -99,35 +118,65 @@ const OrderSummaryUI = (props: any) => {
           {cart?.valid && (
             <OSBill>
               <OSTable>
-                <OText size={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={18}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+                <OText size={16}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText size={16}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
               </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && (
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
                 <OSTable>
                   {cart?.discount_type === 1 ? (
-                    <OText size={18}>
-                      {t('DISCOUNT', 'Discount')}
-                      <OText size={18}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                    <OText size={16}>
+                      {t('DISCOUNT', 'Discount')}{' '}
+                      <OText size={16}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
                     </OText>
                   ) : (
-                    <OText size={18}>{t('DISCOUNT', 'Discount')}</OText>
+                    <OText size={16}>{t('DISCOUNT', 'Discount')}</OText>
+                  )}
+                  <OText size={16}>- {parsePrice(cart?.discount || 0)}</OText>
+                </OSTable>
+              )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16} numberOfLines={2}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </OSTable>
+                ))
+              }
+              <Divider />
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  <OText size={16} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText size={16}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText size={16}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
                   )}
-                  <OText size={18}>- {parsePrice(cart?.discount || 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}>
+                      <OText size={16} numberOfLines={1}>
                         {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
                         <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={18}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={16}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </OSTable>
                 ))
               }
@@ -135,27 +184,69 @@ const OrderSummaryUI = (props: any) => {
                 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}>
+                      <OText size={16} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                         ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
                       </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
                     </OSRow>
-                    <OText size={18}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={16}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
                   </OSTable>
                 ))
               }
               {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
-                  <OText size={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={18}>{parsePrice(cart?.delivery_price)}</OText>
+                  <OText size={16}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={16}>{parsePrice(cart?.delivery_price)}</OText>
                 </OSTable>
               )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText size={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 3, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
-                  <OText size={18}>
+                  <OText size={16}>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
@@ -164,7 +255,7 @@ const OrderSummaryUI = (props: any) => {
                         `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
-                  <OText size={18}>{parsePrice(cart?.driver_tip)}</OText>
+                  <OText size={16}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
               {isCouponEnabled && !isCartPending && (
@@ -177,22 +268,20 @@ const OrderSummaryUI = (props: any) => {
                   </View>
                 </View>
               )}
-              {cart?.total >= 1 && (
                 <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
                   <OSTable style={{ marginTop: 15 }}>
-                    <OText size={18} style={{ fontWeight: 'bold' }}>
+                    <OText size={16} style={{ fontWeight: 'bold' }}>
                       {t('TOTAL', 'Total')}
                     </OText>
-                    <OText size={18} style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
-                      {parsePrice(cart?.total)}
+                    <OText size={16} style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
+                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                     </OText>
                   </OSTable>
                 </View>
-              )}
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <OText size={16}>{t('COMMENTS', 'Comments')}</OText>
                     <View style={{ flex: 1, width: '100%' }}>
                       <OInput
                         value={cart?.comment}
@@ -227,9 +316,23 @@ const OrderSummaryUI = (props: any) => {
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}
             entireModal
+            title={`${openTaxModal.data?.name ||
+              t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
           >
-            <TaxInformation data={openTaxModal.data} products={cart.products} />
+            <TaxInformation
+              type={openTaxModal.type}
+              data={openTaxModal.data}
+              products={cart?.products}
+            />
           </OModal>
+          <OAlert
+            open={confirm.open}
+            title={confirm.title}
+            content={confirm.content}
+            onAccept={confirm.handleOnAccept}
+            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+          />
         </>
       )}
     </OSContainer>

package/src/components/OrderSummary/styles.tsx

@@ -33,5 +33,13 @@ export const OSCoupon = styled.View`
 export const OSRow = styled.View`
   flex-direction: row;
   overflow: hidden;
-  width: 80%;
-`
+  width: 70%;
+  flex-wrap: wrap;
+`
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

package/src/components/PaymentOptions/index.tsx

@@ -45,6 +45,8 @@ const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 //   { name: 'iDEAL', value: 'ideal' }
 // ]
 
+const webViewPaymentGateway: any = ['paypal', 'square']
+
 const PaymentOptionsUI = (props: any) => {
   const {
     cart,
@@ -92,7 +94,7 @@ const PaymentOptionsUI = (props: any) => {
   const handlePaymentMethodClick = (paymethod: any) => {
     const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-    if(paymethod?.gateway === 'paypal' || paymethod?.gateway === 'square') {
+		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)