[GPS] Add stop address editing

src/CONST/index.ts

@@ -5374,7 +5374,7 @@ const CONST = {
     MAP_MARKER_SIZES: {
         CURRENT_LOCATION: {width: 48, height: 48},
         START_WAYPOINT: {width: 48, height: 48},
-        STOP_WAYPOINT: {width: 48, height: 53},
+        STOP_WAYPOINT: {width: 48, height: 53, xAxisLineHeight: 16},
         WAYPOINT: {width: 40, height: 40},
     },
 
@@ -8699,7 +8699,9 @@ const CONST = {
             DISTANCE_ODOMETER_SAVE_FOR_LATER_BUTTON: 'IOURequestStep-DistanceOdometerSaveForLaterButton',
             ODOMETER_CHOOSE_FILE_BUTTON: 'IOURequestStep-OdometerChooseFileButton',
             GPS_START_STOP_BUTTON: 'IOURequestStep-GPSStartStopButton',
+            GPS_EDIT_BUTTON: 'IOURequestStep-GPSEditButton',
             GPS_DISCARD_BUTTON: 'IOURequestStep-GPSDiscardButton',
+            GPS_SAVE_EDIT_BUTTON: 'IOURequestStep-GPSSaveEditButton',
             GPS_NEXT_BUTTON: 'IOURequestStep-GPSNextButton',
             GPS_OPEN_MOBILE_BUTTON: 'IOURequestStep-GPSOpenMobileButton',
             WAYPOINT_REMOVE_BUTTON: 'IOURequestStep-WaypointRemoveButton',

src/ROUTES.ts

@@ -2314,6 +2314,11 @@ const ROUTES = {
         getRoute: (action: IOUAction, iouType: IOUType, transactionID: string, reportID: string, imageType: OdometerImageType, isEditingConfirmation?: boolean, backToReport?: string) =>
             `${action as string}/${iouType as string}/odometer-image/${transactionID}/${reportID}/${imageType}${backToReport ? `/${backToReport}` : ''}${isEditingConfirmation ? '?isEditingConfirmation=true' : ''}` as const,
     },
+    GPS_TRIP_EDIT: {
+        route: ':action/:iouType/gps-trip-edit/:transactionID/:reportID/:backToReport?',
+        getRoute: (action: IOUAction, iouType: IOUType, transactionID: string, reportID: string, backToReport?: string) =>
+            `${action as string}/${iouType as string}/gps-trip-edit/${transactionID}/${reportID}${backToReport ? `/${backToReport}` : ''}` as const,
+    },
     IOU_SEND_ADD_DEBIT_CARD: 'pay/new/add-debit-card',
     IOU_SEND_ENABLE_PAYMENTS: 'pay/new/enable-payments',
 

src/SCREENS.ts

@@ -373,6 +373,7 @@ const SCREENS = {
         STEP_DISTANCE_GPS: 'Money_Request_Step_Distance_GPS',
         STEP_DISTANCE_ODOMETER: 'Money_Request_Step_Distance_Odometer',
         ODOMETER_IMAGE: 'Money_Request_Odometer_Image',
+        GPS_TRIP_EDIT: 'Money_Request_GPS_Trip_Edit',
         RECEIPT_PREVIEW: 'Money_Request_Receipt_preview',
         ODOMETER_PREVIEW: 'Money_Request_Odometer_Preview',
         STEP_TIME_RATE: 'Money_Request_Step_Time_Rate',

src/components/ConfirmedRoute.tsx

@@ -1,4 +1,3 @@
-import useMapMarkers from '@hooks/useMapMarkers';
 import type {MapMarkerType} from '@hooks/useMapMarkers/types';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -14,7 +13,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Transaction} from '@src/types/onyx';
 
-import type {ReactNode} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 
 import React, {useEffect} from 'react';
@@ -52,7 +50,6 @@ function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = tr
     const coordinates = route?.geometry?.coordinates ?? [];
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const getMapMarkerIconComponent = useMapMarkers();
 
     const [mapboxAccessToken] = useOnyx(ONYXKEYS.MAPBOX_ACCESS_TOKEN);
 
@@ -79,7 +76,7 @@ function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = tr
         waypointMarkers.push({
             id: `${waypoint.lng},${waypoint.lat},${index}`,
             coordinate: [waypoint.lng, waypoint.lat] as const,
-            markerComponent: (): ReactNode => getMapMarkerIconComponent(markerType),
+            markerType,
         });
     }
 

src/components/DistanceRequest/DistanceRequestFooter.tsx

@@ -4,7 +4,6 @@ import type {WayPoint} from '@components/MapView/MapViewTypes';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
-import useMapMarkers from '@hooks/useMapMarkers';
 import type {MapMarkerType} from '@hooks/useMapMarkers/types';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
@@ -19,7 +18,6 @@ import type {Policy} from '@src/types/onyx';
 import type {WaypointCollection} from '@src/types/onyx/Transaction';
 import type Transaction from '@src/types/onyx/Transaction';
 
-import type {ReactNode} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 
@@ -49,7 +47,6 @@ function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPa
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Plus']);
-    const getMapMarkerIconComponent = useMapMarkers();
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
     const activePolicy = usePolicy(activePolicyID);
@@ -81,7 +78,7 @@ function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPa
         waypointMarkers.push({
             id: `${waypoint.lng},${waypoint.lat},${index}`,
             coordinate: [waypoint.lng, waypoint.lat] as const,
-            markerComponent: (): ReactNode => getMapMarkerIconComponent(markerType),
+            markerType,
         });
     }
 

