ordering-ui-react-native 0.18.55 → 0.18.56-crash-driver-1

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';
@@ -21,7 +21,13 @@ import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrienta
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
-export const OrderItem = (props: any) => {
+function OrderItemPropsAreEqual(prevProps: any, nextProps: any) {
+  return JSON.stringify(prevProps.order) === JSON.stringify(nextProps.order) &&
+    JSON.stringify(prevProps._order) === JSON.stringify(nextProps._order) &&
+    prevProps.currentTabSelected === nextProps.currentTabSelected
+}
+
+export const OrderItem = React.memo((props: any) => {
   const {
     order,
     _order,
@@ -41,6 +47,7 @@ export const OrderItem = (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
@@ -70,7 +77,7 @@ export const OrderItem = (props: any) => {
       marginLeft: 3,
     },
     title: {
-      marginBottom: 6,
+      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
@@ -78,7 +85,7 @@ export const OrderItem = (props: any) => {
       color: theme.colors.textGray,
     },
     date: {
-      marginBottom: 6,
+      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -97,10 +104,10 @@ export const OrderItem = (props: 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' })
+      ? 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)
   }
 
@@ -114,7 +121,7 @@ export const OrderItem = (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
 
@@ -122,12 +129,6 @@ export const OrderItem = (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({
@@ -138,33 +139,24 @@ export const OrderItem = (props: any) => {
   }, [configState.loading])
 
   return (
-    <TouchableOpacity
-      activeOpacity={1}
+    <Pressable
       disabled={order?.locked && isLogisticOrder}
       style={styles.cardButton}
       onPress={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
     >
       <Card key={order.id}>
-        {allowColumns?.slaBar && (
+        {!!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>
@@ -188,32 +180,42 @@ export const OrderItem = (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
-                  ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
-                  : (t('NO', 'Order No.') + order.id)
-                ) + ' · '}
+              {!showExternalId && ((!!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)
                 : parseDate(order?.delivery_datetime, { utc: false })}
             </OText>
             {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
               <>
-                <OText> · </OText>
+                {!showExternalId && <OText> · </OText>}
                 <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'
                           : ''}
                 >
@@ -245,6 +247,6 @@ export const OrderItem = (props: any) => {
           )}
         </Information>
       </Card>
-    </TouchableOpacity>
+    </Pressable>
   )
-}
+}, OrderItemPropsAreEqual)

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

@@ -0,0 +1,93 @@
+import React from 'react'
+import { View } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { OButton } from '../shared';
+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.currentOrdenSelected) === JSON.stringify(nextProps.currentOrdenSelected) &&
+        prevProps.currentTabSelected === nextProps.currentTabSelected
+}
+
+export const OrdersList = React.memo((props: any) => {
+    const {
+        order,
+        _order,
+        hideBtns,
+        currentOrdenSelected,
+        isLogisticOrder,
+        handlePressOrder,
+        currentTabSelected,
+        getOrderStatus,
+        handleClickLogisticOrder
+    } = props
+
+    const theme = useTheme()
+    const [, t] = useLanguage()
+    const [{ configs }] = useConfig();
+
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
+
+    return (
+        <View
+            style={{
+                backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
+                marginBottom: isLogisticOrder ? 10 : 0
+            }}
+        >
+            <OrderItem
+                order={order}
+                _order={_order}
+                isLogisticOrder={isLogisticOrder}
+                handlePressOrder={handlePressOrder}
+                currentTabSelected={currentTabSelected}
+                getOrderStatus={getOrderStatus}
+            />
+            {isLogisticOrder && !hideBtns && (
+                <AcceptOrRejectOrderStyle>
+                    {!!order?.order_group_id && !!order?.order_group ? (
+                        <OButton
+                            text={t('VIEW_ORDER', 'View order')}
+                            onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+                            bgColor={theme.colors.blueLight}
+                            borderColor={theme.colors.blueLight}
+                            imgRightSrc={null}
+                            style={{ borderRadius: 7, height: 40 }}
+                            parentStyle={{ width: '100%' }}
+                            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)}
+                                bgColor={theme.colors.green}
+                                borderColor={theme.colors.green}
+                                imgRightSrc={null}
+                                style={{ borderRadius: 7, height: 40 }}
+                                parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
+                                textStyle={{ color: theme.colors.white }}
+                            />
+                        </>
+                    )}
+                </AcceptOrRejectOrderStyle>
+            )}
+        </View>
+    )
+}, OrderListPropsAreEqual)

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

@@ -88,7 +88,7 @@ export const OrdersGroupedItem = (props: any) => {
                 adjustsFontSizeToFit
               >
                 {orders[0]?.delivery_datetime_utc
-                  ? parseDate(orders[0]?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
+                  ? parseDate(orders[0]?.delivery_datetime_utc)
                   : parseDate(orders[0]?.delivery_datetime, { utc: false })}
               </OText>
             </View>