ordering-ui-react-native 0.22.75 → 0.22.76-release

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

@@ -0,0 +1,146 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { StyleSheet, View } from 'react-native';
+import { Callout, Marker } from 'react-native-maps'
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import FastImage from 'react-native-fast-image';
+import { useTheme } from 'styled-components/native';
+
+import { useLanguage } from 'ordering-components/native';
+import { OText } from '../shared';
+import { RenderMarkerParams } from '../../types'
+
+const styles = StyleSheet.create({
+  image: {
+    borderRadius: 50,
+    width: 25,
+    height: 25
+  },
+  view: {
+    width: 25,
+    position: 'absolute',
+    top: 6,
+    left: 6,
+    bottom: 0,
+    right: 0,
+  },
+});
+
+export const RenderMarker = (props: RenderMarkerParams) => {
+  const {
+    marker,
+    customer,
+    orderIds,
+    onNavigationRedirect,
+    initialPosition,
+    locationSelected,
+    setLocationSelected
+  } = props
+  const markerRef = useRef<any>()
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const [imageLoaded, setImageLoaded] = useState(false)
+
+  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 (
+      markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
+      markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
+    ) {
+      markerRef?.current?.showCallout()
+    }
+  }, [locationSelected])
+
+  const markerImage = customer ? marker?.customer?.photo ?? theme?.images?.dummies?.customerPhoto : marker?.business?.logo ?? theme?.images?.dummies?.businessLogo
+
+  return (
+    <Marker
+      key={customer ? marker?.customer?.id : marker?.business?.id}
+      coordinate={{
+        latitude: coordinateLat,
+        longitude: coordinateLng
+      }}
+      onPress={() =>
+        setLocationSelected({
+          latitude: coordinateLat,
+          longitude: coordinateLng
+        })
+      }
+      ref={(ref) => markerRef.current = ref}
+      tracksViewChanges={!imageLoaded}
+    >
+      <Icon
+        name="map-marker"
+        size={50}
+        color={theme.colors.primary}
+      />
+      {!!markerImage && (
+        <View style={styles.view}>
+          <FastImage
+            style={styles.image}
+            source={markerImage?.includes('https') ? {
+              uri: markerImage,
+              priority: FastImage.priority.high,
+              cache: FastImage.cacheControl.immutable
+            } : markerImage}
+            resizeMode={FastImage.resizeMode.cover}
+            onLoadEnd={() => setImageLoaded(true)}
+          />
+        </View>
+      )}
+      <Callout
+        onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
+      >
+        <View style={{ flex: 1, width: 200, padding: 5 }}>
+          <OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
+          <OText>
+            {!!orderIds && orderIds.toString().includes(',') ? (
+              <>
+                {t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
+              </>
+            ) : (
+              <>
+                {t('ORDER_NUMBER', 'Order No.')} {marker?.id}
+              </>
+            )}
+          </OText>
+          <OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
+          {((customer && marker?.customer?.city?.address_notes) || !customer) && (
+            <OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
+          )}
+          {((customer && !!marker?.business?.zipcode) || (!customer && !!marker?.business?.zipcode)) && (
+            <OText>{customer ? marker?.customer?.zipcode ?? '' : marker?.business?.zipcode ?? ''}</OText>
+          )}
+          {customer && !!marker?.customer?.internal_number && (
+            <OText>{marker?.customer?.internal_number}</OText>
+          )}
+          <OText textDecorationLine='underline' color={theme.colors.primary}>
+            {!!orderIds && orderIds.toString().includes(',') ? (
+              <>
+                {t('SHOW_ORDERS', 'Show orders')}
+              </>
+            ) : (
+              <>
+                {t('MORE_INFO', 'More info')}
+              </>
+            )}
+          </OText>
+        </View>
+      </Callout>
+    </Marker>
+  )
+}

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

@@ -1,20 +1,37 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native'
 import MapView, {
   PROVIDER_GOOGLE,
-  Marker,
-  Callout
+  Marker
 } from 'react-native-maps';
