ordering-ui-react-native 0.21.19 → 0.21.21

package/package.json

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

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

@@ -99,6 +99,17 @@ const ChatUI = (props: MessagesParams) => {
     23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
   }
 
+  const getLogisticTag = (status: any) => {
+    const keyList: any = {
+      0: t('PENDING', 'Pending'),
+      1: t('IN_PROGRESS', 'In progress'),
+      2: t('IN_QUEUE', 'In queue'),
+      3: t('EXPIRED', 'Expired'),
+      4: t('RESOLVED', 'Resolved'),
+    }
+    return keyList[status] ? keyList[status] : t('UNKNOWN', 'Unknown')
+  }
+
   const storeMessageList: any = [
     { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
     { key: 'store_message_2', text: t('STORE_MESSAGE_2', 'store_message_2') },
@@ -312,7 +323,8 @@ const ChatUI = (props: MessagesParams) => {
         quality: 1
       },
       (response: any) => {
-        const image = response.assets[0];
+        const image = response.assets?.[0];
+        if (!image) return
         if (image.didCancel) {
           console.log('User cancelled image picker');
         } else if (image.errorMessage) {
@@ -371,18 +383,25 @@ const ChatUI = (props: MessagesParams) => {
         }}>
         <OText
           numberOfLines={3}
-          style={{ ...styles.firstMessageText, textAlign: 'center' }}>
-          {message.change?.attribute !== 'driver_id'
+          style={{ ...styles.firstMessageText, textAlign: 'center' }}
+        >
+          {
+            message.change?.attribute !== 'driver_id'
             ?
-            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
-              `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
-              `${message.change.old !== null && ORDER_STATUS[parseInt(message.change.old, 10)]} ${t('TO', 'to')} ${ORDER_STATUS[parseInt(message.change.new, 10)]}`
+            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
+              ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+              : `${message.change?.attribute !== 'logistic_status'
+                ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+                : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+                  ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                  : getLogisticTag(message.change.new)}`
             }`
             : message.change.new
               ?
               `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
               :
-              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
+              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+          }
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
@@ -1062,7 +1081,7 @@ const ChatUI = (props: MessagesParams) => {
     .m-signature-pad {
       box-shadow: none;
       border: none;
-    } 
+    }
     .m-signature-pad--body {
       border: none;
     }

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

@@ -2,20 +2,17 @@ import React, { useState, useEffect } from 'react';
 import {
   View,
   Pressable,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-  RefreshControl,
+  StyleSheet
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { OText, OButton } from '../shared';
+import { OText } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { PreviousMessages } from '../PreviousMessages';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+
 const MessagesOptionUI = (props: MessagesOptionParams) => {
   const {
     orders,
@@ -65,12 +62,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     ),
   );
 
-  const [orientation, setOrientation] = useState(
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? 'Portrait'
-      : 'Landscape',
-  );
-
   const getTagFilter = (key: number) => {
     return tags.find(value => value.key === key)?.text;
   };
@@ -114,14 +105,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     );
   }, [orders]);
 
-  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-    if (width < height) {
-      setOrientation('Portrait');
-    } else {
-      setOrientation('Landscape');
-    }
-  });
-
   const styles = StyleSheet.create({
     header: {
       marginBottom: 25,
@@ -242,35 +225,28 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             !error
               ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
               : error[0]?.message ||
-                error[0] ||
-                t('NETWORK_ERROR', 'Network Error')
+              error[0] ||
+              t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
         />
       )}
-
-      <ScrollView 
-        showsVerticalScrollIndicator={false}
-        style={{ flex: 1 }}
-        refreshControl={<RefreshControl
-          refreshing={refreshing}
-          onRefresh={() => getOrders?.()}
-      />}
-      >
-        {!reload &&
-          !error &&
-          values.length > 0 &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
-            <PreviousMessages
-              orders={values}
-              setOrders={setOrders}
-              messages={messages}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          )}
-
-        {/* {!reload &&
+      <PreviousMessages
+        orders={values}
+        messages={messages}
+        onNavigationRedirect={onNavigationRedirect}
+        getOrders={getOrders}
+        pagination={pagination}
+        loading={loading}
+        reload={reload}
+        tabs={tabs}
+        tabsFilter={tabsFilter}
+        setOrders={setOrders}
+        loadMore={loadMore}
+        error={error}
+      />
+      {/* {!reload &&
         !error &&
         orders.length > 0 &&
         JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
@@ -283,55 +259,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             onNavigationRedirect={onNavigationRedirect}
           />
         )} */}
-
-        {(loading || reload) && (
-          <>
-            <View>
-              {[...Array(5)].map((item, i) => (
-                <Placeholder key={i} Animation={Fade}>
-                  <View
-                    style={{
-                      width: '100%',
-                      flexDirection: 'row',
-                      marginBottom: 10,
-                    }}>
-                    <PlaceholderLine
-                      width={orientation === 'Portrait' ? 22 : 11}
-                      height={74}
-                      style={{
-                        marginRight: 20,
-                        marginBottom: 20,
-                        borderRadius: 7.6,
-                      }}
-                    />
-                    <Placeholder>
-                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                      <PlaceholderLine width={50} />
-                      <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                </Placeholder>
-              ))}
-            </View>
-          </>
-        )}
-
-        {pagination?.totalPages &&
-          !loading &&
-          !reload &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
-          pagination?.currentPage < pagination?.totalPages && (
-            <OButton
-              onClick={() => loadMore && loadMore()}
-              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-              imgRightSrc={null}
-              textStyle={styles.loadButtonText}
-              style={styles.loadButton}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-            />
-          )}
-      </ScrollView>
     </>
   );
 };

package/themes/business/src/components/PreviousMessages/FooterMessageComponent.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import { Dimensions, View, StyleSheet } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { useLanguage } from 'ordering-components/native'
+
+export const FooterComponent = (props : any) => {
+    const {
+        loading,
+        reload,
+        pagination,
+        tabsFilter,
+        tabs,
+        loadMore
+    } = props
+
+    const theme = useTheme()
+    const [, t] = useLanguage()
+
+    const [orientation, setOrientation] = useState(
+        Dimensions.get('window').width < Dimensions.get('window').height
+            ? 'Portrait'
+            : 'Landscape',
+    );
+
+    Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+        if (width < height) {
+            setOrientation('Portrait');
+        } else {
+            setOrientation('Landscape');
+        }
+    });
+
+    const styles = StyleSheet.create({
+        loadButton: {
+            borderRadius: 7.6,
+            height: 44,
+            marginRight: 10,
+            marginBottom: 10,
+            marginTop: 5,
+        },
+        loadButtonText: {
+            color: theme.colors.white,
+            fontFamily: 'Poppins',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            fontSize: 18,
+        },
+    })
+
+    return (
+        <>
+            {(loading || reload) && (
+                <>
+                    <View>
+                        {[...Array(5)].map((item, i) => (
+                            <Placeholder key={i} Animation={Fade}>
+                                <View
+                                    style={{
+                                        width: '100%',
+                                        flexDirection: 'row',
+                                        marginBottom: 10,
+                                    }}>
+                                    <PlaceholderLine
+                                        width={orientation === 'Portrait' ? 22 : 11}
+                                        height={74}
+                                        style={{
+                                            marginRight: 20,
+                                            marginBottom: 20,
+                                            borderRadius: 7.6,
+                                        }}
+                                    />
+                                    <Placeholder>
+                                        <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                                        <PlaceholderLine width={50} />
+                                        <PlaceholderLine width={20} />
+                                    </Placeholder>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </View>
+                </>
+            )}
+
+            {pagination?.totalPages &&
+                !loading &&
+                !reload &&
+                JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
+                pagination?.currentPage < pagination?.totalPages && (
+                    <OButton
+                        onClick={() => loadMore && loadMore()}
+                        text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                        imgRightSrc={null}
+                        textStyle={styles.loadButtonText}
+                        style={styles.loadButton}
+                        bgColor={theme.colors.primary}
+                        borderColor={theme.colors.primary}
+                    />
+                )}
+        </>
+    )
+}

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

@@ -1,17 +1,31 @@
-import React from 'react';
-import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { Card, Logo, Information, Header, Badge } from './styles';
 import { OIcon, OText } from '../shared';
 import { PreviousMessagesParams } from '../../types';
+import { FooterComponent } from './FooterMessageComponent';
 
 export const PreviousMessages = (props: PreviousMessagesParams) => {
-  const { orders, onNavigationRedirect, setOrders } = props;
+  const {
+    orders,
+    onNavigationRedirect,
+    setOrders,
+    getOrders,
+    pagination,
+    loading,
+    reload,
+    tabs,
+    loadMore,
+    tabsFilter,
+    error
+  } = props;
 
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parseDate, optimizeImage }] = useUtils();
+  const [refreshing] = useState(false);
 
   const handlePressOrder = (order: any) => {
     const uuid = order?.id;
@@ -253,63 +267,91 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       fontStyle: 'normal',
       fontWeight: 'normal',
       color: theme.colors.orderTypeColor,
-    },
+    }
   });
 
-  return (
-    <>
-      {orders?.length > 0 &&
-        orders?.map((order: any) => (
-          <TouchableOpacity
-            key={order?.id}
-            onPress={() => handlePressOrder(order)}
-            style={styles.cardButton}
-            activeOpacity={1}>
-            <Card key={order?.id}>
-              <Logo style={styles.logo}>
-                <OIcon
-                  url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                  src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
-                  style={styles.icon}
-                />
-              </Logo>
-              <Information>
-                <Header>
-                  <OText numberOfLines={1} style={styles.title}>
-                    {order?.business?.name}
-                  </OText>
+  const MessageComponent = (props : any) => {
+    const order = props.item
+    return (
+      <>
+        {!reload &&
+          !error &&
+          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
+            <TouchableOpacity
+              key={order?.id}
+              onPress={() => handlePressOrder(order)}
+              style={styles.cardButton}
+              activeOpacity={1}>
+              <Card key={order?.id}>
+                <Logo style={styles.logo}>
+                  <OIcon
+                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
+                    src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
+                    style={styles.icon}
+                  />
+                </Logo>
+                <Information>
+                  <Header>
+                    <OText numberOfLines={1} style={styles.title}>
+                      {order?.business?.name}
+                    </OText>
 
-                  {order?.unread_count > 0 && (
-                    <Badge>
-                      <OText size={14} style={styles.badge}>
-                        {order?.unread_count}
-                      </OText>
-                    </Badge>
-                  )}
-                </Header>
+                    {order?.unread_count > 0 && (
+                      <Badge>
+                        <OText size={14} style={styles.badge}>
+                          {order?.unread_count}
+                        </OText>
+                      </Badge>
+                    )}
+                  </Header>
 
-                <OText
-                  style={styles.date}
-                  numberOfLines={1}
-                  adjustsFontSizeToFit
-                  size={20}>
-                  {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
+                  <OText
+                    style={styles.date}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                    size={20}>
+                    {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
+                    {order?.delivery_datetime_utc
+                      ? parseDate(order?.delivery_datetime_utc)
+                      : parseDate(order?.delivery_datetime, { utc: false })}
+                  </OText>
 
-                <OText
-                  style={styles.orderType}
-                  mRight={5}
-                  numberOfLines={1}
-                  adjustsFontSizeToFit>
-                  {getOrderStatus(order?.status)?.value}
-                </OText>
-              </Information>
-            </Card>
-          </TouchableOpacity>
-        ))}
+                  <OText
+                    style={styles.orderType}
+                    mRight={5}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit>
+                    {getOrderStatus(order?.status)?.value}
+                  </OText>
+                </Information>
+              </Card>
+            </TouchableOpacity>
+          )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <FlatList
+        data={orders}
+        renderItem={MessageComponent}
+        keyExtractor={(order) => order?.id}
+        showsVerticalScrollIndicator={false}
+        style={{ flex: 1 }}
+        refreshControl={<RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => getOrders?.()}
+        />}
+        ListFooterComponent={<FooterComponent
+          loading={loading}
+          reload={reload}
+          pagination={pagination}
+          tabsFilter={tabsFilter}
+          tabs={tabs}
+          loadMore={loadMore}
+        />}
+      />
     </>
   );
 };

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

@@ -21,7 +21,13 @@ import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrienta
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
-export const OrderItem = (props: any) => {
+function OrderItemPropsAreEqual(prevProps: any, nextProps: any) {
+  return JSON.stringify(prevProps.order) === JSON.stringify(nextProps.order) &&
+    JSON.stringify(prevProps._order) === JSON.stringify(nextProps._order) &&
+    prevProps.currentTabSelected === nextProps.currentTabSelected
+}
+
+export const OrderItem = React.memo((props: any) => {
   const {
     order,
     _order,
@@ -195,9 +201,9 @@ export const OrderItem = (props: any) => {
               adjustsFontSizeToFit
             >
               {(!!order?.order_group_id && order?.order_group && isLogisticOrder
-                  ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
-                  : (t('NO', 'Order No.') + order.id)
-                ) + ' · '}
+                ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
+                : (t('NO', 'Order No.') + order.id)
+              ) + ' · '}
               {order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
                 : parseDate(order?.delivery_datetime, { utc: false })}
@@ -246,4 +252,4 @@ export const OrderItem = (props: any) => {
       </Card>
     </TouchableOpacity>
   )
-}
+}, OrderItemPropsAreEqual)

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import { View } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { OButton } from '../shared';
+import { useLanguage } from 'ordering-components/native'
+import { OrderItem } from './OrderItem';
+import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
+
+function OrderListPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.order) === JSON.stringify(nextProps.order) &&
+        JSON.stringify(prevProps._order) === JSON.stringify(nextProps._order) && 
+        JSON.stringify(prevProps.currentOrdenSelected) === JSON.stringify(nextProps.currentOrdenSelected) &&
+        prevProps.currentTabSelected === nextProps.currentTabSelected
+}
+
+export const OrdersList = React.memo((props: any) => {
+    const {
+        order,
+        _order,
+        hideBtns,
+        currentOrdenSelected,
+        isLogisticOrder,
+        handlePressOrder,
+        currentTabSelected,
+        getOrderStatus,
+        handleClickLogisticOrder
+    } = props
+
+    const theme = useTheme()
+    const [, t] = useLanguage()
+
+    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>
+    )
+}, OrderListPropsAreEqual)

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';
@@ -31,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: [] })
@@ -48,9 +48,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 +58,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 +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
@@ -180,14 +120,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,10 +150,21 @@ 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>
@@ -268,109 +219,109 @@ 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>
-                  )}
+                    (
+                      <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('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),
-                        )}
-                      />
+                    (
+                      <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>
+                    )}
+                  {!_ordersGrouped[k][0]?.user_review &&
+                    pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
+                    (
                       <OButton
-                        text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
-                        bgColor={theme.colors.success100}
-                        borderColor={theme.colors.success100}
+                        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.success500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => handleChangeOrderStatus(
-                          15,
-                          _ordersGrouped[k].map((o: any) => o.id),
-                        )}
+                        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)
-                      })}
-                    />
-                  )}
+                    )}
                   {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
                     <AcceptOrRejectOrderStyle>
                       <OButton
@@ -440,7 +391,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/UserProfileForm/index.tsx

@@ -49,7 +49,8 @@ const ProfileUI = (props: ProfileParams) => {
     handleToggleAvalaibleStatusDriver,
     userState,
     isAvailableLoading,
-    isAlsea
+    isAlsea,
+    isHideDriverStatus
   } = props;
 
   const [{ user }] = useSession();
@@ -345,7 +346,7 @@ const ProfileUI = (props: ProfileParams) => {
             />
           </CenterView>
 
-          {user?.level === 4 && (
+          {user?.level === 4 && !isHideDriverStatus && (
             <EnabledStatusDriver>
               <View style={{ flex: 1 }}>
                 <OText

package/themes/business/src/types/index.tsx

@@ -57,6 +57,7 @@ export interface ProfileParams {
   showField?: any;
   isRequiredField?: any;
   isAlsea?: boolean;
+  isHideDriverStatus?: boolean;
 }
 
 export interface AddressListParams {
@@ -365,6 +366,12 @@ export interface PreviousMessagesParams {
   loadMessages?: (id: any) => {};
   handleReorder?: (order: any) => {};
   onNavigationRedirect?: (route: string, params?: any) => {};
+  getOrders?: any;
+  loading?: boolean;
+  reload?: boolean;
+  tabs?: any;
+  loadMore: any
+  error?: boolean
 }
 export interface OrderDetailsParams {
   handleUpdateLocationDriver?: () => {};

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

@@ -294,7 +294,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 <ButtonWrapper>
                   {!hideReviewOrderButton &&
                     allowedOrderStatus.includes(parseInt(order?.status)) &&
-                    !order.review && (
+                    !order.review && order?.cart && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
                         style={styles.reviewButton}>
@@ -303,7 +303,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {!hideReorderButton && typeof order?.id === 'number' && (
+                  {!hideReorderButton && typeof order?.id === 'number' && order?.cart && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}