[$500] Distance - Map preview in confirmation page does not show offline message in offline mode

[kbecciv]

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: v1.4.34-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/4256083
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. Go offline.
2. Go to workspace chat.
3. Open distance request page.
4. Note that the map preview show offline message.
5. Select two addresses and proceed to confirmation page.

Expected Result:

The map preview will show offline message.

Actual Result:

The map preview does not show offline message. It only shows an icon.

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

Add any screenshot/video evidence

Bug6362834_1706732013634.bandicam_2024-02-01_01-14-00-257.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a8b9c956d383801d
• Upwork Job ID: 1752805123159072768
• Last Price Increase: 2024-02-14

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[abzokhattab]

Proposal

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

Map preview in confirmation page does not show offline message in offline mode

What is the root cause of that problem?

the map component in the confirmation page is not in sync with the distance page

where in the distance page, the title, and subtitle are provided

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

1. we need to pass the title and the subtitle to the PendingMapView props in the ConfirmedRoute page to be the same as in the MapView

2. Or actually we don't need to use the PendingMapView in the ConfirmedRoute component, since the DistanceMapView already shows the pending action view if the network is offline, so we can change this block to:

    return (
        <DistanceMapView
            accessToken={mapboxAccessToken?.token ?? ''}
            mapPadding={CONST.MAP_PADDING}
            pitchEnabled={false}
            initialState={{
                zoom: CONST.MAPBOX.DEFAULT_ZOOM,
                location: waypointMarkers?.[0]?.coordinate ?? (CONST.MAPBOX.DEFAULT_COORDINATE as [number, number]),
            }}
            directionCoordinates={coordinates as Array<[number, number]>}
            style={[styles.mapView, styles.br4]}
            waypoints={waypointMarkers}
            styleURL={CONST.MAPBOX.STYLE_URL}
        />
    );

[Tony-MK]

Proposal

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

Distance - Map preview in confirmation page does not show offline message in offline mode

What is the root cause of that problem?

In the MoneyRequestConfirmationList component, we only show the ComfirmedRoute component.

App/src/components/MoneyRequestConfirmationList.js

Lines 603 to 606 in ed95bc0

	{props.isDistanceRequest && (
	<View style={styles.confirmationListMapItem}>
	<ConfirmedRoute transaction={props.transaction} />
	</View>

Furthermore, the title and subtitle props are not used in the ConfirmedRoute like in the MapView component.

App/src/components/MapView/MapView.tsx

Lines 183 to 188 in 8aec07c

	) : (
	<PendingMapView
	title={translate('distance.mapPending.title')}
	subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
	style={styles.mapEditView}
	/>

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

App/src/components/DistanceEReceipt.js

Lines 67 to 70 in ed95bc0

	{isOffline || !thumbnailSource ? (
	<PendingMapView />
	) : (
	<ThumbnailImage

Just like the DistanceEReceipt and MapView components, we will use isOffline to render the PendingMapView instead of the ComfirmedRoute component in the MoneyRequestConfirmationList component.

{isOffline ? ( <PendingMapView
             title={translate('distance.mapPending.title')}
             subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
 />) : ( <ConfirmedRoute transaction={props.transaction} />)}

[paultsimura]

This is by design:

#26836 (review)

Please render the pending map view without any text

#26836 (comment)

Let's have only the icon on the confirmation page, and keep that descriptive text on the distance request page.

cc: @neil-marcellini to confirm.

[DylanDylann]

@paultsimura Thanks for your comment. It seems this is expected.