ordering-ui-react-native 0.22.91 → 0.22.93

package/package.json

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

package/src/context/OfflineActions/index.tsx

@@ -0,0 +1,194 @@
+import React, { useState, createContext, useEffect, useContext } from 'react';
+import { useApi, useSession, useEvent } from 'ordering-components/native'
+import { useNetInfo } from '@react-native-community/netinfo';
+
+import { _retrieveStoreData, _setStoreData, _removeStoreData } from '../../providers/StoreUtil'
+
+type State = {
+  isNetConnected: boolean | null
+  isCombinedTabs: boolean | null
+  canSaveChangesOffline: boolean | null
+  actions: Array<{ [key: string]: any }>
+  orders: { [key: string]: any } | null
+}
+
+type Functions = {
+  applyOffAction: (changes: any) => any
+  registerOffOrder: (order: any) => any
+  setState: React.Dispatch<React.SetStateAction<State>>
+}
+
+const defaultState = {
+  isNetConnected: null,
+  isCombinedTabs: null,
+  canSaveChangesOffline: false,
+  actions: [],
+  orders: null,
+}
+
+
+export const OfflineActionsContext = createContext<[State, Functions]>([
+  defaultState,
+  {
+    applyOffAction: () => {},
+    registerOffOrder: () => {},
+    setState: () => {}
+  }
+]);
+
+export const OfflineActionsProvider = (props: any) => {
+  const netInfo = useNetInfo()
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [events] = useEvent()
+
+  const [state, setState] = useState<State>({
+    isNetConnected: netInfo.isConnected,
+    isCombinedTabs: false,
+    canSaveChangesOffline: false,
+    actions: [],
+    orders: null
+  })
+
+  const getStatusById = (id: number) => {
+    if (!id && id !== 0) return
+    const active = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21]
+    const pending = [0, 13]
+    const inProgress = [3, 4, 7, 8, 9, 14, 18, 19, 20, 21]
+    const completed = [1, 11, 15]
+
+    const status = pending.includes(id)
+      ? 'pending'
+      : inProgress.includes(id)
+        ? 'inProgress'
+        : completed.includes(id)
+          ? 'completed'
+          : 'cancelled'
+
+    const combinedStatus = active.includes(id)
+      ? 'active'
+      : completed.includes(id)
+        ? 'completed'
+        : 'cancelled'
+
+    return state.isCombinedTabs ? combinedStatus : status
+  }
+
+  const applyOffAction = async (changes: any) => {
+    if (state.canSaveChangesOffline === false) return false
+
+    const actions = [...new Set([...state.actions, changes])]
+
+    setState(state => ({ ...state, actions }))
+    await _setStoreData('offline_actions_array', actions)
+    return true
+  }
+
+  const registerOffOrder = async (order: any) => {
+    if (!order) return
+
+    const oldStatusString = getStatusById(order?.oldStatus)
+    const newStatusString = getStatusById(order?.status)
+
+    const orderStatuses: any = [oldStatusString]
+    oldStatusString !== newStatusString && orderStatuses.push(newStatusString)
+
+    const ordersStoraged: any = {}
+    for (const status of orderStatuses) {
+      ordersStoraged[status] = await _retrieveStoreData(`${status}_orders`)
+
+      if (ordersStoraged[status]) {
+        if (orderStatuses.length === 1) {
+          ordersStoraged[status] = [
+            ...ordersStoraged[status].filter((_order: any) => _order.id !== order.id),
+            order
+          ].sort((a: any, b: any) => b.id - a.id)
+        } else if (orderStatuses.length === 2) {
+          if (status === oldStatusString) {
+            ordersStoraged[status] = ordersStoraged[status]
+              .filter((_order: any) => _order.id !== order.id)
+              .sort((a: any, b: any) => b.id - a.id)
+          }
+          if (status === newStatusString) {
+            ordersStoraged[status] = [
+              ...ordersStoraged[status],
+              order
+            ].sort((a: any, b: any) => b.id - a.id)
+          }
+        }
+        await _setStoreData(`${status}_orders`, ordersStoraged[status]);
+      } else {
+        ordersStoraged[status] = [order]
+      }
+    }
+    if (Object.keys(ordersStoraged).length) {
+      setState(state => ({ ...state, orders: ordersStoraged }))
+    }
+  }
+
+  const syncChanges = async (changes: any) => {
+    const data = []
+    for (const action of changes) {
+      const eventFunction = eventsDictiorary[action.event];
+      if (eventFunction) {
+        const id = await eventFunction(action.data);
+        id && data.push(id)
+      }
+    }
+    data.length && events.emit('offline_order_updated', data)
+    await _removeStoreData('offline_actions_array');
+    setState(state => ({ ...state, actions: [] }));
+  }
+
+  const actionsFromStorage = async (isConnected: boolean) => {
+    setState(state => ({ ...state, isNetConnected: isConnected }))
+    const _storedActions = await _retrieveStoreData('offline_actions_array');
+    const storedActions: any = [...new Set(_storedActions)]
+
+    if (isConnected && storedActions?.length) {
+      syncChanges(storedActions)
+      return
+    }
+
+    storedActions?.length && setState(state => ({ ...state, actions: storedActions }));
+  }
+
+  useEffect(() => {
+    if (netInfo.isConnected === null || state.canSaveChangesOffline === false) return
+    actionsFromStorage(netInfo.isConnected)
+  }, [netInfo.isConnected])
+
+  const functions: any = {
+    applyOffAction,
+    registerOffOrder,
+    setState
+  }
+
+  const updateOrderStatus = async (offlineData: any) => {
+    try {
+      const { content: { result: order, error } } = await ordering
+        .setAccessToken(token)
+        .orders(offlineData?.orderId)
+        .save(offlineData?.body)
+
+      return error ? null : order?.id
+    } catch {
+      return null
+    }
+  }
+
+  const eventsDictiorary: any = {
+    evt_off_change_order_status: updateOrderStatus
+  }
+
+  return (
+    <OfflineActionsContext.Provider value={[{ ...state, isNetConnected: netInfo.isConnected }, functions]}>
+      {props.children}
+    </OfflineActionsContext.Provider>
+  );
+};
+
+export const useOfflineActions = () => {
+  const actionsManager = useContext(OfflineActionsContext)
+  return actionsManager || [defaultState, {}]
+}

