ordering-ui-react-native 0.14.47 → 0.14.48

package/package.json

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

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction } from './styles';
+import { CContainer, CheckoutAction, Divider } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -23,6 +23,7 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
+import { OAlert } from '../../../../../src/components/shared'
 
 const CartUI = (props: any) => {
   const {
@@ -36,7 +37,8 @@ const CartUI = (props: any) => {
     setIsCartsLoading,
     handleChangeComment,
     commentState,
-    onNavigationRedirect
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props
 
   const theme = useTheme();
@@ -50,7 +52,8 @@ const CartUI = (props: any) => {
   const [openUpselling, setOpenUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -69,12 +72,12 @@ const CartUI = (props: any) => {
   const handleEditProduct = (product: any) => {
     onNavigationRedirect('ProductDetails', {
       businessId,
-			isCartProduct: true,
+      isCartProduct: true,
       productCart: product,
       businessSlug: cart?.business?.slug,
       categoryId: product?.category_id,
       productId: product?.id,
-		})
+    })
   }
 
   const handleClearProducts = async () => {
@@ -109,6 +112,22 @@ const CartUI = (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)
+      }
+    })
+  }
+
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -166,7 +185,7 @@ const CartUI = (props: any) => {
                 {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={12} lineHeight={18}>
@@ -179,19 +198,51 @@ const CartUI = (props: any) => {
                 <OText size={12} lineHeight={18}>- {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={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
+            <Divider />
+            {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+              <OSTable>
+                <OText size={12} lineHeight={18} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                {cart?.business?.tax_type === 1 ? (
+                  <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                ) : (
+                  <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_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 numberOfLines={1} >
+                    <OText size={12} lineHeight={18} 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={18} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                 </OSTable>
               ))
             }
@@ -199,33 +250,66 @@ const CartUI = (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 numberOfLines={1} size={12} lineHeight={18}>
+                    <OText size={12} lineHeight={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 })} >
+                    <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 || 0)}</OText>
+                  <OText size={12} lineHeight={18}>{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={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
                 </OSTable>
               ))
             }
-            {cart?.service_fee > 0 && !cart?.fees?.length && (
-              <OSTable>
-                <OText size={12} lineHeight={18}>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
-              </OSTable>
-            )}
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                 <OText size={12} lineHeight={18}>{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={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
             {cart?.driver_tip > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
@@ -265,7 +349,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.balance ?? cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSTotal>
@@ -339,11 +423,25 @@ const CartUI = (props: any) => {
       </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={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 })}
+        />
     </CContainer>
   )
 }

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/native';
+import styled from 'styled-components/native';
 
 export const CContainer = styled.View`
   /* border-bottom: 1px solid #F0F0F0; */
@@ -26,3 +26,10 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

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

@@ -35,6 +35,7 @@ import {
   Icons,
   OrderDriver,
   Map,
+  Divider,
 } from './styles';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -100,7 +101,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     business: false,
     driver: false,
   });
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
 
   const { order, businessData } = props.order;
 
@@ -349,6 +350,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)
+  }
+
   const handleClickOrderReview = (order: any) => {
     navigation.navigate(
       'ReviewOrder',
@@ -527,7 +532,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       onPress={() => order?.business?.cellphone &&
                         Linking.openURL(`tel:${order?.business?.cellphone}`)
                       }
-                      style={{ paddingEnd: 5 }}>
+                      style={{ paddingEnd: 5 }}
+                    >
                       <OIcon
                         src={theme.images.general.phone}
                         width={16}
@@ -730,10 +736,10 @@ 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) + getIncludedTaxes()))}
+                  {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
                 </OText>
               </Table>
-              {(order?.summary?.discount > 0 || order?.discount > 0) && (
+              {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
                 <Table>
                   {order?.offer_type === 1 ? (
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
@@ -751,24 +757,53 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               )}
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{`(${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 size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </Table>
+                ))
+              }
+              <Divider />
+              {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
+                <Table>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {order?.tax_type === 1 ? (
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+                  ) : (
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+                  )}
+                </Table>
+              )}
               {
                 order?.taxes?.length === 0 && order?.tax_type === 2 && (
                   <Table>
-                    <OText size={12}>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
                     </OText>
-                    <OText size={12}>{parsePrice(order?.summary?.tax || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.tax || 0)}</OText>
                   </Table>
                 )
               }
               {
                 order?.fees?.length === 0 && (
                   <Table>
-                    <OText size={12}>
+                    <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}>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.service_fee || 0)}</OText>
                   </Table>
                 )
               }
@@ -776,15 +811,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 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}>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} 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={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </Table>
                 ))
               }
@@ -792,53 +827,84 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 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}>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} 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={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
                   </Table>
                 ))
               }
-              {(order?.summary?.delivery_price > 0 ||
-                order?.deliveryFee > 0) && (
-                  <Table>
-                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                      {parsePrice(
-                        order?.summary?.delivery_price || order?.deliveryFee,
-                      )}
-                    </OText>
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} 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 size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
                   </Table>
-                )}
-              <Table>
-                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                  {t('DRIVER_TIP', 'Driver tip')}
-                  {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) &&
-                    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    `(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}
-                </OText>
-                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                  {parsePrice(
-                    order?.summary?.driver_tip || order?.totalDriverTip,
-                  )}
-                </OText>
-              </Table>
+                ))
+              }
+              {order?.summary?.delivery_price > 0 && (
+                <Table>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price)}</OText>
+                </Table>
+              )}
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{`(${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 size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </Table>
+                ))
+              }
+              {order?.summary?.driver_tip > 0 && (
+                <Table>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                    {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 size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+                </Table>
+              )}
               <Total>
                 <Table>
                   <OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
                   <OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>
-                    {parsePrice(order?.summary?.total || order?.total)}
+                    {parsePrice(order?.summary?.total ?? order?.total)}
                   </OText>
                 </Table>
               </Total>
               {order?.payment_events?.length > 0 && (
-                <View style={{marginTop: 10}}>
+                <View style={{ marginTop: 10 }}>
                   <OText size={20} weight='bold' color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
                   <View
                     style={{
@@ -904,10 +970,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/themes/original/src/components/OrderDetails/styles.tsx

@@ -116,5 +116,12 @@ export const Map = styled.View`
   width: 100%;
   height: 250px;
   margin-top: 20px;
-  border-radius: 20px
+  border-radius: 20px;
+`
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 `

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

@@ -14,7 +14,8 @@ import {
   OSProductList,
   OSBill,
   OSTable,
-  OSRow
+  OSRow,
+  Divider
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -24,6 +25,7 @@ import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
+import { OAlert } from '../../../../../src/components/shared'
 
 const OrderSummaryUI = (props: any) => {
   const {
@@ -35,7 +37,8 @@ const OrderSummaryUI = (props: any) => {
     isFromCheckout,
     commentState,
     handleChangeComment,
-    onNavigationRedirect
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme()
@@ -44,8 +47,8 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
-
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
   const handleDeleteClick = (product: any) => {
@@ -61,7 +64,7 @@ const OrderSummaryUI = (props: any) => {
       categoryId: product?.category_id,
       productId: product?.id,
       isFromCheckout: isFromCheckout,
-		})
+    })
   }
 
   const getIncludedTaxes = () => {
@@ -74,6 +77,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)
+      }
+    })
+  }
+
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
 
   const walletName: any = {
@@ -109,9 +128,11 @@ const OrderSummaryUI = (props: any) => {
             <OSBill>
               <OSTable>
                 <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+                <OText size={12}>
+                  {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={12}>
@@ -125,34 +146,87 @@ const OrderSummaryUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                  <OSTable key={tax?.id}>
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
                     <OSRow>
-                      <OText size={12} numberOfLines={1}>
-                        {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                      <OText size={12}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={12}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
+              <Divider />
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  <OText size={12} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText size={12}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText size={12}>{parsePrice(cart?.subtotal_with_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={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={20} color={theme.colors.primary} />
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={12}>{parsePrice(tax?.summary?.tax_after_discount ?? 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}>
+                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}%){' '}
+                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
-                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={12}>{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={12}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={12}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
                   </OSTable>
                 ))
               }
@@ -162,6 +236,27 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={12}>{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={12}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={12}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
                   <OText size={12}>
@@ -201,7 +296,7 @@ const OrderSummaryUI = (props: any) => {
                       {t('TOTAL', 'Total')}
                     </OText>
                     <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.balance ?? cart?.total)}
+                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                     </OText>
                   </OSTable>
                 </View>
@@ -243,11 +338,25 @@ const OrderSummaryUI = (props: any) => {
           )}
           <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={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/themes/original/src/components/OrderSummary/styles.tsx

@@ -39,3 +39,10 @@ export const OSRow = styled.View`
   overflow: hidden;
   width: 80%;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

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

@@ -1,51 +1,83 @@
-import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import React, { Mixin } from 'react'
+import { useLanguage } 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>
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  } | null,
+  products: Array<any>,
+  type: string
 }
 
 export const TaxInformation = (props: taxInformationParams) => {
   const {
     data,
-    products
+    products,
+    type
   } = 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')})`
 
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code))
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
   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 && (
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
         <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
         </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>
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }