ordering-ui-react-native 0.21.74-test → 0.21.75-release

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

@@ -1,52 +1,52 @@
-import React from 'react';
-import { View } from 'react-native';
-import { OButton, OIcon, OText } from '../shared';
-import { NotFoundSourceParams } from '../../types';
-import { useTheme } from 'styled-components/native';
-import { NotFound, NotFoundImage } from './styles';
-
-export const NotFoundSource = (props: NotFoundSourceParams) => {
-  const { image, content, btnTitle, conditioned, onClickButton, textSize } = props;
-  const theme = useTheme();
-
-  const errorImage = image || theme.images.general.notFound;
-
-  return (
-    <NotFound>
-      {errorImage && (
-        <NotFoundImage>
-          <OIcon src={errorImage} width={260} height={220} />
-        </NotFoundImage>
-      )}
-      {!!content && conditioned && !errorImage && (
-        <OText
-          color={theme.colors.textSecondary}
-          size={textSize ?? 18}
-          style={{ textAlign: 'center' }}>
-          {content}
-        </OText>
-      )}
-      {!!content && !conditioned && (
-        <OText
-          color={theme.colors.textSecondary}
-          size={textSize ?? 18}
-          style={{ textAlign: 'center' }}>
-          {content}
-        </OText>
-      )}
-      {!onClickButton && props.children && props.children}
-      {onClickButton && (
-        <View style={{ marginTop: 10, width: '100%' }}>
-          <OButton
-            style={{ width: '100%', height: 50, borderRadius: 7.6 }}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            onClick={() => onClickButton()}
-            text={btnTitle}
-            textStyle={{ color: theme.colors.white }}
-          />
-        </View>
-      )}
-    </NotFound>
-  );
-};
+import React from 'react';
+import { View } from 'react-native';
+import { OButton, OIcon, OText } from '../shared';
+import { NotFoundSourceParams } from '../../types';
+import { useTheme } from 'styled-components/native';
+import { NotFound, NotFoundImage } from './styles';
+
+export const NotFoundSource = (props: NotFoundSourceParams) => {
+  const { image, content, btnTitle, conditioned, onClickButton, textSize } = props;
+  const theme = useTheme();
+
+  const errorImage = image || theme.images.general.notFound;
+
+  return (
+    <NotFound>
+      {errorImage && (
+        <NotFoundImage>
+          <OIcon src={errorImage} width={260} height={220} />
+        </NotFoundImage>
+      )}
+      {!!content && conditioned && !errorImage && (
+        <OText
+          color={theme.colors.textSecondary}
+          size={textSize ?? 18}
+          style={{ textAlign: 'center' }}>
+          {content}
+        </OText>
+      )}
+      {!!content && !conditioned && (
+        <OText
+          color={theme.colors.textSecondary}
+          size={textSize ?? 18}
+          style={{ textAlign: 'center' }}>
+          {content}
+        </OText>
+      )}
+      {!onClickButton && props.children && props.children}
+      {onClickButton && (
+        <View style={{ marginTop: 10, width: '100%' }}>
+          <OButton
+            style={{ width: '100%', height: 50, borderRadius: 7.6 }}
+            bgColor={theme.colors.primary}
+            borderColor={theme.colors.primary}
+            onClick={() => onClickButton()}
+            text={btnTitle}
+            textStyle={{ color: theme.colors.white }}
+          />
+        </View>
+      )}
+    </NotFound>
+  );
+};

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

@@ -1,17 +1,17 @@
-import styled from 'styled-components/native';
-
-export const NotFound = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: auto;
-  margin: 30px auto;
-  padding: 10px;
-  background-color: #f7f7f7;
-`;
-
-export const NotFoundImage = styled.View`
-  max-width: 300px;
-`;
+import styled from 'styled-components/native';
+
+export const NotFound = styled.View`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  margin: 30px auto;
+  padding: 10px;
+  background-color: #f7f7f7;
+`;
+
+export const NotFoundImage = styled.View`
+  max-width: 300px;
+`;

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,12 +48,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     messagesReadList,
     handleAssignDriver,
-    handleChangeOrderStatus,
     isFromCheckout,
     driverLocation,
     actions,
     orderTitle,
     appTitle,
+    loadMessages,
+    notificationApp
   } = props;
 
   const theme = useTheme();
@@ -57,6 +62,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 +76,11 @@ 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]
+  const orderToReady = [7, 14]
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -120,6 +131,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)})` : '';
@@ -279,7 +300,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const handleOpenMessagesForBusiness = () => {
     setOpenModalForBusiness(true);
-    readMessages && readMessages();
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setUnreadAlert({ ...unreadAlert, business: false });
   };
 
@@ -291,7 +313,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,
@@ -300,6 +343,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleCloseModal = () => {
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setOpenModalForBusiness(false);
   };
 
@@ -340,7 +385,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     },
     {
       ...order?.customer?.location,
-      title: order?.customer?.name ??  t('CUSTOMER', 'Customer'),
+      title: order?.customer?.name ?? t('CUSTOMER', 'Customer'),
       address: {
         addressName: order?.customer?.address,
         zipcode: order?.customer?.zipcode
@@ -372,6 +417,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,
@@ -432,6 +488,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
             isCustomView={props.isCustomView}
+            messages={messages}
+            messagesReadList={messagesReadList}
           />
           <OrderDetailsContainer
             keyboardShouldPersistTaps="handled"
@@ -537,6 +595,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   messages={messages}
                   order={order}
                   setMessages={setMessages}
+                  notificationApp={notificationApp}
                 />
               </OModal>
 
@@ -580,7 +639,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             </>
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
-
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
@@ -597,7 +655,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 widthButton={'45%'}
               />
             )}
-          {order?.status === 7 && (
+          {orderToReady.includes(order?.status) && (
             <FloatingButton
               btnText={t('READY_FOR_PICKUP', 'Ready for pickup')}
               colorTxt1={theme.colors.primary}
@@ -607,7 +665,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',
@@ -618,7 +676,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               secondButtonClick={() => handleChangeOrderStatus?.(15)}
               firstButtonClick={() => handleChangeOrderStatus?.(17)}
               secondBtnText={t(
-                'PICKUP_COMPLETED_BY_CUSTOMER',
+                'ORDER_PICKUP_COMPLETED_BY_CUSTOMER',
                 'Pickup completed by customer',
               )}
               secondButton={true}

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();
@@ -425,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,
@@ -475,7 +488,7 @@ 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}
@@ -488,7 +501,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             />
           </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}
@@ -532,20 +545,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             ))}
           </View>
         )}
-
-      {(!!props.order?.error || props.order?.error?.length > 0) && (
-        <NotFoundSource
-          btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
-          content={
-            props.order.error[0] ||
-            props.order.error ||
-            t('NETWORK_ERROR', 'Network Error')
-          }
-          onClickButton={() => navigation.navigate('Orders')}
-        />
-      )}
       {!((!order || Object.keys(order).length === 0) &&
-        (props.order?.error?.length < 1 || !props.order?.error)) && (
+        (props.order?.error?.length < 1 || !props.order?.error)) && order?.id && (
           <View style={{ flex: 1 }}>
             <OrderHeaderComponent
               order={order}
@@ -583,8 +584,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)) && (
@@ -603,22 +604,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}
                   />
                 )}
@@ -684,11 +686,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   actions={actions}
                   orderTitle={orderTitle}
                   appTitle={appTitle}
+                  isLoadingOrder={props.order?.loading}
                 />
               </OModal>
             )}
           </View>
         )}
+
+      {(!!props.order?.error || props.order?.error?.length > 0) && (
+        <NotFoundSource
+          btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+          content={
+            props.order.error[0] ||
+            props.order.error ||
+            t('NETWORK_ERROR', 'Network Error')
+          }
+          onClickButton={() => navigation.navigate('Orders')}
+        />
+      )}
       {alertState?.open && (
         <Alert
           open={alertState.open}