ordering-ui-react-native 0.24.43-test → 0.25.1

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

@@ -3,9 +3,10 @@ import {
   StyleSheet,
   View,
   TouchableOpacity,
-  ActivityIndicator,
+  ActivityIndicator
 } 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 {
@@ -29,12 +30,14 @@ import { FloatingButton } from '../FloatingButton';
 import { GoogleMap } from '../GoogleMap';
 import { OButton, OModal, OText, OIcon } from '../shared';
 import { OrderDetailsParams } from '../../types';
-import { verifyDecimals, getProductPrice, getOrderStatus } from '../../utils';
+import { verifyDecimals, getProductPrice, getOrderStatus, getCurrenySymbol } from '../../utils';
 import { USER_TYPE } from '../../config/constants';
 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 +47,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     messagesReadList,
     handleAssignDriver,
-    handleChangeOrderStatus,
     isFromCheckout,
     driverLocation,
     actions,
     orderTitle,
     appTitle,
+    loadMessages,
+    notificationApp
   } = props;
 
   const theme = useTheme();
@@ -57,6 +61,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 +75,12 @@ 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]
+  const deliveryTypes = [1, 7]
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -120,12 +131,23 @@ 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()
+      }
+      return order
+    }
+  }
+
   const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
     if (name !== 'No') {
       const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
       return pos
-        ? `${quantity} x ${name} ${pos} +${parsePrice(price)}\n`
-        : `${quantity} x ${name} +${parsePrice(price)}\n`;
+        ? `${quantity} x ${name} ${pos} +${parsePrice(price, { currency: getCurrenySymbol(order?.currency) })}\n`
+        : `${quantity} x ${name} +${parsePrice(price, { currency: getCurrenySymbol(order?.currency) })}\n`;
     } else {
       return 'No\n';
     }
@@ -190,7 +212,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             ? 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')
       }\n`
       : '';
 
@@ -227,7 +255,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       order?.products.length &&
       order?.products.map((product: any, i: number) => {
         const string =
-          `${product?.quantity} X ${product?.name} ${parsePrice(product.total ?? getProductPrice(product))}\n${getOptions(product.options, product.comment)}`;
+          `${product?.quantity} X ${product?.name} ${parsePrice(product.total ?? getProductPrice(product), { currency: getCurrenySymbol(order?.currency) })}\n${getOptions(product.options, product.comment)}`;
 
         return i === 0 ? ` ${string}` : string
       });
@@ -240,19 +268,22 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
     const subtotal = `${t('SUBTOTAL', 'Subtotal')}: ${parsePrice(
       order?.subtotal,
+      { currency: getCurrenySymbol(order?.currency) }
     )}\n`;
 
     const drivertip = `${t('DRIVER_TIP', 'Driver tip')} ${parsePrice(
       order?.summary?.driver_tip || order?.totalDriverTip,
+      { currency: getCurrenySymbol(order?.currency) }
     )}\n`;
 
     const deliveryFee = `${t('DELIVERY_FEE', 'Delivery fee')} ${verifyDecimals(
       order?.service_fee,
       parseNumber,
-    )}% ${parsePrice(order?.summary?.service_fee || order?.serviceFee || 0)}\n`;
+    )}% ${parsePrice(order?.summary?.service_fee || order?.serviceFee || 0, { currency: getCurrenySymbol(order?.currency) })}\n`;
 
     const total = `${t('TOTAL', 'Total')} ${parsePrice(
       order?.summary?.total || order?.total,
+      { currency: getCurrenySymbol(order?.currency) }
     )}\n`;
 
     const orderStatus = `${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} ${t(
@@ -279,19 +310,59 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const handleOpenMessagesForBusiness = () => {
     setOpenModalForBusiness(true);
-    readMessages && readMessages();
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setUnreadAlert({ ...unreadAlert, business: false });
   };
 
-  const handleViewActionOrder = (action: string) => {
+  const handleViewActionOrder = async (action: string, options?: any) => {
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
+    if (options?.forceUpdateStatus) {
+      let bodyToSend: any = {};
+      const orderStatus: any = {
+        acceptByBusiness: {
+          status: 7,
+        },
+      };
+
+      if (actions && action === 'accept') {
+        bodyToSend = orderStatus[actions.accept];
+      }
+      bodyToSend.id = order?.id;
+      const _order = await handleChangeOrderStatus(bodyToSend?.status, bodyToSend)
+      if (!_order?.id) {
+        showToast(ToastType.Error, t('FAILED_TO_UPDATE_ORDER', 'Failed to update order'), 5000)
+        return
+      }
+    }
     setActionOrder(action);
     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 +371,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleCloseModal = () => {
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setOpenModalForBusiness(false);
   };
 
@@ -340,7 +413,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
@@ -353,7 +426,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
 
   useEffect(() => {
-    if (openModalForAccept) {
+    if (openModalForAccept && !loading) {
       setOpenModalForAccept(false);
     }
 
@@ -372,6 +445,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 +516,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
             isCustomView={props.isCustomView}
+            messages={messages}
+            messagesReadList={messagesReadList}
           />
           <OrderDetailsContainer
             keyboardShouldPersistTaps="handled"
@@ -439,7 +525,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <OrderContentComponent order={order} />
               {(order?.status === 7 || order?.status === 4) &&
-                order?.delivery_type === 1 && configs?.assign_driver_enabled?.value === '1' && (
+                deliveryTypes.includes(order?.delivery_type) && configs?.assign_driver_enabled?.value === '1' && (
                   <AssignDriver>
                     <OText style={{ marginBottom: 5 }} size={16} weight="600">
                       {t('ASSIGN_DRIVER', 'Assign driver')}
@@ -537,6 +623,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   messages={messages}
                   order={order}
                   setMessages={setMessages}
+                  notificationApp={notificationApp}
                 />
               </OModal>
 
@@ -580,7 +667,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             </>
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
-
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
@@ -588,7 +674,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <FloatingButton
                 btnText={t('REJECT', 'Reject')}
                 isSecondaryBtn={false}
-                secondButtonClick={() => handleViewActionOrder('accept')}
+                secondButtonClick={() => handleViewActionOrder('accept', { forceUpdateStatus: true })}
                 firstButtonClick={() => handleViewActionOrder('reject')}
                 secondBtnText={t('ACCEPT', 'Accept')}
                 secondButton={true}
@@ -597,7 +683,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 +693,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               disabled={loading}
             />
           )}
-          {order?.status === 4 && ![1].includes(order?.delivery_type) && (
+          {orderToComplete.includes(order?.status) && !deliveryTypes.includes(order?.delivery_type) && (
             <FloatingButton
               btnText={t(
                 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
@@ -618,7 +704,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}