ordering-ui-react-native 0.21.13 → 0.21.14-release

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { useLanguage } from 'ordering-components/native';
+import { useLanguage, useConfig } from 'ordering-components/native';
 
-import {AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
+import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
 
 import { OButton, OModal } from '../shared';
-import { OrderItem } from './OrderItem'
 import { OrdersGroupedItem } from './OrdersGroupedItem'
+import { OrdersList } from './OrderList';
 import { AcceptOrRejectOrder } from '../AcceptOrRejectOrder';
 import { ReviewCustomer } from '../ReviewCustomer';
 import { GoogleMap } from '../GoogleMap';
@@ -24,14 +24,17 @@ export const PreviousOrders = (props: any) => {
     currentTabSelected,
     currentOrdenSelected,
     handleChangeOrderStatus,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    isBusinessApp
   } = props;
 
   let hash: any = {};
   const [, t] = useLanguage();
   const theme = useTheme();
+  const [{ configs }] = useConfig();
 
-  const [, setCurrentTime] = useState()
+
+  // const [, setCurrentTime] = useState()
   const [openModal, setOpenModal] = useState(false)
   const [openReviewModal, setOpenReviewModal] = useState({ order: null, ids: [], customerId: null })
   const [openMapViewModal, setOpenMapViewModal] = useState<any>({ open: false, customerLocation: null, locations: [] })
@@ -41,6 +44,9 @@ export const PreviousOrders = (props: any) => {
   const viewMapStatus = [9, 18, 19, 23]
   const deliveryPickupBtn = props.appTitle?.text?.includes('Delivery') && [3, 8, 18]
   const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23]
+  const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1' && !isBusinessApp
+  const isEnabledOrderNotReady = configs?.order_not_ready_enabled?.value === '1'
+  const isEnabledFailedPickupDriver = configs?.failed_pickup_by_driver_enabled?.value === '1'
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -48,9 +54,9 @@ export const PreviousOrders = (props: any) => {
     if (props.handleClickEvent) {
       props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
     } else {
-      if (isLogisticOrder){
+      if (isLogisticOrder) {
         onNavigationRedirect &&
-        onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+          onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
       } else {
         onNavigationRedirect &&
           onNavigationRedirect('OrderDetails', { order });
@@ -58,73 +64,13 @@ export const PreviousOrders = (props: any) => {
     }
   };
 
-  const OrdersList = (props: any) => {
-    const { order, _order, hideBtns } = props
-    return (
-      <View
-        style={{
-          backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
-          marginBottom: isLogisticOrder ? 10 : 0
-        }}
-      >
-        <OrderItem
-          order={order}
-          _order={_order}
-          isLogisticOrder={isLogisticOrder}
-          handlePressOrder={handlePressOrder}
-          currentTabSelected={currentTabSelected}
-          getOrderStatus={getOrderStatus}
-        />
-        {isLogisticOrder && !hideBtns && (
-          <AcceptOrRejectOrderStyle>
-            {!!order?.order_group_id && !!order?.order_group ? (
-              <OButton
-                text={t('VIEW_ORDER', 'View order')}
-                onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
-                bgColor={theme.colors.blueLight}
-                borderColor={theme.colors.blueLight}
-                imgRightSrc={null}
-                style={{ borderRadius: 7, height: 40 }}
-                parentStyle={{ width: '100%' }}
-                textStyle={{ color: theme?.colors?.white }}
-              />
-            ) : (
-              <>
-                <OButton
-                  text={t('REJECT', 'Reject')}
-                  onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                  bgColor={theme.colors.red}
-                  borderColor={theme.colors.red}
-                  imgRightSrc={null}
-                  style={{ borderRadius: 7, height: 40 }}
-                  parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.white }}
-                />
-                <OButton
-                  text={t('ACCEPT', 'Accept')}
-                  onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                  bgColor={theme.colors.green}
-                  borderColor={theme.colors.green}
-                  imgRightSrc={null}
-                  style={{ borderRadius: 7, height: 40 }}
-                  parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.white }}
-                />
-              </>
-            )}
-          </AcceptOrRejectOrderStyle>
-        )}
-      </View>
-    )
-  }
-
   const ordersGroupAction = (param1 = '', param2 = '', { order, action, body, ids }: any = {}) => {
     setOrderUpdateStatus({ ...orderUpdateStatus, action, ids, body, order })
     if (!param1) setOpenModal(true)
     if (param1) {
       setOpenModal(false)
       handleChangeOrderStatus &&
-      handleChangeOrderStatus(param1, orderUpdateStatus.ids, param2)
+        handleChangeOrderStatus(param1, orderUpdateStatus.ids, param2)
     }
   }
 
