[HOLD for payment 2024-01-02] [$500] mWeb - Expense - Red dot in preview does not disappear after filling in Amount and Merchant manually

[izarutskaya]

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: v1.4.5-7
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. Navigate to staging.new.expensify.com
2. Go to workspace chat > + > Request money > Scan.
3. Create a scan request with a receipt that will fail smartscanning.
4. Open expense report page while waiting for scanning to fail. (Can switch between expense report and request details page to check if it has failed).
5. When the scanning fails, go to expense details page.
6. Manually enter Amount and Merchant.
7. Tap on the back button on the top right twice to return to workspace chat.

Expected Result:

The red dot on the expense preview in the main workspace chat will disappear because amount and merchant are filled manually.

Actual Result:

The red dot on the expense preview in the main workspace chat does not disappear unless the workspace chat is refreshed or revisited.

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

Bug6295530_1701322572303.Screen_Recording_20231130_121752_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0175e10e5dd361820c
• Upwork Job ID: 1730195296934002688
• Last Price Increase: 2023-11-30
• Automatic offers:
• hoangzinh | Reviewer | 27959389
• dukenv0307 | Contributor | 27959390

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[dukenv0307]

Proposal

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

Red dot in preview does not disappear after filling in Amount and Merchant manually

What is the root cause of that problem?

When we go back to the chat report page, ReportPreview doesn't re-render because we don't subscribe transaction from Onyx

We only use iouReportID to get all transactions in hasMissingSmartscanFields to check the error.

App/src/components/ReportActionItem/ReportPreview.js

Line 130 in f1a3095

const hasErrors = hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID);

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

In ReportPreview, we should subscribe transactions from Onyx and we can use selector to get the necessary field like error field and others

transactions: {
    key: ONYXKEYS.COLLECTION.TRANSACTION
}

We can also use memo to only re-render this component when the transactions of IOUReport of this preview are changed.

What alternative solutions did you explore? (Optional)

Screen.Recording.2023-11-30.at.19.42.56.mov

[hoangzinh]

@dukenv0307 @alexpensify I tried to reproduce the bug, but I couldn't see any red dot after manually updating request amount + merchant.

Screen.Recording.2023-12-01.at.23.36.17.mov

I even watched the recording in GH description, but couldn't see any red dot after manually updating. Is there anything that I missed?

[dukenv0307]

@hoangzinh You should open chat report > iou report > transaction report.

Change merchant, amount.

Back to chat report you will see the red dot in report preview doesn't disappear.

[hoangzinh]

@dukenv0307 Thanks for your hints. I can reproduce the bug now. Your proposal looks good to me. You pointed out the correct root cause. And the overall solution makes sense. But I suggest we can apply onyxSubscribe technique here to subscribe to transaction's changes and recalculate ReportUtils.hasMissingSmartscanFields, therefore we don't need to load a whole transactions to each ReportPreview component and don't need to use memo.

Link to proposal #32256 (comment)

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @jasperhuangg, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @hoangzinh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[jasperhuangg]

Thanks for the proposal! @dukenv0307 seems straightforward, nice job!

[dukenv0307]

@hoangzinh The PR is ready for review.

[alexpensify]

Daily Update: The PR is in the review process!

[alexpensify]

Daily Update: The PR is moving along

[alexpensify]

The PR is still under review.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rlinoz]

https://github.com/Expensify/App/pull/32469/files#diff-90dbf92cac79a4d1c6199362686c19700554305c62fbbeadcaa509c3abe7e5a9R219

Missed passing props.action to areAllRequestsBeingSmartScanned

[alexpensify]

Heads up, I will be offline from Friday, December 22, to Thursday, January 4, 2024. I will not be actively watching over this GitHub during that period. If anything urgent is needed here, please ask for help in the #expensify-open-source Slack Room-- thanks!

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

• Subscribe transactions in report preview #32469

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

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @hoangzinh requires payment automatic offer (Reviewer)
• @dukenv0307 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:

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

[hoangzinh]

Regression Test Proposal

1. Go to any Chat report
2. Tap the Plus icon
3. Tap Request money
4. Tap Scan
5. Upload an invalid receipt image
6. Wait until the scan is complete
7. Go to the transaction thread report of this scan request
8. Update the amount of the request
9. Update the merchant of the request
10. Tap the Back button (left-arrow icon on small screen device or Device's back button) to go back to the IOU report
11. Tap the Back button again to back to the Chat report
12. Verify that the red dot in report preview disappears

Do we agree 👍 or 👎

[hoangzinh]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR => Display Smartscan errors #26155
• 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 => https://github.com/Expensify/App/pull/26155/files#r1438092124
• 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 => N/A
• Determine if we should create a regression test for this bug => Yes
• 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 => [HOLD for payment 2024-01-02] [$500] mWeb - Expense - Red dot in preview does not disappear after filling in Amount and Merchant manually #32256 (comment)

[alexpensify]

Here is the payment summary:

• External issue reporter - N/A
• Contributor that fixed the issue - @dukenv0307
• Contributor+ that helped on the issue and/or PR - @hoangzinh

Upwork Job: https://www.upwork.com/jobs/~0175e10e5dd361820c

Extra Notes regarding payment: Heads up, I'm OOO until January 4, but I will log in on Wednesday, January 3, to complete this payment process pending no regression. I've confirmed that everyone here is a pending hire, so all set here for the payment date.

[alexpensify]

Closing - everyone has been paid via Upwork and I closed the job there. The only remaining action is to add the regression test.