ordering-ui-react-native 0.21.9 → 0.21.10-release

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

@@ -55,7 +55,7 @@ const MapViewComponent = (props: MapViewParams) => {
     if (mapRef.current) {
       mapRef.current.fitToCoordinates(
         [
-          { latitude: location.latitude, longitude: location.longitude },
+          { latitude: location.latitude ?? 0, longitude: location.longitude ?? 0},
           {
             latitude: userLocation?.latitude,
             longitude: userLocation?.longitude,
@@ -72,8 +72,8 @@ const MapViewComponent = (props: MapViewParams) => {
     const lastRegion = mapRef?.current?.__lastRegion
     mapRef?.current && mapRef.current.animateToRegion({
       ...mapRef?.current?.__lastRegion,
-      longitudeDelta: lastRegion.longitudeDelta / 8,
-      latitudeDelta: lastRegion.longitudeDelta / 8
+      longitudeDelta: lastRegion?.longitudeDelta / 8,
+      latitudeDelta: lastRegion?.longitudeDelta / 8
     })
   }
 
@@ -81,8 +81,8 @@ const MapViewComponent = (props: MapViewParams) => {
     const lastRegion = mapRef?.current?.__lastRegion
     mapRef?.current && mapRef.current.animateToRegion({
       ...lastRegion,
-      longitudeDelta: lastRegion.longitudeDelta * 8,
-      latitudeDelta: lastRegion.longitudeDelta * 8
+      longitudeDelta: lastRegion?.longitudeDelta * 8,
+      latitudeDelta: lastRegion?.longitudeDelta * 8
     })
   }
 
@@ -132,6 +132,10 @@ 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
+
     useEffect(() => {
       if (
         markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
@@ -145,8 +149,8 @@ const MapViewComponent = (props: MapViewParams) => {
       <Marker
         key={customer ? marker?.customer?.id : marker?.business?.id}
         coordinate={{
-          latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
-          longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+          latitude: coordinateLat,
+          longitude: coordinateLng
         }}
         onPress={() =>
           setLocationSelected({

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

@@ -2,20 +2,18 @@ import React, { useState, useEffect } from 'react';
 import {
   View,
   Pressable,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-  RefreshControl,
+  StyleSheet
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { OText, OButton } from '../shared';
+import { OText } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { PreviousMessages } from '../PreviousMessages';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { WebsocketStatus } from '../WebsocketStatus'
+
 const MessagesOptionUI = (props: MessagesOptionParams) => {
   const {
     orders,
@@ -65,12 +63,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     ),
   );
 
-  const [orientation, setOrientation] = useState(
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? 'Portrait'
-      : 'Landscape',
-  );
-
   const getTagFilter = (key: number) => {
     return tags.find(value => value.key === key)?.text;
   };
@@ -114,14 +106,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     );
   }, [orders]);
 
-  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-    if (width < height) {
-      setOrientation('Portrait');
-    } else {
-      setOrientation('Landscape');
-    }
-  });
-
   const styles = StyleSheet.create({
     header: {
       marginBottom: 25,
@@ -180,7 +164,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
       <View style={styles.header}>
         <OText style={styles.title}>{t('MESSAGES', 'Messages')}</OText>
       </View>
-
+      <WebsocketStatus />
       <FiltersTab>
         <TabsContainer width={dimensions.width - 42}>
           {tabs.map((tab: any) => (
@@ -242,35 +226,28 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             !error
               ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
               : error[0]?.message ||
-                error[0] ||
-                t('NETWORK_ERROR', 'Network Error')
+              error[0] ||
+              t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
         />
       )}
-
-      <ScrollView 
-        showsVerticalScrollIndicator={false}
-        style={{ flex: 1 }}
-        refreshControl={<RefreshControl
-          refreshing={refreshing}
-          onRefresh={() => getOrders?.()}
-      />}
-      >
-        {!reload &&
-          !error &&
-          values.length > 0 &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
-            <PreviousMessages
-              orders={values}
-              setOrders={setOrders}
-              messages={messages}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          )}
-
-        {/* {!reload &&
+      <PreviousMessages
+        orders={values}
+        messages={messages}
+        onNavigationRedirect={onNavigationRedirect}
+        getOrders={getOrders}
+        pagination={pagination}
+        loading={loading}
+        reload={reload}
+        tabs={tabs}
+        tabsFilter={tabsFilter}
+        setOrders={setOrders}
+        loadMore={loadMore}
+        error={error}
+      />
+      {/* {!reload &&
         !error &&
         orders.length > 0 &&
         JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
@@ -283,55 +260,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             onNavigationRedirect={onNavigationRedirect}
           />
         )} */}
-
-        {(loading || reload) && (
-          <>
-            <View>
-              {[...Array(5)].map((item, i) => (
-                <Placeholder key={i} Animation={Fade}>
-                  <View
-                    style={{
-                      width: '100%',
-                      flexDirection: 'row',
-                      marginBottom: 10,
-                    }}>
-                    <PlaceholderLine
-                      width={orientation === 'Portrait' ? 22 : 11}
-                      height={74}
-                      style={{
-                        marginRight: 20,
-                        marginBottom: 20,
-                        borderRadius: 7.6,
-                      }}
-                    />
-                    <Placeholder>
-                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                      <PlaceholderLine width={50} />
-                      <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                </Placeholder>
-              ))}
-            </View>
-          </>
-        )}
-
-        {pagination?.totalPages &&
-          !loading &&
-          !reload &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
-          pagination?.currentPage < pagination?.totalPages && (
-            <OButton
-              onClick={() => loadMore && loadMore()}
-              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-              imgRightSrc={null}
-              textStyle={styles.loadButtonText}
-              style={styles.loadButton}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-            />
-          )}
-      </ScrollView>
     </>
   );
 };

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

@@ -1,104 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  View,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  NativeModules,
+  PermissionsAndroid,
+  Platform
+} from 'react-native';
+import { useTheme } from 'styled-components/native'
 import moment from 'moment'
-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 SoundPlayer from 'react-native-sound-player'
+
+import {
+  NewOrderNotification as NewOrderNotificationController,
+  useApi,
+  useEvent,
+  useLanguage,
+  useSession,
+  useConfig,
+  useToast,
+  ToastType
+} from 'ordering-components/native'
 
-import { useLocation } from '../../hooks/useLocation'
 import { OIcon, OText } from '../shared'
 import { NotificationContainer } from './styles'
+import { useLocation } from '../../hooks/useLocation'
 
-Sound.setCategory('Playback', true)
-Sound.setMode('Default')
-
+const DELAY_SOUND = 2500 // 2 sec
 const windowWidth = Dimensions.get('screen').width
 
-const SOUND_LOOP = 3
+const SoundPlayerComponent = (props: any) => {
+  const { evtList, currentEvent, handleCloseEvents } = props
 
-const NewOrderNotificationUI = (props: any) => {
-  const { isBusinessApp } = props
-  const [events] = useEvent()
   const theme = useTheme()
-  const [, t] = useLanguage()
-  const [{ user, token }] = useSession()
-  const [ordering] = useApi()
-  const { getCurrentLocation } = useLocation();
-  const [currentEvent, setCurrentEvent] = useState<any>(null)
+  const [count, setCount] = useState(0);
+  const [isEnabledReadStorage, setIsEnabledReadStorage] = useState(true)
+  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
 
-  const evtList: any = {
-    1: {
-      event: 'messages',
-      message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
-      message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
-    },
-    2: {
-      event: 'order_added',
-      message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
-      message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
-    },
-    3: {
-      event: 'order_updated',
-      message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
-      message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
-    },
-  }
-
-  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
-
-  let _timeout: any = null
-  let times = 0
+  useEffect(() => {
+    const id = setInterval(() => setCount(count + 1), 2500)
 
-  const handleCloseEvents = () => {
-    notificationSound.stop()
-    setCurrentEvent(null)
-    clearInterval(_timeout)
-  }
+    const playSound = async () => {
+      SoundPlayer.playUrl(URL_SOUND)
+      await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
+      SoundPlayer.stop()
+    }
+    if (NativeModules?.RNSoundPlayer?.playUrl && typeof URL_SOUND === 'string' && isEnabledReadStorage) {
+      playSound()
+    }
 
-  const handlePlayNotificationSound = (eventObj: any = null) => {
-    setCurrentEvent(eventObj)
-    if (times > 0) {
-      if (times === 3) {
-        times = 0
-        return
-      }
-      return
+    return () => {
+      SoundPlayer.stop()
+      clearInterval(id);
     }
-    _timeout = setInterval(() => {
-      if (times < SOUND_LOOP) {
-        notificationSound.play()
-        times++
+  }, [count, isEnabledReadStorage])
+
+  useEffect(() => {
+    const checkSoundMedia = async () => {
+      if (Platform.OS === 'android') {
+        const enabled = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)
+        setIsEnabledReadStorage(enabled)
       } else {
-        clearInterval(_timeout)
-        return
+        setIsEnabledReadStorage(true)
       }
-    }, 2500)
-  }
+    }
+    checkSoundMedia()
+
+  }, [])
+  return (
+    <Modal
+      animationType='slide'
+      transparent={true}
+      visible={!!currentEvent?.orderId}
+    >
+      <NotificationContainer>
+        <View style={styles.modalView}>
+          <TouchableOpacity
+            style={styles.wrapperIcon}
+            onPress={() => handleCloseEvents()}
+          >
+            <Icon name="x" size={30} />
+          </TouchableOpacity>
+          <OText
+            size={18}
+            color={theme.colors.textGray}
+            weight={600}
+          >
+            {evtList(currentEvent)[currentEvent?.evt]?.message}
+          </OText>
+          <OIcon
+            src={theme.images.general.newOrder}
+            width={250}
+            height={200}
+          />
+          <OText
+            color={theme.colors.textGray}
+            mBottom={15}
+          >
+            {evtList(currentEvent)[currentEvent?.evt]?.message2}
+          </OText>
+        </View>
+      </NotificationContainer>
+    </Modal>
+  )
+}
+
+const NewOrderNotificationUI = (props: any) => {
+  const { isBusinessApp, evtList } = 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) => {
     if (value?.driver) {
       try {
         const location = await getCurrentLocation()
+        if (!location?.latitude || !location?.longitude) {
+          showToast(t('ERROR_UPDATING_COORDS', 'Error updating coords'), ToastType.Error)
+          return
+        }
         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}` }
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`
+          }
         })
       } 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) {
-        handlePlayNotificationSound({ evt: 2, orderId: value?.id })
+      if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status && orderStatus.includes(value.status)) {
+        setCurrentEvent({ evt: 2, orderId: value?.id ?? value?.order_id })
       }
     }
-    if (evtType === 3 || value.author_id === user.id) return
-    setTimeout(() => handlePlayNotificationSound({
+    if (!orderStatus.includes(value.status) || value?.author_id === user.id) return
+    setCurrentEvent({
       evt: evtType,
-      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id
-    }), 1000)
+      orderId: value?.driver
+        ? value?.order_id ?? value?.id
+        : evtList(currentEvent)[evtType].event === 'messages'
+          ? value?.order?.id
+          : value?.order_id ?? value?.id
+    })
   }
 
   useEffect(() => {
@@ -118,48 +181,21 @@ const NewOrderNotificationUI = (props: any) => {
   }, [])
 
   useEffect(() => {
-    return () => handleCloseEvents()
+    return () => setCurrentEvent(null)
   }, [])
 
   return (
     <>
-      <Modal
-        animationType='slide'
-        transparent={true}
-        visible={!!currentEvent?.orderId}
-      >
-        <NotificationContainer>
-          <View style={styles.modalView}>
-            <TouchableOpacity
-              style={styles.wrapperIcon}
-              onPress={() => handleCloseEvents()}
-            >
-              <Icon name="x" size={30} />
-            </TouchableOpacity>
-            <OText
-              size={18}
-              color={theme.colors.textGray}
-              weight={600}
-            >
-              {evtList[currentEvent?.evt]?.message}
-            </OText>
-            <OIcon
-              src={theme.images.general.newOrder}
-              width={250}
-              height={200}
-            />
-            <OText
-              color={theme.colors.textGray}
-              mBottom={15}
-            >
-              {evtList[currentEvent?.evt]?.message2}
-            </OText>
-          </View>
-        </NotificationContainer>
-      </Modal>
+      {!!currentEvent ? (
+        <SoundPlayerComponent
+          evtList={evtList}
+          currentEvent={currentEvent}
+          handleCloseEvents={() => setCurrentEvent(null)}
+        />
+      ) : null}
     </>
   )
-}
+};
 
 const styles = StyleSheet.create({
   modalView: {
@@ -179,9 +215,28 @@ const styles = StyleSheet.create({
 })
 
 export const NewOrderNotification = (props: any) => {
+  const [, t] = useLanguage()
+
   const newOrderNotificationProps = {
     ...props,
-    UIComponent: NewOrderNotificationUI
+    UIComponent: NewOrderNotificationUI,
+    evtList: (currentEvent: any) => ({
+      1: {
+        event: 'messages',
+        message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
+        message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
+      },
+      2: {
+        event: 'order_added',
+        message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
+        message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
+      },
+      3: {
+        event: 'order_updated',
+        message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
+        message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
+      },
+    })
   };
 
   return <NewOrderNotificationController {...newOrderNotificationProps} />;

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,8 @@ 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)
 
   if (order?.status === 7 || order?.status === 4) {
     if (drivers?.length > 0 && drivers) {
@@ -120,6 +126,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 +307,26 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setOpenModalForAccept(true);
   };
 
+  const printAction = async (printerSettings: any, commands: any) => {
+    try {
+      var printResult = await StarPRNT.print(printerSettings?.emulation, commands, printerSettings?.portName);
+      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)
+    }
+  }
+
   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)
+      return
+    }
     navigation?.navigate &&
       navigation.navigate('OrderSummary', {
         order,
@@ -372,6 +407,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    const getStorageData = async () => {
+    const printer = await _retrieveStoreData('printer')
+      const autoPrint = await _retrieveStoreData('auto_print_after_accept_order')
+      setPrinterSettings(printer)
+      setAutoPrintEnabled(!!autoPrint)
+    }
+
+    getStorageData()
+  }, [])
+
   const styles = StyleSheet.create({
     driverOff: {
       backgroundColor: theme.colors.notAvailable,