From 95f49989e14c892d5852ec3097404fdaf84a4163 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 10:55:14 -0700
Subject: [PATCH 001/109] feat: pass iou, iouType, report, and reportID

---
 src/components/DistanceRequest.js         | 44 ++++++++++++++++++++--
 src/pages/iou/DistanceRequestPage.js      | 45 +++++++++++++++++++----
 src/pages/iou/MoneyRequestSelectorPage.js |  1 +
 3 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 8f07c7c05ecf..baaab44fe610 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -21,6 +21,9 @@ 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 participantPropTypes from '../components/participantPropTypes';
+import reportPropTypes from '../pages/reportPropTypes';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
@@ -29,8 +32,22 @@ 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: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        currency: PropTypes.string,
+        participants: PropTypes.arrayOf(participantPropTypes),
+    }),
+
+    /** Type of money request (i.e. IOU) */
+    iouType: PropTypes.string,
+
+    /** ID of the report to with which the distance request is associated */
+    reportID: PropTypes.string,
+
+    /** The report to with which the distance request is associated */
+    report: reportPropTypes,
 
     /** The optimistic transaction for this request */
     transaction: PropTypes.shape({
@@ -64,17 +81,26 @@ const propTypes = {
 };
 
 const defaultProps = {
-    transactionID: '',
+    iou: {
+        id: '',
+        amount: 0,
+        currency: CONST.CURRENCY.USD,
+        participants: [],
+    },
+    iouType: '',
+    reportID: '',
+    report: {},
     transaction: {},
     mapboxAccessToken: {},
 };
 
-function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
+function DistanceRequest({iou, iouType, reportID, 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 {transactionID} = iou;
 
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const numberOfWaypoints = _.size(waypoints);
@@ -219,6 +245,16 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                     </View>
                 )}
             </View>
+            <Button
+                small
+                icon={Expensicons.Plus}
+                onPress={() => {
+                    IOU.navigateToNextPage(iou, iouType, reportID, report);
+                }}
+                text={translate('distance.addStop')}
+                isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
+                innerStyles={[styles.ph10]}
+            />
         </>
     );
 }
diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index 706ddc43b018..1668f8653663 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -5,34 +5,62 @@ import * as IOU from '../../libs/actions/IOU';
 import ONYXKEYS from '../../ONYXKEYS';
 import DistanceRequest from '../../components/DistanceRequest';
 import reportPropTypes from '../reportPropTypes';
+import CONST from '../../CONST';
+import lodashGet from 'lodash/get';
 
 const propTypes = {
     /** The transactionID of this request */
-    transactionID: PropTypes.string,
+    iou: PropTypes.object,
 
     /** The report on which the request is initiated on */
     report: reportPropTypes,
+
+    /** Passed from the navigator */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            iouType: PropTypes.string,
+            reportID: PropTypes.string,
+        }),
+    }),
 };
 
 const defaultProps = {
-    transactionID: '',
+    iou: {
+        id: '',
+        amount: 0,
+        created: '',
+        merchant: '',
+        currency: CONST.CURRENCY.USD,
+        participants: [],
+    },
     report: {},
+    route: {
+        params: {
+            iouType: '',
+            reportID: '',
+        },
+    },
 };
 
 // This component is responsible for getting the transactionID from the IOU key, or creating the transaction if it doesn't exist yet, and then passing the transactionID.
 // You can't use Onyx props in the withOnyx mapping, so we need to set up and access the transactionID here, and then pass it down so that DistanceRequest can subscribe to the transaction.
-function DistanceRequestPage({report, transactionID}) {
+function DistanceRequestPage({iou, report, route}) {
+    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = lodashGet(route, 'params.reportID', '');
+
     useEffect(() => {
-        if (transactionID) {
+        if (iou.transactionID) {
             return;
         }
         IOU.createEmptyTransaction();
-    }, [transactionID]);
+    }, [iou.transactionID]);
 
     return (
         <DistanceRequest
+            iou={iou}
+            iouType={iouType}
+            reportID={reportID}
             report={report}
-            transactionID={transactionID}
         />
     );
 }
@@ -43,5 +71,8 @@ DistanceRequestPage.defaultProps = defaultProps;
 export default withOnyx({
     // We must provide a default value for transactionID here, otherwise the component won't mount
     // because withOnyx returns null until all the keys are defined
-    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => (iou && iou.transactionID) || ''},
+    iou: {key: ONYXKEYS.IOU},
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
+    },
 })(DistanceRequestPage);
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 4dd688950fbd..3756ce1c1980 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -116,6 +116,7 @@ function MoneyRequestSelectorPage(props) {
                                         <TopTab.Screen
                                             name={CONST.TAB.DISTANCE}
                                             component={DistanceRequestPage}
+                                            initialParams={{reportID, iouType}}
                                         />
                                     )}
                                 </OnyxTabNavigator>

From 9bbd398222955ce89192f21bb2953e6a87af805d Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 12:20:14 -0700
Subject: [PATCH 002/109] feat: render MapView on confirmation page

---
 .../iou/steps/MoneyRequestConfirmPage.js      | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index c22a81cd7299..539539054b71 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -22,6 +22,10 @@ import reportPropTypes from '../../reportPropTypes';
 import personalDetailsPropType from '../../personalDetailsPropType';
 import * as FileUtils from '../../../libs/fileDownload/FileUtils';
 import * as Policy from '../../../libs/actions/Policy';
