ordering-ui-react-native 0.21.21 → 0.21.22-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 { 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,
@@ -48,6 +50,7 @@ const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
   const {
+    navigation,
     setCurrentFilters,
     tabs,
     currentTabSelected,
@@ -73,6 +76,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
   const defaultSearchList = {
     id: '',
+    external_id: '',
     state: '',
     city: '',
     business: '',
@@ -92,35 +96,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 +124,27 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       backColor: '#E63757'
     }
   ]
+  const combineTabs = configState?.configs?.combine_pending_and_progress_orders?.value === '1'
+  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,15 +386,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setTags({ values: [] })
   }, [currentTabSelected])
 
-  useEffect(() => {
-    setSelectedTabStatus(deliveryStatus)
-  }, [])
+	useEffect(() => {
+		const unsubcribe = navigation.addListener('focus', () => {
+      currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })
+		})
+		return unsubcribe
+	}, [navigation, loadOrders, loadLogisticOrders])
 
   return (
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
         <IconWrapper>
+          <View style={{ marginRight: 10 }}>
+            <WebsocketStatus />
+          </View>
           <FeatherIcon
             name='refresh-cw'
             color={theme.colors.backgroundDark}
@@ -411,7 +418,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          {/* <View style={{ flex: 0.5 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -425,9 +432,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               }}
               onClick={onClickSetting}
             />
-          </View>
-          <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          </View> */}
+          {/* <View style={{ width: 10, height: '100%' }} /> */}
+          {/* <View style={{ flex: 0.5, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}
@@ -457,7 +464,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 );
               }}
             />
-          </View>
+          </View> */}
         </View>
       )}
       <FiltersTab>
@@ -469,7 +476,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer>
-            {(isLogisticActivated && !isBusinessApp) && (
+            {(isLogisticActivated && !isBusinessApp && !combineTabs) && (
               <Pressable
                 style={styles.pressable}
                 onPress={() => setCurrentTabSelected('logisticOrders')}>
@@ -610,6 +617,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 orderTitle={props.orderDetailsProps?.orderTitle}
                 handleChangeOrderStatus={handleChangeOrderStatus}
                 handleSendCustomerReview={handleSendCustomerReview}
+                isBusinessApp={isBusinessApp}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -620,6 +628,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
+                isBusinessApp={isBusinessApp}
                 isLogisticOrder
               />
             )
@@ -715,6 +724,39 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+                <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}
@@ -730,6 +772,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,7 +976,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>
   )
 }
@@ -927,8 +984,8 @@ export const Timer = () => {
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [configState] = useConfig()
-  const theme = useTheme()
   const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
+  const combineTabs = configState?.configs?.combine_pending_and_progress_orders?.value === '1'
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
@@ -1015,32 +1072,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 (<>

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,7 @@ export const OrderItem = React.memo((props: any) => {
       marginLeft: 3,
     },
     title: {
-      marginBottom: 6,
+      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
@@ -84,7 +85,7 @@ export const OrderItem = React.memo((props: any) => {
       color: theme.colors.textGray,
     },
     date: {
-      marginBottom: 6,
+      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -100,12 +101,13 @@ export const OrderItem = React.memo((props: any) => {
   });
 
   const getDelayMinutes = (order: any) => {
-    const cdtToutc = moment(order?.delivery_datetime).utc().format('YYYY-MM-DD HH:mm:ss')
+    const offset = 300
+    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)
-      : parseDate(cdtToutc)
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })
     const _eta = order?.eta_time
-    const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    const diffTimeAsSeconds = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'seconds')
     return Math.ceil(diffTimeAsSeconds / 60)
   }
 
@@ -119,7 +121,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
 
@@ -127,12 +129,6 @@ export const OrderItem = React.memo((props: any) => {
     return finalTaget
   }
 
-  const getStatusClassName = (minutes: number) => {
-    if (isNaN(Number(minutes))) return 'in_time'
-    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
-    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
-  }
-
   useEffect(() => {
     const slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
     setAllowColumns({
@@ -143,8 +139,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 })}
@@ -152,24 +147,16 @@ export const OrderItem = React.memo((props: any) => {
       <Card key={order.id}>
         {!!allowColumns?.slaBar && (
           <Timestatus
-            style={{
-              backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time'
-                ? '#00D27A'
-                : getStatusClassName(getDelayMinutes(order)) === 'at_risk'
-                  ? '#FFC700'
-                  : getStatusClassName(getDelayMinutes(order)) === 'delayed'
-                    ? '#E63757'
-                    : ''
-            }}
+            timeState={order?.time_status}
           />
         )}
         <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>
@@ -193,17 +180,27 @@ export const OrderItem = React.memo((props: any) => {
               />
             </NotificationIcon>
           )}
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+          <View style={{ flexDirection: `${showExternalId ? 'column' : 'row'}`, flexWrap: 'wrap' }}>
+            {!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}
+              </OText>
+            )}
             <OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {(!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {(!showExternalId && ((!!order?.order_group_id && order?.order_group && isLogisticOrder
                 ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
-                : (t('NO', 'Order No.') + order.id)
-              ) + ' · '}
+                : (t('NO', 'Order No.') + order?.id)
+              ) + ' · '))}
               {order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
                 : parseDate(order?.delivery_datetime, { utc: false })}
@@ -214,11 +211,11 @@ export const OrderItem = React.memo((props: any) => {
                 <OText
                   style={styles.date}
                   color={
-                    getStatusClassName(getDelayMinutes(order)) === 'in_time'
+                    order?.time_status === 'in_time'
                       ? '#00D27A'
-                      : getStatusClassName(getDelayMinutes(order)) === 'at_risk'
+                      : order?.time_status === 'at_risk'
                         ? '#FFC700'
-                        : getStatusClassName(getDelayMinutes(order)) === 'delayed'
+                        : order?.time_status === 'delayed'
                           ? '#E63757'
                           : ''}
                 >
@@ -250,6 +247,6 @@ export const OrderItem = React.memo((props: any) => {
           )}
         </Information>
       </Card>
-    </TouchableOpacity>
+    </Pressable>
   )
 }, OrderItemPropsAreEqual)

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

@@ -2,13 +2,13 @@ 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 { useLanguage, useConfig } 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._order) === JSON.stringify(nextProps._order) &&
         JSON.stringify(prevProps.currentOrdenSelected) === JSON.stringify(nextProps.currentOrdenSelected) &&
         prevProps.currentTabSelected === nextProps.currentTabSelected
 }
@@ -28,6 +28,9 @@ export const OrdersList = React.memo((props: any) => {
 
     const theme = useTheme()
     const [, t] = useLanguage()
+    const [{ configs }] = useConfig();
+
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
 
     return (
         <View
@@ -59,16 +62,18 @@ export const OrdersList = React.memo((props: any) => {
                         />
                     ) : (
                         <>
-                            <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 }}
-                            />
+                            {!isHideRejectButtons && (
+                                <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)}
@@ -76,7 +81,7 @@ export const OrdersList = React.memo((props: any) => {
                                 borderColor={theme.colors.green}
                                 imgRightSrc={null}
                                 style={{ borderRadius: 7, height: 40 }}
-                                parentStyle={{ width: '45%' }}
+                                parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                                 textStyle={{ color: theme.colors.white }}
                             />
                         </>