ordering-ui-react-native 0.17.54 → 0.17.55-release

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

@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from 'react'
 import moment from 'moment'
-import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
+import { NewOrderNotification as NewOrderNotificationController, useApi, useEvent, useLanguage, useSession } from 'ordering-components/native'
+import React, { useEffect, useState } from 'react'
+import { Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
 import { useTheme } from 'styled-components/native'
-import { useEvent, useLanguage, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
 
-import { OText, OIcon } from '../shared'
-import { NotificationContainer } from './styles'
 import { useLocation } from '../../hooks/useLocation'
+import { OIcon, OText } from '../shared'
+import { NotificationContainer } from './styles'
 
-Sound.setCategory('Playback')
+Sound.setCategory('Playback', true)
+Sound.setMode('Default')
 
 const windowWidth = Dimensions.get('screen').width
 
@@ -44,9 +45,10 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification);
+  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
 
   let _timeout: any = null
+  let times = 0
 
   const handleCloseEvents = () => {
     notificationSound.stop()
@@ -56,15 +58,22 @@ const NewOrderNotificationUI = (props: any) => {
 
   const handlePlayNotificationSound = (eventObj: any = null) => {
     setCurrentEvent(eventObj)
-    let times = 1
-    if (times < SOUND_LOOP) {
-      _timeout = setInterval(() => {
-        notificationSound.setVolume(1).play(success => success && (times = times + 1))
-        if (times === SOUND_LOOP) {
-          clearInterval(_timeout)
-        }
-      }, 2500)
+    if (times > 0) {
+      if (times === 3) {
+        times = 0
+        return
+      }
+      return
     }
+    _timeout = setInterval(() => {
+      if (times < SOUND_LOOP) {
+        notificationSound.play()
+        times++
+      } else {
+        clearInterval(_timeout)
+        return
+      }
+    }, 2500)
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -74,32 +83,37 @@ const NewOrderNotificationUI = (props: any) => {
         await fetch(`${ordering.root}/users/${user.id}/locations`, {
           method: 'POST',
           body: JSON.stringify({
-            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+            location: JSON.stringify({ location: `{lat: ${location.latitude}, lng: ${location.longitude}}` })
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch {}
+      } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
-      if (assignedSecondsDiff < 5 && !isBusinessApp) {
+      if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
         handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
     if (evtType === 3 || value.author_id === user.id) return
-    handlePlayNotificationSound({
+    setTimeout(() => handlePlayNotificationSound({
       evt: evtType,
-      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
-    })
+      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id
+    }), 1000)
   }
 
   useEffect(() => {
     events.on('message_added_notification', (o: any) => handleEventNotification(1, o))
     events.on('order_added_notification', (o: any) => handleEventNotification(2, o))
     events.on('order_updated_notification', (o: any) => handleEventNotification(3, o))
+    events.on('request_register_notification', (o: any) => handleEventNotification(2, o))
+    events.on('request_update_notification', (o: any) => handleEventNotification(3, o))
+
     return () => {
       events.off('message_added_notification', (o: any) => handleEventNotification(1, o))
       events.off('order_added_notification', (o: any) => handleEventNotification(2, o))
       events.off('order_updated_notification', (o: any) => handleEventNotification(3, o))
+      events.off('request_register_notification', (o: any) => handleEventNotification(2, o))
+      events.off('request_update_notification', (o: any) => handleEventNotification(3, o))
     }
   }, [])
 

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

@@ -18,7 +18,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
           <OIcon src={errorImage} width={260} height={220} />
         </NotFoundImage>
       )}
-      {content && conditioned && !errorImage && (
+      {!!content && conditioned && !errorImage && (
         <OText
           color={theme.colors.textSecondary}
           size={textSize ?? 18}
@@ -26,7 +26,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
           {content}
         </OText>
       )}
-      {content && !conditioned && (
+      {!!content && !conditioned && (
         <OText
           color={theme.colors.textSecondary}
           size={textSize ?? 18}

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

@@ -410,7 +410,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={

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
@@ -52,10 +55,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     handleClickLogisticOrder,
     forceUpdate,
     getPermissions,
-    isGrantedPermissions
+    orderAssingId,
+    isGrantedPermissions,
   } = props;
   const [, { showToast }] = useToast();
+  const [{ parsePrice, parseNumber }] = useUtils();
+  const [{ configs }] = useConfig();
   const { order } = props.order
+
+  const isAllowedDriverRejectOrder = configs?.allow_driver_reject_order?.value === '1'
   const theme = useTheme();
   const [, t] = useLanguage();
   const [session] = useSession();
@@ -75,6 +83,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const validStatusComplete = [9, 19, 23]
 
+  const pendingOrderStatus = [1, 4, 7, 13]
+
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
@@ -133,7 +143,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
@@ -150,16 +327,23 @@ 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();
   };
 
   const handleRejectLogisticOrder = () => {
-    handleClickLogisticOrder?.(2, order?.logistic_order_id)
+    handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id)
     handleArrowBack()
   }
 
   const handleAcceptLogisticOrder = (order: any) => {
-    handleClickLogisticOrder?.(1, order?.logistic_order_id)
+    handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id)
     if (order?.order_group) {
       handleArrowBack()
     }
@@ -203,7 +387,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [props.order?.loading]);
 
   useEffect(() => {
-    if (order?.driver === null && session?.user?.level === 4) {
+    if (!order?.driver_id && session?.user?.level === 4) {
       setAlertState({
         open: true,
         content: [
@@ -343,7 +527,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={
@@ -361,6 +545,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               order={order}
               handleOpenMapView={handleOpenMapView}
               handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
+              handleCopyClipboard={handleCopyClipboard}
               getOrderStatus={getOrderStatus}
               handleArrowBack={handleArrowBack}
               logisticOrderStatus={logisticOrderStatus}