diff --git a/src/CONST.ts b/src/CONST.ts
index e487514f150e..4f34e7cb2136 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1369,6 +1369,7 @@ const CONST = {
         MERCHANT: 'merchant',
         CATEGORY: 'category',
         RECEIPT: 'receipt',
+        DISTANCE: 'distance',
         TAG: 'tag',
     },
     FOOTER: {
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 78d5f4d54888..00f3a4012664 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -5,19 +5,18 @@ import CONST from './CONST';
  * This is a file containing constants for all of the routes we want to be able to go to
  */
 
-// prettier-ignore
 export default {
     HOME: '',
     /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {
         route: 'flag/:reportID/:reportActionID',
-        getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}`
+        getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}`,
     },
     SEARCH: 'search',
     DETAILS: {
         route: 'details',
-        getRoute: (login: string) => `details?login=${encodeURIComponent(login)}`
+        getRoute: (login: string) => `details?login=${encodeURIComponent(login)}`,
     },
     PROFILE: {
         route: 'a/:accountID',
@@ -31,7 +30,7 @@ export default {
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
     GET_ASSISTANCE: {
         route: 'get-assistance/:taskID',
-        getRoute: (taskID: string) => `get-assistance/${taskID}`
+        getRoute: (taskID: string) => `get-assistance/${taskID}`,
     },
     UNLINK_LOGIN: 'u/:accountID/:validateCode',
     APPLE_SIGN_IN: 'sign-in-with-apple',
@@ -102,11 +101,11 @@ export default {
     REPORT: 'r',
     REPORT_WITH_ID: {
         route: 'r/:reportID?/:reportActionID?',
-        getRoute: (reportID: string) => `r/${reportID}`
+        getRoute: (reportID: string) => `r/${reportID}`,
     },
     EDIT_REQUEST: {
         route: 'r/:threadReportID/edit/:field',
-        getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${threadReportID}/edit/${field}`
+        getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${threadReportID}/edit/${field}`,
     },
     EDIT_CURRENCY_REQUEST: {
         route: 'r/:threadReportID/edit/currency',
@@ -114,89 +113,89 @@ export default {
     },
     REPORT_WITH_ID_DETAILS_SHARE_CODE: {
         route: 'r/:reportID/details/shareCode',
-        getRoute: (reportID: string) => `r/${reportID}/details/shareCode`
+        getRoute: (reportID: string) => `r/${reportID}/details/shareCode`,
     },
     REPORT_ATTACHMENTS: {
         route: 'r/:reportID/attachment',
-        getRoute: (reportID: string, source: string) => `r/${reportID}/attachment?source=${encodeURI(source)}`
+        getRoute: (reportID: string, source: string) => `r/${reportID}/attachment?source=${encodeURI(source)}`,
     },
     REPORT_PARTICIPANTS: {
         route: 'r/:reportID/participants',
-        getRoute: (reportID: string) => `r/${reportID}/participants`
+        getRoute: (reportID: string) => `r/${reportID}/participants`,
     },
     REPORT_WITH_ID_DETAILS: {
         route: 'r/:reportID/details',
-        getRoute: (reportID: string) => `r/${reportID}/details`
+        getRoute: (reportID: string) => `r/${reportID}/details`,
     },
     REPORT_SETTINGS: {
         route: 'r/:reportID/settings',
-        getRoute: (reportID: string) => `r/${reportID}/settings`
+        getRoute: (reportID: string) => `r/${reportID}/settings`,
     },
     REPORT_SETTINGS_ROOM_NAME: {
         route: 'r/:reportID/settings/room-name',
-        getRoute: (reportID: string) => `r/${reportID}/settings/room-name`
+        getRoute: (reportID: string) => `r/${reportID}/settings/room-name`,
     },
     REPORT_SETTINGS_NOTIFICATION_PREFERENCES: {
         route: 'r/:reportID/settings/notification-preferences',
-        getRoute: (reportID: string) => `r/${reportID}/settings/notification-preferences`
+        getRoute: (reportID: string) => `r/${reportID}/settings/notification-preferences`,
     },
     REPORT_SETTINGS_WRITE_CAPABILITY: {
         route: 'r/:reportID/settings/who-can-post',
-        getRoute: (reportID: string) => `r/${reportID}/settings/who-can-post`
+        getRoute: (reportID: string) => `r/${reportID}/settings/who-can-post`,
     },
     REPORT_WELCOME_MESSAGE: {
         route: 'r/:reportID/welcomeMessage',
-        getRoute: (reportID: string) => `r/${reportID}/welcomeMessage`
+        getRoute: (reportID: string) => `r/${reportID}/welcomeMessage`,
     },
     SPLIT_BILL_DETAILS: {
         route: 'r/:reportID/split/:reportActionID',
-        getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}`
+        getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}`,
     },
     TASK_TITLE: {
         route: 'r/:reportID/title',
-        getRoute: (reportID: string) => `r/${reportID}/title`
+        getRoute: (reportID: string) => `r/${reportID}/title`,
     },
     TASK_DESCRIPTION: {
         route: 'r/:reportID/description',
-        getRoute: (reportID: string) => `r/${reportID}/description`
+        getRoute: (reportID: string) => `r/${reportID}/description`,
     },
     TASK_ASSIGNEE: {
         route: 'r/:reportID/assignee',
-        getRoute: (reportID: string) => `r/${reportID}/assignee`
+        getRoute: (reportID: string) => `r/${reportID}/assignee`,
     },
     PRIVATE_NOTES_VIEW: {
         route: 'r/:reportID/notes/:accountID',
-        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}`
+        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}`,
     },
     PRIVATE_NOTES_LIST: {
         route: 'r/:reportID/notes',
-        getRoute: (reportID: string) => `r/${reportID}/notes`
+        getRoute: (reportID: string) => `r/${reportID}/notes`,
     },
     PRIVATE_NOTES_EDIT: {
         route: 'r/:reportID/notes/:accountID/edit',
-        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`
+        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`,
     },
 
     // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE
     MONEY_REQUEST: {
         route: ':iouType/new/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}`,
     },
     MONEY_REQUEST_AMOUNT: {
         route: ':iouType/new/amount/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/amount/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/amount/${reportID}`,
     },
     MONEY_REQUEST_PARTICIPANTS: {
         route: ':iouType/new/participants/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/participants/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/participants/${reportID}`,
     },
     MONEY_REQUEST_CONFIRMATION: {
         route: ':iouType/new/confirmation/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/confirmation/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/confirmation/${reportID}`,
     },
     MONEY_REQUEST_DATE: {
         route: ':iouType/new/date/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/date/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/date/${reportID}`,
     },
     MONEY_REQUEST_CURRENCY: {
         route: ':iouType/new/currency/:reportID?',
@@ -204,35 +203,39 @@ export default {
     },
     MONEY_REQUEST_DESCRIPTION: {
         route: ':iouType/new/description/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}`,
     },
     MONEY_REQUEST_CATEGORY: {
         route: ':iouType/new/category/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/category/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/category/${reportID}`,
     },
     MONEY_REQUEST_TAG: {
         route: ':iouType/new/tag/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/tag/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/tag/${reportID}`,
     },
     MONEY_REQUEST_MERCHANT: {
         route: ':iouType/new/merchant/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/merchant/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/merchant/${reportID}`,
     },
     MONEY_REQUEST_WAYPOINT: {
         route: ':iouType/new/waypoint/:waypointIndex',
-        getRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}`
+        getRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}`,
     },
     MONEY_REQUEST_RECEIPT: {
         route: ':iouType/new/receipt/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}`,
     },
-    MONEY_REQUEST_ADDRESS: {
+    MONEY_REQUEST_DISTANCE: {
         route: ':iouType/new/address/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/address/${reportID}`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/address/${reportID}`,
+    },
+    MONEY_REQUEST_EDIT_WAYPOINT: {
+        route: 'r/:threadReportID/edit/distance/:transactionID/waypoint/:waypointIndex',
+        getRoute: (threadReportID: number, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}`,
     },
     MONEY_REQUEST_DISTANCE_TAB: {
         route: ':iouType/new/:reportID?/distance',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`,
     },
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
@@ -259,47 +262,47 @@ export default {
     WORKSPACE_NEW_ROOM: 'workspace/new-room',
     WORKSPACE_INITIAL: {
         route: 'workspace/:policyID',
-        getRoute: (policyID: string) => `workspace/${policyID}`
+        getRoute: (policyID: string) => `workspace/${policyID}`,
     },
     WORKSPACE_INVITE: {
         route: 'workspace/:policyID/invite',
-        getRoute: (policyID: string) => `workspace/${policyID}/invite`
+        getRoute: (policyID: string) => `workspace/${policyID}/invite`,
     },
     WORKSPACE_INVITE_MESSAGE: {
         route: 'workspace/:policyID/invite-message',
-        getRoute: (policyID: string) => `workspace/${policyID}/invite-message`
+        getRoute: (policyID: string) => `workspace/${policyID}/invite-message`,
     },
     WORKSPACE_SETTINGS: {
         route: 'workspace/:policyID/settings',
-        getRoute: (policyID: string) => `workspace/${policyID}/settings`
+        getRoute: (policyID: string) => `workspace/${policyID}/settings`,
     },
     WORKSPACE_CARD: {
         route: 'workspace/:policyID/card',
-        getRoute: (policyID: string) => `workspace/${policyID}/card`
+        getRoute: (policyID: string) => `workspace/${policyID}/card`,
     },
     WORKSPACE_REIMBURSE: {
         route: 'workspace/:policyID/reimburse',
-        getRoute: (policyID: string) => `workspace/${policyID}/reimburse`
+        getRoute: (policyID: string) => `workspace/${policyID}/reimburse`,
     },
     WORKSPACE_RATE_AND_UNIT: {
         route: 'workspace/:policyID/rateandunit',
-        getRoute: (policyID: string) => `workspace/${policyID}/rateandunit`
+        getRoute: (policyID: string) => `workspace/${policyID}/rateandunit`,
     },
     WORKSPACE_BILLS: {
         route: 'workspace/:policyID/bills',
-        getRoute: (policyID: string) => `workspace/${policyID}/bills`
+        getRoute: (policyID: string) => `workspace/${policyID}/bills`,
     },
     WORKSPACE_INVOICES: {
         route: 'workspace/:policyID/invoices',
-        getRoute: (policyID: string) => `workspace/${policyID}/invoices`
+        getRoute: (policyID: string) => `workspace/${policyID}/invoices`,
     },
     WORKSPACE_TRAVEL: {
         route: 'workspace/:policyID/travel',
-        getRoute: (policyID: string) => `workspace/${policyID}/travel`
+        getRoute: (policyID: string) => `workspace/${policyID}/travel`,
     },
     WORKSPACE_MEMBERS: {
         route: 'workspace/:policyID/members',
-        getRoute: (policyID: string) => `workspace/${policyID}/members`
+        getRoute: (policyID: string) => `workspace/${policyID}/members`,
     },
 
     // These are some on-off routes that will be removed once they're no longer needed (see GH issues for details)
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 5e9b73f2eb3a..30e5adfc62b0 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -5,39 +5,31 @@ import lodashGet from 'lodash/get';
 import lodashIsNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-
 import CONST from '../CONST';
 import ROUTES from '../ROUTES';
 import ONYXKEYS from '../ONYXKEYS';
-
 import styles from '../styles/styles';
 import variables from '../styles/variables';
-import theme from '../styles/themes/default';
-
-import transactionPropTypes from './transactionPropTypes';
-
+import LinearGradient from './LinearGradient';
+import * as MapboxToken from '../libs/actions/MapboxToken';
 import useNetwork from '../hooks/useNetwork';
-import usePrevious from '../hooks/usePrevious';
 import useLocalize from '../hooks/useLocalize';
-
-import * as ErrorUtils from '../libs/ErrorUtils';
 import Navigation from '../libs/Navigation/Navigation';
-import * as MapboxToken from '../libs/actions/MapboxToken';
+import reportPropTypes from '../pages/reportPropTypes';
+import DotIndicatorMessage from './DotIndicatorMessage';
+import * as ErrorUtils from '../libs/ErrorUtils';
+import usePrevious from '../hooks/usePrevious';
+import theme from '../styles/themes/default';
 import * as Transaction from '../libs/actions/Transaction';
 import * as TransactionUtils from '../libs/TransactionUtils';
 import * as IOUUtils from '../libs/IOUUtils';
-
 import Button from './Button';
 import DistanceMapView from './DistanceMapView';
-import LinearGradient from './LinearGradient';
 import * as Expensicons from './Icon/Expensicons';
 import PendingMapView from './MapView/PendingMapView';
-import DotIndicatorMessage from './DotIndicatorMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import {iouPropTypes} from '../pages/iou/propTypes';
-import reportPropTypes from '../pages/reportPropTypes';
-import * as IOU from '../libs/actions/IOU';
 import * as StyleUtils from '../styles/StyleUtils';
+import transactionPropTypes from './transactionPropTypes';
 import ScreenWrapper from './ScreenWrapper';
 import FullPageNotFoundView from './BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from './HeaderWithBackButton';
@@ -46,18 +38,12 @@ const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
 
 const propTypes = {
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: iouPropTypes,
-
-    /** Type of money request (i.e. IOU) */
-    iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)),
+    /** The transactionID of this request */
+    transactionID: PropTypes.string,
 
     /** The report to which the distance request is associated */
     report: reportPropTypes,
 
-    /** The optimistic transaction for this request */
-    transaction: transactionPropTypes,
-
     /** Data about Mapbox token for calling Mapbox API */
     mapboxAccessToken: PropTypes.shape({
         /** Temporary token for Mapbox API */
@@ -67,6 +53,15 @@ const propTypes = {
         expiration: PropTypes.string,
     }),
 
+    /** Are we editing an existing distance request, or creating a new one? */
+    isEditingRequest: PropTypes.bool,
+
+    /** Called on submit of this page */
+    onSubmit: PropTypes.func.isRequired,
+
+    /* Onyx Props */
+    transaction: transactionPropTypes,
+
     /** React Navigation route */
     route: PropTypes.shape({
         /** Params from the route */
@@ -81,16 +76,16 @@ const propTypes = {
 };
 
 const defaultProps = {
-    iou: {},
-    iouType: '',
+    transactionID: '',
     report: {},
-    transaction: {},
+    isEditingRequest: false,
     mapboxAccessToken: {
         token: '',
     },
+    transaction: {},
 };
 
-function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken, route}) {
+function DistanceRequest({transactionID, report, transaction, mapboxAccessToken, route, isEditingRequest, onSubmit}) {
     const [shouldShowGradient, setShouldShowGradient] = useState(false);
     const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
     const [scrollContentHeight, setScrollContentHeight] = useState(0);
@@ -99,6 +94,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
 
     const isEditing = lodashGet(route, 'path', '').includes('address');
     const reportID = lodashGet(report, 'reportID', '');
+    const iouType = lodashGet(route, 'params.iouType', '');
     const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]);
     const previousWaypoints = usePrevious(waypoints);
     const numberOfWaypoints = _.size(waypoints);
@@ -107,6 +103,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
 
     const lastWaypointIndex = numberOfWaypoints - 1;
     const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
+    const isLoading = lodashGet(transaction, 'isLoading', false);
     const hasRouteError = !!lodashGet(transaction, 'errorFields.route');
     const hasRoute = TransactionUtils.hasRoute(transaction);
     const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
@@ -159,12 +156,12 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
     }, []);
 
     useEffect(() => {
-        if (!iou.transactionID || !_.isEmpty(waypoints)) {
+        if (!transactionID || !_.isEmpty(waypoints)) {
             return;
         }
         // Create the initial start and stop waypoints
-        Transaction.createInitialWaypoints(iou.transactionID);
-    }, [iou.transactionID, waypoints]);
+        Transaction.createInitialWaypoints(transactionID);
+    }, [transactionID, waypoints]);
 
     const updateGradientVisibility = (event = {}) => {
         // If a waypoint extends past the bottom of the visible area show the gradient, else hide it.
@@ -176,8 +173,8 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
             return;
         }
 
-        Transaction.getRoute(iou.transactionID, validatedWaypoints);
-    }, [shouldFetchRoute, iou.transactionID, validatedWaypoints, isOffline]);
+        Transaction.getRoute(transactionID, validatedWaypoints);
+    }, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline]);
 
     useEffect(() => {
         if (numberOfWaypoints <= numberOfPreviousWaypoints) {
@@ -192,13 +189,12 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
         Navigation.goBack(isEditing ? ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID) : ROUTES.HOME);
     };
 
-    const navigateToNextPage = () => {
-        if (isEditing) {
-            Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID));
-            return;
-        }
-
-        IOU.navigateToNextPage(iou, iouType, reportID, report);
+    /**
+     * Takes the user to the page for editing a specific waypoint
+     * @param {Number} index of the waypoint to edit
+     */
+    const navigateToWaypointEditPage = (index) => {
+        Navigation.navigate(isEditingRequest ? ROUTES.MONEY_REQUEST_EDIT_WAYPOINT.getRoute(report.reportID, transactionID, index) : ROUTES.MONEY_REQUEST_WAYPOINT.getRoute('request', index));
     };
 
     const content = (
@@ -237,7 +233,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                                 secondaryIcon={waypointIcon}
                                 secondaryIconFill={theme.icon}
                                 shouldShowRightIcon
-                                onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_WAYPOINT.getRoute('request', index))}
+                                onPress={() => navigateToWaypointEditPage(index)}
                                 key={key}
                             />
                         );
