[$500] Distance - Inconsistency in error message when more than two same adddress is added

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.3.85-0

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

Action Performed:

1. Launch New Expensify app
2. Go to + > Request money > Distance
3. Enter the same address for both Start and Finish point
4. Tap Next
5. Note the error message is 'Please remove duplicate waypoints'
6. Tap Add stop and add the same address and save it
7. Tap Next

Expected Result:

The error message should still be 'Please remove duplicate waypoints'

Actual Result:

The error message now shows 'Please enter at least two waypoints'

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Bug6240647_1697554305957.Screen_Recording_20231017_193302_New_Expensify__1_.1.mp4

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018cedadf58c08d896
• Upwork Job ID: 1714334639555403776
• Last Price Increase: 2023-10-17

Issue Owner

Current Issue Owner: @GabiHExpensify

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018cedadf58c08d896

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ntdiary (External)

[tgolen]

@BhuvaneshPatil this is related to the changes in #29125. Can you work on correcting this, please?

[BhuvaneshPatil]

Sure thing @tgolen.
What should be the error message here?

[kuttyhub]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Inconsistent error message while adding duplicate waypoints.

What is the root cause of that problem?

The root cause for this problem is the logic used in the onError function that returns the error message, which checks duplication only the waypoints have no additional points init _.keys(waypoints).length === 2 .
which leads to hit to the final if conditions and returns the Please enter at least two waypoints.

App/src/components/DistanceRequest/index.js

Lines 148 to 162 in b494186

	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')};
	}
	};

also, I noticed the error handling is not done properly and it only checks if it has any two valid points. That introduces bugs like allowing duplicate waypoints if they have any two valid points.

App/src/components/DistanceRequest/index.js

Lines 226 to 233 in b494186

	{/* 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"
	/>
	)}

App/src/components/DistanceRequest/index.js

Lines 185 to 192 in b494186

	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]);

check the recordings for the bug.
https://github.com/Expensify/App/assets/71143839/37328a72-1da2-452f-937e-76dc2794db9d

What changes do you think we should make in order to solve the problem?

to fix the error handling properly we can introduce the memo variable hasInValidWayPoints which tracks differences in original waypoints and validatedWaypoints which has the list of unique and valid waypoints.

const validatedWaypoints = useMemo(() => TransactionUtils.getValidWaypoints(waypoints), [waypoints]);

const hasInValidWayPoints = useMemo(
  () => _.size(validatedWaypoints) < _.keys(waypoints).length ,
  [waypoints, validatedWaypoints]
)

Then update the OnError functions logic:

 const getError = () => {
        // Get route error if available else show the invalid number of waypoints error.
        if (hasRouteError) {
            return ErrorUtils.getLatestErrorField(transaction, 'route');
        }
        const startAddress = lodashGet(waypoints, 'waypoint0.address', {})
        const finalAddress = lodashGet(waypoints, 'waypoint1.address', {})
        // check start and final waypoints is empty
        if (_.keys(waypoints).length === 2 && (_.isEmpty(startAddress) || _.isEmpty(finalAddress))) {
            return { 0: translate('iou.error.emptyWaypointsErrorMessage') };
        }

        // Checking Duplicates in waypoints from start to end
        if (hasInValidWayPoints) {
            return {0: translate('iou.error.duplicateWaypointsErrorMessage')};
        }
    };

Then update the logic on submitWaypoints to prevent submission and set hasError to true.

 const submitWaypoints = useCallback(() => {
       // If there is any error or loading state, don't let user go to next page.
       if ( hasInValidWayPoints || hasRouteError || isLoadingRoute || isLoading) {
           setHasError(true);
           return;
       }
       onSubmit(waypoints);
   }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, waypoints, hasInValidWayPoints]);

Then update the logic on showing error in view.

  {/* Show error message if there is route error or there are less than 2 routes and use

r has tried submitting, */}
  {((hasError && hasInValidWayPoints) || hasRouteError) && (
      <DotIndicatorMessage
          style={[styles.mh4, styles.mv3]}
          messages={getError()}
          type="error"
      />
  )}

by using the hasInValidWayPoints value now we can properly update hasError state and it prevents submitting. demo here,
https://github.com/Expensify/App/assets/71143839/c5afa8d2-d60e-41cb-a029-9f4725056e06

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @kuttyhub! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>