ordering-ui-react-native 0.22.47 → 0.22.48-release

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native'
 import MapView, {
   PROVIDER_GOOGLE,
@@ -24,6 +24,7 @@ const MapViewComponent = (props: MapViewParams) => {
     setDriverLocation,
     onNavigationRedirect,
     getBusinessLocations,
+    isDeliveryApp
   } = props;
 
   const theme = useTheme();
@@ -53,16 +54,23 @@ const MapViewComponent = (props: MapViewParams) => {
 
   const fitCoordinates = (location?: any) => {
     if (mapRef.current) {
-      mapRef.current.fitToCoordinates(
-        [
-          { latitude: location.latitude ?? 0, longitude: location.longitude ?? 0},
-          {
-            latitude: userLocation?.latitude,
-            longitude: userLocation?.longitude,
-          },
-        ],
+      const isSendCoordinates =
+        location &&
+        userLocation &&
+        location.latitude !== userLocation.latitude &&
+        location.longitude !== userLocation.longitude &&
+        location.latitude !== 0 &&
+        location.longitude !== 0 &&
+        userLocation.latitude !== 0 &&
+        userLocation.longitude !== 0
+
+      isSendCoordinates && mapRef.current.fitToCoordinates(
+        [location, userLocation].map(_location => ({
+          latitude: _location.latitude,
+          longitude: _location.longitude
+        })),
         {
-          edgePadding: { top: 120, right: 120, bottom: 120, left: 120 },
+          edgePadding: { top: 120, right: 120, bottom: 120, left: 120 }
         },
       );
     }
@@ -133,8 +141,20 @@ const MapViewComponent = (props: MapViewParams) => {
   const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
     const markerRef = useRef<any>()
 
-    let coordinateLat = (customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat) ?? initialPosition?.latitude
-    let coordinateLng = (customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng) ?? initialPosition?.longitude
+    let coordinateLat = (customer
+      ? typeof marker?.customer?.location?.lat === 'number' && !Number.isNaN(marker?.customer?.location?.lat)
+        ? marker?.customer?.location?.lat
+        : 0
+      : typeof marker?.business?.location?.lat === 'number' && !Number.isNaN(marker?.business?.location?.lat)
+        ? marker?.business?.location?.lat
+        : 0) ?? (initialPosition?.latitude || 0)
+    let coordinateLng = (customer
+      ? typeof marker?.customer?.location?.lng === 'number' && !Number.isNaN(marker?.customer?.location?.lng)
+        ? marker?.customer?.location?.lng
+        : 0
+      : typeof marker?.business?.location?.lng === 'number' && !Number.isNaN(marker?.business?.location?.lng)
+        ? marker?.business?.location?.lng
+        : 0) ?? (initialPosition?.longitude || 0)
 
     useEffect(() => {
       if (
@@ -154,11 +174,11 @@ const MapViewComponent = (props: MapViewParams) => {
         }}
         onPress={() =>
           setLocationSelected({
-            latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
-            longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+            latitude: coordinateLat,
+            longitude: coordinateLng
           })
         }
-        ref={(ref) => markerRef.current = ref}
+        ref={(ref: any) => markerRef.current = ref}
       >
         <Icon
           name="map-marker"
@@ -231,22 +251,22 @@ const MapViewComponent = (props: MapViewParams) => {
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
-        {!isLoadingBusinessMarkers && isFocused && (
+        {(isDeliveryApp || (!isLoadingBusinessMarkers && isFocused)) && (
           <View style={{ flex: 1 }}>
             <MapView
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition?.latitude,
-                longitude: initialPosition?.longitude,
+                latitude: initialPosition?.latitude || 0,
+                longitude: initialPosition?.longitude || 0,
                 latitudeDelta: haveOrders ? 0.01 : 0.1,
                 longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
               style={{ flex: 1 }}
               zoomTapEnabled
               zoomEnabled
-              zoomControlEnabled
-              cacheEnabled
+              zoomControlEnabled={!(isDeliveryApp && Platform.OS === 'android')}
+              cacheEnabled={(isDeliveryApp && Platform.OS === 'android' && isFocused) || Platform.OS === 'ios' || !isDeliveryApp}
               moveOnMarkerPress
               onTouchStart={() => (following.current = false)}
             >
@@ -268,8 +288,8 @@ const MapViewComponent = (props: MapViewParams) => {
                 ))}
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: typeof location.lat === 'number' && !Number.isNaN(location.lat) ? location.lat : 0,
+                    longitude: typeof location.lng === 'number' && !Number.isNaN(location.lng) ? location.lng : 0,
                   }}
                   title={t('YOUR_LOCATION', 'Your Location')}
                 >

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

@@ -44,17 +44,25 @@ const SoundPlayerComponent = (props: any) => {
     const id = setInterval(() => setCount(count + 1), 2500)
 
     const playSound = async () => {
-      SoundPlayer.playUrl(URL_SOUND)
-      await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
-      SoundPlayer.stop()
+      try {
+        SoundPlayer.playUrl(URL_SOUND)
+        await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
+        SoundPlayer.stop()
+      } catch (err: any) {
+        console.log('Sound Error - ', err.message)
+      }
     }
     if (NativeModules?.RNSoundPlayer?.playUrl && typeof URL_SOUND === 'string' && isEnabledReadStorage) {
       playSound()
     }
 
     return () => {
-      SoundPlayer.stop()
       clearInterval(id);
+      try {
+        SoundPlayer.stop()
+      } catch (err: any) {
+        console.log('Sound Error - ', err.message)
+      }
     }
   }, [count, isEnabledReadStorage])
 
@@ -67,7 +75,7 @@ const SoundPlayerComponent = (props: any) => {
         setIsEnabledReadStorage(true)
       }
     }
-    checkSoundMedia()
+    // checkSoundMedia()
 
   }, [])
   return (
@@ -132,7 +140,8 @@ const NewOrderNotificationUI = (props: any) => {
             location: JSON.stringify({
               location: `{
                 lat: ${location.latitude},
-                lng: ${location.longitude}
+                lng: ${location.longitude},
+                mock: ${location.mocked}
               }`
             })
           }),
@@ -144,11 +153,11 @@ const NewOrderNotificationUI = (props: any) => {
       } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
-      if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status && orderStatus.includes(value.status)) {
+      if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
         setCurrentEvent({ evt: 2, orderId: value?.id ?? value?.order_id })
       }
     }
-    if (!orderStatus.includes(value.status) || value?.author_id === user.id) return
+    if ((!orderStatus.includes(value.status) && evtType !== 1 && isBusinessApp && orderStatus?.length > 0) || value?.author_id === user.id) return
     setCurrentEvent({
       evt: evtType,
       orderId: value?.driver
@@ -160,20 +169,30 @@ const NewOrderNotificationUI = (props: any) => {
   }
 
   useEffect(() => {
-    events.on('message_added_notification', (o: any) => handleEventNotification(1, o, orderStatus))
-    events.on('order_added_notification', (o: any) => handleEventNotification(2, o, orderStatus))
-    events.on('order_updated_notification', (o: any) => handleEventNotification(3, o, orderStatus))
-    events.on('request_register_notification', (o: any) => handleEventNotification(2, o, orderStatus))
-    events.on('request_update_notification', (o: any) => handleEventNotification(3, o, orderStatus))
+    const handleEventTypeOne = (o: any) => {
+      handleEventNotification(1, o, orderStatus)
+    }
+    const handleEventTypeTwo = (o: any) => {
+      handleEventNotification(2, o, orderStatus)
+    }
+    const handleEventTypeThree = (o: any) => {
+      handleEventNotification(3, o, orderStatus)
+    }
+
+    events.on('message_added_notification', handleEventTypeOne)
+    events.on('order_added_notification', handleEventTypeTwo)
+    events.on('order_updated_notification', handleEventTypeThree)
+    events.on('request_register_notification', handleEventTypeTwo)
+    events.on('request_update_notification', handleEventTypeThree)
 
     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))
+      events.off('message_added_notification', handleEventTypeOne)
+      events.off('order_added_notification', handleEventTypeTwo)
+      events.off('order_updated_notification', handleEventTypeThree)
+      events.off('request_register_notification', handleEventTypeTwo)
+      events.off('request_update_notification', handleEventTypeThree)
     }
-  }, [orderStatus])
+  }, [orderStatus, events])
 
   useEffect(() => {
     return () => setCurrentEvent(null)

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

@@ -3,8 +3,7 @@ import {
   StyleSheet,
   View,
   TouchableOpacity,
-  ActivityIndicator,
-  Alert,
+  ActivityIndicator
 } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { StarPRNT } from 'react-native-star-prnt';
@@ -31,7 +30,7 @@ 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';
@@ -39,6 +38,7 @@ import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
 import { _retrieveStoreData } from '../../providers/StoreUtil'
 import { usePrinterCommands } from './usePrinterCommands'
+import Alert from '../../../../../src/providers/AlertProvider'
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -53,6 +53,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     actions,
     orderTitle,
     appTitle,
+    loadMessages,
+    notificationApp
   } = props;
 
   const theme = useTheme();
@@ -76,8 +78,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isDriverModalVisible, setIsDriverModalVisible] = useState(false);
   const [printerSettings, setPrinterSettings] = useState<any>('')
   const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
