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.

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

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

Sending through triage

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

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

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

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

What alternative solutions did you explore? (Optional)

We can remove the stateNum inside the optimisticData

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

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

Go away Melvin

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

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

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

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

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

@akinwale Bump ^

Bump @akinwale

Same

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?

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

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)

@akinwale next up to the review the proposal above!

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

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

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

Not overdue, I will review this tomorrow.

Thanks @techievivek

Looks like this already got fixed somewhere else? @ijmalik are you able to reproduce this now?

Yeah, just tested with both pay with Expensify and pay elsewhere and both worked without any duplication.

Going to ask QA to confirm if they can reproduce it or not.

Requested for re-test here: https://expensify.slack.com/archives/C9YU7BX5M/p1734512368639129

Looks like this already got fixed somewhere else? @ijmalik are you able to reproduce this now?

Hi @techievivek,
Thank you for checking. I am still able to reproduce the issue. Please find the attached video for your reference.

Yeah, just tested with both pay with Expensify and pay elsewhere and both worked without any duplication.

Hi @techievivek,

Could you please confirm if the prerequisite actions were performed before testing?

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

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

Still reproducible

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

@akinwale, @greg-schroeder, @techievivek Eep! 4 days overdue now. Issues have feelings too...

Not overdue, pushing the backend fix today.

Pushed the backend changes for this, we will not need any frontend changes afterwards.