+import MapView from 'react-native-x-maps';
+import * as MapboxToken from '../../../libs/actions/MapboxToken';
+
+const DEFAULT_ZOOM_LEVEL = 10;
 
 const propTypes = {
     report: reportPropTypes,
@@ -49,12 +53,22 @@ const propTypes = {
     /** Personal details of all users */
     personalDetails: personalDetailsPropType,
 
+    /** Data about Mapbox token for calling Mapbox API */
+    mapboxAccessToken: PropTypes.shape({
+        /** Temporary token for Mapbox API */
+        token: PropTypes.string,
+
+        /** Time when the token will expire in ISO 8601 */
+        expiration: PropTypes.string,
+    }),
+
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     report: {},
     personalDetails: {},
+    mapboxAccessToken: {},
     iou: {
         id: '',
         amount: 0,
@@ -79,6 +93,11 @@ function MoneyRequestConfirmPage(props) {
         [props.iou.participants, props.personalDetails],
     );
 
+    useEffect(() => {
+        MapboxToken.init();
+        return MapboxToken.stop;
+    }, []);
+
     useEffect(() => {
         const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);
         if (policyExpenseChat) {
@@ -104,7 +123,8 @@ function MoneyRequestConfirmPage(props) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
+        if (_.isEmpty(props.iou.participants) || shouldReset) {
+            // if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), true);
         }
 
@@ -235,6 +255,25 @@ function MoneyRequestConfirmPage(props) {
                         title={props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
+                    <View style={{width: '100%', height: 300}}>
+                        {props.mapboxAccessToken.token ? (
+                            <MapView
+                                accessToken={props.mapboxAccessToken.token}
+                                initialState={{
+                                    location: CONST.SF_COORDINATES,
+                                    zoom: DEFAULT_ZOOM_LEVEL,
+                                }}
+                                style={{
+                                    flex: 1,
+                                    borderRadius: 20,
+                                    overflow: 'hidden',
+                                }}
+                                styleURL={CONST.MAPBOX_STYLE_URL}
+                            />
+                        ) : (
+                            <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+                        )}
+                    </View>
                     <MoneyRequestConfirmationList
                         hasMultipleParticipants={iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
                         selectedParticipants={participants}
@@ -290,5 +329,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        mapboxAccessToken: {
+            key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
+        },
     }),
 )(MoneyRequestConfirmPage);

From 72015a78db2bae87fcb2207885fb69db6bb1bc47 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 15:09:29 -0700
Subject: [PATCH 003/109] chore: get transaction id

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 539539054b71..d8a2ddc302ba 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -98,6 +98,8 @@ function MoneyRequestConfirmPage(props) {
         return MapboxToken.stop;
     }, []);
 
+    console.log('iou', props.ios.transactionID);
+
     useEffect(() => {
         const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);
         if (policyExpenseChat) {
@@ -255,7 +257,7 @@ function MoneyRequestConfirmPage(props) {
                         title={props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
-                    <View style={{width: '100%', height: 300}}>
+                    <View style={([styles.mapViewContainer], {height: 200})}>
                         {props.mapboxAccessToken.token ? (
                             <MapView
                                 accessToken={props.mapboxAccessToken.token}

From 733a01c9aba81cc96795ad99a6194f9d40eb13c4 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 19:32:40 -0700
Subject: [PATCH 004/109] feat: implement ConfirmedRoute

---
 src/components/ConfirmedRoute.js | 93 ++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/ConfirmedRoute.js

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
new file mode 100644
index 000000000000..224ef67acaec
--- /dev/null
+++ b/src/components/ConfirmedRoute.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MapView from 'react-native-x-maps';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+import CONST from '../CONST';
+import lodashGet from 'lodash/get';
+import * as MapboxToken from '../libs/actions/MapboxToken';
+import {useEffect} from 'react';
+import _ from 'underscore';
+import * as Expensicons from './Icon/Expensicons';
+import theme from '../styles/themes/default';
+
+const MAP_PADDING = 50;
+
+const propTypes = {
+    transactionID: PropTypes.string,
+    transaction: PropTypes.object,
+    mapboxAccessToken: PropTypes.object,
+};
+
+const defaultProps = {
+    transactionID: PropTypes.string,
+    transaction: PropTypes.object,
+    mapboxAccessToken: PropTypes.object,
+};
+
+function ConfirmedRoute({transaction, mapboxAccessToken}) {
+    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    const numberOfWaypoints = _.size(waypoints);
+    const lastWaypointIndex = numberOfWaypoints - 1;
+    const waypointMarkers = _.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={20}
+                        height={20}
+                        fill={theme.icon}
+                    />
+                ),
+            };
+        }),
+        (waypoint) => waypoint,
+    );
+
+    useEffect(() => {
+        MapboxToken.init();
+        return MapboxToken.stop;
+    }, []);
+
+    return (
+        <MapView
+            accessToken={mapboxAccessToken.token}
+            style={{
+                flex: 1,
+                borderRadius: 20,
+                overflow: 'hidden',
+            }}
+            styleURL={CONST.MAPBOX_STYLE_URL}
+            waypoints={waypointMarkers}
+            mapPadding={MAP_PADDING}
+        />
+    );
+}
+
+export default withOnyx({
+    transaction: {
+        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+    },
+    mapboxAccessToken: {
+        key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
+    },
+})(ConfirmedRoute);
+
+ConfirmedRoute.displayName = 'MoneyRequestConfirmPage';
+ConfirmedRoute.prototype = propTypes;
+ConfirmedRoute.defaultProps = defaultProps;

From f54184b241e421d9b62234a3d8d96587c97388ff Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 19:33:22 -0700
Subject: [PATCH 005/109] fix: bring back transactionID prop

---
 src/pages/iou/DistanceRequestPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index 1668f8653663..0173b3d08137 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -61,6 +61,7 @@ function DistanceRequestPage({iou, report, route}) {
             iouType={iouType}
             reportID={reportID}
             report={report}
+            transactionID={iou.transactionID}
         />
     );
 }

From af2d58434b2a287074e60e615f8a5b40453d5d96 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 19:33:54 -0700
Subject: [PATCH 006/109] fix: get transactionID in DistanceRequest

---
 src/components/DistanceRequest.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index baaab44fe610..0c5b421eecb2 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -49,6 +49,9 @@ const propTypes = {
     /** The report to with which the distance request is associated */
     report: reportPropTypes,
 
+    /** The transactionID of this request */
+    transactionID: PropTypes.string,
+
     /** The optimistic transaction for this request */
     transaction: PropTypes.shape({
         /** The transactionID of this request */
@@ -90,17 +93,17 @@ const defaultProps = {
     iouType: '',
     reportID: '',
     report: {},
+    transactionID: '',
     transaction: {},
     mapboxAccessToken: {},
 };
 
-function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAccessToken}) {
+function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAccessToken, transactionID}) {
     const [shouldShowGradient, setShouldShowGradient] = useState(false);
     const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
     const [scrollContentHeight, setScrollContentHeight] = useState(0);
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const {transactionID} = iou;
 
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const numberOfWaypoints = _.size(waypoints);

From 4ee061d90a978c80e95c79ed253717741b1b14fe Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 22 Aug 2023 19:34:40 -0700
Subject: [PATCH 007/109] feat: use ConfirmedRoute in MoneyRequestConfirmPage

---
 .../iou/steps/MoneyRequestConfirmPage.js      | 35 ++-----------------
 1 file changed, 3 insertions(+), 32 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index d8a2ddc302ba..29d0dc6a93d2 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -22,10 +22,7 @@ import reportPropTypes from '../../reportPropTypes';
 import personalDetailsPropType from '../../personalDetailsPropType';
 import * as FileUtils from '../../../libs/fileDownload/FileUtils';
 import * as Policy from '../../../libs/actions/Policy';
-import MapView from 'react-native-x-maps';
-import * as MapboxToken from '../../../libs/actions/MapboxToken';
-
-const DEFAULT_ZOOM_LEVEL = 10;
+import ConfirmedRoute from '../../../components/ConfirmedRoute';
 
 const propTypes = {
     report: reportPropTypes,
@@ -93,13 +90,6 @@ function MoneyRequestConfirmPage(props) {
         [props.iou.participants, props.personalDetails],
     );
 
-    useEffect(() => {
-        MapboxToken.init();
-        return MapboxToken.stop;
-    }, []);
-
-    console.log('iou', props.ios.transactionID);
-
     useEffect(() => {
         const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);
         if (policyExpenseChat) {
@@ -257,24 +247,8 @@ function MoneyRequestConfirmPage(props) {
                         title={props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
-                    <View style={([styles.mapViewContainer], {height: 200})}>
-                        {props.mapboxAccessToken.token ? (
-                            <MapView
-                                accessToken={props.mapboxAccessToken.token}
-                                initialState={{
-                                    location: CONST.SF_COORDINATES,
-                                    zoom: DEFAULT_ZOOM_LEVEL,
-                                }}
-                                style={{
-                                    flex: 1,
-                                    borderRadius: 20,
-                                    overflow: 'hidden',
-                                }}
-                                styleURL={CONST.MAPBOX_STYLE_URL}
-                            />
-                        ) : (
-                            <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-                        )}
+                    <View style={{flex: 1, padding: 16}}>
+                        <ConfirmedRoute transactionID={props.iou.transactionID} />
                     </View>
                     <MoneyRequestConfirmationList
                         hasMultipleParticipants={iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
@@ -331,8 +305,5 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
-        mapboxAccessToken: {
-            key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-        },
     }),
 )(MoneyRequestConfirmPage);

From e9d3949b745109ee37e974069e2691c2127bb7a6 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 09:23:44 -0700
Subject: [PATCH 008/109] feat: add policyID to options object

---
 src/libs/OptionsListUtils.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index a5185d8352aa..2e958c0e8f81 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -449,6 +449,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
         shouldShowSubscript: false,
         isPolicyExpenseChat: false,
         isExpenseReport: false,
+        policyID: null,
     };
 
     const personalDetailMap = getPersonalDetailsForAccountIDs(accountIDs, personalDetails);
@@ -483,6 +484,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
         result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participantAccountIDs || []);
         result.hasOutstandingIOU = report.hasOutstandingIOU;
         result.isWaitingOnBankAccount = report.isWaitingOnBankAccount;
+        result.policyID = report.policyID;
 
         hasMultipleParticipants = personalDetailList.length > 1 || result.isChatRoom || result.isPolicyExpenseChat;
         subtitle = ReportUtils.getChatRoomSubtitle(report);

From 34086ed480271428022d9f9b487e0ab350646110 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 17:30:18 -0700
Subject: [PATCH 009/109] fix: complete ConfirmedRoute

---
 src/components/ConfirmedRoute.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 224ef67acaec..536938e145d7 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -10,6 +10,7 @@ import {useEffect} from 'react';
 import _ from 'underscore';
 import * as Expensicons from './Icon/Expensicons';
 import theme from '../styles/themes/default';
+import styles from '../styles/styles';
 
 const MAP_PADDING = 50;
 
@@ -20,12 +21,13 @@ const propTypes = {
 };
 
 const defaultProps = {
-    transactionID: PropTypes.string,
-    transaction: PropTypes.object,
+    transactionID: '',
+    transaction: {},
     mapboxAccessToken: PropTypes.object,
 };
 
 function ConfirmedRoute({transaction, mapboxAccessToken}) {
+    const {route0: route} = transaction.routes;
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const numberOfWaypoints = _.size(waypoints);
     const lastWaypointIndex = numberOfWaypoints - 1;
@@ -73,8 +75,10 @@ function ConfirmedRoute({transaction, mapboxAccessToken}) {
                 overflow: 'hidden',
             }}
             styleURL={CONST.MAPBOX_STYLE_URL}
+            directionStyle={styles.mapDirection}
             waypoints={waypointMarkers}
             mapPadding={MAP_PADDING}
+            directionCoordinates={route.geometry.coordinates}
         />
     );
 }

From 9d2bcb54bcd1fd562b2420720332087f14d13c3b Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 17:56:15 -0700
Subject: [PATCH 010/109] feat: display distance requested items

---
 .../MoneyRequestConfirmationList.js           | 118 ++++++++++++++++--
 1 file changed, 106 insertions(+), 12 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 3dc7f06acfad..8c03aba15ffd 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -28,6 +28,8 @@ import Image from './Image';
 import useLocalize from '../hooks/useLocalize';
 import * as ReceiptUtils from '../libs/ReceiptUtils';
 import categoryPropTypes from './categoryPropTypes';
+import ConfirmedRoute from './ConfirmedRoute';
+import lodashGet from 'lodash/get';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -100,6 +102,18 @@ const propTypes = {
     /* Onyx Props */
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
+
+    /** ID of the transaction that represents the money request */
+    transactionID: PropTypes.string,
+
+    /** Transaction that represents the money request */
+    transaction: PropTypes.object,
+
+    /** Unit and rate used for if the money request is a distance request */
+    mileageRate: PropTypes.objectOf({
+        unit: PropTypes.oneOf(['mi', 'ki']),
+        rate: PropTypes.number,
+    }),
 };
 
 const defaultProps = {
@@ -121,6 +135,9 @@ const defaultProps = {
     receiptPath: '',
     receiptSource: '',
     policyCategories: {},
+    transactionID: '',
+    transaction: {},
+    mileageRate: {},
 };
 
 function MoneyRequestConfirmationList(props) {
@@ -132,6 +149,15 @@ function MoneyRequestConfirmationList(props) {
     // A flag and a toggler for showing the rest of the form fields
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
+    const isDistanceRequest = true;
+
+    const {unit, rate} = props.mileageRate;
+    const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
+    const convertedDistance = convertDistance(distance, unit);
+    const distanceRequestAmount = convertedDistance * rate * 0.01;
+    const distanceString = convertDistanceToUnit(convertedDistance, unit, rate);
+
+    const formattedAmount = CurrencyUtils.convertToDisplayString(isDistanceRequest ? distanceRequestAmount : props.iouAmount, isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode);
 
     /**
      * Returns the participants with amount
@@ -154,7 +180,7 @@ function MoneyRequestConfirmationList(props) {
             text = translate('iou.request');
         } else {
             const translationKey = props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount';
-            text = translate(translationKey, {amount: CurrencyUtils.convertToDisplayString(props.iouAmount, props.iouCurrencyCode)});
+            text = translate(translationKey, {amount: formattedAmount});
         }
         return [
             {
@@ -288,8 +314,6 @@ function MoneyRequestConfirmationList(props) {
         [selectedParticipants, onSendMoney, onConfirm, props.iouType],
     );
 
-    const formattedAmount = CurrencyUtils.convertToDisplayString(props.iouAmount, props.iouCurrencyCode);
-
     const footerContent = useMemo(() => {
         if (props.isReadOnly) {
             return;
@@ -343,6 +367,9 @@ function MoneyRequestConfirmationList(props) {
             optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
             footerContent={footerContent}
         >
+            <View style={{margin: 20, height: 200}}>
+                <ConfirmedRoute transactionID={props.transactionID} />
+            </View>
             {!_.isEmpty(props.receiptPath) ? (
                 <Image
                     style={styles.moneyRequestImage}
@@ -394,15 +421,28 @@ function MoneyRequestConfirmationList(props) {
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCreatedRoute(props.iouType, props.reportID))}
                         disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                     />
-                    <MenuItemWithTopDescription
-                        shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                        title={props.iouMerchant}
-                        description={translate('common.merchant')}
-                        style={[styles.moneyRequestMenuItem, styles.mb2]}
-                        titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
-                        disabled={didConfirm || props.isReadOnly || !isTypeRequest}
-                    />
+                    {isDistanceRequest && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
+                            title={distanceString}
+                            description={'Distance'}
+                            style={[styles.moneyRequestMenuItem, styles.mb2]}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
+                            disabled={didConfirm || props.isReadOnly || !isTypeRequest}
+                        />
+                    )}
+                    {!isDistanceRequest && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
+                            title={props.iouMerchant}
+                            description={translate('common.merchant')}
+                            style={[styles.moneyRequestMenuItem, styles.mb2]}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
+                            disabled={didConfirm || props.isReadOnly || !isTypeRequest}
+                        />
+                    )}
                     {!_.isEmpty(props.policyCategories) && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
@@ -431,5 +471,59 @@ export default compose(
         policyCategories: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
         },
+        mileageRate: {
+            key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            selector: (policy) => getDefaultMileageRate(policy),
+        },
+        transaction: {
+            key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+        },
     }),
 )(MoneyRequestConfirmationList);
+
+const getDefaultMileageRate = (policy) => {
+    if (!policy || !policy.customUnits) {
+        return null;
+    }
+
+    const distanceUnit = Object.values(policy.customUnits).find((unit) => unit.name === 'Distance');
+    if (!distanceUnit) {
+        return null;
+    }
+
+    const distanceRate = Object.values(distanceUnit.rates).find((rate) => rate.name === 'Default Rate');
+    if (!distanceRate) {
+        return null;
+    }
+
+    return {
+        rate: distanceRate.rate,
+        unit: distanceUnit.attributes.unit,
+    };
+};
+
+function convertDistance(meters, unit) {
+    if (typeof meters !== 'number' || (unit !== 'mi' && unit !== 'km')) {
+        throw new Error('Invalid input');
+    }
+
+    const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
+    const METERS_TO_MILES = 0.000621371; // There are approximately 0.000621371 miles in a meter
+
+    switch (unit) {
+        case 'km':
+            return meters * METERS_TO_KM;
+        case 'mi':
+            return meters * METERS_TO_MILES;
+        default:
+            throw new Error('Unsupported unit. Supported units are "mi" or "km".');
+    }
+}
+
+const convertDistanceToUnit = (distance, unit, rate) => {
+    const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
+    const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
+    const roundedDistance = distance.toFixed(2);
+
+    return `${roundedDistance} ${roundedDistance === 1 ? singularDistanceUnit : distanceUnit} @ $${rate * 0.01} / ${singularDistanceUnit}`;
+};

From e2d3d944961250e770086b571ffcd0ab0ff1c367 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 17:56:37 -0700
Subject: [PATCH 011/109] fix: remove map from ConfirmPage

---
 .../iou/steps/MoneyRequestConfirmPage.js      | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 29d0dc6a93d2..212997cc8e85 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -22,7 +22,6 @@ import reportPropTypes from '../../reportPropTypes';
 import personalDetailsPropType from '../../personalDetailsPropType';
 import * as FileUtils from '../../../libs/fileDownload/FileUtils';
 import * as Policy from '../../../libs/actions/Policy';
-import ConfirmedRoute from '../../../components/ConfirmedRoute';
 
 const propTypes = {
     report: reportPropTypes,
@@ -50,22 +49,12 @@ const propTypes = {
     /** Personal details of all users */
     personalDetails: personalDetailsPropType,
 
-    /** Data about Mapbox token for calling Mapbox API */
-    mapboxAccessToken: PropTypes.shape({
-        /** Temporary token for Mapbox API */
-        token: PropTypes.string,
-
-        /** Time when the token will expire in ISO 8601 */
-        expiration: PropTypes.string,
-    }),
-
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     report: {},
     personalDetails: {},
-    mapboxAccessToken: {},
     iou: {
         id: '',
         amount: 0,
@@ -239,18 +228,19 @@ function MoneyRequestConfirmPage(props) {
         [props.iou.amount, props.iou.comment, participants, props.iou.currency, props.currentUserPersonalDetails.accountID, props.report],
     );
 
+    // Check if a request is a distance request
+    const isDistanceRequest = true;
+
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                     <HeaderWithBackButton
-                        title={props.translate('iou.cash')}
+                        title={isDistanceRequest ? 'Distance' : props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
-                    <View style={{flex: 1, padding: 16}}>
-                        <ConfirmedRoute transactionID={props.iou.transactionID} />
-                    </View>
                     <MoneyRequestConfirmationList
+                        transactionID={props.iou.transactionID}
                         hasMultipleParticipants={iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
                         selectedParticipants={participants}
                         iouAmount={props.iou.amount}

From eef63806f310639b2eeb211a9527045851bbff9f Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 18:00:25 -0700
Subject: [PATCH 012/109] fix: check if the request is a distance request

---
 src/components/MoneyRequestConfirmationList.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 8c03aba15ffd..3651370ff977 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -149,13 +149,13 @@ function MoneyRequestConfirmationList(props) {
     // A flag and a toggler for showing the rest of the form fields
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
-    const isDistanceRequest = true;
 
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
-    const convertedDistance = convertDistance(distance, unit);
-    const distanceRequestAmount = convertedDistance * rate * 0.01;
-    const distanceString = convertDistanceToUnit(convertedDistance, unit, rate);
+    const isDistanceRequest = !!distance;
+    const convertedDistance = isDistanceRequest ? convertDistance(distance, unit) : 0;
+    const distanceRequestAmount = isDistanceRequest ? convertedDistance * rate * 0.01 : 0;
+    const distanceString = isDistanceRequest ? convertDistanceToUnit(convertedDistance, unit, rate) : '';
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(isDistanceRequest ? distanceRequestAmount : props.iouAmount, isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode);
 

From ae13f9d845d8d2d53e0f214e457038447b594772 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 18:56:48 -0700
Subject: [PATCH 013/109] fix: navigation, translation, and amount calculation

---
 src/components/MoneyRequestConfirmationList.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 3651370ff977..583d73754d02 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -154,7 +154,7 @@ function MoneyRequestConfirmationList(props) {
     const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
     const isDistanceRequest = !!distance;
     const convertedDistance = isDistanceRequest ? convertDistance(distance, unit) : 0;
-    const distanceRequestAmount = isDistanceRequest ? convertedDistance * rate * 0.01 : 0;
+    const distanceRequestAmount = isDistanceRequest ? convertedDistance * rate : 0;
     const distanceString = isDistanceRequest ? convertDistanceToUnit(convertedDistance, unit, rate) : '';
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(isDistanceRequest ? distanceRequestAmount : props.iouAmount, isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode);
@@ -380,7 +380,13 @@ function MoneyRequestConfirmationList(props) {
                     shouldShowRightIcon={!props.isReadOnly}
                     title={formattedAmount}
                     description={translate('iou.amount')}
-                    onPress={() => Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))}
+                    onPress={() => {
+                        const route = isDistanceRequest
+                            ? ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID)
+                            : ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID);
+
+                        Navigation.navigate(route);
+                    }}
                     style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
                     disabled={didConfirm || props.isReadOnly}
@@ -425,10 +431,10 @@ function MoneyRequestConfirmationList(props) {
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                             title={distanceString}
-                            description={'Distance'}
+                            description={translate('tabSelector.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
-                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
+                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID))}
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     )}

From 5b8cd86677b74544699dd364cb1e32b94efa2457 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 23 Aug 2023 19:31:26 -0700
Subject: [PATCH 014/109] fix: change the button style

---
 src/components/DistanceRequest.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 46e391efd198..5e5306fd30ca 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -261,14 +261,12 @@ function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAcc
                 )}
             </View>
             <Button
-                small
-                icon={Expensicons.Plus}
-                onPress={() => {
-                    IOU.navigateToNextPage(iou, iouType, reportID, report);
-                }}
-                text={translate('distance.addStop')}
-                isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
-                innerStyles={[styles.ph10]}
+                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')}
             />
         </ScreenWrapper>
     );

From 20b742c989080caaf1e240ce3b040fc9c005e23d Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 10:42:10 -0700
Subject: [PATCH 015/109] refactor: create DistanceRequestUtils

---
 .../MoneyRequestConfirmationList.js           | 64 +++----------------
 src/libs/DistanceRequestUtils.js              | 50 +++++++++++++++
 2 files changed, 60 insertions(+), 54 deletions(-)
 create mode 100644 src/libs/DistanceRequestUtils.js

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 583d73754d02..833e53377159 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -4,6 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import {format} from 'date-fns';
 import _ from 'underscore';
 import {View} from 'react-native';
+import lodashGet from 'lodash/get';
 import styles from '../styles/styles';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
@@ -29,7 +30,9 @@ import useLocalize from '../hooks/useLocalize';
 import * as ReceiptUtils from '../libs/ReceiptUtils';
 import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
-import lodashGet from 'lodash/get';
+import transactionPropTypes from './transactionPropTypes';
+import DistanceRequestUtils from '../libs/DistanceRequestUtils';
+import * as TransactionUtils from '../libs/TransactionUtils';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -107,10 +110,10 @@ const propTypes = {
     transactionID: PropTypes.string,
 
     /** Transaction that represents the money request */
-    transaction: PropTypes.object,
+    transaction: transactionPropTypes,
 
     /** Unit and rate used for if the money request is a distance request */
-    mileageRate: PropTypes.objectOf({
+    mileageRate: PropTypes.shape({
         unit: PropTypes.oneOf(['mi', 'ki']),
         rate: PropTypes.number,
     }),
@@ -152,10 +155,10 @@ function MoneyRequestConfirmationList(props) {
 
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
-    const isDistanceRequest = !!distance;
-    const convertedDistance = isDistanceRequest ? convertDistance(distance, unit) : 0;
+    const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);
+    const convertedDistance = isDistanceRequest ? DistanceRequestUtils.getDistanceString(distance, unit) : 0;
     const distanceRequestAmount = isDistanceRequest ? convertedDistance * rate : 0;
-    const distanceString = isDistanceRequest ? convertDistanceToUnit(convertedDistance, unit, rate) : '';
+    const distanceString = isDistanceRequest ? DistanceRequestUtils.convertDistanceToUnit(convertedDistance, unit, rate) : '';
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(isDistanceRequest ? distanceRequestAmount : props.iouAmount, isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode);
 
@@ -479,57 +482,10 @@ export default compose(
         },
         mileageRate: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            selector: (policy) => getDefaultMileageRate(policy),
+            selector: (policy) => DistanceRequestUtils.getDefaultMileageRate(policy),
         },
         transaction: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         },
     }),
 )(MoneyRequestConfirmationList);
-
-const getDefaultMileageRate = (policy) => {
-    if (!policy || !policy.customUnits) {
-        return null;
-    }
-
-    const distanceUnit = Object.values(policy.customUnits).find((unit) => unit.name === 'Distance');
-    if (!distanceUnit) {
-        return null;
-    }
-
-    const distanceRate = Object.values(distanceUnit.rates).find((rate) => rate.name === 'Default Rate');
-    if (!distanceRate) {
-        return null;
-    }
-
-    return {
-        rate: distanceRate.rate,
-        unit: distanceUnit.attributes.unit,
-    };
-};
-
-function convertDistance(meters, unit) {
-    if (typeof meters !== 'number' || (unit !== 'mi' && unit !== 'km')) {
-        throw new Error('Invalid input');
-    }
-
-    const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
-    const METERS_TO_MILES = 0.000621371; // There are approximately 0.000621371 miles in a meter
-
-    switch (unit) {
-        case 'km':
-            return meters * METERS_TO_KM;
-        case 'mi':
-            return meters * METERS_TO_MILES;
-        default:
-            throw new Error('Unsupported unit. Supported units are "mi" or "km".');
-    }
-}
-
-const convertDistanceToUnit = (distance, unit, rate) => {
-    const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
-    const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
-    const roundedDistance = distance.toFixed(2);
-
-    return `${roundedDistance} ${roundedDistance === 1 ? singularDistanceUnit : distanceUnit} @ $${rate * 0.01} / ${singularDistanceUnit}`;
-};
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
new file mode 100644
index 000000000000..59fa157bfeb2
--- /dev/null
+++ b/src/libs/DistanceRequestUtils.js
@@ -0,0 +1,50 @@
+import _ from 'underscore';
+
+const getDefaultMileageRate = (policy) => {
+    if (!policy || !policy.customUnits) {
+        return null;
+    }
+
+    const distanceUnit = _.find(_.values(policy.customUnits), (unit) => unit.name === 'Distance');
+    if (!distanceUnit) {
+        return null;
+    }
+
+    const distanceRate = _.find(_.values(distanceUnit.rates), (rate) => rate.name === 'Default Rate');
+    if (!distanceRate) {
+        return null;
+    }
+
+    return {
+        rate: distanceRate.rate,
+        unit: distanceUnit.attributes.unit,
+    };
+};
+
+function getDistanceString(meters, unit) {
+    if (typeof meters !== 'number' || (unit !== 'mi' && unit !== 'km')) {
+        throw new Error('Invalid input');
+    }
+
+    const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
+    const METERS_TO_MILES = 0.000621371; // There are approximately 0.000621371 miles in a meter
+
+    switch (unit) {
+        case 'km':
+            return meters * METERS_TO_KM;
+        case 'mi':
+            return meters * METERS_TO_MILES;
+        default:
+            throw new Error('Unsupported unit. Supported units are "mi" or "km".');
+    }
+}
+
+const convertDistanceToUnit = (distance, unit, rate) => {
+    const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
+    const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
+    const roundedDistance = distance.toFixed(2);
+
+    return `${roundedDistance} ${roundedDistance === 1 ? singularDistanceUnit : distanceUnit} @ $${rate * 0.01} / ${singularDistanceUnit}`;
+};
+
+export default {getDefaultMileageRate, getDistanceString, convertDistanceToUnit};

From 5eb207b2a6cd1e69542c22c5d16ee6e52a00ab16 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 13:36:12 -0700
Subject: [PATCH 016/109] refactor: clean up util functions

---
 .../MoneyRequestConfirmationList.js           | 12 +++++------
 src/libs/DistanceRequestUtils.js              | 21 ++++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 833e53377159..c081b9b3bfeb 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -153,14 +153,14 @@ function MoneyRequestConfirmationList(props) {
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
 
+    const isDistanceRequest = false;
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
-    const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);
-    const convertedDistance = isDistanceRequest ? DistanceRequestUtils.getDistanceString(distance, unit) : 0;
-    const distanceRequestAmount = isDistanceRequest ? convertedDistance * rate : 0;
-    const distanceString = isDistanceRequest ? DistanceRequestUtils.convertDistanceToUnit(convertedDistance, unit, rate) : '';
 
-    const formattedAmount = CurrencyUtils.convertToDisplayString(isDistanceRequest ? distanceRequestAmount : props.iouAmount, isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode);
+    const formattedAmount = CurrencyUtils.convertToDisplayString(
+        isDistanceRequest ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
+        isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode,
+    );
 
     /**
      * Returns the participants with amount
@@ -433,7 +433,7 @@ function MoneyRequestConfirmationList(props) {
                     {isDistanceRequest && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                            title={distanceString}
+                            title={DistanceRequestUtils.getDistanceString(distance, unit, rate)}
                             description={translate('tabSelector.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 59fa157bfeb2..d7cc607db760 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -21,8 +21,8 @@ const getDefaultMileageRate = (policy) => {
     };
 };
 
-function getDistanceString(meters, unit) {
-    if (typeof meters !== 'number' || (unit !== 'mi' && unit !== 'km')) {
+function convertDistanceUnit(distanceInMeters, unit) {
+    if (typeof distanceInMeters !== 'number' || (unit !== 'mi' && unit !== 'km')) {
         throw new Error('Invalid input');
     }
 
@@ -31,20 +31,27 @@ function getDistanceString(meters, unit) {
 
     switch (unit) {
         case 'km':
-            return meters * METERS_TO_KM;
+            return distanceInMeters * METERS_TO_KM;
         case 'mi':
-            return meters * METERS_TO_MILES;
+            return distanceInMeters * METERS_TO_MILES;
         default:
             throw new Error('Unsupported unit. Supported units are "mi" or "km".');
     }
 }
 
-const convertDistanceToUnit = (distance, unit, rate) => {
+const getDistanceString = (distance, unit, rate) => {
+    const convertedDistance = convertDistanceUnit(distance, unit, rate);
+
     const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
     const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
-    const roundedDistance = distance.toFixed(2);
+    const roundedDistance = convertedDistance.toFixed(2);
 
     return `${roundedDistance} ${roundedDistance === 1 ? singularDistanceUnit : distanceUnit} @ $${rate * 0.01} / ${singularDistanceUnit}`;
 };
 
-export default {getDefaultMileageRate, getDistanceString, convertDistanceToUnit};
+const getDistanceRequestAmount = (distance, unit, rate) => {
+    const convertedDistance = convertDistanceUnit(distance, unit, rate);
+    return convertedDistance * rate;
+};
+
+export default {getDefaultMileageRate, getDistanceString, getDistanceRequestAmount};

From c4d139bad6a5053197a8edac26834d41feda1d73 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 13:43:32 -0700
Subject: [PATCH 017/109] style: fix import path

---
 src/components/DistanceRequest.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 5e5306fd30ca..9c46882e4e8e 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -23,7 +23,7 @@ import useLocalize from '../hooks/useLocalize';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import * as IOU from '../libs/actions/IOU';
-import participantPropTypes from '../components/participantPropTypes';
+import participantPropTypes from './participantPropTypes';
 import reportPropTypes from '../pages/reportPropTypes';
 import transactionPropTypes from './transactionPropTypes';
 import ScreenWrapper from './ScreenWrapper';

From 2abd45cd50c09be2f975cd833838b1a27a421220 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 13:43:50 -0700
Subject: [PATCH 018/109] style: remove unused import

---
 src/components/MoneyRequestConfirmationList.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index c081b9b3bfeb..4fc3c7c02436 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -32,7 +32,6 @@ import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import transactionPropTypes from './transactionPropTypes';
 import DistanceRequestUtils from '../libs/DistanceRequestUtils';
-import * as TransactionUtils from '../libs/TransactionUtils';
 
 const propTypes = {
     /** Callback to inform parent modal of success */

From 837a04f367b28c4e7aa9cadca8626752b5ec2ebf Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 13:49:05 -0700
Subject: [PATCH 019/109] chore: mock distance request

---
 .../MoneyRequestParticipantsPage.js                          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index d6d069dc0329..2ac0a20403b7 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -74,7 +74,10 @@ function MoneyRequestParticipantsPage(props) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if ((props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
+        //TODO: Temporarily set isDistanceRequest
+        const isDistanceRequest = true;
+
+        if ((!isDistanceRequest && props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
             navigateBack(true);
         }
 

From 3048b71dfe73f147a84600ec249ba0610a2bc17e Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 15:35:49 -0700
Subject: [PATCH 020/109] fix: add missing types to IOU

---
 src/types/onyx/IOU.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/types/onyx/IOU.ts b/src/types/onyx/IOU.ts
index 373b5d990160..66f85c98d70c 100644
--- a/src/types/onyx/IOU.ts
+++ b/src/types/onyx/IOU.ts
@@ -13,6 +13,11 @@ type IOU = {
     /** Selected Currency Code of the current IOU */
     currency?: string;
     comment?: string;
+    merchant?: string;
+    created?: string;
+    receiptPath?: string;
+    receiptSource?: string;
+    transactionID?: string;
     participants?: Participant[];
 };
 

From 892d4c2d972b2064f8d01d818712e291bcd2b04a Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 15:38:45 -0700
Subject: [PATCH 021/109] style: remove reportID from prop (get it from report)

---
 src/components/DistanceRequest.js    | 27 ++++++++++-----------------
 src/pages/iou/DistanceRequestPage.js | 24 +++++++++++++++++++-----
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 9c46882e4e8e..c96342dd8965 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -44,20 +44,15 @@ const propTypes = {
         amount: PropTypes.number,
         currency: PropTypes.string,
         participants: PropTypes.arrayOf(participantPropTypes),
+        transactionID: PropTypes.string,
     }),
 
     /** Type of money request (i.e. IOU) */
     iouType: PropTypes.string,
 
-    /** ID of the report to with which the distance request is associated */
-    reportID: PropTypes.string,
-
     /** The report to with which the distance request is associated */
     report: reportPropTypes,
 
-    /** The transactionID of this request */
-    transactionID: PropTypes.string,
-
     /** The optimistic transaction for this request */
     transaction: transactionPropTypes,
 
@@ -79,14 +74,12 @@ const defaultProps = {
         participants: [],
     },
     iouType: '',
-    reportID: '',
     report: {},
-    transactionID: '',
     transaction: {},
     mapboxAccessToken: {},
 };
 
-function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAccessToken, transactionID}) {
+function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {
     const [shouldShowGradient, setShouldShowGradient] = useState(false);
     const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
     const [scrollContentHeight, setScrollContentHeight] = useState(0);
@@ -143,12 +136,12 @@ function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAcc
     }, []);
 
     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.
@@ -162,8 +155,8 @@ function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAcc
             return;
         }
 
-        Transaction.getRoute(transactionID, waypoints);
-    }, [shouldFetchRoute, transactionID, waypoints]);
+        Transaction.getRoute(iou.transactionID, waypoints);
+    }, [shouldFetchRoute, iou.transactionID, waypoints]);
 
     useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
 
@@ -227,7 +220,7 @@ function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAcc
                 <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]}
@@ -263,7 +256,7 @@ function DistanceRequest({iou, iouType, reportID, report, transaction, mapboxAcc
             <Button
                 success
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
-                onPress={() => IOU.navigateToNextPage(iou, iouType, reportID, report)}
+                onPress={() => IOU.navigateToNextPage(iou, iouType, report.reportID, report)}
                 pressOnEnter
                 isDisabled={waypointMarkers.length < 2}
                 text={translate('common.next')}
@@ -277,7 +270,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,
diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index 0173b3d08137..d71c5d5e437c 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -1,16 +1,32 @@
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import * as IOU from '../../libs/actions/IOU';
 import ONYXKEYS from '../../ONYXKEYS';
 import DistanceRequest from '../../components/DistanceRequest';
 import reportPropTypes from '../reportPropTypes';
 import CONST from '../../CONST';
-import lodashGet from 'lodash/get';
 
 const propTypes = {
-    /** The transactionID of this request */
-    iou: PropTypes.object,
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        currency: PropTypes.string,
+        merchant: PropTypes.string,
+        created: PropTypes.string,
+        participants: PropTypes.arrayOf(
+            PropTypes.shape({
+                accountID: PropTypes.number,
+                login: PropTypes.string,
+                isPolicyExpenseChat: PropTypes.bool,
+                isOwnPolicyExpenseChat: PropTypes.bool,
+                selected: PropTypes.bool,
+            }),
+        ),
+        transactionID: PropTypes.string,
+    }),
 
     /** The report on which the request is initiated on */
     report: reportPropTypes,
@@ -46,7 +62,6 @@ const defaultProps = {
 // You can't use Onyx props in the withOnyx mapping, so we need to set up and access the transactionID here, and then pass it down so that DistanceRequest can subscribe to the transaction.
 function DistanceRequestPage({iou, report, route}) {
     const iouType = lodashGet(route, 'params.iouType', '');
-    const reportID = lodashGet(route, 'params.reportID', '');
 
     useEffect(() => {
         if (iou.transactionID) {
@@ -59,7 +74,6 @@ function DistanceRequestPage({iou, report, route}) {
         <DistanceRequest
             iou={iou}
             iouType={iouType}
-            reportID={reportID}
             report={report}
             transactionID={iou.transactionID}
         />

From 73e19ee7004e124b7d6c4200223c23f1730b0b91 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 16:50:25 -0700
Subject: [PATCH 022/109] refactor: check for distanceRequest in
 ParticipantsPage

---
 .../MoneyRequestParticipantsPage.js              | 16 ++++++++++------
 .../MoneyRequestParticipantsSelector.js          | 10 ++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 2ac0a20403b7..8a5225a0e399 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -33,6 +33,9 @@ const propTypes = {
         ),
     }),
 
+    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
+    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -48,6 +51,7 @@ function MoneyRequestParticipantsPage(props) {
     const prevMoneyRequestId = useRef(props.iou.id);
     const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
     const reportID = useRef(lodashGet(props.route, 'params.reportID', ''));
+    const isDistanceRequest = props.selectedTab === CONST.TAB.DISTANCE;
 
     const navigateToNextStep = () => {
         Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, reportID.current));
@@ -61,7 +65,7 @@ function MoneyRequestParticipantsPage(props) {
         // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
         if (prevMoneyRequestId.current !== props.iou.id) {
             // The ID is cleared on completing a request. In that case, we will do nothing
-            if (props.iou.id) {
+            if (!isDistanceRequest && props.iou.id) {
                 navigateBack(true);
             }
             return;
@@ -73,11 +77,7 @@ function MoneyRequestParticipantsPage(props) {
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
-
-        //TODO: Temporarily set isDistanceRequest
-        const isDistanceRequest = true;
-
-        if ((!isDistanceRequest && props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
+        if (!isDistanceRequest && ((props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset)) {
             navigateBack(true);
         }
 
@@ -110,6 +110,7 @@ function MoneyRequestParticipantsPage(props) {
                             onAddParticipants={IOU.setMoneyRequestParticipants}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                             iouType={iouType.current}
+                            isDistanceRequest={isDistanceRequest}
                         />
                     )}
                 </View>
@@ -126,5 +127,8 @@ export default compose(
     withLocalize,
     withOnyx({
         iou: {key: ONYXKEYS.IOU},
+        selectedTab: {
+            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        },
     }),
 )(MoneyRequestParticipantsPage);
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 9f59c55f6337..ef1d6565f595 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -34,8 +34,8 @@ const propTypes = {
     /** The type of IOU report, i.e. bill, request, send */
     iouType: PropTypes.string.isRequired,
 
-    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
-    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
+    /** Whether the money request is a distance request or not */
+    isDistanceRequest: PropTypes.bool,
 
     ...withLocalizePropTypes,
 };
@@ -45,6 +45,7 @@ const defaultProps = {
     personalDetails: {},
     reports: {},
     betas: [],
+    isDistanceRequest: false,
 };
 
 class MoneyRequestParticipantsSelector extends Component {
@@ -89,7 +90,7 @@ class MoneyRequestParticipantsSelector extends Component {
             this.props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
 
             // We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
-            this.props.selectedTab !== CONST.TAB.DISTANCE,
+            !this.props.isDistanceRequest,
         );
     }
 
@@ -189,8 +190,5 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
-        selectedTab: {
-            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
-        },
     }),
 )(MoneyRequestParticipantsSelector);

From 4d72e7e81594e7830b2a9cbfa526a32ec609f1a9 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 17:00:16 -0700
Subject: [PATCH 023/109] fix: remove unnecessary arguments

---
 src/libs/DistanceRequestUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index d7cc607db760..e3b9b66a633e 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -40,7 +40,7 @@ function convertDistanceUnit(distanceInMeters, unit) {
 }
 
 const getDistanceString = (distance, unit, rate) => {
-    const convertedDistance = convertDistanceUnit(distance, unit, rate);
+    const convertedDistance = convertDistanceUnit(distance, unit);
 
     const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
     const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
@@ -50,7 +50,7 @@ const getDistanceString = (distance, unit, rate) => {
 };
 
 const getDistanceRequestAmount = (distance, unit, rate) => {
-    const convertedDistance = convertDistanceUnit(distance, unit, rate);
+    const convertedDistance = convertDistanceUnit(distance, unit);
     return convertedDistance * rate;
 };
 

From 327c5452e9e9c2e1198d37a4093493d361b73ff3 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 17:00:31 -0700
Subject: [PATCH 024/109] fix: add default prop value

---
 src/components/MoneyRequestConfirmationList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 4fc3c7c02436..d082c1eb13df 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -139,7 +139,7 @@ const defaultProps = {
     policyCategories: {},
     transactionID: '',
     transaction: {},
-    mileageRate: {},
+    mileageRate: {unit: 'mi', rate: 0.655},
 };
 
 function MoneyRequestConfirmationList(props) {
@@ -152,7 +152,7 @@ function MoneyRequestConfirmationList(props) {
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
 
-    const isDistanceRequest = false;
+    const isDistanceRequest = true;
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
 

From 972c2d0aa647ba793858b2127180418796f04ca1 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:02:32 -0700
Subject: [PATCH 025/109] fix: set report ID when participant is selected

---
 .../MoneyRequestParticipantsPage.js                         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 8a5225a0e399..07efa0732668 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -107,7 +107,11 @@ function MoneyRequestParticipantsPage(props) {
                     ) : (
                         <MoneyRequestParticipantsSelector
                             onStepComplete={navigateToNextStep}
-                            onAddParticipants={IOU.setMoneyRequestParticipants}
+                            onAddParticipants={(participants) => {
+                                const [participant] = participants;
+                                reportID.current = participant ? participant.reportID : '';
+                                IOU.setMoneyRequestParticipants(participants);
+                            }}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                             iouType={iouType.current}
                             isDistanceRequest={isDistanceRequest}

From 58199fa33b7e04b5fad5e452b8e049d7fffc3baa Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:02:49 -0700
Subject: [PATCH 026/109] fix: check  for distance request

---
 .../MoneyRequestConfirmationList.js           | 24 +++++++++++--------
 .../iou/steps/MoneyRequestConfirmPage.js      | 12 ++++++----
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index d082c1eb13df..efed4a3f2c6e 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -116,6 +116,9 @@ const propTypes = {
         unit: PropTypes.oneOf(['mi', 'ki']),
         rate: PropTypes.number,
     }),
+
+    /** Whether the money request is a distance request */
+    isDistanceRequest: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -140,6 +143,7 @@ const defaultProps = {
     transactionID: '',
     transaction: {},
     mileageRate: {unit: 'mi', rate: 0.655},
+    isDistanceRequest: false,
 };
 
 function MoneyRequestConfirmationList(props) {
@@ -152,13 +156,12 @@ function MoneyRequestConfirmationList(props) {
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
 
-    const isDistanceRequest = true;
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
-        isDistanceRequest ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
-        isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode,
+        props.isDistanceRequest ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
+        props.isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode,
     );
 
     /**
@@ -369,9 +372,11 @@ function MoneyRequestConfirmationList(props) {
             optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
             footerContent={footerContent}
         >
-            <View style={{margin: 20, height: 200}}>
-                <ConfirmedRoute transactionID={props.transactionID} />
-            </View>
+            {props.isDistanceRequest && (
+                <View style={{margin: 20, height: 200}}>
+                    <ConfirmedRoute transactionID={props.transactionID} />
+                </View>
+            )}
             {!_.isEmpty(props.receiptPath) ? (
                 <Image
                     style={styles.moneyRequestImage}
@@ -383,7 +388,7 @@ function MoneyRequestConfirmationList(props) {
                     title={formattedAmount}
                     description={translate('iou.amount')}
                     onPress={() => {
-                        const route = isDistanceRequest
+                        const route = props.isDistanceRequest
                             ? ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID)
                             : ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID);
 
@@ -429,7 +434,7 @@ function MoneyRequestConfirmationList(props) {
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCreatedRoute(props.iouType, props.reportID))}
                         disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                     />
-                    {isDistanceRequest && (
+                    {props.isDistanceRequest ? (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                             title={DistanceRequestUtils.getDistanceString(distance, unit, rate)}
@@ -439,8 +444,7 @@ function MoneyRequestConfirmationList(props) {
                             onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID))}
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
-                    )}
-                    {!isDistanceRequest && (
+                    ) : (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                             title={props.iouMerchant}
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 212997cc8e85..9a7d16b19bf9 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -68,6 +68,7 @@ const defaultProps = {
 };
 
 function MoneyRequestConfirmPage(props) {
+    const isDistanceRequest = props.selectedTab === CONST.TAB.DISTANCE;
     const prevMoneyRequestId = useRef(props.iou.id);
     const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
     const reportID = useRef(lodashGet(props.route, 'params.reportID', ''));
@@ -89,7 +90,7 @@ function MoneyRequestConfirmPage(props) {
 
     useEffect(() => {
         // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (prevMoneyRequestId.current !== props.iou.id) {
+        if (!isDistanceRequest && prevMoneyRequestId.current !== props.iou.id) {
             // The ID is cleared on completing a request. In that case, we will do nothing.
             if (props.iou.id) {
                 Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), true);
@@ -99,7 +100,7 @@ function MoneyRequestConfirmPage(props) {
 
         // Reset the money request Onyx if the ID in Onyx does not match the ID from params
         const moneyRequestId = `${iouType.current}${reportID.current}`;
-        const shouldReset = props.iou.id !== moneyRequestId;
+        const shouldReset = !isDistanceRequest && props.iou.id !== moneyRequestId;
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
@@ -228,9 +229,6 @@ function MoneyRequestConfirmPage(props) {
         [props.iou.amount, props.iou.comment, participants, props.iou.currency, props.currentUserPersonalDetails.accountID, props.report],
     );
 
-    // Check if a request is a distance request
-    const isDistanceRequest = true;
-
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({safeAreaPaddingBottomStyle}) => (
@@ -271,6 +269,7 @@ function MoneyRequestConfirmPage(props) {
                         bankAccountRoute={ReportUtils.getBankAccountRoute(props.report)}
                         iouMerchant={props.iou.merchant}
                         iouCreated={props.iou.created}
+                        isDistanceRequest={isDistanceRequest}
                     />
                 </View>
             )}
@@ -295,5 +294,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        selectedTab: {
+            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        },
     }),
 )(MoneyRequestConfirmPage);

From 9b1c8ec6d21392b7b649503bf4d1ae754f529312 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:06:28 -0700
Subject: [PATCH 027/109] style: change default rate to 0 for easy bug spot

---
 src/components/MoneyRequestConfirmationList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index efed4a3f2c6e..272bbce14d65 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -142,7 +142,7 @@ const defaultProps = {
     policyCategories: {},
     transactionID: '',
     transaction: {},
-    mileageRate: {unit: 'mi', rate: 0.655},
+    mileageRate: {unit: 'mi', rate: 0},
     isDistanceRequest: false,
 };
 

From 57d694226b1b6dbc720cb364c86766900fd6f715 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:18:59 -0700
Subject: [PATCH 028/109] style: fix ESLint errors

---
 src/components/ConfirmedRoute.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 536938e145d7..bb5076a429ef 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -1,32 +1,33 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 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 lodashGet from 'lodash/get';
 import * as MapboxToken from '../libs/actions/MapboxToken';
-import {useEffect} from 'react';
-import _ from 'underscore';
 import * as Expensicons from './Icon/Expensicons';
 import theme from '../styles/themes/default';
 import styles from '../styles/styles';
+import transactionPropTypes from './transactionPropTypes';
 
 const MAP_PADDING = 50;
 
 const propTypes = {
-    transactionID: PropTypes.string,
-    transaction: PropTypes.object,
-    mapboxAccessToken: PropTypes.object,
+    /** Transaction that stores the distance request data */
+    transaction: transactionPropTypes,
+
+    /** Token needed to render the map */
+    mapboxToken: PropTypes.string,
 };
 
 const defaultProps = {
-    transactionID: '',
     transaction: {},
-    mapboxAccessToken: PropTypes.object,
+    mapboxToken: '',
 };
 
-function ConfirmedRoute({transaction, mapboxAccessToken}) {
+function ConfirmedRoute({mapboxToken, transaction}) {
     const {route0: route} = transaction.routes;
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const numberOfWaypoints = _.size(waypoints);
@@ -68,7 +69,7 @@ function ConfirmedRoute({transaction, mapboxAccessToken}) {
 
     return (
         <MapView
-            accessToken={mapboxAccessToken.token}
+            accessToken={mapboxToken}
             style={{
                 flex: 1,
                 borderRadius: 20,
@@ -87,11 +88,12 @@ export default withOnyx({
     transaction: {
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
     },
-    mapboxAccessToken: {
+    mapboxToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
+        selector: (mapboxAccessToken) => mapboxAccessToken.token,
     },
 })(ConfirmedRoute);
 
 ConfirmedRoute.displayName = 'MoneyRequestConfirmPage';
-ConfirmedRoute.prototype = propTypes;
+ConfirmedRoute.propTypes = propTypes;
 ConfirmedRoute.defaultProps = defaultProps;

From 3f31e601d51418726986ce14ec9c73477e0d2175 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:28:17 -0700
Subject: [PATCH 029/109] style: extract logic for getting waypoint markers

---
 src/components/ConfirmedRoute.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index bb5076a429ef..e49e7499304f 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -27,12 +27,10 @@ const defaultProps = {
     mapboxToken: '',
 };
 
-function ConfirmedRoute({mapboxToken, transaction}) {
-    const {route0: route} = transaction.routes;
-    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+const getWaypointMarkers = (waypoints) => {
     const numberOfWaypoints = _.size(waypoints);
     const lastWaypointIndex = numberOfWaypoints - 1;
-    const waypointMarkers = _.filter(
+    return _.filter(
         _.map(waypoints, (waypoint, key) => {
             if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
                 return;
@@ -61,6 +59,12 @@ function ConfirmedRoute({mapboxToken, transaction}) {
         }),
         (waypoint) => waypoint,
     );
+};
+
+function ConfirmedRoute({mapboxToken, transaction}) {
+    const {route0: route} = transaction.routes;
+    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    const waypointMarkers = getWaypointMarkers(waypoints);
 
     useEffect(() => {
         MapboxToken.init();

From fdb997cea60428322efeba43e4750ed785f0eb4a Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:29:13 -0700
Subject: [PATCH 030/109] style: fix ESLint error

---
 src/components/MoneyRequestConfirmationList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 272bbce14d65..e0c902cdbebe 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -149,7 +149,7 @@ const defaultProps = {
 function MoneyRequestConfirmationList(props) {
     // Destructure functions from props to pass it as a dependecy to useCallback/useMemo hooks.
     // Prop functions pass props itself as a "this" value to the function which means they change every time props change.
-    const {onSendMoney, onConfirm, onSelectParticipant} = props;
+    const {onSendMoney, onConfirm, onSelectParticipant, transaction} = props;
     const {translate} = useLocalize();
 
     // A flag and a toggler for showing the rest of the form fields
@@ -157,7 +157,7 @@ function MoneyRequestConfirmationList(props) {
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
 
     const {unit, rate} = props.mileageRate;
-    const distance = lodashGet(props, 'transaction.routes.route0.distance', 0);
+    const distance = lodashGet(transaction, 'routes.route0.distance', 0);
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
         props.isDistanceRequest ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,

From ed4046e75ce676c7bcad55ca3d6350e96df15ea7 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:32:27 -0700
Subject: [PATCH 031/109] style: fix ESLint warnings and errors

---
 src/components/MoneyRequestConfirmationList.js                  | 2 +-
 .../MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index e0c902cdbebe..1acae1886fe0 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -193,7 +193,7 @@ function MoneyRequestConfirmationList(props) {
                 value: props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
             },
         ];
-    }, [props.hasMultipleParticipants, props.iouAmount, props.receiptPath, props.iouCurrencyCode, translate]);
+    }, [props.hasMultipleParticipants, props.receiptPath, translate, formattedAmount]);
 
     const selectedParticipants = useMemo(() => _.filter(props.selectedParticipants, (participant) => participant.selected), [props.selectedParticipants]);
     const payeePersonalDetails = useMemo(() => props.payeePersonalDetails || props.currentUserPersonalDetails, [props.payeePersonalDetails, props.currentUserPersonalDetails]);
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 07efa0732668..605db129ff3f 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -84,7 +84,7 @@ function MoneyRequestParticipantsPage(props) {
         return () => {
             prevMoneyRequestId.current = props.iou.id;
         };
-    }, [props.iou.amount, props.iou.id, props.iou.receiptPath]);
+    }, [props.iou.amount, props.iou.id, props.iou.receiptPath, isDistanceRequest]);
 
     return (
         <ScreenWrapper

From f2fcbce47d8ab5026e102e8bc776db87551cdf2d Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:47:03 -0700
Subject: [PATCH 032/109] feat: support offline

---
 src/components/ConfirmedRoute.js | 48 ++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index e49e7499304f..fbe40c43ae73 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -1,5 +1,6 @@
 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';
@@ -11,6 +12,9 @@ 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 MAP_PADDING = 50;
 
@@ -62,6 +66,8 @@ const getWaypointMarkers = (waypoints) => {
 };
 
 function ConfirmedRoute({mapboxToken, transaction}) {
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
     const {route0: route} = transaction.routes;
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const waypointMarkers = getWaypointMarkers(waypoints);
@@ -72,19 +78,33 @@ function ConfirmedRoute({mapboxToken, transaction}) {
     }, []);
 
     return (
-        <MapView
-            accessToken={mapboxToken}
-            style={{
-                flex: 1,
-                borderRadius: 20,
-                overflow: 'hidden',
-            }}
-            styleURL={CONST.MAPBOX_STYLE_URL}
-            directionStyle={styles.mapDirection}
-            waypoints={waypointMarkers}
-            mapPadding={MAP_PADDING}
-            directionCoordinates={route.geometry.coordinates}
-        />
+        <>
+            {!isOffline && mapboxToken ? (
+                <MapView
+                    accessToken={mapboxToken}
+                    mapPadding={MAP_PADDING}
+                    pitchEnabled={false}
+                    directionCoordinates={route.geometry.coordinates}
+                    directionStyle={styles.mapDirection}
+                    style={{
+                        flex: 1,
+                        borderRadius: 20,
+                        overflow: 'hidden',
+                    }}
+                    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>
+            )}
+        </>
     );
 }
 
@@ -94,7 +114,7 @@ export default withOnyx({
     },
     mapboxToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-        selector: (mapboxAccessToken) => mapboxAccessToken.token,
+        selector: (mapboxAccessToken) => (mapboxAccessToken ? mapboxAccessToken.token : ''),
     },
 })(ConfirmedRoute);
 

From 891c5e878ef5eb02bd815ef33e7f38178bd085c0 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 19:54:16 -0700
Subject: [PATCH 033/109] style: fix ESLint warning

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 9a7d16b19bf9..57f3ff64f307 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -113,7 +113,7 @@ function MoneyRequestConfirmPage(props) {
         return () => {
             prevMoneyRequestId.current = props.iou.id;
         };
-    }, [props.iou.participants, props.iou.amount, props.iou.id, props.iou.receiptPath]);
+    }, [props.iou.participants, props.iou.amount, props.iou.id, props.iou.receiptPath, isDistanceRequest]);
 
     const navigateBack = () => {
         let fallback;

From 55e0ba9262e81c5e4cd6f9ab0a05396684c13cb3 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 24 Aug 2023 22:02:55 -0700
Subject: [PATCH 034/109] style: make function more readable

---
 src/libs/DistanceRequestUtils.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index e3b9b66a633e..00d90e07e21b 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -39,14 +39,23 @@ function convertDistanceUnit(distanceInMeters, unit) {
     }
 }
 
-const getDistanceString = (distance, unit, rate) => {
-    const convertedDistance = convertDistanceUnit(distance, unit);
+/**
+ *
+ * @param {number} distanceInMeters Distance traveled
+ * @param {('mi' | 'ki')} unit Unit that should be used to display the distance
+ * @param {number} rate Expensable amount allowed per unit
+ * @returns {string} A string that describes the distance travled and the rate used for expense calculation
+ */
+const getDistanceString = (distanceInMeters, unit, rate) => {
+    const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
 
     const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
     const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
     const roundedDistance = convertedDistance.toFixed(2);
+    const unitString = roundedDistance === 1 ? singularDistanceUnit : distanceUnit;
+    const ratePerUnit = rate * 0.01;
 
-    return `${roundedDistance} ${roundedDistance === 1 ? singularDistanceUnit : distanceUnit} @ $${rate * 0.01} / ${singularDistanceUnit}`;
+    return `${roundedDistance} ${unitString} @ $${ratePerUnit} / ${singularDistanceUnit}`;
 };
 
 const getDistanceRequestAmount = (distance, unit, rate) => {

From 40dea40427dddecf7175d0e90ad6937a10cc934e Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 25 Aug 2023 12:17:34 -0700
Subject: [PATCH 035/109] style: use const

---
 src/CONST.js                     | 4 ++++
 src/libs/DistanceRequestUtils.js | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 878d3f858dfb..f36fc9181184 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -1099,7 +1099,11 @@ const CONST = {
     CUSTOM_UNITS: {
         NAME_DISTANCE: 'Distance',
         DISTANCE_UNIT_MILES: 'mi',
+        DISTANCE_UNIT_MILES_FULL_SINGULAR: 'mile',
+        DISTANCE_UNIT_MILES_FULL_PLURAL: 'miles',
         DISTANCE_UNIT_KILOMETERS: 'km',
+        DISTANCE_UNIT_KILOMETERS_FULL_SINGULAR: 'kilometer',
+        DISTANCE_UNIT_KILOMETERS_FULL_PLURAL: 'kilometers',
         MILEAGE_IRS_RATE: 0.655,
         DEFAULT_RATE: 'Default Rate',
     },
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 00d90e07e21b..79f4d5a3fdcf 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import CONST from '../CONST';
 
 const getDefaultMileageRate = (policy) => {
     if (!policy || !policy.customUnits) {
@@ -22,7 +23,7 @@ const getDefaultMileageRate = (policy) => {
 };
 
 function convertDistanceUnit(distanceInMeters, unit) {
-    if (typeof distanceInMeters !== 'number' || (unit !== 'mi' && unit !== 'km')) {
+    if (typeof distanceInMeters !== 'number' || (unit !== CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES && unit !== CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)) {
         throw new Error('Invalid input');
     }
 
@@ -49,8 +50,9 @@ function convertDistanceUnit(distanceInMeters, unit) {
 const getDistanceString = (distanceInMeters, unit, rate) => {
     const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
 
-    const distanceUnit = unit === 'mi' ? 'miles' : 'kilometers';
-    const singularDistanceUnit = unit === 'mi' ? 'mile' : 'kilometer';
+    const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES_FULL_PLURAL : CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS_FULL_PLURAL;
+    const singularDistanceUnit =
+        unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES_FULL_SINGULAR : CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS_FULL_SINGULAR;
     const roundedDistance = convertedDistance.toFixed(2);
     const unitString = roundedDistance === 1 ? singularDistanceUnit : distanceUnit;
     const ratePerUnit = rate * 0.01;

From c0167aaf65419540dd9b4587286c8a27a30a1985 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 25 Aug 2023 12:20:24 -0700
Subject: [PATCH 036/109] fix: use translation

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 57f3ff64f307..93587c8ddc8c 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -234,7 +234,7 @@ function MoneyRequestConfirmPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                     <HeaderWithBackButton
-                        title={isDistanceRequest ? 'Distance' : props.translate('iou.cash')}
+                        title={isDistanceRequest ? props.translate('tabSelector.distance') : props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
                     <MoneyRequestConfirmationList

From 656bec931173ec499256f362f309d31af19bf5e3 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 25 Aug 2023 13:38:22 -0700
Subject: [PATCH 037/109] fix: remove inline style

---
 src/components/ConfirmedRoute.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index fbe40c43ae73..be6d63ec75a6 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -86,11 +86,7 @@ function ConfirmedRoute({mapboxToken, transaction}) {
                     pitchEnabled={false}
                     directionCoordinates={route.geometry.coordinates}
                     directionStyle={styles.mapDirection}
-                    style={{
-                        flex: 1,
-                        borderRadius: 20,
-                        overflow: 'hidden',
-                    }}
+                    style={styles.mapView}
                     waypoints={waypointMarkers}
                     styleURL={CONST.MAPBOX_STYLE_URL}
                 />

From 66e4d1c40e5c8b7095fde82dea75a8565abf689c Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 25 Aug 2023 13:42:13 -0700
Subject: [PATCH 038/109] style: remove inline style

---
 src/components/MoneyRequestConfirmationList.js | 2 +-
 src/styles/styles.js                           | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 1acae1886fe0..511dfbfc2b97 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -373,7 +373,7 @@ function MoneyRequestConfirmationList(props) {
             footerContent={footerContent}
         >
             {props.isDistanceRequest && (
-                <View style={{margin: 20, height: 200}}>
+                <View style={styles.confirmationListMapItem}>
                     <ConfirmedRoute transactionID={props.transactionID} />
                 </View>
             )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 663570fc4d66..fb5dc15eb271 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3841,6 +3841,11 @@ const styles = {
         overflow: 'hidden',
     },
 
+    confirmationListMapItem: {
+        margin: spacing.m5,
+        height: 200,
+    },
+
     mapDirection: {
         width: 7,
         color: Colors.green,

From 8199f928377a6b22543df35972219a00b06e2848 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 10:10:14 -0700
Subject: [PATCH 039/109] fix: navigation on date

---
 src/pages/iou/MoneyRequestDatePage.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 3fcd3aba263c..b3be0a167e1c 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -14,6 +14,7 @@ import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import NewDatePicker from '../../components/NewDatePicker';
 import useLocalize from '../../hooks/useLocalize';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Onyx Props */
@@ -38,6 +39,9 @@ const propTypes = {
             threadReportID: PropTypes.string,
         }),
     }).isRequired,
+
+    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
+    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
 };
 
 const defaultProps = {
@@ -51,10 +55,11 @@ const defaultProps = {
     },
 };
 
-function MoneyRequestDatePage({iou, route}) {
+function MoneyRequestDatePage({iou, route, selectedTab}) {
     const {translate} = useLocalize();
     const iouType = lodashGet(route, 'params.iouType', '');
     const reportID = lodashGet(route, 'params.reportID', '');
+    const isDistanceRequest = selectedTab === CONST.TAB.DISTANCE;
 
     useEffect(() => {
         const moneyRequestId = `${iouType}${reportID}`;
@@ -63,10 +68,10 @@ function MoneyRequestDatePage({iou, route}) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset) {
+        if (!isDistanceRequest && (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
         }
-    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID]);
+    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID, isDistanceRequest]);
 
     function navigateBack() {
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
@@ -117,4 +122,7 @@ export default withOnyx({
     iou: {
         key: ONYXKEYS.IOU,
     },
+    selectedTab: {
+        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+    },
 })(MoneyRequestDatePage);

From 0cd7020f88d5983eb891791d0b1d40b0306a049a Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 10:15:30 -0700
Subject: [PATCH 040/109] fix: navigation on description page

---
 src/pages/iou/MoneyRequestDescriptionPage.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 2e6e459f1d96..ab175c7d2f34 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -39,6 +39,9 @@ const propTypes = {
             threadReportID: PropTypes.string,
         }),
     }).isRequired,
+
+    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
+    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
 };
 
 const defaultProps = {
@@ -51,11 +54,12 @@ const defaultProps = {
     },
 };
 
-function MoneyRequestDescriptionPage({iou, route}) {
+function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
     const {translate} = useLocalize();
     const inputRef = useRef(null);
     const iouType = lodashGet(route, 'params.iouType', '');
     const reportID = lodashGet(route, 'params.reportID', '');
+    const isDistanceRequest = selectedTab === CONST.TAB.DISTANCE;
 
     useEffect(() => {
         const moneyRequestId = `${iouType}${reportID}`;
@@ -64,10 +68,10 @@ function MoneyRequestDescriptionPage({iou, route}) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset) {
+        if (!isDistanceRequest && (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
         }
-    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID]);
+    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID, isDistanceRequest]);
 
     function navigateBack() {
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
@@ -124,4 +128,7 @@ export default withOnyx({
     iou: {
         key: ONYXKEYS.IOU,
     },
+    selectedTab: {
+        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+    },
 })(MoneyRequestDescriptionPage);

From 540b3cdbc17256b8059905c233f849e96092ff4c Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 15:35:29 -0700
Subject: [PATCH 041/109] fix: add back translation

---
 src/languages/en.js | 1 +
 src/languages/es.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/languages/en.js b/src/languages/en.js
index 08d508bd1dd6..5eb91d4c1060 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -376,6 +376,7 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Scan',
+        distance: 'Distance',
     },
     receipt: {
         upload: 'Upload receipt',
diff --git a/src/languages/es.js b/src/languages/es.js
index f6c93e344d5e..0c95c3461fce 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -375,6 +375,7 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Escanear',
+        distance: 'Distancia',
     },
     receipt: {
         upload: 'Subir recibo',

From 53be1825e9720b7020464b236c202f347e03c54b Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 16:00:16 -0700
Subject: [PATCH 042/109] fix: change url

---
 src/components/MoneyRequestConfirmationList.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 4cb56e1c8628..edf0aa8b8a9f 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -389,13 +389,7 @@ function MoneyRequestConfirmationList(props) {
                     shouldShowRightIcon={!props.isReadOnly}
                     title={formattedAmount}
                     description={translate('iou.amount')}
-                    onPress={() => {
-                        const route = props.isDistanceRequest
-                            ? ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID)
-                            : ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID);
-
-                        Navigation.navigate(route);
-                    }}
+                    onPress={() => Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))}
                     style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
                     disabled={didConfirm || props.isReadOnly}

From d65ae305722cb0de9230b00d9f85aeb501bd32fb Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 16:06:46 -0700
Subject: [PATCH 043/109] fix: navigation on money amount page

---
 src/pages/iou/steps/NewRequestAmountPage.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 7a6fcbfeb10b..65f4b66e24fe 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -57,6 +57,9 @@ const propTypes = {
         /** List of the participants */
         participants: PropTypes.arrayOf(participantPropTypes),
     }),
+
+    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
+    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
 };
 
 const defaultProps = {
@@ -71,7 +74,7 @@ const defaultProps = {
     },
 };
 
-function NewRequestAmountPage({route, iou, report}) {
+function NewRequestAmountPage({route, iou, report, selectedTab}) {
     const {translate} = useLocalize();
 
     const prevMoneyRequestID = useRef(iou.id);
@@ -81,6 +84,7 @@ function NewRequestAmountPage({route, iou, report}) {
     const reportID = lodashGet(route, 'params.reportID', '');
     const isEditing = lodashGet(route, 'path', '').includes('amount');
     const currentCurrency = lodashGet(route, 'params.currency', '');
+    const isDistanceRequest = selectedTab === CONST.TAB.DISTANCE;
 
     const currency = currentCurrency || iou.currency;
 
@@ -130,7 +134,7 @@ function NewRequestAmountPage({route, iou, report}) {
                 IOU.resetMoneyRequestInfo(moneyRequestID);
             }
 
-            if (_.isEmpty(iou.participants) || iou.amount === 0 || shouldReset) {
+            if (!isDistanceRequest && (_.isEmpty(iou.participants) || iou.amount === 0 || shouldReset)) {
                 Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
             }
         }
@@ -210,4 +214,7 @@ export default withOnyx({
     report: {
         key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
     },
+    selectedTab: {
+        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+    },
 })(NewRequestAmountPage);

From 7410a906b6b9277ca0fac7dd6c26572fff31883f Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 16:34:56 -0700
Subject: [PATCH 044/109] fix: check if distance request amount has been
 modified

---
 src/components/MoneyRequestConfirmationList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index edf0aa8b8a9f..3e995f327bf1 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -160,7 +160,7 @@ function MoneyRequestConfirmationList(props) {
     const distance = lodashGet(transaction, 'routes.route0.distance', 0);
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
-        props.isDistanceRequest ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
+        props.isDistanceRequest && props.iouAmount === 0 ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
         props.isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode,
     );
 

From f6d9144dd86b3dc7d7f25147793be47b799f7a82 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 28 Aug 2023 16:45:40 -0700
Subject: [PATCH 045/109] style: use descriptive variable name

---
 src/components/MoneyRequestConfirmationList.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 3e995f327bf1..1a3052135319 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -158,10 +158,11 @@ function MoneyRequestConfirmationList(props) {
 
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(transaction, 'routes.route0.distance', 0);
+    const isDistanceRequestAndAmountIsNotModified = props.isDistanceRequest && props.iouAmount === 0;
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
-        props.isDistanceRequest && props.iouAmount === 0 ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
-        props.isDistanceRequest ? CONST.CURRENCY.USD : props.iouCurrencyCode,
+        isDistanceRequestAndAmountIsNotModified ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
+        props.iouCurrencyCode,
     );
 
     /**

From 6665d0c67a1f550d4f4980e00bca598846f766ac Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Mon, 28 Aug 2023 18:18:37 -0700
Subject: [PATCH 046/109] WIP call create distance request

---
 .../iou/steps/MoneyRequestConfirmPage.js      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index fd9c39d4553f..bdb9ed233a97 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -162,6 +162,29 @@ function MoneyRequestConfirmPage(props) {
         [props.report, props.iou.amount, props.iou.currency, props.iou.created, props.iou.merchant, props.currentUserPersonalDetails.login, props.currentUserPersonalDetails.accountID],
     );
 
+    /**
+     * @param {Array} selectedParticipants
+     * @param {String} trimmedComment
+     * @param {File} [receipt]
+     */
+    const createDistanceRequest = useCallback(
+        (selectedParticipants, trimmedComment, receipt) => {
+            IOU.createDistanceRequest(
+                props.report,
+                props.iou.amount,
+                props.iou.currency,
+                props.iou.created,
+                props.iou.merchant,
+                props.currentUserPersonalDetails.login,
+                props.currentUserPersonalDetails.accountID,
+                selectedParticipants[0],
+                trimmedComment,
+                receipt,
+            );
+        },
+        [props.report, props.iou.amount, props.iou.currency, props.iou.created, props.iou.merchant, props.currentUserPersonalDetails.login, props.currentUserPersonalDetails.accountID],
+    );
+
     const createTransaction = useCallback(
         (selectedParticipants) => {
             const trimmedComment = props.iou.comment.trim();
@@ -201,6 +224,11 @@ function MoneyRequestConfirmPage(props) {
                 return;
             }
 
+            if (isDistanceRequest) {
+                createDistanceRequest(selectedParticipants, trimmedComment);
+                return;
+            }
+
             requestMoney(selectedParticipants, trimmedComment);
         },
         [

From 64ccf7d196f6abfde0876c9cf7e2e3b8c7ef5c0a Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Tue, 29 Aug 2023 07:59:39 -0700
Subject: [PATCH 047/109] Update params for create distance request

---
 src/libs/actions/IOU.js                       | 26 +++++++------------
 .../iou/steps/MoneyRequestConfirmPage.js      | 15 +++++------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 838214bbd98e..176813ee576f 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -44,9 +44,11 @@ Onyx.connect({
 });
 
 let userAccountID = '';
+let currentUserEmail = '';
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
+        currentUserEmail = lodashGet(val, 'email', '');
         userAccountID = lodashGet(val, 'accountID', '');
     },
 });
@@ -312,8 +314,8 @@ function buildOnyxDataForMoneyRequest(
  * @param {String} currency
  * @param {String} created
  * @param {String} merchant
- * @param {Number} payeeAccountID
- * @param {String} payeeEmail
+ * @param {Number} [payeeAccountID]
+ * @param {String} [payeeEmail]
  * @param {Object} [receipt]
  * @returns {Object} data
  * @returns {String} data.payerEmail
@@ -330,7 +332,7 @@ function buildOnyxDataForMoneyRequest(
  * @returns {Object} data.onyxData.failureData
  * @param {String} [existingTransactionID]
  */
-function getMoneyRequestInformation(report, participant, comment, amount, currency, created, merchant, payeeAccountID, payeeEmail, receipt = undefined, existingTransactionID = null) {
+function getMoneyRequestInformation(report, participant, comment, amount, currency, created, merchant, payeeAccountID = userAccountID, payeeEmail = currentUserEmail, receipt = undefined, existingTransactionID = null) {
     const payerEmail = OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login);
     const payerAccountID = Number(participant.accountID);
     const isPolicyExpenseChat = participant.isPolicyExpenseChat;
@@ -485,19 +487,13 @@ function getMoneyRequestInformation(report, participant, comment, amount, curren
  * Requests money based on a distance (eg. mileage from a map)
  *
  * @param {Object} report
- * @param {String} payeeEmail
- * @param {Number} payeeAccountID
  * @param {Object} participant
  * @param {String} comment
- * @param {Object[]} waypoints
- * @param {String} waypoints[].address required and must be non empty
- * @param {String} [waypoints[].lat] optional
- * @param {String} [waypoints[].lng] optional
  * @param {String} created
  * @param {String} [transactionID]
  */
-function createDistanceRequest(report, payeeEmail, payeeAccountID, participant, comment, waypoints, created, transactionID) {
-    const {payerEmail, iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} = getMoneyRequestInformation(
+function createDistanceRequest(report, participant, comment, created, transactionID) {
+    const {iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} = getMoneyRequestInformation(
         report,
         participant,
         comment,
@@ -505,16 +501,14 @@ function createDistanceRequest(report, payeeEmail, payeeAccountID, participant,
         'USD',
         created,
         '',
-        payeeAccountID,
-        payeeEmail,
+        null,
+        null,
         null,
         transactionID,
     );
-
     API.write(
         'CreateDistanceRequest',
         {
-            debtorEmail: payerEmail,
             comment,
             iouReportID: iouReport.reportID,
             chatReportID: chatReport.reportID,
@@ -523,7 +517,7 @@ function createDistanceRequest(report, payeeEmail, payeeAccountID, participant,
             createdChatReportActionID,
             createdIOUReportActionID,
             reportPreviewReportActionID: reportPreviewAction.reportActionID,
-            waypoints,
+            waypoints: JSON.stringify(transaction.comment.waypoints),
             created,
         },
         onyxData,
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index bdb9ed233a97..3f33d8384ac7 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -168,21 +168,16 @@ function MoneyRequestConfirmPage(props) {
      * @param {File} [receipt]
      */
     const createDistanceRequest = useCallback(
-        (selectedParticipants, trimmedComment, receipt) => {
+        (selectedParticipants, trimmedComment) => {
             IOU.createDistanceRequest(
                 props.report,
-                props.iou.amount,
-                props.iou.currency,
-                props.iou.created,
-                props.iou.merchant,
-                props.currentUserPersonalDetails.login,
-                props.currentUserPersonalDetails.accountID,
                 selectedParticipants[0],
                 trimmedComment,
-                receipt,
+                props.iou.created,
+                props.iou.transactionID,
             );
         },
-        [props.report, props.iou.amount, props.iou.currency, props.iou.created, props.iou.merchant, props.currentUserPersonalDetails.login, props.currentUserPersonalDetails.accountID],
+        [props.report, props.iou.created, props.iou.transactionID],
     );
 
     const createTransaction = useCallback(
@@ -239,7 +234,9 @@ function MoneyRequestConfirmPage(props) {
             props.iou.currency,
             props.iou.receiptPath,
             props.iou.receiptSource,
+            isDistanceRequest,
             requestMoney,
+            createDistanceRequest,
         ],
     );
 

From 61c34bdd7439f739a9a23cdc65a193dea655c909 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 10:44:57 -0700
Subject: [PATCH 048/109] fix: hide category

---
 src/components/MoneyRequestConfirmationList.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 1a3052135319..ed852ea16693 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -158,10 +158,11 @@ function MoneyRequestConfirmationList(props) {
 
     const {unit, rate} = props.mileageRate;
     const distance = lodashGet(transaction, 'routes.route0.distance', 0);
-    const isDistanceRequestAndAmountIsNotModified = props.isDistanceRequest && props.iouAmount === 0;
+    const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
+    const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
-        isDistanceRequestAndAmountIsNotModified ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
+        shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
         props.iouCurrencyCode,
     );
 
@@ -452,7 +453,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     )}
-                    {!_.isEmpty(props.policyCategories) && (
+                    {shouldCategoryEditable && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouCategory}

From 049d760e81785be0b3f5a3407d7b43ca51c61bc1 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 10:55:34 -0700
Subject: [PATCH 049/109] fix: margin

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index e0b7459ba1c6..d9cd769a46ea 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3863,7 +3863,7 @@ const styles = {
     },
 
     confirmationListMapItem: {
-        margin: spacing.m5,
+        ...spacing.m5,
         height: 200,
     },
 

From 07b704580906d8970b4c7aba7cf3d8bacb74e09f Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 11:05:48 -0700
Subject: [PATCH 050/109] style: use constants

---
 src/components/MoneyRequestConfirmationList.js | 4 ++--
 src/libs/DistanceRequestUtils.js               | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index ed852ea16693..be53c1dd9e20 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -113,7 +113,7 @@ const propTypes = {
 
     /** Unit and rate used for if the money request is a distance request */
     mileageRate: PropTypes.shape({
-        unit: PropTypes.oneOf(['mi', 'ki']),
+        unit: PropTypes.oneOf([CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS]),
         rate: PropTypes.number,
     }),
 
@@ -142,7 +142,7 @@ const defaultProps = {
     policyCategories: {},
     transactionID: '',
     transaction: {},
-    mileageRate: {unit: 'mi', rate: 0},
+    mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0},
     isDistanceRequest: false,
 };
 
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 79f4d5a3fdcf..dc4c081bf921 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -6,12 +6,12 @@ const getDefaultMileageRate = (policy) => {
         return null;
     }
 
-    const distanceUnit = _.find(_.values(policy.customUnits), (unit) => unit.name === 'Distance');
+    const distanceUnit = _.find(_.values(policy.customUnits), (unit) => unit.name === CONST.CUSTOM_UNITS.NAME_DISTANCE);
     if (!distanceUnit) {
         return null;
     }
 
-    const distanceRate = _.find(_.values(distanceUnit.rates), (rate) => rate.name === 'Default Rate');
+    const distanceRate = _.find(_.values(distanceUnit.rates), (rate) => rate.name === CONST.CUSTOM_UNITS.DEFAULT_RATE);
     if (!distanceRate) {
         return null;
     }

From ffb259722ceb1a9cf16a9934d4a85ab1d1e8987d Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 11:09:39 -0700
Subject: [PATCH 051/109] style: use common translation keyword

---
 src/components/MoneyRequestConfirmationList.js |  2 +-
 src/languages/en.js                            |  1 -
 src/languages/es.js                            |  1 -
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 10 ++--------
 4 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index be53c1dd9e20..cc1f192c1f02 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -436,7 +436,7 @@ function MoneyRequestConfirmationList(props) {
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                             title={DistanceRequestUtils.getDistanceString(distance, unit, rate)}
-                            description={translate('tabSelector.distance')}
+                            description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
                             onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID))}
diff --git a/src/languages/en.js b/src/languages/en.js
index 5eb91d4c1060..08d508bd1dd6 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -376,7 +376,6 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Scan',
-        distance: 'Distance',
     },
     receipt: {
         upload: 'Upload receipt',
diff --git a/src/languages/es.js b/src/languages/es.js
index 0c95c3461fce..f6c93e344d5e 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -375,7 +375,6 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Escanear',
-        distance: 'Distancia',
     },
     receipt: {
         upload: 'Subir recibo',
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 3f33d8384ac7..27e3246b3e82 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -169,13 +169,7 @@ function MoneyRequestConfirmPage(props) {
      */
     const createDistanceRequest = useCallback(
         (selectedParticipants, trimmedComment) => {
-            IOU.createDistanceRequest(
-                props.report,
-                selectedParticipants[0],
-                trimmedComment,
-                props.iou.created,
-                props.iou.transactionID,
-            );
+            IOU.createDistanceRequest(props.report, selectedParticipants[0], trimmedComment, props.iou.created, props.iou.transactionID);
         },
         [props.report, props.iou.created, props.iou.transactionID],
     );
@@ -273,7 +267,7 @@ function MoneyRequestConfirmPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                     <HeaderWithBackButton
-                        title={isDistanceRequest ? props.translate('tabSelector.distance') : props.translate('iou.cash')}
+                        title={isDistanceRequest ? props.translate('common.distance') : props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
                     <MoneyRequestConfirmationList

From 103a7d64f2b7dfca3193858acc90826bbfcfbfce Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 13:28:19 -0700
Subject: [PATCH 052/109] fix: hide distance request if not in workspace

---
 src/pages/iou/MoneyRequestSelectorPage.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 4cbd8db65773..1492aa5d607e 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,6 +21,7 @@ import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import participantPropTypes from '../../components/participantPropTypes';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
+import reportPropTypes from '../reportPropTypes';
 
 const propTypes = {
     /** React Navigation route */
@@ -50,6 +51,8 @@ const propTypes = {
         participants: PropTypes.arrayOf(participantPropTypes),
     }),
 
+    report: reportPropTypes,
+
     /** Which tab has been selected */
     selectedTab: PropTypes.string,
 };
@@ -62,6 +65,7 @@ const defaultProps = {
         participants: [],
     },
     selectedTab: CONST.TAB.MANUAL,
+    report: {},
 };
 
 function MoneyRequestSelectorPage(props) {
@@ -75,6 +79,7 @@ function MoneyRequestSelectorPage(props) {
         [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'),
         [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'),
     };
+    const isExpenseRequest = props.report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
 
     const resetMoneyRequestInfo = () => {
         const moneyRequestID = `${iouType}${reportID}`;
@@ -117,7 +122,7 @@ function MoneyRequestSelectorPage(props) {
                                             initialParams={{reportID, iouType}}
                                         />
                                     )}
-                                    {canUseDistanceRequests && (
+                                    {canUseDistanceRequests && isExpenseRequest && (
                                         <TopTab.Screen
                                             name={CONST.TAB.DISTANCE}
                                             component={DistanceRequestPage}
@@ -141,6 +146,9 @@ MoneyRequestSelectorPage.defaultProps = defaultProps;
 MoneyRequestSelectorPage.displayName = 'MoneyRequestSelectorPage';
 
 export default withOnyx({
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+    },
     selectedTab: {
         key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
     },

From 8eb66bd3e2af779d3ecddbb7cdd7aa8078a3cf21 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 14:20:04 -0700
Subject: [PATCH 053/109] fix: navigation issue on distance clicked

---
 src/components/MoneyRequestConfirmationList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index cc1f192c1f02..83f092f6a873 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -439,7 +439,7 @@ function MoneyRequestConfirmationList(props) {
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
-                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDistanceTabRoute(props.iouType, props.reportID))}
+                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestRoute(props.iouType, props.reportID))}
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     ) : (

From 26289e58b94a3ed106383455f71733d06d6eb1db Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 14:50:34 -0700
Subject: [PATCH 054/109] fix: make currency uneditable

---
 src/pages/iou/steps/NewRequestAmountPage.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 65f4b66e24fe..a6993fd8d67e 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -149,6 +149,12 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
     };
 
     const navigateToCurrencySelectionPage = () => {
+        // If the money request being created is a distance request, don't allow the user to choose the currency.
+        // Only USD is allowed for distance requests.
+        if (isDistanceRequest) {
+            return;
+        }
+
         // Remove query from the route and encode it.
         const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, ''));
         Navigation.navigate(ROUTES.getMoneyRequestCurrencyRoute(iouType, reportID, currency, activeRoute));

From 034131b14a2fc07e644772e5889b81d3568e3cfb Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 16:23:00 -0700
Subject: [PATCH 055/109] fix: close RHN after request save

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 27e3246b3e82..b89ec4bbf97f 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -215,6 +215,7 @@ function MoneyRequestConfirmPage(props) {
 
             if (isDistanceRequest) {
                 createDistanceRequest(selectedParticipants, trimmedComment);
+                Navigation.dismissModal();
                 return;
             }
 

From 3ab8897768f39c9b00860b1d84a3517255a65761 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 17:11:12 -0700
Subject: [PATCH 056/109] fix: reset IOU on distance request save

---
 src/libs/actions/IOU.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 176813ee576f..55201ca4092d 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -85,6 +85,7 @@ function resetMoneyRequestInfo(id = '') {
         created,
         receiptPath: '',
         receiptSource: '',
+        transactionID: '',
     });
 }
 
@@ -332,7 +333,19 @@ function buildOnyxDataForMoneyRequest(
  * @returns {Object} data.onyxData.failureData
  * @param {String} [existingTransactionID]
  */
-function getMoneyRequestInformation(report, participant, comment, amount, currency, created, merchant, payeeAccountID = userAccountID, payeeEmail = currentUserEmail, receipt = undefined, existingTransactionID = null) {
+function getMoneyRequestInformation(
+    report,
+    participant,
+    comment,
+    amount,
+    currency,
+    created,
+    merchant,
+    payeeAccountID = userAccountID,
+    payeeEmail = currentUserEmail,
+    receipt = undefined,
+    existingTransactionID = null,
+) {
     const payerEmail = OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login);
     const payerAccountID = Number(participant.accountID);
     const isPolicyExpenseChat = participant.isPolicyExpenseChat;
@@ -522,6 +535,7 @@ function createDistanceRequest(report, participant, comment, created, transactio
         },
         onyxData,
     );
+    resetMoneyRequestInfo();
 }
 
 /**

From 531461b4bcc3caf921f997539714099fafbd1aeb Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 17:36:07 -0700
Subject: [PATCH 057/109] fix: display Distance Request on global create

---
 src/pages/iou/MoneyRequestSelectorPage.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 1492aa5d607e..616de61c889c 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import React from 'react';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 import ONYXKEYS from '../../ONYXKEYS';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -79,7 +80,9 @@ function MoneyRequestSelectorPage(props) {
         [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'),
         [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'),
     };
+    const isFromGlobalCreate = _.isEmpty(props.report);
     const isExpenseRequest = props.report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
+    const shouldDisplayDistanceRequest = (canUseDistanceRequests && isExpenseRequest) || isFromGlobalCreate;
 
     const resetMoneyRequestInfo = () => {
         const moneyRequestID = `${iouType}${reportID}`;
@@ -122,7 +125,7 @@ function MoneyRequestSelectorPage(props) {
                                             initialParams={{reportID, iouType}}
                                         />
                                     )}
-                                    {canUseDistanceRequests && isExpenseRequest && (
+                                    {shouldDisplayDistanceRequest && (
                                         <TopTab.Screen
                                             name={CONST.TAB.DISTANCE}
                                             component={DistanceRequestPage}

From e93e94a033b02e15ffe70c07776389d66ef69cde Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 17:43:00 -0700
Subject: [PATCH 058/109] style: use reportID instead of report

---
 src/pages/iou/MoneyRequestSelectorPage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 616de61c889c..965f5d17139c 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -3,7 +3,6 @@ import {View} from 'react-native';
 import React from 'react';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import ONYXKEYS from '../../ONYXKEYS';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -80,7 +79,7 @@ function MoneyRequestSelectorPage(props) {
         [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'),
         [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'),
     };
-    const isFromGlobalCreate = _.isEmpty(props.report);
+    const isFromGlobalCreate = !props.route.params.reportID;
     const isExpenseRequest = props.report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
     const shouldDisplayDistanceRequest = (canUseDistanceRequests && isExpenseRequest) || isFromGlobalCreate;
 

From 031c040e11ad919bb96947c6e735e11758bc51af Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 18:28:54 -0700
Subject: [PATCH 059/109] style: fix ESLint error

---
 src/libs/actions/IOU.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 55201ca4092d..60df995f8677 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -613,7 +613,7 @@ function requestMoney(report, amount, currency, created, merchant, payeeEmail, p
  * @return {Object}
  */
 function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, existingSplitChatReportID = '') {
-    const currentUserEmail = OptionsListUtils.addSMSDomainIfPhoneNumber(currentUserLogin);
+    const currentUserEmailForIOUSplit = OptionsListUtils.addSMSDomainIfPhoneNumber(currentUserLogin);
     const participantAccountIDs = _.map(participants, (participant) => Number(participant.accountID));
     const existingSplitChatReport = existingSplitChatReportID
         ? allReports[`${ONYXKEYS.COLLECTION.REPORT}${existingSplitChatReportID}`]
@@ -638,7 +638,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
     );
 
     // Note: The created action must be optimistically generated before the IOU action so there's no chance that the created action appears after the IOU action in the chat
-    const splitCreatedReportAction = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmail);
+    const splitCreatedReportAction = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmailForIOUSplit);
     const splitIOUReportAction = ReportUtils.buildOptimisticIOUReportAction(
         CONST.IOU.REPORT_ACTION_TYPE.SPLIT,
         amount,
@@ -757,13 +757,13 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
 
     // Loop through participants creating individual chats, iouReports and reportActionIDs as needed
     const splitAmount = IOUUtils.calculateAmount(participants.length, amount, currency, false);
-    const splits = [{email: currentUserEmail, accountID: currentUserAccountID, amount: IOUUtils.calculateAmount(participants.length, amount, currency, true)}];
+    const splits = [{email: currentUserEmailForIOUSplit, accountID: currentUserAccountID, amount: IOUUtils.calculateAmount(participants.length, amount, currency, true)}];
 
     const hasMultipleParticipants = participants.length > 1;
     _.each(participants, (participant) => {
         const email = isOwnPolicyExpenseChat ? '' : OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login).toLowerCase();
         const accountID = isOwnPolicyExpenseChat ? 0 : Number(participant.accountID);
-        if (email === currentUserEmail) {
+        if (email === currentUserEmailForIOUSplit) {
             return;
         }
 
@@ -818,8 +818,8 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
         // 3. IOU action for the iouReport
         // 4. REPORTPREVIEW action for the chatReport
         // Note: The CREATED action for the IOU report must be optimistically generated before the IOU action so there's no chance that it appears after the IOU action in the chat
-        const oneOnOneCreatedActionForChat = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmail);
-        const oneOnOneCreatedActionForIOU = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmail);
+        const oneOnOneCreatedActionForChat = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmailForIOUSplit);
+        const oneOnOneCreatedActionForIOU = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmailForIOUSplit);
         const oneOnOneIOUAction = ReportUtils.buildOptimisticIOUReportAction(
             CONST.IOU.REPORT_ACTION_TYPE.CREATE,
             splitAmount,

From 35d0404041c373e03070838a09fb0f73611b6c5c Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 29 Aug 2023 18:29:46 -0700
Subject: [PATCH 060/109] fix: add missing dependency

---
 src/pages/iou/steps/NewRequestAmountPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index a6993fd8d67e..ca70c0c407b6 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -142,7 +142,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
         return () => {
             prevMoneyRequestID.current = iou.id;
         };
-    }, [iou.participants, iou.amount, iou.id, isEditing, iouType, reportID]);
+    }, [iou.participants, iou.amount, iou.id, isEditing, iouType, reportID, isDistanceRequest]);
 
     const navigateBack = () => {
         Navigation.goBack(isEditing ? ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID) : null);

From 605d1ad9d0af6ee524334149bfd3e24455623c53 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 09:31:06 -0700
Subject: [PATCH 061/109] fix: specify default tab

---
 src/pages/iou/steps/NewRequestAmountPage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index d0f679054382..b08717acd5e0 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -41,15 +41,16 @@ const propTypes = {
     report: reportPropTypes,
 
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: iouPropTypes
+    iou: iouPropTypes,
 
     /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
-    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
+    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]),
 };
 
 const defaultProps = {
     report: {},
     iou: iouDefaultProps,
+    selectedTab: CONST.TAB.MANUAL,
 };
 
 function NewRequestAmountPage({route, iou, report, selectedTab}) {

From 6000908831f2eb779855f452ef93fa87aa18cfce Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 09:40:45 -0700
Subject: [PATCH 062/109] fix: import const

---
 src/pages/iou/steps/NewRequestAmountPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index b08717acd5e0..1316169561d0 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -20,6 +20,7 @@ import styles from '../../../styles/styles';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import {iouPropTypes, iouDefaultProps} from '../propTypes';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /** React Navigation route */

From 2a1c6f85b6fec7557fc9af32c3c12b521d324338 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 09:51:26 -0700
Subject: [PATCH 063/109] fix: add default ios value

---
 src/pages/iou/MoneyRequestSelectorPage.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 178aab1b204b..a4df9e9d28ff 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -52,13 +52,14 @@ const propTypes = {
 
     /** Report on which the money request is being created */
     report: reportPropTypes,
-      
+
     /** Which tab has been selected */
     selectedTab: PropTypes.string,
 };
 
 const defaultProps = {
     selectedTab: CONST.TAB.MANUAL,
+    iou: {},
     report: {},
 };
 

From 151c98e785d96a375d8ab92ea098b6c9b5965775 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 09:55:08 -0700
Subject: [PATCH 064/109] style: use const for map padding

---
 src/CONST.ts                      | 2 ++
 src/components/ConfirmedRoute.js  | 4 +---
 src/components/DistanceRequest.js | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 67ce055df3f1..e904421dcc25 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1367,6 +1367,8 @@ const CONST = {
         MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects',
     },
 
+    MAP_PADDING: 50,
+
     QUICK_REACTIONS: [
         {
             name: '+1',
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index be6d63ec75a6..810b8769b42e 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -16,8 +16,6 @@ import BlockingView from './BlockingViews/BlockingView';
 import useNetwork from '../hooks/useNetwork';
 import useLocalize from '../hooks/useLocalize';
 
-const MAP_PADDING = 50;
-
 const propTypes = {
     /** Transaction that stores the distance request data */
     transaction: transactionPropTypes,
@@ -82,7 +80,7 @@ function ConfirmedRoute({mapboxToken, transaction}) {
             {!isOffline && mapboxToken ? (
                 <MapView
                     accessToken={mapboxToken}
-                    mapPadding={MAP_PADDING}
+                    mapPadding={CONST.MAP_PADDING}
                     pitchEnabled={false}
                     directionCoordinates={route.geometry.coordinates}
                     directionStyle={styles.mapDirection}
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index dbb92cc88d9c..bd578ecd76e3 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -33,7 +33,6 @@ import usePrevious from '../hooks/usePrevious';
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
 
-const MAP_PADDING = 50;
 const DEFAULT_ZOOM_LEVEL = 10;
 
 const propTypes = {
@@ -229,7 +228,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 {!isOffline && Boolean(mapboxAccessToken.token) ? (
                     <MapView
                         accessToken={mapboxAccessToken.token}
-                        mapPadding={MAP_PADDING}
+                        mapPadding={CONST.MAP_PADDING}
                         pitchEnabled={false}
                         initialState={{
                             location: CONST.SF_COORDINATES,

From d4d70d23b888067f54d625d827e4cdafef9a9351 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:05:49 -0700
Subject: [PATCH 065/109] fix: move display language form const to en/es

---
 src/CONST.ts                                   | 4 ----
 src/components/MoneyRequestConfirmationList.js | 2 +-
 src/languages/en.js                            | 4 ++++
 src/languages/es.js                            | 4 ++++
 src/libs/DistanceRequestUtils.js               | 8 ++++----
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index e904421dcc25..17388044da9b 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1101,11 +1101,7 @@ const CONST = {
     CUSTOM_UNITS: {
         NAME_DISTANCE: 'Distance',
         DISTANCE_UNIT_MILES: 'mi',
-        DISTANCE_UNIT_MILES_FULL_SINGULAR: 'mile',
-        DISTANCE_UNIT_MILES_FULL_PLURAL: 'miles',
         DISTANCE_UNIT_KILOMETERS: 'km',
-        DISTANCE_UNIT_KILOMETERS_FULL_SINGULAR: 'kilometer',
-        DISTANCE_UNIT_KILOMETERS_FULL_PLURAL: 'kilometers',
         MILEAGE_IRS_RATE: 0.655,
         DEFAULT_RATE: 'Default Rate',
     },
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index deaddd28fdc9..a1f26f649c33 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -162,7 +162,7 @@ function MoneyRequestConfirmationList(props) {
     const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
-        shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
+        shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate, translate) : props.iouAmount,
         props.iouCurrencyCode,
     );
 
diff --git a/src/languages/en.js b/src/languages/en.js
index e36cb9539b73..721fc676a3b0 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -161,6 +161,10 @@ export default {
         receipt: 'Receipt',
         replace: 'Replace',
         distance: 'Distance',
+        mile: 'mile',
+        miles: 'miles',
+        kilometer: 'kilometer',
+        kilometers: 'kilometers',
     },
     anonymousReportFooter: {
         logoTagline: 'Join the discussion.',
diff --git a/src/languages/es.js b/src/languages/es.js
index aee7351f0067..2099133acb26 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1228,6 +1228,10 @@ export default {
             memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro al espacio de trabajo, por favor, utiliza el botón Invitar que está arriba.',
             notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda añadirte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}) => `Ir a la sala ${roomName}`,
+            mile: 'milla',
+            miles: 'millas',
+            kilometer: 'kilómetro',
+            kilometers: 'kilómetros',
         },
         emptyWorkspace: {
             title: 'Crear un nuevo espacio de trabajo',
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index dc4c081bf921..4fde9be90066 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -45,14 +45,14 @@ function convertDistanceUnit(distanceInMeters, unit) {
  * @param {number} distanceInMeters Distance traveled
  * @param {('mi' | 'ki')} unit Unit that should be used to display the distance
  * @param {number} rate Expensable amount allowed per unit
+ * @param {function} translate Translate function
  * @returns {string} A string that describes the distance travled and the rate used for expense calculation
  */
-const getDistanceString = (distanceInMeters, unit, rate) => {
+const getDistanceString = (distanceInMeters, unit, rate, translate) => {
     const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
 
-    const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES_FULL_PLURAL : CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS_FULL_PLURAL;
-    const singularDistanceUnit =
-        unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES_FULL_SINGULAR : CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS_FULL_SINGULAR;
+    const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.miles') : translate('common.kilometers');
+    const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer');
     const roundedDistance = convertedDistance.toFixed(2);
     const unitString = roundedDistance === 1 ? singularDistanceUnit : distanceUnit;
     const ratePerUnit = rate * 0.01;

From d7ab6407544a5a6162e42c7474c80e7cad8b28e7 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:09:18 -0700
Subject: [PATCH 066/109] refactor: use common translation

---
 src/languages/en.js                                       | 1 -
 src/languages/es.js                                       | 1 -
 src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 721fc676a3b0..f7a045808b4e 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1249,7 +1249,6 @@ export default {
             captureReceipts: 'Capture receipts',
             fastReimbursementsHappyMembers: 'Fast reimbursements = happy members!',
             kilometers: 'Kilometers',
-            miles: 'Miles',
             viewAllReceipts: 'View all receipts',
             reimburseReceipts: 'Reimburse receipts',
             trackDistance: 'Track distance',
diff --git a/src/languages/es.js b/src/languages/es.js
index 2099133acb26..e1465ead4670 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1275,7 +1275,6 @@ export default {
             captureReceipts: 'Captura recibos',
             fastReimbursementsHappyMembers: '¡Reembolsos rápidos = miembros felices!',
             kilometers: 'Kilómetros',
-            miles: 'Millas',
             viewAllReceipts: 'Ver todos los recibos',
             reimburseReceipts: 'Reembolsar recibos',
             trackDistance: 'Medir distancia',
diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
index 5a150c2c4eb2..e72b02e18696 100644
--- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
+++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
@@ -42,7 +42,7 @@ class WorkspaceRateAndUnitPage extends React.Component {
     getUnitItems() {
         return [
             {label: this.props.translate('workspace.reimburse.kilometers'), value: CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS},
-            {label: this.props.translate('workspace.reimburse.miles'), value: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES},
+            {label: this.props.translate('common.miles'), value: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES},
         ];
     }
 

From 4aacd97e7695e948a9f68c5b52bd9c1642f6632b Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:38:08 -0700
Subject: [PATCH 067/109] fix: import missing module

---
 src/pages/iou/MoneyRequestSelectorPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index a4df9e9d28ff..1744c7b58621 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,6 +21,7 @@ import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
+import participantPropTypes from '../../components/participantPropTypes';
 
 const propTypes = {
     /** React Navigation route */

From ab9de255c0ae00445ff4c6b9d7ead9c3580bf566 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:38:53 -0700
Subject: [PATCH 068/109] style: use const for marker size

---
 src/CONST.ts                      | 1 +
 src/components/ConfirmedRoute.js  | 4 ++--
 src/components/DistanceRequest.js | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 17388044da9b..19776a47a676 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1364,6 +1364,7 @@ const CONST = {
     },
 
     MAP_PADDING: 50,
+    MAP_MARKER_SIZE: 20,
 
     QUICK_REACTIONS: [
         {
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 810b8769b42e..e3c4b6e91d89 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -52,8 +52,8 @@ const getWaypointMarkers = (waypoints) => {
                 coordinate: [waypoint.lng, waypoint.lat],
                 markerComponent: () => (
                     <MarkerComponent
-                        width={20}
-                        height={20}
+                        width={CONST.MAP_MARKER_SIZE}
+                        height={CONST.MAP_MARKER_SIZE}
                         fill={theme.icon}
                     />
                 ),
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index bd578ecd76e3..9cbea2c4c3ab 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -114,8 +114,8 @@ function DistanceRequest({iou, iouType, report, 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}
                     />
                 ),

From 4533e8b14271dea58e7f21bf20cfbcd699ed62b8 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:41:04 -0700
Subject: [PATCH 069/109] fix: remove unnecessary ternary

---
 src/components/ConfirmedRoute.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index e3c4b6e91d89..960279758dde 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -108,7 +108,7 @@ export default withOnyx({
     },
     mapboxToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-        selector: (mapboxAccessToken) => (mapboxAccessToken ? mapboxAccessToken.token : ''),
+        selector: (mapboxAccessToken) => mapboxAccessToken.token,
     },
 })(ConfirmedRoute);
 

From bdc404d6bde0782418129c7fcaca3bfe43751fe3 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:41:31 -0700
Subject: [PATCH 070/109] fix: component name

---
 src/components/ConfirmedRoute.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 960279758dde..be7827169036 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -112,6 +112,6 @@ export default withOnyx({
     },
 })(ConfirmedRoute);
 
-ConfirmedRoute.displayName = 'MoneyRequestConfirmPage';
+ConfirmedRoute.displayName = 'ConfirmedRoute';
 ConfirmedRoute.propTypes = propTypes;
 ConfirmedRoute.defaultProps = defaultProps;

From f9dee214ad722ab1c2bce0fe606fd2d3a63301a2 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:42:42 -0700
Subject: [PATCH 071/109] style: use defined prop type

---
 src/components/DistanceRequest.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 9cbea2c4c3ab..1b4c5e0a1f2c 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -29,6 +29,7 @@ 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;
@@ -37,13 +38,7 @@ const DEFAULT_ZOOM_LEVEL = 10;
 
 const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: PropTypes.shape({
-        id: PropTypes.string,
-        amount: PropTypes.number,
-        currency: PropTypes.string,
-        participants: PropTypes.arrayOf(participantPropTypes),
-        transactionID: PropTypes.string,
-    }),
+    iou: iouPropTypes,
 
     /** Type of money request (i.e. IOU) */
     iouType: PropTypes.string,

From 8e646202e6339d39ce501d195d762f460883015e Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:46:26 -0700
Subject: [PATCH 072/109] fix: use enum type

---
 src/components/DistanceRequest.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 1b4c5e0a1f2c..f2b7e1f0cddc 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -41,7 +41,7 @@ const propTypes = {
     iou: iouPropTypes,
 
     /** Type of money request (i.e. IOU) */
-    iouType: PropTypes.string,
+    iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)),
 
     /** The report to with which the distance request is associated */
     report: reportPropTypes,

From febe630172e433fe405d24923b2f1294ecea6b7d Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:48:00 -0700
Subject: [PATCH 073/109] fix: change a prop default value

---
 src/components/DistanceRequest.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index f2b7e1f0cddc..828c41bbc944 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -60,12 +60,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    iou: {
-        id: '',
-        amount: 0,
-        currency: CONST.CURRENCY.USD,
-        participants: [],
-    },
+    iou: {},
     iouType: '',
     report: {},
     transaction: {},

From 2a9c10069d1f63d3668f2c72cdfcccc9ffb2e783 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:50:15 -0700
Subject: [PATCH 074/109] fix: add comment for prop values

---
 src/components/MoneyRequestConfirmationList.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index a1f26f649c33..ab2a829d1e2b 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -113,7 +113,9 @@ const propTypes = {
 
     /** Unit and rate used for if the money request is a distance request */
     mileageRate: PropTypes.shape({
+        /** Unit used to represent distance */
         unit: PropTypes.oneOf([CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS]),
+        /** Rate used to calculate the distance request amount */
         rate: PropTypes.number,
     }),
 

From 557d58ac5b91736d5d53f1e023f809a85d336b0e Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:54:54 -0700
Subject: [PATCH 075/109] doc: add jsdoc

---
 src/libs/DistanceRequestUtils.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 4fde9be90066..5c44ac8c9523 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -1,6 +1,18 @@
 import _ from 'underscore';
 import CONST from '../CONST';
 
+/**
+ * Retrieves the default mileage rate based on a given policy.
+ *
+ * @param {Object} policy - The policy from which to extract the default mileage rate.
+ * @param {Object} [policy.customUnits] - Custom units defined in the policy.
+ * @param {Object[]} [policy.customUnits.rates] - Rates used int the policy.
+ * @param {Object} [policy.customUnits.attributes] - attributes on a custom unit
+ *
+ * @returns {Object|null} An object containing the rate and unit for the default mileage or null if not found.
+ * @returns {number} .rate - The default rate for the mileage.
+ * @returns {string} .unit - The unit of measurement for the distance.
+ */
 const getDefaultMileageRate = (policy) => {
     if (!policy || !policy.customUnits) {
         return null;

From 82c9f70362e8d78ae02233f5e6e9a35f990c9da0 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 10:57:13 -0700
Subject: [PATCH 076/109] doc: add jsdoc for convertDistanceUnit

---
 src/libs/DistanceRequestUtils.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 5c44ac8c9523..f24061f4f2f8 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -34,6 +34,16 @@ const getDefaultMileageRate = (policy) => {
     };
 };
 
+/**
+ * Converts a given distance in meters to the specified unit (kilometers or miles).
+ *
+ * @param {number} distanceInMeters - The distance in meters to be converted.
+ * @param {string} unit - The desired unit of conversion, either 'km' for kilometers or 'mi' for miles.
+ *
+ * @returns {number} The converted distance in the specified unit.
+ *
+ * @throws {Error} Throws an error if the input is invalid or if the unit is unsupported.
+ */
 function convertDistanceUnit(distanceInMeters, unit) {
     if (typeof distanceInMeters !== 'number' || (unit !== CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES && unit !== CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)) {
         throw new Error('Invalid input');

From da8c84e1003af398748e11a40dea9efa106984de Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:11:26 -0700
Subject: [PATCH 077/109] style: cleanup convertDistanceUnit

---
 src/libs/DistanceRequestUtils.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index f24061f4f2f8..97f087015b21 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -41,21 +41,15 @@ const getDefaultMileageRate = (policy) => {
  * @param {string} unit - The desired unit of conversion, either 'km' for kilometers or 'mi' for miles.
  *
  * @returns {number} The converted distance in the specified unit.
- *
- * @throws {Error} Throws an error if the input is invalid or if the unit is unsupported.
  */
 function convertDistanceUnit(distanceInMeters, unit) {
-    if (typeof distanceInMeters !== 'number' || (unit !== CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES && unit !== CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)) {
-        throw new Error('Invalid input');
-    }
-
     const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
     const METERS_TO_MILES = 0.000621371; // There are approximately 0.000621371 miles in a meter
 
     switch (unit) {
-        case 'km':
+        case CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS:
             return distanceInMeters * METERS_TO_KM;
-        case 'mi':
+        case CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES:
             return distanceInMeters * METERS_TO_MILES;
         default:
             throw new Error('Unsupported unit. Supported units are "mi" or "km".');

From 9a902584b1311de5fa207d267900d8ea70e66712 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:11:47 -0700
Subject: [PATCH 078/109] style: reuse existing propType

---
 src/pages/iou/DistanceRequestPage.js | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index d71c5d5e437c..59f9e42d3d58 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -7,26 +7,11 @@ import ONYXKEYS from '../../ONYXKEYS';
 import DistanceRequest from '../../components/DistanceRequest';
 import reportPropTypes from '../reportPropTypes';
 import CONST from '../../CONST';
+import {iouPropTypes} from './propTypes';
 
 const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: PropTypes.shape({
-        id: PropTypes.string,
-        amount: PropTypes.number,
-        currency: PropTypes.string,
-        merchant: PropTypes.string,
-        created: PropTypes.string,
-        participants: PropTypes.arrayOf(
-            PropTypes.shape({
-                accountID: PropTypes.number,
-                login: PropTypes.string,
-                isPolicyExpenseChat: PropTypes.bool,
-                isOwnPolicyExpenseChat: PropTypes.bool,
-                selected: PropTypes.bool,
-            }),
-        ),
-        transactionID: PropTypes.string,
-    }),
+    iou: iouPropTypes,
 
     /** The report on which the request is initiated on */
     report: reportPropTypes,

From b1b5aeabc66ee276b67f278af1fe03540cfdc11f Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:15:32 -0700
Subject: [PATCH 079/109] style: cleanup selector page

---
 src/pages/iou/MoneyRequestSelectorPage.js | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 1744c7b58621..58d0b4b34f52 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,7 +21,7 @@ import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
-import participantPropTypes from '../../components/participantPropTypes';
+import {iouPropTypes} from './propTypes';
 
 const propTypes = {
     /** React Navigation route */
@@ -37,19 +37,7 @@ const propTypes = {
     }).isRequired,
 
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: PropTypes.shape({
-        /** ID (iouType + reportID) of the request */
-        id: PropTypes.string,
-
-        /** Amount of the request */
-        amount: PropTypes.number,
-
-        /** Currency of the request */
-        currency: PropTypes.string,
-
-        /** List of the participants */
-        participants: PropTypes.arrayOf(participantPropTypes),
-    }),
+    iou: iouPropTypes,
 
     /** Report on which the money request is being created */
     report: reportPropTypes,

From ea1828fc049d5021153bd7b9beebfd818eb7e4fd Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:26:05 -0700
Subject: [PATCH 080/109] fix: remove comment

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 4f7e23ba343a..20391bf4a898 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -94,7 +94,6 @@ function MoneyRequestConfirmPage(props) {
         }
 
         if (_.isEmpty(props.iou.participants) || shouldReset) {
-            // if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), true);
         }
 

From a4ef2ce7db169f35c46246d414e4f7e408a942d8 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:26:37 -0700
Subject: [PATCH 081/109] style: clean up prop types and default props

---
 src/pages/iou/DistanceRequestPage.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index 59f9e42d3d58..e1b3253270d4 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -18,22 +18,18 @@ const propTypes = {
 
     /** Passed from the navigator */
     route: PropTypes.shape({
+        /** Parameters the route gets */
         params: PropTypes.shape({
-            iouType: PropTypes.string,
+            /** Type of IOU */
+            iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)),
+            /** Id of the report on which the distance request is being created */
             reportID: PropTypes.string,
         }),
     }),
 };
 
 const defaultProps = {
-    iou: {
-        id: '',
-        amount: 0,
-        created: '',
-        merchant: '',
-        currency: CONST.CURRENCY.USD,
-        participants: [],
-    },
+    iou: {},
     report: {},
     route: {
         params: {

From edf051c90cac02814f1c42f156e6030abc93cc21 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:34:56 -0700
Subject: [PATCH 082/109] fix: change Spanish translation to the correct place

---
 src/languages/es.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index e1465ead4670..b8cb04bd7e45 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -160,6 +160,10 @@ export default {
         receipt: 'Recibo',
         replace: 'Sustituir',
         distance: 'Distancia',
+        mile: 'milla',
+        miles: 'millas',
+        kilometer: 'kilómetro',
+        kilometers: 'kilómetros',
     },
     anonymousReportFooter: {
         logoTagline: 'Únete a la discusión.',
@@ -1228,10 +1232,6 @@ export default {
             memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro al espacio de trabajo, por favor, utiliza el botón Invitar que está arriba.',
             notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda añadirte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}) => `Ir a la sala ${roomName}`,
-            mile: 'milla',
-            miles: 'millas',
-            kilometer: 'kilómetro',
-            kilometers: 'kilómetros',
         },
         emptyWorkspace: {
             title: 'Crear un nuevo espacio de trabajo',

From 01877bfcc3764a5544608e06d6dc576f69b2d671 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:49:39 -0700
Subject: [PATCH 083/109] fix: ESLint errors

---
 src/components/DistanceRequest.js         | 1 -
 src/pages/iou/DistanceRequestPage.js      | 1 +
 src/pages/iou/MoneyRequestSelectorPage.js | 4 ----
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 828c41bbc944..d317b342f1c4 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -23,7 +23,6 @@ import useLocalize from '../hooks/useLocalize';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import * as IOU from '../libs/actions/IOU';
-import participantPropTypes from './participantPropTypes';
 import reportPropTypes from '../pages/reportPropTypes';
 import transactionPropTypes from './transactionPropTypes';
 import DotIndicatorMessage from './DotIndicatorMessage';
diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index e1b3253270d4..656154c91b6e 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -8,6 +8,7 @@ import DistanceRequest from '../../components/DistanceRequest';
 import reportPropTypes from '../reportPropTypes';
 import CONST from '../../CONST';
 import {iouPropTypes} from './propTypes';
+import _ from 'underscore';
 
 const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 58d0b4b34f52..388b56c375ff 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -36,9 +36,6 @@ const propTypes = {
         }),
     }).isRequired,
 
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: iouPropTypes,
-
     /** Report on which the money request is being created */
     report: reportPropTypes,
 
@@ -48,7 +45,6 @@ const propTypes = {
 
 const defaultProps = {
     selectedTab: CONST.TAB.MANUAL,
-    iou: {},
     report: {},
 };
 

From c50ad590fc46938540aeb0ad24b5d72315db2b55 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 11:57:03 -0700
Subject: [PATCH 084/109] fix: additional ESLint rules

---
 src/pages/iou/DistanceRequestPage.js      | 2 +-
 src/pages/iou/MoneyRequestSelectorPage.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/DistanceRequestPage.js
index 656154c91b6e..d6eae999e2dc 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/DistanceRequestPage.js
@@ -2,13 +2,13 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import * as IOU from '../../libs/actions/IOU';
 import ONYXKEYS from '../../ONYXKEYS';
 import DistanceRequest from '../../components/DistanceRequest';
 import reportPropTypes from '../reportPropTypes';
 import CONST from '../../CONST';
 import {iouPropTypes} from './propTypes';
-import _ from 'underscore';
 
 const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 388b56c375ff..8e2df9f8a34e 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,7 +21,6 @@ import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
-import {iouPropTypes} from './propTypes';
 
 const propTypes = {
     /** React Navigation route */

From fe1c4296b91a2cae390d39885a97bd643602b8e3 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 12:17:26 -0700
Subject: [PATCH 085/109] fix: pass missing parameter

---
 src/components/MoneyRequestConfirmationList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index ab2a829d1e2b..295ff9914cb6 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -164,7 +164,7 @@ function MoneyRequestConfirmationList(props) {
     const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
-        shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate, translate) : props.iouAmount,
+        shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
         props.iouCurrencyCode,
     );
 
@@ -438,7 +438,7 @@ function MoneyRequestConfirmationList(props) {
                     {props.isDistanceRequest ? (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                            title={DistanceRequestUtils.getDistanceString(distance, unit, rate)}
+                            title={DistanceRequestUtils.getDistanceString(distance, unit, rate, translate)}
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}

From 471b017ebce33f5883d2a8dd5f2970fc876611c7 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 14:20:28 -0700
Subject: [PATCH 086/109] fix: account for null

---
 src/components/ConfirmedRoute.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index be7827169036..2793e5093657 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -108,7 +108,7 @@ export default withOnyx({
     },
     mapboxToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-        selector: (mapboxAccessToken) => mapboxAccessToken.token,
+        selector: (mapboxAccessToken) => (mapboxAccessToken ? mapboxAccessToken.token : ''),
     },
 })(ConfirmedRoute);
 

From 8f286037e535452455784e1084d3c529da1fb336 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 17:33:03 -0700
Subject: [PATCH 087/109] fix: don't set report

---
 .../MoneyRequestParticipantsPage.js                         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 7a61edb45a9c..e515467ebb76 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -104,11 +104,7 @@ function MoneyRequestParticipantsPage(props) {
                     ) : (
                         <MoneyRequestParticipantsSelector
                             onStepComplete={navigateToNextStep}
-                            onAddParticipants={(participants) => {
-                                const [participant] = participants;
-                                reportID.current = participant ? participant.reportID : '';
-                                IOU.setMoneyRequestParticipants(participants);
-                            }}
+                            onAddParticipants={IOU.setMoneyRequestParticipants}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                             iouType={iouType.current}
                             isDistanceRequest={isDistanceRequest}

From c3d1be318616e6b605e995c7f2763666bd9c54f0 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 18:22:01 -0700
Subject: [PATCH 088/109] fix: pass empty string if reportID is undefined

---
 src/components/DistanceRequest.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index d317b342f1c4..b84d6078fa0a 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -73,6 +73,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
+    const reportID = lodashGet(report, 'reportID', '');
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const numberOfWaypoints = _.size(waypoints);
 
@@ -243,7 +244,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
             <Button
                 success
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
-                onPress={() => IOU.navigateToNextPage(iou, iouType, report.reportID, report)}
+                onPress={() => IOU.navigateToNextPage(iou, iouType, reportID, report)}
                 pressOnEnter
                 isDisabled={waypointMarkers.length < 2}
                 text={translate('common.next')}

From a2d946d38f92b8c623b173c3bef71456932f4e54 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 30 Aug 2023 18:57:55 -0700
Subject: [PATCH 089/109] fix: get report id of workspace

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 20391bf4a898..d25f21608ec4 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -292,12 +292,20 @@ export default compose(
     withCurrentUserPersonalDetails,
     withLocalize,
     withOnyx({
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
-        },
         iou: {
             key: ONYXKEYS.IOU,
         },
+    }),
+    withOnyx({
+        report: {
+            key: ({route, iou}) => {
+                let reportID = lodashGet(route, 'params.reportID', '');
+                if (!reportID) {
+                    reportID = lodashGet(iou, 'participants.0.reportID', '');
+                }
+                return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
+            },
+        },
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },

From b5689b6f0c438eb5f4b88a33eea05513bfdc8e89 Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Wed, 30 Aug 2023 19:57:56 -0700
Subject: [PATCH 090/109] Use goBack function to prevent modal closing

---
 src/pages/iou/IOUCurrencySelection.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index caf008939519..dca8c1de1f02 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -84,7 +84,7 @@ function IOUCurrencySelection(props) {
             if (_.isEmpty(backTo) || props.navigation.getState().routes.length === 1) {
                 Navigation.goBack();
             } else {
-                Navigation.navigate(`${props.route.params.backTo}?currency=${option.currencyCode}`);
+                Navigation.goBack(`${props.route.params.backTo}?currency=${option.currencyCode}`);
             }
         },
         [props.route, props.navigation],

From 470c54a37f80f4b9782b3d48b55394cd107d4d2a Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Wed, 30 Aug 2023 20:05:21 -0700
Subject: [PATCH 091/109] Enforce goBack route so that currency is set

---
 src/pages/iou/IOUCurrencySelection.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index dca8c1de1f02..d5d3ae8541df 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -84,7 +84,7 @@ function IOUCurrencySelection(props) {
             if (_.isEmpty(backTo) || props.navigation.getState().routes.length === 1) {
                 Navigation.goBack();
             } else {
-                Navigation.goBack(`${props.route.params.backTo}?currency=${option.currencyCode}`);
+                Navigation.goBack(`${props.route.params.backTo}?currency=${option.currencyCode}`, true);
             }
         },
         [props.route, props.navigation],

From a8a102e95d31c7e31e95951f9e5e109fcfc02d68 Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Wed, 30 Aug 2023 21:58:30 -0700
Subject: [PATCH 092/109] Remove extra dismiss modal call

---
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index d25f21608ec4..88fd59edb19c 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -188,7 +188,6 @@ function MoneyRequestConfirmPage(props) {
 
             if (isDistanceRequest) {
                 createDistanceRequest(selectedParticipants, trimmedComment);
-                Navigation.dismissModal();
                 return;
             }
 

From 46437d70729ce057453906a0592ff427cdbabfc1 Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Wed, 30 Aug 2023 22:16:35 -0700
Subject: [PATCH 093/109] Don't reset request to fix small screen dismiss

---
 src/libs/actions/IOU.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 6fc2e653e038..59877c6e06ce 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -535,7 +535,8 @@ function createDistanceRequest(report, participant, comment, created, transactio
         },
         onyxData,
     );
-    resetMoneyRequestInfo();
+    Navigation.dismissModal(chatReport.reportID);
+    Report.notifyNewAction(chatReport.reportID, userAccountID);
 }
 
 /**

From de56adf57cbab7006b42ae2d1973bda0597c1f31 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 10:46:58 -0700
Subject: [PATCH 094/109] fix: address code review

---
 src/components/ConfirmedRoute.js              |  2 +-
 .../MoneyRequestConfirmationList.js           |  2 +-
 src/libs/DistanceRequestUtils.js              | 31 ++++++++++++-------
 .../iou/steps/MoneyRequestConfirmPage.js      |  3 +-
 src/pages/iou/steps/NewRequestAmountPage.js   |  8 ++---
 5 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 2793e5093657..f34252430616 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -108,7 +108,7 @@ export default withOnyx({
     },
     mapboxToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-        selector: (mapboxAccessToken) => (mapboxAccessToken ? mapboxAccessToken.token : ''),
+        selector: (mapboxAccessToken) => mapboxAccessToken && mapboxAccessToken.token,
     },
 })(ConfirmedRoute);
 
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 295ff9914cb6..1a4d465cb561 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -486,7 +486,7 @@ export default compose(
         },
         mileageRate: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            selector: (policy) => DistanceRequestUtils.getDefaultMileageRate(policy),
+            selector: DistanceRequestUtils.getDefaultMileageRate,
         },
         transaction: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 97f087015b21..2854e0a31de7 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -6,12 +6,13 @@ import CONST from '../CONST';
  *
  * @param {Object} policy - The policy from which to extract the default mileage rate.
  * @param {Object} [policy.customUnits] - Custom units defined in the policy.
- * @param {Object[]} [policy.customUnits.rates] - Rates used int the policy.
+ * @param {Object[]} [policy.customUnits.rates] - Rates used in the policy.
  * @param {Object} [policy.customUnits.attributes] - attributes on a custom unit
+ * @param {'mi' | 'ki'} [policy.customUnits.attributes.unit] - unit of measurement for the distance
  *
  * @returns {Object|null} An object containing the rate and unit for the default mileage or null if not found.
- * @returns {number} .rate - The default rate for the mileage.
- * @returns {string} .unit - The unit of measurement for the distance.
+ * @returns {Number} .rate - The default rate for the mileage.
+ * @returns {String} .unit - The unit of measurement for the distance.
  */
 const getDefaultMileageRate = (policy) => {
     if (!policy || !policy.customUnits) {
@@ -37,10 +38,10 @@ const getDefaultMileageRate = (policy) => {
 /**
  * Converts a given distance in meters to the specified unit (kilometers or miles).
  *
- * @param {number} distanceInMeters - The distance in meters to be converted.
- * @param {string} unit - The desired unit of conversion, either 'km' for kilometers or 'mi' for miles.
+ * @param {Number} distanceInMeters - The distance in meters to be converted.
+ * @param {'mi' | 'ki'} unit - The desired unit of conversion, either 'km' for kilometers or 'mi' for miles.
  *
- * @returns {number} The converted distance in the specified unit.
+ * @returns {Number} The converted distance in the specified unit.
  */
 function convertDistanceUnit(distanceInMeters, unit) {
     const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
@@ -58,11 +59,11 @@ function convertDistanceUnit(distanceInMeters, unit) {
 
 /**
  *
- * @param {number} distanceInMeters Distance traveled
- * @param {('mi' | 'ki')} unit Unit that should be used to display the distance
- * @param {number} rate Expensable amount allowed per unit
- * @param {function} translate Translate function
- * @returns {string} A string that describes the distance travled and the rate used for expense calculation
+ * @param {Number} distanceInMeters Distance traveled
+ * @param {'mi' | 'ki'} unit Unit that should be used to display the distance
+ * @param {Number} rate Expensable amount allowed per unit
+ * @param {Function} translate Translate function
+ * @returns {String} A string that describes the distance travled and the rate used for expense calculation
  */
 const getDistanceString = (distanceInMeters, unit, rate, translate) => {
     const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
@@ -76,6 +77,14 @@ const getDistanceString = (distanceInMeters, unit, rate, translate) => {
     return `${roundedDistance} ${unitString} @ $${ratePerUnit} / ${singularDistanceUnit}`;
 };
 
+/**
+ * Calculates the request amount based on distance, unit, and rate.
+ *
+ * @param {Number} distance - The distance traveled in meters
+ * @param {'mi' | 'ki'} unit - The unit of measurement for the distance
+ * @param {Number} rate - Rate used for calculating the request amount
+ * @returns {Number} The computed request amount.
+ */
 const getDistanceRequestAmount = (distance, unit, rate) => {
     const convertedDistance = convertDistanceUnit(distance, unit);
     return convertedDistance * rate;
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 88fd59edb19c..0c3c8b40e6fe 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -138,7 +138,6 @@ function MoneyRequestConfirmPage(props) {
     /**
      * @param {Array} selectedParticipants
      * @param {String} trimmedComment
-     * @param {File} [receipt]
      */
     const createDistanceRequest = useCallback(
         (selectedParticipants, trimmedComment) => {
@@ -300,6 +299,8 @@ export default compose(
             key: ({route, iou}) => {
                 let reportID = lodashGet(route, 'params.reportID', '');
                 if (!reportID) {
+                    // When the money request creation flow is initialized on Global Create, the reportID is not passed as a navigation parameter.
+                    // Get the report id from the participants list on the IOU object stored in Onyx.
                     reportID = lodashGet(iou, 'participants.0.reportID', '');
                 }
                 return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 1316169561d0..fbe8fd92b09c 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -64,7 +64,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
     const reportID = lodashGet(route, 'params.reportID', '');
     const isEditing = lodashGet(route, 'path', '').includes('amount');
     const currentCurrency = lodashGet(route, 'params.currency', '');
-    const isDistanceRequest = selectedTab === CONST.TAB.DISTANCE;
+    const isDistanceRequestTab = selectedTab === CONST.TAB.DISTANCE;
 
     const currency = currentCurrency || iou.currency;
 
@@ -114,7 +114,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
                 IOU.resetMoneyRequestInfo(moneyRequestID);
             }
 
-            if (!isDistanceRequest && (_.isEmpty(iou.participants) || iou.amount === 0 || shouldReset)) {
+            if (!isDistanceRequestTab && (_.isEmpty(iou.participants) || iou.amount === 0 || shouldReset)) {
                 Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
             }
         }
@@ -122,7 +122,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
         return () => {
             prevMoneyRequestID.current = iou.id;
         };
-    }, [iou.participants, iou.amount, iou.id, isEditing, iouType, reportID, isDistanceRequest]);
+    }, [iou.participants, iou.amount, iou.id, isEditing, iouType, reportID, isDistanceRequestTab]);
 
     const navigateBack = () => {
         Navigation.goBack(isEditing ? ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID) : null);
@@ -131,7 +131,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
     const navigateToCurrencySelectionPage = () => {
         // If the money request being created is a distance request, don't allow the user to choose the currency.
         // Only USD is allowed for distance requests.
-        if (isDistanceRequest) {
+        if (isDistanceRequestTab) {
             return;
         }
 

From 872462c4a0b0df6568c83799f1227386ebaf8f46 Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Thu, 31 Aug 2023 12:54:33 -0700
Subject: [PATCH 095/109] Merchant and description are separate

---
 src/components/ReportActionItem/MoneyRequestPreview.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 1fb611691fbb..6c9e07f1e94b 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -154,11 +154,6 @@ function MoneyRequestPreview(props) {
     const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(props.transaction);
     const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);
 
-    // On a distance request the merchant of the transaction will be used for the description since that's where it's stored in the database
-    if (isDistanceRequest) {
-        description = props.transaction.merchant;
-    }
-
     const getSettledMessage = () => {
         switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
             case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME:

From 9117371ae68825bb572484c8b463044b7156f712 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 13:48:06 -0700
Subject: [PATCH 096/109] fix: error on text input

---
 src/libs/OptionsListUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 27a121e05dbb..2b39c420511e 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -954,7 +954,7 @@ function getOptions(
     }
 
     let currentUserOption = _.find(allPersonalDetailsOptions, (personalDetailsOption) => personalDetailsOption.login === currentUserLogin);
-    if (searchValue && !isSearchStringMatch(searchValue, currentUserOption.searchText)) {
+    if (searchValue && currentUserOption && !isSearchStringMatch(searchValue, currentUserOption.searchText)) {
         currentUserOption = null;
     }
 

From 60580dbafad3d128e4f5c57befe300bba9a1ec2b Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 13:53:13 -0700
Subject: [PATCH 097/109] fix: participant page title

---
 .../MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index e515467ebb76..949e17d02ffe 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -91,7 +91,7 @@ function MoneyRequestParticipantsPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
                     <HeaderWithBackButton
-                        title={props.translate('iou.cash')}
+                        title={isDistanceRequest ? props.translate('common.distance') : props.translate('iou.cash')}
                         onBackButtonPress={navigateBack}
                     />
                     {iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT ? (

From 556b36caf466d8db7bd512e560c82da4d49ac463 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 15:08:58 -0700
Subject: [PATCH 098/109] fix: save calculated amount on iou

---
 src/components/MoneyRequestConfirmationList.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 90d2489e8620..d962625e50da 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useReducer, useState} from 'react';
+import React, {useCallback, useMemo, useReducer, useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {format} from 'date-fns';
@@ -32,6 +32,7 @@ import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import transactionPropTypes from './transactionPropTypes';
 import DistanceRequestUtils from '../libs/DistanceRequestUtils';
+import * as IOU from '../libs/actions/IOU';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -172,6 +173,15 @@ function MoneyRequestConfirmationList(props) {
         props.iouCurrencyCode,
     );
 
+    useEffect(() => {
+        if (!shouldCalculateDistanceAmount) {
+            return;
+        }
+
+        const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate);
+        IOU.setMoneyRequestAmount(amount);
+    }, [shouldCalculateDistanceAmount, distance, rate, unit]);
+
     /**
      * Returns the participants with amount
      * @param {Array} participants

From df9e8c811b6b38a0d530c728641eebdd748c52a6 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 15:29:50 -0700
Subject: [PATCH 099/109] fix: hidden button

---
 src/components/DistanceRequest.js | 2 +-
 src/styles/styles.js              | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index b84d6078fa0a..67ea4390797d 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -243,7 +243,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
             </View>
             <Button
                 success
-                style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
+                style={[styles.w100, styles.mb4, styles.ph4, styles.distanceRequestNextButton]}
                 onPress={() => IOU.navigateToNextPage(iou, iouType, reportID, report)}
                 pressOnEnter
                 isDisabled={waypointMarkers.length < 2}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 57a8fab32153..ee1bd72fbf1c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3874,6 +3874,11 @@ const styles = {
         overflow: 'hidden',
     },
 
+    distanceRequestNextButton: {
+        position: 'absolute',
+        bottom: 0,
+    },
+
     confirmationListMapItem: {
         ...spacing.m5,
         height: 200,

From 4857735eaaf2f5274c15e824f71b3851156d6e01 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 15:41:06 -0700
Subject: [PATCH 100/109] Revert "fix: hidden button"

This reverts commit df9e8c811b6b38a0d530c728641eebdd748c52a6.
---
 src/components/DistanceRequest.js | 2 +-
 src/styles/styles.js              | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 67ea4390797d..b84d6078fa0a 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -243,7 +243,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
             </View>
             <Button
                 success
-                style={[styles.w100, styles.mb4, styles.ph4, styles.distanceRequestNextButton]}
+                style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                 onPress={() => IOU.navigateToNextPage(iou, iouType, reportID, report)}
                 pressOnEnter
                 isDisabled={waypointMarkers.length < 2}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index ee1bd72fbf1c..57a8fab32153 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3874,11 +3874,6 @@ const styles = {
         overflow: 'hidden',
     },
 
-    distanceRequestNextButton: {
-        position: 'absolute',
-        bottom: 0,
-    },
-
     confirmationListMapItem: {
         ...spacing.m5,
         height: 200,

From 3aa090c8c385df47b93101832636a9db8fc81e5d Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Thu, 31 Aug 2023 15:48:29 -0700
Subject: [PATCH 101/109] Format distance amount with currency

---
 src/components/MoneyRequestConfirmationList.js | 12 ++++++++----
 src/libs/DistanceRequestUtils.js               | 10 +++++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index d962625e50da..4c3ff7e918fe 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -119,8 +119,12 @@ const propTypes = {
     mileageRate: PropTypes.shape({
         /** Unit used to represent distance */
         unit: PropTypes.oneOf([CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS]),
+
         /** Rate used to calculate the distance request amount */
         rate: PropTypes.number,
+
+        /** The currency of the rate */
+        currency: PropTypes.string,
     }),
 
     /** Whether the money request is a distance request */
@@ -149,7 +153,7 @@ const defaultProps = {
     policyCategories: {},
     transactionID: '',
     transaction: {},
-    mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0},
+    mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0, currency: 'USD'},
     isDistanceRequest: false,
 };
 
@@ -163,14 +167,14 @@ function MoneyRequestConfirmationList(props) {
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
 
-    const {unit, rate} = props.mileageRate;
+    const {unit, rate, currency} = props.mileageRate;
     const distance = lodashGet(transaction, 'routes.route0.distance', 0);
     const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
     const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
         shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
-        props.iouCurrencyCode,
+        props.isDistanceRequest ? currency : props.iouCurrencyCode,
     );
 
     useEffect(() => {
@@ -453,7 +457,7 @@ function MoneyRequestConfirmationList(props) {
                     {props.isDistanceRequest ? (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                            title={DistanceRequestUtils.getDistanceString(distance, unit, rate, translate)}
+                            title={DistanceRequestUtils.getDistanceString(distance, unit, formattedAmount, translate)}
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 2854e0a31de7..cbe7ee932044 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -12,6 +12,7 @@ import CONST from '../CONST';
  *
  * @returns {Object|null} An object containing the rate and unit for the default mileage or null if not found.
  * @returns {Number} .rate - The default rate for the mileage.
+ * @returns {String} .currency - The currency associated with the rate.
  * @returns {String} .unit - The unit of measurement for the distance.
  */
 const getDefaultMileageRate = (policy) => {
@@ -31,6 +32,7 @@ const getDefaultMileageRate = (policy) => {
 
     return {
         rate: distanceRate.rate,
+        currency: distanceRate.currency,
         unit: distanceUnit.attributes.unit,
     };
 };
@@ -61,20 +63,18 @@ function convertDistanceUnit(distanceInMeters, unit) {
  *
  * @param {Number} distanceInMeters Distance traveled
  * @param {'mi' | 'ki'} unit Unit that should be used to display the distance
- * @param {Number} rate Expensable amount allowed per unit
+ * @param {String} formattedAmount The amount of the distance request already formatted for display
  * @param {Function} translate Translate function
  * @returns {String} A string that describes the distance travled and the rate used for expense calculation
  */
-const getDistanceString = (distanceInMeters, unit, rate, translate) => {
+const getDistanceString = (distanceInMeters, unit, formattedAmount, translate) => {
     const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
-
     const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.miles') : translate('common.kilometers');
     const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer');
     const roundedDistance = convertedDistance.toFixed(2);
     const unitString = roundedDistance === 1 ? singularDistanceUnit : distanceUnit;
-    const ratePerUnit = rate * 0.01;
 
-    return `${roundedDistance} ${unitString} @ $${ratePerUnit} / ${singularDistanceUnit}`;
+    return `${roundedDistance} ${unitString} @ ${formattedAmount} / ${singularDistanceUnit}`;
 };
 
 /**

From 82fa54e1adab594109e18bbdd0128d75d8e2ba54 Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Thu, 31 Aug 2023 16:19:08 -0700
Subject: [PATCH 102/109] Add getCurrencySymbol util

---
 src/libs/CurrencyUtils.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/libs/CurrencyUtils.js b/src/libs/CurrencyUtils.js
index 271086ede36e..6cbb0db7661b 100644
--- a/src/libs/CurrencyUtils.js
+++ b/src/libs/CurrencyUtils.js
@@ -56,6 +56,16 @@ function getLocalizedCurrencySymbol(currencyCode) {
     return _.find(parts, (part) => part.type === 'currency').value;
 }
 
+/**
+ * Get the currency symbol for a currency(ISO 4217) Code
+ *
+ * @param {String} currencyCode
+ * @returns {String|undefined}
+ */
+function getCurrencySymbol(currencyCode) {
+    return lodashGet(currencyList, [currencyCode, 'symbol']);
+}
+
 /**
  * Whether the currency symbol is left-to-right.
  *
@@ -118,4 +128,4 @@ function convertToDisplayString(amountInCents, currency = CONST.CURRENCY.USD) {
     });
 }
 
-export {getCurrencyDecimals, getCurrencyUnit, getLocalizedCurrencySymbol, isCurrencySymbolLTR, convertToBackendAmount, convertToFrontendAmount, convertToDisplayString};
+export {getCurrencyDecimals, getCurrencyUnit, getLocalizedCurrencySymbol, getCurrencySymbol, isCurrencySymbolLTR, convertToBackendAmount, convertToFrontendAmount, convertToDisplayString};

From 12f358f1ec78e20ea6a29a35ccd1e63cea7a43ec Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Thu, 31 Aug 2023 16:20:06 -0700
Subject: [PATCH 103/109] Fix distance string with currency symbol and rate

---
 src/components/MoneyRequestConfirmationList.js |  2 +-
 src/libs/DistanceRequestUtils.js               | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 4c3ff7e918fe..8d119a25c188 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -457,7 +457,7 @@ function MoneyRequestConfirmationList(props) {
                     {props.isDistanceRequest ? (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                            title={DistanceRequestUtils.getDistanceString(distance, unit, formattedAmount, translate)}
+                            title={DistanceRequestUtils.getDistanceString(distance, unit, rate, currency, translate)}
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index cbe7ee932044..0547484f78c1 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -1,5 +1,6 @@
 import _ from 'underscore';
 import CONST from '../CONST';
+import * as CurrencyUtils from './CurrencyUtils';
 
 /**
  * Retrieves the default mileage rate based on a given policy.
@@ -63,18 +64,21 @@ function convertDistanceUnit(distanceInMeters, unit) {
  *
  * @param {Number} distanceInMeters Distance traveled
  * @param {'mi' | 'ki'} unit Unit that should be used to display the distance
- * @param {String} formattedAmount The amount of the distance request already formatted for display
+ * @param {Number} rate Expensable amount allowed per unit
+ * @param {String} currency The currency associated with the rate
  * @param {Function} translate Translate function
  * @returns {String} A string that describes the distance travled and the rate used for expense calculation
  */
-const getDistanceString = (distanceInMeters, unit, formattedAmount, translate) => {
+const getDistanceString = (distanceInMeters, unit, rate, currency, translate) => {
     const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
     const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.miles') : translate('common.kilometers');
     const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer');
     const roundedDistance = convertedDistance.toFixed(2);
     const unitString = roundedDistance === 1 ? singularDistanceUnit : distanceUnit;
+    const ratePerUnit = rate * 0.01;
+    const currencySymbol = CurrencyUtils.getCurrencySymbol(currency) || `${currency} `;
 
-    return `${roundedDistance} ${unitString} @ ${formattedAmount} / ${singularDistanceUnit}`;
+    return `${roundedDistance} ${unitString} @ ${currencySymbol}${ratePerUnit} / ${singularDistanceUnit}`;
 };
 
 /**

From 04db489aa99bbeae4d5e33442bbd34acf239b436 Mon Sep 17 00:00:00 2001
From: neil-marcellini <neil@expensify.com>
Date: Thu, 31 Aug 2023 16:21:33 -0700
Subject: [PATCH 104/109] More precise util name

---
 src/components/MoneyRequestConfirmationList.js | 2 +-
 src/libs/DistanceRequestUtils.js               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 8d119a25c188..ba4e5e36525d 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -457,7 +457,7 @@ function MoneyRequestConfirmationList(props) {
                     {props.isDistanceRequest ? (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
-                            title={DistanceRequestUtils.getDistanceString(distance, unit, rate, currency, translate)}
+                            title={DistanceRequestUtils.getDistanceMerchant(distance, unit, rate, currency, translate)}
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 0547484f78c1..7a1c01bba715 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -69,7 +69,7 @@ function convertDistanceUnit(distanceInMeters, unit) {
  * @param {Function} translate Translate function
  * @returns {String} A string that describes the distance travled and the rate used for expense calculation
  */
-const getDistanceString = (distanceInMeters, unit, rate, currency, translate) => {
+const getDistanceMerchant = (distanceInMeters, unit, rate, currency, translate) => {
     const convertedDistance = convertDistanceUnit(distanceInMeters, unit);
     const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.miles') : translate('common.kilometers');
     const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer');
@@ -94,4 +94,4 @@ const getDistanceRequestAmount = (distance, unit, rate) => {
     return convertedDistance * rate;
 };
 
-export default {getDefaultMileageRate, getDistanceString, getDistanceRequestAmount};
+export default {getDefaultMileageRate, getDistanceMerchant, getDistanceRequestAmount};

From ddefdebb7c01318dd35bfd35b31a00226118e8d9 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 16:27:12 -0700
Subject: [PATCH 105/109] fix: make amount of distance request not editable

---
 src/components/MoneyRequestConfirmationList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index ba4e5e36525d..51467d4012e5 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -409,10 +409,10 @@ function MoneyRequestConfirmationList(props) {
                 />
             ) : (
                 <MenuItemWithTopDescription
-                    shouldShowRightIcon={!props.isReadOnly}
+                    shouldShowRightIcon={!props.isReadOnly && !props.isDistanceRequest}
                     title={formattedAmount}
                     description={translate('iou.amount')}
-                    onPress={() => Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))}
+                    onPress={() => !props.isDistanceRequest && Navigation.navigate(ROUTES.getMoneyRequestAmountRoute(props.iouType, props.reportID))}
                     style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
                     disabled={didConfirm || props.isReadOnly}

From 1328bc45c03fba413df70eb6ea08bc3848b5a735 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 16:48:17 -0700
Subject: [PATCH 106/109] fix: ESLint error

---
 src/components/ReportActionItem/MoneyRequestPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 6c9e07f1e94b..f805275138d7 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -149,7 +149,7 @@ function MoneyRequestPreview(props) {
     const isCurrentUserManager = managerID === sessionAccountID;
 
     const {amount: requestAmount, currency: requestCurrency, comment: requestComment, merchant: requestMerchant} = ReportUtils.getTransactionDetails(props.transaction);
-    let description = requestComment;
+    const description = requestComment;
     const hasReceipt = TransactionUtils.hasReceipt(props.transaction);
     const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(props.transaction);
     const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);

From c4ad234a4c466d0387eff10f8279a7155d40e14e Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 18:24:18 -0700
Subject: [PATCH 107/109] fix: address PR requests

---
 src/pages/iou/MoneyRequestSelectorPage.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 49dc32bca02e..a1c85c07f69d 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,6 +21,7 @@ import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
+import * as ReportUtils from '../../libs/actions/Report';
 
 const propTypes = {
     /** React Navigation route */
@@ -58,9 +59,9 @@ function MoneyRequestSelectorPage(props) {
         [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'),
         [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'),
     };
-    const isFromGlobalCreate = !props.route.params.reportID;
-    const isExpenseRequest = props.report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
-    const shouldDisplayDistanceRequest = (canUseDistanceRequests && isExpenseRequest) || isFromGlobalCreate;
+    const isFromGlobalCreate = !reportID;
+    const isExpenseRequest = ReportUtils.isPolicyExpenseChat(props.report);
+    const shouldDisplayDistanceRequest = canUseDistanceRequests && (isExpenseRequest || isFromGlobalCreate);
 
     const resetMoneyRequestInfo = () => {
         const moneyRequestID = `${iouType}${reportID}`;

From fddfb850aae5c1b0bac788e022c51bba69925ea6 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 20:20:33 -0700
Subject: [PATCH 108/109] fix: wrong import

---
 src/pages/iou/MoneyRequestSelectorPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index a1c85c07f69d..31b2c886bd16 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,7 +21,7 @@ import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
-import * as ReportUtils from '../../libs/actions/Report';
+import * as ReportUtils from '../../libs/ReportUtils';
 
 const propTypes = {
     /** React Navigation route */

From b18b6d27d659b88e8f2991c10bafba6ee2e18deb Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Thu, 31 Aug 2023 22:49:34 -0700
Subject: [PATCH 109/109] fix: address PR review

---
 src/components/ConfirmedRoute.js               | 5 +++--
 src/components/DistanceRequest.js              | 2 +-
 src/libs/DistanceRequestUtils.js               | 8 ++++----
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index f34252430616..07d0fdc6ca97 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -66,8 +66,9 @@ const getWaypointMarkers = (waypoints) => {
 function ConfirmedRoute({mapboxToken, transaction}) {
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const {route0: route} = transaction.routes;
+    const {route0: route} = transaction.routes || {};
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    const coordinates = lodashGet(route, 'geometry.coordinates', []);
     const waypointMarkers = getWaypointMarkers(waypoints);
 
     useEffect(() => {
@@ -82,7 +83,7 @@ function ConfirmedRoute({mapboxToken, transaction}) {
                     accessToken={mapboxToken}
                     mapPadding={CONST.MAP_PADDING}
                     pitchEnabled={false}
-                    directionCoordinates={route.geometry.coordinates}
+                    directionCoordinates={coordinates}
                     directionStyle={styles.mapDirection}
                     style={styles.mapView}
                     waypoints={waypointMarkers}
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 828971361364..9ba5fd76a95a 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -43,7 +43,7 @@ const propTypes = {
     /** Type of money request (i.e. IOU) */
     iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)),
 
-    /** The report to with which the distance request is associated */
+    /** The report to which the distance request is associated */
     report: reportPropTypes,
 
     /** The optimistic transaction for this request */
diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js
index 7a1c01bba715..25f26cc92b52 100644
--- a/src/libs/DistanceRequestUtils.js
+++ b/src/libs/DistanceRequestUtils.js
@@ -9,7 +9,7 @@ import * as CurrencyUtils from './CurrencyUtils';
  * @param {Object} [policy.customUnits] - Custom units defined in the policy.
  * @param {Object[]} [policy.customUnits.rates] - Rates used in the policy.
  * @param {Object} [policy.customUnits.attributes] - attributes on a custom unit
- * @param {'mi' | 'ki'} [policy.customUnits.attributes.unit] - unit of measurement for the distance
+ * @param {'mi' | 'km'} [policy.customUnits.attributes.unit] - unit of measurement for the distance
  *
  * @returns {Object|null} An object containing the rate and unit for the default mileage or null if not found.
  * @returns {Number} .rate - The default rate for the mileage.
@@ -42,7 +42,7 @@ const getDefaultMileageRate = (policy) => {
  * Converts a given distance in meters to the specified unit (kilometers or miles).
  *
  * @param {Number} distanceInMeters - The distance in meters to be converted.
- * @param {'mi' | 'ki'} unit - The desired unit of conversion, either 'km' for kilometers or 'mi' for miles.
+ * @param {'mi' | 'km'} unit - The desired unit of conversion, either 'km' for kilometers or 'mi' for miles.
  *
  * @returns {Number} The converted distance in the specified unit.
  */
@@ -63,7 +63,7 @@ function convertDistanceUnit(distanceInMeters, unit) {
 /**
  *
  * @param {Number} distanceInMeters Distance traveled
- * @param {'mi' | 'ki'} unit Unit that should be used to display the distance
+ * @param {'mi' | 'km'} unit Unit that should be used to display the distance
  * @param {Number} rate Expensable amount allowed per unit
  * @param {String} currency The currency associated with the rate
  * @param {Function} translate Translate function
@@ -85,7 +85,7 @@ const getDistanceMerchant = (distanceInMeters, unit, rate, currency, translate)
  * Calculates the request amount based on distance, unit, and rate.
  *
  * @param {Number} distance - The distance traveled in meters
- * @param {'mi' | 'ki'} unit - The unit of measurement for the distance
+ * @param {'mi' | 'km'} unit - The unit of measurement for the distance
  * @param {Number} rate - Rate used for calculating the request amount
  * @returns {Number} The computed request amount.
  */
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 0a4a8f4cf1f2..8c063df63056 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -96,7 +96,7 @@ function MoneyRequestConfirmPage(props) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(props.iou.participants) || shouldReset) {
+        if (_.isEmpty(props.iou.participants) || (props.iou.amount === 0 && !props.iou.receiptPath && !isDistanceRequest) || shouldReset) {
             Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), true);
         }