@@ -261,10 +257,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                 <Button
                     small
                     icon={Expensicons.Plus}
-                    onPress={() => {
-                        const newIndex = _.size(lodashGet(transaction, 'comment.waypoints', {}));
-                        Navigation.navigate(ROUTES.MONEY_REQUEST_WAYPOINT.getRoute('request', newIndex));
-                    }}
+                    onPress={() => navigateToWaypointEditPage(_.size(lodashGet(transaction, 'comment.waypoints', {})))}
                     text={translate('distance.addStop')}
                     isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
                     innerStyles={[styles.ph10]}
@@ -296,10 +289,10 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
             <Button
                 success
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
-                onPress={navigateToNextPage}
-                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isLoadingRoute}
-                text={translate('common.next')}
-                isLoading={isLoadingRoute || shouldFetchRoute}
+                onPress={() => onSubmit(waypoints)}
+                isDisabled={!isOffline && (_.size(validatedWaypoints) < 2 || hasRouteError || isLoadingRoute || isLoading)}
+                text={translate(isEditingRequest ? 'common.save' : 'common.next')}
+                isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)}
             />
         </ScrollView>
     );
@@ -334,7 +327,7 @@ DistanceRequest.propTypes = propTypes;
 DistanceRequest.defaultProps = defaultProps;
 export default withOnyx({
     transaction: {
-        key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.iou.transactionID}`,
+        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
     },
     mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 0d554ff0eca4..695d935d7183 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -508,7 +508,7 @@ function MoneyRequestConfirmationList(props) {
                             description={translate('common.distance')}
                             style={[styles.moneyRequestMenuItem, styles.mb2]}
                             titleStyle={styles.flex1}
-                            onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_ADDRESS.getRoute(props.iouType, props.reportID))}
+                            onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DISTANCE.getRoute(props.iouType, props.reportID))}
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     ) : (
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 04eff0dfcea1..808babdec779 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -195,18 +195,32 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                     error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
                 />
             </OfflineWithFeedback>
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.merchant')}>
-                <MenuItemWithTopDescription
-                    description={isDistanceRequest ? translate('common.distance') : translate('common.merchant')}
-                    title={transactionMerchant}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    titleStyle={styles.flex1}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
-                    brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                    error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
-                />
-            </OfflineWithFeedback>
+            {isDistanceRequest ? (
+                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
+                    <MenuItemWithTopDescription
+                        description={translate('common.distance')}
+                        title={transactionMerchant}
+                        interactive={canEdit}
+                        shouldShowRightIcon={canEdit}
+                        titleStyle={styles.flex1}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
+                    />
+                </OfflineWithFeedback>
+            ) : (
+                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
+                    <MenuItemWithTopDescription
+                        description={translate('common.merchant')}
+                        title={transactionMerchant}
+                        interactive={canEdit}
+                        shouldShowRightIcon={canEdit}
+                        titleStyle={styles.flex1}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
+                        brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                        subtitle={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
+                        subtitleTextStyle={styles.textLabelError}
+                    />
+                </OfflineWithFeedback>
+            )}
             {shouldShowCategory && (
                 <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
                     <MenuItemWithTopDescription
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index fc284f566c80..12424bf1e1f2 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -31,7 +31,6 @@ function createModalStackNavigator(screens) {
     );
 }
 
-// We use getComponent/require syntax so that file used by screens are not loaded until we need them.
 const MoneyRequestModalStackNavigator = createModalStackNavigator({
     Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default,
     Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default,
@@ -46,9 +45,10 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({
     IOU_Send_Add_Bank_Account: () => require('../../../pages/AddPersonalBankAccountPage').default,
     IOU_Send_Add_Debit_Card: () => require('../../../pages/settings/Wallet/AddDebitCardPage').default,
     IOU_Send_Enable_Payments: () => require('../../../pages/EnablePayments/EnablePaymentsPage').default,
-    Money_Request_Waypoint: () => require('../../../pages/iou/WaypointEditorPage').default,
+    Money_Request_Waypoint: () => require('../../../pages/iou/NewDistanceRequestWaypointEditorPage').default,
+    Money_Request_Edit_Waypoint: () => require('../../../pages/iou/MoneyRequestEditWaypointPage').default,
+    Money_Request_Distance: () => require('../../../pages/iou/NewDistanceRequestPage').default,
     Money_Request_Receipt: () => require('../../../pages/EditRequestReceiptPage').default,
-    Money_Request_Address: () => require('../../../pages/iou/DistanceRequestPage').default,
 });
 
 const SplitDetailsModalStackNavigator = createModalStackNavigator({
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 116e1b9d55a5..533dbf51633a 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -329,8 +329,9 @@ export default {
                             Money_Request_Tag: ROUTES.MONEY_REQUEST_TAG.route,
                             Money_Request_Merchant: ROUTES.MONEY_REQUEST_MERCHANT.route,
                             Money_Request_Waypoint: ROUTES.MONEY_REQUEST_WAYPOINT.route,
+                            Money_Request_Edit_Waypoint: ROUTES.MONEY_REQUEST_EDIT_WAYPOINT.route,
                             Money_Request_Receipt: ROUTES.MONEY_REQUEST_RECEIPT.route,
-                            Money_Request_Address: ROUTES.MONEY_REQUEST_ADDRESS.route,
+                            Money_Request_Distance: ROUTES.MONEY_REQUEST_DISTANCE.route,
                             IOU_Send_Enable_Payments: ROUTES.IOU_SEND_ENABLE_PAYMENTS,
                             IOU_Send_Add_Bank_Account: ROUTES.IOU_SEND_ADD_BANK_ACCOUNT,
                             IOU_Send_Add_Debit_Card: ROUTES.IOU_SEND_ADD_DEBIT_CARD,
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 7fc151ce6f26..47d2f9ba2217 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1341,7 +1341,8 @@ function getMoneyRequestReportName(report, policy = undefined) {
 }
 
 /**
- * Gets transaction created, amount, currency and comment
+ * Gets transaction created, amount, currency, comment, and waypoints (for distance request)
+ * into a flat object. Used for displaying transactions and sending them in API commands
  *
  * @param {Object} transaction
  * @returns {Object}
@@ -1354,6 +1355,7 @@ function getTransactionDetails(transaction) {
         currency: TransactionUtils.getCurrency(transaction),
         comment: TransactionUtils.getDescription(transaction),
         merchant: TransactionUtils.getMerchant(transaction),
+        waypoints: TransactionUtils.getWaypoints(transaction),
         category: TransactionUtils.getCategory(transaction),
         billable: TransactionUtils.getBillable(transaction),
         tag: TransactionUtils.getTag(transaction),
diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index 38acf5fac119..aff1068546d1 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -147,6 +147,11 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
         shouldStopSmartscan = true;
     }
 
+    if (_.has(transactionChanges, 'waypoints')) {
+        updatedTransaction.modifiedWaypoints = transactionChanges.waypoints;
+        shouldStopSmartscan = true;
+    }
+
     if (_.has(transactionChanges, 'billable')) {
         updatedTransaction.billable = transactionChanges.billable;
     }
@@ -169,6 +174,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
         ...(_.has(transactionChanges, 'amount') && {amount: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'currency') && {currency: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'merchant') && {merchant: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
+        ...(_.has(transactionChanges, 'waypoints') && {waypoints: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'billable') && {billable: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'category') && {category: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'tag') && {tag: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
@@ -253,6 +259,16 @@ function getMerchant(transaction) {
     return lodashGet(transaction, 'modifiedMerchant', null) || lodashGet(transaction, 'merchant', '');
 }
 
+/**
+ * Return the waypoints field from the transaction, return the modifiedWaypoints if present.
+ *
+ * @param {Object} transaction
+ * @returns {String}
+ */
+function getWaypoints(transaction) {
+    return lodashGet(transaction, 'modifiedWaypoints', null) || lodashGet(transaction, ['comment', 'waypoints']);
+}
+
 /**
  * Return the category from the transaction. This "category" field has no "modified" complement.
  *
@@ -438,6 +454,7 @@ export {
     isReceiptBeingScanned,
     getValidWaypoints,
     isDistanceRequest,
+    getWaypoints,
     hasMissingSmartscanFields,
     getWaypointIndex,
     waypointHasValidAddress,
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index b346900b37dc..198ceb2b8172 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -650,6 +650,154 @@ function createDistanceRequest(report, participant, comment, created, transactio
     Report.notifyNewAction(chatReport.reportID, userAccountID);
 }
 
+/**
+ * Edits an existing distance request
+ *
+ * @param {String} transactionID
+ * @param {Number} transactionThreadReportID
+ * @param {Object} transactionChanges
+ * @param {String} [transactionChanges.created]
+ * @param {Number} [transactionChanges.amount]
+ * @param {Object} [transactionChanges.comment]
+ * @param {Object} [transactionChanges.waypoints]
+ *
+ */
+function updateDistanceRequest(transactionID, transactionThreadReportID, transactionChanges) {
+    const optimisticData = [];
+    const successData = [];
+    const failureData = [];
+
+    // Step 1: Set any "pending fields" (ones updated while the user was offline) to have error messages in the failureData
+    const pendingFields = _.mapObject(transactionChanges, () => CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE);
+    const clearedPendingFields = _.mapObject(transactionChanges, () => null);
+    const errorFields = _.mapObject(pendingFields, () => ({
+        [DateUtils.getMicroseconds()]: Localize.translateLocal('iou.error.genericEditFailureMessage'),
+    }));
+
+    // Step 2: Get all the collections being updated
+    const transactionThread = allReports[`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`];
+    const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
+    const iouReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${transactionThread.parentReportID}`];
+    const isFromExpenseReport = ReportUtils.isExpenseReport(iouReport);
+    const updatedTransaction = TransactionUtils.getUpdatedTransaction(transaction, transactionChanges, isFromExpenseReport);
+    const transactionDetails = ReportUtils.getTransactionDetails(updatedTransaction);
+
+    const params = {
+        ...transactionDetails,
+        transactionID,
+        // This needs to be a JSON string since we're sending this to the MapBox API
+        waypoints: JSON.stringify(transactionDetails.waypoints),
+    };
+
+    // Step 3: Build the modified expense report actions
+    // We don't create a modified report action if we're updating the waypoints,
+    // since there isn't actually any optimistic data we can create for them and the report action is created on the server
+    // with the response from the MapBox API
+    if (!_.has(transactionChanges, 'waypoints')) {
+        const updatedReportAction = ReportUtils.buildOptimisticModifiedExpenseReportAction(transactionThread, transaction, transactionChanges, isFromExpenseReport);
+        params.reportActionID = updatedReportAction.reportActionID;
+
+        optimisticData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThread.reportID}`,
+            value: {
+                [updatedReportAction.reportActionID]: updatedReportAction,
+            },
+        });
+        successData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThread.reportID}`,
+            value: {
+                [updatedReportAction.reportActionID]: {pendingAction: null},
+            },
+        });
+        failureData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThread.reportID}`,
+            value: {
+                [updatedReportAction.reportActionID]: updatedReportAction,
+            },
+        });
+
+        // Step 4: Compute the IOU total and update the report preview message (and report header) so LHN amount owed is correct.
+        // Should only update if the transaction matches the currency of the report, else we wait for the update
+        // from the server with the currency conversion
+        let updatedMoneyRequestReport = {...iouReport};
+        if (updatedTransaction.currency === iouReport.currency && updatedTransaction.modifiedAmount) {
+            const diff = TransactionUtils.getAmount(transaction, true) - TransactionUtils.getAmount(updatedTransaction, true);
+            if (ReportUtils.isExpenseReport(iouReport)) {
+                updatedMoneyRequestReport.total += diff;
+            } else {
+                updatedMoneyRequestReport = IOUUtils.updateIOUOwnerAndTotal(iouReport, updatedReportAction.actorAccountID, diff, TransactionUtils.getCurrency(transaction), false);
+            }
+
+            updatedMoneyRequestReport.cachedTotal = CurrencyUtils.convertToDisplayString(updatedMoneyRequestReport.total, updatedTransaction.currency);
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
+                value: updatedMoneyRequestReport,
+            });
+            successData.push({
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
+                value: {pendingAction: null},
+            });
+        }
+    }
+
+    // Optimistically modify the transaction
+    optimisticData.push({
+        onyxMethod: Onyx.METHOD.MERGE,
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+        value: {
+            ...updatedTransaction,
+            pendingFields,
+            isLoading: _.has(transactionChanges, 'waypoints'),
+            errorFields: null,
+        },
+    });
+
+    // Clear out the error fields and loading states on success
+    successData.push({
+        onyxMethod: Onyx.METHOD.MERGE,
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+        value: {
+            pendingFields: clearedPendingFields,
+            isLoading: false,
+            errorFields: null,
+        },
+    });
+
+    if (_.has(transactionChanges, 'waypoints')) {
+        // Delete the backup transaction when editing waypoints when the server responds successfully and there are no errors
+        successData.push({
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`,
+            value: null,
+        });
+    }
+
+    // Clear out loading states, pending fields, and add the error fields
+    failureData.push({
+        onyxMethod: Onyx.METHOD.MERGE,
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+        value: {
+            pendingFields: clearedPendingFields,
+            isLoading: false,
+            errorFields,
+        },
+    });
+
+    // Reset the iouReport to it's original state
+    failureData.push({
+        onyxMethod: Onyx.METHOD.MERGE,
+        key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
+        value: iouReport,
+    });
+
+    API.write('UpdateDistanceRequest', params, {optimisticData, successData, failureData});
+}
+
 /**
  * Request money from another user
  *
@@ -2113,12 +2261,12 @@ function createEmptyTransaction() {
  *
  * @param {Object} iou
  * @param {String} iouType
- * @param {String} reportID
  * @param {Object} report
+ * @param {String} report.reportID
  * @param {String} path
  */
-function navigateToNextPage(iou, iouType, reportID, report, path = '') {
-    const moneyRequestID = `${iouType}${reportID}`;
+function navigateToNextPage(iou, iouType, report, path = '') {
+    const moneyRequestID = `${iouType}${report.reportID || ''}`;
     const shouldReset = iou.id !== moneyRequestID;
 
     // If the money request ID in Onyx does not match the ID from params, we want to start a new request
@@ -2128,8 +2276,8 @@ function navigateToNextPage(iou, iouType, reportID, report, path = '') {
     }
 
     // If we're adding a receipt, that means the user came from the confirmation page and we need to navigate back to it.
-    if (path.slice(1) === ROUTES.MONEY_REQUEST_RECEIPT.getRoute(iouType, reportID)) {
-        Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID));
+    if (path.slice(1) === ROUTES.MONEY_REQUEST_RECEIPT.getRoute(iouType, report.reportID)) {
+        Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, report.reportID));
         return;
     }
 
@@ -2148,7 +2296,7 @@ function navigateToNextPage(iou, iouType, reportID, report, path = '') {
                       .value();
             setMoneyRequestParticipants(participants);
         }
-        Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID));
+        Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, report.reportID));
         return;
     }
     Navigation.navigate(ROUTES.MONEY_REQUEST_PARTICIPANTS.getRoute(iouType));
