ordering-ui-react-native 0.22.13 → 0.22.14-release

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

@@ -53,16 +53,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 +140,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,8 +173,8 @@ 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}
@@ -235,8 +254,8 @@ const MapViewComponent = (props: MapViewParams) => {
               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,
               }}
@@ -266,8 +285,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 (
@@ -109,21 +117,16 @@ const SoundPlayerComponent = (props: any) => {
 }
 
 const NewOrderNotificationUI = (props: any) => {
-  const { isBusinessApp, evtList } = props
+  const { isBusinessApp, evtList, orderStatus } = props
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
-  const [{ configs }] = useConfig()
   const [, { showToast }] = useToast()
   const { getCurrentLocation } = useLocation()
   const [currentEvent, setCurrentEvent] = useState<any>(null)
 
-  const orderStatus = !!isBusinessApp
-    ? configs?.notification_business_states?.value.split('|').map((value: any) => Number(value)) || []
-    : configs?.notification_driver_states?.value.split('|').map((value: any) => Number(value)) || []
-
-  const handleEventNotification = async (evtType: number, value: any) => {
+  const handleEventNotification = async (evtType: number, value: any, orderStatus?: any) => {
     if (value?.driver) {
       try {
         const location = await getCurrentLocation()
@@ -149,11 +152,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
@@ -165,20 +168,30 @@ const NewOrderNotificationUI = (props: any) => {
   }
 
   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))
+    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, events])
 
   useEffect(() => {
     return () => setCurrentEvent(null)
@@ -186,13 +199,13 @@ const NewOrderNotificationUI = (props: any) => {
 
   return (
     <>
-      {!!currentEvent ? (
+      {!!currentEvent && (
         <SoundPlayerComponent
           evtList={evtList}
           currentEvent={currentEvent}
           handleCloseEvents={() => setCurrentEvent(null)}
         />
-      ) : null}
+      )}
     </>
   )
 };

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

@@ -31,7 +31,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';
@@ -53,6 +53,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     actions,
     orderTitle,
     appTitle,
+    loadMessages,
+    notificationApp
   } = props;
 
   const theme = useTheme();
@@ -77,7 +79,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [printerSettings, setPrinterSettings] = useState<any>('')
   const [autoPrintEnabled, setAutoPrintEnabled] = useState<boolean>(false)
 
-  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) {
@@ -142,8 +146,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 +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`
       : '';
 
@@ -245,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
       });
@@ -257,20 +267,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )}:\n${productsInString}\n`;
 
     const subtotal = `${t('SUBTOTAL', 'Subtotal')}: ${parsePrice(
-      order?.subtotal,
+      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,7 +310,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const handleOpenMessagesForBusiness = () => {
     setOpenModalForBusiness(true);
-    readMessages && readMessages();
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setUnreadAlert({ ...unreadAlert, business: false });
   };
 
@@ -309,24 +323,26 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForAccept(true);
   };
 
-  const printAction = async (printerSettings: any, commands: any) => {
+  const printAction = async (printerSettings: any, commands: any, showAlert: boolean = true) => {
     try {
       var printResult = await StarPRNT.print(printerSettings?.emulation, commands, printerSettings?.portName);
-      showToast(ToastType.Info, t('ORDER_PRINTED_SUCCESS', 'Order printed'), 1000)
+      showAlert && showToast(ToastType.Info, t('ORDER_PRINTED_SUCCESS', 'Order printed'), 1000)
     } catch (e) {
-      showToast(ToastType.Error, t('ORDER_PRINTED_FAILED', 'Order not printed, connection failed'), 1000)
+      showAlert && showToast(ToastType.Error, t('ORDER_PRINTED_FAILED', 'Order not printed, connection failed'), 1000)
     }
   }
 
   const handleViewSummaryOrder = () => {
     if (printerSettings) {
-      const commands: any = generateCommands({
-        ...order,
-        orderStatus: getOrderStatus(order?.status, t)?.value
-      }, printerSettings?.printMode)
-      commands.push({ appendCutPaper: StarPRNT.CutPaperAction.PartialCutWithFeed })
-
-      printAction(printerSettings, commands)
+      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 &&
@@ -337,6 +353,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleCloseModal = () => {
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setOpenModalForBusiness(false);
   };
 
@@ -377,7 +395,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
@@ -411,9 +429,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     const getStorageData = async () => {
-    const printer = await _retrieveStoreData('printer')
+      const printers = await _retrieveStoreData('printers')
       const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
-      setPrinterSettings(printer)
+      setPrinterSettings(printers?.length && printers)
       setAutoPrintEnabled(!!autoPrint)
     }
 
@@ -480,6 +498,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
             isCustomView={props.isCustomView}
+            messages={messages}
+            messagesReadList={messagesReadList}
           />
           <OrderDetailsContainer
             keyboardShouldPersistTaps="handled"
@@ -487,7 +507,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')}
@@ -585,6 +605,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   messages={messages}
                   order={order}
                   setMessages={setMessages}
+                  notificationApp={notificationApp}
                 />
               </OModal>
 
@@ -628,7 +649,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             </>
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
-
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
@@ -645,7 +665,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}
@@ -655,7 +675,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',
@@ -666,7 +686,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}