ordering-ui-react-native 0.8.3 → 0.8.7

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

@@ -147,7 +147,7 @@ const ChatUI = (props: MessagesParams) => {
       shadowRadius: 3.84,
       elevation: 2,
       backgroundColor: theme.colors.white,
-      marginRight: 4,
+      marginLeft: 4,
     },
     avatarIcon: {
       height: 16,
@@ -267,59 +267,65 @@ const ChatUI = (props: MessagesParams) => {
     }
   };
 
-  const getStatus = (status: number) => {
+  const getStatus = (status: number, attribute: any) => {
     const hour = Math.trunc(status / 60);
     const min = Math.round((status / 60 - hour) * 60);
 
-    switch (status) {
-      case 0:
-        return 'ORDER_STATUS_PENDING';
-      case 1:
-        return 'ORDERS_COMPLETED';
-      case 2:
-        return 'ORDER_REJECTED';
-      case 3:
-        return 'ORDER_STATUS_IN_BUSINESS';
-      case 4:
-        return 'ORDER_READY';
-      case 5:
-        return 'ORDER_REJECTED_RESTAURANT';
-      case 6:
-        return 'ORDER_STATUS_CANCELLEDBYDRIVER';
-      case 7:
-        return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
-      case 8:
-        return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
-      case 9:
-        return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
-      case 10:
-        return 'ORDER_PICKUP_FAILED_BY_DRIVER';
-      case 11:
-        return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
-      case 12:
-        return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
-      case 13:
-        return 'PREORDER';
-      case 14:
-        return 'ORDER_NOT_READY';
-      case 15:
-        return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
-      case 16:
-        return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
-      case 17:
-        return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
-      case 18:
-        return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
-      case 19:
-        return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
-      case 20:
-        return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
-      case 21:
-        return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
-      default:
-        return `${hour < 10 ? '0' + hour : hour}:${
-          min < 10 ? '0' + min : min
-        } ${status > 60 ? 'hours' : 'minutes'}`;
+    if (attribute === 'status') {
+      switch (status) {
+        case 0:
+          return 'ORDER_STATUS_PENDING';
+        case 1:
+          return 'ORDERS_COMPLETED';
+        case 2:
+          return 'ORDER_REJECTED';
+        case 3:
+          return 'ORDER_STATUS_IN_BUSINESS';
+        case 4:
+          return 'ORDER_READY';
+        case 5:
+          return 'ORDER_REJECTED_RESTAURANT';
+        case 6:
+          return 'ORDER_STATUS_CANCELLEDBYDRIVER';
+        case 7:
+          return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
+        case 8:
+          return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
+        case 9:
+          return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
+        case 10:
+          return 'ORDER_PICKUP_FAILED_BY_DRIVER';
+        case 11:
+          return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
+        case 12:
+          return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
+        case 13:
+          return 'PREORDER';
+        case 14:
+          return 'ORDER_NOT_READY';
+        case 15:
+          return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
+        case 16:
+          return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
+        case 17:
+          return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
+        case 18:
+          return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
+        case 19:
+          return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
+        case 20:
+          return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
+        case 21:
+          return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
+        default:
+          return ``;
+      }
+    }
+
+    if (attribute === 'prepared_in' || attribute === 'delivered_in') {
+      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${
+        status > 60 ? 'hours' : 'minutes'
+      }`;
     }
   };
 
@@ -348,10 +354,18 @@ const ChatUI = (props: MessagesParams) => {
                 message.change.attribute,
               )} ${t('CHANGED_FROM', 'Changed from')} ${
                 message.change.old !== null
-                  ? t(getStatus(parseInt(message.change.old, 10)))
+                  ? t(
+                      getStatus(
+                        parseInt(message.change.old, 10),
+                        message.change?.attribute,
+                      ),
+                    )
                   : '0'
               } ${t('TO', 'to')} ${t(
-                getStatus(parseInt(message.change.new, 10)),
+                getStatus(
+                  parseInt(message.change.new, 10),
+                  message.change?.attribute,
+                ),
               )}`
             : message.change.new
             ? `${message.driver?.name} ${
@@ -868,7 +882,7 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   const renderAvatar = (props: any) => (
-    <View style={{ marginBottom: 10, alignItems: 'flex-start' }}>
+    <View style={{ marginBottom: 10, alignItems: 'flex-end' }}>
       <OText size={9} color={theme.colors.textGray}>
         {`${t('SENT_TO', 'Sent to')}:`}
       </OText>

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Dimensions, StyleSheet, View, Platform } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import MapView, {
-  PROVIDER_DEFAULT,
   PROVIDER_GOOGLE,
   Marker,
   Region,
@@ -15,23 +14,20 @@ import { OIconButton, OIcon, OFab, OText } from '../shared';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
-import Spinner from 'react-native-loading-spinner-overlay';
 // import MapViewDirections from 'react-native-maps-directions';
 import { FloatingButton } from '../FloatingButton';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
     location,
-    handleChangeAddressMap,
     maxLimitLocation,
-    readOnly,
     markerTitle,
     handleOpenMapView,
     showAcceptOrReject,
     saveLocation,
     setSaveLocation,
     order,
-    handleToggleMap,
     isSetInputs,
     orderStatus,
     isBusinessMarker,
@@ -48,7 +44,9 @@ export const DriverMap = (props: GoogleMapsParams) => {
   const following = useRef<boolean>(true);
   const autoFit = useRef<boolean>(true);
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value;
+  const [travelTime, setTravelTime] = useState(0);
   const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
+  const [isMin, setIsMin] = useState(false);
   const [infoRealTime, setInfoRealTime] = useState({ formatted_address: '' });
   const [{ parseDate }] = useUtils();
   const mapErrors: any = {
@@ -68,7 +66,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     getCurrentLocation,
     userLocation,
     stopFollowUserLocation,
-    routeLines,
   } = useLocation();
 
   const origin = {
@@ -77,6 +74,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
   };
   const destination = { latitude: location.lat, longitude: location.lng };
 
+  const { top } = useSafeAreaInsets();
+
   useEffect(() => {
     if (isToFollow) {
       fitCoordinates();
@@ -179,7 +178,13 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
     const distance = R * c;
     const distanceInKm = distance / 1000;
+    const estimatedTimeTravel = distance / userLocation.speed / 60;
+    const time =
+      estimatedTimeTravel > 60 ? estimatedTimeTravel / 60 : estimatedTimeTravel;
+    setIsMin(estimatedTimeTravel < 60);
+    const timeEstimated = userLocation.speed > 0 ? time : travelTime;
     setDistancesFromTwoPlacesKm(distanceInKm);
+    setTravelTime(timeEstimated);
     return distance;
   };
 
@@ -266,10 +271,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     return () => clearInterval(interval);
   }, [initialPosition]);
 
-  if (!hasLocation) {
-    return <Spinner visible={!hasLocation} />;
-  }
-
   const fitCoordinatesZoom = () => {
     following.current = false;
     fitCoordinates();
@@ -292,44 +293,31 @@ export const DriverMap = (props: GoogleMapsParams) => {
       right: 0,
     },
     buttonBack: {
-      borderRadius: 7.6,
       borderWidth: 0,
+      maxWidth: 100,
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
     },
-    facOrderStatus: {
+    facContainer: {
       position: 'absolute',
-      height: 100,
-      top: Platform.OS === 'ios' ? 15 : 0,
-      left: 0,
+      top: 0,
       zIndex: 9999,
       width: '100%',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
       backgroundColor: theme.colors.white,
-      borderWidth: 0,
-      paddingLeft: 0,
-      paddingVertical: 10,
-      borderBottomWidth: 10,
+    },
+    facOrderStatus: {
+      flexDirection: 'row',
+      paddingTop: top + 5,
+      borderBottomWidth: 11,
       borderBottomColor: theme.colors.inputChat,
     },
     facDistance: {
-      position: 'absolute',
-      height: 100,
-      top: 95,
-      left: 0,
-      zIndex: 9999,
-      width: '100%',
       flexDirection: 'row',
-      justifyContent: 'center',
+      minHeight: 70,
       alignItems: 'center',
-      backgroundColor: theme.colors.white,
-      borderWidth: 0,
-      paddingLeft: 0,
     },
     arrowDistance: {
-      borderRadius: 7.6,
       borderWidth: 0,
-      paddingHorizontal: 40,
     },
   });
 
@@ -337,35 +325,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     validateResult(coordinates);
   };
 
-  const validateResult = (curPos: { latitude: number; longitude: number }) => {
-    const loc1 = { lat: userLocation.latitude, lng: userLocation.longitude };
-    const loc2 = curPos;
-    const distance = calculateDistance(loc1, loc2);
-
-    // if (!maxLimitLocation) {
-    //   geocodePosition(curPos);
-    //   setMarkerPosition(curPos);
-    //   setRegion({
-    //     ...region,
-    //     longitude: curPos.longitude,
-    //     latitude: curPos.latitude,
-    //   });
-    //   return;
-    // }
-
-    // if (distance <= maxLimitLocation) {
-    //   setMarkerPosition(curPos);
-    //   setRegion({
-    //     ...region,
-    //     longitude: curPos.longitude,
-    //     latitude: curPos.latitude,
-    //   });
-    // } else {
-    //   setMapErrors && setMapErrors('ERROR_MAX_LIMIT_LOCATION');
-    //   setMarkerPosition({ latitude: center.lat, longitude: center.lng });
-    // }
-  };
-
   return (
     <>
       <View style={{ flex: 1 }}>
@@ -461,61 +420,72 @@ export const DriverMap = (props: GoogleMapsParams) => {
           right: 20,
         }}
       />
-
-      <View style={styles.facOrderStatus}>
-        <OIconButton
-          icon={theme.images.general.close}
-          iconStyle={{ width: 32, height: 32 }}
-          style={styles.buttonBack}
-          onClick={() => handleArrowBack()}
-        />
-        <View style={{ width: '70%' }}>
-          <OText size={12} color={theme.colors.textGray}>
-            {order?.delivery_datetime_utc
-              ? parseDate(order?.delivery_datetime_utc)
-              : parseDate(order?.delivery_datetime, { utc: false })}
-            {` - ${order?.paymethod?.name}`}
-          </OText>
-          <OText weight="600">
-            {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}
-            {` ${t('IS', 'is')} `}
-            <OText
-              size={16}
-              numberOfLines={1}
-              adjustsFontSizeToFit
-              color={colors[order?.status] || theme.colors.statusOrderBlue}>
-              {`${orderStatus}`}
+      <View style={styles.facContainer}>
+        <View style={styles.facOrderStatus}>
+          <View
+            style={{
+              width: '25%',
+              justifyContent: 'flex-start',
+            }}>
+            <OIconButton
+              icon={theme.images.general.close}
+              iconStyle={{
+                width: 32,
+                height: 25,
+              }}
+              style={styles.buttonBack}
+              onClick={() => handleArrowBack()}
+            />
+          </View>
+          <View style={{ width: '75%' }}>
+            <OText size={12} color={theme.colors.textGray}>
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })}
+              {` - ${order?.paymethod?.name}`}
             </OText>
-          </OText>
-        </View>
-      </View>
-
-      <View style={styles.facDistance}>
-        <View
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <OIcon
-            src={theme.images.general.arrow_distance}
-            style={styles.arrowDistance}
-          />
-          <OText size={13} numberOfLines={1} adjustsFontSizeToFit space>{`${(
-            distancesFromTwoPlacesKm * 3280.84
-          ).toFixed(0)} Ft`}</OText>
+            <OText weight="bold">
+              {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}
+              {` ${t('IS', 'is')} `}
+              <OText
+                size={16}
+                numberOfLines={2}
+                color={colors[order?.status] || theme.colors.statusOrderBlue}>
+                {`${orderStatus}`}
+              </OText>
+            </OText>
+          </View>
         </View>
 
-        <View style={{ width: '70%' }}>
-          <OText
-            color={theme.colors.unselectText}
-            size={13}
-            numberOfLines={2}
-            adjustsFontSizeToFit>
-            {`30 min - ${distancesFromTwoPlacesKm.toFixed(2)} km`}
-          </OText>
-          <OText size={13} numberOfLines={3} adjustsFontSizeToFit>
-            {infoRealTime?.formatted_address}
-          </OText>
+        <View style={styles.facDistance}>
+          <View
+            style={{
+              width: '25%',
+              alignItems: 'center',
+              paddingHorizontal: 20,
+            }}>
+            <OIcon
+              src={theme.images.general.arrow_distance}
+              style={styles.arrowDistance}
+            />
+            <OText size={12} numberOfLines={2}>{`${(
+              distancesFromTwoPlacesKm * 3280.84
+            ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
+          </View>
+          <View style={{ width: '75%' }}>
+            <OText
+              color={theme.colors.unselectText}
+              size={13}
+              numberOfLines={2}
+              adjustsFontSizeToFit>
+              {`${travelTime.toFixed(2)} - ${
+                isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
+              } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+            </OText>
+            <OText size={13} numberOfLines={3} adjustsFontSizeToFit>
+              {infoRealTime?.formatted_address}
+            </OText>
+          </View>
         </View>
       </View>
 

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

@@ -1,11 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, {
-  PROVIDER_DEFAULT,
-  PROVIDER_GOOGLE,
-  Marker,
-  Region,
-} from 'react-native-maps';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import MapView, { PROVIDER_GOOGLE, Marker, Region } from 'react-native-maps';
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { GoogleMapsParams } from '../../types';
@@ -14,6 +9,7 @@ import { OIconButton, OIcon } from '../shared';
 import { FloatingButton } from '../FloatingButton';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const GoogleMap = (props: GoogleMapsParams) => {
   const {
@@ -24,6 +20,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     handleViewActionOrder,
     markerTitle,
     showAcceptOrReject,
+    driverLocation,
     saveLocation,
     handleOpenMapView,
     setSaveLocation,
@@ -33,6 +30,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     navigation,
   } = props;
 
+  const { top } = useSafeAreaInsets();
   const theme = useTheme();
   const [, t] = useLanguage();
   const [configState] = useConfig();
@@ -64,13 +62,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_NOT_FOUND_ADDRESS: "Sorry, we couldn't find an address",
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
   };
+
   const MARKERS =
     locations &&
-    locations.map((location: { lat: number; lng: number }) => {
-      return {
-        latitude: location.lat,
-        longitude: location.lng,
-      };
+    locations.map((location: { lat: number; lng: number; level: number }) => {
+      return location.level === 4 && driverLocation?.lat
+        ? {
+            latitude: driverLocation?.lat,
+            longitude: driverLocation?.lng,
+          }
+        : { latitude: location.lat, longitude: location.lng };
     });
 
   const handleArrowBack: any = () => {
@@ -223,6 +224,35 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     return () => clearInterval(interval);
   }, [locations]);
 
+  const styles = StyleSheet.create({
+    map: {
+      flex: 1,
+      ...StyleSheet.absoluteFillObject,
+    },
+    image: {
+      borderRadius: 50,
+    },
+    view: {
+      width: 25,
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      bottom: 0,
+      right: 0,
+    },
+    buttonBack: {
+      borderRadius: 7.6,
+      borderWidth: 0,
+      paddingLeft: 0,
+    },
+    buttonContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 15,
+      marginTop: top,
+    },
+  });
+
   return (
     <>
       <View style={{ flex: 1, position: 'relative' }}>
@@ -303,7 +333,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           secondColorCustom={theme.colors.green}
         />
       )}
-      <View style={styles.buttonBack}>
+      <View style={styles.buttonContainer}>
         <OIconButton
           icon={theme.images.general.close}
           iconStyle={{ width: 32, height: 32 }}
@@ -314,29 +344,3 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     </>
   );
 };
-
-const styles = StyleSheet.create({
-  map: {
-    flex: 1,
-    ...StyleSheet.absoluteFillObject,
-  },
-  image: {
-    borderRadius: 50,
-  },
-  view: {
-    width: 25,
-    position: 'absolute',
-    top: 6,
-    left: 6,
-    bottom: 0,
-    right: 0,
-  },
-  buttonBack: {
-    position: 'absolute',
-    borderRadius: 7.6,
-    top: 30,
-    left: 15,
-    borderWidth: 0,
-    paddingLeft: 0,
-  },
-});