Skip to content

fix: Update empty receipt section in the expense RHP #79545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NikkiWines merged 4 commits into from
Jan 27, 2026
Merged

fix: Update empty receipt section in the expense RHP #79545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51d7927
fix: Update empty receipt section in the expense RHP
nkdengineer Jan 14, 2026
e07aa68
Merge branch 'main' into fix/79189
nkdengineer Jan 19, 2026
a04aea4
update receipt alternative style
nkdengineer Jan 19, 2026
5580e96
update translation
nkdengineer Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 42 additions & 16 deletions src/components/ReceiptEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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();
Expand All @@ -44,6 +58,7 @@ function ReceiptEmptyState({onPress, disabled = false, isThumbnail = false, isIn
styles.alignItemsCenter,
styles.justifyContentCenter,
styles.moneyRequestViewImage,
isDisplayedInWideRHP && !disabled && styles.pb5,
isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
style,
Expand All @@ -66,22 +81,33 @@ function ReceiptEmptyState({onPress, disabled = false, isThumbnail = false, isIn
disabledStyle={styles.cursorDefault}
style={containerStyle}
>
<View>
<Icon
fill={theme.border}
src={icons.Receipt}
width={variables.eReceiptEmptyIconWidth}
height={variables.eReceiptEmptyIconWidth}
/>
{!isThumbnail && (
<Icon
src={icons.ReceiptPlaceholderPlus}
width={variables.avatarSizeSmall}
height={variables.avatarSizeSmall}
additionalStyles={styles.moneyRequestAttachReceiptThumbnailIcon}
/>
)}
<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
<View style={styles.pRelative}>
<Icon
fill={theme.border}
src={icons.Receipt}
width={variables.eReceiptEmptyIconWidth}
height={variables.eReceiptEmptyIconWidth}
/>
{!isThumbnail && (
<Icon
src={icons.ReceiptPlaceholderPlus}
width={variables.avatarSizeSmall}
height={variables.avatarSizeSmall}
additionalStyles={styles.moneyRequestAttachReceiptThumbnailIcon}
/>
)}
</View>
{!isThumbnail && isDisplayedInWideRHP && (
<>
<Text style={[styles.textHeadline, styles.mt4]}>{translate('receipt.addAReceipt.phrase1')}</Text>
<Text style={[styles.textSupporting, styles.textNormal]}>{translate('receipt.addAReceipt.phrase2')}</Text>
</>
)}
</View>
</View>
{isDisplayedInWideRHP && !disabled && <ReceiptAlternativeMethods />}
Comment on lines +108 to +110
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep alternative-method links out of the receipt pressable

In the wide RHP flow, ReceiptEmptyState is rendered as a Pressable that navigates to the receipt upload on press, and ReceiptAlternativeMethods (which contains <a> links) is now nested inside that pressable. On web/desktop, click events bubble, so clicking “Download the app”/mailto/sms links will also trigger the parent onPress and immediately navigate to the scan/receipt route, making those links effectively unusable in that context. Consider moving ReceiptAlternativeMethods outside the pressable or disabling the parent’s interaction for that sub-tree (e.g., pointerEvents="box-none" or a non-pressable wrapper) so link clicks don’t fire the upload navigation.

Useful? React with 👍 / 👎.

Copy link
Contributor

@NikkiWines NikkiWines Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is correct, shouldn't we do something like:

{isDisplayedInWideRHP && !disabled && (
    <View onClick={(e) => e.stopPropagation()}>
        <ReceiptAlternativeMethods />
    </View>
)}

Copy link
Contributor

@DylanDylann DylanDylann Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From testing, pressing the links inside ReceiptAlternativeMethods doesn't bubble to the parent Pressable, so wrapping with stopPropagation is unnecessary. Either way looks fine to me.

Copy link
Contributor

@NikkiWines NikkiWines Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, great! Thanks for confirming 🙌

</Wrapper>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/components/ReportActionItem/MoneyRequestReceiptView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ function MoneyRequestReceiptView({
isThumbnail={!canEditReceipt}
isInMoneyRequestView
style={receiptStyle}
isDisplayedInWideRHP={isDisplayedInWideRHP}
/>
</OfflineWithFeedback>
)}
Expand Down
4 changes: 4 additions & 0 deletions src/languages/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1093,6 +1093,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1085,6 +1085,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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -814,6 +814,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1092,6 +1092,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1088,6 +1088,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1089,6 +1089,10 @@ const translations: TranslationDeepObject<typeof en> = {
deleteConfirmation: 'この領収書を削除してもよろしいですか？',
addReceipt: '領収書を追加',
scanFailed: 'この領収書は、店舗名、日付、または金額が欠けているためスキャンできませんでした。',
addAReceipt: {
phrase1: '領収書を追加',
phrase2: 'またはここにドラッグ＆ドロップしてください',
},
},
quickAction: {
scanReceipt: 'レシートをスキャン',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/nl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1088,6 +1088,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/pl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,6 +1087,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/pt-BR.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,6 +1087,10 @@ const translations: TranslationDeepObject<typeof en> = {
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',
Expand Down
4 changes: 4 additions & 0 deletions src/languages/zh-hans.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1073,6 +1073,10 @@ const translations: TranslationDeepObject<typeof en> = {
deleteConfirmation: '您确定要删除此收据吗？',
addReceipt: '添加收据',
scanFailed: '无法扫描该收据，因为缺少商家、日期或金额。',
addAReceipt: {
phrase1: '添加收据',
phrase2: '或者拖拽到这里',
},
},
quickAction: {
scanReceipt: '扫描收据',
Expand Down
Loading