package/src/index.tsx

@@ -94,6 +94,7 @@ import { StoreMethods } from './providers/StoreUtil';
 
 // contexts
 import { ThemeProvider, useTheme } from './context/Theme';
+import { OfflineActionsProvider, useOfflineActions } from './context/OfflineActions';
 
 // hooks
 import { DeviceOrientationMethods } from './hooks/DeviceOrientation';
@@ -190,6 +191,8 @@ export {
   // contexts
   ThemeProvider,
   useTheme,
+  OfflineActionsProvider,
+  useOfflineActions,
   // hooks
   DeviceOrientationMethods,
   //types

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

@@ -16,7 +16,7 @@ import { useLanguage } from 'ordering-components/native';
 import { Content, Timer, TimeField, Header, Comments, CommentsButtonGroup, TopActions } from './styles';
 import { OText, OButton, OTextarea, OIcon } from '../shared';
 import { AcceptOrRejectOrderParams } from '../../types';
-
+import { useOfflineActions } from '../../../../../src/context/OfflineActions';
 import { orderCommentList } from '../../../../../src/utils'
 
 export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
@@ -36,6 +36,8 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
   const [, t] = useLanguage();
   const theme = useTheme();
+  const [{ isNetConnected, canSaveChangesOffline }, { applyOffAction, registerOffOrder }] = useOfflineActions()
+
   const scrollViewRef = useRef<any>(null);
   const viewRef = useRef<any>(null);
   const timerRef = useRef() as React.MutableRefObject<TextInput>;
@@ -201,7 +203,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     }
   };
 
