@controleonline/ui-default 1.0.263 → 1.0.264

package/src/react/components/map/DefaultNativeMap.native.js

@@ -1,15 +1,16 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {ActivityIndicator, Image, Linking, Platform, Text, View} from 'react-native';
-import {env} from '@env';
-
-import styles from './DefaultNativeMap.styles';
-import {
-  buildGoogleMapsNavigationUrl,
-  buildWazeNavigationUrl,
-  buildAndroidWebMapHtml,
-  resolveWebViewBaseUrlForDomain,
-} from './DefaultNativeMap.shared';
-import {extractMapCoordinates} from './DefaultMap.shared';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {ActivityIndicator, Image, Linking, Platform, Text, View} from 'react-native';
+import {env} from '@env';
+
+import styles from './DefaultNativeMap.styles';
+import {
+  buildGoogleMapsNavigationUrl,
+  buildWazeNavigationUrl,
+  buildAndroidWebMapHtml,
+  resolveWebViewBaseUrlForDomain,
+  resolveMapPopupTheme,
+} from './DefaultNativeMap.shared';
+import {extractMapCoordinates} from './DefaultMap.shared';
 
 const getNativeMapComponents = () => {
   if (Platform.OS === 'android') {
@@ -102,7 +103,7 @@ const decodePolyline = encoded => {
   return coordinates;
 };
 
-const fetchRouteCoordinates = async ({apiKey, origin, destination}) => {
+const fetchRouteData = async ({apiKey, origin, destination}) => {
   if (
     !apiKey ||
     !Number.isFinite(origin?.latitude) ||
@@ -110,7 +111,11 @@ const fetchRouteCoordinates = async ({apiKey, origin, destination}) => {
     !Number.isFinite(destination?.latitude) ||
     !Number.isFinite(destination?.longitude)
   ) {
-    return [];
+    return {
+      coordinates: [],
+      distanceLabel: '',
+      durationLabel: '',
+    };
   }
 
   const response = await fetch(
@@ -122,12 +127,21 @@ const fetchRouteCoordinates = async ({apiKey, origin, destination}) => {
   );
   const payload = await response.json();
   const encodedPoints = payload?.routes?.[0]?.overview_polyline?.points;
+  const activeLeg = payload?.routes?.[0]?.legs?.[0] || null;
 
   if (payload?.status !== 'OK' || !encodedPoints) {
-    return [];
+    return {
+      coordinates: [],
+      distanceLabel: '',
+      durationLabel: '',
+    };
   }
 
-  return decodePolyline(encodedPoints);
+  return {
+    coordinates: decodePolyline(encodedPoints),
+    distanceLabel: String(activeLeg?.distance?.text || '').trim(),
+    durationLabel: String(activeLeg?.duration?.text || '').trim(),
+  };
 };
 
 const buildRegion = coordinates => {
@@ -159,20 +173,24 @@ const buildRegion = coordinates => {
   };
 };
 
-const MetaRow = ({label, value}) => {
+const MetaRow = ({label, value, popupTheme}) => {
   if (!value) {
     return null;
   }
 
   return (
     <View style={styles.metaRow}>
-      <Text style={styles.metaLabel}>{label}</Text>
-      <Text style={styles.metaValue}>{value}</Text>
+      <Text style={[styles.metaLabel, popupTheme && {color: popupTheme.textMuted}]}>
+        {label}
+      </Text>
+      <Text style={[styles.metaValue, popupTheme && {color: popupTheme.modalText}]}>
+        {value}
+      </Text>
     </View>
   );
 };
 
-const CalloutAction = ({label, onPress, primary = false}) => {
+const CalloutAction = ({label, onPress, popupTheme, primary = false}) => {
   if (!CalloutSubview || !label || typeof onPress !== 'function') {
     return null;
   }
@@ -180,47 +198,73 @@ const CalloutAction = ({label, onPress, primary = false}) => {
   return (
     <CalloutSubview
       onPress={onPress}
-      style={[styles.actionButton, primary && styles.actionButtonPrimary]}>
-      <Text style={[styles.actionText, primary && styles.actionTextPrimary]}>
+      style={[
+        styles.actionButton,
+        primary && styles.actionButtonPrimary,
+        popupTheme && {
+          borderColor: popupTheme.buttonBackground,
+          backgroundColor: popupTheme.buttonBackground,
+        },
+      ]}>
+      <Text
+        style={[
+          styles.actionText,
+          primary && styles.actionTextPrimary,
+          popupTheme && {color: popupTheme.buttonText},
+        ]}>
         {label}
       </Text>
     </CalloutSubview>
-  );
-};
-
-const resolveMarkerNavigationUrls = item => {
-  const position = {
-    latitude: Number(item?.latitude),
-    longitude: Number(item?.longitude),
-  };
-
-  return {
-    googleMapsUrl:
-      item?.googleMapsUrl ||
-      buildGoogleMapsNavigationUrl(position),
-    wazeUrl:
-      item?.wazeUrl ||
-      buildWazeNavigationUrl(position),
-  };
-};
-
-export default function DefaultNativeMap({
-  apiKey = '',
-  markerPayloads = [],
-  paths = [],
-  routeColor = '#0EA5E9',
-  userCoordinates = null,
-}) {
+  );
+};
+
+const buildTravelSummary = (item, routeSummary = null) => {
+  const distanceLabel =
+    routeSummary?.distanceLabel || item?.distanceLabel || '';
+  const durationLabel =
+    routeSummary?.durationLabel ||
+    item?.durationLabel ||
+    item?.travelDurationLabel ||
+    '';
+
+  return [distanceLabel, durationLabel].filter(Boolean).join(' • ');
+};
+
+const resolveMarkerNavigationUrls = item => {
+  const position = {
+    latitude: Number(item?.latitude),
+    longitude: Number(item?.longitude),
+  };
+
+  return {
+    googleMapsUrl:
+      item?.googleMapsUrl ||
+      buildGoogleMapsNavigationUrl(position),
+    wazeUrl:
+      item?.wazeUrl ||
+      buildWazeNavigationUrl(position),
+  };
+};
+
+export default function DefaultNativeMap({
+  apiKey = '',
+  markerPayloads = [],
+  paths = [],
+  routeColor = '#0EA5E9',
+  userCoordinates = null,
+  popupTheme = null,
+}) {
   const mapRef = useRef(null);
   const [mapReady, setMapReady] = useState(false);
   const [selectedMarkerId, setSelectedMarkerId] = useState(null);
   const [routeCoordinates, setRouteCoordinates] = useState([]);
+  const [selectedRouteSummary, setSelectedRouteSummary] = useState(null);
   const [androidMapState, setAndroidMapState] = useState('loading');
   const [androidMapErrorMessage, setAndroidMapErrorMessage] = useState('');
   const hasUserCoordinates =
     Number.isFinite(userCoordinates?.latitude) &&
     Number.isFinite(userCoordinates?.longitude);
-  const baseMapCoordinates = useMemo(() => {
+  const baseMapCoordinates = useMemo(() => {
     const coordinates = markerPayloads
       .map(item => ({
         latitude: Number(item?.latitude),
@@ -237,28 +281,28 @@ export default function DefaultNativeMap({
       });
     }
 
-    return coordinates;
-  }, [hasUserCoordinates, markerPayloads, userCoordinates]);
-  const pathCoordinates = useMemo(
-    () =>
-      (Array.isArray(paths) ? paths : []).flatMap(path => {
-        const from = extractMapCoordinates(path?.from || path?.origin || path?.start);
-        const to = extractMapCoordinates(path?.to || path?.destination || path?.end);
-
-        return [from, to].filter(Boolean);
-      }),
-    [paths],
-  );
-  const selectedMarker = useMemo(
-    () => markerPayloads.find(item => item.id === selectedMarkerId) || null,
-    [markerPayloads, selectedMarkerId],
-  );
-  const focusCoordinates = useMemo(() => {
-    const combinedCoordinates = [...baseMapCoordinates, ...pathCoordinates];
-
-    if (routeCoordinates.length > 1) {
-      return routeCoordinates;
-    }
+    return coordinates;
+  }, [hasUserCoordinates, markerPayloads, userCoordinates]);
+  const pathCoordinates = useMemo(
+    () =>
+      (Array.isArray(paths) ? paths : []).flatMap(path => {
+        const from = extractMapCoordinates(path?.from || path?.origin || path?.start);
+        const to = extractMapCoordinates(path?.to || path?.destination || path?.end);
+
+        return [from, to].filter(Boolean);
+      }),
+    [paths],
+  );
+  const selectedMarker = useMemo(
+    () => markerPayloads.find(item => item.id === selectedMarkerId) || null,
+    [markerPayloads, selectedMarkerId],
+  );
+  const focusCoordinates = useMemo(() => {
+    const combinedCoordinates = [...baseMapCoordinates, ...pathCoordinates];
+
+    if (routeCoordinates.length > 1) {
+      return routeCoordinates;
+    }
 
     if (
       hasUserCoordinates &&
@@ -276,44 +320,51 @@ export default function DefaultNativeMap({
         },
       ];
     }
-
-    return combinedCoordinates;
-  }, [
-    baseMapCoordinates,
-    hasUserCoordinates,
-    routeCoordinates,
-    pathCoordinates,
-    selectedMarker?.latitude,
-    selectedMarker?.longitude,
-    userCoordinates,
-  ]);
+
+    return combinedCoordinates;
+  }, [
+    baseMapCoordinates,
+    hasUserCoordinates,
+    routeCoordinates,
+    pathCoordinates,
+    selectedMarker?.latitude,
+    selectedMarker?.longitude,
+    userCoordinates,
+  ]);
 
   const initialRegion = useMemo(() => buildRegion(focusCoordinates), [focusCoordinates]);
   const androidMapBaseUrl = useMemo(
     () => resolveWebViewBaseUrlForDomain(env?.DOMAIN),
     [],
   );
+  const resolvedPopupTheme = useMemo(
+    () => resolveMapPopupTheme(popupTheme),
+    [popupTheme],
+  );
   const androidMapHtml = useMemo(() => {
     if (Platform.OS !== 'android') {
       return '';
     }
 
-    return buildAndroidWebMapHtml({
-      apiKey,
-      markerPayloads,
-      paths,
-      routeColor,
-      userCoordinates,
-    });
-  }, [apiKey, markerPayloads, paths, routeColor, userCoordinates]);
+    return buildAndroidWebMapHtml({
+      apiKey,
+      markerPayloads,
+      paths,
+      routeColor,
+      userCoordinates,
+      popupTheme: resolvedPopupTheme,
+    });
+  }, [apiKey, markerPayloads, paths, resolvedPopupTheme, routeColor, userCoordinates]);
 
   useEffect(() => {
     if (!selectedMarkerId) {
+      setSelectedRouteSummary(null);
       return;
     }
 
     if (!selectedMarker) {
       setSelectedMarkerId(null);
+      setSelectedRouteSummary(null);
     }
   }, [selectedMarker, selectedMarkerId]);
 
@@ -330,12 +381,13 @@ export default function DefaultNativeMap({
   useEffect(() => {
     if (!hasUserCoordinates || !selectedMarker || !apiKey || !Polyline) {
       setRouteCoordinates([]);
+      setSelectedRouteSummary(null);
       return undefined;
     }
 
     let cancelled = false;
 
-    fetchRouteCoordinates({
+    fetchRouteData({
       apiKey,
       origin: {
         latitude: Number(userCoordinates.latitude),
@@ -346,14 +398,21 @@ export default function DefaultNativeMap({
         longitude: Number(selectedMarker.longitude),
       },
     })
-      .then(coordinates => {
+      .then(routeData => {
         if (!cancelled) {
-          setRouteCoordinates(Array.isArray(coordinates) ? coordinates : []);
+          setRouteCoordinates(
+            Array.isArray(routeData?.coordinates) ? routeData.coordinates : [],
+          );
+          setSelectedRouteSummary({
+            distanceLabel: String(routeData?.distanceLabel || '').trim(),
+            durationLabel: String(routeData?.durationLabel || '').trim(),
+          });
         }
       })
       .catch(() => {
         if (!cancelled) {
           setRouteCoordinates([]);
+          setSelectedRouteSummary(null);
         }
       });
 
@@ -391,11 +450,11 @@ export default function DefaultNativeMap({
     return () => clearTimeout(timeoutId);
   }, [focusCoordinates, mapReady]);
 
-  const openExternalUrl = useCallback(url => {
-    const normalizedUrl = String(url || '').trim();
-    if (!normalizedUrl) {
-      return;
-    }
+  const openExternalUrl = useCallback(url => {
+    const normalizedUrl = String(url || '').trim();
+    if (!normalizedUrl) {
+      return;
+    }
 
     Linking.openURL(normalizedUrl).catch(() => {});
   }, []);
@@ -419,14 +478,14 @@ export default function DefaultNativeMap({
 
       return true;
     },
-    [openExternalUrl],
-  );
-
-  if (!apiKey || (markerPayloads.length === 0 && !hasUserCoordinates && pathCoordinates.length === 0)) {
-    return null;
-  }
-
-  if (Platform.OS === 'android') {
+    [openExternalUrl],
+  );
+
+  if (!apiKey || (markerPayloads.length === 0 && !hasUserCoordinates && pathCoordinates.length === 0)) {
+    return null;
+  }
+
+  if (Platform.OS === 'android') {
     return (
       <View style={styles.mapContainer}>
         <NativeWebView
@@ -530,86 +589,151 @@ export default function DefaultNativeMap({
           onPress={() => {
             setSelectedMarkerId(null);
             setRouteCoordinates([]);
+            setSelectedRouteSummary(null);
           }}
         />
       ) : null}
-      {Polyline && routeCoordinates.length > 1 ? (
-        <Polyline
-          coordinates={routeCoordinates}
-          strokeColor={routeColor}
-          strokeWidth={5}
-        />
-      ) : null}
-      {Polyline && Array.isArray(paths)
-        ? paths.map(path => {
-            const from = extractMapCoordinates(path?.from || path?.origin || path?.start);
-            const to = extractMapCoordinates(path?.to || path?.destination || path?.end);
-
-            if (!from || !to) {
-              return null;
-            }
-
-            return (
-              <Polyline
-                key={path?.id || `${from.latitude}:${from.longitude}-${to.latitude}:${to.longitude}`}
-                coordinates={[from, to]}
-                strokeColor={path?.color || routeColor}
-                strokeWidth={4}
-              />
-            );
-          })
-        : null}
-      {markerPayloads.map(item => {
-        const navigationUrls = resolveMarkerNavigationUrls(item);
-
-        return (
-          <Marker
-            key={item.id}
-            coordinate={{
-              latitude: Number(item.latitude),
-              longitude: Number(item.longitude),
-            }}
-            title={item.title}
-            description={item.addressLine}
-            onPress={() => setSelectedMarkerId(item.id)}>
-            {item.markerIconUrl ? (
-              <View style={styles.markerWrap}>
-                <Image
-                  source={{uri: item.markerIconUrl}}
-                  style={styles.markerIcon}
-                  resizeMode="contain"
-                />
-              </View>
-            ) : null}
-            <Callout tooltip>
-              <View style={styles.calloutCard}>
-                <Text style={styles.companyName}>{item.companyName}</Text>
-                <Text style={styles.title}>{item.title}</Text>
-                {item.addressLine ? <Text style={styles.line}>{item.addressLine}</Text> : null}
-                {item.addressExtra ? <Text style={styles.line}>{item.addressExtra}</Text> : null}
-
-                <View style={styles.metaList}>
-                  <MetaRow label="Telefone" value={item.phoneLabel} />
-                  <MetaRow label="Distancia" value={item.distanceLabel} />
-                  <MetaRow label="Horario" value={item.openingHours} />
-                </View>
-
-                <View style={styles.actionsRow}>
-                  <CalloutAction
-                    label="Abrir no Maps"
-                    onPress={() => openExternalUrl(navigationUrls.googleMapsUrl)}
-                    primary
-                  />
-                  <CalloutAction
-                    label="Waze"
-                    onPress={() => openExternalUrl(navigationUrls.wazeUrl)}
-                  />
-                </View>
-              </View>
-            </Callout>
-          </Marker>
-        );
-      })}
+      {Polyline && routeCoordinates.length > 1 ? (
+        <Polyline
+          coordinates={routeCoordinates}
+          strokeColor={routeColor}
+          strokeWidth={5}
+        />
+      ) : null}
+      {Polyline && Array.isArray(paths)
+        ? paths.map(path => {
+            const from = extractMapCoordinates(path?.from || path?.origin || path?.start);
+            const to = extractMapCoordinates(path?.to || path?.destination || path?.end);
+
+            if (!from || !to) {
+              return null;
+            }
+
+            return (
+              <Polyline
+                key={path?.id || `${from.latitude}:${from.longitude}-${to.latitude}:${to.longitude}`}
+                coordinates={[from, to]}
+                strokeColor={path?.color || routeColor}
+                strokeWidth={4}
+              />
+            );
+          })
+        : null}
+      {markerPayloads.map(item => {
+        const navigationUrls = resolveMarkerNavigationUrls(item);
+        const title = item?.unitAlias || item?.alias || item?.companyName || item?.title;
+        const travelSummary =
+          selectedMarkerId === item.id
+            ? buildTravelSummary(item, selectedRouteSummary)
+            : buildTravelSummary(item, null);
+        const logoFallback = String(title || 'CO')
+          .trim()
+          .split(/\s+/)
+          .slice(0, 2)
+          .map(chunk => chunk[0] || '')
+          .join('')
+          .toUpperCase();
+
+        return (
+          <Marker
+            key={item.id}
+            coordinate={{
+              latitude: Number(item.latitude),
+              longitude: Number(item.longitude),
+            }}
+            title={item.title}
+            description={item.addressLine}
+            onPress={() => setSelectedMarkerId(item.id)}>
+            {item.markerIconUrl ? (
+              <View style={styles.markerWrap}>
+                <Image
+                  source={{uri: item.markerIconUrl}}
+                  style={styles.markerIcon}
+                  resizeMode="contain"
+                />
+              </View>
+            ) : null}
+            <Callout tooltip>
+              <View
+                style={[
+                  styles.calloutCard,
+                  {
+                    backgroundColor: resolvedPopupTheme.modalBackground,
+                    shadowColor: resolvedPopupTheme.modalShadow,
+                  },
+                ]}>
+                <View style={styles.headerRow}>
+                  <View
+                    style={[
+                      styles.logoWrap,
+                      {borderColor: resolvedPopupTheme.dividerBorder},
+                    ]}>
+                    {item?.companyLogoUrl ? (
+                      <Image
+                        source={{uri: item.companyLogoUrl}}
+                        style={styles.logoImage}
+                        resizeMode="cover"
+                      />
+                    ) : (
+                      <Text
+                        style={[
+                          styles.logoFallback,
+                          {color: resolvedPopupTheme.buttonBackground},
+                        ]}>
+                        {logoFallback}
+                      </Text>
+                    )}
+                  </View>
+                  <View style={styles.headerContent}>
+                    <Text
+                      style={[
+                        styles.title,
+                        {color: resolvedPopupTheme.modalHeaderText},
+                      ]}>
+                      {title}
+                    </Text>
+                  </View>
+                </View>
+                {item.addressLine ? (
+                  <Text style={[styles.line, {color: resolvedPopupTheme.modalText}]}>
+                    {item.addressLine}
+                  </Text>
+                ) : null}
+                {item.addressExtra ? (
+                  <Text style={[styles.line, {color: resolvedPopupTheme.modalText}]}>
+                    {item.addressExtra}
+                  </Text>
+                ) : null}
+
+                {travelSummary ? (
+                  <Text
+                    style={[
+                      styles.summaryText,
+                      {color: resolvedPopupTheme.textMuted},
+                    ]}>
+                    {travelSummary}
+                  </Text>
+                ) : null}
+
+                <View style={styles.actionsRow}>
+                  <CalloutAction
+                    label="Abrir no Maps"
+                    onPress={() => openExternalUrl(navigationUrls.googleMapsUrl)}
+                    popupTheme={resolvedPopupTheme}
+                    primary
+                  />
+                  <CalloutAction
+                    label="Abrir no Waze"
+                    onPress={() => openExternalUrl(navigationUrls.wazeUrl)}
+                    popupTheme={resolvedPopupTheme}
+                    primary
+                  />
+                </View>
+              </View>
+            </Callout>
+          </Marker>
+        );
+      })}
     </NativeMapView>
   );
 }