+import FastImage from 'react-native-fast-image'
 import { useLanguage, useSession, MapView as MapViewController } from 'ordering-components/native';
 import { MapViewParams } from '../../types';
 import Alert from '../../providers/AlertProvider';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import Icon from 'react-native-vector-icons/FontAwesome5';
-import { OIcon, OText, OFab } from '../shared'
-const MapViewComponent = (props: MapViewParams) => {
+import { OFab } from '../shared'
+import { RenderMarker } from './RenderMarker'
+
+const styles = StyleSheet.create({
+  image: {
+    borderRadius: 50,
+    width: 25,
+    height: 25
+  },
+  view: {
+    width: 25,
+    position: 'absolute',
+    top: 6,
+    left: 6,
+    bottom: 0,
+    right: 0,
+  },
+});
 
+const MapViewComponent = (props: MapViewParams) => {
   const {
     isLoadingBusinessMarkers,
     markerGroups,
@@ -24,6 +41,7 @@ const MapViewComponent = (props: MapViewParams) => {
     setDriverLocation,
     onNavigationRedirect,
     getBusinessLocations,
+    isDeliveryApp
   } = props;
 
   const theme = useTheme();
@@ -35,6 +53,7 @@ const MapViewComponent = (props: MapViewParams) => {
   const following = useRef<boolean>(true);
   const [isFocused, setIsFocused] = useState(false)
   const [locationSelected, setLocationSelected] = useState<any>(null)
+  const [imageLoaded, setImageLoaded] = useState(false)
   const {
     initialPosition,
     userLocation,
@@ -42,7 +61,10 @@ const MapViewComponent = (props: MapViewParams) => {
     followUserLocation
   } = useLocation();
 
-  const location = { lat: userLocation?.latitude, lng: userLocation?.longitude }
+  const location = useMemo(() => {
+    return { lat: userLocation?.latitude, lng: userLocation?.longitude }
+  }, [userLocation?.latitude, userLocation?.longitude])
+
   const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
   const closeAlert = () => {
     setAlertState({
@@ -53,19 +75,23 @@ const MapViewComponent = (props: MapViewParams) => {
 
   const fitCoordinates = (location?: any) => {
     if (mapRef.current) {
-      mapRef.current.fitToCoordinates(
-        [
-          {
-            latitude: typeof location?.latitude !== 'object' ? location?.latitude : 0,
-            longitude: typeof location?.longitude !== 'object' ? location?.latitude : 0
-          },
-          {
-            latitude: typeof userLocation?.latitude !== 'object' ? userLocation?.latitude : 0,
-            longitude: typeof userLocation?.longitude !== 'object' ? userLocation?.latitude : 0
-          },
-        ],
+      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 }
         },
       );
     }
@@ -119,120 +145,6 @@ const MapViewComponent = (props: MapViewParams) => {
     }, [])
   )
 
-  const styles = StyleSheet.create({
-    image: {
-      borderRadius: 50,
-    },
-    view: {
-      width: 25,
-      position: 'absolute',
-      top: 6,
-      left: 6,
-      bottom: 0,
-      right: 0,
-    },
-  });
-
-  const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
-    const markerRef = useRef<any>()
-
-    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 (
-        markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
-        markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
-      ) {
-        markerRef?.current?.showCallout()
-      }
-    }, [locationSelected])
-
-    return (
-      <Marker
-        key={customer ? marker?.customer?.id : marker?.business?.id}
-        coordinate={{
-          latitude: coordinateLat,
-          longitude: coordinateLng
-        }}
-        onPress={() =>
-          setLocationSelected({
-            latitude: coordinateLat,
-            longitude: coordinateLng
-          })
-        }
-        ref={(ref) => markerRef.current = ref}
-      >
-        <Icon
-          name="map-marker"
-          size={50}
-          color={theme.colors.primary}
-        />
-        {(!!marker?.customer?.photo || !!marker?.business?.logo) && (
-          <View style={styles.view}>
-            <OIcon
-              style={styles.image}
-              src={{ uri: customer ? marker?.customer?.photo : marker?.business?.logo }}
-              width={25}
-              height={25}
-            />
-          </View>
-        )}
-        <Callout
-          onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
-        >
-          <View style={{ flex: 1, width: 200, padding: 5 }}>
-            <OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
-            <OText>
-              {!!orderIds && orderIds.toString().includes(',') ? (
-                <>
-                  {t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
-                </>
-              ) : (
-                <>
-                  {t('ORDER_NUMBER', 'Order No.')} {marker?.id}
-                </>
-              )}
-            </OText>
-            <OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
-            {((customer && marker?.customer?.city?.address_notes) || !customer) && (
-              <OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
-            )}
-            {((customer && !!marker?.business?.zipcode) || (!customer && !!marker?.business?.zipcode)) && (
-              <OText>{customer ? marker?.customer?.zipcode ?? '' : marker?.business?.zipcode ?? ''}</OText>
-            )}
-            {customer && !!marker?.customer?.internal_number && (
-              <OText>{marker?.customer?.internal_number}</OText>
-            )}
-            <OText textDecorationLine='underline' color={theme.colors.primary}>
-              {!!orderIds && orderIds.toString().includes(',') ? (
-                <>
-                  {t('SHOW_ORDERS', 'Show orders')}
-                </>
-              ) : (
-                <>
-                  {t('MORE_INFO', 'More info')}
-                </>
-              )}
-            </OText>
-          </View>
-        </Callout>
-      </Marker>
-    )
-  }
-
   useEffect(() => {
     if (userLocation?.latitude !== 0 && userLocation?.longitude !== 0) {
       const location = {
@@ -243,31 +155,39 @@ const MapViewComponent = (props: MapViewParams) => {
     }
   }, [userLocation])
 
+  const renderMarkerDefaultProps = {
+    onNavigationRedirect: onNavigationRedirect,
+    initialPosition: initialPosition,
+    locationSelected: locationSelected,
+    setLocationSelected: setLocationSelected
+  }
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
-        {!isLoadingBusinessMarkers && isFocused && (
+        {(isDeliveryApp || (!isLoadingBusinessMarkers && isFocused)) && !!initialPosition?.latitude && !!initialPosition?.longitude && (
           <View style={{ flex: 1 }}>
             <MapView
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition?.latitude || 0,
-                longitude: initialPosition?.longitude || 0,
+                latitude: initialPosition?.latitude,
+                longitude: initialPosition?.longitude,
                 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)}
             >
               <>
                 {Object.values(markerGroups).map((marker: any) => (
                   <RenderMarker
+                    {...renderMarkerDefaultProps}
                     key={marker[0]?.business_id}
                     marker={marker[0]}
                     orderIds={marker.map((order: any) => order.id).join(', ')}
@@ -275,6 +195,7 @@ const MapViewComponent = (props: MapViewParams) => {
                 ))}
                 {Object.values(customerMarkerGroups).map((marker: any) => (
                   <RenderMarker
+                    {...renderMarkerDefaultProps}
                     key={marker[0]?.customer_id}
                     marker={marker[0]}
                     orderIds={marker.map((order: any) => order.id).join(', ')}
@@ -282,6 +203,7 @@ const MapViewComponent = (props: MapViewParams) => {
                   />
                 ))}
                 <Marker
+                  tracksViewChanges={!imageLoaded}
                   coordinate={{
                     latitude: typeof location.lat === 'number' && !Number.isNaN(location.lat) ? location.lat : 0,
                     longitude: typeof location.lng === 'number' && !Number.isNaN(location.lng) ? location.lng : 0,
@@ -294,11 +216,15 @@ const MapViewComponent = (props: MapViewParams) => {
                     color={theme.colors.primary}
                   />
                   <View style={styles.view}>
-                    <OIcon
+                    <FastImage
                       style={styles.image}
-                      src={{ uri: user.photo }}
-                      width={25}
-                      height={25}
+                      source={user.photo?.includes('https') ? {
+                        uri: user.photo,
+                        priority: FastImage.priority.high,
+                        cache: FastImage.cacheControl.immutable
+                      } : user.photo ?? theme?.images?.dummies?.driverPhoto}
+                      resizeMode={FastImage.resizeMode.cover}
+                      onLoadEnd={() => setImageLoaded(true)}
                     />
                   </View>
                 </Marker>

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

@@ -4,10 +4,7 @@ import {
   View,
   StyleSheet,
   Dimensions,
-  TouchableOpacity,
-  NativeModules,
-  PermissionsAndroid,
-  Platform
+  TouchableOpacity
 } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import moment from 'moment'
@@ -20,7 +17,6 @@ import {
   useEvent,
   useLanguage,
   useSession,
-  useConfig,
   useToast,
   ToastType
 } from 'ordering-components/native'
@@ -36,48 +32,25 @@ const SoundPlayerComponent = (props: any) => {
   const { evtList, currentEvent, handleCloseEvents } = props
 
   const theme = useTheme()
-  const [count, setCount] = useState(0);
-  const [isEnabledReadStorage, setIsEnabledReadStorage] = useState(true)
-  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
+  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3'
 
   useEffect(() => {
-    const id = setInterval(() => setCount(count + 1), 2500)
-
-    const playSound = async () => {
+    if (!currentEvent?.orderId) return
+    const playSound = () => {
       try {
         SoundPlayer.playUrl(URL_SOUND)
-        await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
-        SoundPlayer.stop()
-      } catch (err: any) {
+      } catch (e) {
         console.log('Sound Error - ', err.message)
       }
     }
-    if (NativeModules?.RNSoundPlayer?.playUrl && typeof URL_SOUND === 'string' && isEnabledReadStorage) {
-      playSound()
-    }
 
-    return () => {
-      clearInterval(id);
-      try {
-        SoundPlayer.stop()
-      } catch (err: any) {
-        console.log('Sound Error - ', err.message)
-      }
-    }
-  }, [count, isEnabledReadStorage])
+    const interval = setInterval(() => {
+      playSound()
+    }, DELAY_SOUND)
 
-  useEffect(() => {
-    const checkSoundMedia = async () => {
-      if (Platform.OS === 'android') {
-        const enabled = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)
-        setIsEnabledReadStorage(enabled)
-      } else {
-        setIsEnabledReadStorage(true)
-      }
-    }
-    // checkSoundMedia()
+    return () => clearInterval(interval)
+  }, [currentEvent?.orderId])
 
-  }, [])
   return (
     <Modal
       animationType='slide'
@@ -129,7 +102,7 @@ const NewOrderNotificationUI = (props: any) => {
   const handleEventNotification = async (evtType: number, value: any, orderStatus?: any) => {
     if (value?.driver) {
       try {
-        const location = await getCurrentLocation()
+        const location: any = await getCurrentLocation()
         if (!location?.latitude || !location?.longitude) {
           showToast(t('ERROR_UPDATING_COORDS', 'Error updating coords'), ToastType.Error)
           return
@@ -140,7 +113,8 @@ const NewOrderNotificationUI = (props: any) => {
             location: JSON.stringify({
               location: `{
                 lat: ${location.latitude},
-                lng: ${location.longitude}
+                lng: ${location.longitude},
+                mock: ${location.mocked}
               }`
             })
           }),
@@ -153,35 +127,45 @@ const NewOrderNotificationUI = (props: any) => {
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
-        setCurrentEvent({ evt: 2, orderId: value?.id ?? value?.order_id })
+        setCurrentEvent(() => ({ evt: 2, orderId: value?.id ?? value?.order_id }))
       }
     }
-    if ((!orderStatus.includes(value.status) && evtType !== 1 && isBusinessApp) || value?.author_id === user.id) return    
-    setCurrentEvent({
+    if ((!orderStatus.includes(value.status) && evtType !== 1 && isBusinessApp && orderStatus?.length > 0) || value?.author_id === user.id) return
+    setCurrentEvent(() => ({
       evt: evtType,
       orderId: value?.driver
         ? value?.order_id ?? value?.id
         : evtList(currentEvent)[evtType].event === 'messages'
           ? value?.order?.id
           : value?.order_id ?? value?.id
-    })
+    }))
   }
 
   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)