Merge pull request Expensify#87103 from software-mansion-labs/@GCyganek/gps/add-map-to-gps-screen

Author: puneetlath

src/CONST/index.ts

@@ -9597,6 +9597,13 @@ const CONST = {
     },
 
     MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE: 0.75,
+
+    MAP_VIEW_LAYERS: {
+        USER_LOCATION_SOURCE: 'user-location-source',
+        USER_LOCATION: 'user-location',
+        ROUTE_SOURCE: 'route-source',
+        ROUTE_FILL: 'route-fill',
+    },
 } as const;
 
 const CONTINUATION_DETECTION_SEARCH_FILTER_KEYS = [

src/components/MapView/Direction.tsx

@@ -1,16 +1,17 @@
 import Mapbox from '@rnmapbox/maps';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: DirectionProps) {
+function Direction({coordinates, belowLayerID}: DirectionProps) {
     const styles = useThemeStyles();
     if (coordinates.length < 1) {
         return null;
     }
 
     return (
         <Mapbox.ShapeSource
-            id="routeSource"
+            id={CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}
             shape={{
                 type: 'Feature',
                 properties: {},
@@ -21,7 +22,8 @@ function Direction({coordinates}: DirectionProps) {
             }}
         >
             <Mapbox.LineLayer
-                id="routeFill"
+                belowLayerID={belowLayerID}
+                id={CONST.MAP_VIEW_LAYERS.ROUTE_FILL}
                 style={styles.mapDirection}
             />
         </Mapbox.ShapeSource>

src/components/MapView/Direction.website.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
@@ -20,7 +21,7 @@ function Direction({coordinates}: DirectionProps) {
         <View>
             {!!coordinates && (
                 <Source
-                    id="route"
+                    id={CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}
                     type="geojson"
                     data={{
                         type: 'Feature',
@@ -32,9 +33,9 @@ function Direction({coordinates}: DirectionProps) {
                     }}
                 >
                     <Layer
-                        id="route"
+                        id={CONST.MAP_VIEW_LAYERS.ROUTE_FILL}
                         type="line"
-                        source="route"
+                        source={CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}
                         paint={layerPointStyle}
                         layout={layerLayoutStyle}
                     />

src/components/MapView/MapView.tsx

@@ -278,7 +278,7 @@ function MapView({
                 />
                 {interactive && (
                     <Mapbox.ShapeSource
-                        id="user-location"
+                        id={CONST.MAP_VIEW_LAYERS.USER_LOCATION_SOURCE}
                         shape={{
                             type: 'FeatureCollection',
                             features: [
@@ -294,8 +294,8 @@ function MapView({
                         }}
                     >
                         <Mapbox.CircleLayer
-                            id="user-location-layer"
-                            sourceID="user-location"
+                            id={CONST.MAP_VIEW_LAYERS.USER_LOCATION}
+                            sourceID={CONST.MAP_VIEW_LAYERS.USER_LOCATION_SOURCE}
                             style={{
                                 circleColor: colors.blue400,
                                 circleRadius: 8,
@@ -319,7 +319,12 @@ function MapView({
                     );
                 })}
 
-                {!!directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                {!!directionCoordinates && (
+                    <Direction
+                        coordinates={directionCoordinates}
+                        belowLayerID={interactive ? CONST.MAP_VIEW_LAYERS.USER_LOCATION : undefined}
+                    />
+                )}
                 {!!distanceSymbolCoordinate && !!distanceInMeters && !!distanceUnit && (
                     <MarkerView
                         coordinate={distanceSymbolCoordinate}

src/components/MapView/MapViewTypes.ts

@@ -39,6 +39,9 @@ type MapViewProps = {
 type DirectionProps = {
     // Coordinates of points that constitute the direction
     coordinates: Coordinate[];
+
+    // ID of the layer to place the line layer below
+    belowLayerID?: string;
 };
 
 type PendingMapViewProps = {

src/libs/GPSDraftDetailsUtils.ts

@@ -139,4 +139,8 @@ async function stopGpsTrip(isOffline: boolean, skipLastPointAddressFetching = fa
     setEndAddress({value: formattedCoordinates, type: 'coordinates'});
 }
 
-export {getGPSRoutes, getGPSWaypoints, stopGpsTrip, getGPSConvertedDistance, getGPSCoordinates, addressFromGpsPoint, coordinatesToString, calculateGPSDistance};
+function isTripCaptured(gpsDraftDetails: GpsDraftDetails | undefined): boolean {
+    return !gpsDraftDetails?.isTracking && (gpsDraftDetails?.gpsPoints?.length ?? 0) > 0;
+}
+
+export {getGPSRoutes, getGPSWaypoints, stopGpsTrip, getGPSConvertedDistance, getGPSCoordinates, addressFromGpsPoint, coordinatesToString, calculateGPSDistance, isTripCaptured};

src/libs/actions/GPSDraftDetails.ts

@@ -6,6 +6,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {GpsDraftDetails} from '@src/types/onyx';
 import type {Unit} from '@src/types/onyx/Policy';
 import geodesicDistance from '@src/utils/geodesicDistance';
+import {setUserLocation} from './UserLocation';
 
 function resetGPSDraftDetails() {
     Onyx.merge(ONYXKEYS.GPS_DRAFT_DETAILS, null);
@@ -72,6 +73,12 @@ function addGpsPoints(gpsDraftDetails: OnyxEntry<GpsDraftDetails>, newGpsPoints:
 
     const updatedGpsPoints = [...capturedPoints, ...gpsPointsToAdd];
 
+    const latestPoint = updatedGpsPoints.at(-1);
+
+    if (latestPoint) {
+        setUserLocation({longitude: latestPoint.long, latitude: latestPoint.lat});
+    }
+
     if (updatedDistance > 0) {
         updateGpsTripNotificationDistance(updatedDistance);
     }

src/pages/iou/request/step/IOURequestStepDistanceGPS/DistanceCounter/TripStatusIndicator/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
+import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {isTrackingSelector} from '@src/selectors/GPSDraftDetails';
+
+const GPS_TOOLTIP_HORIZONTAL_PADDING = 40;
+
+function GPSTooltip({children}: React.PropsWithChildren) {
+    const [isTracking = false] = useOnyx(ONYXKEYS.GPS_DRAFT_DETAILS, {selector: isTrackingSelector});
+
+    const styles = useThemeStyles();
+    const {windowWidth} = useWindowDimensions();
+
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GPS_TOOLTIP, !!isTracking);
+
+    return (
+        <EducationalTooltip
+            wrapperStyle={styles.productTrainingTooltipWrapper}
+            shiftVertical={-12}
+            maxWidth={windowWidth - GPS_TOOLTIP_HORIZONTAL_PADDING}
+            renderTooltipContent={renderProductTrainingTooltip}
+            shouldRender={shouldShowProductTrainingTooltip}
+        >
+            {children}
+        </EducationalTooltip>
+    );
+}
+
+export default GPSTooltip;