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

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,7 +48,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     messagesReadList,
     handleAssignDriver,
-    handleChangeOrderStatus,
     isFromCheckout,
     driverLocation,
     actions,
@@ -57,6 +60,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 +74,10 @@ 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]
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -120,6 +128,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)})` : '';
@@ -291,7 +309,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,
@@ -372,6 +411,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,
@@ -410,7 +460,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </View>
         )}
 
-      {(!!error || error) && (
+      {(!!error || error?.length > 0) && (
         <NotFoundSource
           btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
           content={
@@ -607,7 +657,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',

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

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 //OrderingComponent
 import {
@@ -12,6 +13,8 @@ import {
   useToast,
   useSession,
   ToastType,
+  useUtils,
+  useConfig
 } from 'ordering-components/native';
 
 //Components
@@ -26,7 +29,7 @@ import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
 import { NotFoundSource } from '../NotFoundSource';
-import { getOrderStatus } from '../../utils';
+import { verifyDecimals, getProductPrice, getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
 //Styles
@@ -56,7 +59,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     isGrantedPermissions,
   } = props;
   const [, { showToast }] = useToast();
+  const [{ parsePrice, parseNumber }] = useUtils();
+  const [{ configs }] = useConfig();
+
   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();
@@ -76,12 +88,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const validStatusComplete = [9, 19, 23]
 
+  const pendingOrderStatus = [1, 4, 7, 13]
+
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
-    8: true,
+    8: !isHideRejectButtons,
     3: true,
-    18: true,
+    18: !isHideRejectButtons,
   };
 
   const showFloatButtonsAcceptOrReject: any = {
@@ -104,6 +118,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages && readMessages();
   };
 
+  const goToPermissionPage = () => {
+    navigation.navigate('RequestPermissions')
+  }
+
   const handleOpenMapView = async () => {
     if (!isGrantedPermissions) {
       navigation.navigate('RequestPermissions')
@@ -134,7 +152,174 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   };
 
+  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`;
+    } else {
+      return 'No\n';
+    }
+  };
+
+  const handleCopyClipboard = () => {
+    const businessName = !!order?.business?.name
+      ? `${order?.business?.name} \n`
+      : '';
+
+    const businessEmail = !!order?.business?.email
+      ? `${order?.business?.email} \n`
+      : '';
+
+    const businessCellphone = !!order?.business?.cellphone
+      ? `${order?.business?.cellphone} \n`
+      : '';
+
+    const businessPhone = !!order?.business?.phone
+      ? `${order?.business?.phone} \n`
+      : '';
+
+    const businessAddress = !!order?.business?.address
+      ? `${order?.business?.address} \n`
+      : '';
+
+    const businessSpecialAddress = !!order?.business?.address_notes
+      ? `${order?.business?.address_notes} \n \n`
+      : '';
+
+    const customerName = !!order?.customer?.name
+      ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${order?.customer?.lastname || ''
+      } ${order?.customer?.second_lastname || ''} \n`
+      : '';
+
+    const customerEmail = !!order?.customer.email
+      ? `${order?.customer.email} \n`
+      : '';
+
+    const customerCellPhone = !!order?.customer?.cellphone
+      ? `${order?.customer?.cellphone} \n`
+      : '';
+
+    const customerPhone = !!order?.customer?.phone
+      ? `${order?.customer?.phone} \n`
+      : '';
+
+    const customerAddress = !!order?.customer?.address
+      ? `${order?.customer?.address} \n`
+      : '';
+
+    const customerSpecialAddress = !!order?.customer?.address_notes
+      ? `${order?.customer?.address_notes} \n`
+      : '';
+
+    const payment = order?.paymethod?.name
+      ? `${order?.paymethod?.name} - ${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')
+      }\n`
+      : '';
+
+    const getSuboptions = (suboptions: any) => {
+      const array: any = []
+      suboptions?.length > 0 &&
+        suboptions?.map((suboption: any) => {
+          const string = `${getFormattedSubOptionName(suboption)}`
+          array.push(string)
+        })
+
+      return array.join('')
+    }
+
+    const getOptions = (options: any, productComment: string = '') => {
+      const array: any = [];
+
+      options?.length &&
+        options?.map((option: any) => {
+          const string =
+            `  ${option.name}\n    ${getSuboptions(option.suboptions)}`;
+
+          array.push(string)
+        })
+
+      if (productComment) {
+        array.push(`  ${t('COMMENT', 'Comment')}\n    ${productComment}\n`)
+      }
+
+      return array.join('')
+    }
+
+    const productsInArray =
+      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)}`;
+
+        return i === 0 ? ` ${string}` : string
+      });
+
+    const productsInString = productsInArray.join(' ');
+    const orderDetails = `${t(
+      'ORDER_DETAILS',
+      'Order Details',
+    )}:\n${productsInString}\n`;
+
+    const subtotal = `${t('SUBTOTAL', 'Subtotal')}: ${parsePrice(
+      order?.subtotal,
+    )}\n`;
+
+    const drivertip = `${t('DRIVER_TIP', 'Driver tip')} ${parsePrice(
+      order?.summary?.driver_tip || order?.totalDriverTip,
+    )}\n`;
+
+    const deliveryFee = `${t('DELIVERY_FEE', 'Delivery fee')} ${verifyDecimals(
+      order?.service_fee,
+      parseNumber,
+    )}% ${parsePrice(order?.summary?.service_fee || order?.serviceFee || 0)}\n`;
+
+    const total = `${t('TOTAL', 'Total')} ${parsePrice(
+      order?.summary?.total || order?.total,
+    )}\n`;
+
+    const orderStatus = `${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} ${t(
+      'IS',
+      'is',
+    )} ${getOrderStatus(order?.status, t)?.value}\n`;
+
+    Clipboard.setString(
+      `${orderStatus} ${payment} ${t(
+        'BUSINESS_DETAILS',
+        'Business Details',
+      )}\n ${businessName} ${businessEmail} ${businessCellphone} ${businessPhone} ${businessAddress} ${businessSpecialAddress}${t(
+        'CUSTOMER_DETAILS',
+        'Customer Details',
+      )}\n ${customerName} ${customerEmail} ${customerCellPhone} ${customerPhone} ${customerAddress} ${customerSpecialAddress}\n${orderDetails} ${subtotal} ${drivertip} ${deliveryFee} ${total}`,
+    );
+
+    showToast(
+      ToastType.Info,
+      t('COPY_TO_CLIPBOARD', 'Copy to clipboard.'),
+      1000,
+    );
+  };
+
   const handleViewActionOrder = (action: string) => {
+    if (action === 'reject' && !isAllowedDriverRejectOrder) {
+      setAlertState({
+        open: true,
+        content: [
+          t('DRIVER_NOT_ALLOWED_TO_REJECT_ORDER', 'The driver is not allowed to reject an order.'),
+        ],
+        key: null,
+      })
+      return
+    }
     if (!isGrantedPermissions) {
       navigation.navigate('RequestPermissions')
       return
@@ -151,6 +336,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleArrowBack: any = () => {
+    if (alertState?.open && !isAllowedDriverRejectOrder && !pendingOrderStatus.includes(order?.status)) {
+      setAlertState({
+        ...alertState,
+        open: false
+      })
+      return
+    }
     navigation?.canGoBack() && navigation.goBack();
   };
 
@@ -204,7 +396,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [props.order?.loading]);
 
   useEffect(() => {
-    if (order?.driver === null && session?.user?.level === 4) {
+    if (order?.driver_id === null && session?.user?.level === 4) {
       setAlertState({
         open: true,
         content: [
@@ -293,13 +485,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               textStyle={{ color: theme.colors.primary }}
               text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
               onClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(3)
+                handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(3) : goToPermissionPage()
               }
               imgLeftStyle={{ tintColor: theme.colors.backArrow }}
             />
           </Pickup>
         )}
-        {order?.status === 3 && order?.delivery_type === 1 && (
+        {order?.status === 3 && order?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady && (
           <View style={{ paddingVertical: 20, marginBottom: 20 }}>
             <OButton
               style={styles.btnPickUp}
@@ -344,7 +536,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </View>
         )}
 
-      {(!!props.order?.error || props.order?.error) && (
+      {(!!props.order?.error || props.order?.error?.length > 0) && (
         <NotFoundSource
           btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
           content={
@@ -362,6 +554,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               order={order}
               handleOpenMapView={handleOpenMapView}
               handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
+              handleCopyClipboard={handleCopyClipboard}
               getOrderStatus={getOrderStatus}
               handleArrowBack={handleArrowBack}
               logisticOrderStatus={logisticOrderStatus}
@@ -384,7 +577,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     btnText={t('PICKUP_FAILED', 'Pickup failed')}
                     isSecondaryBtn={false}
                     secondButtonClick={() =>
-                      handleChangeOrderStatus && handleChangeOrderStatus(9)
+                      handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(9) : goToPermissionPage()
                     }
                     firstButtonClick={() =>
                       handleViewActionOrder && handleViewActionOrder('pickupFailed')
@@ -393,7 +586,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     secondButton={true}
                     firstColorCustom={theme.colors.red}
                     secondColorCustom={theme.colors.green}
-                    widthButton={'45%'}
+                    widthButton={isHideRejectButtons || !isEnabledFailedPickupDriver ? '100%' : '45%'}
+                    isHideRejectButtons={isHideRejectButtons || !isEnabledFailedPickupDriver}
                   />
                 )}
                 {(validStatusComplete.includes(order?.status)) && (
@@ -403,7 +597,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
                       isSecondaryBtn={false}
                       secondButtonClick={() =>
-                        handleChangeOrderStatus && handleChangeOrderStatus(11)
+                        handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(11) : goToPermissionPage()
                       }
                       firstButtonClick={() =>
                         handleViewActionOrder && handleViewActionOrder('deliveryFailed')
@@ -412,7 +606,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       secondButton={true}
                       firstColorCustom={theme.colors.red}
                       secondColorCustom={theme.colors.green}
-                      widthButton={'45%'}
+                      widthButton={isHideRejectButtons ? '100%' : '45%'}
+                      isHideRejectButtons={isHideRejectButtons}
                     />
                   </>
                 )}
@@ -420,13 +615,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <FloatingButton
                     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={'45%'}
+                    widthButton={isHideRejectButtons ? '100%' : '45%'}
+                    isHideRejectButtons={isHideRejectButtons}
                   />
                 )}
               </>