[Awaiting Payment] [$250] Split & Invoice -Preview shows empty receipt placeholder when there is no way to add a receipt

[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.71-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
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. Go to workspace chat.
3. Click + > Split expense > Manual.
4. Submit a split manual expense.
5. Note that the split preview has an empty receipt placeholder when there is no option to manually add a receipt to the split details.
6. Go to FAB > Send invoice.
7. Send an invoice to anyone.
8. Note that the invoice preview also has an empty receipt placeholder when it is not possible to add a receipt to invoice.

Expected Result:

Empty receipt placeholder should not be displayed for split and invoice preview because there is no option to add a receipt in the first place.

Actual Result:

Empty receipt placeholder is displayed for split and invoice preview when there is no option to add a receipt in the first place.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6683822_1733279800030.receipt.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864292349376469824
• Upwork Job ID: 1864292349376469824
• Last Price Increase: 2024-12-11
• Automatic offers:
• rojiphil | Reviewer | 105381426
• Krishna2323 | Contributor | 105381429

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

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

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

[melvin-bot]

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

[melvin-bot]

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

[garrettmknight]

I don't think we'll need to block the deploy for this fix.

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-12-04 13:06:23 UTC.

Proposal

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

Empty receipt placeholder is displayed for split and invoice preview when there is no option to add a receipt in the first place.

What is the root cause of that problem?

We always show the ReportActionItemImages. When the transaction doesn't have the receipt, isEmptyReceipt is true and this component will display the ReceiptEmptyState

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 351 in 1462048

<ReportActionItemImages

https://github.com/Expensify/App/blob/20b4c7db47969f7d2209f1c0b8fd765ce883f92c/src/components/ReportActionItem/ReportPreview.tsx#L475C1-L480C27

App/src/components/ReportActionItem/ReportActionItemImages.tsx

Line 87 in 361a024

isEmptyReceipt={isEmptyReceipt}

App/src/components/ReceiptImage.tsx

Lines 111 to 115 in 361a024

	if (isEmptyReceipt) {
	return (
	<ReceiptEmptyState
	isThumbnail
	onPress={onPress}

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

We should hide the receipt component if the transaction doesn't have the receipt and it's split in MoneyRequestPreviewContent

const shouldHideReceipt = !hasReceipt && isBillSplit;
{!shouldHideReceipt && (
    <ReportActionItemImages
        images={receiptImages}
        isHovered={isHovered || isScanning}
        size={1}
        onPress={shouldDisableOnPress ? undefined : onPreviewPressed}
    />
)}

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 351 in 1462048

<ReportActionItemImages

And hide it in ReportPreview if it's an invoice

{!isInvoiceRoom && (
    <ReportActionItemImages
        images={lastThreeReceipts}
        total={allTransactions.length}
        size={CONST.RECEIPT.MAX_REPORT_PREVIEW_RECEIPTS}
        onPress={openReportFromPreview}
    />
)}

https://github.com/Expensify/App/blob/20b4c7db47969f7d2209f1c0b8fd765ce883f92c/src/components/ReportActionItem/ReportPreview.tsx#L475C1-L480C27

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

It's a UI bug and I don't think we need a test case here.

Or we can create a util shouldHideReceipt, use it here and add some tests to verify that it works as expected for some cases:

• The transaction has receipt

• The transaction has no receipt and the the iou report is money request report or it's a track expense action

• The transaction has no receipt and it's a split bill or send invoice

What alternative solutions did you explore? (Optional)

[rojiphil]

@mkzie2 Thanks for your proposal. The RCA is correct as we are showing the receipt preview without checking if we can show receipt preview or not. However, instead of focusing on the condition to show, can you please update the proposal to focus on when not to show (i.e. when split and invoice preview).

[mkzie2]

@rojiphil Updated my proposal with the condition to hide the receipt.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-12-04 14:28:36 UTC.

Proposal

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

Split & Invoice -Preview shows empty receipt placeholder when there is no way to add a receipt

What is the root cause of that problem?

• We try to get the receipts of the last three transactions and if the transaction does not have any receipt, we return {isEmptyReceipt: true} from getThumbnailAndImageURIs and when the array is passed to ReportActionItemImages the ReportActionItemImages will render an empty placeholder if isEmptyReceipt is true
  

  App/src/components/ReportActionItem/ReportPreview.tsx

  Lines 176 to 177 in 0296f80

  	const lastThreeTransactions = allTransactions.slice(-3);
  	const lastThreeReceipts = lastThreeTransactions.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}));

  
  

  App/src/components/ReportActionItem/ReportPreview.tsx

  Lines 475 to 480 in 0296f80

  	<ReportActionItemImages
  	images={lastThreeReceipts}
  	total={allTransactions.length}
  	size={CONST.RECEIPT.MAX_REPORT_PREVIEW_RECEIPTS}
  	onPress={openReportFromPreview}
  	/>

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

• We should a the same condition used in MoneyRequestView to show the empty state and using the condition we will filter out the transactions which doesn't have an receipt and receipt can't be updated/added to it.
  

  App/src/components/ReportActionItem/MoneyRequestView.tsx

  Lines 362 to 364 in 0296f80

  	const isReceiptAllowed = !isPaidReport && !isInvoice;
  	const shouldShowReceiptEmptyState =
  	isReceiptAllowed && !hasReceipt && !isApproved && !isSettled && (canEditReceipt || isAdmin || isApprover || isRequestor) && (canEditReceipt || ReportUtils.isPaidGroupPolicy(report));

    // This is just pseudocode, we can refactor this in the PR.
    const isInvoice = ReportUtils.isInvoiceReport(iouReport);
    const canUserPerformWriteAction = !!ReportUtils.canUserPerformWriteAction(iouReport);
    const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
    const isApprover = ReportUtils.isMoneyRequestReport(iouReport) && iouReport?.managerID !== null && session?.accountID === iouReport?.managerID;
    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
    const isRequestor = currentUserPersonalDetails.accountID === action?.actorAccountID;
    const canEditReceipt = canUserPerformWriteAction && ReportUtils.canEditFieldOfMoneyRequest(action, CONST.EDIT_REQUEST_FIELD.RECEIPT);

    const isSettled = ReportUtils.isSettled(iouReport?.reportID);
    const shouldShowReceiptEmptyState =
        !isInvoice && !isApproved && !isSettled && (canEditReceipt || isAdmin || isApprover || isRequestor) && (canEditReceipt || ReportUtils.isPaidGroupPolicy(iouReport));
    const lastThreeTransactions = allTransactions.slice(-3).filter((t) => TransactionUtils.hasReceipt(t) || shouldShowReceiptEmptyState);
     const lastThreeReceipts = lastThreeTransactions.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}));

• We will hide ReportActionItemImages if lastThreeReceipts length is 0 and in MoneyRequestPreviewContent we will return empty array when we shouldShowReceiptEmptyState condition is not matched and similarly we will not render ReportActionItemImages when receiptImages length is 0.
  

  App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

  Line 178 in 361a024

  const receiptImages = [{...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}];

  
  

  App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

  Lines 351 to 356 in 361a024

  	<ReportActionItemImages
  	images={receiptImages}
  	isHovered={isHovered || isScanning}
  	size={1}
  	onPress={shouldDisableOnPress ? undefined : onPreviewPressed}
  	/>

• We can create a util function for getting the value of shouldShowReceiptEmptyState because it will be used in multiple places.
• We also need to do the same changes in MoneyRequestPreviewContent.tsx

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?


• If we add a new util function for checking if we can show the receipt empty view or not then we can add some tests for the util function with some different type of IOU reports.

What alternative solutions did you explore? (Optional)

[Krishna2323]

@rojiphil could you please check my proposal? Thanks!

[rojiphil]

@mkzie2 @Krishna2323 Thanks both for your proposals. However, your proposals lack clarity on both the root cause and the solution and is unacceptable to me in its current form. Can you please be more precise with respect to the root cause and solution?

[Krishna2323]

@rojiphil, Proposal Updated.

[mkzie2]

Updated proposal.

[melvin-bot]

📣 @rojiphil 🎉 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]

📣 @Krishna2323 🎉 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 📖

[melvin-bot]

@garrettmknight @rojiphil @lakchote @Krishna2323 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!

[Krishna2323]

PR will be up within 24 hours.

[Krishna2323]

@rojiphil PR is ready for review ^, sorry for delay🙏🏻

[melvin-bot]

This issue has not been updated in over 15 days. @garrettmknight, @rojiphil, @lakchote, @Krishna2323 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[garrettmknight]

Still working on the PR.

[garrettmknight]

I just chatted with @dannymcclain about this. It turns out this is an intentional result of our design framework, and it's going to change in the near future with a few other projects.

Sorry for the confusion! I'll still pay out full for this since there was so much work done. @Krishna2323 please close your PR when you get a chance.

[Krishna2323]

@garrettmknight, I have closed the PR, thanks for confirmation and payment🙏🏻.

[garrettmknight]

Payment Summary:

• Contributor: @Krishna2323 $250 via Upwork
• Reveiwer: @rojiphil $250 via Upwork