Merge pull request #31017 from paultsimura/fix/29886-distance-stop-bu…

…tton fix: Distance – show "Add stop" button only when start & finish are filled
Expensify · Nov 10, 2023 · 4f345f8 · 4f345f8
2 parents f31ecae + 5671ea4
commit 4f345f8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 28 deletions.
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -59,6 +59,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
     const {translate} = useLocalize();
 
     const numberOfWaypoints = _.size(waypoints);
+    const numberOfFilledWaypoints = _.size(_.filter(waypoints, (waypoint) => !_.isEmpty(waypoint)));
     const lastWaypointIndex = numberOfWaypoints - 1;
 
     const waypointMarkers = useMemo(
@@ -98,16 +99,18 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
 
     return (
         <>
-            <View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
-                <Button
-                    small
-                    icon={Expensicons.Plus}
-                    onPress={() => navigateToWaypointEditPage(_.size(lodashGet(transaction, 'comment.waypoints', {})))}
-                    text={translate('distance.addStop')}
-                    isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
-                    innerStyles={[styles.ph10]}
-                />
-            </View>
+            {numberOfFilledWaypoints >= 2 && (
+                <View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
+                    <Button
+                        small
+                        icon={Expensicons.Plus}
+                        onPress={() => navigateToWaypointEditPage(_.size(lodashGet(transaction, 'comment.waypoints', {})))}
+                        text={translate('distance.addStop')}
+                        isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
+                        innerStyles={[styles.ph10]}
+                    />
+                </View>
+            )}
             <View style={styles.mapViewContainer}>
                 {!isOffline && Boolean(mapboxAccessToken.token) ? (
                     <DistanceMapView

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
@@ -55,7 +55,7 @@ const propTypes = {
             geometry: PropTypes.shape({
                 /** Data about the location */
                 location: PropTypes.shape({
-                    /** Lattitude of the location */
+                    /** Latitude of the location */
                     lat: PropTypes.number,
 
                     /** Longitude of the location */
@@ -86,10 +86,12 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
     const textInput = useRef(null);
     const parsedWaypointIndex = parseInt(waypointIndex, 10);
     const allWaypoints = lodashGet(transaction, 'comment.waypoints', {});
-    const waypointCount = _.keys(allWaypoints).length;
     const currentWaypoint = lodashGet(allWaypoints, `waypoint${waypointIndex}`, {});
 
-    const wayPointDescriptionKey = useMemo(() => {
+    const waypointCount = _.size(allWaypoints);
+    const filledWaypointCount = _.size(_.filter(allWaypoints, (waypoint) => !_.isEmpty(waypoint)));
+
+    const waypointDescriptionKey = useMemo(() => {
         switch (parsedWaypointIndex) {
             case 0:
                 return 'distance.waypointDescription.start';
@@ -102,9 +104,11 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
 
     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;
+    const shouldShowThreeDotsButton = waypointCount > 2;
+    const shouldDisableEditor =
+        isFocused &&
+        (Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount || (filledWaypointCount < 2 && parsedWaypointIndex >= waypointCount));
 
     const validate = (values) => {
         const errors = {};
@@ -113,7 +117,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
             ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'bankAccount.error.address');
         }
 
-        // If the user is online and they are trying to save a value without using the autocomplete, show an error message instructing them to use a selected address instead.
+        // If the user is online, and they are trying to save a value without using the autocomplete, show an error message instructing them to use a selected address instead.
         // That enables us to save the address with coordinates when it is selected
         if (!isOffline && waypointValue !== '' && waypointAddress !== waypointValue) {
             ErrorUtils.addErrorMessage(errors, `waypoint${waypointIndex}`, 'distance.errors.selectSuggestedAddress');
@@ -122,15 +126,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
         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 saveWaypoint = (waypoint) => Transaction.saveWaypoint(transactionID, waypointIndex, waypoint, isEditingWaypoint);
 
     const submit = (values) => {
         const waypointValue = values[`waypoint${waypointIndex}`] || '';
@@ -168,7 +164,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
             address: values.address,
             name: values.name,
         };
-        Transaction.saveWaypoint(transactionID, waypointIndex, waypoint, isEditingWaypoint);
+        saveWaypoint(waypoint);
 
         if (isEditingWaypoint) {
             Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(threadReportID));
@@ -184,9 +180,9 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
             shouldEnableMaxHeight
             testID={WaypointEditor.displayName}
         >
-            <FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount) && isFocused}>
+            <FullPageNotFoundView shouldShow={shouldDisableEditor}>
                 <HeaderWithBackButton
-                    title={translate(wayPointDescriptionKey)}
+                    title={translate(waypointDescriptionKey)}
                     shouldShowBackButton
                     onBackButtonPress={() => {
                         Navigation.goBack(ROUTES.MONEY_REQUEST_DISTANCE_TAB.getRoute(iouType));