[$250] Held expense - Negative amount in the payment button when the unheld expense comes from self

[IuliiaHerets]

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.46-4
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. [User A] Submit $100 to User B.
3. [User B] Submit $20 to User A.
4. [User B] Hold the expense submitted by User A.
5. [User B] Go back to expense report.
6. [User B] Note that the payment button has negative amount.

Expected Result:

The payment button will not have negative amount.

Actual Result:

The payment button shows negative amount. Error shows up when trying to pay the negative amount.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6629337_1728468290060.20241009_175957.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021844594617993665700
• Upwork Job ID: 1844594617993665700
• Last Price Increase: 2024-10-11
• Automatic offers:
• akinwale | Reviewer | 104459635
• mkzie2 | Contributor | 104459637

Issue Owner

Current Issue Owner: @akinwale

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

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

[mkzie2]

Proposal

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

The payment button shows negative amount. Error shows up when trying to pay the negative amount.

What is the root cause of that problem?

If any transaction is held, we display the unheld option first without checking whether the nonHeldAmount is negative or not

App/src/components/MoneyReportHeader.tsx

Line 147 in 5d25b40

const displayedAmount = isAnyTransactionOnHold && canAllowSettlement ? nonHeldAmount : formattedAmount;

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

1. We can return other data like isNegativeNonHeldAmount in this function that will be true if the unheldTotal is a negative amount

if (hasUpdatedTotal(iouReport, policy) && hasPendingTransaction) {
    const unheldTotal = reportTransactions.reduce((currentVal, transaction) => currentVal + (!TransactionUtils.isOnHold(transaction) ? transaction.amount : 0), 0);

    return [
        CurrencyUtils.convertToDisplayString(unheldTotal * coefficient, iouReport?.currency),
        CurrencyUtils.convertToDisplayString((iouReport?.total ?? 0) * coefficient, iouReport?.currency),
        unheldTotal * coefficient < 0,
    ];
}

return [
    CurrencyUtils.convertToDisplayString((iouReport?.unheldTotal ?? 0) * coefficient, iouReport?.currency),
    CurrencyUtils.convertToDisplayString((iouReport?.total ?? 0) * coefficient, iouReport?.currency),
    (iouReport?.unheldTotal ?? 0) * coefficient < 0,
];

App/src/libs/ReportUtils.ts

Lines 7497 to 7499 in 5d25b40

	function getNonHeldAndFullAmount(iouReport: OnyxEntry<Report>, policy: OnyxEntry<Policy>): string[] {
	const reportTransactions = reportsTransactions[iouReport?.reportID ?? ''] ?? [];
	const hasPendingTransaction = reportTransactions.some((transaction) => !!transaction.pendingAction);

2. Then we will check if isNegativeNonHeldAmount is true we should display the formattedAmount

const displayedAmount = isAnyTransactionOnHold && canAllowSettlement && !isNegativeNonHeldAmount ? nonHeldAmount : formattedAmount; 

App/src/components/MoneyReportHeader.tsx

Line 147 in 5d25b40

const displayedAmount = isAnyTransactionOnHold && canAllowSettlement ? nonHeldAmount : formattedAmount;

3. We also need to pass nonHeldAmount as undefined if isNegativeNonHeldAmount is true so we will not display the wrong paid-only option

nonHeldAmount={!hasOnlyHeldExpenses && !isNegativeNonHeldAmount  ? nonHeldAmount : undefined} 

App/src/components/MoneyReportHeader.tsx

Line 406 in 5d25b40

nonHeldAmount={!hasOnlyHeldExpenses ? nonHeldAmount : undefined}

Or we can add a !isNegativeNonHeldAmount check in these places to prevent showing the choose approve/paid option

App/src/components/MoneyReportHeader.tsx

Line 176 in 5d25b40

} else if (isAnyTransactionOnHold) {

App/src/components/MoneyReportHeader.tsx

Line 161 in 5d25b40

} else if (isAnyTransactionOnHold) {

We need to do the same fix in ReportPreview

What alternative solutions did you explore? (Optional)

If we don't want to return isNegativeNonHeldAmount in getNonHeldAndFullAmount function, we can check inside each component

[melvin-bot]

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

[melvin-bot]

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

[Jaytechent]

Do I need to fund my account real time because I tested the web platform and it went well

I sent 100 from user A, den user B submit 20. And user B still return 80( no negative ) and paid button didn't encounter error, I wanted to send video on upwork but it seems the handler may not reply me and in turn waste my connect and I can't afford to do that. Let me know if its solved or sth else.

[melvin-bot]

📣 @Jaytechent! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Jaytechent]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0128e4d43ce1ad1755

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

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

[stephanieelliott]

Thanks @Jaytechent! No, you should not need to fund the account. Did you Hold the $100 expense (step 4)? It doesn't look like you did, otherwise it would have a comment on it (the hold reason, which is required).

I was able to repro this:

[stephanieelliott]

@akinwale we have a proposal here -- can you review when you get a chance?

[stephanieelliott]

@akinwale we have a proposal #50497 (comment) -- can you review when you get a chance?

^^ bump @akinwale

[akinwale]

@stephanieelliott Thanks for the bump.

@mkzie2's proposal is adequate here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @Beamanator, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

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

[melvin-bot]

📣 @mkzie2 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[stephanieelliott]

Hey @akinwale this PR is awaiting your review, can you take a look?