From 51d79270394f5d2139df8d64542e9515047ecc32 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 14 Jan 2026 16:57:03 +0700 Subject: [PATCH 1/3] fix: Update empty receipt section in the expense RHP --- src/components/ReceiptEmptyState.tsx | 58 ++++++++++++++----- .../MoneyRequestReceiptView.tsx | 1 + src/languages/de.ts | 4 ++ src/languages/en.ts | 4 ++ src/languages/es.ts | 4 ++ src/languages/fr.ts | 4 ++ src/languages/it.ts | 4 ++ src/languages/ja.ts | 4 ++ src/languages/nl.ts | 4 ++ src/languages/pl.ts | 4 ++ src/languages/pt-BR.ts | 4 ++ src/languages/zh-hans.ts | 4 ++ 12 files changed, 83 insertions(+), 16 deletions(-) diff --git a/src/components/ReceiptEmptyState.tsx b/src/components/ReceiptEmptyState.tsx index abd7c0cc821d4..a9385dbcdf372 100644 --- a/src/components/ReceiptEmptyState.tsx +++ b/src/components/ReceiptEmptyState.tsx @@ -8,6 +8,8 @@ import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import Icon from './Icon'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import ReceiptAlternativeMethods from './ReceiptAlternativeMethods'; +import Text from './Text'; type ReceiptEmptyStateProps = { /** Callback to be called on onPress */ @@ -29,10 +31,22 @@ type ReceiptEmptyStateProps = { /** Callback to be called when the image loads */ onLoad?: () => void; + + /** Whether it's displayed in Wide RHP */ + isDisplayedInWideRHP?: boolean; }; // Returns an SVG icon indicating that the user should attach a receipt -function ReceiptEmptyState({onPress, disabled = false, isThumbnail = false, isInMoneyRequestView = false, shouldUseFullHeight = false, style, onLoad}: ReceiptEmptyStateProps) { +function ReceiptEmptyState({ + onPress, + disabled = false, + isThumbnail = false, + isInMoneyRequestView = false, + shouldUseFullHeight = false, + style, + onLoad, + isDisplayedInWideRHP = false, +}: ReceiptEmptyStateProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const theme = useTheme(); @@ -44,6 +58,7 @@ function ReceiptEmptyState({onPress, disabled = false, isThumbnail = false, isIn styles.alignItemsCenter, styles.justifyContentCenter, styles.moneyRequestViewImage, + isDisplayedInWideRHP && !disabled && styles.pb3, isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt, shouldUseFullHeight && styles.receiptEmptyStateFullHeight, style, @@ -66,22 +81,33 @@ function ReceiptEmptyState({onPress, disabled = false, isThumbnail = false, isIn disabledStyle={styles.cursorDefault} style={containerStyle} > - - - {!isThumbnail && ( - - )} + + + + + {!isThumbnail && ( + + )} + + {!isThumbnail && isDisplayedInWideRHP && ( + <> + {translate('receipt.addAReceipt.phrase1')} + {translate('receipt.addAReceipt.phrase2')} + + )} + + {isDisplayedInWideRHP && !disabled && } ); } diff --git a/src/components/ReportActionItem/MoneyRequestReceiptView.tsx b/src/components/ReportActionItem/MoneyRequestReceiptView.tsx index f8d4347c71ac9..5fdb9103c5653 100644 --- a/src/components/ReportActionItem/MoneyRequestReceiptView.tsx +++ b/src/components/ReportActionItem/MoneyRequestReceiptView.tsx @@ -295,6 +295,7 @@ function MoneyRequestReceiptView({ isThumbnail={!canEditReceipt} isInMoneyRequestView style={receiptStyle} + isDisplayedInWideRHP={isDisplayedInWideRHP} /> )} diff --git a/src/languages/de.ts b/src/languages/de.ts index 596d3229b0844..359224d00d2c8 100644 --- a/src/languages/de.ts +++ b/src/languages/de.ts @@ -1061,6 +1061,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'Sind Sie sicher, dass Sie diesen Beleg löschen möchten?', addReceipt: 'Beleg hinzufügen', scanFailed: 'Die Quittung konnte nicht gescannt werden, da der Händler, das Datum oder der Betrag fehlt.', + addAReceipt: { + phrase1: 'Beleg hinzufügen', + phrase2: 'oder hierher ziehen und ablegen.', + }, }, quickAction: { scanReceipt: 'Beleg scannen', diff --git a/src/languages/en.ts b/src/languages/en.ts index 4eba58e91e096..188c477e914c7 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1052,6 +1052,10 @@ const translations = { deleteConfirmation: 'Are you sure you want to delete this receipt?', addReceipt: 'Add receipt', scanFailed: "The receipt couldn't be scanned, as it's missing a merchant, date, or amount.", + addAReceipt: { + phrase1: 'Add a receipt', + phrase2: 'or drag and drop one here.', + }, }, quickAction: { scanReceipt: 'Scan receipt', diff --git a/src/languages/es.ts b/src/languages/es.ts index 80e29ddee6c98..6980663b4a8ff 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -783,6 +783,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?', addReceipt: 'Añadir recibo', scanFailed: 'El recibo no pudo ser escaneado, ya que falta el comerciante, la fecha o el monto.', + addAReceipt: { + phrase1: 'Añade un recibo', + phrase2: 'o arrastra y suelta uno aquí.', + }, }, quickAction: { scanReceipt: 'Escanear recibo', diff --git a/src/languages/fr.ts b/src/languages/fr.ts index 6d549456652ec..4592e5b201faa 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -1060,6 +1060,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'Voulez-vous vraiment supprimer ce reçu ?', addReceipt: 'Ajouter un reçu', scanFailed: 'Le reçu n’a pas pu être scanné, car il manque un commerçant, une date ou un montant.', + addAReceipt: { + phrase1: 'Ajouter un reçu', + phrase2: 'ou faites-le glisser et déposez-le ici.', + }, }, quickAction: { scanReceipt: 'Scanner le reçu', diff --git a/src/languages/it.ts b/src/languages/it.ts index ed74ff8d04b08..b0ff123a026ad 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -1056,6 +1056,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'Sei sicuro di voler eliminare questa ricevuta?', addReceipt: 'Aggiungi ricevuta', scanFailed: 'Impossibile acquisire la ricevuta perché mancano l’esercente, la data o l’importo.', + addAReceipt: { + phrase1: 'Aggiungi una ricevuta', + phrase2: 'o trascinala e rilasciala qui.', + }, }, quickAction: { scanReceipt: 'Scansiona ricevuta', diff --git a/src/languages/ja.ts b/src/languages/ja.ts index b05c8be8d62ac..9341a83303407 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -1057,6 +1057,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'この領収書を削除してもよろしいですか？', addReceipt: '領収書を追加', scanFailed: 'この領収書は、店舗名、日付、または金額が欠けているためスキャンできませんでした。', + addAReceipt: { + phrase1: '領収書を追加', + phrase2: 'またはここにドラッグ＆ドロップしてください。', + }, }, quickAction: { scanReceipt: 'レシートをスキャン', diff --git a/src/languages/nl.ts b/src/languages/nl.ts index 60de38a79867c..258fa313c4518 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -1056,6 +1056,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'Weet je zeker dat je deze bon wilt verwijderen?', addReceipt: 'Bon toevoegen', scanFailed: 'De bon kon niet worden gescand, omdat er een handelaar, datum of bedrag ontbreekt.', + addAReceipt: { + phrase1: 'Bon toevoegen', + phrase2: 'of sleep hem hierheen.', + }, }, quickAction: { scanReceipt: 'Bon scannen', diff --git a/src/languages/pl.ts b/src/languages/pl.ts index 536cec1da2f71..1d2020d57b99c 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -1055,6 +1055,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'Czy na pewno chcesz usunąć ten paragon?', addReceipt: 'Dodaj paragon', scanFailed: 'Nie można było zeskanować paragonu, ponieważ brakuje na nim sprzedawcy, daty lub kwoty.', + addAReceipt: { + phrase1: 'Dodaj paragon', + phrase2: 'lub przeciągnij i upuść go tutaj.', + }, }, quickAction: { scanReceipt: 'Zeskanuj paragon', diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index f4d070481d452..119a1371fd4cb 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -1055,6 +1055,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: 'Tem certeza de que deseja excluir este recibo?', addReceipt: 'Adicionar recibo', scanFailed: 'O recibo não pôde ser escaneado, pois está faltando o comerciante, a data ou o valor.', + addAReceipt: { + phrase1: 'Adicionar um recibo', + phrase2: 'ou arraste e solte um aqui.', + }, }, quickAction: { scanReceipt: 'Escanear recibo', diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index e7c85607477df..ddc7cf411663d 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -1041,6 +1041,10 @@ const translations: TranslationDeepObject = { deleteConfirmation: '您确定要删除此收据吗？', addReceipt: '添加收据', scanFailed: '无法扫描该收据，因为缺少商家、日期或金额。', + addAReceipt: { + phrase1: '添加收据', + phrase2: '或者拖拽到这里。', + }, }, quickAction: { scanReceipt: '扫描收据', From a04aea48b4ddc66afc2f2d81bfed7c00170131a9 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 19 Jan 2026 20:52:05 +0700 Subject: [PATCH 2/3] update receipt alternative style --- src/components/ReceiptEmptyState.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReceiptEmptyState.tsx b/src/components/ReceiptEmptyState.tsx index a9385dbcdf372..2af8959c9a591 100644 --- a/src/components/ReceiptEmptyState.tsx +++ b/src/components/ReceiptEmptyState.tsx @@ -58,7 +58,7 @@ function ReceiptEmptyState({ styles.alignItemsCenter, styles.justifyContentCenter, styles.moneyRequestViewImage, - isDisplayedInWideRHP && !disabled && styles.pb3, + isDisplayedInWideRHP && !disabled && styles.pb5, isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt, shouldUseFullHeight && styles.receiptEmptyStateFullHeight, style, @@ -101,7 +101,7 @@ function ReceiptEmptyState({ {!isThumbnail && isDisplayedInWideRHP && ( <> - {translate('receipt.addAReceipt.phrase1')} + {translate('receipt.addAReceipt.phrase1')} {translate('receipt.addAReceipt.phrase2')} )} From 5580e961db20172e37540a453318bd527c4383e1 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 20 Jan 2026 00:24:38 +0700 Subject: [PATCH 3/3] update translation --- src/languages/de.ts | 2 +- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- src/languages/fr.ts | 2 +- src/languages/it.ts | 2 +- src/languages/ja.ts | 2 +- src/languages/nl.ts | 2 +- src/languages/pl.ts | 2 +- src/languages/pt-BR.ts | 2 +- src/languages/zh-hans.ts | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/languages/de.ts b/src/languages/de.ts index aa7cbac9c8d25..0a5abda48df04 100644 --- a/src/languages/de.ts +++ b/src/languages/de.ts @@ -1095,7 +1095,7 @@ const translations: TranslationDeepObject = { scanFailed: 'Die Quittung konnte nicht gescannt werden, da der Händler, das Datum oder der Betrag fehlt.', addAReceipt: { phrase1: 'Beleg hinzufügen', - phrase2: 'oder hierher ziehen und ablegen.', + phrase2: 'oder hierher ziehen und ablegen', }, }, quickAction: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 74534970202b2..af08d8fab41a4 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1087,7 +1087,7 @@ const translations = { scanFailed: "The receipt couldn't be scanned, as it's missing a merchant, date, or amount.", addAReceipt: { phrase1: 'Add a receipt', - phrase2: 'or drag and drop one here.', + phrase2: 'or drag and drop one here', }, }, quickAction: { diff --git a/src/languages/es.ts b/src/languages/es.ts index f54f22b5e26eb..dcbc2382a5e77 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -816,7 +816,7 @@ const translations: TranslationDeepObject = { scanFailed: 'El recibo no pudo ser escaneado, ya que falta el comerciante, la fecha o el monto.', addAReceipt: { phrase1: 'Añade un recibo', - phrase2: 'o arrastra y suelta uno aquí.', + phrase2: 'o arrastra y suelta uno aquí', }, }, quickAction: { diff --git a/src/languages/fr.ts b/src/languages/fr.ts index a9027f0a78d5f..f6864ed3d73b5 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -1094,7 +1094,7 @@ const translations: TranslationDeepObject = { scanFailed: 'Le reçu n’a pas pu être scanné, car il manque un commerçant, une date ou un montant.', addAReceipt: { phrase1: 'Ajouter un reçu', - phrase2: 'ou faites-le glisser et déposez-le ici.', + phrase2: 'ou faites-le glisser et déposez-le ici', }, }, quickAction: { diff --git a/src/languages/it.ts b/src/languages/it.ts index 10284999ff802..7f7cf84fa0787 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -1090,7 +1090,7 @@ const translations: TranslationDeepObject = { scanFailed: 'Impossibile acquisire la ricevuta perché mancano l’esercente, la data o l’importo.', addAReceipt: { phrase1: 'Aggiungi una ricevuta', - phrase2: 'o trascinala e rilasciala qui.', + phrase2: 'o trascinala e rilasciala qui', }, }, quickAction: { diff --git a/src/languages/ja.ts b/src/languages/ja.ts index 71c69d26ec42a..3db0b9805dd57 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -1091,7 +1091,7 @@ const translations: TranslationDeepObject = { scanFailed: 'この領収書は、店舗名、日付、または金額が欠けているためスキャンできませんでした。', addAReceipt: { phrase1: '領収書を追加', - phrase2: 'またはここにドラッグ＆ドロップしてください。', + phrase2: 'またはここにドラッグ＆ドロップしてください', }, }, quickAction: { diff --git a/src/languages/nl.ts b/src/languages/nl.ts index df072f1f63f57..db0bbaf303ce9 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -1090,7 +1090,7 @@ const translations: TranslationDeepObject = { scanFailed: 'De bon kon niet worden gescand, omdat er een handelaar, datum of bedrag ontbreekt.', addAReceipt: { phrase1: 'Bon toevoegen', - phrase2: 'of sleep hem hierheen.', + phrase2: 'of sleep hem hierheen', }, }, quickAction: { diff --git a/src/languages/pl.ts b/src/languages/pl.ts index 4ba2a7bf30404..53ce1445df1df 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -1089,7 +1089,7 @@ const translations: TranslationDeepObject = { scanFailed: 'Nie można było zeskanować paragonu, ponieważ brakuje na nim sprzedawcy, daty lub kwoty.', addAReceipt: { phrase1: 'Dodaj paragon', - phrase2: 'lub przeciągnij i upuść go tutaj.', + phrase2: 'lub przeciągnij i upuść go tutaj', }, }, quickAction: { diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index 051933be350cb..ec81430c07dfa 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -1089,7 +1089,7 @@ const translations: TranslationDeepObject = { scanFailed: 'O recibo não pôde ser escaneado, pois está faltando o comerciante, a data ou o valor.', addAReceipt: { phrase1: 'Adicionar um recibo', - phrase2: 'ou arraste e solte um aqui.', + phrase2: 'ou arraste e solte um aqui', }, }, quickAction: { diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index 5f1fdc2a5b9b9..3ceb20303adf9 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -1075,7 +1075,7 @@ const translations: TranslationDeepObject = { scanFailed: '无法扫描该收据，因为缺少商家、日期或金额。', addAReceipt: { phrase1: '添加收据', - phrase2: '或者拖拽到这里。', + phrase2: '或者拖拽到这里', }, }, quickAction: {