ordering-ui-react-native 0.21.55 → 0.21.56-release

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

@@ -6,12 +6,14 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import RNRestart from 'react-native-restart'
 
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
 import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
 import { WebsocketStatus } from '../WebsocketStatus'
+import { _retrieveStoreData, _setStoreData } from '../../providers/StoreUtil'
 
 import { OText, OButton, OModal, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
@@ -50,8 +52,12 @@ const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
   const {
+    navigation,
     setCurrentFilters,
     tabs,
+    combineTabs,
+    setCombineTabsState,
+    isNetConnected,
     currentTabSelected,
     setCurrentTabSelected,
     ordersGroup,
@@ -68,7 +74,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     logisticOrders,
     loadLogisticOrders,
     isLogisticActivated,
-    isAlsea,
     handleChangeOrderStatus,
     handleSendCustomerReview
   } = props;
@@ -94,6 +99,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
   const [configState] = useConfig()
+
   const [orientationState] = useDeviceOrientation();
   const [openSearchModal, setOpenSearchModal] = useState(false)
   const [openSLASettingModal, setOpenSLASettingModal] = useState(false)
@@ -125,9 +131,12 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   ]
   const [selectedTabStatus, setSelectedTabStatus] = useState<any>(deliveryStatus)
   const [openedSelect, setOpenedSelect] = useState('')
+  const [lastDateConnection, setLastDateConnection] = useState(null)
+  const [internetLoading, setInternetLoading] = useState(!isNetConnected && isNetConnected !== null)
 
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+  const showTagsList = !props.isAlsea && !props.isDriverApp && currentTabSelected !== 'logisticOrders'
 
   const preorderTypeList = [
     { key: null, name: t('SLA', 'SLA\'s') },
@@ -378,24 +387,93 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }
 
   useEffect(() => {
-    scrollRefTab.current?.scrollTo({ animated: true });
-    scrollListRef.current?.scrollTo({ animated: true });
-    scrollRef.current?.scrollTo({ y: 0, animated: true });
+    scrollRefTab.current?.scrollTo();
+    scrollListRef.current?.scrollTo();
+    scrollRef.current?.scrollTo();
     setTags({ values: [] })
   }, [currentTabSelected])
 
