Add alternate route for map-based mileage expenses

config/eslint/eslint.seatbelt.tsv

@@ -151,7 +151,7 @@
 "../../src/components/DelegateNoAccessModalProvider/index.tsx"	"@typescript-eslint/no-deprecated/ConfirmModal"	1
 "../../src/components/DialogLabelContext.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/components/DisplayNames/DisplayNamesWithTooltip.tsx"	"react-hooks/refs"	6
-"../../src/components/DistanceRequest/DistanceRequestFooter.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
+"../../src/components/DistanceRequest/DistanceRequestFooter.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	2
 "../../src/components/DistanceRequest/DistanceRequestFooter.tsx"	"no-restricted-imports"	1
 "../../src/components/DistanceRequest/DistanceRequestRenderItem.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/components/Domain/CopyableTextField.tsx"	"no-restricted-imports"	1

package.json

@@ -272,6 +272,7 @@
     "@types/canvas-size": "^1.2.2",
     "@types/concurrently": "^7.0.3",
     "@types/d3-scale": "^4.0.9",
+    "@types/geojson": "^7946.0.16",
     "@types/howler": "^2.2.12",
     "@types/jest": "^29.5.14",
     "@types/jest-when": "^3.5.2",

src/components/ConfirmedRoute.tsx

@@ -47,7 +47,8 @@ type ConfirmedRouteProps = {
 
 function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = true, requireRouteToDisplayMap = false, interactive, shouldDisplayCompass = true}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
-    const {route0: route} = transaction?.routes ?? {};
+    const selectedRouteKey = transaction?.comment?.selectedRouteKey ?? 'route0';
+    const route = transaction?.routes?.[selectedRouteKey] ?? transaction?.routes?.route0;
     const waypoints = transaction?.comment?.waypoints ?? {};
     const coordinates = route?.geometry?.coordinates ?? [];
     const styles = useThemeStyles();

src/components/DistanceRequest/DistanceRequestFooter.tsx

@@ -10,6 +10,7 @@ import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {setSelectedRoute} from '@libs/actions/Transaction';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
 import {getDistanceInMeters, getWaypointIndex, isCustomUnitRateIDForP2P} from '@libs/TransactionUtils';
 
@@ -18,6 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 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 TransactionState from '@src/types/utils/TransactionStateType';
 
 import type {ReactNode} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
@@ -43,9 +45,19 @@ type DistanceRequestFooterProps = {
 
     /** Optional style for the map container */
     mapContainerStyle?: StyleProp<ViewStyle>;
+
+    /** The state of the transaction (draft, current, etc.) used to persist route selection to the correct Onyx key */
+    transactionState?: TransactionState;
 };
 
