[HOLD for payment 2024-01-25] IOU - Page flashes when adding or replacing receipt in details page

[lanitochka17]

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: 1.4.24-4
Reproducible in staging?: Y
Reproducible in production?: N
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 1:1 DM
2. Create a manual request
3. Go to request details page
4. Add a receipt
5. Replace the receipt

Expected Result:

When adding or replacing receipt, the thread view will not flash

Actual Result:

When adding or replacing receipt, the thread view flashes briefly

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

Bug6339083_1704989674828.20240111_211846__1_.mp4

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @rlinoz (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[situchan]

This happens on production for me

[bernhardoj]

Proposal

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

Report screen flashes after replacing a receipt.

What is the root cause of that problem?

This happens after #32764. When we press replace receipt, it will go to the receipt page and pass a backTo param of the current report screen path (/r/123).

After we select a new receipt, it will call goBack with the backTo params.

App/src/pages/iou/request/step/IOURequestStepScan/index.js

Lines 135 to 142 in 46f011f

	const updateScanAndNavigate = useCallback(
	(file, source) => {
	IOU.replaceReceipt(transactionID, file, source);
	if (backTo) {
	Navigation.goBack(backTo);
	return;
	}
	Navigation.dismissModal();

Because the receipt selector is the only RHP page, it will REPLACE the current screen with the report screen, thus the flash.

App/src/libs/Navigation/Navigation.ts

Lines 181 to 184 in c080ccc

	if (shouldEnforceFallback || (isFirstRouteInNavigator && fallbackRoute)) {
	navigate(fallbackRoute, CONST.NAVIGATION.TYPE.UP);
	return;
	}

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

I think we don't need the backTo params for the edit case, so we can just dismiss the RHP modal instead of calling the goBack function.

What alternative solutions did you explore? (Optional)

If the reason backTo is added is to handle the case where the user deep-linked to the edit receipt page from a different report and we want to open the report after editing it, then we can just pass the reportID to dismissModal function.

(we will still remove the goBack function)

Navigation.dismissModal(reportID);

This backTo to report flash/blink issue is actually easily reproducible if we pass the backTo param manually to any other page that supports it. To further fix this, we can handle this inside the Navigation.goBack function itself. The idea is, if the fallback route is a report screen route, then we get the report ID from the route and call Navigation.dismissModal.

[situchan]

I am not sure what the bug is here.
@bernhardoj can you share 2 videos? one for staging (bug), one for production (not bug)?

[situchan]

cc: @tgolen

[bernhardoj]

Here is on prod, the report screen doesn't flash.

Screen.Recording.2024-01-12.at.00.36.18.mov

You can see the issue between 0:15-0:17

[situchan]

Gotcha. I see 00:23-00:24 is the bug from the video from @lanitochka17 .

[rlinoz]

I am still not sure if I get it, but not a blocker, removing the label.

[tgolen]

Skipping the goBack() and just calling dismissModal() for the edit case makes sense 👍

[rlinoz]

@situchan do you agree with the proposal here?

[situchan]

@situchan do you agree with the proposal here?

yes agree

[rlinoz]

Ok, assigning @bernhardoj then, thanks!

[situchan]

Please assign me here too

[bernhardoj]

PR is ready

cc: @situchan

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

• Fix report screen blinking after updating the receipt #34403

If no regressions arise, payment will be issued on 2024-01-25. 🎊

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

• @bernhardoj requires payment (Needs manual offer from BZ)
• @situchan requires payment (Needs manual offer from BZ)

[melvin-bot]

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

[rlinoz]

I forgot to add the bug label before.

@trjExpensify could you please handle the payment?

[trjExpensify]

Sure thing! Confirming payments as follows:

$500 - @situchan for C+
$500 - @bernhardoj for the fix

Let me know if that's correct and I'll ship the offers.

[rlinoz]

That does seem correct!

[trjExpensify]

Cool, offers sent!

[trjExpensify]

@bernhardoj - paid!

[trjExpensify]

@situchan - paid. Closing!