[$250] Invoice - 0.00 displayed on Pay button for invoice receiver

@MitchExpensify

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.52-5
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/5113365
Issue reported by: Applause Internal Team

Action Performed:

Go to https://staging.new.expensify.com/ and log in
Create a workspace if there is no any
Navigate to the workspace settings > More features
Enable the Invoice option
Click on FAB > Send invoice
Select an invoice receiver
Enter the company info and send the invoice
Log in with the invoice receiver account in incognito
Navigate to the invoice room

Expected Result:

The correct amount is displayed on the Pay button

Actual Result:

0.00 is displayed on the Pay button

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6642672_1729642693581.Recording__879.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021849917912281837951
Upwork Job ID: 1849917912281837951
Last Price Increase: 2024-11-29

Issue Owner

Current Issue Owner: @MitchExpensify

Issue Owner

Current Issue Owner: @NikkiWines

@MitchExpensify

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

We think that this bug might be related to #vip-bills

@MitchExpensify

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

Edited by proposal-police: This proposal was edited at 2024-11-05 08:36:07 UTC.

Proposal

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

0.00 displayed on Pay button for invoice receiver

What is the root cause of that problem?

We get the settlement amount using getSettlementAmount:

App/src/components/ReportActionItem/ReportPreview.tsx

Line 237 in f251dbc

const getSettlementAmount = () => {

We get the total reimbursableSpend to be displayed in the pay button form getMoneyRequestSpendBreakdown:

App/src/components/ReportActionItem/ReportPreview.tsx

Line 133 in f251dbc

    
           const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(iouReport);

We calculate reimbursableSpend using the formula:

App/src/libs/ReportUtils.ts

Line 2761 in f251dbc

const reimbursableSpend = totalDisplaySpend - nonReimbursableSpend;

But for a invoice report nonReimbursableSpend is going to be equal to the totalDisplaySpend as for invoices we request the amount from the user and not ask for reimbursement. So the value goes to zero and that is what is displayed on the FE.

This causes the 0 amount error

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

We should check if the current report is an invoice report and for that case should directly pass the totalDisplaySpend as that would be the requested invoice amount:

const reimbursableSpend = isInvoiceReport(report) ? totalDisplaySpend : totalDisplaySpend - nonReimbursableSpend;

We also need to update the below:

App/src/libs/actions/IOU.ts

Line 6798 in b87ec1f

let total = (iouReport?.total ?? 0) - (iouReport?.nonReimbursableTotal ?? 0);

To:

    let total = (iouReport?.total ?? 0) - (isInvoiceReport ? 0 : iouReport?.nonReimbursableTotal ?? 0);

And then in MoneyReportView we calculate the formattedOutOfPocketAmount in the wrong way, it should be totalDisplaySpend - nonReimbursableSpend as that is what is owed for reimbursement.

App/src/components/ReportActionItem/MoneyReportView.tsx

Line 62 in cd3f30f

    
           const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, report.currency);

    const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend - nonReimbursableSpend, report.currency);

What alternative solutions did you explore? (Optional)

Or when we get settlement amount below:

App/src/components/ReportActionItem/ReportPreview.tsx

Line 535 in f251dbc

formattedAmount={getSettlementAmount() ?? ''}

We can check if the current report is invoice and if so then call getDisplayAmount() for that case

Edited by proposal-police: This proposal was edited at 2024-11-04 16:27:36 UTC.

Proposal

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

0.00 displayed on Pay button for invoice receiver

What is the root cause of that problem?

Since the nonReimbursableTotal for invoice reports is the same as it's total, the reimbursableSpend, which is calculated from the ReportPreview.getMoneyRequestSpendBreakdown function, will be 0.

App/src/libs/ReportUtils.ts

Lines 2760 to 2761 in 5e975f5

    
           const totalDisplaySpend = totalSpend; 
        
           const reimbursableSpend = totalDisplaySpend - nonReimbursableSpend;

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

Let's create a condition in the ReportPreview and MoneyReportHeader components to display the total instead of the reimbursableSpend if the report is an invoice report.

App/src/components/ReportActionItem/ReportPreview.tsx

Line 246 in 5e975f5

    
           return CurrencyUtils.convertToDisplayString(reimbursableSpend, iouReport?.currency);

const formattedAmount = CurrencyUtils.convertToDisplayString(
         ReportUtils.isInvoiceReport(moneyRequestReport) ? moneyRequestReport.total : reimbursableSpend, 
         iouReport?.currency
);

App/src/components/MoneyReportHeader.tsx

Line 171 in aedbbde

    
           const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport?.currency);

return CurrencyUtils.convertToDisplayString(
         isInvoiceRoom ? totalDisplaySpend : reimbursableSpend, 
         iouReport?.currency
);

Finally, let's change how we calculate total in the getPayMoneyRequestParams function, like below, to only use the value of iouReport?.total by excluding the value of iouReport?.nonReimbursableTotal in the calculation only when if the report is an invoice report.

App/src/libs/actions/IOU.ts

Line 6798 in b87ec1f

let total = (iouReport?.total ?? 0) - (iouReport?.nonReimbursableTotal ?? 0);

let total = (iouReport?.total ?? 0) - (!isInvoiceReport && (iouReport?.nonReimbursableTotal ?? 0));

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

Lets fix!

@NikkiWines

@NikkiWines, @MitchExpensify, @dukenv0307 Eep! 4 days overdue now. Issues have feelings too...

@FitseTLT

@FitseTLT - Paid
@dukenv0307 - Waiting on acceptance

@NikkiWines

@NikkiWines, @MitchExpensify, @dukenv0307 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

@dukenv0307

Still waiting for you to accept the offer here @dukenv0307 https://www.upwork.com/nx/wm/offer/105160257

@MitchExpensify

@MitchExpensify Accepted thanks!

Paid thanks!

Navigation Menu

Repository navigation

[$250] Invoice - 0.00 displayed on Pay button for invoice receiver #51312

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

80 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const totalDisplaySpend = totalSpend;
	const reimbursableSpend = totalDisplaySpend - nonReimbursableSpend;

[$250] Invoice - 0.00 displayed on Pay button for invoice receiver #51312

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 23, 2024

IuliiaHerets commented on Oct 23, 2024

IuliiaHerets commented on Oct 23, 2024

twilight2294 commented on Oct 23, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Tony-MK commented on Oct 23, 2024

Proposal

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

What is the root cause of that problem?

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

melvin-bot commented on Oct 25, 2024

MitchExpensify commented on Oct 25, 2024

80 remaining items

melvin-bot commented on Dec 3, 2024

MitchExpensify commented on Dec 3, 2024

melvin-bot commented on Dec 5, 2024

MitchExpensify commented on Dec 5, 2024

dukenv0307 commented on Dec 6, 2024

MitchExpensify commented on Dec 11, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions