[Due for payment 2025-02-18] [$250] Add distance label on map route

[dubielzyk-expensify]

Problem

Today when users submit a distance expense there's no way for users to see how long the distance is without continuing.

Solution

To improve quality of life and bring clarity to the distance request, let's add a distance label on the map route to ensure users can see the distance before they go to the detail screen.

I believe the Mapbox API allows us to do this pretty easily but I'm open to styling it differently depending on what controls we have.

• If the route contains multiple stops, we should not do individual legs, but rather only the distance of the full route.
• If your default workspace is the personal workspace, we'd display the unit associated with the P2P rate/unit we've assigned you from the currencyToDefaultMileageRate list based on the output currency of the personal workspace.
• If you tap/click on the tooltip it changes from miles/km, so everyone has the chance to see both if they want (i.e travelling abroad or something).

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864707242087404252
• Upwork Job ID: 1864707242087404252
• Last Price Increase: 2024-12-26
• Automatic offers:
• shubham1206agra | Contributor | 105535036
• truph01 | Contributor | 105692875

Issue Owner

Current Issue Owner: @shubham1206agra

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[truph01]

Proposal

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

• Add distance label on map route

What is the root cause of that problem?

• New feature

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

• We need to create a custom symbol component based on design. This component will get the distance data from transaction (via TransactionUtils.getDistanceInMeters(transaction, 'km')), and then display that distance data in here, like we did when display the current position marker.

1. Get the distance data.

• As mentioned above, the distance data can be get from TransactionUtils.getDistanceInMeters(transaction)).

2. Get the coordinate to display the distance label.

• The coordinate of the distance label can be the middle element in the directionCoordinates. So in here, we can add:

        const distanceSymbolCoorinate = useMemo(() => {
            const length = directionCoordinates?.length;
            // If the array is empty, return undefined
            if (!length) return undefined;

            // Find the index of the middle element
            const middleIndex = Math.floor(length / 2);

            // Return the middle element
            return directionCoordinates.at(middleIndex);
        }, [directionCoordinates]);

3. Display the distance label.

• In here, use the Marker to display the distance label:

                     {!!distanceSymbolCoorinate && !!distance && (
                        <Marker
                            key="distance"
                            longitude={distanceSymbolCoorinate.at(0) ?? 0}
                            latitude={distanceSymbolCoorinate.at(1) ?? 0}
                        >
                            <View style={{marginRight: 100}}>
                                <View
                                    style={{backgroundColor: '#60d184', paddingHorizontal: 10, paddingVertical: 4, color: 'white', borderRadius: 12, fontWeight: 'bold', textAlign: 'center'}}
                                >
                                    <View style={{fontSize: 16}}> {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS)}</View>
                                    <View style={{fontSize: 12}}> {DistanceRequestUtils.getDistanceForDisplayLabel(distance, CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES)}</View>
                                </View>
                            </View>
                        </Marker>
                    )}

It is just the mock style. The detailed should be address when we implement in PR.

4. The similar can be applied in native.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@bfitzexpensify, @thesahindia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[dubielzyk-expensify]

Sorry @JmillsExpensify just saw your concern about whether to use miles or km. Do we wanna do something like this instead? I assume adding metric/imperial preference in profile is too much at this point?

cc @Expensify/design

[shawnborton]

I quite like your middle treatment there.

Is there a way to just use someone's primary currency/location to determine whether we initially show km or mi? Most of our customers are US-based and don't need to worry about km so I don't want to over solve this problem, so-to-speak.

[dannymcclain]

I quite like your middle treatment there.
Is there a way to just use someone's primary currency/location to determine whether we initially show km or mi? Most of our customers are US-based and don't need to worry about km so I don't want to over solve this problem, so-to-speak.

Big agree with all of this. Love the middle treatment. I think we should either make an educated guess about which to make the primary unit, or just always lead with miles and let kilometers be the secondary for now (since most of our customers are US-based).

[dubielzyk-expensify]

I'll add the question to the original post and see if there's a way we can use timezone to detect 👍 Let's use the middle one

[melvin-bot]

@bfitzexpensify, @thesahindia Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@bfitzexpensify, @thesahindia Still overdue 6 days?! Let's take care of this!

[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.95-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat: Add distance label on map route #55517

If no regressions arise, payment will be issued on 2025-02-18. 🎊

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

• @shubham1206agra requires payment automatic offer (Contributor)
• @truph01 requires payment automatic offer (Contributor)

[bfitzexpensify]

@shubham1206agra please complete the BZ checklist

{ayment complete to @truph01

[bfitzexpensify]

Bump @shubham1206agra

[shubham1206agra]

New feature so only tests are required.

And for tests, we do not require additional tests as prior/existing tests will cover this issue too.

[parasharrajat]

Note for BZ: looks like there were two regressions:

1. [$250] Android - Distance - Unable to switch distance label unit when tapping on the label #56499
2. [Due for payment 2025-02-26] [$250] Distance - Distance label is not positioned within the map view #56531

[bfitzexpensify]

Thanks @parasharrajat - looks like both issues tagged the offending PR but not this issue, which is why I didn't see them linked.

OK, I've adjusted the payment down to $62.50. Offer resent @shubham1206agra

[shubham1206agra]

@bfitzexpensify I am sorry, but the payment should be adjusted to $125 here.

[bfitzexpensify]

@shubham1206agra pay is reduced by 50% for each regression. There are 2 regressions here, so the payment goes from $250 > $125 > $62.50.

[shubham1206agra]

@bfitzexpensify For #56531, see #56531 (comment) as this was marked as minor UI issue (and was an edge case).

[bfitzexpensify]

Not a blocker, but still a regression that had to be addressed.

[truph01]

@bfitzexpensify Regarding issue #56531, we decided to skip that bug when implementing the PR, as mentioned in this comment. The issue was created as an improvement rather than a bug fix, so I don’t believe it should be considered a regression from the original PR.

[bfitzexpensify]

Thanks for the context @truph01, I agree given that that we can ignore #56531 as a regression.

[bfitzexpensify]

I updated the offer @shubham1206agra - offer should be in your Upwork account

[melvin-bot]

@bfitzexpensify Eep! 4 days overdue now. Issues have feelings too...

[bfitzexpensify]

https://expensify.slack.com/archives/C01SKUP7QR0/p1741026052684239

[melvin-bot]

This issue has not been updated in over 15 days. @Gonals, @bfitzexpensify, @shubham1206agra, @truph01 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!