ordering-ui-react-native 0.15.27 → 0.15.29-release

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

@@ -0,0 +1,123 @@
+import styled, { css } from 'styled-components/native';
+
+export const FiltersTab = styled.View`
+  margin-bottom: 20px;
+  min-height: 30px;
+  max-height: 35px;
+  flex: 1;
+  width: 100%;
+`
+
+export const TabsContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  flex: 1;
+  width: 100%;
+  border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
+`
+
+export const Tag = styled.Pressable`
+  background-color: ${({ isSelected }: { isSelected: string }) => isSelected};
+  justify-content: center;
+  align-items: center;
+  min-height: 34px;
+  padding: 4px 10px;
+  border-radius: 50px;
+  margin-right: 15px;
+`
+
+export const IconWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  background: #fff;
+`
+
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 24px;
+`
+
+export const FilterBtnWrapper = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+  border-radius: 7.6px;
+  margin-vertical: 5px;
+  padding: 15px 20px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`
+
+export const TabPressable = styled.Pressable`
+  align-items: center;
+  border-color: ${(props: any) => props.theme.colors.textGray};
+  border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
+  padding-horizontal: 10px;
+`
+export const OrderStatus = styled.View`
+  margin-right: 5px;
+  width: 3px;
+  height: 90%;
+  border-radius: 6px;
+
+  ${(props: any) => props.timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+
+  ${(props: any) => props.timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+
+  ${(props: any) => props.timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`
+
+export const SlaOption = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const SearchModalContent = styled.View``
+
+export const SlaSettingModalContent = styled.View``
+
+export const DeliveryStatusWrapper = styled.View`
+  position: relative;
+`
+export const VerticalLine = styled.View`
+  position: absolute;
+  background: #E9ECEF;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+`
+
+export const Actions = styled.View``
+
+export const Sides = styled.View`
+  flex-direction: row;
+  height: 100%;
+`
+
+export const LeftSide = styled.View`
+  width: 30%;
+`
+
+export const RightSide = styled.View`
+  width: 70%;
+  border-width: 2px;
+  border-color: ${(props: any) => props.theme.colors.gray100};
+`

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

