From b7f732785580536899464796430c4573ed31111f Mon Sep 17 00:00:00 2001 From: MelvinBot Date: Thu, 12 Feb 2026 05:40:08 +0000 Subject: [PATCH 1/5] Fix: Use simple illustration for 'Get paid back by my employer' onboarding 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 --- src/components/Icon/chunks/illustrations.chunk.ts | 2 ++ src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Icon/chunks/illustrations.chunk.ts b/src/components/Icon/chunks/illustrations.chunk.ts index f86a9b9bd84a9..ca070eb69cf64 100644 --- a/src/components/Icon/chunks/illustrations.chunk.ts +++ b/src/components/Icon/chunks/illustrations.chunk.ts @@ -145,6 +145,7 @@ import RealtimeReport from '@assets/images/simple-illustrations/simple-illustrat 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 SimpleReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; import ReportReceipt from '@assets/images/simple-illustrations/simple-illustration__report-receipt.svg'; import Rules from '@assets/images/simple-illustrations/simple-illustration__rules.svg'; import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg'; @@ -274,6 +275,7 @@ const Illustrations = { RealtimeReport, ReceiptPartners, ReceiptWrangler, + SimpleReceiptUpload, TravelAlerts, ReportReceipt, Rules, diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 18fcb3f9f670d..748a4b95a5cc4 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -42,17 +42,17 @@ function getOnboardingChoices(customChoices: OnboardingPurpose[]) { function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'ReceiptUpload', 'PiggyBank', 'SplitBill']); + const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'SimpleReceiptUpload', 'PiggyBank', 'SplitBill']); const menuIcons = useMemo( () => ({ - [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.ReceiptUpload, + [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.SimpleReceiptUpload, [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: illustrations.Abacus, [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: illustrations.PiggyBank, [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: illustrations.SplitBill, [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: illustrations.Binoculars, }), - [illustrations.Abacus, illustrations.Binoculars, illustrations.ReceiptUpload, illustrations.PiggyBank, illustrations.SplitBill], + [illustrations.Abacus, illustrations.Binoculars, illustrations.SimpleReceiptUpload, illustrations.PiggyBank, illustrations.SplitBill], ); const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); From c289bded9e3b970b511f86ff7a7bbf357b3f60e2 Mon Sep 17 00:00:00 2001 From: MelvinBot Date: Thu, 12 Feb 2026 05:53:18 +0000 Subject: [PATCH 2/5] Rename SimpleReceiptUpload to ReceiptsUpload per review feedback Co-authored-by: Shawn Borton --- src/components/Icon/chunks/illustrations.chunk.ts | 4 ++-- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Icon/chunks/illustrations.chunk.ts b/src/components/Icon/chunks/illustrations.chunk.ts index ca070eb69cf64..e8c5262f8d721 100644 --- a/src/components/Icon/chunks/illustrations.chunk.ts +++ b/src/components/Icon/chunks/illustrations.chunk.ts @@ -145,7 +145,7 @@ import RealtimeReport from '@assets/images/simple-illustrations/simple-illustrat 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 SimpleReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; +import ReceiptsUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; import ReportReceipt from '@assets/images/simple-illustrations/simple-illustration__report-receipt.svg'; import Rules from '@assets/images/simple-illustrations/simple-illustration__rules.svg'; import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg'; @@ -275,7 +275,7 @@ const Illustrations = { RealtimeReport, ReceiptPartners, ReceiptWrangler, - SimpleReceiptUpload, + ReceiptsUpload, TravelAlerts, ReportReceipt, Rules, diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 748a4b95a5cc4..392096f0e79ad 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -42,17 +42,17 @@ function getOnboardingChoices(customChoices: OnboardingPurpose[]) { function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'SimpleReceiptUpload', 'PiggyBank', 'SplitBill']); + const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'ReceiptsUpload', 'PiggyBank', 'SplitBill']); const menuIcons = useMemo( () => ({ - [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.SimpleReceiptUpload, + [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.ReceiptsUpload, [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: illustrations.Abacus, [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: illustrations.PiggyBank, [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: illustrations.SplitBill, [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: illustrations.Binoculars, }), - [illustrations.Abacus, illustrations.Binoculars, illustrations.SimpleReceiptUpload, illustrations.PiggyBank, illustrations.SplitBill], + [illustrations.Abacus, illustrations.Binoculars, illustrations.ReceiptsUpload, illustrations.PiggyBank, illustrations.SplitBill], ); const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); From 8a3caa4f9c60e06680c9a4b59e4c5774e7241f9a Mon Sep 17 00:00:00 2001 From: MelvinBot Date: Thu, 12 Feb 2026 12:48:12 +0000 Subject: [PATCH 3/5] Rename ReceiptsUpload to SimpleReceiptUpload to avoid confusion with existing ReceiptUpload Co-authored-by: Shridhar Goel --- src/components/Icon/chunks/illustrations.chunk.ts | 4 ++-- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Icon/chunks/illustrations.chunk.ts b/src/components/Icon/chunks/illustrations.chunk.ts index e8c5262f8d721..ca070eb69cf64 100644 --- a/src/components/Icon/chunks/illustrations.chunk.ts +++ b/src/components/Icon/chunks/illustrations.chunk.ts @@ -145,7 +145,7 @@ import RealtimeReport from '@assets/images/simple-illustrations/simple-illustrat 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'; +import SimpleReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; import ReportReceipt from '@assets/images/simple-illustrations/simple-illustration__report-receipt.svg'; import Rules from '@assets/images/simple-illustrations/simple-illustration__rules.svg'; import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg'; @@ -275,7 +275,7 @@ const Illustrations = { RealtimeReport, ReceiptPartners, ReceiptWrangler, - ReceiptsUpload, + SimpleReceiptUpload, TravelAlerts, ReportReceipt, Rules, diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 392096f0e79ad..748a4b95a5cc4 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -42,17 +42,17 @@ function getOnboardingChoices(customChoices: OnboardingPurpose[]) { function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'ReceiptsUpload', 'PiggyBank', 'SplitBill']); + const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'SimpleReceiptUpload', 'PiggyBank', 'SplitBill']); const menuIcons = useMemo( () => ({ - [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.ReceiptsUpload, + [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.SimpleReceiptUpload, [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: illustrations.Abacus, [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: illustrations.PiggyBank, [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: illustrations.SplitBill, [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: illustrations.Binoculars, }), - [illustrations.Abacus, illustrations.Binoculars, illustrations.ReceiptsUpload, illustrations.PiggyBank, illustrations.SplitBill], + [illustrations.Abacus, illustrations.Binoculars, illustrations.SimpleReceiptUpload, illustrations.PiggyBank, illustrations.SplitBill], ); const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); From b4daed6b1741221697a672e0acc849f739af30c1 Mon Sep 17 00:00:00 2001 From: MelvinBot Date: Thu, 12 Feb 2026 14:30:18 +0000 Subject: [PATCH 4/5] Rename ReceiptUpload to ReceiptStack and SimpleReceiptUpload to ReceiptUpload 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 --- __mocks__/Illustrations.ts | 4 ++-- src/components/Icon/chunks/illustrations.chunk.ts | 8 ++++---- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 6 +++--- src/pages/iou/ReceiptDropUI.tsx | 4 ++-- src/pages/iou/request/step/IOURequestStepScan/index.tsx | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/__mocks__/Illustrations.ts b/__mocks__/Illustrations.ts index 300f7529830a8..5809d26e2c884 100644 --- a/__mocks__/Illustrations.ts +++ b/__mocks__/Illustrations.ts @@ -56,7 +56,7 @@ const TeachersUnite = 'TeachersUnite'; const Abacus = 'Abacus'; const Binoculars = 'Binoculars'; const CompanyCard = 'CompanyCard'; -const ReceiptUpload = 'ReceiptUpload'; +const ReceiptStack = 'ReceiptStack'; const ExpensifyCardIllustration = 'ExpensifyCardIllustration'; const ExpensifyCardImage = 'ExpensifyCardImage'; const MultiScan = 'MultiScan'; @@ -174,7 +174,7 @@ export { Abacus, Binoculars, CompanyCard, - ReceiptUpload, + ReceiptStack, ExpensifyCardIllustration, ExpensifyCardImage, MultiScan, diff --git a/src/components/Icon/chunks/illustrations.chunk.ts b/src/components/Icon/chunks/illustrations.chunk.ts index ca070eb69cf64..e3766af2baf6a 100644 --- a/src/components/Icon/chunks/illustrations.chunk.ts +++ b/src/components/Icon/chunks/illustrations.chunk.ts @@ -79,7 +79,7 @@ import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cl import ToddInCar from '@assets/images/product-illustrations/todd-in-car.svg'; import ToddWithPhones from '@assets/images/product-illustrations/todd-with-phones.svg'; import WorkspaceScene from '@assets/images/product-illustrations/workspace-scene.svg'; -import ReceiptUpload from '@assets/images/receipt-upload.svg'; +import ReceiptStack from '@assets/images/receipt-upload.svg'; import RunningTurtle from '@assets/images/running-turtle.svg'; import Shutter from '@assets/images/shutter.svg'; // Simple Illustrations - Bucket 3 (Common) @@ -145,7 +145,7 @@ import RealtimeReport from '@assets/images/simple-illustrations/simple-illustrat 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 SimpleReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; +import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; import ReportReceipt from '@assets/images/simple-illustrations/simple-illustration__report-receipt.svg'; import Rules from '@assets/images/simple-illustrations/simple-illustration__rules.svg'; import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg'; @@ -252,7 +252,7 @@ const Illustrations = { // Other Images Hand, PendingTravel, - ReceiptUpload, + ReceiptStack, RunningTurtle, Shutter, ExpensifyApprovedLogo, @@ -275,7 +275,7 @@ const Illustrations = { RealtimeReport, ReceiptPartners, ReceiptWrangler, - SimpleReceiptUpload, + ReceiptUpload, TravelAlerts, ReportReceipt, Rules, diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 748a4b95a5cc4..18fcb3f9f670d 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -42,17 +42,17 @@ function getOnboardingChoices(customChoices: OnboardingPurpose[]) { function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'SimpleReceiptUpload', 'PiggyBank', 'SplitBill']); + const illustrations = useMemoizedLazyIllustrations(['Abacus', 'Binoculars', 'ReceiptUpload', 'PiggyBank', 'SplitBill']); const menuIcons = useMemo( () => ({ - [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.SimpleReceiptUpload, + [CONST.ONBOARDING_CHOICES.EMPLOYER]: illustrations.ReceiptUpload, [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: illustrations.Abacus, [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: illustrations.PiggyBank, [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: illustrations.SplitBill, [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: illustrations.Binoculars, }), - [illustrations.Abacus, illustrations.Binoculars, illustrations.SimpleReceiptUpload, illustrations.PiggyBank, illustrations.SplitBill], + [illustrations.Abacus, illustrations.Binoculars, illustrations.ReceiptUpload, illustrations.PiggyBank, illustrations.SplitBill], ); const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); diff --git a/src/pages/iou/ReceiptDropUI.tsx b/src/pages/iou/ReceiptDropUI.tsx index 7e8d22d9dbbd6..b5480ba9bc29a 100644 --- a/src/pages/iou/ReceiptDropUI.tsx +++ b/src/pages/iou/ReceiptDropUI.tsx @@ -19,13 +19,13 @@ type ReceiptDropUIProps = { function ReceiptDropUI({onDrop, receiptImageTopPosition}: ReceiptDropUIProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const lazyIllustrations = useMemoizedLazyIllustrations(['ReceiptUpload']); + const lazyIllustrations = useMemoizedLazyIllustrations(['ReceiptStack']); return ( {PDFValidationComponent} From 944c4681d4a336c1bd727e78c84f89cad99d5684 Mon Sep 17 00:00:00 2001 From: MelvinBot Date: Thu, 12 Feb 2026 14:31:04 +0000 Subject: [PATCH 5/5] Rename ReceiptUpload to ReceiptStack and SimpleReceiptUpload to ReceiptUpload 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 --- __mocks__/Illustrations.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/__mocks__/Illustrations.ts b/__mocks__/Illustrations.ts index 5809d26e2c884..8f7aeedb00904 100644 --- a/__mocks__/Illustrations.ts +++ b/__mocks__/Illustrations.ts @@ -57,6 +57,7 @@ const Abacus = 'Abacus'; const Binoculars = 'Binoculars'; const CompanyCard = 'CompanyCard'; const ReceiptStack = 'ReceiptStack'; +const ReceiptUpload = 'ReceiptUpload'; const ExpensifyCardIllustration = 'ExpensifyCardIllustration'; const ExpensifyCardImage = 'ExpensifyCardImage'; const MultiScan = 'MultiScan'; @@ -175,6 +176,7 @@ export { Binoculars, CompanyCard, ReceiptStack, + ReceiptUpload, ExpensifyCardIllustration, ExpensifyCardImage, MultiScan,