ordering-ui-react-native 0.22.21 → 0.22.22-release

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

@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from 'react'
-
 import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
@@ -13,17 +12,20 @@ import {
   OrderBill,
   Total,
   OSRow,
+  OrderVehicle,
+  OrderSpot,
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 
-import { verifyDecimals, calculateDistance, transformDistance } from '../../utils';
+import { verifyDecimals, calculateDistance, transformDistance, getCurrenySymbol } from '../../utils';
 
 import {
   useLanguage,
   useUtils,
   useConfig,
-  useSession
+  useSession,
+  useApi
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ReviewCustomer } from '../ReviewCustomer'
@@ -44,6 +46,7 @@ interface OrderContent {
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
+  const [ordering] = useApi()
   const [{ user }] = useSession()
   const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
@@ -66,6 +69,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const deliveryTypes = [1, 7]
 
   const walletName: any = {
     cash: {
@@ -97,19 +101,21 @@ export const OrderContentComponent = (props: OrderContent) => {
     }
   })
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (!order?.taxes) return 0
     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)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? 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 order?.taxes?.filter((tax: any) => tax?.type === 1 && tax?.target === 'product')?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const containsOnlyNumbers = (str: string) => {
@@ -230,7 +236,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
         {!!order?.business?.location && order?.customer?.location && (
           <OText>
-            {t('DISTANCE_TO_THE_BUSINESS', 'Distance to the business')}: {transformDistance(calculateDistance(order?.business?.location, { latitude: order?.customer?.location?.lat, longitude: order?.customer?.location?.lng }), distanceUnit)} {t(distanceUnit.toUpperCase(), distanceUnit)}
+            {t('DISTANCE_TO_THE_BUSINESS', 'Distance to the business')}: {transformDistance(calculateDistance(order?.business?.location, { latitude: order?.customer?.location?.lat, longitude: order?.customer?.location?.lng }), distanceUnit)} {t(distanceUnit?.toUpperCase?.(), distanceUnit)}
           </OText>
         )}
         {!!order?.business?.address_notes && (
@@ -408,16 +414,16 @@ export const OrderContentComponent = (props: OrderContent) => {
             {t('ON_BEHALF_OF', 'On behalf of')}{': '} {order?.on_behalf_of}
           </OText>
         )}
-        {(order?.delivery_option !== undefined && order?.delivery_type === 1) && (
+        {(order?.delivery_option !== undefined && deliveryTypes.includes(order?.delivery_type)) && (
           <View style={{ marginTop: 10 }}>
-            {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+            {order?.delivery_option !== undefined && deliveryTypes.includes(order?.delivery_type) && (
               <OText>
-                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
+                {t(order?.delivery_option?.name?.toUpperCase?.()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
           </View>
         )}
-        {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
+        {!order?.user_review && pastOrderStatuses.includes(order?.status) && order?.customer_id && (
           <OButton
             style={styles.btnReview}
             textStyle={{ color: theme.colors.white }}
@@ -434,9 +440,19 @@ export const OrderContentComponent = (props: OrderContent) => {
         </OText>
 
         {!!order?.comment && (
-          <OText>
-            {`${t('ORDER_COMMENT', 'Order Comment')}: ${order?.comment}`}
-          </OText>
+          <>
+            <OText>
+              {`${t('ORDER_COMMENT', 'Order Comment')}: `}
+            </OText>
+            <OText
+              {...(ordering?.project?.includes('delosi') && {
+                color: theme.colors.primary,
+                weight: 'bold'
+              })}
+            >
+              {order?.comment}
+            </OText>
+          </>
         )}
 
         {order?.products?.length > 0 &&
@@ -449,11 +465,11 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))}
       </OrderProducts>
 
-      <OrderBill>
+      <OrderBill vehicleExists={!!order?.vehicle}>
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: getCurrenySymbol(order?.currency) })}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -466,7 +482,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: getCurrenySymbol(order?.currency) })}</OText>
           </Table>
         )}
         {
@@ -474,13 +490,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
+                  {t(offer.name?.toUpperCase?.()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}</OText>
             </Table>
           ))
         }
@@ -488,9 +504,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <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), { currency: order?.currency })}</OText>
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: getCurrenySymbol(order?.currency) })}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: getCurrenySymbol(order?.currency) })}</OText>
             )}
           </Table>
         )}
@@ -500,7 +516,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: getCurrenySymbol(order?.currency) })}
             </OText>
           </Table>
         )}
@@ -511,20 +527,20 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: getCurrenySymbol(order?.currency) })}</OText>
             </Table>
           )
         }
         {
-          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any) => (
             <Table key={tax.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase?.()?.replace(/ /g, '_'), 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, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: getCurrenySymbol(order?.currency) })}</OText>
             </Table>
           ))
         }
@@ -533,11 +549,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={fee.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency })} + `}{fee.percentage}%){' '}
+                  {t(fee?.name?.toUpperCase?.()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: getCurrenySymbol(order?.currency) })} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: getCurrenySymbol(order?.currency) })}</OText>
             </Table>
           ))
         }
@@ -546,13 +562,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
+                  {t(offer.name?.toUpperCase?.()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}</OText>
             </Table>
           ))
         }
@@ -564,23 +580,36 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}
+                {parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true), { currency: getCurrenySymbol(order?.currency) })}
               </OText>
             </Table>
           )
         }
+        {
+          order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+            <Table key={`${tax.description}_${i}`}>
+              <OSRow>
+                <OText mBottom={4}>
+                  {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, { currency: getCurrenySymbol(order?.currency) })}</OText>
+            </Table>
+          ))
+        }
         {
           order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
+                  {t(offer.name?.toUpperCase?.()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
-                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    <OText>{`(${verifyDecimals(offer?.rate, parsePrice, { currency: getCurrenySymbol(order?.currency) })}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}</OText>
             </Table>
           ))
         }
@@ -594,7 +623,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: getCurrenySymbol(order?.currency) })}</OText>
           </Table>
         )}
 
@@ -608,7 +637,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency })}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: getCurrenySymbol(order?.currency) })}
             </OText>
           </Table>
         </Total>
@@ -643,23 +672,81 @@ export const OrderContentComponent = (props: OrderContent) => {
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
                         : event?.paymethod?.gateway
-                          ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)
+                          ? t(event?.paymethod?.gateway?.toUpperCase?.(), event?.paymethod?.name)
                           : order?.paymethod?.id === event?.paymethod_id
-                            ? t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)
+                            ? t(order?.paymethod?.gateway?.toUpperCase?.(), order?.paymethod?.name)
                             : ''}
                     </OText>
                   </View>
                   <OText>
                     {(event?.paymethod?.gateway === 'cash' && order?.cash)
-                      ? parsePrice(order?.cash, { currency: order?.currency })
-                      : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
+                      ? parsePrice(order?.cash, { currency: getCurrenySymbol(order?.currency) })
+                      : `-${parsePrice(event?.amount, { currency: getCurrenySymbol(order?.currency) })}`}
                   </OText>
                 </View>
               ))}
             </View>
           </View>
         )}
+
       </OrderBill >
+
+      {!!order?.spot_number && (
+        <OrderSpot vehicleExists={!!order?.vehicle}>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('SPOT_NUMBER', 'Spot number')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.spot_number}
+            </OText>
+          </Table>
+        </OrderSpot>
+      )}
+
+      {!!order?.vehicle && (
+        <OrderVehicle>
+          <OText
+            style={{ marginBottom: 5 }}
+            size={16}
+            weight="600"
+            color={theme.colors.textGray}>
+            {t('VEHICLE', 'Vehicle')}
+          </OText>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('CAR_REGISTRATION', 'Car registration')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.car_registration}
+            </OText>
+          </Table>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('COLOR', 'Color')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.color}
+            </OText>
+          </Table>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('MODEL', 'Model')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.model}
+            </OText>
+          </Table>
+          <Table>
+            <OText style={{ marginBottom: 5 }}>
+              {t('TYPE', 'Type')}
+            </OText>
+            <OText style={{ marginBottom: 5 }}>
+              {order?.vehicle?.type}
+            </OText>
+          </Table>
+        </OrderVehicle>
+      )}
       <OModal
         open={openReviewModal}
         onClose={() => setOpenReviewModal(false)}

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

@@ -3,7 +3,9 @@ import React from 'react';
 //Styles
 import {
   Actions,
+  Dot,
   Header,
+  Messages,
   OrderHeader,
 } from './styles';
 
