[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)