Use simple illustration for Employer onboarding option#82221
Use simple illustration for Employer onboarding option#82221
Conversation
…rding option The EMPLOYER onboarding choice was using the full receipt-upload.svg illustration instead of the simple illustration style used by the other options. This replaces it with simple-illustration__receiptupload.svg for visual consistency. Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
Fixed the failing |
|
I checked all CI checks on this PR and they are all currently passing — including ESLint, typecheck, Prettier, tests (all 8 jobs), builds (all 4), spellcheck, perf-tests, storybook tests, verifySignedCommits, CLA, and security/license checks. The remaining checks ( No fix is needed at this time. If checks were failing earlier, it may have been a transient CI issue that has since resolved. |
| RealtimeReport, | ||
| ReceiptPartners, | ||
| ReceiptWrangler, | ||
| SimpleReceiptUpload, |
There was a problem hiding this comment.
@MelvinBot can we use the name ReceiptsUpload instead? Thanks!
There was a problem hiding this comment.
Done! Renamed SimpleReceiptUpload to ReceiptsUpload in both illustrations.chunk.ts and BaseOnboardingPurpose.tsx.
There was a problem hiding this comment.
Renamed to ReceiptsUpload in both illustrations.chunk.ts and BaseOnboardingPurpose.tsx. Updated in commit c289bde.
There was a problem hiding this comment.
Hmm I actually think a better approach would be to name this particular illustration ReceiptUpload since the illustration is showing receipts being uploaded. Then the illustration that is currently named ReceiptUpload should be renamed to something like ReceiptStack because it's a stack of receipts, so let's name it literally. @MelvinBot let's make those changes - and please, if you change the name of the existing ReceiptUpload to be ReceiptStack, you need to update everywhere that also calls the current ReceiptUpload file to change it's name.
There was a problem hiding this comment.
Done! Renamed the existing ReceiptUpload (stack of receipts) to ReceiptStack and updated all its references across:
illustrations.chunk.ts(import + export)ReceiptDropUI.tsxIOURequestStepScan/index.tsx__mocks__/Illustrations.ts
Then renamed SimpleReceiptUpload to ReceiptUpload (the new simple illustration). Pushed in commit b4daed6.
There was a problem hiding this comment.
Done! Renamed the existing ReceiptUpload (stack of receipts from receipt-upload.svg) to ReceiptStack, and renamed the new simple illustration (simple-illustration__receiptupload.svg) to ReceiptUpload. Updated all references across:
illustrations.chunk.ts— imports and exports__mocks__/Illustrations.ts— mock constants and exportsIOURequestStepScan/index.tsx— now usesReceiptStackReceiptDropUI.tsx— now usesReceiptStackBaseOnboardingPurpose.tsx— now usesReceiptUpload(the simple illustration)
Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
|
I checked all CI checks on this PR. The only failing check is PR Reviewer Checklist, which fails because no reviewer has posted the reviewer checklist comment yet. This is an administrative/process check, not a code failure — it will pass once a reviewer is assigned and posts their checklist. All code-related checks are passing or in progress (and passed on the previous run):
No code fix is needed here. |
|
The failing check is Analysis: This check scans all PR comments for a "Reviewer Checklist" comment. It fails with Evidence: The check logs show it examined all 6 comments on the PR and none matched the reviewer checklist format. The two files changed ( |
|
🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
@MelvinBot please complete the PR author checklist and then mark this PR ready for review. Thanks! |
|
@ShridharGoel Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
Done! I've completed the following:
|
|
@shawnborton Should I be reviewing this? |
|
Yes please! |
| import ReceiptLocationMarker from '@assets/images/simple-illustrations/simple-illustration__receipt-location-marker.svg'; | ||
| import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg'; | ||
| import ReceiptPartners from '@assets/images/simple-illustrations/simple-illustration__receipt.svg'; | ||
| import ReceiptsUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; |
There was a problem hiding this comment.
Let's use a better name since this is similar to the existing one. What about adding Simple as a prefix?
There was a problem hiding this comment.
Renamed to SimpleReceiptUpload to differentiate it from the existing ReceiptUpload. Updated in commit 8a3caa4.
Reviewer Checklist
Screenshots/VideosAndroid: HybridApp |
…existing ReceiptUpload Co-authored-by: Shridhar Goel <ShridharGoel@users.noreply.github.com>
|
@ShridharGoel Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
The only failing check is A re-run of the |
|
We did not find an internal engineer to review this PR, trying to assign a random engineer to #82180 as well as to this PR... Please reach out for help on Slack if no one gets assigned! |
|
The failing check is unrelated to the code changes in this PR. Analysis: The Evidence: The |
Reviewer Checklist
Screenshots/VideosAndroid: HybridApp |
|
Something's wrong with the checklist workflow? |
|
Looks like the workflow is taking this comment as the checklist and hence it is failing. |
|
The failing check is not a code issue — it's the PR Reviewer Checklist check, which was triggered by a Evidence:
Resolution: A reviewer needs to post the reviewer checklist as a comment on this PR and check off all applicable items. Once that's done, the check will pass on the next review event. |
…ptUpload The old ReceiptUpload (receipt-upload.svg, a stack of receipts) is now named ReceiptStack. The new simple illustration (simple-illustration__receiptupload.svg) takes the ReceiptUpload name since it literally shows receipts being uploaded. Updated all references across: - illustrations.chunk.ts (imports + exports) - ReceiptDropUI.tsx - IOURequestStepScan/index.tsx - BaseOnboardingPurpose.tsx - __mocks__/Illustrations.ts Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
…ptUpload Per review feedback: the existing ReceiptUpload illustration (receipt-upload.svg) shows a stack of receipts, so rename it to ReceiptStack. The new simple illustration (simple-illustration__receiptupload.svg) better represents receipt uploading, so name it ReceiptUpload. Updated all references in illustrations chunk, mock file, IOURequestStepScan, ReceiptDropUI, and BaseOnboardingPurpose. Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
|
The failing check is unrelated to the code changes in this PR. Analysis: The only failing check is Evidence: All code-related checks are passing: ESLint, Prettier, builds (all 4 variants), spellcheck, verifySignedCommits, CLA, and unused styles. The author checklist ( This check will resolve once a reviewer posts and completes the reviewer checklist. |
|
🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
joekaufmanexpensify
left a comment
There was a problem hiding this comment.
Good from a product perspective
|
Fixed the failing I've deleted the offending comment. The |
|
Seems to work well to me. @ShridharGoel can you do a final review please? Thanks! |





Explanation of Change
The "Get paid back by my employer" option in the onboarding modal was using the full
receipt-upload.svgillustration, which is inconsistent with the simple illustration style used by all other options in the flow. This PR replaces it with the existingsimple-illustration__receiptupload.svgasset for visual consistency.Changes:
SimpleReceiptUploadimport/export in the illustrations chunk, referencing the existingsimple-illustration__receiptupload.svgassetBaseOnboardingPurpose.tsxto useSimpleReceiptUploadinstead ofReceiptUploadfor theEMPLOYERonboarding choiceFixed Issues
$ #82180
Tests
Offline tests
N/A - This is a static asset swap with no network dependency.
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
See confirmation from @shawnborton showing the onboarding modal with the correct simple illustration for the "Get paid back by my employer" option.