[HOLD for payment 2025-01-07] [$125] Add placeholder thumbnail to expenses with no receipt

[dannymcclain]

Problem

Expenses that don’t have an attached receipt (or eReceipt/map preview) look much different than expenses that do. This can lead to confusion especially for report previews that have a mix of expenses with and without a receipt image.

Solution

Coming from this thread, let’s add a placeholder thumbnail to expense previews that don't have any type of receipt so they more closely match our other expense previews (receipt image, eReceipt, and map preview). We can reuse styles from other preview placeholders and create a nice, consistent preview for all expenses.

Additionally, let’s update the “add receipt placeholder” on the expense view to more closely match the thumbnail presented on the preview.

Figma file

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857479879812113121
• Upwork Job ID: 1857479879812113121
• Last Price Increase: 2024-12-12
• Automatic offers:
• brunovjk | Reviewer | 104992771
• gijoe0295 | Contributor | 104992773

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal


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

Add placeholder thumbnail to expenses with no receipt

What is the root cause of that problem?

Improvement.

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


• Update the icon here with the Expensicons.Receipt icon and also update the styles .
• Update the icon and styles here.
• In ReceiptEmptyState, we also need to add the plus icon with absolute position styles.
• We also need to update the icon in PendingMapView.

Note

The styles shown in the result video might not be perfect, but they can be discussed and updated during the PR phase.
We will also look for other parts of the code that might be using the Receipt icon or a similar icon and update them if needed.

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2024-11-16.00-10-52.mp4

[gijoe0295]

Edited by proposal-police: This proposal was edited at 2024-11-15 19:20:07 UTC.

Proposal

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

1. Add placeholder thumbnail to expenses preview with no receipt
2. Change receipt placeholder icon

What is the root cause of that problem?

A feature request

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

Change receipt placeholder icon

The second point to change receipt placeholder icon is straightforward, just change the icon in ReceiptEmptyState to Expensicons.Receipt with the correct size and color (64x64 and theme.border).

Then add the green plus icon to absolutely position like the mockup.

Add placeholder thumbnail to expenses preview with no receipt

Note that for this point, we must display the number of empty receipt placeholder based on the number of empty receipt transactions in the expense report. Not just one placeholder for the whole report.

Currently we're filtering the last three receipts in the expense report to display their thumbnails:

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 165 to 166 in d41a331

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

I'm not sure about the expected behavior here in case there're both transactions with and without receipts. I can think of 2 scenarios, given I have 2 empty and 2 receipt transactions:

1️⃣ Show most recent transactions' thumbnails regardless of whether they have receipt or not:

2️⃣ Prioritize the ones with receipts, i.e., show the receipt thumbnails as much as possible, then leave the rest with receipt placeholder:

1. We can update the lastThreeReceipts according to the final expectation later.

2. Use a new prop isEmptyReceipt to pass from ReportActionItemImages to ReportActionItemImage and eventually to ReceiptImage to render the ReceiptEmptyState component.

In ReceiptImage

if (isEmptyReceipt) {
  return <ReceiptEmptyState />;
}

3. In getThumbnailAndImageURIs here, for transactions without receipts, return isEmptyReceipt: true:

if (!TransactionUtils.hasReceipt(transaction)) {
    return {isEmptyReceipt: true};
}

Branch: main...gijoe0295:App:gijoe/52638

[brunovjk]

Thank you all for the proposals. @Krishna2323, your suggestion to update the icon is noted, but I didn’t see any mention of displaying placeholder thumbnails for expenses without receipts, which is a key part of the solution.

@gijoe0295, your proposal seems to cover everything we need. Could you list the details that need confirmation before moving forward to the PR? I believe the main thing left is the lastThreeReceipts, but if there’s anything else, please let us know. Thank you.

Quick tests on gijoe0295's branch

Screen.Recording.2024-11-18.at.11.19.00.mov

With that, I believe we can proceed with @gijoe0295's proposal.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[gijoe0295]

@Expensify/design We need:

1. The green circle plus icon svg file

2. Confirmation on the order of receipt thumbnails in the report preview.

Given I have 2 empty and 2 receipt transactions:

Option 1️⃣: Show most recent transactions' thumbnails regardless of whether they have receipt or not:

Option 2️⃣: Prioritize the ones with receipts, i.e., show the receipt thumbnails as much as possible, then leave the rest with empty placeholders:

[dannymcclain]

Here's the green circle svg:
Receipt Placeholder Plus.svg.zip

Confirmation on the order of receipt thumbnails in the report preview.

