[HOLD for payment 2024-07-25] [$250] Pay someone - Paid system message is not highlighted when clicking on the message link

[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: 9.0-3.1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #43742

Action Performed:

1. Go to staging.new.expensify.com/
2. Go to FAB > Pay someone
3. Enter amount, select a user and pay them
4. Go to transaction thrad
5. Right click on the paid system message > Copy link
6. Paste the link in the transaction thread
7. Tap on the link

Expected Result:

The paid system message will be highlighted

Actual Result:

The paid system message is highlighted only briefly. The report loads briefly with skeleton and the message is no longer highlighted

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

Bug6526869_1719532851665.20240628_075834.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0166f7822923f5e0f7
• Upwork Job ID: 1806505240961845071
• Last Price Increase: 2024-06-28
• Automatic offers:
• hungvu193 | Reviewer | 102950113
• bernhardoj | Contributor | 102950114

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

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

[lanitochka17]

@marcaaron 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

[melvin-bot]

Current assignee @twisterdotcom is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

The paid system message is highlighted only briefly. The report loads briefly with skeleton and the message is no longer highlighted

What is the root cause of that problem?

When the iou report is the combine report, we always remove the reportActionID param here.

App/src/pages/home/ReportScreen.tsx

Lines 374 to 379 in 1d607ac

	useEffect(() => {
	if (!transactionThreadReportID || !route?.params?.reportActionID) {
	return;
	}
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID));
	}, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID]);

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

We shouldn't remove the reportActionID in the URL if the linked reportActionID is the current action of iou report. We can use linkedAction to check this

useEffect(() => {
    if (!transactionThreadReportID || !route?.params?.reportActionID || (linkedAction?.reportActionID && !ReportActionsUtils.isMoneyRequestAction(linkedAction)) || ReportActionsUtils.isSentMoneyReportAction(linkedAction)) {
            return;
        }
        return;
    }
    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID));
}, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID, linkedAction?.reportActionID]);

App/src/pages/home/ReportScreen.tsx

Lines 374 to 379 in 1d607ac

	useEffect(() => {
	if (!transactionThreadReportID || !route?.params?.reportActionID) {
	return;
	}
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID));
	}, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID]);

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

Paid system message is highlighted and immediately not highlighted when linking to the action.

What is the root cause of that problem?

We have an effect that will clear the report action ID from the params if the report is a one-transaction report.

App/src/pages/home/ReportScreen.tsx

Lines 374 to 379 in 1d607ac

	useEffect(() => {
	if (!transactionThreadReportID || !route?.params?.reportActionID) {
	return;
	}
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID));
	}, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID]);

This is to fix #40157. Basically, we don't allow users to link to the one-transaction report money request action, including the paid money action. But the paid money action is recently updated to always be shown in this PR, however, this issue isn't limited to paid money action, but to all actions in the report.

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

We need to update the effect logic to be stricter, so it only applies to money request action (except paid/sent) in a one-transaction report.

App/src/pages/home/ReportScreen.tsx

Lines 374 to 379 in 1d607ac

	useEffect(() => {
	if (!transactionThreadReportID || !route?.params?.reportActionID) {
	return;
	}
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID));
	}, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID]);

useEffect(() => {
    if (!transactionThreadReportID || !route?.params?.reportActionID || ReportActionsUtils.isSentMoneyReportAction(linkedAction) || !ReportActionsUtils.isMoneyRequestAction(linkedAction)) {
        return;
    }
    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(route?.params?.reportID));
}, [transactionThreadReportID, route?.params?.reportActionID, route?.params?.reportID]);

If the linked action is sent money action or if the linked action is not a money request action, we do nothing.

[hungvu193]

Reviewing shortly

[nkdengineer]

@hungvu193 After the update here #44588 (comment), my proposal will not cause this bug again.

[bernhardoj]

Open the PR but still in draft. Left a comment in the PR.

cc: @hungvu193

[hungvu193]

@hungvu193 After the update here #44588 (comment), my proposal will not cause this bug again.

@nkdengineer I'm not saying your updated proposal doesn't work, I don't think we need to accept comment linking for all actions of the IOU report as it's more of feature request.

====================================

Open the PR but still in draft. Left a comment in the PR.

cc: @hungvu193

@bernhardoj I replied in the PR.

[melvin-bot]

@twisterdotcom, @hungvu193, @marcaaron, @bernhardoj Huh... This is 4 days overdue. Who can take care of this?

[hungvu193]

PR is under review

[hungvu193]

Same

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

• Fix paid system message is not highlighted when clicking on the message link #44719

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

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

• @hungvu193 requires payment automatic offer (Reviewer)
• @bernhardoj requires payment through NewDot Manual Requests (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:

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

[bernhardoj]

I'll request in ND once payment is due.

[hungvu193]

• The PR that introduced the bug has been identified. Link to the PR: [CP Staging] fix: Blank page after returning to IOU report from thread and deleting the other request #40157
• 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/40157/files#r1690036809
• 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

Regression Test:

1. Go to any report and submit an expense.
2. Enter amount, select a user and pay them.
3. Click on that expense to open the thread.
4. Right click on the paid system message > Copy link.
5. Paste the link in the transaction thread.
6. Click on that link.
7. Verify that the paid system message is highlighted.

Do we 👍 or 👎 ?

[marcaaron]

LGTM

[twisterdotcom]

Payment Summary:

• @hungvu193 paid $250 here (Reviewer)
• @bernhardoj paid $250 via NewDot Manual Request (Contributor)

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj