Merge pull request Expensify#29125 from BhuvaneshPatil/enable-next-bu…

…tton

feat: enable next button

src/components/DistanceRequest/DistanceRequestFooter.js

@@ -10,8 +10,6 @@ import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import useNetwork from '../../hooks/useNetwork';
 import useLocalize from '../../hooks/useLocalize';
-import DotIndicatorMessage from '../DotIndicatorMessage';
-import * as ErrorUtils from '../../libs/ErrorUtils';
 import theme from '../../styles/themes/default';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import Button from '../Button';
@@ -32,9 +30,6 @@ const propTypes = {
         }),
     ),
 
-    /** Whether there is an error with the route */
-    hasRouteError: PropTypes.bool,
-
     /** Function to call when the user wants to add a new waypoint */
     navigateToWaypointEditPage: PropTypes.func.isRequired,
 
@@ -53,13 +48,12 @@ const propTypes = {
 
 const defaultProps = {
     waypoints: {},
-    hasRouteError: false,
     mapboxAccessToken: {
         token: '',
     },
     transaction: {},
 };
-function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, hasRouteError, navigateToWaypointEditPage}) {
+function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage}) {
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
@@ -103,13 +97,6 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, hasRo
 
     return (
         <>
-            {hasRouteError && (
-                <DotIndicatorMessage
-                    style={[styles.mh5, styles.mv3]}
-                    messages={ErrorUtils.getLatestErrorField(transaction, 'route')}
-                    type="error"
-                />
-            )}
             <View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
                 <Button
                     small

src/components/DistanceRequest/index.js

@@ -18,6 +18,7 @@ import usePrevious from '../../hooks/usePrevious';
 import * as Transaction from '../../libs/actions/Transaction';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import * as IOUUtils from '../../libs/IOUUtils';
+import * as ErrorUtils from '../../libs/ErrorUtils';
 import Button from '../Button';
 import DraggableList from '../DraggableList';
 import transactionPropTypes from '../transactionPropTypes';
@@ -26,6 +27,7 @@ import FullPageNotFoundView from '../BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '../HeaderWithBackButton';
 import DistanceRequestFooter from './DistanceRequestFooter';
 import DistanceRequestRenderItem from './DistanceRequestRenderItem';
+import DotIndicatorMessage from '../DotIndicatorMessage';
 
 const propTypes = {
     /** The transactionID of this request */
@@ -68,6 +70,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
     const {translate} = useLocalize();
 
     const [optimisticWaypoints, setOptimisticWaypoints] = useState(null);
+    const [hasError, setHasError] = useState(false);
     const isEditing = lodashGet(route, 'path', '').includes('address');
     const reportID = lodashGet(report, 'reportID', '');
     const waypoints = useMemo(() => optimisticWaypoints || lodashGet(transaction, 'comment.waypoints', {waypoint0: {}, waypoint1: {}}), [optimisticWaypoints, transaction]);
@@ -101,6 +104,10 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
 
         // Create the initial start and stop waypoints
         Transaction.createInitialWaypoints(transactionID);
+        return () => {
+            // Whenever we reset the transaction, we need to set errors as empty/false.
+            setHasError(false);
+        };
     }, [transaction, transactionID]);
 
     useEffect(() => {
@@ -118,6 +125,14 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
         scrollViewRef.current.scrollToEnd({animated: true});
     }, [numberOfPreviousWaypoints, numberOfWaypoints]);
 
+    useEffect(() => {
+        // Whenever we change waypoints we need to remove the error or it will keep showing the error.
+        if (_.isEqual(previousWaypoints, waypoints)) {
+            return;
+        }
+        setHasError(false);
+    }, [waypoints, previousWaypoints]);
+
     const navigateBack = () => {
         Navigation.goBack(isEditing ? ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID) : ROUTES.HOME);
     };
@@ -130,6 +145,22 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
         Navigation.navigate(isEditingRequest ? ROUTES.MONEY_REQUEST_EDIT_WAYPOINT.getRoute(report.reportID, transactionID, index) : ROUTES.MONEY_REQUEST_WAYPOINT.getRoute('request', index));
     };
 
+    const getError = () => {
+        // Get route error if available else show the invalid number of waypoints error.
+        if (hasRouteError) {
+            return ErrorUtils.getLatestErrorField(transaction, 'route');
+        }
+
+        // Initially, both waypoints will be null, and if we give fallback value as empty string that will result in true condition, that's why different default values.
+        if (_.keys(waypoints).length === 2 && lodashGet(waypoints, 'waypoint0.address', 'address1') === lodashGet(waypoints, 'waypoint1.address', 'address2')) {
+            return {0: translate('iou.error.duplicateWaypointsErrorMessage')};
+        }
+
+        if (_.size(validatedWaypoints) < 2) {
+            return {0: translate('iou.error.emptyWaypointsErrorMessage')};
+        }
+    };
+
     const updateWaypoints = useCallback(
         ({data}) => {
             if (_.isEqual(waypointsList, data)) {
@@ -151,6 +182,15 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
         [transactionID, waypoints, waypointsList],
     );
 
+    const submitWaypoints = useCallback(() => {
+        // If there is any error or loading state, don't let user go to next page.
+        if (_.size(validatedWaypoints) < 2 || hasRouteError || isLoadingRoute || isLoading) {
+            setHasError(true);
+            return;
+        }
+        onSubmit(waypoints);
+    }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, waypoints]);
+
     const content = (
         <>
             <View style={styles.flex1}>
@@ -183,13 +223,20 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
                 />
             </View>
             <View style={[styles.w100, styles.pt2]}>
+                {/* Show error message if there is route error or there are less than 2 routes and user has tried submitting, */}
+                {((hasError && _.size(validatedWaypoints) < 2) || hasRouteError) && (
+                    <DotIndicatorMessage
+                        style={[styles.mh4, styles.mv3]}
+                        messages={getError()}
+                        type="error"
+                    />
+                )}
                 <Button
                     success
                     allowBubble
                     pressOnEnter
                     style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
-                    onPress={() => onSubmit(waypoints)}
-                    isDisabled={_.size(validatedWaypoints) < 2 || (!isOffline && (hasRouteError || isLoadingRoute || isLoading))}
+                    onPress={submitWaypoints}
                     text={translate(isEditingRequest ? 'common.save' : 'common.next')}
                     isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)}
                 />

src/languages/en.ts

@@ -577,6 +577,8 @@ export default {
             genericDeleteFailureMessage: 'Unexpected error deleting the money request, please try again later',
             genericEditFailureMessage: 'Unexpected error editing the money request, please try again later',
             genericSmartscanFailureMessage: 'Transaction is missing fields',
+            duplicateWaypointsErrorMessage: 'Please remove duplicate waypoints',
+            emptyWaypointsErrorMessage: 'Please enter at least two waypoints',
         },
     },
     notificationPreferencesPage: {

src/languages/es.ts

@@ -571,6 +571,8 @@ export default {
             genericDeleteFailureMessage: 'Error inesperado eliminando la solicitud de dinero. Por favor, inténtalo más tarde',
             genericEditFailureMessage: 'Error inesperado al guardar la solicitud de dinero. Por favor, inténtalo más tarde',
             genericSmartscanFailureMessage: 'La transacción tiene campos vacíos',
+            duplicateWaypointsErrorMessage: 'Por favor elimina los puntos de ruta duplicados',
+            emptyWaypointsErrorMessage: 'Por favor introduce al menos dos puntos de ruta',
         },
     },
     notificationPreferencesPage: {