ordering-ui-react-native 0.22.21 → 0.22.22-release

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

@@ -36,6 +36,7 @@ import {
   useSession,
   useUtils,
   useLanguage,
+  useConfig
 } from 'ordering-components/native';
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles';
 import { OIcon, OIconButton, OText, OButton } from '../shared';
@@ -68,8 +69,9 @@ const ChatUI = (props: MessagesParams) => {
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const theme = useTheme();
+  const [{ configs }] = useConfig();
   const [messageList, setMessageList] = useState<any>([])
-  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const chatDisabled = previousStatus.includes(order?.status)
 
   const ORDER_STATUS: any = {
@@ -96,7 +98,10 @@ const ChatUI = (props: MessagesParams) => {
     20: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Order customer almost arrived to business'),
     21: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Order customer arrived to business'),
     22: t('ORDER_LOOKING_FOR_DRIVER', 'Order looking for driver'),
-    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
+    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+    24: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+    25: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+    26: t('ORDER_DRIVER_ARRIVED_CUSTOMER', 'Driver arrived to customer')
   }
 
   const getLogisticTag = (status: any) => {
@@ -498,6 +503,7 @@ const ChatUI = (props: MessagesParams) => {
 
     const firstMessage = {
       _id: 0,
+      type: 0,
       text: console,
       createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
       system: true,
@@ -517,6 +523,7 @@ const ChatUI = (props: MessagesParams) => {
           text: message.type === 1 ? messageConsole(message) : message.comment,
           createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
           image: message.source,
+          type: message.type,
           system: message.type === 1,
           user: {
             _id: message.author?.id,
@@ -537,7 +544,12 @@ const ChatUI = (props: MessagesParams) => {
         newMessages = [...newMessages, newMessage];
       }
     });
-    setFormattedMessages([...newMessages.reverse()]);
+    let _arrayMessages = [...newMessages.reverse()]
+
+    if (configs?.order_logbook_enabled?.value === '0' && user?.level === 4) {
+      _arrayMessages = _arrayMessages.filter(msg => msg.type !== 1 && msg.type !== 0)
+    }
+    setFormattedMessages(_arrayMessages);
   }, [messages?.messages?.length]);
 
   useEffect(() => {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapView, {
   PROVIDER_GOOGLE,
@@ -69,11 +69,26 @@ export const DriverMap = (props: GoogleMapsParams) => {
     stopFollowUserLocation,
   } = useLocation();
 
-  const origin = {
-    latitude: initialPosition.latitude,
-    longitude: initialPosition.longitude,
-  };
-  const destination = { latitude: location.lat, longitude: location.lng };
+  const parsedInitialPosition = useCallback(() => {
+    return {
+      latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
+      longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
+    }
+  }, [JSON.stringify(initialPosition)])
+
+  const parsedUserLocation = useCallback(() => {
+    return {
+      latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+      longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+    }
+  }, [JSON.stringify(userLocation)])
+
+  const parsedDestination = useCallback(() => {
+    return {
+      latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+      longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
+    }
+  }, [JSON.stringify(location)])
 
   useEffect(() => {
     if (isToFollow) {
@@ -161,21 +176,21 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: userLocation.latitude, lng: userLocation.longitude },
-      destination,
+      { lat: parsedUserLocation()?.latitude, lng: parsedUserLocation()?.longitude },
+      parsedDestination(),
     );
     // geocodePosition(userLocation);
 
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = userLocation;
+    const { latitude, longitude } = parsedUserLocation();
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [userLocation]);
+  }, [JSON.stringify(userLocation)]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -221,6 +236,11 @@ export const DriverMap = (props: GoogleMapsParams) => {
     19: theme.colors.statusOrderBlue,
     20: theme.colors.statusOrderBlue,
     21: theme.colors.statusOrderBlue,
+    22: theme.colors.statusOrderBlue,
+    23: theme.colors.statusOrderBlue,
+    24: theme.colors.statusOrderBlue,
+    25: theme.colors.statusOrderBlue,
+    26: theme.colors.statusOrderBlue,
     //GREEN
     1: theme.colors.statusOrderGreen,
     11: theme.colors.statusOrderGreen,
@@ -241,8 +261,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
         [
           { latitude: location.lat, longitude: location.lng },
           {
-            latitude: initialPosition.latitude,
-            longitude: initialPosition.longitude,
+            latitude: parsedInitialPosition()?.latitude,
+            longitude: parsedInitialPosition()?.longitude,
           },
         ],
         {
@@ -255,7 +275,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (initialPosition.latitude !== 0 && autoFit.current) {
+      if (parsedInitialPosition()?.latitude !== 0 && autoFit.current) {
         if (mapRef.current) {
           fitCoordinates();
           autoFit.current = false;
@@ -263,7 +283,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [initialPosition]);
+  }, [parsedInitialPosition()]);
 
   const fitCoordinatesZoom = () => {
     following.current = false;
@@ -346,8 +366,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ref={mapRef}
             provider={PROVIDER_GOOGLE}
             initialRegion={{
-              latitude: initialPosition.latitude,
-              longitude: initialPosition.longitude,
+              latitude: parsedInitialPosition()?.latitude,
+              longitude: parsedInitialPosition()?.longitude,
               latitudeDelta: 0.001,
               longitudeDelta: 0.001 * ASPECT_RATIO,
             }}
@@ -369,8 +389,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
               <>
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: parsedDestination()?.latitude,
+                    longitude: parsedDestination()?.longitude
                   }}
                   title={location.title}>
                   <Icon
@@ -387,7 +407,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                     />
                   </View>
                 </Marker>
-                <Marker coordinate={userLocation}>
+                <Marker coordinate={{
+                  latitude: userLocation?.latitude,
+                  longitude: userLocation?.longitude
+                }}>
                   <View style={styles.driverIcon}>
                     <OIcon
                       style={styles.image}
@@ -401,8 +424,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: userLocation.latitude,
-                  longitude: userLocation.longitude,
+                  latitude: parsedUserLocation()?.latitude,
+                  longitude: parsedUserLocation()?.longitude
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -514,10 +537,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
               animationIn: 'slideInUp'
             }}
             options={{
-              latitude: destination.latitude,
-              longitude: destination.longitude,
-              sourceLatitude: userLocation.latitude,
-              sourceLongitude: userLocation.longitude,
+              latitude: parsedDestination()?.latitude,
+              longitude: parsedDestination()?.longitude,
+              sourceLatitude: parsedUserLocation()?.latitude,
+              sourceLongitude: parsedUserLocation()?.longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
@@ -539,7 +562,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
             secondButton={true}
             firstColorCustom={theme.colors.red}
             secondColorCustom={theme.colors.green}
-            widthButton={isHideRejectButtons ? '100%': '45%'}
+            widthButton={isHideRejectButtons ? '100%' : '45%'}
             isPadding
             isHideRejectButtons={isHideRejectButtons}
           />

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

@@ -25,14 +25,15 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     secondButton,
     widthButton,
     isPadding,
-    isHideRejectButtons
+    isHideRejectButtons,
+    principalButtonColor
   } = props;
 
   const theme = useTheme();
 
   const styles = StyleSheet.create({
     primaryBtn: {
-      backgroundColor: theme.colors.primary,
+      backgroundColor: principalButtonColor ?? theme.colors.primary,
     },
     secodaryBtn: {
       backgroundColor: theme.colors.textSecondary,

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

@@ -50,12 +50,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const ASPECT_RATIO = width / height;
   const [isMapReady, setIsMapReady] = useState(false);
   const [markerPosition, setMarkerPosition] = useState({
-    latitude: locations ? locations[locations.length - 1].lat : location.lat,
-    longitude: locations ? locations[locations.length - 1].lng : location.lng,
+    latitude: locations 
+      ? typeof locations[locations.length - 1].lat === 'string' ? parseFloat(locations[locations.length - 1].lat) || 0 : locations[locations.length - 1].lat || 0
+      : typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: locations 
+      ? typeof locations[locations.length - 1].lng === 'string' ? parseFloat(locations[locations.length - 1].lng) || 0 : locations[locations.length - 1].lng || 0
+      : typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0,
   });
   const [region, setRegion] = useState({
-    latitude: location.lat,
-    longitude: location.lng,
+    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0,
     latitudeDelta: 0.001,
     longitudeDelta: 0.001 * ASPECT_RATIO,
   });
@@ -78,12 +82,15 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   let MARKERS =
     locations &&
     locations.map((location: { lat: number; lng: number; level: number }) => {
-      return location.level === 4 && driverLocation?.lat
+      return location.level === 4 && driverLocation?.lat && driverLocation?.lng
         ? {
-          latitude: driverLocation?.lat,
-          longitude: driverLocation?.lng,
+          latitude: typeof driverLocation?.lat === 'string' ? parseFloat(driverLocation?.lat) || 0 : driverLocation?.lat,
+          longitude: typeof driverLocation?.lng === 'string' ? parseFloat(driverLocation?.lng) || 0 : driverLocation?.lng,
         }
-        : { latitude: location.lat, longitude: location.lng };
+        : {
+          latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat,
+          longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng
+        };
     });
 
   const handleArrowBack: any = () => {

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

@@ -25,8 +25,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       value: language?.code,
       label: language?.name,
       inputLabel: language?.code.toUpperCase(),
-      countryCode: langCountries.find(item => item.value == language?.code)
-        ?.countryCode,
+      countryCode: langCountries.find(item => item.value == language?.code)?.countryCode,
     };
   });
 
@@ -50,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     },
   });
 
-  return (
+  return !languagesState?.loading && languagesState?.languages?.length > 1 && (
     <Container style={{ backgroundColor: theme.colors.inputChat }}>
       {languagesState?.languages && (
         <CountryPicker