ordering-ui-react-native 0.17.66 → 0.17.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.66",
+  "version": "0.17.68",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/shared/OToast.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
+import { Animated, StyleSheet, Text, View, Platform } from "react-native";
 import { ToastType, useToast, useLanguage } from "ordering-components/native";
 import { useTheme } from 'styled-components/native';
 import { getTraduction } from '../../utils'
 
 const fadeDuration = 300;
-const topPosition = 20;
+const topPosition = Platform.OS === 'ios' ? 40 : 20
 
 export const Toast = (props: any) => {
   const [toastConfig, { hideToast }] = useToast();

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

@@ -91,6 +91,10 @@ export const OrderContentComponent = (props: OrderContent) => {
     return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
+  const containsOnlyNumbers = (str: string) => {
+    return /^\d+$/.test(str);
+  }
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -148,7 +152,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${order?.business?.cellphone}`}
+                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
                   shorcut={`${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
@@ -159,7 +163,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${order?.business?.phone}`}
+                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
                   shorcut={order?.business?.phone}
                   TextStyle={styles.textLink}
                 />
@@ -274,7 +278,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              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}`}
               TextStyle={styles.textLink}
             />
@@ -285,7 +289,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.phone}`}
+              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
               shorcut={order?.customer?.phone}
               TextStyle={styles.textLink}
             />
@@ -333,7 +337,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {!!order?.comment && (
@@ -378,7 +382,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency})}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -391,7 +395,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency})}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</OText>
           </Table>
         )}
         {
@@ -399,13 +403,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -413,9 +417,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <Table>
             <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
             {order?.tax_type === 1 ? (
-              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency })}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</OText>
             )}
           </Table>
         )}
@@ -425,7 +429,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency})}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}
             </OText>
           </Table>
         )}
@@ -436,7 +440,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</OText>
             </Table>
           )
         }
@@ -445,11 +449,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={tax.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -458,11 +462,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={fee.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency})} + `}{fee.percentage}%){' '}
+                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency })} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -471,13 +475,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -489,7 +493,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency})}
+                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}
               </OText>
             </Table>
           )
@@ -499,13 +503,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -520,7 +524,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency})}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>
           </Table>
         )}
 
@@ -534,7 +538,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency})}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency })}
             </OText>
           </Table>
         </Total>
@@ -568,7 +572,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     <OText>
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
-                        : event?.paymethod?.name}
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                     </OText>
                     {event?.data?.charge_id && (
                       <OText>
@@ -577,7 +581,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount, { currency: order?.currency})}
+                    -{parsePrice(event.amount, { currency: order?.currency })}
                   </OText>
                 </View>
               ))}

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