Personally I think it makes sense to keep them in chronological order (option 1). But if others feel strongly that option 2 is better that's fine with me.

[gijoe0295]

@dannymcclain One last thing 😄: Will this number here only accounts for the transactions with receipts (current behavior), or the ones without receipts as well (as shown in the below image)?

[dannymcclain]

Will this number here only accounts for the transactions with receipts (current behavior), or the ones without receipts as well?

I think now that every expense has a thumbnail, it should account for ALL transactions. cc @Expensify/design for a gut check on that one (and to weigh in on the order of receipt thumbnails implementation).

[dubielzyk-expensify]

I think now that every expense has a thumbnail, it should account for ALL transactions. cc @Expensify/design for a gut check on that one (and to weigh in on the order of receipt thumbnails implementation).

Agree. To me that number indicates how many extra expenses are beyond the thumbnail previews. So 3 + 2 = 5 in that instance. I think that should be the same regardless of whether there's a receipt or not.

[shawnborton]

Totally agree with that as well. Also wanted to cc @grgia too for vis since I believe you were the one that implemented that feature.

[JmillsExpensify]

To me that number indicates how many extra expenses are beyond the thumbnail previews. So 3 + 2 = 5 in that instance. I think that should be the same regardless of whether there's a receipt or not.

Also very much agree with this statement.

[grgia]

@shawnborton @JmillsExpensify @dubielzyk-expensify

From what I recall, the rule was:

Since we're adding receipt thumbnails, we can use the same number for both, or remove one of these entirely as it's the same info

[melvin-bot]

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

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

[jasperhuangg]

I think @gijoe0295's proposal should work, going to assign them first. We can work out any design details in the PR review.

[brunovjk]

Not overdue. Thank you @jasperhuangg. @gijoe0295, no rush on my part, but do you have an ETA for it? Thank you!

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.71-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Feat: Add placeholder thumbnail to expenses with no receipt #52848

If no regressions arise, payment will be issued on 2024-12-12. 🎊

For reference, here are some details about the assignees on this issue:

• @brunovjk requires payment automatic offer (Reviewer)
• @gijoe0295 requires payment automatic offer (Contributor)

[brunovjk]

⚠️ Looks like this issue was linked to a Deploy Blocker here

@gijoe0295 is raising the PR to resolve the regression. Should we wait before filling out the BZ checklist and proceeding with payment?

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @garrettmknight you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Upwork job price has been updated to $125

[brunovjk]

Update: PR under review

[brunovjk]

Update: PR still under review.

[melvin-bot]

@garrettmknight, @dannymcclain, @jasperhuangg, @brunovjk, @gijoe0295 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[brunovjk]

Both PRs went to production:

• Dec 5 - Feat: Add placeholder thumbnail to expenses with no receipt #52848 (comment)
• Dec 31 - fix: blank receipt holder when delete expense offline #54051 (comment)

[garrettmknight]

@brunovjk please complete the checklist when you get a chance.

[brunovjk]

@brunovjk please complete the checklist when you get a chance.

Will wait the day before payment, is that ok? Thanks

[melvin-bot]

@garrettmknight, @dannymcclain, @jasperhuangg, @brunovjk, @gijoe0295 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[brunovjk]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other: Improvement/new feature

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: N/A - Improvement/new feature

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

Test 1:

1. Create several expenses with and without receipts to a workspace
2. Verify the report preview shows empty receipt placeholders and receipt thumbnails in the order of the created expenses
3. Tap the report preview to open expense report
4. Verify expenses without receipt shows empty receipt placeholders
5. Tap the expense preview without receipt to open transaction details report
6. Verify Add receipt placeholder shows with a green plus icon
7. Tap the receipt placeholder
8. Verify app opens Upload receipt page
9. Tap FAB > Submit expense > Manual
10. Create an expense
11. In confirmation step, verify the Add receipt placeholder shows with a green plus icon

Test 2:

1. Submit an expense to the workspace so that the expense report has only 1 expense
2. Press report preview to open expense report
3. Go offline
4. Press report header > Delete expense > Delete
5. Verify the REPORT preview do not show receipt placeholder

Do we agree 👍 or 👎

[brunovjk]

Summary: We raised a PR to implement the Improvement. We found a blocker, which was handled by the original contributor in the following PR. In this second PR, we made changes to fit the changed files into the "no-default-id-values" rule, therefore, we had another blocker, which was handled by another contributor, @nkdengineer, here.

[garrettmknight]

All paid up!