-function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPage, policy, mapContainerStyle}: DistanceRequestFooterProps) {
+function DistanceRequestFooter({
+    waypoints,
+    transaction,
+    navigateToWaypointEditPage,
+    policy,
+    mapContainerStyle,
+    transactionState = CONST.TRANSACTION.STATE.DRAFT,
+}: DistanceRequestFooterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Plus']);
@@ -63,6 +75,10 @@ function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPa
     const policyCurrency = (policy ?? activePolicy ?? personalPolicy)?.outputCurrency ?? CONST.CURRENCY.USD;
     const mileageRate = isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(policyCurrency, transaction) : defaultMileageRate;
     const {unit} = mileageRate ?? {};
+    const isAlternativeDirectionSelected = transaction?.comment?.selectedRouteKey === 'route1';
+    const handleRouteSelection = (isAlternative: boolean) => {
+        setSelectedRoute(transaction?.transactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID, isAlternative ? 'route1' : 'route0', transactionState);
+    };
 
     const waypointMarkers: WayPoint[] = [];
     for (const [key, waypoint] of Object.entries(waypoints ?? {})) {
@@ -109,11 +125,21 @@ function DistanceRequestFooter({waypoints, transaction, navigateToWaypointEditPa
                         location: waypointMarkers?.at(0)?.coordinate ?? CONST.MAPBOX.DEFAULT_COORDINATE,
                     }}
                     directionCoordinates={(transaction?.routes?.route0?.geometry?.coordinates as Array<[number, number]>) ?? []}
+                    alternativeDirection={
+                        transaction?.routes?.route1?.geometry?.coordinates && transaction?.routes?.route1?.distance
+                            ? {
+                                  coordinates: (transaction?.routes?.route1?.geometry?.coordinates as Array<[number, number]>) ?? [],
+                                  distanceInMeters: transaction?.routes?.route1?.distance,
+                                  isSelected: isAlternativeDirectionSelected,
+                              }
+                            : undefined
+                    }
+                    setIsAlternativeDirectionSelected={handleRouteSelection}
                     style={[styles.mapView, styles.mapEditView]}
                     waypoints={waypointMarkers}
                     styleURL={CONST.MAPBOX.STYLE_URL}
                     overlayStyle={styles.mapEditView}
-                    distanceInMeters={getDistanceInMeters(transaction, undefined)}
+                    distanceInMeters={transaction?.routes?.route0?.distance ?? getDistanceInMeters(transaction, undefined)}
                     unit={unit}
                 />
             </View>

src/components/MapView/AlternateDirections.tsx

@@ -0,0 +1,109 @@
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import CONST from '@src/CONST';
+
+import type {Feature, FeatureCollection, LineString, MultiLineString} from 'geojson';
+
+import Mapbox from '@rnmapbox/maps';
+
+import type {Coordinate, DirectionsProps} from './MapViewTypes';
+
+import utils from './utils';
+
+type DirectionFeatureProperties = {
+    isAlternative: boolean;
+    isSelected: boolean;
+};
+
+type AlternateDirectionsProps = Required<Pick<DirectionsProps, 'directionCoordinates' | 'alternativeDirection'>> & Pick<DirectionsProps, 'setIsAlternativeDirectionSelected'>;
+
+const SOURCE_ID = `alternate-directions-${CONST.MAP_VIEW_LAYERS.ROUTE_SOURCE}`;
+const UNSELECTED_FILL_ID = `alternate-directions-unselected-${CONST.MAP_VIEW_LAYERS.ROUTE_FILL}`;
+const UNSELECTED_BORDER_ID = `alternate-directions-unselected-${CONST.MAP_VIEW_LAYERS.ROUTE_BORDER}`;
+const SELECTED_FILL_ID = `alternate-directions-selected-${CONST.MAP_VIEW_LAYERS.ROUTE_FILL}`;
+const SELECTED_BORDER_ID = `alternate-directions-selected-${CONST.MAP_VIEW_LAYERS.ROUTE_BORDER}`;
+
+function getDirectionFeature(
+    coordinates: Coordinate[] | Coordinate[][],
+    isAlternative: boolean,
+    isSelected: boolean,
+): Feature<LineString | MultiLineString, DirectionFeatureProperties> | undefined {
+    if (utils.isSingleSegmentRoute(coordinates)) {
+        if (coordinates.length < 2) {
+            return undefined;
+        }
+
+        return {
+            type: 'Feature',
+            properties: {isAlternative, isSelected},
+            geometry: {
+                type: 'LineString',
+                coordinates,
+            },
+        };
+    }
+
+    const validSegments = coordinates.filter((segment) => segment.length >= 2);
+    if (validSegments.length === 0) {
+        return undefined;
+    }
+
+    return {
+        type: 'Feature',
+        properties: {isAlternative, isSelected},
+        geometry: {
+            type: 'MultiLineString',
+            coordinates: validSegments,
+        },
+    };
+}
+
+function AlternateDirections({directionCoordinates, alternativeDirection, setIsAlternativeDirectionSelected}: AlternateDirectionsProps) {
+    const styles = useThemeStyles();
+    const directionShape: FeatureCollection<LineString | MultiLineString, DirectionFeatureProperties> = {
+        type: 'FeatureCollection',
+        features: [
+            getDirectionFeature(directionCoordinates, false, !alternativeDirection.isSelected),
+            getDirectionFeature(alternativeDirection.coordinates, true, alternativeDirection.isSelected),
+        ].filter((feature): feature is Feature<LineString | MultiLineString, DirectionFeatureProperties> => !!feature),
+    };
+
+    return (
+        <Mapbox.ShapeSource
+            id={SOURCE_ID}
+            shape={directionShape}
+            onPress={({features}) => {
+                const properties = features.at(0)?.properties;
+                if (typeof properties?.isAlternative !== 'boolean') {
+                    return;
+                }
+                setIsAlternativeDirectionSelected?.(properties.isAlternative);
+            }}
+        >
+            <Mapbox.LineLayer
+                id={UNSELECTED_FILL_ID}
+                filter={['==', ['get', 'isSelected'], false]}
+                style={styles.alternativeMapDirection}
+            />
+            <Mapbox.LineLayer
+                id={UNSELECTED_BORDER_ID}
+                belowLayerID={UNSELECTED_FILL_ID}
+                filter={['==', ['get', 'isSelected'], false]}
+                style={styles.mapDirectionBorder}
+            />
+            <Mapbox.LineLayer
+                id={SELECTED_FILL_ID}
+                filter={['==', ['get', 'isSelected'], true]}
+                style={styles.mapDirection}
+            />
+            <Mapbox.LineLayer
+                id={SELECTED_BORDER_ID}
+                belowLayerID={SELECTED_FILL_ID}
+                filter={['==', ['get', 'isSelected'], true]}
+                style={styles.mapDirectionBorder}
+            />
+        </Mapbox.ShapeSource>
+    );
+}
+
+export default AlternateDirections;

src/components/MapView/Directions.tsx

@@ -0,0 +1,48 @@
+import type {DirectionsProps} from './MapViewTypes';
+
+import AlternateDirections from './AlternateDirections';
+import Direction from './Direction';
+import DistanceSymbol from './DistanceSymbol';
+import utils from './utils';
+
+function Directions({directionCoordinates, alternativeDirection, setIsAlternativeDirectionSelected, distanceInMeters, unit, waypoints}: DirectionsProps) {
+    if (!directionCoordinates) {
+        return null;
+    }
+
+    const alternativeDirectionCoordinates = alternativeDirection?.coordinates;
+    const hasAlternativeDirection = !!alternativeDirection && !!alternativeDirectionCoordinates?.length;
+    const isAlternativeDirectionSelected = !!alternativeDirection?.isSelected;
+
+    return (
+        <>
+            {hasAlternativeDirection ? (
+                <>
+                    <AlternateDirections
+                        directionCoordinates={directionCoordinates}
+                        alternativeDirection={alternativeDirection}
+                        setIsAlternativeDirectionSelected={setIsAlternativeDirectionSelected}
+                    />
+                    <DistanceSymbol
+                        distanceInMeters={alternativeDirection.distanceInMeters}
+                        unit={unit}
+                        directionCoordinates={utils.isSingleSegmentRoute(alternativeDirectionCoordinates) ? alternativeDirectionCoordinates : alternativeDirectionCoordinates.flat()}
+                        waypoints={waypoints}
+                        isSelected={isAlternativeDirectionSelected}
+                    />
+                </>
+            ) : (
+                <Direction coordinates={directionCoordinates} />
+            )}
+            <DistanceSymbol
+                distanceInMeters={distanceInMeters}
+                unit={unit}
+                directionCoordinates={utils.isSingleSegmentRoute(directionCoordinates) ? directionCoordinates : directionCoordinates.flat()}
+                waypoints={waypoints}
+                isSelected={!isAlternativeDirectionSelected}
+            />
+        </>
+    );
+}
+
+export default Directions;

src/components/MapView/DistanceSymbol.tsx

@@ -0,0 +1,63 @@
+import Text from '@components/Text';
+
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import DistanceRequestUtils from '@libs/DistanceRequestUtils';
+
+import CONST from '@src/CONST';
+
+import {MarkerView} from '@rnmapbox/maps';
+import {View} from 'react-native';
+
+import type {DistanceSymbolProps} from './MapViewTypes';
+
+import ToggleDistanceUnitButton from './ToggleDistanceUnitButton';
+import useDistanceUnit from './useDistanceUnit';
+import utils from './utils';
+
+function DistanceSymbol({distanceInMeters, unit, directionCoordinates, waypoints, isSelected = true}: DistanceSymbolProps) {
+    const styles = useThemeStyles();
+    const {distanceUnit, toggleDistanceUnit} = useDistanceUnit(unit);
+
+    const distanceLabelText = DistanceRequestUtils.getDistanceForDisplayLabel(distanceInMeters ?? 0, distanceUnit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS);
+
+    const getDistanceSymbolCoordinate = () => {
+        if (!directionCoordinates?.length || !waypoints?.length) {
+            return;
+        }
+        const {northEast, southWest} = utils.getBounds(
+            waypoints.map((waypoint) => waypoint.coordinate),
+            directionCoordinates,
+        );
+        const boundsCenter = utils.getBoundsCenter({northEast, southWest});
+
+        return utils.findClosestCoordinateOnLineFromCenter(boundsCenter, directionCoordinates);
+    };
+
+    const distanceSymbolCoordinate = getDistanceSymbolCoordinate();
+
+    if (!distanceInMeters || !distanceUnit || !distanceSymbolCoordinate) {
+        return null;
+    }
+
+    return (
+        <MarkerView
+            coordinate={distanceSymbolCoordinate}
+            allowOverlap
+        >
+            <View style={{zIndex: 1}}>
+                <ToggleDistanceUnitButton
+                    accessibilityRole={CONST.ROLE.BUTTON}
+                    accessibilityLabel="distance-label"
+                    onPress={toggleDistanceUnit}
+                >
+                    <View style={[isSelected ? styles.distanceLabelWrapper : styles.alternativeDistanceLabelWrapper]}>
+                        <Text style={isSelected ? styles.distanceLabelText : styles.alternativeDistanceLabelText}> {distanceLabelText}</Text>
+                    </View>
+                </ToggleDistanceUnitButton>
+            </View>
+        </MarkerView>
+    );
+}
+
+export default DistanceSymbol;