[HOLD for Payment 2024-08-27] [$250] Invoice - Paying invoice as a business results in console error

[izarutskaya]

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: 9.0.18-7
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+nl405@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create two accounts on different tabs/devices
3. Create a workspace on each of the accounts
4. Send an invoice from account A to account B
5. On account B open the invoice and pay the invoice as a business

Expected Result:

No console errors appear

Actual Result:

Console error appears with the message "Cannot read properties of undefined (reading 'backButtonText"

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

Bug6566726_1723213373006.bandicam_2024-08-09_17-18-58-225.mp4

Bug6566726_1723213372999!staging.new.expensify.com-1723213166507.txt

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c50a9517130ce1f6
• Upwork Job ID: 1823064487894700426
• Last Price Increase: 2024-08-12
• Automatic offers:
• brunovjk | Reviewer | 103527458

Issue Owner

Current Issue Owner: @brunovjk

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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.

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

[izarutskaya]

We think this issue might be related to the #vip-bills

[thienlnam]

Looks like an App issue - though if the payment goes through not sure if this needs to be a blocker

[Krishna2323]

Proposal

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

Invoice - Paying invoice as a business results in console error

What is the root cause of that problem?

We are not using optional chaining operator when accessing backButtonText.

App/src/components/PopoverMenu.tsx

Line 152 in 085b3ad

const hasBackButtonText = !!previouslySelectedItem.backButtonText;

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

Update to !!previouslySelectedItem?.backButtonText;.

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

Paying invoice as business throws a console error.

What is the root cause of that problem?

The error comes from the back button rendering component.

App/src/components/PopoverMenu.tsx

Lines 149 to 153 in e6546d6

	const renderBackButtonItem = () => {
	const previousMenuItems = getPreviousSubMenu();
	const previouslySelectedItem = previousMenuItems[enteredSubMenuIndexes[enteredSubMenuIndexes.length - 1]];
	const hasBackButtonText = !!previouslySelectedItem.backButtonText;

The back button will show if we are on a sub menu.

App/src/components/PopoverMenu.tsx

Line 231 in e6546d6

{enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}

The way it works is, when we select an option that has a sub menu, the option index will be added to enteredSubMenuIndexes array. This 2 lines of code will get the sub-menu parent.

App/src/components/PopoverMenu.tsx

Lines 150 to 151 in e6546d6

	const previousMenuItems = getPreviousSubMenu();
	const previouslySelectedItem = previousMenuItems[enteredSubMenuIndexes[enteredSubMenuIndexes.length - 1]];

But in our case, the parent is undefined. Why?

The invoice payment method initially has 2 options, individual and business. When we pay the invoice as business, we optimistically change the invoice receiver type of the report to BUSINESS.

App/src/libs/actions/IOU.ts

Lines 6594 to 6599 in e6546d6

	if (ReportUtils.isIndividualInvoiceRoom(chatReport) && payAsBusiness && primaryPolicyID) {
	optimisticChatReport.invoiceReceiver = {
	type: CONST.REPORT.INVOICE_RECEIVER_TYPE.BUSINESS,
	policyID: primaryPolicyID,
	};
	}

Because of that, the individual option is not added anymore as the payment method

App/src/components/SettlementButton.tsx

Lines 219 to 221 in e6546d6

	if (ReportUtils.isIndividualInvoiceRoom(chatReport)) {
	buttonOptions.push({
	text: translate('iou.settlePersonal', {formattedAmount}),

leaving us the business as the only option. This triggers the popover menu re-render and when the back button component is trying to get the sub-menu parent, it fails and gets undefined.

[individual, business]
pay as business (parent index, 1)
pay elsewhere
[business]
re-rendered, trying to access index 1, undefined

But if we look at the popover component, we can see that there is already a logic to reset the sub-menu if the menu items/options are changed,

App/src/components/PopoverMenu.tsx

Lines 197 to 203 in e6546d6

	useEffect(() => {
	if (menuItems.length === 0) {
	return;
	}
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	}, [menuItems]);

or when the modal closes.

App/src/components/PopoverMenu.tsx

Lines 210 to 214 in e6546d6

	onClose={() => {
	setCurrentMenuItems(menuItems);
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	onClose();
	}}

But the menu items re-rendered happen earlier, so we still get the error.

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

Instead of using useEffect here, we can use useLayoutEffect which will be triggered before painting.

App/src/components/PopoverMenu.tsx

Lines 197 to 203 in e6546d6

	useEffect(() => {
	if (menuItems.length === 0) {
	return;
	}
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	setCurrentMenuItems(menuItems);
	}, [menuItems]);

[melvin-bot]

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

[melvin-bot]

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

[wildan-m]

Proposal

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

Paying the invoice as a business leads to a console error.

What is the root cause of that problem?

previouslySelectedItem might be undefined

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

No need to render if previouslySelectedItem undefined

src/components/PopoverMenu.tsx

    const renderBackButtonItem = () => {
        const previousMenuItems = getPreviousSubMenu();
        
        const previouslySelectedItem = previousMenuItems[enteredSubMenuIndexes[enteredSubMenuIndexes.length - 1]];
        
        if (!previouslySelectedItem) {
            return null;
        }

What alternative solutions did you explore? (Optional)

[brunovjk]

After testing, I think we can go with @bernhardoj's proposal. It effectively resolves the issue by ensuring the state is updated before rendering. I tested it and works fine in a quick test, but we can test it thoroughly in the PR.

Thank you for the proposals, @Krishna2323 and @wildan-m. While they addressed the symptom, they did not fully resolve the underlying cause.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @francoisl is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @brunovjk 🎉 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

[bernhardoj]

PR is ready

cc: @brunovjk

[brunovjk]

Note

The production deploy automation failed: This should be paid 8/27 according to #47639 prod deploy checklist, confirmed in #47488 (comment).

cc: @greg-schroeder

[brunovjk]

• [@brunovjk] The PR that introduced the bug has been identified. Link to the PR: N/A
• [@brunovjk] 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: N/A
• [@brunovjk] 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
• [@brunovjk] Determine if we should create a regression test for this bug. Yes
• [@brunovjk] 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.

Regression Test Proposal

• User B send invoice to user A
• User A open the invoice chat
• User A pay the invoice as business
• Verify there is no console error of "Cannot read properties of undefined (reading 'backButtonText..."
• Do we agree 👍 or 👎

[greg-schroeder]

Payment summary:

Contributor: @bernhardoj - $250 - You can make a manual request via ND
C+: @brunovjk - $250 - Paid via Upwork

[greg-schroeder]

Regression test filed

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj