[HOLD for payment 2024-07-26] [$250] Distance - The map is centered on the user if it is not possible to create a route

[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: v9.0.4-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4695012
Email or phone of affected tester (no customers): sustinov@applausemail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Prerequisites:
Create a Workspace on behalf of the administrator, invite an employee to it.

Steps:

1. Open https://staging.new.expensify.com/.
2. Log in with your employee account
3. Navigate to the workspace room
4. Tap on + Menu -> Submit expense -> Distance.
5. Enter a start location in Hawaii
6. Enter a finish location in San Diego
7. Tap the "center-me" button

Expected Result:

When you click on the "center-me" button, the map should center on waypoints, even if there is no way to create a route

Actual Result:

When you click on the "centre-me" button, the map is centred on the user's location, if it is not possible to create a route

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

Bug6533176_1720103016442.Record_2024-07-04-19-03-54.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01caae7463e233bb94
• Upwork Job ID: 1811060493662079823
• Last Price Increase: 2024-07-10
• Automatic offers:
• c3024 | Reviewer | 103143669

Issue Owner

Current Issue Owner: @miljakljajic

[melvin-bot]

Triggered auto assignment to @miljakljajic (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.

[izarutskaya]

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

[bernhardoj]

Proposal

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

The map is centered on the user position instead of the waypoints if the route is impossible to create.

What is the root cause of that problem?

Currently, we only center on the waypoints if there is a directionCoordinates exists and there is at least 2.

App/src/components/MapView/MapView.website.tsx

Lines 193 to 211 in 1f0a462

	const centerMap = useCallback(() => {
	if (!mapRef) {
	return;
	}
	if (directionCoordinates && directionCoordinates.length > 1) {
	const {northEast, southWest} = utils.getBounds(waypoints?.map((waypoint) => waypoint.coordinate) ?? [], directionCoordinates);
	const map = mapRef?.getMap();
	map?.fitBounds([southWest, northEast], {padding: mapPadding, animate: true, duration: CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME});
	return;
	}
	mapRef.flyTo({
	center: [currentPosition?.longitude ?? 0, currentPosition?.latitude ?? 0],
	zoom: CONST.MAPBOX.SINGLE_MARKER_ZOOM,
	bearing: 0,
	animate: true,
	duration: CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME,
	});
	}, [directionCoordinates, currentPosition, mapRef, waypoints, mapPadding]);

It's coming from the transaction routes coordinates data which is retrieved from the GetRoute/Draft, but if it's impossible to create the route, then the data will be empty.

App/src/components/DistanceRequest/DistanceRequestFooter.tsx

Line 112 in 1f0a462

directionCoordinates={(transaction?.routes?.route0?.geometry?.coordinates as Array<[number, number]>) ?? []}

If it's empty, then we center on the current user position.

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

It's possible to center the waypoints with the coordinate from the selected waypoints itself, so, I propose to update the condition so it centers on the waypoints if the selected waypoints contain the coordinate.

const waypointCoordinates = waypoints?.map((waypoint) => waypoint.coordinate) ?? [];
if (waypointCoordinates.length > 1 || (directionCoordinates?.length ?? 0) > 1) {
    // center logic
}

[melvin-bot]

@miljakljajic Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01caae7463e233bb94

[melvin-bot]

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

[c3024]

@bernhardoj 's proposal here looks good to me!

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@miljakljajic, @MonilBhavsar, @c3024 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

📣 @c3024 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[MonilBhavsar]

Looks good!

[bernhardoj]

PR is ready

cc: @c3024

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.9-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix the map is centered on the user if it is not possible to create a route #45575

If no regressions arise, payment will be issued on 2024-07-26. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment through NewDot Manual Requests
• @c3024 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR:
• [@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@c3024] Determine if we should create a regression test for this bug.
• [@c3024] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@miljakljajic] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[miljakljajic]

Payment summary for @bernhardoj :

Owed 250 for their work reviewing this PR

[miljakljajic]

@c3024 I have paid you in upwork. Do we need a regression test for this PR? Please complete the checklist above when you can

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj

[melvin-bot]

@miljakljajic, @MonilBhavsar, @bernhardoj, @c3024 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[c3024]

I'll complete the checklist in an hour.

[miljakljajic]

@c3024 bump on this when you can today so we can get it closed out

[c3024]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@c3024] The PR that introduced the bug has been identified. Link to the PR: fix add center button and blue dot #40759
• [@c3024] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: bernhardoj@be55619#r144802233
• [@c3024] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No discussion was started because it does not appear that it could have been caught earlier.
• [@c3024] Determine if we should create a regression test for this bug. Yes

[c3024]

Regression Test Proposal

1. Open FAB > Submit expense > Switch to Distance tab
2. Select both waypoints that will result in an impossible route to create (e.g., San Diego and Hawaii)
3. Move the map away from the waypoints
4. Press the center map button
5. Verify the map is centered between the selected waypoints

[c3024]

Here are the regression test steps.

[miljakljajic]

Thank you @c3024!