From 530d25e8e12babe41c1b730ccadc8af2c27d8ef9 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Mon, 18 Sep 2023 17:33:33 +0700
Subject: [PATCH 1/8] new design when adding stop waypoint

---
 src/components/DistanceRequest.js |  6 +++++-
 src/pages/iou/WaypointEditor.js   | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index bf5a4cb9548b..151227d4ad38 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -260,7 +260,11 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                 <Button
                     small
                     icon={Expensicons.Plus}
-                    onPress={() => Transaction.addStop(iou.transactionID)}
+                    onPress={() => {
+                        const existingWaypoints = lodashGet(transaction, 'comment.waypoints', {});
+                        const newLastIndex = _.size(existingWaypoints);
+                        Navigation.navigate(ROUTES.getMoneyRequestWaypointRoute('request', newLastIndex));
+                    }}
                     text={translate('distance.addStop')}
                     isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
                     innerStyles={[styles.ph10]}
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 68e85a34746d..e1d3abc40dad 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -132,8 +132,13 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                 lng: null,
                 address: waypointValue,
             };
-
-            Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
+            if (parsedWaypointIndex < _.size(allWaypoints)) {
+                Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
+            } else {
+                const finishWaypoint = lodashGet(allWaypoints, `waypoint${_.size(allWaypoints) - 1}`, {});
+                Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
+                Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
+            }
         }
 
         // Other flows will be handled by selecting a waypoint with selectWaypoint as this is mainly for the offline flow
@@ -153,7 +158,13 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             address: values.address,
         };
 
-        Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
+        if (parsedWaypointIndex < _.size(allWaypoints)) {
+            Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
+        } else {
+            const finishWaypoint = lodashGet(allWaypoints, `waypoint${_.size(allWaypoints) - 1}`, {});
+            Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
+            Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
+        }
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 
@@ -163,7 +174,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}
             shouldEnableMaxHeight
         >
-            <FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount - 1) && isFocused}>
+            <FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount) && isFocused}>
                 <HeaderWithBackButton
                     title={translate(wayPointDescriptionKey)}
                     shouldShowBackButton

From 7cd9fc99eed9a559afb4335fd4f5aea51160e0ee Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Mon, 18 Sep 2023 18:15:55 +0700
Subject: [PATCH 2/8] dry code

---
 src/pages/iou/WaypointEditor.js | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index e1d3abc40dad..d9e78fd21833 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -116,6 +116,16 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
         return errors;
     };
 
+    const saveWaypoint = (waypoint) => {
+        if (parsedWaypointIndex < _.size(allWaypoints)) {
+            Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
+        } else {
+            const finishWaypoint = lodashGet(allWaypoints, `waypoint${_.size(allWaypoints) - 1}`, {});
+            Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
+            Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
+        }
+    }
+
     const onSubmit = (values) => {
         const waypointValue = values[`waypoint${waypointIndex}`] || '';
 
@@ -132,13 +142,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                 lng: null,
                 address: waypointValue,
             };
-            if (parsedWaypointIndex < _.size(allWaypoints)) {
-                Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
-            } else {
-                const finishWaypoint = lodashGet(allWaypoints, `waypoint${_.size(allWaypoints) - 1}`, {});
-                Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
-                Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
-            }
+            saveWaypoint(waypoint)
         }
 
         // Other flows will be handled by selecting a waypoint with selectWaypoint as this is mainly for the offline flow
@@ -157,14 +161,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             lng: values.lng,
             address: values.address,
         };
-
-        if (parsedWaypointIndex < _.size(allWaypoints)) {
-            Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
-        } else {
-            const finishWaypoint = lodashGet(allWaypoints, `waypoint${_.size(allWaypoints) - 1}`, {});
-            Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
-            Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
-        }
+        saveWaypoint(waypoint)
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 

From b84fb107673590e5850154c4a2a38d25fd60f00e Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Mon, 18 Sep 2023 18:31:34 +0700
Subject: [PATCH 3/8] fix lint

---
 src/pages/iou/WaypointEditor.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index d9e78fd21833..826cce56ee2d 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -124,7 +124,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             Transaction.saveWaypoint(transactionID, waypointIndex, finishWaypoint);
             Transaction.saveWaypoint(transactionID, waypointIndex - 1, waypoint);
         }
-    }
+    };
 
     const onSubmit = (values) => {
         const waypointValue = values[`waypoint${waypointIndex}`] || '';
@@ -142,7 +142,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                 lng: null,
                 address: waypointValue,
             };
-            saveWaypoint(waypoint)
+            saveWaypoint(waypoint);
         }
 
         // Other flows will be handled by selecting a waypoint with selectWaypoint as this is mainly for the offline flow
@@ -161,7 +161,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             lng: values.lng,
             address: values.address,
         };
-        saveWaypoint(waypoint)
+        saveWaypoint(waypoint);
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 

From 1043ebf8d27bdde4391af87d810419f4f6bc52e3 Mon Sep 17 00:00:00 2001
From: DylanDylann <141406735+DylanDylann@users.noreply.github.com>
Date: Thu, 21 Sep 2023 00:27:28 +0700
Subject: [PATCH 4/8] Update src/components/DistanceRequest.js