@@ -22,6 +24,8 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {
   useLanguage,
   useUtils,
+  useConfig,
+  useSession
 } from 'ordering-components/native';
 
 interface OrderHeader {
@@ -34,6 +38,8 @@ interface OrderHeader {
   handleViewSummaryOrder?: any;
   handleCopyClipboard?: any
   isCustomView?: any
+  messages?: any
+  messagesReadList?: any
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -45,12 +51,21 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     getOrderStatus,
     logisticOrderStatus,
     handleViewSummaryOrder,
-    handleCopyClipboard
+    handleCopyClipboard,
+    messages,
+    messagesReadList
   } = props
   const theme = useTheme();
   const [, t] = useLanguage();
+  const [configState] = useConfig()
+  const [{ user }] = useSession()
   const [{ parseDate, parsePrice }] = useUtils();
   const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
+  const showExternalId = configState?.configs?.change_order_id?.value === '1'
+  const messagesReadIds = messagesReadList?.map((message: any) => message?.order_message_id)
+
+  const filteredMessages = messagesReadList?.length > 0 ? messages?.messages?.filter((message: any) => !messagesReadIds?.includes(message?.id)) : messages?.messages
+  const cateringTypes = [7, 8]
 
   const styles = StyleSheet.create({
     icons: {
@@ -88,6 +103,11 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     19: theme.colors.statusOrderBlue,
     20: theme.colors.statusOrderBlue,
     21: theme.colors.statusOrderBlue,
+    22: theme.colors.statusOrderBlue,
+    23: theme.colors.statusOrderBlue,
+    24: theme.colors.statusOrderBlue,
+    25: theme.colors.statusOrderBlue,
+    26: theme.colors.statusOrderBlue,
     //GREEN
     1: theme.colors.statusOrderGreen,
     11: theme.colors.statusOrderGreen,
@@ -188,18 +208,20 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 style={styles.icons}
                 onClick={() => handleOpenMapView()}
               />
-
-              <OIconButton
-                icon={theme.images.general.messages}
-                iconStyle={{
-                  width: 20,
-                  height: 20,
-                  tintColor: theme.colors.textGray,
-                }}
-                borderColor={theme.colors.clear}
-                style={styles.icons}
-                onClick={() => handleOpenMessagesForBusiness()}
-              />
+              <Messages>
+                {filteredMessages?.filter((message: any) => message?.author_id !== user?.id && !message?.read)?.length > 0 && <Dot />}
+                <OIconButton
+                  icon={theme.images.general.messages}
+                  iconStyle={{
+                    width: 20,
+                    height: 20,
+                    tintColor: theme.colors.textGray,
+                  }}
+                  borderColor={theme.colors.clear}
+                  style={styles.icons}
+                  onClick={() => handleOpenMessagesForBusiness()}
+                />
+              </Messages>
             </Actions>
           )}
         </Header>
@@ -207,12 +229,18 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
       <OrderHeader>
         {!props.isCustomView ? (
           <OText size={13} style={{ marginBottom: 5 }}>
-            {deliveryDate()}
+            <>
+              {cateringTypes.includes(order?.delivery_type) ? `${t('CREATED_AT', 'Created at')}: ${parseDate(order?.created_at)}\n` : ''}
+              {cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}: ` : ''}{deliveryDate()}
+            </>
           </OText>
         ) : (
           <Header style={{ alignItems: 'center' }}>
             <OText size={13} style={{ marginBottom: 5 }}>
-              {deliveryDate()}
+              <>
+                {cateringTypes.includes(order?.delivery_type) ? `${t('CREATED_AT', 'Created at')}: ${parseDate(order?.created_at)}\n` : ''}
+                {cateringTypes.includes(order?.delivery_type) ? `${t('PLACED_TO', 'Placed to')}: ` : ''}{deliveryDate()}
+              </>
             </OText>
 
             {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
@@ -251,7 +279,6 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   style={styles.icons}
                   onClick={() => handleOpenMapView()}
                 />
-
                 <OIconButton
                   icon={theme.images.general.messages}
                   iconStyle={{
@@ -270,7 +297,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
 
         <OText numberOfLines={2} size={20} weight="600">
           <>
-            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id} `}
+            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${showExternalId ? order?.external_id || order?.id : order?.id} `}
             {!order?.isLogistic && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
               <>
                 {t('IS', 'is')}{' '}
@@ -284,7 +311,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
-        {order?.external_id && (
+        {order?.external_id && !showExternalId && (
           <OText size={13}>
             <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
             {order?.external_id}

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

@@ -25,13 +25,13 @@ export const Logo = styled.View`
 
 export const OrderContent = styled.View`
   flex: 1;
-  ${(props : any) => props.isOrderGroup && css`
+  ${(props: any) => props.isOrderGroup && css`
     border-color: rgba(0, 0, 0, 0.2);
     border-width: 1px;
     padding: 10px;
   `
   }
-  ${(props : any) => props.lastOrder && css`
+  ${(props: any) => props.lastOrder && css`
     margin-bottom: 50px;
   `}
 `;
@@ -68,7 +68,28 @@ export const Table = styled.View`
 
 export const OrderBill = styled.View`
   padding-vertical: 20px;
-  padding-bottom: 30px;
+  ${(props: any) => !props.vehicleExists && css`
+    padding-bottom: 50px;
+  `
+  }
+  flex: 1;
+`;
+
+export const OrderVehicle = styled.View`
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.borderTops};
+  padding-vertical: 20px;
+  padding-bottom: 50px;
+  flex: 1;
+`;
+
+export const OrderSpot = styled.View`
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.borderTops};
+  padding-vertical: 20px;
+  ${(props: any) => !props.vehicleExists && css`
+    padding-bottom: 50px;
+  `}
   flex: 1;
 `;
 
@@ -98,3 +119,18 @@ export const OSRow = styled.View`
   width: 70%;
   flex-wrap: wrap;
 `
+
+export const Messages = styled.View`
+position: relative;
+`;
+
+export const Dot = styled.View`
+position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${(props: any) => props.theme.colors.red};
+  top: 10px;
+  right: 10px;
+  z-index: 99;
+`;