ordering-ui-react-native 0.19.0-testing → 0.19.1-release

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

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -53,9 +54,16 @@ export const OrderContentComponent = (props: OrderContent) => {
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
+  const [showCustomFields, setShowCustomFields] = useState<boolean>(false);
 
-  const [isReadMore, setIsReadMore] = useState(false)
-  const [lengthMore, setLengthMore] = useState(false)
+  const [isReadMore, setIsReadMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
+  const [lengthMore, setLengthMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
@@ -105,11 +113,19 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const containsOnlyNumbers = (str: string) => {
+    str = str?.replace('+', '');
     return /^\d+$/.test(str);
   }
 
-  const onTextLayout = useCallback((e: any) => {
-    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  const onTextLayout = useCallback((e: any, item: string) => {
+    if (item === 'customerAddress') {
+      const customerAddressMore = (e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2
+      setLengthMore(prev => ({ ...prev, customerAddress: customerAddressMore }))
+    }
+    if (item === 'businessAddressNotes') {
+      const businessAddressNotesMore = (e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3
+      setLengthMore(prev => ({ ...prev, businessAddressNotes: businessAddressNotesMore }))
+    }
   }, []);
 
   return (
@@ -120,27 +136,36 @@ export const OrderContentComponent = (props: OrderContent) => {
 
       {order?.metafields?.length > 0 && (
         <OrderBusiness>
-          <OText style={{ marginBottom: 5 }} size={16} weight="600">
-            {t('CUSTOM_FIELDS', 'Custom fields')}
-          </OText>
-
-          {order.metafields.map((field: any) => (
-            <View
-              key={field.id}
-              style={{
-                width: '100%',
-                flexDirection: 'row',
-                marginBottom: 5
-              }}
-            >
-              <OText style={{ width: '50%' }}>
-                {field.key}
-              </OText>
-              <OText style={{ width: '45%', textAlign: 'right' }}>
-                {field.value}
-              </OText>
-            </View>
-          ))}
+          <TouchableOpacity onPress={() => setShowCustomFields((prev: boolean) => !prev)} style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <OText style={{ marginBottom: 5 }} size={16} weight="600">
+              {t('CUSTOM_FIELDS', 'Custom fields')}
+            </OText>
+            <AntDesignIcon
+              name={showCustomFields ? 'up' : 'down'}
+              size={14}
+            />
+          </TouchableOpacity>
+          {showCustomFields && (
+            <>
+              {order.metafields.map((field: any) => (
+                <View
+                  key={field.id}
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    marginBottom: 5
+                  }}
+                >
+                  <OText style={{ width: '50%' }}>
+                    {field.key}
+                  </OText>
+                  <OText style={{ width: '45%', textAlign: 'right' }}>
+                    {field.value}
+                  </OText>
+                </View>
+              ))}
+            </>
+          )}
         </OrderBusiness>
       )}
 
@@ -170,7 +195,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 <OLink
                   PressStyle={styles.linkWithIcons}
                   url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
-                  shorcut={`${order?.business?.cellphone}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.cellphone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -180,8 +205,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
-                  shorcut={order?.business?.phone}
+                  url={`tel:${containsOnlyNumbers(order?.business?.phone) ? order?.business?.phone : 'invalid'}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.phone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.phone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -209,17 +234,28 @@ export const OrderContentComponent = (props: OrderContent) => {
           </OText>
         )}
         {!!order?.business?.address_notes && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address_notes}`,
-                android: `geo:0,0?q=${order?.business?.address_notes}`,
-              })}
-              shorcut={order?.business?.address_notes}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                })}
+                shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
+                onTextLayout={e => onTextLayout(e, 'businessAddressNotes')}
+                numberOfLines={isReadMore.businessAddressNotes ? 20 : 3}
+              />
+            </View>
+            {lengthMore.businessAddressNotes && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, businessAddressNotes: !isReadMore.businessAddressNotes })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.businessAddressNotes ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
       </OrderBusiness>
 
@@ -301,7 +337,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <OLink
               PressStyle={styles.linkWithIcons}
               url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.cellphone) ? order?.customer?.cellphone : 'invalid'}`}
-              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -311,8 +347,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
-              shorcut={order?.customer?.phone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.phone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -327,15 +363,17 @@ export const OrderContentComponent = (props: OrderContent) => {
                   ios: `maps:0,0?q=${order?.customer?.address}`,
                   android: `geo:0,0?q=${order?.customer?.address}`,
                 })}
-                onTextLayout={onTextLayout}
-                numberOfLines={isReadMore ? 20 : 2}
+                onTextLayout={e => onTextLayout(e, 'customerAddress')}
+                numberOfLines={isReadMore.customerAddress ? 20 : 2}
                 shorcut={order?.customer?.address}
                 TextStyle={styles.textLink}
               />
             </View>
-            {lengthMore && (
-              <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)}>
-                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+            {lengthMore.customerAddress && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, customerAddress: !isReadMore.customerAddress })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.customerAddress ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
               </TouchableOpacity>
             )}
           </>
@@ -550,15 +588,14 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           ))
         }