src/components/GPSTripStateChecker/useUpdateGpsTripOnReconnect.ts

@@ -1,14 +1,30 @@
 import useNetwork from '@hooks/useNetwork';
 
-import {updateGpsPoints} from '@libs/actions/GPSDraftDetails';
+import {updateGpsPoints, updateTrimmedEndPoint} from '@libs/actions/GPSDraftDetails';
 import {addressFromGpsPoint, getGpsPoints} from '@libs/GPSDraftDetailsUtils';
 
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {GPSPoint} from '@src/types/onyx/GpsDraftDetails';
+import type {GPSPoint, TrimmedGPSPoint} from '@src/types/onyx/GpsDraftDetails';
 
 import OnyxUtils from 'react-native-onyx/dist/OnyxUtils';
 
 function useUpdateGpsTripOnReconnect({gpsPoints}: {gpsPoints: GPSPoint[][]}) {
+    // The trimmed end point is chosen in the Edit Stop screen. When trimmed while offline, its address is stored as
+    // stringified coordinates, so on reconnect we fetch the human readable address to replace it.
+    const updateTrimmedEndPointAddress = async (trimmedEndPoint: TrimmedGPSPoint | undefined) => {
+        // If the address is already human readable, we don't need to update it
+        if (!trimmedEndPoint || trimmedEndPoint.address?.type === 'address') {
+            return;
+        }
+
+        const address = await addressFromGpsPoint(trimmedEndPoint);
+        if (address == null) {
+            return;
+        }
+
+        updateTrimmedEndPoint({...trimmedEndPoint, address: {value: address, type: 'address'}});
+    };
+
     const updateAddressesToHumanReadable = async () => {
         const waypointUpdates: Array<Promise<{point: GPSPoint; segmentIndex: number; type: 'start' | 'end'}>> = [];
 
@@ -64,6 +80,8 @@ function useUpdateGpsTripOnReconnect({gpsPoints}: {gpsPoints: GPSPoint[][]}) {
         }
 
         updateGpsPoints(newGpsPoints);
+
+        await updateTrimmedEndPointAddress(latestGpsDraftDetails?.trimmedEndPoint);
     };
 
     // This is intentional to use async/await pattern for better readability

src/components/MapView/GPSWaypointLayer.tsx

@@ -31,24 +31,18 @@ function GPSWaypointLayer({waypoints, belowLayerID}: GPSWaypointLayerProps) {
 
     const waypointFeatures = !waypoints?.length
         ? []
-        : waypoints.flatMap((waypoint) => {
-              if (!waypoint.markerType) {
-                  return [];
-              }
-
-              return [
-                  {
-                      type: 'Feature' as const,
-                      geometry: {
-                          type: 'Point' as const,
-                          coordinates: waypoint.coordinate,
-                      },
-                      properties: {
-                          icon: WAYPOINT_ICON_NAMES[waypoint.markerType],
-                      },
+        : waypoints.flatMap((waypoint) => [
+              {
+                  type: 'Feature' as const,
+                  geometry: {
+                      type: 'Point' as const,
+                      coordinates: waypoint.coordinate,
+                  },
+                  properties: {
+                      icon: WAYPOINT_ICON_NAMES[waypoint.markerType],
                   },
-              ];
-          });
+              },
+          ]);
 
     if (waypointFeatures.length === 0) {
         return null;

src/components/MapView/MapMarkerIcon.tsx

@@ -0,0 +1,14 @@
+import useMapMarkers from '@hooks/useMapMarkers';
+import type {MapMarkerType} from '@hooks/useMapMarkers/types';
+
+type MapMarkerIconProps = {
+    /** The type of the map marker to display */
+    markerType: MapMarkerType;
+};
+
+function MapMarkerIcon({markerType}: MapMarkerIconProps) {
+    const getMapMarkerIconComponent = useMapMarkers();
+    return getMapMarkerIconComponent(markerType);
+}
+
+export default MapMarkerIcon;

src/components/MapView/MapView.tsx

@@ -31,6 +31,7 @@ import type {MapViewProps} from './MapViewTypes';
 
 import Compass from './Compass';
 import Direction from './Direction';
+import MapMarkerIcon from './MapMarkerIcon';
 import PendingMapView from './PendingMapView';
 import responder from './responder';
 import ToggleDistanceUnitButton from './ToggleDistanceUnitButton';
@@ -320,8 +321,7 @@ function MapView({
                         />
                     </MarkerView>
                 )}
-                {waypoints?.map(({coordinate, markerComponent, id}) => {
-                    const MarkerComponent = markerComponent;
+                {waypoints?.map(({coordinate, markerType, id}) => {
                     if (
                         utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]) &&
                         interactive &&
@@ -337,7 +337,7 @@ function MapView({
                             coordinate={coordinate}
                             allowOverlap
                         >
-                            <MarkerComponent />
+                            <MapMarkerIcon markerType={markerType} />
                         </MarkerView>
                     );
                 })}

src/components/MapView/MapViewImpl.web.tsx

@@ -39,6 +39,7 @@ import type {MapViewProps} from './MapViewTypes';
 
 import './mapbox.css';
 import Direction from './Direction';
+import MapMarkerIcon from './MapMarkerIcon';
 import PendingMapView from './PendingMapView';
 import responder from './responder';
 import useDistanceUnit from './useDistanceUnit';
@@ -310,8 +311,7 @@ function MapViewImpl({
                         </PressableWithoutFeedback>
                     </Marker>
                 )}
-                {waypoints?.map(({coordinate, markerComponent, id}) => {
-                    const MarkerComponent = markerComponent;
+                {waypoints?.map(({coordinate, markerType, id}) => {
                     if (
                         utils.areSameCoordinate([coordinate[0], coordinate[1]], [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0]) &&
                         interactive &&
@@ -325,7 +325,7 @@ function MapViewImpl({
                             longitude={coordinate[0]}
                             latitude={coordinate[1]}
                         >
-                            <MarkerComponent />
+                            <MapMarkerIcon markerType={markerType} />
                         </Marker>
                     );
                 })}

src/components/MapView/MapViewTypes.ts

@@ -3,7 +3,7 @@ import type {MapMarkerType} from '@hooks/useMapMarkers/types';
 import type {Unit} from '@src/types/onyx/Policy';
 
 import type {Camera} from '@rnmapbox/maps';
-import type {ReactNode, RefObject} from 'react';
+import type {RefObject} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
 
@@ -116,8 +116,7 @@ type InitialState = {
 type WayPoint = {
     id: string;
     coordinate: Coordinate;
-    markerComponent: () => ReactNode;
-    markerType?: MapMarkerType;
+    markerType: MapMarkerType;
 };
 
 // Represents a handle to interact with a map view.

src/languages/de.ts

@@ -9482,6 +9482,9 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
         save: 'Speichern',
         resume: 'Fortsetzen',
         discard: 'Verwerfen',
+        edit: 'Bearbeiten',
+        editStop: 'Haltepunkt bearbeiten',
+        totalDistance: 'Gesamtdistanz',
         discardDistanceTrackingModal: {
             title: 'Entfernungsverfolgung verwerfen',
             prompt: 'Bist du sicher? Dadurch wird dein aktueller Ablauf verworfen und das kann nicht rückgängig gemacht werden.',

src/languages/en.ts

@@ -9598,6 +9598,9 @@ const translations = {
         save: 'Save',
         resume: 'Resume',
         discard: 'Discard',
+        edit: 'Edit',
+        editStop: 'Edit stop',
+        totalDistance: 'Total distance',
         discardDistanceTrackingModal: {
             title: 'Discard distance tracking',
             prompt: "Are you sure? This will discard your current journey and can't be undone.",

src/languages/es.ts

@@ -10718,6 +10718,9 @@ El plan Controlar empieza en 9 $ por miembro activo al mes.`,
         save: 'Guardar',
         resume: 'Reanudar',
         discard: 'Descartar',
+        edit: 'Editar',
+        editStop: 'Editar parada',
+        totalDistance: 'Distancia total',
         discardDistanceTrackingModal: {
             title: 'Descartar seguimiento de distancia',
             prompt: '¿Estás seguro? Esto descartará tu trayecto actual y no se puede deshacer.',

src/languages/fr.ts

@@ -9519,6 +9519,9 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
         save: 'Enregistrer',
         resume: 'Reprendre',
         discard: 'Ignorer',
+        edit: 'Modifier',
+        editStop: "Modifier l'arrêt",
+        totalDistance: 'Distance totale',
         discardDistanceTrackingModal: {
             title: 'Abandonner le suivi de distance',
             prompt: 'Êtes-vous sûr(e) ? Cela supprimera votre parcours en cours et ne pourra pas être annulé.',

src/languages/it.ts

@@ -9463,6 +9463,9 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
         save: 'Salva',
         resume: 'Riprendi',
         discard: 'Scarta',
+        edit: 'Modifica',
+        editStop: 'Modifica fermata',
+        totalDistance: 'Distanza totale',
         discardDistanceTrackingModal: {
             title: 'Annulla rilevamento distanza',
             prompt: 'Sei sicuro? Questo eliminerà il tuo percorso attuale e non potrà essere annullato.',

src/languages/ja.ts

@@ -9338,6 +9338,9 @@ ${reportName}`,
         save: '保存',
         resume: '再開',
         discard: '破棄',
+        edit: '編集',
+        editStop: '停止地点を編集',
+        totalDistance: '合計距離',
         discardDistanceTrackingModal: {
             title: '移動距離の追跡を破棄',
             prompt: '本当によろしいですか？現在の操作は破棄され、元に戻すことはできません。',

src/languages/nl.ts

@@ -9435,6 +9435,9 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
         save: 'Opslaan',
         resume: 'Hervatten',
         discard: 'Weggooien',
+        edit: 'Bewerken',
+        editStop: 'Stop bewerken',
+        totalDistance: 'Totale afstand',
         discardDistanceTrackingModal: {
             title: 'Afstandsregistratie negeren',
             prompt: 'Weet je het zeker? Hiermee wordt je huidige proces afgebroken en dit kan niet ongedaan worden gemaakt.',

src/languages/pl.ts

@@ -9413,6 +9413,9 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
         save: 'Zapisz',
         resume: 'Wznów',
         discard: 'Odrzuć',
+        edit: 'Edytuj',
+        editStop: 'Edytuj przystanek',
+        totalDistance: 'Całkowity dystans',
         discardDistanceTrackingModal: {
             title: 'Odrzuć śledzenie dystansu',
             prompt: 'Na pewno? Spowoduje to porzucenie Twojej bieżącej ścieżki i nie będzie można tego cofnąć.',

src/languages/pt-BR.ts

@@ -9422,6 +9422,9 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
         save: 'Salvar',
         resume: 'Currículo',
         discard: 'Descartar',
+        edit: 'Editar',
+        editStop: 'Editar parada',
+        totalDistance: 'Distância total',
         discardDistanceTrackingModal: {
             title: 'Descartar rastreamento de distância',
             prompt: 'Tem certeza? Isso vai descartar sua jornada atual e não poderá ser desfeito.',

src/languages/zh-hans.ts

@@ -9112,6 +9112,9 @@ ${reportName}`,
         save: '保存',
         resume: '简历',
         discard: '丢弃',
+        edit: '编辑',
+        editStop: '编辑停止点',
+        totalDistance: '总距离',
         discardDistanceTrackingModal: {
             title: '放弃距离跟踪',
             prompt: '确定要继续吗？这将放弃你当前的行程，且无法撤销。',

src/libs/API/parameters/CreateDistanceRequestParams.ts

@@ -29,6 +29,7 @@ type CreateDistanceRequestParams = {
     description?: string;
     attendees?: string;
     distance?: number;
+    modifiedDistance?: number;
     odometerStart?: number;
     odometerEnd?: number;
     gpsCoordinates?: string;

src/libs/API/parameters/TrackExpenseParams.ts

@@ -38,6 +38,7 @@ type TrackExpenseParams = {
     customUnitRateID?: string;
     description?: string;
     distance?: number;
+    modifiedDistance?: number;
     gpsCoordinates?: string;
     distanceRequestType?: string;
     isDistance?: boolean;