+	useEffect(() => {
+		const unsubcribe = navigation.addListener('focus', () => {
+      currentTabSelected === 'logisticOrders' && loadLogisticOrders && loadLogisticOrders()
+		})
+		return unsubcribe
+	}, [navigation, loadLogisticOrders])
+
+  useEffect(() => {
+    const orderStatuses = ['active', 'pending', 'inProgress', 'completed', 'cancelled']
+
+    const manageStoragedOrders = async () => {
+      setInternetLoading(true)
+      let lastConnection = await _retrieveStoreData('last_date_connection');
+      let _combineTabs = await _retrieveStoreData('combine_pending_and_progress_orders')
+      let ordersStoraged: any = {}
+      for (const status of orderStatuses) {
+        ordersStoraged[status] = await _retrieveStoreData(`${status}_orders`) ?? []
+      }
+
+      if (_combineTabs || !_combineTabs && combineTabs) {
+        _combineTabs && setCombineTabsState(_combineTabs)
+        _setStoreData('combine_pending_and_progress_orders', _combineTabs || combineTabs);
+      }
+
+      if (!lastConnection) {
+        const formattedDate = parseDate(new Date())
+        lastConnection = formattedDate
+        _setStoreData('last_date_connection', formattedDate);
+      }
+
+      lastConnection && setLastDateConnection(lastConnection)
+
+      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);
+        }
+      }
+
+      if (Object.values(ordersStoraged).some((key: any) => Array.isArray(key) && key?.length)) {
+        let newOrderGroup = {
+          ...ordersGroup
+        }
+        for (const status of orderStatuses) {
+          newOrderGroup[status] = {
+            ...ordersGroup[status],
+            error: null,
+            orders: ordersStoraged[status]
+          }
+        }
+        setOrdersGroup(newOrderGroup)
+      }
+      setInternetLoading(false)
+    };
+
+    if (isNetConnected) {
+      _setStoreData('last_date_connection', null);
+      _setStoreData('combine_pending_and_progress_orders', null);
+      orderStatuses.forEach((key: any) => _setStoreData(`${key}_orders`, null))
+    } else if (isNetConnected === false) {
+      manageStoragedOrders()
+    }
+  }, [isNetConnected]);
+
   return (
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
         <IconWrapper>
-          <FeatherIcon
-            name='refresh-cw'
-            color={theme.colors.backgroundDark}
-            size={24}
-            onPress={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
-            style={{ marginRight: 20 }}
-          />
+          <View style={{ marginRight: 10 }}>
+            <WebsocketStatus />
+          </View>
+          {isNetConnected && (
+            <FeatherIcon
+              name='refresh-cw'
+              color={theme.colors.backgroundDark}
+              size={24}
+              onPress={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
+              style={{ marginRight: 20 }}
+            />
+          )}
           <FontistoIcon
             name='search'
             color={theme.colors.backgroundDark}
@@ -404,58 +482,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      <WebsocketStatus />
-      {configState?.configs?.order_deadlines_enabled?.value === '1' && (
-        <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
-            <OButton
-              text={t('SLA_SETTING', 'SLA’s Settings')}
-              textStyle={{ color: theme.colors.backArrow }}
-              imgRightSrc={null}
-              style={{
-                backgroundColor: theme.colors.inputChat,
-                borderRadius: 7.6,
-                zIndex: 10,
-                borderWidth: 0,
-                minHeight: 40
-              }}
-              onClick={onClickSetting}
-            />
-          </View>
-          <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
-            <SelectDropdown
-              defaultButtonText={t('SLA', 'SLA\'s')}
-              data={preorderTypeList}
-              onSelect={(selectedItem, index) => {
-                onFiltered && onFiltered({ ...search, timeStatus: selectedItem?.key })
-              }}
-              buttonTextAfterSelection={(selectedItem, index) => {
-                return selectedItem.name
-              }}
-              rowTextForSelection={(item, index) => {
-                return item.key
-              }}
-              buttonStyle={styles.selectOption}
-              buttonTextStyle={styles.buttonTextStyle}
-              renderDropdownIcon={isOpened => {
-                return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
-              }}
-              dropdownStyle={styles.dropdownStyle}
-              dropdownOverlayColor='transparent'
-              rowStyle={styles.rowStyle}
-              renderCustomizedRowChild={(item, index) => {
-                return (
-                  <SlaOption>
-                    {index !== 0 && <OrderStatus timeState={item?.key} />}
-                    <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
-                  </SlaOption>
-                );
-              }}
-            />
-          </View>
-        </View>
-      )}
       <FiltersTab>
         <ScrollView
           ref={scrollRefTab}
@@ -465,7 +491,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer>
-            {(isLogisticActivated && !isBusinessApp) && (
+            {(isLogisticActivated && !isBusinessApp && !combineTabs) && (
               <Pressable
                 style={styles.pressable}
                 onPress={() => setCurrentTabSelected('logisticOrders')}>
@@ -510,7 +536,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </FiltersTab>
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
-        {currentTabSelected !== 'logisticOrders' && !isAlsea && (
+        {showTagsList && (
           <View
             style={{
               display: 'flex',
@@ -577,6 +603,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             </ScrollView>
           </View>
         )}
+        {isNetConnected === false && lastDateConnection && (
+          <View
+            style={{
+              borderRadius: 8,
+              paddingVertical: 3,
+              backgroundColor: theme.colors.danger500,
+              marginBottom: 10
+            }}
+          >
+            <OText
+              style={{ color: 'white', textAlign: 'center' }}
+            >
+              {`${t('LAST_UPDATE', 'Last Update')}: ${lastDateConnection}`}
+            </OText>
+          </View>
+        )}
         <ScrollView
           ref={scrollListRef}
           showsVerticalScrollIndicator={false}
@@ -585,7 +627,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           refreshControl={
             <RefreshControl
               refreshing={refreshing}
-              onRefresh={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
+              onRefresh={() => { isNetConnected && (currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })) }}
             />
           }
         >
@@ -622,42 +664,48 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               />
             )
           }
-          {((currentOrdersGroup?.loading ||
-            currentOrdersGroup?.pagination?.total === null) ||
-            (logisticOrders?.loading)) &&
+          {(
             (
-              <>
-                <View>
-                  {[...Array(5)].map((_, i) => (
-                    <Placeholder key={i} Animation={Fade}>
-                      <View
-                        style={{
-                          width: '100%',
-                          flexDirection: 'row',
-                          marginBottom: 10,
-                        }}>
-                        <PlaceholderLine
-                          width={IS_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>
+              (
+                currentOrdersGroup?.loading ||
+                (currentOrdersGroup?.pagination?.total === null && isNetConnected) ||
+                logisticOrders?.loading
+              ) &&
+              !currentOrdersGroup?.error?.length &&
+              !currentOrdersGroup?.orders?.length
+            ) || internetLoading
+          ) && (
+            <View>
+              {[...Array(5)].map((_, i) => (
+                <Placeholder key={i} Animation={Fade}>
+                  <View
+                    style={{
+                      width: '100%',
+                      flexDirection: 'row',
+                      marginBottom: 10,
+                    }}>
+                    <PlaceholderLine
+                      width={IS_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>
-              </>
-            )}
+                  </View>
+                </Placeholder>
+              ))}
+            </View>
+          )}
 
-          {!currentOrdersGroup?.error?.length &&
+          {isNetConnected &&
+            !currentOrdersGroup?.error?.length &&
             !currentOrdersGroup?.loading &&
             currentOrdersGroup?.pagination?.totalPages &&
             currentOrdersGroup?.pagination?.currentPage < currentOrdersGroup?.pagination?.totalPages &&
@@ -674,7 +722,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               />
             )}
 
-          {((!currentOrdersGroup?.loading &&
+          {!internetLoading &&
+            ((!currentOrdersGroup?.loading &&
             (currentOrdersGroup?.error?.length ||
               currentOrdersGroup?.orders?.length === 0)) ||
             (currentTabSelected === 'logisticOrders' &&
@@ -683,6 +732,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             (
               <NotFoundSource
                 content={
+                  !isNetConnected ? t('NETWORK_ERROR', 'Network Error') :
                   ((currentTabSelected !== 'logisticOrders' && !currentOrdersGroup?.error?.length) ||
                     (currentTabSelected === 'logisticOrders' && (!logisticOrders?.error?.length || (logisticOrders?.orders?.length > 0 && !logisticOrders?.orders?.some(order => !order?.expired)))))
                     ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
@@ -693,6 +743,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 }
                 image={theme.images.general.notFound}
                 conditioned={false}
+                btnTitle={!isNetConnected && t('REFRESH', 'Refresh')}
+                onClickButton={!isNetConnected && (() => RNRestart.Restart())}
               />
             )}
         </ScrollView>
@@ -713,6 +765,41 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+                {configState?.configs?.order_deadlines_enabled?.value === '1' && (
+                  <InputContainer style={{ marginBottom: 24 }}>
+                    <SelectDropdown
+                      defaultButtonText={search?.timeStatus
+                        ? preorderTypeList.find(type => type.key === search?.timeStatus)?.name
+                        : t('SLA', 'SLA\'s')}
+                      data={preorderTypeList}
+                      onSelect={(selectedItem, index) => {
+                        setSearch({ ...search, timeStatus: selectedItem?.key })
+                      }}
+                      buttonTextAfterSelection={(selectedItem, index) => {
+                        return selectedItem.name
+                      }}
+                      rowTextForSelection={(item, index) => {
+                        return item.key
+                      }}
+                      buttonStyle={styles.selectOption}
+                      buttonTextStyle={styles.buttonTextStyle}
+                      renderDropdownIcon={isOpened => {
+                        return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+                      }}
+                      dropdownStyle={styles.dropdownStyle}
+                      dropdownOverlayColor='transparent'
+                      rowStyle={styles.rowStyle}
+                      renderCustomizedRowChild={(item, index) => {
+                        return (
+                          <SlaOption>
+                            {index !== 0 && <OrderStatus timeState={item?.key} />}
+                            <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
+                          </SlaOption>
+                        );
+                      }}
+                    />
+                  </InputContainer>
+                )}
                 <InputContainer>
                   <OInput
                     value={search.id}
@@ -939,12 +1026,18 @@ export const Timer = () => {
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [configState] = useConfig()
   const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
+
+  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()
+
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
     useDefualtSessionManager: true,
     asDashboard: true,
+    combineTabs,
     isIos: Platform.OS === 'ios',
     orderStatus: [
       { key: 0, text: t('PENDING', 'Pending') },
@@ -1026,32 +1119,52 @@ export const OrdersOption = (props: OrdersOptionParams) => {
         text: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
       }
     ],
-    tabs: [
+    tabs: combineTabs ? [
       {
         key: 0,
-        text: t('PENDING', 'Pending'),
-        tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
-        title: 'pending'
+        text: t('ACTIVE', 'Active'),
+        tags: props?.orderGroupStatusCustom?.active ?? [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
+        title: 'active',
       },
       {
         key: 1,
-        text: t('IN_PROGRESS', 'In Progress'),
-        tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23],
-        title: 'inProgress',
-      },
-      {
-        key: 2,
         text: t('COMPLETED', 'Completed'),
         tags: props?.orderGroupStatusCustom?.completed ?? [1, 11, 15],
         title: 'completed',
       },
       {
-        key: 3,
+        key: 2,
         text: t('CANCELLED', 'Cancelled'),
         tags: props?.orderGroupStatusCustom?.cancelled ?? [2, 5, 6, 10, 12, 16, 17],
         title: 'cancelled',
       },
-    ]
+    ] :
+      [
+        {
+          key: 0,
+          text: t('PENDING', 'Pending'),
+          tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
+          title: 'pending'
+        },
+        {
+          key: 1,
+          text: t('IN_PROGRESS', 'In Progress'),
+          tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23],
+          title: 'inProgress',
+        },
+        {
+          key: 2,
+          text: t('COMPLETED', 'Completed'),
+          tags: props?.orderGroupStatusCustom?.completed ?? [1, 11, 15],
+          title: 'completed',
+        },
+        {
+          key: 3,
+          text: t('CANCELLED', 'Cancelled'),
+          tags: props?.orderGroupStatusCustom?.cancelled ?? [2, 5, 6, 10, 12, 16, 17],
+          title: 'cancelled',
+        },
+      ]
   };
 
   return (<>
@@ -1062,3 +1175,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     )}
   </>);
 };
+
+OrdersOption.defaultProps = {
+  isNetConnected: true
+}

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

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components/native';
 import { Wrapper } from './styles';
 import { OText, OIcon } from '../shared';
 import { PhoneInputParams } from '../../types';
-import { transformCountryCode } from '../../utils';
+import { transformCountryCode, findExitingCode } from '../../utils';
 
 export const PhoneInputNumber = (props: PhoneInputParams) => {
   const {
@@ -97,10 +97,13 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
         containerStyle={{ width: '100%' }}
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
-        defaultCode={
-          defaultCode
-            ? transformCountryCode(defaultCode)
-            : configs?.default_country_code?.value
+        defaultCode={defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: findExitingCode(defaultCode)
+					: !isNaN((configs?.default_country_code?.value || '')?.replace(/\+/g, ''))
+             ? transformCountryCode((configs?.default_country_code?.value || '')?.replace(/\+/g, ''))
+             : findExitingCode(configs?.default_country_code?.value?.toUpperCase())
         }
         onChangeFormattedText={(text: string) => handleChangeNumber(text)}
         countryPickerProps={{

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, PlatformIOSStatic, StyleSheet, TouchableOpacity, View } from 'react-native';
+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';
@@ -47,6 +47,7 @@ export const OrderItem = React.memo((props: any) => {
     timer: configState?.configs?.order_deadlines_enabled?.value === '1',
     slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
   })
+  const showExternalId = configState?.configs?.change_order_id?.value === '1'
 
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
   const platformIOS = Platform as PlatformIOSStatic
@@ -76,7 +77,6 @@ export const OrderItem = React.memo((props: any) => {
       marginLeft: 3,
     },
     title: {
-      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
@@ -84,7 +84,6 @@ export const OrderItem = React.memo((props: any) => {
       color: theme.colors.textGray,
     },
     date: {
-      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -104,7 +103,7 @@ export const OrderItem = React.memo((props: any) => {
     const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
     const _delivery = order?.delivery_datetime_utc
       ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })
-      : parseDate(cdtToutc)
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })
     const _eta = order?.eta_time
     const diffTimeAsSeconds = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'seconds')
     return Math.ceil(diffTimeAsSeconds / 60)
@@ -120,7 +119,7 @@ export const OrderItem = React.memo((props: any) => {
     let restHours: string | number = Math.floor(restMinOfTargetedMin / 60)
     let restMins: string | number = restMinOfTargetedMin - 60 * restHours
     // make standard time format
-    day = day === 0 ? '' : day + 'day  '
+    day = day === 0 ? '' : `${day + ' ' + t('DAY', 'day') + ' '}`
     restHours = restHours < 10 ? '0' + restHours : restHours
     restMins = restMins < 10 ? '0' + restMins : restMins
 
@@ -138,8 +137,7 @@ export const OrderItem = React.memo((props: any) => {
   }, [configState.loading])
 
   return (
-    <TouchableOpacity
-      activeOpacity={1}
+    <Pressable
       disabled={order?.locked && isLogisticOrder}
       style={styles.cardButton}
       onPress={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
@@ -153,10 +151,10 @@ export const OrderItem = React.memo((props: any) => {
         <Logo style={styles.logo}>
           <FastImage
             style={styles.icon}
-            source={order.business?.logo ? {
-              uri: optimizeImage(order.business?.logo, 'h_100,c_limit'),
+            source={order.business?.logo?.includes('https') ? {
+              uri: order.business?.logo,
               priority: FastImage.priority.normal,
-            } : theme?.images?.dummies?.businessLogo}
+            } : order.business?.logo ?? theme?.images?.dummies?.businessLogo}
             resizeMode={FastImage.resizeMode.cover}
           />
         </Logo>
@@ -180,24 +178,36 @@ export const OrderItem = React.memo((props: any) => {
               />
             </NotificationIcon>
           )}
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-            <OText
+          <View>
+            {!order?.order_group_id && showExternalId && !order?.order_group && (
+              <OText
+                style={styles.date}
+                color={theme.colors.unselectText}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+              >
+                {`${order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}` + ' · ' + `${order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })
+                  }`}
+              </OText>
+            )}
+            {!showExternalId && (<OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {(!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {((!!order?.order_group_id && order?.order_group && isLogisticOrder
                 ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
-                : (t('NO', 'Order No.') + order.id)
-              ) + ' · '}
-              {order?.delivery_datetime_utc
+                : (t('NO', 'Order No.') + order?.id)
+              ) + ' · ' + `${order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}
+                : parseDate(order?.delivery_datetime, { utc: false })}`)}
             </OText>
+            )}
             {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
               <>
-                <OText> · </OText>
                 <OText
                   style={styles.date}
                   color={
@@ -237,6 +247,6 @@ export const OrderItem = React.memo((props: any) => {
           )}
         </Information>
       </Card>
-    </TouchableOpacity>
+    </Pressable>
   )
 }, OrderItemPropsAreEqual)