[$250] Attempting to pay an employee with no deposit account requires the admin to click "Pay with Expensify" twice, resulting in duplicated confirmation messages

[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: 9.0.20-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: https://expensify.testrail.io/index.php?/tests/view/4706616
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Use Regions bank
Username: user_good | Password: pass_good
Account type: Plaid Saving (2nd option)
CompanyName: Alberta Bobbeth Charleson
CompanyTaxID: 123456789
First Name: Alberta
Last Name: Charleson
Last SSN numbers: 3333

Setup - NewDot

1. Sign-up for a new account on expensify.com using a Gmail account > choose 1-9 in the qualifiers > get redirected to NewDot
2. Choose the "Manage my team's expenses" path in the onboarding modal to create a workspace on completion
3. Go to Settings > Workspaces > Click the workspace > Workflows > Enable approvals
4. Click "Connect bank account" to add a fully verified VBBA using the details above
5. Navigate to the Members tab of the workspace settings
6. Invite a new user as an employee (must be Gmail)
7. Verify the user workspace chat is displayed in the LHN

Steps:

1. As Employee - Submit expenses in workspace chat
2. As Admin - Go to the expense report, approve it
3. Click Pay with Expensify (observe button still stays on the screen)
4. Click Pay with Expensify again (button disappears after second click)

Expected Result:

Expense payment should be initiated after a single click of the Pay with Expensify button. Confirmation messages should only be displayed once for both admin and employee.

*Note that payment is on hold until the employee adds a bank account.

Actual Result:

Expense payment is initiated only the Pay with Expensify button is clicked twice. Confirmation messages are displayed twice for both admin and employee.

*Note that payment is on hold until the employee adds a bank account.

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

Bug6538223_1720635555826.video_06.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011007936f05f04497
• Upwork Job ID: 1826365707781713597
• Last Price Increase: 2024-12-11

Issue Owner

Current Issue Owner: @

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

[melvin-bot]

@greg-schroeder Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011007936f05f04497

[greg-schroeder]

Sending through triage

[melvin-bot]

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

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-08-24 08:38:02 UTC.

Proposal

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

Expenses - Double Click requested & messages on Expensify Payment to No BA Employee

What is the root cause of that problem?

When we click the approve button we invoke the approveMoneyRequest function, and the approveMoneyRequest function set the optimistic data the stateNum property to 3 which meaning the expense is approved without waiting until the API completely finish

App/src/libs/actions/IOU.ts

Lines 6918 to 6931 in 42bed64

	const optimisticIOUReportData: OnyxUpdate = {
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport?.reportID}`,
	value: {
	...expenseReport,
	lastMessageText: ReportActionsUtils.getReportActionText(optimisticApprovedReportAction),
	lastMessageHtml: ReportActionsUtils.getReportActionHtml(optimisticApprovedReportAction),
	stateNum: predictedNextState,
	statusNum: predictedNextStatus,
	pendingFields: {
	partial: full ? null : CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	},
	},
	};

And the Pay button briefly show because the expense is approved and the current isWaitingOnBankAccount is false

App/src/libs/actions/IOU.ts

Lines 6855 to 6865 in 42bed64

	return (
	isPayer &&
	!isOpenExpenseReport &&
	!iouSettled &&
	!iouReport?.isWaitingOnBankAccount &&
	reimbursableSpend !== 0 &&
	!isChatReportArchived &&
	!isAutoReimbursable &&
	!shouldBeApproved &&
	!isPayAtEndExpenseReport
	);

But after the approveMoneyRequest API finished, the BE response the isWaitingOnBankAccount property to true because i think we need to wait until the employee add the Bank Account, and if we wait a little bit of time we can see that the Pay button will disappear

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

I know that this is not as the Expected Result which we need still to display the Pay button

One click wot Pay with Expensive should be enough. Confirmation messages under Admin and Employee should be displayed only once too

But i think we can't display the pay button because the BE returning the isWaitingOnBankAccount to true because we need to wait until the employee add the Bank account unless we remove the checking for isWaitingOnBankAccount

But here's my solution that will resolved the Pay button briefly appear and disappear
We can add new value inside the successData variable inside the approveMoneyRequest function that tell that the approved is successfully completed, and then we can check inside the canIOUBePaid function on the returning statement including that property

App/src/libs/actions/IOU.ts

Lines 6948 to 6967 in 42bed64

	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport?.reportID}`,
	value: {
	[optimisticApprovedReportAction.reportActionID]: {
	pendingAction: null,
	},
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport?.reportID}`,
	value: {
	pendingFields: {
	partial: null,
	},
	},
	},
	];

What alternative solutions did you explore? (Optional)

We can remove the stateNum inside the optimisticData

[NJ-2020]

I know my above proposal will not show the pay button because the BE returning the isWaitingOnBankAccount to true because we need to wait until the employee add the Bank account unless we remove the checking for isWaitingOnBankAccount

But my proposal will fix the Pay button briefly appear and then disappear

cc: @akinwale @greg-schroeder

[greg-schroeder]

Thanks for the extra context @NJ-2020 - next up is @akinwale to review

[greg-schroeder]

Go away Melvin

[trjExpensify]

Have a feeling this might have something to do with approvals in #wave-control perhaps. CC'ing @marcochavezf for vis.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@akinwale @greg-schroeder this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@akinwale, @greg-schroeder Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[NJ-2020]

@akinwale Bump ^

[greg-schroeder]

Bump @akinwale

[greg-schroeder]

Any thoughts on updated proposal @NJ-2020?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[techievivek]

Not overdue, waiting for the proposals.

[melvin-bot]

@akinwale, @greg-schroeder, @techievivek Whoops! This issue is 2 days overdue. Let's get this updated quick!

[techievivek]

Bumped in slack for proposals https://expensify.slack.com/archives/C01GTK53T8Q/p1733208086766289

[greg-schroeder]

Thanks @techievivek

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[greg-schroeder]

Still awaiting outcome of Slack conversation

[greg-schroeder]

Same

[ijmalik]

Proposal

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

When attempting to pay an employee without a deposit account, the admin is required to click "Pay with Expensify" twice, leading to duplicate confirmation messages.

What is the root cause of that problem?

App/src/libs/actions/IOU.ts

Line 7103 in 7925c9b

!iouReport?.isWaitingOnBankAccount &&

Step-1

When we press Approve button, Pay with Expensify button immediately appear optimistically without waiting API-Response-Approve.
In this response "isWaitingOnBankAccount": false. So Pay with Expensify button stay their due to above condition

Step-2

When we first time press Pay with Expensify button, Payment complete message shown and Pay with Expensify button hidden optimistically.

In the API PayMoneyRequest Response "isWaitingOnBankAccount": false. So Pay with Expensify button come back and shown again due to same above condition

Step-3

When we second time press Pay with Expensify button, Payment complete message again shown and Pay with Expensify button hidden optimistically.
In the Second API PayMoneyRequest Response "isWaitingOnBankAccount": true. So Pay with Expensify button remains hidden due to same above condition.

So root cause is that in Step-2 response has "isWaitingOnBankAccount": false

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

In Step-2 server response with "isWaitingOnBankAccount" having its value true

What alternative solutions did you explore? (Optional)

In the First API PayMoneyRequest Response it has action "REIMBURSEMENTQUEUED". If payment is already queued then Pay with Expensify button should not be shown

Replace

App/src/libs/actions/IOU.ts

Lines 7098 to 7110 in 7925c9b

	const isPayAtEndExpenseReport = ReportUtils.isPayAtEndExpenseReport(iouReport?.reportID, transactions);
	return (
	isPayer &&
	!isOpenExpenseReport &&
	!iouSettled &&
	!iouReport?.isWaitingOnBankAccount &&
	reimbursableSpend !== 0 &&
	!isChatReportArchived &&
	!isAutoReimbursable &&
	!shouldBeApproved &&
	!isPayAtEndExpenseReport
	);
	}

With

    const isPayAtEndExpenseReport = ReportUtils.isPayAtEndExpenseReport(iouReport?.reportID, transactions);
    const reimbursementQueuedActions = getReimbursementQueuedActions(iouReport?.reportID);
    const hasReimbursementQueuedActions = reimbursementQueuedActions.length > 0;
    return (
        isPayer &&
        !isOpenExpenseReport &&
        !iouSettled &&
        !iouReport?.isWaitingOnBankAccount &&
        !hasReimbursementQueuedActions &&
        reimbursableSpend !== 0 &&
        !isChatReportArchived &&
        !isAutoReimbursable &&
        !shouldBeApproved &&
        !isPayAtEndExpenseReport
    );
}

/**
 * Retrieves all reimbursement queued actions for a given IOU report ID.
 *
 * @param {string} iouReportID - The ID of the IOU report.
 * @returns {Array<ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_QUEUED>>} - List of reimbursement queued actions.
 */
function getReimbursementQueuedActions(
    iouReportID: string
): Array<ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_QUEUED>> {
    // Retrieve the report actions for the given report ID, defaulting to an empty object if none exist.
    const reportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReportID}`] ?? {};

    // Filter and return only the reimbursement queued actions.
    return Object.values(reportActions).filter((reportAction): reportAction is ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_QUEUED> => 
        ReportActionsUtils.isReimbursementQueuedAction(reportAction)
    );
}

Before Change:
https://drive.google.com/file/d/1c3MxrBpKqG0SMqRQHagKfQ5LpBAbGIX5/view?usp=sharing

After Change (alternative solutions)

47503-3-Local-AfterCodeChange.mp4

[greg-schroeder]

@akinwale next up to the review the proposal above!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[akinwale]

@ijmalik Can you confirm that your proposed solution would work based on this comment?

@techievivek Is the backend implementation complete and ready for testing?

[ijmalik]

@ijmalik Can you confirm that your proposed solution would work based on this comment?

Hi @akinwale,

Yes, I confirm that my proposed solution is expected to work as intended. I have tested it thoroughly in my local environment to ensure its accuracy and functionality.

Please feel free to reach out if you have any additional questions or concerns.

[melvin-bot]

@akinwale, @greg-schroeder, @techievivek Whoops! This issue is 2 days overdue. Let's get this updated quick!

[techievivek]

Not overdue, I will review this tomorrow.