ordering-ui-react-native 0.15.10-release → 0.15.12-release

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -514,7 +514,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Table>
               )}
               {
-                order?.taxes?.length === 0 && order?.tax_type === 2 && (
+                order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
                   <Table>
                     <OText>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
@@ -524,7 +524,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )
               }
               {
-                order?.fees?.length === 0 && (
+                order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
                   <Table>
                     <OText>
                       {t('SERVICE_FEE', 'Service fee')}

package/src/pages/BusinessProductsList.tsx

@@ -31,6 +31,7 @@ const BusinessProductsList = (props: any) => {
       'open',
       'about',
       'description',
+      'ribbon',
       'address',
       'location',
       'schedule',

package/src/pages/BusinessesListing.tsx

@@ -21,7 +21,7 @@ const BusinessesListing = (props: any) => {
     ...props,
     isSearchByName: true,
     isSearchByDescription: true,
-    propsToFetch: ['id', 'name', 'header', 'logo', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
+    propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
     onBusinessClick: (business: any) => {
       props.navigation.navigate('Business', { store: store || business.slug, header: business.header, logo: business.logo })
     }

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -335,7 +335,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         addressName: order?.business?.address,
         zipcode: order?.business?.zipcode
       },
-      icon: order?.business?.logo || theme.images.dummies.businessLogo,
+      icon: order?.business?.logo || 'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://res.cloudinary.com/ordering2/image/upload/v1654619525/hzegwosnplvrbtjkpfi6.png',
       level: 2,
     },
     {

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -101,9 +101,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
-    if (permissions.locationStatus === 'granted') {
+    if (permissions?.locationStatus === 'granted') {
       setOpenModalForMapView(!openModalForMapView);
-    } else if (permissions.locationStatus === 'blocked') {
+    } else if (permissions?.locationStatus === 'blocked') {
       // redirectToSettings();
       showToast(
         ToastType.Error,
@@ -141,9 +141,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     handleArrowBack()
   }
 
-  const handleAcceptLogisticOrder = (order : any) => {
+  const handleAcceptLogisticOrder = (order: any) => {
     handleClickLogisticOrder?.(1, order?.logistic_order_id)
-    if(order?.order_group){
+    if (order?.order_group) {
       handleArrowBack()
     }
   }
@@ -166,10 +166,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
 
   useEffect(() => {
-    if (permissions.locationStatus !== 'granted' && openModalForMapView) {
+    if (permissions?.locationStatus !== 'granted' && openModalForMapView) {
       setOpenModalForMapView(false);
     }
-  }, [permissions.locationStatus]);
+  }, [permissions?.locationStatus]);
 
   useEffect(() => {
     if (openModalForAccept) {
@@ -215,8 +215,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [messagesReadList]);
 
   useEffect(() => {
-    forceUpdate && handleViewActionOrder && handleViewActionOrder(forceUpdate === 9 ? 'forcePickUp': 'forceDelivery')
-  },[forceUpdate])
+    forceUpdate && handleViewActionOrder && handleViewActionOrder(forceUpdate === 9 ? 'forcePickUp' : 'forceDelivery')
+  }, [forceUpdate])
 
   const styles = StyleSheet.create({
     btnPickUp: {
@@ -254,7 +254,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     );
   }
 
-  const OrderDetailsInformation = (props : {order: any, isOrderGroup?: boolean, lastOrder?: boolean}) => {
+  const OrderDetailsInformation = (props: { order: any, isOrderGroup?: boolean, lastOrder?: boolean }) => {
     const {
       order,
       isOrderGroup,

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -11,6 +11,7 @@ import {
   Table,
   OrderBill,
   Total,
+  OSRow,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -75,6 +76,20 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
 
+  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)
+    }
+  }
+
+  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)
+  }
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -308,14 +323,14 @@ export const OrderContentComponent = (props: OrderContent) => {
           </OText>
         )}
         {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
-          <View style={{marginTop: 10}}>
+          <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
                 {order?.delivery_option?.name}
               </OText>
             )}
             {!!order?.comment && (
-              <OText style={{fontStyle: 'italic', opacity: 0.6, marginBottom: 5}}>
+              <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 5 }}>
                 {order?.comment}
               </OText>
             )}
@@ -350,84 +365,109 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(
-              order.tax_type === 1
-                ? order?.summary?.subtotal + order?.summary?.tax ?? 0
-                : order?.summary?.subtotal ?? 0,
-            )}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
           </OText>
         </Table>
-
-        {order?.tax_type !== 1 && (
+        {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
+          <Table>
+            {order?.offer_type === 1 ? (
+              <OText mBottom={4}>
+                {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
+                <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
+              </OText>
+            ) : (
+              <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || '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 mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+            </Table>
+          ))
+        }
+        {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
+          <Table>
+            <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+            {order?.tax_type === 1 ? (
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+            ) : (
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+            )}
+          </Table>
+        )}
+        {order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
           <Table>
             <OText mBottom={4}>
-              {t('TAX', 'Tax')}
-              {`(${verifyDecimals(
-                order?.summary?.tax_rate,
-                parseNumber,
-              )}%)`}
+              {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
-
             <OText mBottom={4}>
               {parsePrice(order?.summary?.tax ?? 0)}
             </OText>
-          </Table >
+          </Table>
         )}
-
         {
-          order?.summary?.discount > 0 && (
+          order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
             <Table>
-              {order?.offer_type === 1 ? (
-                <OText mBottom={4}>
-                  <OText>{t('DISCOUNT', 'Discount')}</OText>
-
-                  <OText>
-                    {`(${verifyDecimals(
-                      order?.offer_rate,
-                      parsePrice,
-                    )}%)`}
-                  </OText>
-                </OText>
-              ) : (
-                <OText mBottom={4}>{t('DISCOUNT', 'Discount')}</OText>
-              )}
-
               <OText mBottom={4}>
-                - {parsePrice(order?.summary?.discount)}
+                {t('SERVICE_FEE', 'Service fee')}
+                {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
             </Table>
           )
         }
-
         {
-          order?.summary?.subtotal_with_discount > 0 &&
-          order?.summary?.discount > 0 &&
-          order?.summary?.total >= 0 && (
-            <Table>
-              <OText mBottom={4}>
-                {t(
-                  'SUBTOTAL_WITH_DISCOUNT',
-                  'Subtotal with discount',
-                )}
-              </OText>
-              {order?.tax_type === 1 ? (
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+            <Table key={tax.id}>
+              <OSRow>
                 <OText mBottom={4}>
-                  {parsePrice(
-                    order?.summary?.subtotal_with_discount +
-                    order?.summary?.tax ?? 0,
-                  )}
+                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
-              ) : (
+              </OSRow>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? 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 mBottom={4}>
+                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>{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 mBottom={4}>
-                  {parsePrice(
-                    order?.summary?.subtotal_with_discount ?? 0,
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
-              )}
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
             </Table>
-          )
+          ))
         }
-
         {
           order?.summary?.delivery_price > 0 && (
             <Table>
@@ -441,41 +481,35 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           )
         }
-
-        <Table>
-          <OText mBottom={4}>
-            {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 mBottom={4}>
-            {parsePrice(order?.summary?.driver_tip ?? 0)}
-          </OText>
-        </Table>
-
         {
-          order?.summary?.service_fee > 0 && (
-            <Table>
-              <OText mBottom={4}>
-                {t('SERVICE_FEE', 'Service Fee')}{' '}
-                {`(${verifyDecimals(
-                  order?.summary?.service_fee,
-                  parseNumber,
-                )}%)`}
-              </OText>
-
-              <OText mBottom={4}>
-                {parsePrice(order?.summary?.service_fee)}
-              </OText>
+          order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+            <Table key={offer.id}>
+              <OSRow>
+                <OText mBottom={4}>
+                  {offer.name}
+                  {offer.rate_type === 1 && (
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                  )}
+                </OText>
+              </OSRow>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
             </Table>
-          )
+          ))
         }
+        {order?.summary?.driver_tip > 0 && (
+          <Table>
+            <OText mBottom={4}>
+              {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 mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+          </Table>
+        )}
 
         <Total style={{ paddingBottom: 10 }}>
           <Table>
@@ -487,7 +521,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? 0)}
+              {parsePrice(order?.summary?.total ?? order?.total)}
             </OText>
           </Table>
         </Total>

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -268,6 +268,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
               <OText size={13} weight='bold'>{`${t('ORDER_TYPE', 'Order Type')}: `}</OText>
               {orderTypes(order.delivery_type)}
             </OText>
+            {order?.delivery_option && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
+                {order?.delivery_option?.name}
+              </OText>
+            )}
             {order?.payment_events?.length > 0 && (
               <View>
                 <OText size={13}>

package/themes/business/src/components/OrderDetails/styles.tsx

@@ -91,3 +91,10 @@ export const AssignDriver = styled.View`
   padding-vertical: 10px;
   margin-bottom: 10px;
 `;
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 70%;
+  flex-wrap: wrap;
+`

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

@@ -10,7 +10,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CheckoutAction, OrderTypeWrapper, FloatingLayout } from './styles';
+import { CheckoutAction, OrderTypeWrapper, FloatingLayout, OSRow } from './styles';
 
 import { OSBill, OSCoupon, OSTable } from '../OrderSummary/styles';
 
@@ -90,6 +90,20 @@ const CartUI = (props: any) => {
 
   const goToBack = () => navigation.goBack();
 
+  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)
+    }
+  }
+
+  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)
+  }
+
   return (
     <>
       <Container>
@@ -177,13 +191,10 @@ 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 && orientationState?.orientation == PORTRAIT && (
-
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && orientationState?.orientation == PORTRAIT && (
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -226,44 +237,107 @@ const CartUI = (props: any) => {
                   </OText>
                 </OSTable>
               )}
-              {cart.business.tax_type !== 1 && (
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
                 <OSTable>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.tax || 0)}</OText>
+                  <OText numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText>{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>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{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}>
+                    <OSRow>
+                      <OText>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{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>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {selectedOrderType === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText>{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>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
                   <OText>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                      !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                       (
-                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
                   <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>
-              )}
               {!cart?.discount_type && isCouponEnabled && !isCartPending && orientationState?.orientation == PORTRAIT && (
                 <OSTable>
                   <OSCoupon>
@@ -279,7 +353,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText weight='bold' color={theme.colors.primary}>
-                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSBill>
@@ -379,7 +453,7 @@ const CartUI = (props: any) => {
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={cart?.business_id}
+          businessId={curProduct?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -68,3 +68,9 @@ export const FloatingLayout = styled.View`
     padding-bottom: 20px;
   `)}
 `
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`