[Pay meow][$500] [Held requests] Pay with Expensify button does not include amount after approving held request

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

issue found when validating #33124
Version Number: 1.4.58-2
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
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:

Precondition:

• Admin and employee are in the Collect workspace.

1. [Employee] Request money from the workspace chat.
2. [Employee] Create a money request
3. [Employee] Hold the request.
4. [Admin] Go to expense report.
5. [Admin] Click Approve button.
6. [Admin] Approve all the request.

Expected Result:

After approving all the held request, Pay with Expensify button will update to include the total amount (this is the case when approving two requests where one of the requests is held).

Actual Result:

After approving all the held request, Pay with Expensify button does not include the total amount. It only includes the total amount after visiting the transaction thread.

Workaround:

unknonw

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

Bug6433521_1711916993122.20240401_041807.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e05ae27f1f02458c
• Upwork Job ID: 1774870331469250560
• Last Price Increase: 2024-04-01
• Automatic offers:
• hoangzinh | Reviewer | 0

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @neil-marcellini (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.

[nkdengineer]

Proposal

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

After approving all the held request, Pay with Expensify button does not include the total amount. It only includes the total amount after visiting the transaction thread.

What is the root cause of that problem?

We set the formattedAmount prop as empty string if all transactions are held. After we approve the money request, the hold reason isn't cleared in transaction so this check is still true and Pay with Expensify button doesn't include amount.

When we open the transaction thread report, OpenReport is called and it returns the hold reason of transaction as empty. It leads this check is false and then the amount appears after going back from transaction thread report.

App/src/components/MoneyReportHeader.tsx

Line 155 in c848cb6

formattedAmount={!ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID) ? displayedAmount : ''}

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

Since all hold transactions will be un-held after we approve the money request, we can add the check approve report here to display the amount if the report is approved

formattedAmount={(!ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID) || ReportUtils.isReportApproved(moneyRequestReport))? displayedAmount : ''}

App/src/components/MoneyReportHeader.tsx

Line 155 in c848cb6

formattedAmount={!ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID) ? displayedAmount : ''}

App/src/components/MoneyReportHeader.tsx

Line 187 in c848cb6

formattedAmount={!ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID) ? displayedAmount : ''}

What alternative solutions did you explore? (Optional)

In approveMoneyRequest function, we can set the hold comment of all transactions to empty in optimisticData and then

revert it to the current hold comment in failureData

App/src/libs/actions/IOU.ts

Line 4609 in c848cb6

function approveMoneyRequest(expenseReport: OnyxTypes.Report | EmptyObject, full?: boolean) {

Alternatively, we can hide the approve button if all requests are held

[allgandalf]

App/src/components/ProcessMoneyReportHoldMenu.tsx

Lines 52 to 54 in 4e6bd2d

	const onSubmit = (full: boolean) => {
	if (isApprove) {
	IOU.approveMoneyRequest(moneyRequestReport, full);

Proposal

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

After we approve a money request, we don't see the amount in pay with expensify button.

What is the root cause of that problem?

After the recent PR, we can approve held requests as well

Now when we approve a held request we essentially call submit in ProcessMoneyReportHoldMenu:

App/src/components/ProcessMoneyReportHoldMenu.tsx

Lines 52 to 54 in 4e6bd2d

	const onSubmit = (full: boolean) => {
	if (isApprove) {
	IOU.approveMoneyRequest(moneyRequestReport, full);

Here we check if the request is a approve one, and if yes then we call approveMoneyRequest and we pass the second parameter as full now we take full variable from the below:

App/src/components/ProcessMoneyReportHoldMenu.tsx

Lines 69 to 70 in 4e6bd2d

	onFirstOptionSubmit={() => onSubmit(false)}
	onSecondOptionSubmit={() => onSubmit(true)}

Now you can see that as approve is a first option we set the value of full as false, this same value is passed to approveMoneyRequest and we never really approve these request, as we will only approve requests if we pass the first option as true.

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

We need to update the submit function to always pass true if we have to approve a request:
The full condition was passed for some other case IMO and we just used it for approve request as well:

const onSubmit = (full: boolean) => {
        if (isApprove) {
            IOU.approveMoneyRequest(moneyRequestReport, true);
        } else if (chatReport && paymentType) {
            IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport, full);
        }
        onClose();
    };

What alternative solutions did you explore? (Optional)

If the first and second options are used to determine whether to approve full or partial transaction, then we can have a check of how many buttons exist, if only one button exists then we should update the approveMoneyRequest such that it will pass true if we have only one button and will pass full is we have 2 options