@@ -159,7 +105,7 @@ export const PreviousOrders = (props: any) => {
       if (_order?.customer?.location) {
         locations.push({
           ..._order?.customer?.location,
-          title: _order?.customer?.name ??  t('CUSTOMER', 'Customer'),
+          title: _order?.customer?.name ?? t('CUSTOMER', 'Customer'),
           address: {
             addressName: _order?.customer?.address,
             zipcode: _order?.customer?.zipcode
@@ -180,14 +126,14 @@ export const PreviousOrders = (props: any) => {
     })
   }
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const date: any = Date.now()
-      setCurrentTime(date)
-    }, slaSettingTime ?? 6000)
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     const date: any = Date.now()
+  //     setCurrentTime(date)
+  //   }, slaSettingTime ?? 6000)
 
-    return () => clearInterval(interval)
-  }, [])
+  //   return () => clearInterval(interval)
+  // }, [])
 
 
   return (
@@ -210,35 +156,48 @@ export const PreviousOrders = (props: any) => {
                       ?.map((_order: any) => {
                         const order_ = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
                         return (
-                          <OrdersList key={order_.id} order={order_} _order={_order} hideBtns />
+                          <OrdersList
+                            key={order_.id}
+                            order={order_}
+                            _order={_order}
+                            hideBtns
+                            currentOrdenSelected={currentOrdenSelected}
+                            isLogisticOrder={isLogisticOrder}
+                            handlePressOrder={handlePressOrder}
+                            currentTabSelected={currentTabSelected}
+                            getOrderStatus={getOrderStatus}
+                            handleClickLogisticOrder={handleClickLogisticOrder}
+                          />
                         )
                       }
-                    )
+                      )
                   }
                   {_ordersGrouped[k][0]?.status === 0 && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('REJECT_ALL', 'Reject all')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'reject',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('REJECT_ALL', 'Reject all')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'reject',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('ACCEPT_ALL', 'Accept all')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12 }}
                         onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
                           action: 'accept',