@@ -271,7 +271,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             {order?.delivery_option && (
               <OText size={13}>
                 <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {order?.payment_events?.length > 0 && (
@@ -286,8 +286,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
                         : walletName[event?.wallet_event?.wallet?.type]?.name
                       : idx < order?.payment_events?.length - 1
-                        ? `${event?.paymethod?.name} - `
-                        : event?.paymethod?.name
+                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
               </View>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-native';
-import { useLanguage, useUtils, useToast, ToastType, OrderListGroups, useConfig } from 'ordering-components/native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native';
+import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -20,7 +20,6 @@ import {
   IconWrapper,
   ModalContainer,
   ModalTitle,
-  FilterBtnWrapper,
   TabPressable,
   OrderStatus,
   SlaOption,
@@ -34,42 +33,17 @@ import {
   ItemContent,
   TimerInputWrapper,
   OverLine,
-  Actions,
   InputContainer
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
 
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import GestureRecognizer from 'react-native-swipe-gestures';
-import ODropDown from '../shared/ODropDown';
-import { OrdersOptionStatus } from '../OrdersOptionStatus'
 import { OrdersOptionCity } from '../OrdersOptionCity';
 import { OrdersOptionBusiness } from '../OrdersOptionBusiness';
 import { OrdersOptionDelivery } from '../OrdersOptionDelivery';
 import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
-import { GestureEvent, GestureDetector } from 'react-native-gesture-handler'
-const tabsList: any = {
-  pending: 1,
-  inProgress: 2,
-  completed: 3,
-  cancelled: 4
-};
-
-const tabsListText: any = {
-  1: 'pending',
-  2: 'inProgress',
-  3: 'completed',
-  4: 'cancelled'
-};
-
-const swipeConfig = {
-  velocityThreshold: 0.3,
-  directionalOffsetThreshold: 80
-};
-
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
@@ -81,10 +55,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ordersGroup,
     setOrdersGroup,
     orderStatus,
+    ordersGroupedFormatted,
     loadOrders,
     loadMoreOrders,
     onNavigationRedirect,
-    filtered,
     onFiltered,
     handleClickOrder,
     isBusinessApp,
@@ -92,7 +66,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     logisticOrders,
     loadLogisticOrders,
     isLogisticActivated,
-    isAlsea
+    isAlsea,
+    handleChangeOrderStatus,
+    handleSendCustomerReview
   } = props;
 
   const defaultSearchList = {
@@ -346,26 +322,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     })
   }
 
-  const onSwipeLeft = () => {
-    let currentTab = tabsList[currentTabSelected]
-    currentTab = currentTab >= 4 ? null : currentTab + 1
-
-    if (!currentTab) return
-
-    const nextTab = tabsListText[currentTab]
-    nextTab && setCurrentTabSelected(nextTab)
-  }
-
-  const onSwipeRight = () => {
-    let currentTab = tabsList[currentTabSelected]
-    currentTab = currentTab <= 1 ? null : currentTab - 1
-
-    if (!currentTab) return
-
-    const nextTab = tabsListText[currentTab]
-    nextTab && setCurrentTabSelected(nextTab)
-  }
-
   const calculateDate = (type: any, from: any, to: any) => {
     switch (type) {
       case 'today':
@@ -419,14 +375,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   useEffect(() => {
     setSelectedTabStatus(deliveryStatus)
   }, [])
-  
+
   return (
-    // <GestureRecognizer
-    //   onSwipeLeft={onSwipeLeft}
-    //   onSwipeRight={onSwipeRight}
-    //   config={swipeConfig}
-    //   style={{ flex: 1 }}
-    // >
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
@@ -636,11 +586,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             (
               <PreviousOrders
                 orders={currentOrdersGroup?.orders}
+                navigation={props.navigation}
+                ordersGrouped={ordersGroupedFormatted}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
                 slaSettingTime={slaSettingTime}
                 currentTabSelected={currentTabSelected}
+                appTitle={props.orderDetailsProps?.appTitle}
+                actions={props.orderDetailsProps?.actions}
+                orderTitle={props.orderDetailsProps?.orderTitle}
+                handleChangeOrderStatus={handleChangeOrderStatus}
+                handleSendCustomerReview={handleSendCustomerReview}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -730,7 +687,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             )}
         </ScrollView>
       </View>
-      {/* </GestureRecognizer> */}
 
       {isBusinessApp && (
         <NewOrderNotification isBusinessApp={isBusinessApp} />

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

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, PlatformIOSStatic, StyleSheet, TouchableOpacity, 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';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+import FastImage from 'react-native-fast-image'
+import moment from 'moment'
+
+import {
+  Card,
+  Logo,
+  Information,
+  MyOrderOptions,
+  NotificationIcon,
+  Timestatus
+} from './styles'
+
+import { OText } from '../shared';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
+
+export const OrderItem = (props: any) => {
+  const {
+    order,
+    _order,
+    isLogisticOrder,
+    currentTabSelected,
+    getOrderStatus,
+    handlePressOrder
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [configState] = useConfig()
+  const [{ parseDate, optimizeImage }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+
+  const [allowColumns, setAllowColumns] = useState({
+    timer: configState?.configs?.order_deadlines_enabled?.value === '1',
+    slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
+  })
+
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+  const platformIOS = Platform as PlatformIOSStatic
+
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
+
+  const styles = StyleSheet.create({
+    cardButton: {
+      flex: 1,
+      paddingVertical: (isIpad || isTablet) ? 20 : 0,
+      marginBottom: IS_PORTRAIT ? 25 : 0,
+      marginLeft: 3,
+    },
+    icon: {
+      borderRadius: 7.6,
+      width: 60,
+      height: 60
+    },
+    logo: {
+      borderRadius: 10,
+      shadowColor: "#0000006e",
+      shadowRadius: 10,
+      elevation: 15,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
+    },
+    title: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 16,
+      color: theme.colors.textGray,
+    },
+    date: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 12,
+    },
+    orderType: {
+      fontSize: 12,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      color: theme.colors.orderTypeColor,
+    },
+  });
+
+  const getDelayMinutes = (order: any) => {
+    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, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+    const _eta = order?.eta_time
+    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: 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
+
+    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 slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
+    setAllowColumns({
+      ...allowColumns,
+      timer: slaSettings,
+      slaBar: slaSettings
+    })
+  }, [configState.loading])
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      disabled={order?.locked && isLogisticOrder}
+      style={styles.cardButton}
+      onPress={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+    >
+      <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'
+                    : ''
+            }}
+          />
+        )}
+        <Logo style={styles.logo}>
+          <FastImage
+            style={styles.icon}
+            source={order.business?.logo ? {
+              uri: optimizeImage(order.business?.logo, 'h_100,c_limit'),
+              priority: FastImage.priority.normal,
+            } : theme?.images?.dummies?.businessLogo}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        </Logo>
+        <Information>
+          {!!order?.order_group_id && (
+            <OText>
+              <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
+            </OText>
+          )}
+          {!!order.business?.name && (
+            <OText numberOfLines={1} style={styles.title}>
+              {order.business?.name}
+            </OText>
+          )}
+          {!!order?.showNotification && (
+            <NotificationIcon>
+              <EntypoIcon
+                name="dot-single"
+                size={32}
+                color={theme.colors.primary}
+              />
+            </NotificationIcon>
+          )}
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+            <OText
+              style={styles.date}
+              color={theme.colors.unselectText}
+              numberOfLines={1}
+              adjustsFontSizeToFit
+            >
+              {(order?.order_group_id && order?.order_group && isLogisticOrder
+                  ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
+                  : (t('NO', 'Order No.') + order.id)
+                ) + ' · '}
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+            {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
+              <>
+                <OText> · </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>
+          {!isLogisticOrder && (
+            <MyOrderOptions>
+              <OText
+                style={styles.orderType}
+                mRight={5}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+              >
+                {order.delivery_type === 1
+                  ? t('DELIVERY', 'Delivery')
+                  : order.delivery_type === 2
+                    ? t('PICKUP', 'Pickup')
+                    : order.delivery_type === 3
+                      ? t('EAT_IN', 'Eat in')
+                      : order.delivery_type === 4
+                        ? t('CURBSIDE', 'Curbside')
+                        : t('DRIVER_THRU', 'Driver thru')}
+                {` · ${getOrderStatus(order.status)}`}
+              </OText>
+            </MyOrderOptions>
+          )}
+        </Information>
+      </Card>
+    </TouchableOpacity>
+  )
+}