ordering-ui-react-native 0.21.47 → 0.21.48-release

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

@@ -55,10 +55,13 @@ const MapViewComponent = (props: MapViewParams) => {
     if (mapRef.current) {
       mapRef.current.fitToCoordinates(
         [
-          { latitude: location.latitude, longitude: location.longitude },
           {
-            latitude: userLocation?.latitude,
-            longitude: userLocation?.longitude,
+            latitude: typeof location?.latitude !== 'object' ? location?.latitude : 0,
+            longitude: typeof location?.longitude !== 'object' ? location?.latitude : 0
+          },
+          {
+            latitude: typeof userLocation?.latitude !== 'object' ? userLocation?.latitude : 0,
+            longitude: typeof userLocation?.longitude !== 'object' ? userLocation?.latitude : 0
           },
         ],
         {
@@ -72,8 +75,8 @@ const MapViewComponent = (props: MapViewParams) => {
     const lastRegion = mapRef?.current?.__lastRegion
     mapRef?.current && mapRef.current.animateToRegion({
       ...mapRef?.current?.__lastRegion,
-      longitudeDelta: lastRegion.longitudeDelta / 8,
-      latitudeDelta: lastRegion.longitudeDelta / 8
+      longitudeDelta: lastRegion?.longitudeDelta / 8,
+      latitudeDelta: lastRegion?.longitudeDelta / 8
     })
   }
 
@@ -81,8 +84,8 @@ const MapViewComponent = (props: MapViewParams) => {
     const lastRegion = mapRef?.current?.__lastRegion
     mapRef?.current && mapRef.current.animateToRegion({
       ...lastRegion,
-      longitudeDelta: lastRegion.longitudeDelta * 8,
-      latitudeDelta: lastRegion.longitudeDelta * 8
+      longitudeDelta: lastRegion?.longitudeDelta * 8,
+      latitudeDelta: lastRegion?.longitudeDelta * 8
     })
   }
 
@@ -133,8 +136,20 @@ const MapViewComponent = (props: MapViewParams) => {
   const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
     const markerRef = useRef<any>()
 
-    let coordinateLat = (customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat) ?? initialPosition?.latitude
-    let coordinateLng = (customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng) ?? initialPosition?.longitude
+    let coordinateLat = (customer
+      ? typeof marker?.customer?.location?.lat === 'number' && !Number.isNaN(marker?.customer?.location?.lat)
+        ? marker?.customer?.location?.lat
+        : 0
+      : typeof marker?.business?.location?.lat === 'number' && !Number.isNaN(marker?.business?.location?.lat)
+        ? marker?.business?.location?.lat
+        : 0) ?? (initialPosition?.latitude || 0)
+    let coordinateLng = (customer
+      ? typeof marker?.customer?.location?.lng === 'number' && !Number.isNaN(marker?.customer?.location?.lng)
+        ? marker?.customer?.location?.lng
+        : 0
+      : typeof marker?.business?.location?.lng === 'number' && !Number.isNaN(marker?.business?.location?.lng)
+        ? marker?.business?.location?.lng
+        : 0) ?? (initialPosition?.longitude || 0)
 
     useEffect(() => {
       if (
@@ -154,8 +169,8 @@ const MapViewComponent = (props: MapViewParams) => {
         }}
         onPress={() =>
           setLocationSelected({
-            latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
-            longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+            latitude: coordinateLat,
+            longitude: coordinateLng
           })
         }
         ref={(ref) => markerRef.current = ref}
@@ -235,8 +250,8 @@ const MapViewComponent = (props: MapViewParams) => {
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition?.latitude,
-                longitude: initialPosition?.longitude,
+                latitude: initialPosition?.latitude || 0,
+                longitude: initialPosition?.longitude || 0,
                 latitudeDelta: haveOrders ? 0.01 : 0.1,
                 longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
@@ -266,8 +281,8 @@ const MapViewComponent = (props: MapViewParams) => {
                 ))}
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: typeof location.lat === 'number' && !Number.isNaN(location.lat) ? location.lat : 0,
+                    longitude: typeof location.lng === 'number' && !Number.isNaN(location.lng) ? location.lng : 0,
                   }}
                   title={t('YOUR_LOCATION', 'Your Location')}
                 >

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

@@ -12,6 +12,7 @@ import { PreviousMessages } from '../PreviousMessages';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 const MessagesOptionUI = (props: MessagesOptionParams) => {
   const {
@@ -163,7 +164,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
       <View style={styles.header}>
         <OText style={styles.title}>{t('MESSAGES', 'Messages')}</OText>
       </View>
-
+      <WebsocketStatus />
       <FiltersTab>
         <TabsContainer width={dimensions.width - 42}>
           {tabs.map((tab: any) => (

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

@@ -4,7 +4,10 @@ import {
   View,
   StyleSheet,
   Dimensions,
-  TouchableOpacity
+  TouchableOpacity,
+  NativeModules,
+  PermissionsAndroid,
+  Platform
 } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import moment from 'moment'
@@ -16,7 +19,10 @@ import {
   useApi,
   useEvent,
   useLanguage,
-  useSession
+  useSession,
+  useConfig,
+  useToast,
+  ToastType
 } from 'ordering-components/native'
 
 import { OIcon, OText } from '../shared'
@@ -31,26 +37,47 @@ const SoundPlayerComponent = (props: any) => {
 
   const theme = useTheme()
   const [count, setCount] = useState(0);
-
+  const [isEnabledReadStorage, setIsEnabledReadStorage] = useState(true)
   const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
 
   useEffect(() => {
     const id = setInterval(() => setCount(count + 1), 2500)
 
     const playSound = async () => {
-      SoundPlayer.playUrl(URL_SOUND)
-      await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
-      SoundPlayer.stop()
+      try {
+        SoundPlayer.playUrl(URL_SOUND)
+        await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
+        SoundPlayer.stop()
+      } catch (err: any) {
+        console.log('Sound Error - ', err.message)
+      }
+    }
+    if (NativeModules?.RNSoundPlayer?.playUrl && typeof URL_SOUND === 'string' && isEnabledReadStorage) {
+      playSound()
     }
-
-    playSound()
 
     return () => {
-      SoundPlayer.stop()
       clearInterval(id);
+      try {
+        SoundPlayer.stop()
+      } catch (err: any) {
+        console.log('Sound Error - ', err.message)
+      }
     }
-  }, [count])
+  }, [count, isEnabledReadStorage])
 
+  useEffect(() => {
+    const checkSoundMedia = async () => {
+      if (Platform.OS === 'android') {
+        const enabled = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)
+        setIsEnabledReadStorage(enabled)
+      } else {
+        setIsEnabledReadStorage(true)
+      }
+    }
+    // checkSoundMedia()
+
+  }, [])
   return (
     <Modal
       animationType='slide'
@@ -90,37 +117,50 @@ const SoundPlayerComponent = (props: any) => {
 }
 
 const NewOrderNotificationUI = (props: any) => {
-  const { isBusinessApp, evtList } = props
-
+  const { isBusinessApp, evtList, orderStatus } = props
+  const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
+  const [, { showToast }] = useToast()
   const { getCurrentLocation } = useLocation()
   const [currentEvent, setCurrentEvent] = useState<any>(null)
 
-  const handleEventNotification = async (evtType: number, value: any) => {
+  const handleEventNotification = async (evtType: number, value: any, orderStatus?: any) => {
     if (value?.driver) {
       try {
         const location = await getCurrentLocation()
+        if (!location?.latitude || !location?.longitude) {
+          showToast(t('ERROR_UPDATING_COORDS', 'Error updating coords'), ToastType.Error)
+          return
+        }
         await fetch(`${ordering.root}/users/${user.id}/locations`, {
           method: 'POST',
           body: JSON.stringify({
-            location: JSON.stringify({ location: `{lat: ${location.latitude}, lng: ${location.longitude}}` })
+            location: JSON.stringify({
+              location: `{
+                lat: ${location.latitude},
+                lng: ${location.longitude}
+              }`
+            })
           }),
-          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`
+          }
         })
       } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
-        setCurrentEvent({ evt: 2, orderId: value?.id })
+        setCurrentEvent({ evt: 2, orderId: value?.id ?? value?.order_id })
       }
     }
-    if (evtType === 3 || value?.author_id === user.id) return
+    if ((!orderStatus.includes(value.status) && evtType !== 1 && isBusinessApp) || value?.author_id === user.id) return
     setCurrentEvent({
       evt: evtType,
       orderId: value?.driver
-        ? value?.order_id
+        ? value?.order_id ?? value?.id
         : evtList(currentEvent)[evtType].event === 'messages'
           ? value?.order?.id
           : value?.order_id ?? value?.id
@@ -128,11 +168,11 @@ const NewOrderNotificationUI = (props: any) => {
   }
 
   useEffect(() => {
-    events.on('message_added_notification', (o: any) => handleEventNotification(1, o))
-    events.on('order_added_notification', (o: any) => handleEventNotification(2, o))
-    events.on('order_updated_notification', (o: any) => handleEventNotification(3, o))
-    events.on('request_register_notification', (o: any) => handleEventNotification(2, o))
-    events.on('request_update_notification', (o: any) => handleEventNotification(3, o))
+    events.on('message_added_notification', (o: any) => handleEventNotification(1, o, orderStatus))
+    events.on('order_added_notification', (o: any) => handleEventNotification(2, o, orderStatus))
+    events.on('order_updated_notification', (o: any) => handleEventNotification(3, o, orderStatus))
+    events.on('request_register_notification', (o: any) => handleEventNotification(2, o, orderStatus))
+    events.on('request_update_notification', (o: any) => handleEventNotification(3, o, orderStatus))
 
     return () => {
       events.off('message_added_notification', (o: any) => handleEventNotification(1, o))
@@ -141,7 +181,7 @@ const NewOrderNotificationUI = (props: any) => {
       events.off('request_register_notification', (o: any) => handleEventNotification(2, o))
       events.off('request_update_notification', (o: any) => handleEventNotification(3, o))
     }
-  }, [])
+  }, [orderStatus])
 
   useEffect(() => {
     return () => setCurrentEvent(null)
@@ -149,13 +189,13 @@ const NewOrderNotificationUI = (props: any) => {
 
   return (
     <>
-      {!!currentEvent ? (
+      {!!currentEvent && (
         <SoundPlayerComponent
           evtList={evtList}
           currentEvent={currentEvent}
           handleCloseEvents={() => setCurrentEvent(null)}
         />
-      ) : null}
+      )}
     </>
   )
 };

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

@@ -4,8 +4,10 @@ import {
   View,
   TouchableOpacity,
   ActivityIndicator,
+  Alert,
 } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { StarPRNT } from 'react-native-star-prnt';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import {
@@ -35,6 +37,8 @@ import CountryPicker from 'react-native-country-picker-modal';
 import { NotFoundSource } from '../NotFoundSource';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
+import { _retrieveStoreData } from '../../providers/StoreUtil'
+import { usePrinterCommands } from './usePrinterCommands'
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -44,7 +48,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     messagesReadList,
     handleAssignDriver,
-    handleChangeOrderStatus,
     isFromCheckout,
     driverLocation,
     actions,
@@ -57,6 +60,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [{ user, token }] = useSession();
   const [{ configs }] = useConfig();
+  const { generateCommands } = usePrinterCommands()
   const [, { showToast }] = useToast();
   const [unreadAlert, setUnreadAlert] = useState({
     business: false,
@@ -70,6 +74,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [openModalForAccept, setOpenModalForAccept] = useState(false);
   const [openModalForMapView, setOpenModalForMapView] = useState(false);
   const [isDriverModalVisible, setIsDriverModalVisible] = useState(false);
+  const [printerSettings, setPrinterSettings] = useState<any>('')
+  const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
+
+  const orderToComplete = [4,20,21]
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -120,6 +128,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }
 
+  const handleChangeOrderStatus = async (status: any, isAcceptOrReject: any = {}) => {
+    if (props.handleChangeOrderStatus) {
+      const order: any = await props.handleChangeOrderStatus(status, isAcceptOrReject)
+
+      if (order?.status === 7 && autoPrintEnabled && printerSettings) {
+        handleViewSummaryOrder()
+      }
+    }
+  }
+
   const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
     if (name !== 'No') {
       const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
@@ -291,7 +309,28 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForAccept(true);
   };
 
+  const printAction = async (printerSettings: any, commands: any, showAlert: boolean = true) => {
+    try {
+      var printResult = await StarPRNT.print(printerSettings?.emulation, commands, printerSettings?.portName);
+      showAlert && showToast(ToastType.Info, t('ORDER_PRINTED_SUCCESS', 'Order printed'), 1000)
+    } catch (e) {
+      showAlert && showToast(ToastType.Error, t('ORDER_PRINTED_FAILED', 'Order not printed, connection failed'), 1000)
+    }
+  }
+
   const handleViewSummaryOrder = () => {
+    if (printerSettings) {
+      printerSettings.map((printer: any, idx: number) => {
+        const commands: any = generateCommands({
+          ...order,
+          orderStatus: getOrderStatus(order?.status, t)?.value
+        }, printer?.printMode)
+        commands.push({ appendCutPaper: StarPRNT.CutPaperAction.PartialCutWithFeed })
+
+        printAction(printer, commands, idx === printerSettings.length - 1)
+      })
+      return
+    }
     navigation?.navigate &&
       navigation.navigate('OrderSummary', {
         order,
@@ -372,6 +411,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    const getStorageData = async () => {
+    const printers = await _retrieveStoreData('printers')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
+      setPrinterSettings(printers?.length && printers)
+      setAutoPrintEnabled(!!autoPrint)
+    }
+
+    getStorageData()
+  }, [])
+
   const styles = StyleSheet.create({
     driverOff: {
       backgroundColor: theme.colors.notAvailable,
@@ -607,7 +657,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               disabled={loading}
             />
           )}
-          {order?.status === 4 && ![1].includes(order?.delivery_type) && (
+          {orderToComplete.includes(order?.status) && ![1].includes(order?.delivery_type) && (
             <FloatingButton
               btnText={t(
                 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',

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

@@ -64,8 +64,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const { order } = props.order
 
+  const hideTimer = configs?.hidden_driver_eta_time?.value === '1'
   const isAllowedDriverRejectOrder = configs?.allow_driver_reject_order?.value === '1'
   const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
+  const isEnabledOrderNotReady = configs?.order_not_ready_enabled?.value === '1'
+  const isEnabledFailedPickupDriver = configs?.failed_pickup_by_driver_enabled?.value === '1'
   const theme = useTheme();
   const [, t] = useLanguage();
   const [session] = useSession();
@@ -115,6 +118,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages && readMessages();
   };
 
+  const goToPermissionPage = () => {
+    navigation.navigate('RequestPermissions')
+  }
+
   const handleOpenMapView = async () => {
     if (!isGrantedPermissions) {
       navigation.navigate('RequestPermissions')
@@ -389,7 +396,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [props.order?.loading]);
 
   useEffect(() => {
-    if (!order?.driver_id && session?.user?.level === 4) {
+    if (order?.driver_id === null && session?.user?.level === 4) {
       setAlertState({
         open: true,
         content: [
@@ -421,6 +428,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     forceUpdate && handleViewActionOrder && handleViewActionOrder(forceUpdate === 9 ? 'forcePickUp' : 'forceDelivery')
   }, [forceUpdate])
 
+  useEffect(() => {
+    if (!!props.order?.error || props.order?.error?.length > 0) {
+      showToast(ToastType.Error,
+        props.order?.error?.[0] ||
+        props.order?.error ||
+        t('NETWORK_ERROR', 'Network Error'),
+        5000)
+    }
+  }, [props.order?.error])
+
   const styles = StyleSheet.create({
     btnPickUp: {
       borderWidth: 0,
@@ -471,20 +488,20 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           isOrderGroup={isOrderGroup}
           lastOrder={lastOrder}
         />
-        {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && (
+        {(order?.status === 8 || order?.status === 18) && order?.delivery_type === 1 && !props.order?.loading && (
           <Pickup>
             <OButton
               style={styles.btnPickUp}
               textStyle={{ color: theme.colors.primary }}
               text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
               onClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(3)
+                handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(3) : goToPermissionPage()
               }
               imgLeftStyle={{ tintColor: theme.colors.backArrow }}
             />
           </Pickup>
         )}
-        {order?.status === 3 && order?.delivery_type === 1 && !isHideRejectButtons && (
+        {order?.status === 3 && order?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady && !props.order?.loading && (
           <View style={{ paddingVertical: 20, marginBottom: 20 }}>
             <OButton
               style={styles.btnPickUp}
@@ -570,7 +587,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     btnText={t('PICKUP_FAILED', 'Pickup failed')}
                     isSecondaryBtn={false}
                     secondButtonClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(9)
+                      handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(9) : goToPermissionPage()
                     }
                     firstButtonClick={() =>
                       handleViewActionOrder && handleViewActionOrder('pickupFailed')
@@ -579,8 +596,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     secondButton={true}
                     firstColorCustom={theme.colors.red}
                     secondColorCustom={theme.colors.green}
-                    widthButton={isHideRejectButtons ? '100%': '45%'}
-                    isHideRejectButtons={isHideRejectButtons}
+                    widthButton={isHideRejectButtons || !isEnabledFailedPickupDriver ? '100%' : '45%'}
+                    isHideRejectButtons={isHideRejectButtons || !isEnabledFailedPickupDriver}
                   />
                 )}
                 {(validStatusComplete.includes(order?.status)) && (
@@ -590,7 +607,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
                       isSecondaryBtn={false}
                       secondButtonClick={() =>
-                        handleChangeOrderStatus && handleChangeOrderStatus(11)
+                        handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(11) : goToPermissionPage()
                       }
                       firstButtonClick={() =>
                         handleViewActionOrder && handleViewActionOrder('deliveryFailed')
@@ -599,22 +616,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       secondButton={true}
                       firstColorCustom={theme.colors.red}
                       secondColorCustom={theme.colors.green}
-                      widthButton={isHideRejectButtons ? '100%': '45%'}
+                      widthButton={isHideRejectButtons ? '100%' : '45%'}
                       isHideRejectButtons={isHideRejectButtons}
                     />
                   </>
                 )}
                 {showFloatButtonsAcceptOrReject[order?.status] && (
                   <FloatingButton
+                    disabled={props.order?.loading}
                     btnText={t('REJECT', 'Reject')}
                     isSecondaryBtn={false}
-                    secondButtonClick={() => (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
+                    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}
                     secondColorCustom={theme.colors.green}
-                    widthButton={isHideRejectButtons ? '100%': '45%'}
+                    widthButton={isHideRejectButtons ? '100%' : '45%'}
                     isHideRejectButtons={isHideRejectButtons}
                   />
                 )}
@@ -680,6 +698,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   actions={actions}
                   orderTitle={orderTitle}
                   appTitle={appTitle}
+                  isLoadingOrder={props.order?.loading}
                 />
               </OModal>
             )}