@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
+import styled, { useTheme } from 'styled-components/native'
+
+import { OText, OIcon } from '../shared';
+
+export const useOrderUtils = () => {
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate }] = useUtils()
+
+  const calculateDate = (type: any, from: any, to: any) => {
+    switch (type) {
+      case 'today':
+        const date = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${date} 00:00:00`, to: `${date} 23:59:59` }
+      case 'yesterday':
+        const yesterday = new Date()
+        yesterday.setDate(yesterday.getDate() - 1)
+        const start1 = parseDate(yesterday, { outputFormat: 'MM/DD/YYYY' })
+        const end1 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start1} 00:00:00`, to: `${end1} 23:59:59` }
+      case 'last_7days':
+        const last_7days = new Date()
+        last_7days.setDate(last_7days.getDate() - 6)
+        const start7 = parseDate(last_7days, { outputFormat: 'MM/DD/YYYY' })
+        const end7 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start7} 00:00:00`, to: `${end7} 23:59:59` }
+      case 'last_30days':
+        const last_30days = new Date()
+        last_30days.setDate(last_30days.getDate() - 29)
+        const start30 = parseDate(last_30days, { outputFormat: 'MM/DD/YYYY' })
+        const end30 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        return { from: `${start30} 00:00:00`, to: `${end30} 23:59:59` }
+      default:
+        const start = from ? `${parseDate(from, { outputFormat: 'MM/DD/YYYY' })} 00:00:00` : ''
+        const end = to ? `${parseDate(to, { outputFormat: 'MM/DD/YYYY' })} 23:59:59` : ''
+        return { from: start, to: end }
+    }
+  }
+
+  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'),
+      des: t('DELIVERY_OK_STATUS_DESC', 'Get delivery time from the businesses.'),
+      timmer: false,
+      icon: theme.images.general?.clock1,
+      backColor: '#00D27A'
+    },
+    {
+      key: t('AT_RISK', 'At risk'),
+      des: t('DELIVERY_ATRISK_STATUS_DESC', 'Is the time between delivery time of busines and the delayed time.'),
+      timmer: false,
+      icon: theme.images.general?.clockRisk,
+      backColor: '#FFC700'
+    },
+    {
+      key: t('DELAYED', 'Delayed'),
+      des: t('DELIVERY_DELAYED_STATUS_DESC', 'If this time is exceeded, the order will be delayed.'),
+      timmer: true,
+      icon: theme.images.general?.clockDelayed,
+      backColor: '#E63757'
+    }
+  ]
+
+  const defaultSearchList = {
+    id: '',
+    state: '',
+    city: '',
+    business: '',
+    delivery_type: '',
+    paymethod: '',
+    driver: '',
+    timeStatus: '',
+    date: {
+      from: '',
+      to: '',
+      type: ''
+    }
+  }
+
+  const constants = {
+    preorderTypeList,
+    defaultOrderTypes,
+    deliveryStatus,
+    defaultSearchList,
+    calculateDate
+  }
+
+  return [constants];
+}
+
+export const StatusBlock = (props: any) => {
+  const { item, last } = props
+  const [showTime, setShowTime] = useState(false)
+
+  useEffect(() => {
+    if (last) {
+      setShowTime(true)
+    }
+  }, [last])
+
+  const StatusItems = styled.View`
+    position: relative;
+    margin-bottom: 20px;
+    z-index: 2;
+  `
+  const ItemHeader = styled.View`
+    flex-direction: row;
+    margin-bottom: 5px;
+  `
+
+  const IconWrapper = styled.View`
+    flex-direction: row;
+    align-items: center;
+    background: #fff;
+  `
+
+  const ItemStatus = styled.View`
+    width: 4px;
+    height: 22px;
+    margin: 0 15px;
+    border-radius: 4px;
+    background: ${(props: any) => props.backColor};
+  `
+
+  const ItemContent = styled.View`
+    display: flex;
+    padding: 0 30px;
+  `
+
+  const OverLine = styled.View`
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    top: 20px;
+    left: 0;
+    background-color: #fff;
+    z-index: 2;
+  `
+
+  return (
+    <StatusItems>
+      <Pressable style={{ marginBottom: 10 }}>
+        <ItemHeader>
+          <IconWrapper>
+            <OIcon
+              src={item?.icon}
+              width={16}
+              height={16}
+              color={item?.backColor}
+            />
+          </IconWrapper>
+          <ItemStatus backColor={item?.backColor} />
+          <OText>{item?.key}</OText>
+        </ItemHeader>
+      </Pressable>
+      <ItemContent>
+        <OText>{item?.des}</OText>
+      </ItemContent>
+      {showTime && ( <Timer /> )}
+      {last && ( <OverLine /> )}
+    </StatusItems>
+  )
+}
+
+export const Timer = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ configs }] = useConfig();
+
+  const styles = StyleSheet.create({
+    settingTime: {
+      fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
+    }
+  })
+
+  const TimerInputWrapper = styled.View`
+    color: ${(props: any) => props.theme.colors.disabled};
+    margin-top: 15px;
+    margin-left: 30px;
+    margin-right: 30px;
+    flex-direction: row;
+    align-items: flex-end;
+  `
+
+  return (
+    <TimerInputWrapper>
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
+    </TimerInputWrapper>
+  )
+}
+

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

@@ -110,6 +110,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
+  const [configState] = useConfig()
   const [orientationState] = useDeviceOrientation();
   const [, { showToast }] = useToast();
   const [openSearchModal, setOpenSearchModal] = useState(false)
@@ -439,55 +440,57 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      <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>
-              );
-            }}
-          />
+      {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>
-      </View>
+      )}
       <FiltersTab>
         <ScrollView
           ref={scrollRefTab}
@@ -541,7 +544,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           </TabsContainer>
         </ScrollView>
       </FiltersTab>
-      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
+      <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
         {currentTabSelected !== 'logisticOrders' && (
           <View
             style={{
@@ -722,8 +725,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </View>
       {/* </GestureRecognizer> */}
-
-      <NewOrderNotification />
+                
+      {isBusinessApp && (
+        <NewOrderNotification isBusinessApp={isBusinessApp} />
+      )}
+      
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer
@@ -926,6 +932,7 @@ export const Timer = () => {
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [configState] = useConfig()
   const theme = useTheme()
   const ordersProps = {
     ...props,

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

@@ -1,13 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform, PlatformIOSStatic } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import moment from 'moment'
-import { useLanguage, useUtils } from 'ordering-components/native';
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { OButton, OIcon, OText } from '../shared';
 import {
   Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
 } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import DeviceInfo from 'react-native-device-info';
+
+const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 export const PreviousOrders = (props: any) => {
   const {
@@ -18,25 +22,43 @@ export const PreviousOrders = (props: any) => {
     isLogisticOrder,
     handleClickLogisticOrder,
     slaSettingTime,
-    currentTabSelected
+    currentTabSelected,
+    currentOrdenSelected
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
+  const [configState] = useConfig()
   const theme = useTheme();
-  const [currentTime, setCurrentTime] = useState()
+  const [, setCurrentTime] = useState()
+  const [allowColumns, setAllowColumns] = useState({
+    timer: true,
+    slaBar: true,
+  })
+
+  const [orientationState] = useDeviceOrientation();
+
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+
+  const platformIOS = Platform as PlatformIOSStatic
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
     handleClickOrder && handleClickOrder(order)
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    if (props.handleClickEvent) {
+      props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
+    } else {
+      onNavigationRedirect &&
+        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    }
   };
 
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      minHeight: isLogisticOrder ? 50 : 64,
-      marginBottom: isLogisticOrder ? 0 : 30,
+      paddingVertical: (isIpad || isTablet) ? 20 : 0,
+      marginBottom: IS_PORTRAIT ? 25 : 0,
       marginLeft: 3,
     },
     icon: {
@@ -77,23 +99,42 @@ export const PreviousOrders = (props: any) => {
     },
   });
 
-  const getDelayTime = (order: any) => {
+  const getDelayMinutes = (order: any) => {
     // targetMin = delivery_datetime  + eta_time - now()
+    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)
     const _eta = order?.eta_time
-    const tagetedMin = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'minutes')
-    let day = Math.floor(tagetedMin / 1440)
+    const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    return Math.ceil(diffTimeAsSeconds / 60)
+  }
+
+  const displayDelayedTime = (order: any) => {
+    let tagetedMin = getDelayMinutes(order)
+    // get day, hour and minutes
+    const sign = tagetedMin >= 0 ? '' : '- '
+    tagetedMin = Math.abs(tagetedMin)
+    let day: string | number = Math.floor(tagetedMin / 1440)
     const restMinOfTargetedMin = tagetedMin - 1440 * day
-    let restHours: any = Math.floor(restMinOfTargetedMin / 60)
-    let restMins: any = restMinOfTargetedMin - 60 * restHours
+    let restHours: string | number = Math.floor(restMinOfTargetedMin / 60)
+    let restMins: string | number = restMinOfTargetedMin - 60 * restHours
+    // make standard time format
+    day = day === 0 ? '' : day + 'day  '
+    restHours = restHours < 10 ? '0' + restHours : restHours
+    restMins = restMins < 10 ? '0' + restMins : restMins
 
-    if (order?.time_status === 'in_time' || order?.time_status === 'at_risk') day = Math.abs(day)
-    if (restHours < 10) restHours = ('0' + restHours)
-    if (restMins < 10) restMins = ('0' + restMins)
-    const finalTaget = day + 'day  ' + restHours + ':' + restMins
+    const finalTaget = sign + day + restHours + ':' + restMins
     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 interval = setInterval(() => {
       const date: any = Date.now()
@@ -103,6 +144,15 @@ export const PreviousOrders = (props: any) => {
     return () => clearInterval(interval)
   }, [])
 
+  useEffect(() => {
+    const slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
+    setAllowColumns({
+      ...allowColumns,
+      timer: slaSettings,
+      slaBar: slaSettings
+    })
+  }, [configState.loading])
+
   let hash: any = {};
 
   return (
@@ -115,8 +165,9 @@ export const PreviousOrders = (props: any) => {
             return (
               <View
                 style={{
-                  backgroundColor: order?.locked && isLogisticOrder ? '#ccc' : '#fff',
-                  marginBottom: isLogisticOrder ? 10 : 0
+                  backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
+                  marginBottom: isLogisticOrder ? 10 : 0,
+                  // justifyContent: 'center'
                 }}
                 key={order.id}
               >
@@ -127,7 +178,9 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                    <Timestatus style={{ backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }} />
+                  {allowColumns?.slaBar && (
+                    <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
+                  )}
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -172,10 +225,10 @@ export const PreviousOrders = (props: any) => {
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
                             : parseDate(order?.delivery_datetime, { utc: false })}
                         </OText>
-                        {(currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && (
+                        {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
                           <>
                             <OText> · </OText>
-                            <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
+                            <OText style={styles.date} color={getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : ''} >{displayDelayedTime(order)}</OText>
                           </>
                         )}
                       </View>

package/themes/business/src/components/shared/OModal.tsx

@@ -165,7 +165,7 @@ const OModal = (props: Props): React.ReactElement => {
         transparent={isTransparent}
         visible={open}
         onRequestClose={() => {
-          onClose();
+          onClose && onClose();
         }}
         style={{
           height: '100%',