-        {order?.summary?.driver_tip > 0 && (
+        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && (
           <Table>
             <OText mBottom={4}>
               {t('DRIVER_TIP', 'Driver tip')}
-              {order?.summary?.driver_tip > 0 &&
-                parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+              {order?.driver_tip > 0 && parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                 !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                 (
-                  `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
+                  `(${verifyDecimals(order?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
             <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>

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

@@ -263,6 +263,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
+        {order?.external_id && (
+          <OText size={13}>
+            <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
+            {order?.external_id}
+          </OText>
+        )}
         {!order?.isLogistic && !!order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <>
             <OText size={13}>
@@ -275,12 +281,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {order?.payment_events?.length > 0 && (
-              <View>
+            <OText>
+              <OText size={13} weight='bold'>
+                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+              </OText>
+              {order?.payment_events?.length > 0 ? (
                 <OText size={13}>
-                  <OText size={13} weight='bold'>
-                    {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
-                  </OText>
                   {order?.payment_events?.map((event: any, idx: number) => {
                     return event?.wallet_event
                       ? idx < order?.payment_events?.length - 1
@@ -291,7 +297,21 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
-              </View>
+              ) : (
+                <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
+              )}
+            </OText>
+            {order?.spot_number && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>
+                  {`${order?.delivery_type === 3
+                    ? t('EATIN_SPOT_NUMBER', 'Table number')
+                    : order?.delivery_type === 5
+                      ? t('DRIVE_THRU_SPOT_NUMBER', 'Drive thru lane')
+                      : t('CURBSIDE_SPOT_NUMBER', 'Spot number')}: `}
+                </OText>
+                {order.spot_number}
+              </OText>
             )}
           </>
         )}

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

@@ -10,6 +10,7 @@ import {
     useLanguage,
     OrderDetails as OrderDetailsConTableoller,
     useSession,
+    useConfig
 } from 'ordering-components/native';
 
 //Components
@@ -34,6 +35,8 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     const theme = useTheme();
     const [, t] = useLanguage();
     const [session] = useSession();
+    const [{ configs }] = useConfig();
+
     const [alertState, setAlertState] = useState<{
         open: boolean;
         content: Array<string>;
@@ -41,6 +44,7 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     }>({ open: false, content: [], key: null });
 
     const logisticOrderStatus = [4, 6, 7]
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
 
     const showFloatButtonsAcceptOrReject: any = {
         0: true,
@@ -166,7 +170,8 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
                                         secondButton={true}
                                         firstColorCustom={theme.colors.red}
                                         secondColorCustom={theme.colors.green}
-                                        widthButton={'45%'}
+                                        widthButton={isHideRejectButtons ? '100%': '45%'}
+                                        isHideRejectButtons={isHideRejectButtons}
                                     />
                                 )}
                             </>

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

@@ -80,6 +80,9 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
     verifyDecimals(order?.summary?.driver_tip, parseNumber);
 
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''
+    }`?.replace('  ', ' ')?.trim() ?? ''
+
   const orderSummary = () => {
     return `
     <div>
@@ -100,9 +103,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
-        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name
-      } ${order?.customer?.middle_name} ${order?.customer?.lastname} ${order?.customer?.second_lastname
-      }
+        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${customerName}
         </br>
         ${t('EMAIL', 'Email')}: ${order?.customer?.email}
         </br>
@@ -373,8 +374,8 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
 
             <OText style={{ marginBottom: 5 }}>
               {`${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
-                  ? parseDate(order?.delivery_datetime_utc)
-                  : parseDate(order?.delivery_datetime, { utc: false })
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })
                 }`}
             </OText>
 
@@ -400,9 +401,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
               adjustsFontSizeToFit
               ellipsizeMode="tail"
               color={theme.colors.textGray}>
-              {`${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name} ${order?.customer?.middle_name
-                } ${order?.customer?.lastname} ${order?.customer?.second_lastname
-                }`}
+              {`${t('FULL_NAME', 'Full Name')}: ${customerName}`}
             </OText>
 
             <OText

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

@@ -40,6 +40,7 @@ import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
 import { OrderDetailsBusiness } from '../OrderDetails/Business';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
@@ -314,7 +315,11 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
       </View>
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          <View style={{ flex: 1 }}>
+            <WebsocketStatus />
+          </View>
+          <View style={{ width: 10, height: '100%' }} />
+          <View style={{ flex: 1 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -330,7 +335,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
             />
           </View>
           <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -209,7 +209,7 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

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 { 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 { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
+import { OText, OButton, OModal, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import {
   FiltersTab,
@@ -73,6 +75,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
   const defaultSearchList = {
     id: '',
+    external_id: '',
     state: '',
     city: '',
     business: '',
@@ -92,35 +95,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [{ parseDate }] = useUtils()
   const [configState] = useConfig()
   const [orientationState] = useDeviceOrientation();
-  const [, { showToast }] = useToast();
   const [openSearchModal, setOpenSearchModal] = useState(false)
   const [openSLASettingModal, setOpenSLASettingModal] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
-  const [selectedTabStatus, setSelectedTabStatus] = useState<any>([])
-  const [hour, setHour] = useState(0)
-  const [minute, setMinute] = useState(0)
-  const [openedSelect, setOpenedSelect] = useState('')
-  const WIDTH_SCREEN = orientationState?.dimensions?.width
-  const HEIGHT_SCREEN = orientationState?.dimensions?.height
-  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
-
-  const preorderTypeList = [
-    { key: null, name: t('SLA', 'SLA\'s') },
-    { key: 'in_time', name: t('OK', 'Ok') },
-    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
-    { key: 'delayed', name: t('DELAYED', 'Delayed') }
-  ]
-
-  const defaultOrderTypes = [
-    { key: 1, name: t('DELIVERY', 'Delivery') },
-    { key: 2, name: t('PICKUP', 'Pickup') },
-    { key: 3, name: t('EAT_IN', 'Eat in') },
-    { key: 4, name: t('CURBSIDE', 'Curbside') },
-    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
-  ]
-
   const deliveryStatus = [
     {
       key: t('OK', 'Ok'),
@@ -144,6 +123,26 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       backColor: '#E63757'
     }
   ]
+  const [selectedTabStatus, setSelectedTabStatus] = useState<any>(deliveryStatus)
+  const [openedSelect, setOpenedSelect] = useState('')
+
+  const HEIGHT_SCREEN = orientationState?.dimensions?.height
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+
+  const preorderTypeList = [
+    { key: null, name: t('SLA', 'SLA\'s') },
+    { key: 'in_time', name: t('OK', 'Ok') },
+    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
+    { key: 'delayed', name: t('DELAYED', 'Delayed') }
+  ]
+
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
 
   const styles = StyleSheet.create({
     header: {
@@ -385,10 +384,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setTags({ values: [] })
   }, [currentTabSelected])
 
-  useEffect(() => {
-    setSelectedTabStatus(deliveryStatus)
-  }, [])
-
   return (
     <>
       <View style={styles.header}>
@@ -409,6 +404,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
+      <WebsocketStatus />
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
           <View style={{ flex: 0.5 }}>
@@ -610,6 +606,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 orderTitle={props.orderDetailsProps?.orderTitle}
                 handleChangeOrderStatus={handleChangeOrderStatus}
                 handleSendCustomerReview={handleSendCustomerReview}
+                isBusinessApp={isBusinessApp}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -620,6 +617,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
+                isBusinessApp={isBusinessApp}
                 isLogisticOrder
               />
             )
@@ -730,6 +728,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                     onPress={() => setSearch({ ...search, id: '' })}
                   />
                 </InputContainer>
+                <InputContainer>
+                  <OInput
+                    value={search.external_id}
+                    onChange={(value: any) => setSearch({ ...search, external_id: value })}
+                    style={styles.inputStyle}
+                    placeholder={t('EXTERNAL_ID', 'External id')}
+                    autoCorrect={false}
+                  />
+                  <AntDesignIcon
+                    name='close'
+                    size={20}
+                    style={{ position: 'absolute', right: 12, top: 13 }}
+                    onPress={() => setSearch({ ...search, external_id: '' })}
+                  />
+                </InputContainer>
                 <OrdersOptionDate
                   {...props}
                   search={search}
@@ -919,15 +932,13 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
-  const [configState] = useConfig()
-  const theme = useTheme()
   const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,

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}
+                    />
+                )}
+        </>
+    )
+}