ordering-ui-react-native 0.17.69 → 0.17.70-release

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

@@ -3,11 +3,11 @@ import { View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage } 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';
@@ -15,7 +15,6 @@ import { GoogleMap } from '../GoogleMap';
 export const PreviousOrders = (props: any) => {
   const {
     orders,
-    ordersGrouped,
     onNavigationRedirect,
     getOrderStatus,
     handleClickOrder,
@@ -32,7 +31,7 @@ export const PreviousOrders = (props: any) => {
   const [, t] = useLanguage();
   const theme = useTheme();
 
-  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: [] })
@@ -40,6 +39,8 @@ export const PreviousOrders = (props: any) => {
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
   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 handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -47,78 +48,23 @@ export const PreviousOrders = (props: any) => {
     if (props.handleClickEvent) {
       props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
     } else {
-      onNavigationRedirect &&
-        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+      if (isLogisticOrder) {
+        onNavigationRedirect &&
+          onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+      } else {
+        onNavigationRedirect &&
+          onNavigationRedirect('OrderDetails', { order });
+      }
     }
   };
 
-  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.primary }}
-              />
-            ) : (
-              <>
-                <OButton
-                  text={t('REJECT', 'Reject')}
-                  onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                  bgColor={theme.colors.danger}
-                  borderColor={theme.colors.danger}
-                  imgRightSrc={null}
-                  style={{ borderRadius: 7, height: 40 }}
-                  parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.dangerText }}
-                />
-                <OButton
-                  text={t('ACCEPT', 'Accept')}
-                  onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                  bgColor={theme.colors.successOrder}
-                  borderColor={theme.colors.successOrder}
-                  imgRightSrc={null}
-                  style={{ borderRadius: 7, height: 40 }}
-                  parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.successText }}
-                />
-              </>
-            )}
-          </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)
     }
   }
 
