[HOLD for payment 2024-06-20] [HOLD for payment 2024-06-18] [$500] Distance - Distance request thumbnail is different in reports when created offline

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.46-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:
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 to staging.new.expensify.com
2. Go offline
3. Go to workspace chat
4. Create a distance request
5. Click on the expense preview
6. Click on the expense preview again

Expected Result:

The receipt preview for the distance request should be consistent in the main chat, expense report and transaction thread

Actual Result:

The receipt preview for the distance request is different in the main chat, expense report and transaction thread

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

Bug6398750_1709323958826.bandicam_2024-03-02_01-11-44-819.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01230fd2c4938cb72a
• Upwork Job ID: 1765104893993635840
• Last Price Increase: 2024-03-19
• Automatic offers:
• mollfpr | Reviewer | 0
• FitseTLT | Contributor | 0

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[lanitochka17]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave5
CC @dylanexpensify

[rayane-djouah]

Proposal

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

Distance request thumbnail is different in reports when created offline.

What is the root cause of that problem?

when creating the distance request we set an optimisticReceipt with source as ReceiptGeneric image here:

App/src/libs/actions/IOU.ts

Lines 992 to 995 in fc4297d

	const optimisticReceipt: Receipt = {
	source: ReceiptGeneric as ReceiptSource,
	state: CONST.IOU.RECEIPT_STATE.OPEN,
	};

and we are using ReceiptGeneric also when displaying the receipt here:

App/src/libs/ReceiptUtils.ts

Line 37 in 93c66ce

return {thumbnail: null, image: ReceiptGeneric, isLocalFile: true};

that's because we have only svg icon of the route pending image that we are using for example here. we couldn't use Expensicons.EmptyStateRoutePending here and here. because of the type mismatch.

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

we should add png version for route pending image
and use it as source when creating the optimisticReceipt here and when displaying the image here

[gijoe0295]

Proposal

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

Distance - Distance request thumbnail is different in reports when created offline

What is the root cause of that problem?

We display ReceiptGeneric on preview for distance request that is pending route from server:

App/src/libs/ReceiptUtils.ts

Lines 37 to 39 in ea2bda2

	if (TransactionUtils.isFetchingWaypointsFromServer(transaction)) {
	return {thumbnail: null, image: ReceiptGeneric, isLocalFile: true};
	}

But we use EmptyStateRoutePending icon for others.

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

We should add png image for EmptyStateRoutePending because it's currently just SVG.

Then change ReceiptGeneric above to EmptyStateRoutePending for consistency.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[garrettmknight]

Confirmed and added to a wave.

[shahinyan11]

Proposal

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

Distance - Distance request thumbnail is different in reports when created offline

What is the root cause of that problem?

We display another component here

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

Add && !isOffline in this condition

const {isOffline} = useNetwork();
...

const showMapAsImage = isDistanceRequest && hasPendingWaypoints && !isOffline;

What alternative solutions did you explore? (Optional)

[FitseTLT]

Proposal

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

Distance request thumbnail is different in reports when created offline

What is the root cause of that problem?

We are using ConfirmRoute in money request preview and money request view

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 218 to 220 in 8262ebb

	<ConfirmedRoute transaction={transaction} />
	</View>
	)}

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 257 to 258 in 8262ebb

	<ConfirmedRoute transaction={transaction} />
	) : (

when the route is pending for a distance request and we do this to render the map same as in confirmation page instead of waiting until the server returns the map image and the default behaviour of this image when offline is to return PendingMapView which displays EmptyStateRoutePending Icon

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

To be consistent with ReportPreview as in here

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 266 to 272 in 8262ebb

	{hasReceipts && (
	<ReportActionItemImages
	images={lastThreeReceipts}
	total={transactionsWithReceipts.length}
	size={CONST.RECEIPT.MAX_REPORT_PREVIEW_RECEIPTS}
	/>
	)}

we should display the ReportActionItemImage with the placeholder Receipt thumbnail instead of ConfirmRoute when we are offline as in that case the ConfirmRoute will display EmptyStateRoutePending icon that doesn't align with ReportPreview causing this issue
So we need to change these conditions

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 120 in 8262ebb

const showMapAsImage = isDistanceRequest && hasPendingWaypoints;

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 114 in 8262ebb

const showMapAsImage = isDistanceRequest && hasPendingWaypoints;

   const showMapAsImage = isDistanceRequest && hasPendingWaypoints && !isOffline;

What alternative solutions did you explore? (Optional)

But in the other way round we can also use ConfirmRoute for Report Preview that is inside ReportActionItemImages instead of displaying always REportActionItemImage we can display ConfirmRoute when the transaction is distance request and has pending waypoints

App/src/components/ReportActionItem/ReportActionItemImages.tsx

Lines 78 to 84 in 8262ebb

	<ReportActionItemImage
	thumbnail={thumbnail}
	image={image}
	isLocalFile={isLocalFile}
	transaction={transaction}
	isSingleImage={numberOfShownImages === 1}
	/>

In this case we will have the advantage of ConfirmRoute (i.e to avoid latency in the display of map view until the BE returns it) in the Report preview too

[garrettmknight]

@mollfpr can you check these out?

[garrettmknight]

Still working through the PR

[neil-marcellini]

Chirag said I can take this over, so I will and I think we can get it merged in the next few days.

[neil-marcellini]

We encountered various bugs in the PR and have had to determine if each is new or existing on main already. I'll set a reminder to review the PR again tomorrow, but we'll probably have to keep waiting for a bit due to the merge freeze.

[garrettmknight]

Still working through the PR - I think it's ready for another review @mollfpr

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

• Fix - Distance request thumbnail is different in reports preview when created offline  #39243

If no regressions arise, payment will be issued on 2024-06-18. 🎊

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

• @mollfpr requires payment automatic offer (Reviewer)
• @FitseTLT requires payment automatic offer (Contributor)

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

• [@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
• [@mollfpr] 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:
• [@mollfpr] 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:
• [@mollfpr] Determine if we should create a regression test for this bug.
• [@mollfpr] 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.
• [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

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

• Fix - Distance request thumbnail is different in reports preview when created offline  #39243

If no regressions arise, payment will be issued on 2024-06-20. 🎊

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

• @mollfpr requires payment automatic offer (Reviewer)
• @FitseTLT requires payment automatic offer (Contributor)

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

• [@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
• [@mollfpr] 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:
• [@mollfpr] 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:
• [@mollfpr] Determine if we should create a regression test for this bug.
• [@mollfpr] 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.
• [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[garrettmknight]

Payment Summary:

• Contributor: @FitseTLT $500 paid via Upwork
• Reviewer: @mollfpr $500

@mollfpr can you finish the checklist when you get a chance?

[mollfpr]

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] 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:

Couldn't find the offending PR. We re-work the component to fix the issue and also replace the map pending thumbnail.

[@mollfpr] 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 need to create a discussion on the channel, because it seems only a time bug.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] 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.

1. Go to staging.new.expensify.com
2. Go offline
3. Go to workspace chat
4. Create a distance request
5. Verify on the report preview check that the pending map is displayed corresponding to the distance request created in (4) (instead of the receipt thumbnail)
6. Get back online and verify that the pending map is displayed (instead of the receipt thumbnail) until the map image from the server is returned
7. And once the map image is ready it should display the map image.
8. Create a distance request again
9. Verify on the report preview check a map is displayed corresponding to the distance request u created (instead of a receipt thumbnail)
10. 👍 or 👎

[JmillsExpensify]

$500 approved for @mollfpr

[garrettmknight]

All set here