-  const handleAcceptOrReject = () => {
+  const handleAcceptOrReject = async () => {
     handleFixTime();
     let minsToSend = min;
 
@@ -278,7 +280,27 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     }
 
     bodyToSend.id = orderId;
-    handleUpdateOrder?.(bodyToSend.status, bodyToSend);
+
+    if (!isNetConnected && canSaveChangesOffline !== false) {
+      const body = Object.keys(bodyToSend || {}).length > 0
+        ? bodyToSend
+        : { status: bodyToSend.status }
+
+      const result = applyOffAction({
+        event: 'evt_off_change_order_status',
+        data: { orderId, body }
+      })
+
+      const orderUpdated = await handleUpdateOrder?.(
+        bodyToSend.status,
+        bodyToSend,
+        { dataToSave: { ...body, unsync: true } }
+      )
+      await registerOffOrder(orderUpdated)
+      closeModal && closeModal()
+    } else {
+      handleUpdateOrder?.(bodyToSend.status, bodyToSend);
+    }
   };
 
   useEffect(() => {

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

@@ -49,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     },
   });
 
-  return (
+  return !languagesState?.loading && languagesState?.languages?.length > 1 && (
     <Container style={{ backgroundColor: theme.colors.inputChat }}>
       {languagesState?.languages && (
         <CountryPicker

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

@@ -1,12 +1,10 @@
-//React & React Native
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-// Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import Clipboard from '@react-native-clipboard/clipboard';
+import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-//OrderingComponent
 import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
@@ -17,13 +15,12 @@ import {
   useConfig
 } from 'ordering-components/native';
 
-//Components
 import Alert from '../../providers/AlertProvider';
 import { AcceptOrRejectOrder } from '../AcceptOrRejectOrder';
 import { Chat } from '../Chat';
 import { FloatingButton } from '../FloatingButton';
 import { DriverMap } from '../DriverMap';
-import { OButton } from '../shared';
+import { OButton, OText } from '../shared';
 import { OModal } from '../shared';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
@@ -32,7 +29,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import { verifyDecimals, getProductPrice, getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
-//Styles
 import { OrderDetailsContainer, Pickup } from './styles';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
@@ -56,8 +52,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     forceUpdate,
     getPermissions,
     orderAssingId,
-    isGrantedPermissions,
+    isGrantedPermissions
   } = props;
+
   const [, { showToast }] = useToast();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
@@ -548,6 +545,28 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       {!((!order || Object.keys(order).length === 0) &&
         (props.order?.error?.length < 1 || !props.order?.error)) && order?.id && (
           <View style={{ flex: 1 }}>
+            {order?.unsync && (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'flex-start',
+                  alignItems: 'center'
+                }}
+              >
+                <MCIcon
+                  name={'cloud-sync'}
+                  color={'#444'}
+                  size={16}
+                />
+                <OText
+                  size={14}
+                  color={theme.colors.textGray}
+                  style={{ marginLeft: 5 }}
+                >
+                  {t('PENDING_SYNC_CHANGES', 'Pending sync changes')}
+                </OText>
+              </View>
+            )}
             <OrderHeaderComponent
               order={order}
               handleOpenMapView={handleOpenMapView}
@@ -612,16 +631,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 {showFloatButtonsAcceptOrReject[order?.status] && (
                   <FloatingButton
                     disabled={props.order?.loading}
+                    widthButton={isHideRejectButtons ? '100%' : '45%'}
+                    isHideRejectButtons={isHideRejectButtons}
                     btnText={t('REJECT', 'Reject')}
+                    firstColorCustom={theme.colors.red}
+                    firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))
+                      ? handleRejectLogisticOrder()
+                      : handleViewActionOrder('reject')
+                    }
                     isSecondaryBtn={false}
-                    secondButtonClick={() => hideTimer ? handleChangeOrderStatus && handleChangeOrderStatus(8) : (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
-                    firstButtonClick={() => order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)) ? handleRejectLogisticOrder() : handleViewActionOrder('reject')}
-                    secondBtnText={t('ACCEPT', 'Accept')}
                     secondButton={true}
-                    firstColorCustom={theme.colors.red}
+                    secondBtnText={t('ACCEPT', 'Accept')}
+                    secondButtonClick={() => hideTimer ? handleChangeOrderStatus && handleChangeOrderStatus(8) : (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
                     secondColorCustom={theme.colors.green}
-                    widthButton={isHideRejectButtons ? '100%' : '45%'}
-                    isHideRejectButtons={isHideRejectButtons}
                   />
                 )}
               </>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
-import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
+import { useLanguage, useUtils, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -13,7 +13,8 @@ import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrienta
 import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
 import { WebsocketStatus } from '../WebsocketStatus'
-import { _retrieveStoreData, _setStoreData } from '../../providers/StoreUtil'
+import { _retrieveStoreData, _setStoreData, _removeStoreData } from '../../providers/StoreUtil'
+import { useOfflineActions } from '../../../../../src/context/OfflineActions'
 
 import { OText, OButton, OModal, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
@@ -99,6 +100,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
   const [configState] = useConfig()
+  const [offlineActionsState] = useOfflineActions()
 
   const [orientationState] = useDeviceOrientation();
   const [openSearchModal, setOpenSearchModal] = useState(false)
@@ -406,10 +408,17 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     const manageStoragedOrders = async () => {
       setInternetLoading(true)
       let lastConnection = await _retrieveStoreData('last_date_connection');
+      let allowSaveChangesOffline = await _retrieveStoreData('allow_save_changes_offline');
       let _combineTabs = await _retrieveStoreData('combine_pending_and_progress_orders')
+
+      if (allowSaveChangesOffline === false) {
+        setInternetLoading(false)
+        return
+      }
+
       let ordersStoraged: any = {}
       for (const status of orderStatuses) {
-        ordersStoraged[status] = await _retrieveStoreData(`${status}_orders`) ?? []
+        ordersStoraged[status] = offlineActionsState.orders?.[status] ?? await _retrieveStoreData(`${status}_orders`) ?? []
       }
 
       if (_combineTabs || !_combineTabs && combineTabs) {
@@ -427,8 +436,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
       if (Object.values(ordersStoraged).every((key: any) => Array.isArray(key) && !key?.length)) {
         for (const status of orderStatuses) {
-          ordersStoraged[status] = ordersGroup[status]?.orders
-          _setStoreData(`${status}_orders`, ordersGroup[status]?.orders);
+          const currentOrders = offlineActionsState.orders?.[status] ?? ordersGroup[status]?.orders
+          ordersStoraged[status] = currentOrders
+          _setStoreData(`${status}_orders`, currentOrders);
         }
       }
 
@@ -449,13 +459,14 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     };
 
     if (isNetConnected) {
-      _setStoreData('last_date_connection', null);
-      _setStoreData('combine_pending_and_progress_orders', null);
+      _removeStoreData('last_date_connection');
+      _removeStoreData('combine_pending_and_progress_orders');
+      _removeStoreData('allow_save_changes_offline');
       orderStatuses.forEach((key: any) => _setStoreData(`${key}_orders`, null))
     } else if (isNetConnected === false) {
       manageStoragedOrders()
     }
-  }, [isNetConnected]);
+  }, [isNetConnected, JSON.stringify(offlineActionsState.orders)]);
 
   return (
     <>
@@ -609,7 +620,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               borderRadius: 8,
               paddingVertical: 3,
               backgroundColor: theme.colors.danger500,
-              marginBottom: 10
+              marginBottom: 10,
+              flexDirection: 'column'
             }}
           >
             <OText
@@ -617,6 +629,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             >
               {`${t('LAST_UPDATE', 'Last Update')}: ${lastDateConnection}`}
             </OText>
+            {offlineActionsState?.actions?.length > 0 && (
+              <OText
+                style={{ color: 'white', textAlign: 'center' }}
+              >
+                {t('NUMBER_CHANGES_PENDING_SYNC', '_value_ changes pending sync').replace('_value_', offlineActionsState?.actions?.length)}
+              </OText>
+            )}
           </View>
         )}
         <ScrollView
@@ -652,7 +671,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               />
             )}
           {!logisticOrders?.error?.length &&
-            logisticOrders?.orders?.length > 0 &&
+            logisticOrders && logisticOrders?.orders?.length > 0 &&
             currentTabSelected === 'logisticOrders' && (
               <PreviousOrders
                 orders={logisticOrders?.orders?.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
@@ -727,7 +746,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               (currentOrdersGroup?.error?.length ||
                 currentOrdersGroup?.orders?.length === 0)) ||
               (currentTabSelected === 'logisticOrders' &&
-                (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0 || !logisticOrders?.orders?.some(order => !order?.expired)))
+                (logisticOrders && logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0 || !logisticOrders?.orders?.some(order => !order?.expired)))
             ) &&
             (
               <NotFoundSource
@@ -1025,10 +1044,38 @@ export const Timer = () => {
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [configState] = useConfig()
+  const [, offlineMethods] = useOfflineActions()
+
   const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
+  const [combineTabs, setCombineTabs] = useState(null)
 
-  const getCombineTabsStoraged = async () => await _retrieveStoreData('combine_pending_and_progress_orders')
-  const combineTabs = typeof configState?.configs?.combine_pending_and_progress_orders === 'object' ? configState?.configs?.combine_pending_and_progress_orders?.value === '1' : getCombineTabsStoraged()
+  useEffect(() => {
+    const getCombineTabsStoraged = async () => {
+      try {
+        const storagedValue = await _retrieveStoreData('combine_pending_and_progress_orders');
+        const saveChangesOffline = await _retrieveStoreData('allow_save_changes_offline');
+
+        const _combineTabs = typeof configState?.configs?.combine_pending_and_progress_orders === 'object'
+          ? configState?.configs?.combine_pending_and_progress_orders?.value === '1'
+          : storagedValue
+
+        const canSaveChangesOffline = typeof configState?.configs?.allow_save_changes_offline === 'object'
+          ? (configState?.configs?.allow_save_changes_offline?.value ?? '')?.toString() === 'true'
+          : saveChangesOffline
+
+        offlineMethods.setState((state: any) => ({
+          ...state,
+          isCombinedTabs: _combineTabs,
+          canSaveChangesOffline
+        }))
+        setCombineTabs(_combineTabs)
+        return _combineTabs;
+      } catch {
+        return null
+      }
+    }
+    getCombineTabsStoraged()
+  }, [])
 
   const ordersProps = {
     ...props,

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

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Platform, PlatformIOSStatic, Pressable, StyleSheet, View } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import { useTheme } from 'styled-components/native';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
+import { useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
+import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import FastImage from 'react-native-fast-image'
 import moment from 'moment'
 
@@ -39,10 +40,12 @@ export const OrderItem = React.memo((props: any) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [events] = useEvent()
   const [configState] = useConfig()
-  const [{ parseDate, optimizeImage }] = useUtils();
+  const [{ parseDate }] = useUtils();
   const [orientationState] = useDeviceOrientation();
 
+  const [ordersOffUpdated, setOrdersOffUpdated] = useState<number[]>([])
   const [allowColumns, setAllowColumns] = useState({
     timer: configState?.configs?.order_deadlines_enabled?.value === '1',
     slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
@@ -136,6 +139,17 @@ export const OrderItem = React.memo((props: any) => {
     })
   }, [configState.loading])
 
+  useEffect(() => {
+    const handleOfflineOrder = (ids: any) => {
+      ids && setOrdersOffUpdated(ids)
+    }
+
+    events.on('offline_order_updated', handleOfflineOrder)
+    return () => {
+      events.off('offline_order_updated', handleOfflineOrder)
+    }
+  }, [])
+
   return (
     <Pressable
       disabled={order?.locked && isLogisticOrder}
@@ -164,11 +178,25 @@ export const OrderItem = React.memo((props: any) => {
               <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
             </OText>
           )}
-          {!!order.business?.name && (
-            <OText numberOfLines={1} style={styles.title}>
-              {order.business?.name}
-            </OText>
-          )}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between'
+            }}
+          >
+            {!!order.business?.name && (
+              <OText numberOfLines={1} style={styles.title}>
+                {order.business?.name}
+              </OText>
+            )}
+            {order?.unsync && !ordersOffUpdated?.includes(order?.id) && (
+              <MCIcon
+                name={'cloud-sync'}
+                color={'#444'}
+                size={18}
+              />
+            )}
+          </View>
           {!!order?.showNotification && (
             <NotificationIcon>
               <EntypoIcon

package/themes/business/src/layouts/SafeAreaContainer.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Dimensions,
   Platform,
   StatusBar,
-  StyleSheet,
   View,
 } from 'react-native';
-import styled from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 export const SafeAreaContainer = styled.SafeAreaView`
   flex: 1;
@@ -14,6 +14,10 @@ export const SafeAreaContainer = styled.SafeAreaView`
 `;
 
 export const SafeAreaContainerLayout = (props: any) => {
+  const theme = useTheme();
+  const netInfo = useNetInfo()
+
+  const [statusColor, setStatusColor] = useState<string | null>(null)
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
       ? 'Portrait'
@@ -28,22 +32,34 @@ export const SafeAreaContainerLayout = (props: any) => {
     }
   });
 
+  useEffect(() => {
+    if (netInfo.isConnected === false) {
+      setStatusColor(theme.colors.danger500)
+    }
+
+    if (netInfo.isConnected && statusColor) {
+      setStatusColor(theme.colors.success500)
+      setTimeout(() => {
+        setStatusColor(null)
+      }, 2000);
+    }
+  }, [netInfo.isConnected])
+
   return (
-    <>
-      <SafeAreaContainer>
-        <View
-          style={{
-            paddingHorizontal: 30,
-            paddingTop: 30,
-            paddingBottom: 0,
-            flex: 1,
-          }}>
-          <StatusBar
-            barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
-          />
-          {props.children}
-        </View>
-      </SafeAreaContainer>
-    </>
+    <SafeAreaContainer>
+      <View
+        style={{
+          paddingHorizontal: 30,
+          paddingTop: 30,
+          paddingBottom: 0,
+          flex: 1,
+        }}>
+        <StatusBar
+          barStyle={Platform.OS === 'ios' ? 'dark-content' : 'default'}
+          {...statusColor && ({ backgroundColor: statusColor })}
+        />
+        {props.children}
+      </View>
+    </SafeAreaContainer>
   );
 };

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

@@ -321,7 +321,7 @@ export interface OrdersOptionParams {
   handleChangeOrderStatus?: () => void;
   handleSendCustomerReview?: () => void;
   orderDetailsProps?: any;
-  isNetConnected?: boolean;
+  isNetConnected?: boolean | null;
   isDriverApp?: boolean;
   combineTabs?: boolean;
   setCombineTabsState?: any;
@@ -591,7 +591,7 @@ export interface AcceptOrRejectOrderParams {
   loading?: boolean;
   action: string;
   orderId?: number;
-  handleUpdateOrder?: (p1: any, p2: any) => {};
+  handleUpdateOrder?: (p1: any, p2: any, p3?: any) => {};
   notShowCustomerPhone?: boolean | undefined;
   actions?: any;
   titleAccept?: textTranslate;