Merge pull request #25808 from allroundexperts/fix-25730

fix: use correct title key for waypoint editor
Expensify · Aug 29, 2023 · d9877e4 · d9877e4
2 parents cb98bec + 116dd2a
commit d9877e4
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 66 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -1618,7 +1618,6 @@ export default {
         deleteWaypoint: 'Delete waypoint',
         deleteWaypointConfirmation: 'Are you sure you want to delete this waypoint?',
         address: 'Address',
-        waypointEditor: 'Waypoint Editor',
         waypointDescription: {
             start: 'Start',
             finish: 'Finish',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -2105,7 +2105,6 @@ export default {
         deleteWaypoint: 'Eliminar punto de ruta',
         deleteWaypointConfirmation: '¿Estás seguro de que quieres eliminar este punto de ruta?',
         address: 'Dirección',
-        waypointEditor: 'Editor de puntos de ruta',
         waypointDescription: {
             start: 'Comienzo',
             finish: 'Final',

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
@@ -1,11 +1,12 @@
+import React, {useMemo, useRef, useState} from 'react';
 import _ from 'underscore';
-import React, {useRef, useState} from 'react';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import AddressSearch from '../../components/AddressSearch';
 import ScreenWrapper from '../../components/ScreenWrapper';
+import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -72,11 +73,26 @@ const defaultProps = {
 
 function WaypointEditor({transactionID, route: {params: {iouType = '', waypointIndex = ''} = {}} = {}, transaction, recentWaypoints}) {
     const {windowWidth} = useWindowDimensions();
+    const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const textInput = useRef(null);
-    const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
-    const currentWaypoint = lodashGet(transaction, `comment.waypoints.waypoint${waypointIndex}`, {});
+    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(() => {
+        switch (parsedWaypointIndex) {
+            case 0:
+                return 'distance.waypointDescription.start';
+            case waypointCount - 1:
+                return 'distance.waypointDescription.finish';
+            default:
+                return 'distance.waypointDescription.stop';
+        }
+    }, [parsedWaypointIndex, waypointCount]);
+
     const waypointAddress = lodashGet(currentWaypoint, 'address', '');
     const totalWaypoints = _.size(lodashGet(transaction, 'comment.waypoints', {}));
     // Hide the menu when there is only start and finish waypoint
@@ -143,67 +159,69 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}
             shouldEnableMaxHeight
         >
-            <HeaderWithBackButton
-                title={translate('distance.waypointEditor')}
-                shouldShowBackButton
-                onBackButtonPress={() => {
-                    Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
-                }}
-                shouldShowThreeDotsButton={shouldShowThreeDotsButton}
-                threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
-                threeDotsMenuItems={[
-                    {
-                        icon: Expensicons.Trashcan,
-                        text: translate('distance.deleteWaypoint'),
-                        onSelected: () => setIsDeleteStopModalOpen(true),
-                    },
-                ]}
-            />
-            <ConfirmModal
-                title={translate('distance.deleteWaypoint')}
-                isVisible={isDeleteStopModalOpen}
-                onConfirm={deleteStopAndHideModal}
-                onCancel={() => setIsDeleteStopModalOpen(false)}
-                prompt={translate('distance.deleteWaypointConfirmation')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                danger
-            />
-            <Form
-                style={[styles.flexGrow1, styles.mh5]}
-                formID={ONYXKEYS.FORMS.WAYPOINT_FORM}
-                enabledWhenOffline
-                validate={validate}
-                onSubmit={onSubmit}
-                shouldValidateOnChange={false}
-                shouldValidateOnBlur={false}
-                submitButtonText={translate('common.save')}
-            >
-                <View>
-                    <AddressSearch
-                        inputID={`waypoint${waypointIndex}`}
-                        ref={(e) => (textInput.current = e)}
-                        hint={!isOffline ? translate('distance.errors.selectSuggestedAddress') : ''}
-                        containerStyles={[styles.mt4]}
-                        label={translate('distance.address')}
-                        defaultValue={waypointAddress}
-                        onPress={selectWaypoint}
-                        maxInputLength={CONST.FORM_CHARACTER_LIMIT}
-                        renamedInputKeys={{
-                            address: `waypoint${waypointIndex}`,
-                            city: null,
-                            country: null,
-                            street: null,
-                            street2: null,
-                            zipCode: null,
-                            lat: null,
-                            lng: null,
-                            state: null,
-                        }}
-                        predefinedPlaces={recentWaypoints}
-                    />
-                </View>
-            </Form>
+            <FullPageNotFoundView shouldShow={Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount - 1}>
+                <HeaderWithBackButton
+                    title={translate(wayPointDescriptionKey)}
+                    shouldShowBackButton
+                    onBackButtonPress={() => {
+                        Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
+                    }}
+                    shouldShowThreeDotsButton={shouldShowThreeDotsButton}
+                    threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
+                    threeDotsMenuItems={[
+                        {
+                            icon: Expensicons.Trashcan,
+                            text: translate('distance.deleteWaypoint'),
+                            onSelected: () => setIsDeleteStopModalOpen(true),
+                        },
+                    ]}
+                />
+                <ConfirmModal
+                    title={translate('distance.deleteWaypoint')}
+                    isVisible={isDeleteStopModalOpen}
+                    onConfirm={deleteStopAndHideModal}
+                    onCancel={() => setIsDeleteStopModalOpen(false)}
+                    prompt={translate('distance.deleteWaypointConfirmation')}
+                    confirmText={translate('common.delete')}
+                    cancelText={translate('common.cancel')}
+                    danger
+                />
+                <Form
+                    style={[styles.flexGrow1, styles.mh5]}
+                    formID={ONYXKEYS.FORMS.WAYPOINT_FORM}
+                    enabledWhenOffline
+                    validate={validate}
+                    onSubmit={onSubmit}
+                    shouldValidateOnChange={false}
+                    shouldValidateOnBlur={false}
+                    submitButtonText={translate('common.save')}
+                >
+                    <View>
+                        <AddressSearch
+                            inputID={`waypoint${waypointIndex}`}
+                            ref={(e) => (textInput.current = e)}
+                            hint={!isOffline ? translate('distance.errors.selectSuggestedAddress') : ''}
+                            containerStyles={[styles.mt4]}
+                            label={translate('distance.address')}
+                            defaultValue={waypointAddress}
+                            onPress={selectWaypoint}
+                            maxInputLength={CONST.FORM_CHARACTER_LIMIT}
+                            renamedInputKeys={{
+                                address: `waypoint${waypointIndex}`,
+                                city: null,
+                                country: null,
+                                street: null,
+                                street2: null,
+                                zipCode: null,
+                                lat: null,
+                                lng: null,
+                                state: null,
+                            }}
+                            predefinedPlaces={recentWaypoints}
+                        />
+                    </View>
+                </Form>
+            </FullPageNotFoundView>
         </ScreenWrapper>
     );
 }