@@ -268,133 +227,137 @@ export const PreviousOrders = (props: any) => {
                   )}
                   {(_ordersGrouped[k][0]?.status === 8 || _ordersGrouped[k][0]?.status === 18) &&
                     _ordersGrouped[k][0]?.delivery_type === 1 &&
-                  (
-                    <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
-                        bgColor={theme.colors.btnBGWhite}
-                        borderColor={theme.colors.btnBGWhite}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '100%' }}
-                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
-                        onClick={() => handleChangeOrderStatus(
-                          3,
-                          _ordersGrouped[k].map((o: any) => o.id),
-                        )}
-                      />
-                    </AcceptOrRejectOrderStyle>
-                  )}
-                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 &&
-                  (
-                    <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('ORDER_NOT_READY', 'Order not ready')}
-                        bgColor={theme.colors.red}
-                        borderColor={theme.colors.red}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '100%' }}
-                        textStyle={{ color: theme.colors.white, fontSize: 12 }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'notReady',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
-                    </AcceptOrRejectOrderStyle>
-                  )}
+                    (
+                      <AcceptOrRejectOrderStyle>
+                        <OButton
+                          text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
+                          bgColor={theme.colors.btnBGWhite}
+                          borderColor={theme.colors.btnBGWhite}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '100%' }}
+                          textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                          onClick={() => handleChangeOrderStatus(
+                            3,
+                            _ordersGrouped[k].map((o: any) => o.id),
+                          )}
+                        />
+                      </AcceptOrRejectOrderStyle>
+                    )}
+                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady &&
+                    (
+                      <AcceptOrRejectOrderStyle>
+                        <OButton
+                          text={t('ORDER_NOT_READY', 'Order not ready')}
+                          bgColor={theme.colors.red}
+                          borderColor={theme.colors.red}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '100%' }}
+                          textStyle={{ color: theme.colors.white, fontSize: 12 }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'notReady',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      </AcceptOrRejectOrderStyle>
+                    )}
                   {viewMapStatus.includes(_ordersGrouped[k][0]?.status) &&
                     props.appTitle?.text?.includes('Business') &&
-                  (
-                    <View>
-                      <OButton
-                        text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
-                        bgColor={theme.colors.primaryLight}
-                        borderColor={theme.colors.primaryLight}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '100%' }}
-                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
-                        onClick={() => handleOpenMapView({ orders: _ordersGrouped[k] })}
-                      />
-                    </View>
-                  )}
+                    (
+                      <View>
+                        <OButton
+                          text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
+                          bgColor={theme.colors.primaryLight}
+                          borderColor={theme.colors.primaryLight}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '100%' }}
+                          textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                          onClick={() => handleOpenMapView({ orders: _ordersGrouped[k] })}
+                        />
+                      </View>
+                    )}
                   {_ordersGrouped[k][0]?.status === 4 &&
                     ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
-                  (
-                    <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => handleChangeOrderStatus(
-                          17,
-                          _ordersGrouped[k].map((o: any) => o.id),
-                        )}
-                      />
-                      <OButton
-                        text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
-                        bgColor={theme.colors.success100}
-                        borderColor={theme.colors.success100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => handleChangeOrderStatus(
-                          15,
-                          _ordersGrouped[k].map((o: any) => o.id),
+                    (
+                      <AcceptOrRejectOrderStyle>
+                        {!isHideRejectButtons && (
+                          <OButton
+                            text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
+                            bgColor={theme.colors.danger100}
+                            borderColor={theme.colors.danger100}
+                            imgRightSrc={null}
+                            style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                            parentStyle={{ width: '45%' }}
+                            textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                            onClick={() => handleChangeOrderStatus(
+                              17,
+                              _ordersGrouped[k].map((o: any) => o.id),
+                            )}
+                          />
                         )}
-                      />
-                    </AcceptOrRejectOrderStyle>
-                  )}
+                        <OButton
+                          text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
+                          bgColor={theme.colors.success100}
+                          borderColor={theme.colors.success100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
+                          textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => handleChangeOrderStatus(
+                            15,
+                            _ordersGrouped[k].map((o: any) => o.id),
+                          )}
+                        />
+                      </AcceptOrRejectOrderStyle>
+                    )}
                   {!_ordersGrouped[k][0]?.user_review &&
                     pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
-                  (
-                    <OButton
-                      text={t('REVIEW_CUSTOMER', 'Review customer')}
-                      bgColor={theme.colors.primary}
-                      borderColor={theme.colors.primary}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 8, height: 40 }}
-                      parentStyle={{ width: '100%' }}
-                      textStyle={{ color: theme.colors.white }}
-                      onClick={() => setOpenReviewModal({
-                        order: _ordersGrouped[k][0],
-                        customerId: _ordersGrouped[k][0]?.customer_id,
-                        ids: _ordersGrouped[k].map((o: any) => o.id)
-                      })}
-                    />
-                  )}
-                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
-                    <AcceptOrRejectOrderStyle>
+                    (
                       <OButton
-                        text={t('PICKUP_FAILED', 'Pickup failed')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
+                        text={t('REVIEW_CUSTOMER', 'Review customer')}
+                        bgColor={theme.colors.primary}
+                        borderColor={theme.colors.primary}
                         imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'pickupFailed',
+                        style={{ borderRadius: 8, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.white }}
+                        onClick={() => setOpenReviewModal({
                           order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
+                          customerId: _ordersGrouped[k][0]?.customer_id,
+                          ids: _ordersGrouped[k].map((o: any) => o.id)
                         })}
                       />
+                    )}
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver && (
+                    <AcceptOrRejectOrderStyle>
+                      {!isHideRejectButtons && isEnabledOrderNotReady && (
+                        <OButton
+                          text={t('PICKUP_FAILED', 'Pickup failed')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'pickupFailed',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('PICKUP_COMPLETE', 'Pickup complete')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                         onClick={() => handleChangeOrderStatus(
                           9,
@@ -405,28 +368,30 @@ export const PreviousOrders = (props: any) => {
                   )}
                   {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('DELIVERY_FAILED', 'Delivery Failed')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'deliveryFailed',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('DELIVERY_FAILED', 'Delivery Failed')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'deliveryFailed',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('DELIVERY_COMPLETE', 'Delivery complete')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                         onClick={() => handleChangeOrderStatus(
                           11,
@@ -440,7 +405,16 @@ export const PreviousOrders = (props: any) => {
             </View>
           ) : (
             <View key={order.id}>
-              <OrdersList order={order} _order={_order} />
+              <OrdersList
+                order={order}
+                _order={_order}
+                currentOrdenSelected={currentOrdenSelected}
+                isLogisticOrder={isLogisticOrder}
+                handlePressOrder={handlePressOrder}
+                currentTabSelected={currentTabSelected}
+                getOrderStatus={getOrderStatus}
+                handleClickLogisticOrder={handleClickLogisticOrder}
+              />
             </View>
           )
         )

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

@@ -41,6 +41,16 @@ export const Timestatus = styled.View`
   height: 55px;
   border-radius: 20px;
   top: 5px;
+
+  ${({ timeState }: any) => timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+  ${({ timeState }: any) => timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+  ${({ timeState }: any) => timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
 `
 
 export const AccordionSection = styled.View`