@@ -153,7 +99,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
@@ -174,165 +120,291 @@ 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 (
     <>
-      {ordersGrouped && Object.keys(ordersGrouped)?.length > 0 && (
-        <View style={{ marginBottom: 10 }}>
-          {Object.keys(ordersGrouped).map(k => (
-            <OrdersGroupedItem
-              key={k}
-              groupId={k}
-              orders={ordersGrouped[k]}
-            >
-              {ordersGrouped[k]?.length > 0 &&
-                ordersGrouped[k]
-                  ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-                  ?.map((_order: any) => {
-                    const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
-                    return (
-                      <OrdersList key={order.id} order={order} _order={_order} hideBtns />
-                    )
+      {orders && orders?.length > 0 && orders.map((_order: any) => {
+        const order = !Array.isArray(_order) && (_order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order)
+        const _ordersGrouped = Array.isArray(_order) && Object.fromEntries(_order)
+        return (
+          _ordersGrouped ? (
+            <View key={_order[0]} style={{ marginBottom: 10 }}>
+              {Object.keys(_ordersGrouped).map((k, idx) => (
+                <OrdersGroupedItem
+                  key={`${k}_${idx}`}
+                  groupId={k}
+                  orders={_ordersGrouped[k]}
+                >
+                  {_ordersGrouped[k]?.length > 0 &&
+                    _ordersGrouped[k]
+                      ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
+                      ?.map((_order: any) => {
+                        const order_ = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
+                        return (
+                          <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={() => ordersGroupAction('', '', {
-                      action: 'reject',
-                      order: ordersGrouped[k][0],
-                      ids: ordersGrouped[k].map((o: any) => o.id)
-                    })}
-                  />
-                  <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%' }}
-                    textStyle={{ color: theme.colors.success500, fontSize: 12 }}
-                    onClick={() => ordersGroupAction('', '', {
-                      action: 'accept',
-                      order: ordersGrouped[k][0],
-                      ids: ordersGrouped[k].map((o: any) => o.id)
-                    })}
-                  />
-                </AcceptOrRejectOrderStyle>
-              )}
-              <View>
-                {ordersGrouped[k][0]?.status === 7 && (
-                  <OButton
-                    text={t('READY_FOR_PICKUP', 'Ready for pickup')}
-                    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={() => handleChangeOrderStatus(
-                      4,
-                      ordersGrouped[k].map((o: any) => o.id),
+                  {_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
+                        })}
+                      />
+                      <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%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12 }}
+                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                          action: 'accept',
+                          order: _ordersGrouped[k][0],
+                          ids: _ordersGrouped[k].map((o: any) => o.id),
+                          handleChangeOrderStatus
+                        })}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {_ordersGrouped[k][0]?.status === 7 && (
+                    <View>
+                      <OButton
+                        text={t('READY_FOR_PICKUP', 'Ready for pickup')}
+                        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={() => handleChangeOrderStatus(
+                          4,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </View>
+                  )}
+                  {(_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>
+                    )}
+                  {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>
-              <View>
-                {viewMapStatus.includes(ordersGrouped[k][0]?.status) && (
-                  <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),
+                  {_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>
                     )}
-                  />
-                  <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),
+                  {!_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)
+                        })}
+                      />
                     )}
-                  />
-                </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)
-                  })}
-                />
-              )}
-            </OrdersGroupedItem>
-          ))}
-        </View>
-      )}
-      {orders?.length > 0 &&
-        orders
-          ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-          ?.map((_order: any) => {
-            const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
-            return (
-              <OrdersList key={order.id} order={order} _order={_order} />
-            )
-          }
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
+                    <AcceptOrRejectOrderStyle>
+                      <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%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => handleChangeOrderStatus(
+                          9,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                  {!!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
+                        })}
+                      />
+                      <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%' }}
+                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                        onClick={() => handleChangeOrderStatus(
+                          11,
+                          _ordersGrouped[k].map((o: any) => o.id),
+                        )}
+                      />
+                    </AcceptOrRejectOrderStyle>
+                  )}
+                </OrdersGroupedItem>
+              ))}
+            </View>
+          ) : (
+            <View key={order.id}>
+              <OrdersList
+                order={order}
+                _order={_order}
+                currentOrdenSelected={currentOrdenSelected}
+                isLogisticOrder={isLogisticOrder}
+                handlePressOrder={handlePressOrder}
+                currentTabSelected={currentTabSelected}
+                getOrderStatus={getOrderStatus}
+                handleClickLogisticOrder={handleClickLogisticOrder}
+              />
+            </View>
+          )
         )
-      }
+      })}
 
       <OModal
         open={openModal}

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

@@ -33,7 +33,7 @@ export const NotificationIcon = styled.View`
 export const AcceptOrRejectOrder = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  margin: 10px;
+  margin: ${(props: any) => props.m ?? 10}px;
 `
 export const Timestatus = styled.View`
   position: relative;;

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

@@ -1,8 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { View, Animated } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 import {
   Accordion,
   AccordionSection,
@@ -34,8 +38,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parsePrice }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [isActive, setActiveState] = useState(false);
+  const [isReadMore, setIsReadMore] = useState(false);
+  const [lengthMore, setLengthMore] = useState(false);
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -108,6 +116,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     }
   }, []);
 
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <AccordionSection>
       <Accordion
@@ -288,9 +300,21 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                   color={theme.colors.unselectText}>
                   {t('COMMENT', 'Comment')}
                 </OText>
-                <OText size={12} mLeft={10} color={theme.colors.unselectText}>
+                <OText
+                  size={12}
+                  style={{ width: '100%', paddingLeft: 10 }}
+                  color={theme.colors.unselectText}
+                  onTextLayout={onTextLayout}
+                  numberOfLines={isReadMore ? 15 : 2}
+                  ellipsizeMode="tail"
+                >
                   {product.comment}
                 </OText>
+                {lengthMore && (
+                  <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)} style={{ marginLeft: 10 }}>
+                    <OText size={10} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+                  </TouchableOpacity>
+                )}
               </ProductComment>
             )}
           </AccordionContent>