ordering-ui-react-native 0.22.51 → 0.22.52-release

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

@@ -154,3 +154,17 @@ export const Actions = styled.View`
 export const InputContainer = styled.View`
   position: relative;
 `
+
+export const FilterAlert = styled.View`
+  position: absolute;
+  z-index: 1000;
+  flex-direction: row;
+  top: 50px;
+  background-color: #FFF9E2;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  right: 10px;
+  padding: 5px;
+  border-radius: 10px
+`

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
+import FastImage from 'react-native-fast-image';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { Card, Logo, Information, Header, Badge } from './styles';
@@ -201,6 +202,24 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
         value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
         slug: 'ORDER_DRIVER_ON_WAY',
         percentage: 45
+      },
+      {
+        key: 24,
+        value: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+        slug: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+        percentage: 25
+      },
+      {
+        key: 25,
+        value: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+        slug: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+        percentage: 25
+      },
+      {
+        key: 26,
+        value: t('ORDER_DRIVER_ARRIVED_CUSTOMER', 'Driver arrived to customer'),
+        slug: 'ORDER_DRIVER_ARRIVED_CUSTOMER',
+        percentage: 80
       }
     ];
 
@@ -284,10 +303,14 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
               activeOpacity={1}>
               <Card key={order?.id}>
                 <Logo style={styles.logo}>
-                  <OIcon
-                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                    src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
+                  <FastImage
                     style={styles.icon}
+                    source={order.business?.logo?.includes('https') ? {
+                      uri: order.business?.logo,
+                      priority: FastImage.priority.high,
+                      cache: FastImage.cacheControl.immutable
+                    } : order.business?.logo ?? theme?.images?.dummies?.businessLogo}
+                    resizeMode={FastImage.resizeMode.cover}
                   />
                 </Logo>
                 <Information>

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

@@ -58,9 +58,14 @@ export const OrderItem = React.memo((props: any) => {
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      paddingVertical: (isIpad || isTablet) ? 20 : 0,
-      marginBottom: IS_PORTRAIT ? 25 : 0,
+      paddingVertical: (isIpad || isTablet) ? 20 : 15,
+      marginBottom: IS_PORTRAIT ? 15 : 0,
       marginLeft: 3,
+      backgroundColor: order?.time_status === 'delayed'
+        ? theme.colors.danger100
+        : order?.time_status === 'at_risk'
+          ? theme.colors.warning100
+          : '#fff'
     },
     icon: {
       borderRadius: 7.6,
@@ -77,7 +82,6 @@ export const OrderItem = React.memo((props: any) => {
       marginLeft: 3,
     },
     title: {
-      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
@@ -85,7 +89,6 @@ export const OrderItem = React.memo((props: any) => {
       color: theme.colors.textGray,
     },
     date: {
-      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -150,17 +153,18 @@ export const OrderItem = React.memo((props: any) => {
             timeState={order?.time_status}
           />
         )}
-        <Logo style={styles.logo}>
+        <Logo style={styles.logo} hasExternalAndGroup={showExternalId && order?.order_group_id}>
           <FastImage
             style={styles.icon}
             source={order.business?.logo?.includes('https') ? {
               uri: order.business?.logo,
-              priority: FastImage.priority.normal,
+              priority: FastImage.priority.high,
+              cache: FastImage.cacheControl.immutable
             } : order.business?.logo ?? theme?.images?.dummies?.businessLogo}
             resizeMode={FastImage.resizeMode.cover}
           />
         </Logo>
-        <Information>
+        <Information hasExternalAndGroup={showExternalId && order?.order_group_id}>
           {!!order?.order_group_id && (
             <OText>
               <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
@@ -180,34 +184,36 @@ export const OrderItem = React.memo((props: any) => {
               />
             </NotificationIcon>
           )}
-          <View style={{ flexDirection: `${showExternalId ? 'column' : 'row'}`, flexWrap: 'wrap' }}>
-            {!order?.order_group_id && showExternalId && !order?.order_group && (
+          <View>
+            {showExternalId && (
               <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}
+                {`${order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}` + ' · ' + `${order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })
+                  }`}
               </OText>
             )}
-            <OText
+            {!showExternalId && (<OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {!showExternalId && ((!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {((!!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
+              ) + ' · ' + `${order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}
+                : parseDate(order?.delivery_datetime, { utc: false })}`)}
             </OText>
-            {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
+            )}
+            {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress' || currentTabSelected === 'active') && allowColumns?.timer) && (
               <>
-                {!showExternalId && <OText> · </OText>}
                 <OText
                   style={styles.date}
                   color={
@@ -240,7 +246,13 @@ export const OrderItem = React.memo((props: any) => {
                       ? t('EAT_IN', 'Eat in')
                       : order.delivery_type === 4
                         ? t('CURBSIDE', 'Curbside')
-                        : t('DRIVER_THRU', 'Driver thru')}
+                        : order.delivery_type === 5
+                          ? t('DRIVER_THRU', 'Driver thru')
+                          : order.delivery_type === 7
+                            ? t('CATERING_DELIVERY', 'Catering delivery')
+                            : order.delivery_type === 8
+                              ? t('CATERING_PICKUP', 'Catering pickup')
+                              : t('DELIVERY', 'Delivery')}
                 {` · ${getOrderStatus(order.status)}`}
               </OText>
             </MyOrderOptions>

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

@@ -11,6 +11,7 @@ import { OrdersList } from './OrderList';
 import { AcceptOrRejectOrder } from '../AcceptOrRejectOrder';
 import { ReviewCustomer } from '../ReviewCustomer';
 import { GoogleMap } from '../GoogleMap';
+import { useOfflineActions } from '../../../../../src/context/OfflineActions';
 
 export const PreviousOrders = (props: any) => {
   const {
@@ -32,7 +33,7 @@ export const PreviousOrders = (props: any) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ configs }] = useConfig();
-
+  const [{ isNetConnected, canSaveChangesOffline }] = useOfflineActions()
 
   // const [, setCurrentTime] = useState()
   const [openModal, setOpenModal] = useState(false)
@@ -41,12 +42,14 @@ export const PreviousOrders = (props: any) => {
   const [orderUpdateStatus, setOrderUpdateStatus] = useState<any>({ action: '', ids: [], body: {}, order: {} })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
-  const viewMapStatus = [9, 18, 19, 23]
+  const viewMapStatus = [9, 18, 19, 23, 26]
+  const deliveryTypes = [1, 7]
   const deliveryPickupBtn = props.appTitle?.text?.includes('Delivery') && [3, 8, 18]
-  const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23]
+  const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23, 26]
   const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1' && !isBusinessApp
   const isEnabledOrderNotReady = configs?.order_not_ready_enabled?.value === '1'
   const isEnabledFailedPickupDriver = configs?.failed_pickup_by_driver_enabled?.value === '1'
+  const disabledActionsByInternet = !isNetConnected && canSaveChangesOffline === false
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -172,7 +175,7 @@ export const PreviousOrders = (props: any) => {
                       }
                       )
                   }
-                  {_ordersGrouped[k][0]?.status === 0 && (
+                  {_ordersGrouped[k][0]?.status === 0 && !disabledActionsByInternet && (
                     <AcceptOrRejectOrderStyle>
                       {!isHideRejectButtons && (
                         <OButton
@@ -208,7 +211,7 @@ export const PreviousOrders = (props: any) => {
                       />
                     </AcceptOrRejectOrderStyle>
                   )}
-                  {_ordersGrouped[k][0]?.status === 7 && (
+                  {_ordersGrouped[k][0]?.status === 7 && !disabledActionsByInternet && (
                     <View>
                       <OButton
                         text={t('READY_FOR_PICKUP', 'Ready for pickup')}
@@ -226,7 +229,7 @@ export const PreviousOrders = (props: any) => {
                     </View>
                   )}
                   {(_ordersGrouped[k][0]?.status === 8 || _ordersGrouped[k][0]?.status === 18) &&
-                    _ordersGrouped[k][0]?.delivery_type === 1 &&
+                    deliveryTypes?.includes(_ordersGrouped[k][0]?.delivery_type) && !disabledActionsByInternet &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -244,7 +247,8 @@ export const PreviousOrders = (props: any) => {
                         />
                       </AcceptOrRejectOrderStyle>
                     )}
-                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady &&
+                  {_ordersGrouped[k][0]?.status === 3 && deliveryTypes?.includes(_ordersGrouped[k][0]?.delivery_type) && !isHideRejectButtons && isEnabledOrderNotReady &&
+                    !disabledActionsByInternet &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -282,6 +286,7 @@ export const PreviousOrders = (props: any) => {
                     )}
                   {_ordersGrouped[k][0]?.status === 4 &&
                     ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
+                    !disabledActionsByInternet &&
                     (
                       <AcceptOrRejectOrderStyle>
                         {!isHideRejectButtons && (
@@ -316,6 +321,7 @@ export const PreviousOrders = (props: any) => {
                     )}
                   {!_ordersGrouped[k][0]?.user_review &&
                     pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
+                    !disabledActionsByInternet &&
                     (
                       <OButton
                         text={t('REVIEW_CUSTOMER', 'Review customer')}
@@ -332,74 +338,76 @@ export const PreviousOrders = (props: any) => {
                         })}
                       />
                     )}
-                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver && (
-                    <AcceptOrRejectOrderStyle>
-                      {!isHideRejectButtons && isEnabledOrderNotReady && (
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver &&
+                    !disabledActionsByInternet && (
+                      <AcceptOrRejectOrderStyle>
+                        {!isHideRejectButtons && isEnabledOrderNotReady && (
+                          <OButton
+                            text={t('PICKUP_FAILED', 'Pickup failed')}
+                            bgColor={theme.colors.danger100}
+                            borderColor={theme.colors.danger100}
+                            imgRightSrc={null}
+                            style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                            parentStyle={{ width: '45%' }}
+                            textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                            onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                              action: 'pickupFailed',
+                              order: _ordersGrouped[k][0],
+                              ids: _ordersGrouped[k].map((o: any) => o.id),
+                              handleChangeOrderStatus
+                            })}
+                          />
+                        )}
                         <OButton
-                          text={t('PICKUP_FAILED', 'Pickup failed')}
-                          bgColor={theme.colors.danger100}
-                          borderColor={theme.colors.danger100}
+                          text={t('PICKUP_COMPLETE', 'Pickup complete')}
+                          bgColor={theme.colors.success100}
+                          borderColor={theme.colors.success100}
                           imgRightSrc={null}
                           style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                          parentStyle={{ width: '45%' }}
-                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                            action: 'pickupFailed',
-                            order: _ordersGrouped[k][0],
-                            ids: _ordersGrouped[k].map((o: any) => o.id),
-                            handleChangeOrderStatus
-                          })}
+                          parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
+                          textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => handleChangeOrderStatus(
+                            9,
+                            _ordersGrouped[k].map((o: any) => o.id),
+                          )}
                         />
-                      )}
-                      <OButton
-                        text={t('PICKUP_COMPLETE', 'Pickup complete')}
-                        bgColor={theme.colors.success100}
-                        borderColor={theme.colors.success100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
-                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => handleChangeOrderStatus(
-                          9,
-                          _ordersGrouped[k].map((o: any) => o.id),
+                      </AcceptOrRejectOrderStyle>
+                    )}
+                  {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) &&
+                    !disabledActionsByInternet && (
+                      <AcceptOrRejectOrderStyle>
+                        {!isHideRejectButtons && (
+                          <OButton
+                            text={t('DELIVERY_FAILED', 'Delivery Failed')}
+                            bgColor={theme.colors.danger100}
+                            borderColor={theme.colors.danger100}
+                            imgRightSrc={null}
+                            style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                            parentStyle={{ width: '45%' }}
+                            textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                            onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                              action: 'deliveryFailed',
+                              order: _ordersGrouped[k][0],
+                              ids: _ordersGrouped[k].map((o: any) => o.id),
+                              handleChangeOrderStatus
+                            })}
+                          />
                         )}
-                      />
-                    </AcceptOrRejectOrderStyle>
-                  )}
-                  {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
-                    <AcceptOrRejectOrderStyle>
-                      {!isHideRejectButtons && (
                         <OButton
-                          text={t('DELIVERY_FAILED', 'Delivery Failed')}
-                          bgColor={theme.colors.danger100}
-                          borderColor={theme.colors.danger100}
+                          text={t('DELIVERY_COMPLETE', 'Delivery complete')}
+                          bgColor={theme.colors.success100}
+                          borderColor={theme.colors.success100}
                           imgRightSrc={null}
                           style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                          parentStyle={{ width: '45%' }}
-                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                            action: 'deliveryFailed',
-                            order: _ordersGrouped[k][0],
-                            ids: _ordersGrouped[k].map((o: any) => o.id),
-                            handleChangeOrderStatus
-                          })}
+                          parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
+                          textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => handleChangeOrderStatus(
+                            11,
+                            _ordersGrouped[k].map((o: any) => o.id),
+                          )}
                         />
-                      )}
-                      <OButton
-                        text={t('DELIVERY_COMPLETE', 'Delivery complete')}
-                        bgColor={theme.colors.success100}
-                        borderColor={theme.colors.success100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
-                        textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => handleChangeOrderStatus(
-                          11,
-                          _ordersGrouped[k].map((o: any) => o.id),
-                        )}
-                      />
-                    </AcceptOrRejectOrderStyle>
-                  )}
+                      </AcceptOrRejectOrderStyle>
+                    )}
                 </OrdersGroupedItem>
               ))}
             </View>

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

@@ -10,6 +10,7 @@ export const Card = styled.View`
 export const Logo = styled.View`
   height: 65px;
   width: 65px;
+  align-self: ${({ hasExternalAndGroup }: any) => hasExternalAndGroup ? 'center' : 'auto'};
 `;
 
 export const Information = styled.View`
@@ -17,7 +18,7 @@ export const Information = styled.View`
   justify-content: flex-start;
   margin-horizontal: 5px;
   flex: 1;
-  max-height: 60px;
+  max-height: ${({ hasExternalAndGroup }: any) => hasExternalAndGroup ? '75px' : '60px'};
 `;
 
 export const MyOrderOptions = styled.View`

package/themes/business/src/components/PrinterEdition/MessageAlert.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+import { useTheme } from 'styled-components/native'
+import { OText } from '../shared'
+
+export const MessageAlert = ({ message, resetMsg }: any) => {
+  const theme = useTheme()
+
+  const [text, setText] = useState(message)
+
+  useEffect(() => {
+    setText(message)
+  }, [message])
+
+  useEffect(() => {
+    if (text) {
+      setTimeout(() => {
+        setText(null)
+        resetMsg()
+      }, 2000);
+    }
+  }, [text])
+
+  return (
+    text ? (
+      <OText
+        size={14}
+        color={theme.colors.danger500}
+      >
+        {text}
+      </OText>
+    ) : null
+  )
+}