@@ -2182,5 +2330,6 @@ export {
     setMoneyRequestReceipt,
     createEmptyTransaction,
     navigateToNextPage,
+    updateDistanceRequest,
     replaceReceipt,
 };
diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts
index cc26dccc25b6..fe1bc1621cfa 100644
--- a/src/libs/actions/Transaction.ts
+++ b/src/libs/actions/Transaction.ts
@@ -4,6 +4,7 @@ import lodashClone from 'lodash/clone';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as CollectionUtils from '../CollectionUtils';
 import * as API from '../API';
+import CONST from '../../CONST';
 import {RecentWaypoint, Transaction} from '../../types/onyx';
 import {WaypointCollection} from '../../types/onyx/Transaction';
 import * as TransactionUtils from '../TransactionUtils';
@@ -54,11 +55,11 @@ function addStop(transactionID: string) {
     });
 }
 
-/**
- * Saves the selected waypoint to the transaction
- */
-function saveWaypoint(transactionID: string, index: string, waypoint: RecentWaypoint | null) {
+function saveWaypoint(transactionID: string, index: string, waypoint: RecentWaypoint | null, isEditingWaypoint = false) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
+        pendingFields: {
+            comment: isEditingWaypoint ? CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE : CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+        },
         comment: {
             waypoints: {
                 [`waypoint${index}`]: waypoint,
diff --git a/src/libs/actions/TransactionEdit.js b/src/libs/actions/TransactionEdit.js
new file mode 100644
index 000000000000..44b489b72c43
--- /dev/null
+++ b/src/libs/actions/TransactionEdit.js
@@ -0,0 +1,38 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+/**
+ * Makes a backup copy of a transaction object that can be restored when the user cancels editing a transaction.
+ *
+ * @param {Object} transaction
+ */
+function createBackupTransaction(transaction) {
+    const newTransaction = {
+        ...transaction,
+    };
+    // Use set so that it will always fully overwrite any backup transaction that could have existed before
+    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}-backup`, newTransaction);
+}
+
+/**
+ * Removes a transaction from Onyx that was only used temporary in the edit flow
+ * @param {String} transactionID
+ */
+function removeBackupTransaction(transactionID) {
+    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`, null);
+}
+
+function restoreOriginalTransactionFromBackup(transactionID) {
+    const connectionID = Onyx.connect({
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`,
+        callback: (backupTransaction) => {
+            Onyx.disconnect(connectionID);
+
+            // Use set to completely overwrite the original transaction
+            Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, backupTransaction);
+            removeBackupTransaction(transactionID);
+        },
+    });
+}
+
+export {createBackupTransaction, removeBackupTransaction, restoreOriginalTransactionFromBackup};
diff --git a/src/pages/EditRequestDistancePage.js b/src/pages/EditRequestDistancePage.js
new file mode 100644
index 000000000000..84aa4de1acb0
--- /dev/null
+++ b/src/pages/EditRequestDistancePage.js
@@ -0,0 +1,127 @@
+import React, {useEffect, useRef} from 'react';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+import CONST from '../CONST';
+import ScreenWrapper from '../components/ScreenWrapper';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
+import Navigation from '../libs/Navigation/Navigation';
+import useLocalize from '../hooks/useLocalize';
+import DistanceRequest from '../components/DistanceRequest';
+import reportPropTypes from './reportPropTypes';
+import * as IOU from '../libs/actions/IOU';
+import transactionPropTypes from '../components/transactionPropTypes';
+import * as TransactionEdit from '../libs/actions/TransactionEdit';
+import useNetwork from '../hooks/useNetwork';
+import usePrevious from '../hooks/usePrevious';
+
+const propTypes = {
+    /** The transactionID we're currently editing */
+    transactionID: PropTypes.string.isRequired,
+
+    /** The report to with which the distance request is associated */
+    report: reportPropTypes.isRequired,
+
+    /** Passed from the navigator */
+    route: PropTypes.shape({
+        /** Parameters the route gets */
+        params: PropTypes.shape({
+            /** 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,
+        }),
+    }).isRequired,
+
+    /* Onyx props */
+    /** The original transaction that is being edited */
+    transaction: transactionPropTypes,
+};
+
+const defaultProps = {
+    transaction: {},
+};
+
+function EditRequestDistancePage({report, route, transaction}) {
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+    const transactionWasSaved = useRef(false);
+    const hasWaypointError = useRef(false);
+    const prevIsLoading = usePrevious(transaction.isLoading);
+
+    useEffect(() => {
+        hasWaypointError.current = Boolean(lodashGet(transaction, 'errorFields.route') || lodashGet(transaction, 'errorFields.waypoints'));
+
+        // When the loading goes from true to false, then we know the transaction has just been
+        // saved to the server. Check for errors. If there are no errors, then the modal can be closed.
+        if (prevIsLoading && !transaction.isLoading && !hasWaypointError.current) {
+            Navigation.dismissModal(report.reportID);
+        }
+    }, [transaction, prevIsLoading, report]);
+
+    useEffect(() => {
+        // This effect runs when the component is mounted and unmounted. It's purpose is to be able to properly
+        // discard changes if the user cancels out of making any changes. This is accomplished by backing up the
+        // original transaction, letting the user modify the current transaction, and then if the user ever
+        // cancels out of the modal without saving changes, the original transaction is restored from the backup.
+
+        // On mount, create the backup transaction.
+        TransactionEdit.createBackupTransaction(transaction);
+
+        return () => {
+            // If the user cancels out of the modal without without saving changes, then the original transaction
+            // needs to be restored from the backup so that all changes are removed.
+            if (transactionWasSaved.current) {
+                return;
+            }
+            TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    /**
+     * Save the changes to the original transaction object
+     * @param {Object} waypoints
+     */
+    const saveTransaction = (waypoints) => {
+        transactionWasSaved.current = true;
+        IOU.updateDistanceRequest(transaction.transactionID, report.reportID, {waypoints});
+
+        // If the client is offline, then the modal can be closed as well (because there are no errors or other feedback to show them
+        // until they come online again and sync with the server).
+        if (isOffline) {
+            Navigation.dismissModal(report.reportID);
+        }
+    };
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.distance')}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <DistanceRequest
+                report={report}
+                route={route}
+                transactionID={transaction.transactionID}
+                onSubmit={saveTransaction}
+                isEditingRequest
+            />
+        </ScreenWrapper>
+    );
+}
+
+EditRequestDistancePage.propTypes = propTypes;
+EditRequestDistancePage.defaultProps = defaultProps;
+EditRequestDistancePage.displayName = 'EditRequestDistancePage';
+export default withOnyx({
+    transaction: {
+        key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`,
+    },
+})(EditRequestDistancePage);
diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js
index 5e6e0dd3f17b..90a32ec453f5 100644
--- a/src/pages/EditRequestPage.js
+++ b/src/pages/EditRequestPage.js
@@ -21,9 +21,10 @@ import EditRequestMerchantPage from './EditRequestMerchantPage';
 import EditRequestCreatedPage from './EditRequestCreatedPage';
 import EditRequestAmountPage from './EditRequestAmountPage';
 import EditRequestReceiptPage from './EditRequestReceiptPage';
+import reportPropTypes from './reportPropTypes';
+import EditRequestDistancePage from './EditRequestDistancePage';
 import EditRequestCategoryPage from './EditRequestCategoryPage';
 import EditRequestTagPage from './EditRequestTagPage';
-import reportPropTypes from './reportPropTypes';
 
 const propTypes = {
     /** Route from navigation */
@@ -116,7 +117,11 @@ function EditRequestPage({report, route, parentReport, policy, session, policyTa
 
     // Update the transaction object and close the modal
     function editMoneyRequest(transactionChanges) {
-        IOU.editMoneyRequest(transaction.transactionID, report.reportID, transactionChanges);
+        if (TransactionUtils.isDistanceRequest(transaction)) {
+            IOU.updateDistanceRequest(transaction.transactionID, report.reportID, transactionChanges);
+        } else {
+            IOU.editMoneyRequest(transaction.transactionID, report.reportID, transactionChanges);
+        }
         Navigation.dismissModal(report.reportID);
     }
 
@@ -236,6 +241,16 @@ function EditRequestPage({report, route, parentReport, policy, session, policyTa
         );
     }
 
+    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DISTANCE) {
+        return (
+            <EditRequestDistancePage
+                report={report}
+                transactionID={transaction.transactionID}
+                route={route}
+            />
+        );
+    }
+
     return <FullPageNotFoundView shouldShow />;
 }
 
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 15bf25695fd3..999622b9a22e 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -174,7 +174,7 @@ function ReportScreen({
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(parentReportAction);
     const isSingleTransactionView = ReportUtils.isMoneyRequest(report);
 
-    const policy = policies[`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`];
+    const policy = policies[`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`] || {};
 
     const isTopMostReportId = currentReportID === getReportID(route);
     const didSubscribeToReportLeavingEvents = useRef(false);
diff --git a/src/pages/iou/MoneyRequestEditWaypointPage.js b/src/pages/iou/MoneyRequestEditWaypointPage.js
new file mode 100644
index 000000000000..68f85848a69e
--- /dev/null
+++ b/src/pages/iou/MoneyRequestEditWaypointPage.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import WaypointEditor from './WaypointEditor';
+
+const propTypes = {
+    /** Route params */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            /** Thread reportID */
+            threadReportID: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+            /** ID of the transaction being edited */
+            transactionID: PropTypes.string,
+
+            /** Index of the waypoint being edited */
+            waypointIndex: PropTypes.string,
+        }),
+    }),
+};
+
+const defaultProps = {
+    route: {},
+};
+
+function MoneyRequestEditWaypointPage({route}) {
+    return <WaypointEditor route={route} />;
+}
+
+MoneyRequestEditWaypointPage.displayName = 'MoneyRequestEditWaypointPage';
+MoneyRequestEditWaypointPage.propTypes = propTypes;
+MoneyRequestEditWaypointPage.defaultProps = defaultProps;
+export default MoneyRequestEditWaypointPage;
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index c7a65215da58..9e46b1d2d7a2 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -15,7 +15,7 @@ import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import ReceiptSelector from './ReceiptSelector';
 import * as IOU from '../../libs/actions/IOU';