+  const [alertState, setAlertState] = useState<any>({ open: false, title: '', content: [] })
 
-  const orderToComplete = [4,20,21]
+  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) {
@@ -135,6 +140,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       if (order?.status === 7 && autoPrintEnabled && printerSettings) {
         handleViewSummaryOrder()
       }
+      return order
     }
   }
 
@@ -142,8 +148,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     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';
     }
@@ -208,7 +214,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`
       : '';
 
@@ -245,7 +257,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
       });
@@ -258,19 +270,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(
@@ -297,14 +312,47 @@ 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 = (action: string, options?: any) => {
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
+    if (options?.alert) {
+      let bodyToSend: any = {};
+      const orderStatus: any = {
+        acceptByBusiness: {
+          status: 7,
+        },
+      };
+
+      if (actions && action === 'accept') {
+        bodyToSend = orderStatus[actions.accept];
+      }
+      bodyToSend.id = order?.id;
+      setAlertState({
+        open: true,
+        content: options?.content,
+        title: t('ORDER_STATUS', 'Order status'),
+        onAccept: async () => {
+          setAlertState({
+            open: false,
+            content: []
+          })
+          const order = await handleChangeOrderStatus(bodyToSend?.status, bodyToSend)
+          if (order?.id) {
+            setActionOrder(action);
+            setOpenModalForAccept(true);
+          } else {
+            showToast(ToastType.Error, t('FAILED_TO_UPDATE_ORDER', 'Failed to update order'), 5000)
+          }
+        }
+      })
+      return
+    }
     setActionOrder(action);
     setOpenModalForAccept(true);
   };
@@ -339,6 +387,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleCloseModal = () => {
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setOpenModalForBusiness(false);
   };
 
@@ -350,6 +400,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     navigation?.canGoBack() && navigation.goBack();
   };
 
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      title: '',
+      content: []
+    })
+  }
+
   useEffect(() => {
     if (messagesReadList?.length) {
       openModalForBusiness
@@ -379,7 +437,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
@@ -392,7 +450,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
 
   useEffect(() => {
-    if (openModalForAccept) {
+    if (openModalForAccept && !loading) {
       setOpenModalForAccept(false);
     }
 
@@ -413,7 +471,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     const getStorageData = async () => {
-    const printers = await _retrieveStoreData('printers')
+      const printers = await _retrieveStoreData('printers')
       const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
       setPrinterSettings(printers?.length && printers)
       setAutoPrintEnabled(!!autoPrint)
@@ -482,6 +540,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
             isCustomView={props.isCustomView}
+            messages={messages}
+            messagesReadList={messagesReadList}
           />
           <OrderDetailsContainer
             keyboardShouldPersistTaps="handled"
@@ -489,7 +549,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')}
@@ -587,6 +647,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   messages={messages}
                   order={order}
                   setMessages={setMessages}
+                  notificationApp={notificationApp}
                 />
               </OModal>
 
@@ -630,7 +691,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             </>
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
-
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
@@ -638,7 +698,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <FloatingButton
                 btnText={t('REJECT', 'Reject')}
                 isSecondaryBtn={false}
-                secondButtonClick={() => handleViewActionOrder('accept')}
+                secondButtonClick={() => handleViewActionOrder('accept', { alert: true, content: t('DO_YOU_WANT_ACCEPT_ORDER', 'Do you want to accept the order?') })}
                 firstButtonClick={() => handleViewActionOrder('reject')}
                 secondBtnText={t('ACCEPT', 'Accept')}
                 secondButton={true}
@@ -647,7 +707,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}
@@ -657,7 +717,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               disabled={loading}
             />
           )}
-          {orderToComplete.includes(order?.status) && ![1].includes(order?.delivery_type) && (
+          {orderToComplete.includes(order?.status) && !deliveryTypes.includes(order?.delivery_type) && (
             <FloatingButton
               btnText={t(
                 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
@@ -668,7 +728,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}
@@ -680,6 +740,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           )}
         </View>
       )}
+      <Alert
+        open={alertState.open}
+        content={alertState.content}
+        title={alertState.title || ''}
+        onAccept={alertState.onAccept}
+        onClose={closeAlert}
+        onCancel={closeAlert}
+      />
     </>
   );
 };