Co-authored-by: 0xmiroslav <97473779+0xmiroslav@users.noreply.github.com>
---
 src/components/DistanceRequest.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 151227d4ad38..7f0d438048c1 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -261,9 +261,8 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                     small
                     icon={Expensicons.Plus}
                     onPress={() => {
-                        const existingWaypoints = lodashGet(transaction, 'comment.waypoints', {});
-                        const newLastIndex = _.size(existingWaypoints);
-                        Navigation.navigate(ROUTES.getMoneyRequestWaypointRoute('request', newLastIndex));
+                        const newIndex = _.size(lodashGet(transaction, 'comment.waypoints', {}));
+                                                Navigation.navigate(ROUTES.getMoneyRequestWaypointRoute('request', newIndex));
                     }}
                     text={translate('distance.addStop')}
                     isDisabled={numberOfWaypoints === MAX_WAYPOINTS}

From 02c61638620c2db744253c8eab089378cb2d53e2 Mon Sep 17 00:00:00 2001
From: DylanDylann <141406735+DylanDylann@users.noreply.github.com>
Date: Thu, 21 Sep 2023 00:38:13 +0700
Subject: [PATCH 5/8] Update src/components/DistanceRequest.js

Co-authored-by: 0xmiroslav <97473779+0xmiroslav@users.noreply.github.com>
---
 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 7f0d438048c1..e40e72d858b5 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -262,7 +262,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                     icon={Expensicons.Plus}
                     onPress={() => {
                         const newIndex = _.size(lodashGet(transaction, 'comment.waypoints', {}));
-                                                Navigation.navigate(ROUTES.getMoneyRequestWaypointRoute('request', newIndex));
+                        Navigation.navigate(ROUTES.getMoneyRequestWaypointRoute('request', newIndex));
                     }}
                     text={translate('distance.addStop')}
                     isDisabled={numberOfWaypoints === MAX_WAYPOINTS}

From b98e86509f9604369f8f2d4aa6e3b2933d7a39b2 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Thu, 21 Sep 2023 00:52:57 +0700
Subject: [PATCH 6/8] disable button if empty waypoint

---
 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 e40e72d858b5..a9ad0b1ea010 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -101,6 +101,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
     const isEditing = lodashGet(route, 'path', '').includes('address');
     const reportID = lodashGet(report, 'reportID', '');
     const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]);
+    const isEmptyWaypoint = _.some(waypoints, (waypoint) => _.isEmpty(waypoint));
     const previousWaypoints = usePrevious(waypoints);
     const numberOfWaypoints = _.size(waypoints);
     const numberOfPreviousWaypoints = _.size(previousWaypoints);
@@ -300,7 +301,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                 success
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                 onPress={navigateToNextPage}
-                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isOffline}
+                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isOffline || isEmptyWaypoint}
                 text={translate('common.next')}
             />
         </ScrollView>

From ce3ac944837a60031a8f91b061391661f8f73722 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Thu, 21 Sep 2023 01:04:28 +0700
Subject: [PATCH 7/8] update logic

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

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index a9ad0b1ea010..263c5d7d5fa0 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -101,7 +101,6 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
     const isEditing = lodashGet(route, 'path', '').includes('address');
     const reportID = lodashGet(report, 'reportID', '');
     const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]);
-    const isEmptyWaypoint = _.some(waypoints, (waypoint) => _.isEmpty(waypoint));
     const previousWaypoints = usePrevious(waypoints);
     const numberOfWaypoints = _.size(waypoints);
     const numberOfPreviousWaypoints = _.size(previousWaypoints);
@@ -113,6 +112,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
     const haveWaypointsChanged = !_.isEqual(previousWaypoints, waypoints);
     const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates');
     const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
+    const hasInvalidWaypoint = _.size(validatedWaypoints) < numberOfWaypoints;
     const shouldFetchRoute = (!doesRouteExist || haveWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
     const waypointMarkers = useMemo(
         () =>
@@ -301,7 +301,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                 success
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                 onPress={navigateToNextPage}
-                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isOffline || isEmptyWaypoint}
+                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isOffline || hasInvalidWaypoint}
                 text={translate('common.next')}
             />
         </ScrollView>

From 59ec78985ed55e4de699cc5ff74c68694f8333d2 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Thu, 21 Sep 2023 10:28:13 +0700
Subject: [PATCH 8/8] revert logic

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

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index aafd161852d5..e33db1b916fa 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -110,7 +110,6 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
     const hasRouteError = !!lodashGet(transaction, 'errorFields.route');
     const hasRoute = TransactionUtils.hasRoute(transaction);
     const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
-    const hasInvalidWaypoint = _.size(validatedWaypoints) < numberOfWaypoints;
     const previousValidatedWaypoints = usePrevious(validatedWaypoints);
     const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints);
     const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
@@ -298,7 +297,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
                 success
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                 onPress={navigateToNextPage}
-                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isOffline || hasInvalidWaypoint}
+                isDisabled={_.size(validatedWaypoints) < 2 || hasRouteError || isOffline}
                 text={translate('common.next')}
             />
         </ScrollView>