diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js index 7ea7854e5a5f..01ac1b8f3d08 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.js +++ b/src/pages/iou/request/step/IOURequestStepDistance.js @@ -57,7 +57,6 @@ function IOURequestStepDistance({ const {translate} = useLocalize(); const [optimisticWaypoints, setOptimisticWaypoints] = useState(null); - const [hasError, setHasError] = useState(false); const waypoints = useMemo(() => optimisticWaypoints || lodashGet(transaction, 'comment.waypoints', {waypoint0: {}, waypoint1: {}}), [optimisticWaypoints, transaction]); const waypointsList = _.keys(waypoints); const previousWaypoints = usePrevious(waypoints); @@ -73,6 +72,10 @@ function IOURequestStepDistance({ const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints); const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError; const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1; + const [shouldShowAtLeastTwoDifferentWaypointsError, setShouldShowAtLeastTwoDifferentWaypointsError] = useState(false); + const nonEmptyWaypointsCount = useMemo(() => _.filter(_.keys(waypoints), (key) => !_.isEmpty(waypoints[key])).length, [waypoints]); + const duplicateWaypointsError = useMemo(() => nonEmptyWaypointsCount >= 2 && _.size(validatedWaypoints) !== nonEmptyWaypointsCount, [nonEmptyWaypointsCount, validatedWaypoints]); + const atLeastTwoDifferentWaypointsError = useMemo(() => _.size(validatedWaypoints) < 2, [validatedWaypoints]); useEffect(() => { MapboxToken.init(); @@ -83,7 +86,6 @@ function IOURequestStepDistance({ if (isOffline || !shouldFetchRoute) { return; } - Transaction.getRouteForDraft(transactionID, validatedWaypoints); }, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline]); @@ -94,6 +96,13 @@ function IOURequestStepDistance({ scrollViewRef.current.scrollToEnd({animated: true}); }, [numberOfPreviousWaypoints, numberOfWaypoints]); + useEffect(() => { + if (nonEmptyWaypointsCount >= 2 && (duplicateWaypointsError || atLeastTwoDifferentWaypointsError || hasRouteError || isLoadingRoute || isLoading)) { + return; + } + setShouldShowAtLeastTwoDifferentWaypointsError(false); + }, [atLeastTwoDifferentWaypointsError, duplicateWaypointsError, hasRouteError, isLoading, isLoadingRoute, nonEmptyWaypointsCount, transaction]); + const navigateBack = () => { Navigation.goBack(backTo); }; @@ -133,12 +142,10 @@ function IOURequestStepDistance({ if (hasRouteError) { return ErrorUtils.getLatestErrorField(transaction, 'route'); } - - if (_.keys(waypoints).length > 2 && _.size(validatedWaypoints) !== _.keys(waypoints).length) { + if (duplicateWaypointsError) { return {0: translate('iou.error.duplicateWaypointsErrorMessage')}; } - - if (_.size(validatedWaypoints) < 2) { + if (atLeastTwoDifferentWaypointsError) { return {0: 'iou.error.atLeastTwoDifferentWaypoints'}; } }; @@ -165,12 +172,12 @@ function IOURequestStepDistance({ const submitWaypoints = useCallback(() => { // If there is any error or loading state, don't let user go to next page. - if (_.size(validatedWaypoints) < 2 || (_.keys(waypoints).length > 2 && _.size(validatedWaypoints) !== _.keys(waypoints).length) || hasRouteError || isLoadingRoute || isLoading) { - setHasError(true); + if (duplicateWaypointsError || atLeastTwoDifferentWaypointsError || hasRouteError || isLoadingRoute || isLoading) { + setShouldShowAtLeastTwoDifferentWaypointsError(true); return; } navigateToNextStep(); - }, [setHasError, waypoints, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, navigateToNextStep]); + }, [atLeastTwoDifferentWaypointsError, duplicateWaypointsError, hasRouteError, isLoadingRoute, isLoading, navigateToNextStep]); return ( {/* Show error message if there is route error or there are less than 2 routes and user has tried submitting, */} - {((hasError && _.size(validatedWaypoints) < 2) || (_.keys(waypoints).length > 2 && _.size(validatedWaypoints) !== _.keys(waypoints).length) || hasRouteError) && ( + {((shouldShowAtLeastTwoDifferentWaypointsError && atLeastTwoDifferentWaypointsError) || duplicateWaypointsError || hasRouteError) && (