[Hold for payment 2024-09-24][$250] Search - Receipt thumbnail for invoice has plus icon when receipt cannot be added to invoice

[IuliiaHerets]

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: v9.0.20-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #47103
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Send invoice.
3. Send an invoice to anyone.
4. Navigate to https://staging.new.expensify.com/search?q=type%3Ainvoice%20status%3Aall%20sortBy%3Adate%20sortOrder%3Adesc&isCustomQuery=false

Expected Result:

The receipt thumbnail should be the one with slash since receipt cannot be added to the invoice.

Actual Result:

The receipt thumbnail is the one with plus icon when receipt cannot be added to the invoice.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

20240814_152129.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01aa6135aceb8a13a1
• Upwork Job ID: 1826302641073396964
• Last Price Increase: 2024-08-28
• Automatic offers:
• FitseTLT | Contributor | 103739745

Issue Owner

Current Issue Owner: @danieldoglas

[melvin-bot]

Triggered auto assignment to @OfstadC (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 #vip-bills

[IuliiaHerets]

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

[daledah]

Proposal

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

The receipt thumbnail is the one with plus icon when receipt cannot be added to the invoice.

What is the root cause of that problem?

We did not cover the case of invoice:

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 81 in d5904ba

const canModifyReceipt = isViewAction && transactionItem.canDelete;

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

Add a check for is invoice to the above condition && transactionItem.reportType !== CONST.REPORT.TYPE.INVOICE.

[daledah]

Proposal Updated

• Add code changes

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-08-14 16:04:06 UTC.

Proposal

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

Receipt thumbnail for invoice has plus icon when receipt cannot be added to invoice

What is the root cause of that problem?

Currently to show the plus icon (which indicates the user can edit receipt) we are depending on transactionItem.canDelete

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 81 in d5904ba

const canModifyReceipt = isViewAction && transactionItem.canDelete;

which doesn't appropriately determine if the receipt is editable

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

When the user opens the transaction from search, they will see the transaction in money request view which has the correct method inside it to determine if the receipt can be edited. What we should do is use the logic we use in money request view to determine if the receipt is editable

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 198 to 199 in 4496333

	const canEditReceipt = canUserPerformWriteAction && ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT);
	const hasReceipt = TransactionUtils.hasReceipt(transaction);

  const parentReportAction = getIOUActionForReportID(transactionItem.reportID, transactionItem.transactionID);
    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID ?? '-1'}`);
    const canUserPerformWriteAction = !!ReportUtils.canUserPerformWriteAction(report);
    const canEditReceipt = canUserPerformWriteAction && ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT);

    const canModifyReceipt = isViewAction && canEditReceipt;

What alternative solutions did you explore? (Optional)

We can also feed a new prop canEditReceipt from BE which is calculated with the correct logic as above and we can update it from frontend as

    const canModifyReceipt = isViewAction && transactionItem.canEditReceipt;

Note: fixing it with checking if the report type is not invoice transactionItem.reportType !== CONST.REPORT.TYPE.INVOICE will only fix this specific case and will not prevent other cases because it is not based on the correct logic to determine canEditReceipt as indicated above.

[OfstadC]

Asking about this in Slack

[OfstadC]

Being discussed here