-import DistanceRequestPage from './DistanceRequestPage';
+import NewDistanceRequestPage from './NewDistanceRequestPage';
 import DragAndDropProvider from '../../components/DragAndDrop/Provider';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
@@ -133,7 +133,7 @@ function MoneyRequestSelectorPage(props) {
                                     {shouldDisplayDistanceRequest && (
                                         <TopTab.Screen
                                             name={CONST.TAB.DISTANCE}
-                                            component={DistanceRequestPage}
+                                            component={NewDistanceRequestPage}
                                             initialParams={{reportID, iouType}}
                                         />
                                     )}
diff --git a/src/pages/iou/DistanceRequestPage.js b/src/pages/iou/NewDistanceRequestPage.js
similarity index 79%
rename from src/pages/iou/DistanceRequestPage.js
rename to src/pages/iou/NewDistanceRequestPage.js
index 39b068975c77..562ea66453a1 100644
--- a/src/pages/iou/DistanceRequestPage.js
+++ b/src/pages/iou/NewDistanceRequestPage.js
@@ -42,8 +42,8 @@ const defaultProps = {
 
 // 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({iou, report, route}) {
-    const iouType = lodashGet(route, 'params.iouType', '');
+function NewDistanceRequestPage({iou, report, route}) {
+    const iouType = lodashGet(route, 'params.iouType', 'request');
 
     useEffect(() => {
         if (iou.transactionID) {
@@ -54,23 +54,20 @@ function DistanceRequestPage({iou, report, route}) {
 
     return (
         <DistanceRequest
-            iou={iou}
-            iouType={iouType}
             report={report}
             route={route}
             transactionID={iou.transactionID}
+            onSubmit={() => IOU.navigateToNextPage(iou, iouType, report)}
         />
     );
 }
 
-DistanceRequestPage.displayName = 'DistanceRequestPage';
-DistanceRequestPage.propTypes = propTypes;
-DistanceRequestPage.defaultProps = defaultProps;
+NewDistanceRequestPage.displayName = 'NewDistanceRequestPage';
+NewDistanceRequestPage.propTypes = propTypes;
+NewDistanceRequestPage.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
     iou: {key: ONYXKEYS.IOU},
     report: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID')}`,
     },
-})(DistanceRequestPage);
+})(NewDistanceRequestPage);
diff --git a/src/pages/iou/WaypointEditorPage.js b/src/pages/iou/NewDistanceRequestWaypointEditorPage.js
similarity index 63%
rename from src/pages/iou/WaypointEditorPage.js
rename to src/pages/iou/NewDistanceRequestWaypointEditorPage.js
index 51c03623fb50..47dcbc8e4139 100644
--- a/src/pages/iou/WaypointEditorPage.js
+++ b/src/pages/iou/NewDistanceRequestWaypointEditorPage.js
@@ -32,18 +32,24 @@ const defaultProps = {
 
 // This component is responsible for grabbing the transactionID from the IOU key
 // 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 WaypointEditor can subscribe to the transaction.
-function WaypointEditorPage({transactionID, route}) {
+function NewDistanceRequestWaypointEditorPage({transactionID, route}) {
     return (
         <WaypointEditor
-            transactionID={transactionID}
-            route={route}
+            // Put the transactionID into the route params so that WaypointEdit behaves the same when creating a new waypoint
+            // or editing an existing waypoint.
+            route={{
+                params: {
+                    ...route.params,
+                    transactionID,
+                },
+            }}
         />
     );
 }
 
-WaypointEditorPage.displayName = 'WaypointEditorPage';
-WaypointEditorPage.propTypes = propTypes;
-WaypointEditorPage.defaultProps = defaultProps;
+NewDistanceRequestWaypointEditorPage.displayName = 'NewDistanceRequestWaypointEditorPage';
+NewDistanceRequestWaypointEditorPage.propTypes = propTypes;
+NewDistanceRequestWaypointEditorPage.defaultProps = defaultProps;
 export default withOnyx({
     transactionID: {key: ONYXKEYS.IOU, selector: (iou) => iou && iou.transactionID},
-})(WaypointEditorPage);
+})(NewDistanceRequestWaypointEditorPage);
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index 431fbcca05bd..b4cf75801a3f 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -60,7 +60,6 @@ const defaultProps = {
 };
 
 function ReceiptSelector(props) {
-    const reportID = lodashGet(props.route, 'params.reportID', '');
     const iouType = lodashGet(props.route, 'params.iouType', '');
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState('');
@@ -126,7 +125,7 @@ function ReceiptSelector(props) {
             return;
         }
 
-        IOU.navigateToNextPage(iou, iouType, reportID, report, props.route.path);
+        IOU.navigateToNextPage(iou, iouType, report, props.route.path);
     };
 
     const panResponder = useRef(
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 0729db4b6043..4de4e9bb9148 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -294,7 +294,7 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
                                     return;
                                 }
 
-                                IOU.navigateToNextPage(iou, iouType, reportID, report, route.path);
+                                IOU.navigateToNextPage(iou, iouType, report, route.path);
                             })
                             .catch(() => {
                                 Log.info('User did not select an image from gallery');
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index d73e44746005..54269c197c1c 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -26,15 +26,18 @@ import transactionPropTypes from '../../components/transactionPropTypes';
 import * as ErrorUtils from '../../libs/ErrorUtils';
 
 const propTypes = {
-    /** The transactionID of the IOU */
-    transactionID: PropTypes.string.isRequired,
-
     /** Route params */
     route: PropTypes.shape({
         params: PropTypes.shape({
             /** IOU type */
             iouType: PropTypes.string,
 
+            /** Thread reportID */
+            threadReportID: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+            /** ID of the transaction being edited */
+            transactionID: PropTypes.string,
+
             /** Index of the waypoint being edited */
             waypointIndex: PropTypes.string,
         }),
@@ -59,21 +62,18 @@ const propTypes = {
         }),
     ),
 
+    /* Onyx props */
     /** The optimistic transaction for this request */
     transaction: transactionPropTypes,
 };
 
 const defaultProps = {
-    route: {
-        params: {
-            waypointIndex: '',
-        },
-    },
+    route: {},
     recentWaypoints: [],
     transaction: {},
 };
 
-function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, transaction, recentWaypoints}) {
+function WaypointEditor({route: {params: {iouType = '', transactionID = '', waypointIndex = '', threadReportID = 0}} = {}, transaction, recentWaypoints}) {
     const {windowWidth} = useWindowDimensions();
     const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
     const navigation = useNavigation();
@@ -98,6 +98,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
     }, [parsedWaypointIndex, waypointCount]);
 
     const waypointAddress = lodashGet(currentWaypoint, 'address', '');
+    const isEditingWaypoint = Boolean(threadReportID);
     const totalWaypoints = _.size(lodashGet(transaction, 'comment.waypoints', {}));
     // Hide the menu when there is only start and finish waypoint
     const shouldShowThreeDotsButton = totalWaypoints > 2;
@@ -128,7 +129,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
         }
     };
 
-    const onSubmit = (values) => {
+    const submit = (values) => {
         const waypointValue = values[`waypoint${waypointIndex}`] || '';
 
         // Allows letting you set a waypoint to an empty value
@@ -163,7 +164,12 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             lng: values.lng,
             address: values.address,
         };
-        saveWaypoint(waypoint);
+        Transaction.saveWaypoint(transactionID, waypointIndex, waypoint, isEditingWaypoint);
+
+        if (isEditingWaypoint) {
+            Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(threadReportID));
+            return;
+        }
         Navigation.goBack(ROUTES.MONEY_REQUEST_DISTANCE_TAB.getRoute(iouType));
     };
 
@@ -217,7 +223,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                     formID={ONYXKEYS.FORMS.WAYPOINT_FORM}
                     enabledWhenOffline
                     validate={validate}
-                    onSubmit={onSubmit}
+                    onSubmit={submit}
                     shouldValidateOnChange={false}
                     shouldValidateOnBlur={false}
                     submitButtonText={translate('common.save')}
@@ -258,7 +264,7 @@ WaypointEditor.propTypes = propTypes;
 WaypointEditor.defaultProps = defaultProps;
 export default withOnyx({
     transaction: {
-        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+        key: ({route}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(route, 'params.transactionID')}`,
         selector: (transaction) => (transaction ? {transactionID: transaction.transactionID, comment: {waypoints: lodashGet(transaction, 'comment.waypoints')}} : null),
     },
     recentWaypoints: {
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 21df38c8fb87..c9e2ca464303 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -147,7 +147,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
             return;
         }
 
-        IOU.navigateToNextPage(iou, iouType, reportID, report);
+        IOU.navigateToNextPage(iou, iouType, report);
     };
 
     const content = (
diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts
index 19a5d6105e9c..dd53024a5426 100644
--- a/src/types/onyx/Transaction.ts
+++ b/src/types/onyx/Transaction.ts
@@ -39,6 +39,9 @@ type Transaction = {
     modifiedCreated?: string;
     modifiedCurrency?: string;
     pendingAction: OnyxCommon.PendingAction;
+    pendingFields: {
+        comment: string;
+    };
     receipt: {
         receiptID?: number;
         source?: string;