[HOLD for payment 2024-08-14] [$250] Distance - "Add stop" button is shown when Start and Stop points are empty

[izarutskaya]

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: 9.0.7-4
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4723510
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Submit expense.
3. Go to Distance.

Expected Result:

There will not be "Add stop" button when Start and Stop points are empty (production behavior).

Actual Result:

"Add stop" button is shown when Start and Stop points are empty.

Workaround:

Unknown

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

Bug6543537_1721112409072.20240716_144514.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c728763e9a6c40ec
• Upwork Job ID: 1818743058888345786
• Last Price Increase: 2024-07-31
• Automatic offers:
• akinwale | Reviewer | 103347058

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

Triggered auto assignment to @nkuoch (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

We think this issue might be related to the #collect project.

[etCoderDysto]

Proposal

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

"Add stop" button is shown when Start and Stop points are empty

What is the root cause of that problem?

• We display 'Add stop' button when numberOfFilledWaypoints >= 2
  

  App/src/components/DistanceRequest/DistanceRequestFooter.tsx

  Lines 91 to 93 in fb9ce79

  	{numberOfFilledWaypoints >= 2 && (
  	<View style={[styles.flexRow, styles.justifyContentCenter, styles.pt1]}>
  	<Button

• Since an empty waypoint has a default keyForList key, the filter method returns an arrary of length 2 and numberOfFilledWaypoints is calculated to be 2 when two or more waypoints are not selected.
  `Object.keys(waypoint).length``
  

  App/src/components/DistanceRequest/DistanceRequestFooter.tsx

  Line 46 in fb9ce79

  const numberOfFilledWaypoints = Object.values(waypoints ?? {}).filter((waypoint) => Object.keys(waypoint).length).length;

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

We should check in the filter if waypoints key length is greater that one to check if a waypoint is selected. When a waypoint is selected, waypoint object will have address, lat, lng, name, and keyForList keys.

const numberOfFilledWaypoints = Object.values(waypoints ?? {}).filter((waypoint) => Object.keys(waypoint).length > 1).length;

What alternative solutions did you explore? (Optional)

We can also use address prop on waypoint object to check if a waypoint is selected

const numberOfFilledWaypoints = Object.values(waypoints ?? {}).filter((waypoint) => Object.keys(waypoint).address).length;

Result: