Modify MoneyRequestConfirmPage for Distance Request

src/CONST.ts

@@ -1370,6 +1370,9 @@ const CONST = {
         MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects',
     },
 
+    MAP_PADDING: 50,
+    MAP_MARKER_SIZE: 20,
+
     QUICK_REACTIONS: [
         {
             name: '+1',

src/components/ConfirmedRoute.js

@@ -0,0 +1,118 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import MapView from 'react-native-x-maps';
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import ONYXKEYS from '../ONYXKEYS';
+import CONST from '../CONST';
+import * as MapboxToken from '../libs/actions/MapboxToken';
+import * as Expensicons from './Icon/Expensicons';
+import theme from '../styles/themes/default';
+import styles from '../styles/styles';
+import transactionPropTypes from './transactionPropTypes';
+import BlockingView from './BlockingViews/BlockingView';
+import useNetwork from '../hooks/useNetwork';
+import useLocalize from '../hooks/useLocalize';
+
+const propTypes = {
+    /** Transaction that stores the distance request data */
+    transaction: transactionPropTypes,
+
+    /** Token needed to render the map */
+    mapboxToken: PropTypes.string,
+};
+
+const defaultProps = {
+    transaction: {},
+    mapboxToken: '',
+};
+
+const getWaypointMarkers = (waypoints) => {
+    const numberOfWaypoints = _.size(waypoints);
+    const lastWaypointIndex = numberOfWaypoints - 1;
+    return _.filter(
+        _.map(waypoints, (waypoint, key) => {
+            if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
+                return;
+            }
+
+            const index = Number(key.replace('waypoint', ''));
+            let MarkerComponent;
+            if (index === 0) {
+                MarkerComponent = Expensicons.DotIndicatorUnfilled;
+            } else if (index === lastWaypointIndex) {
+                MarkerComponent = Expensicons.Location;
+            } else {
+                MarkerComponent = Expensicons.DotIndicator;
+            }
+
+            return {
+                coordinate: [waypoint.lng, waypoint.lat],
+                markerComponent: () => (
+                    <MarkerComponent
+                        width={CONST.MAP_MARKER_SIZE}
+                        height={CONST.MAP_MARKER_SIZE}
+                        fill={theme.icon}
+                    />
+                ),
+            };
+        }),
+        (waypoint) => waypoint,
+    );
+};
+
+function ConfirmedRoute({mapboxToken, transaction}) {
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+    const {route0: route} = transaction.routes || {};
+    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    const coordinates = lodashGet(route, 'geometry.coordinates', []);
+    const waypointMarkers = getWaypointMarkers(waypoints);
+
+    useEffect(() => {
+        MapboxToken.init();
+        return MapboxToken.stop;
+    }, []);
+
+    return (
+        <>
+            {!isOffline && mapboxToken ? (
+                <MapView
+                    accessToken={mapboxToken}
+                    mapPadding={CONST.MAP_PADDING}
+                    pitchEnabled={false}
+                    directionCoordinates={coordinates}
+                    directionStyle={styles.mapDirection}
+                    style={styles.mapView}
+                    waypoints={waypointMarkers}
+                    styleURL={CONST.MAPBOX_STYLE_URL}
+                />
+            ) : (
+                <View style={[styles.mapPendingView]}>
+                    <BlockingView
+                        icon={Expensicons.EmptyStateRoutePending}
+                        title={translate('distance.mapPending.title')}
+                        subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+                        shouldShowLink={false}
+                    />
+                </View>
+            )}
+        </>
+    );
+}
+
+export default withOnyx({
+    transaction: {
+        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+    },
+    mapboxToken: {
+        key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
+        selector: (mapboxAccessToken) => mapboxAccessToken && mapboxAccessToken.token,
+    },
+})(ConfirmedRoute);
+
+ConfirmedRoute.displayName = 'ConfirmedRoute';
+ConfirmedRoute.propTypes = propTypes;
+ConfirmedRoute.defaultProps = defaultProps;

src/components/DistanceRequest.js

@@ -23,20 +23,28 @@ import useNetwork from '../hooks/useNetwork';
 import useLocalize from '../hooks/useLocalize';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
+import * as IOU from '../libs/actions/IOU';
+import reportPropTypes from '../pages/reportPropTypes';
 import transactionPropTypes from './transactionPropTypes';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import usePrevious from '../hooks/usePrevious';
+import {iouPropTypes} from '../pages/iou/propTypes';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
 
-const MAP_PADDING = 50;
 const DEFAULT_ZOOM_LEVEL = 10;
 
 const propTypes = {
-    /** The transactionID of this request */
-    transactionID: PropTypes.string,
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: iouPropTypes,
+
+    /** Type of money request (i.e. IOU) */
+    iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)),
+
+    /** The report to which the distance request is associated */
+    report: reportPropTypes,
 
     /** The optimistic transaction for this request */
     transaction: transactionPropTypes,
@@ -52,18 +60,21 @@ const propTypes = {
 };
 
 const defaultProps = {
-    transactionID: '',
+    iou: {},
+    iouType: '',
+    report: {},
     transaction: {},
     mapboxAccessToken: {},
 };
 
-function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
+function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {
     const [shouldShowGradient, setShouldShowGradient] = useState(false);
     const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
     const [scrollContentHeight, setScrollContentHeight] = useState(0);
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
+    const reportID = lodashGet(report, 'reportID', '');
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const numberOfWaypoints = _.size(waypoints);
 
@@ -95,8 +106,8 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                 coordinate: [waypoint.lng, waypoint.lat],
                 markerComponent: () => (
                     <MarkerComponent
-                        width={20}
-                        height={20}
+                        width={CONST.MAP_MARKER_SIZE}
+                        height={CONST.MAP_MARKER_SIZE}
                         fill={theme.icon}
                     />
                 ),
@@ -115,12 +126,12 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
     }, []);
 
     useEffect(() => {
-        if (!transactionID || !_.isEmpty(waypoints)) {
+        if (!iou.transactionID || !_.isEmpty(waypoints)) {
             return;
         }
         // Create the initial start and stop waypoints
-        Transaction.createInitialWaypoints(transactionID);
-    }, [transactionID, waypoints]);
+        Transaction.createInitialWaypoints(iou.transactionID);
+    }, [iou.transactionID, waypoints]);
 
     const updateGradientVisibility = (event = {}) => {
         // If a waypoint extends past the bottom of the visible area show the gradient, else hide it.
@@ -133,8 +144,8 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
             return;
         }
 
-        Transaction.getRoute(transactionID, waypoints);
-    }, [shouldFetchRoute, transactionID, waypoints, isOffline]);
+        Transaction.getRoute(iou.transactionID, waypoints);
+    }, [shouldFetchRoute, iou.transactionID, waypoints, isOffline]);
 
     useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
 
@@ -197,7 +208,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                 <Button
                     small
                     icon={Expensicons.Plus}
-                    onPress={() => Transaction.addStop(transactionID)}
+                    onPress={() => Transaction.addStop(iou.transactionID)}
                     text={translate('distance.addStop')}
                     isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
                     innerStyles={[styles.ph10]}
@@ -207,7 +218,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                 {!isOffline && Boolean(mapboxAccessToken.token) ? (
                     <MapView
                         accessToken={mapboxAccessToken.token}
-                        mapPadding={MAP_PADDING}
+                        mapPadding={CONST.MAP_PADDING}
                         pitchEnabled={false}
                         initialState={{
                             location: CONST.SF_COORDINATES,
@@ -230,6 +241,14 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                     </View>
                 )}
             </View>
+            <Button
+                success
+                style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
+                onPress={() => IOU.navigateToNextPage(iou, iouType, reportID, report)}
+                pressOnEnter
+                isDisabled={waypointMarkers.length < 2}
+                text={translate('common.next')}
+            />
         </>
     );
 }
@@ -239,7 +258,7 @@ DistanceRequest.propTypes = propTypes;
 DistanceRequest.defaultProps = defaultProps;
 export default withOnyx({
     transaction: {
-        key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`,
+        key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.iou.transactionID}`,
     },
     mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,