ordering-ui-react-native 0.22.0 → 0.22.1-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

@@ -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,12 +48,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     messagesReadList,
     handleAssignDriver,
-    handleChangeOrderStatus,
     isFromCheckout,
     driverLocation,
     actions,
     orderTitle,
     appTitle,
+    loadMessages,
+    notificationApp
   } = props;
 
   const theme = useTheme();
@@ -57,6 +62,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 +76,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,6 +132,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)})` : '';
@@ -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`
       : '';
 
@@ -279,7 +307,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const handleOpenMessagesForBusiness = () => {
     setOpenModalForBusiness(true);
-    readMessages && readMessages();
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setUnreadAlert({ ...unreadAlert, business: false });
   };
 
@@ -291,7 +320,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,
@@ -300,6 +350,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleCloseModal = () => {
+    readMessages && readMessages()
+    loadMessages && loadMessages()
     setOpenModalForBusiness(false);
   };
 
@@ -340,7 +392,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
@@ -372,6 +424,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 +495,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             handleCopyClipboard={handleCopyClipboard}
             handleArrowBack={handleArrowBack}
             isCustomView={props.isCustomView}
+            messages={messages}
+            messagesReadList={messagesReadList}
           />
           <OrderDetailsContainer
             keyboardShouldPersistTaps="handled"
@@ -439,7 +504,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 +602,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   messages={messages}
                   order={order}
                   setMessages={setMessages}
+                  notificationApp={notificationApp}
                 />
               </OModal>
 
@@ -580,7 +646,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             </>
             <View style={{ height: 30 }} />
           </OrderDetailsContainer>
-
           {order &&
             Object.keys(order).length > 0 &&
             getOrderStatus(order?.status, t)?.value ===
@@ -597,7 +662,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 +672,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 +683,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}