Skip to content

Wallet empty state #67274

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
srikarparsi merged 7 commits into from
Jul 30, 2025
Merged

Wallet empty state #67274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
797652e
feat: change the Bank Account section description
koko57 Jul 24, 2025
f45b404
feat: add translations for section titles
koko57 Jul 24, 2025
e411588
Merge branch 'main' into feat/66072-wallet-empty-state
koko57 Jul 28, 2025
fd469b9
feat: show bank account in sections
koko57 Jul 28, 2025
1baffb9
fix: resolve conflicts
koko57 Jul 29, 2025
9718a50
fix: deps
koko57 Jul 29, 2025
83e8136
fix: apply suggested change
koko57 Jul 29, 2025
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
4 changes: 3 additions & 1 deletion src/languages/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1837,7 +1837,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Beta)',
sendAndReceiveMoney: 'Senden und Empfangen von Geld mit Freunden. Nur US-Bankkonten.',
enableWallet: 'Wallet aktivieren',
addBankAccountToSendAndReceive: 'Erhalten Sie eine Rückerstattung für Ausgaben, die Sie an einen Arbeitsbereich einreichen.',
addBankAccountToSendAndReceive: 'Fügen Sie ein Bankkonto hinzu, um Zahlungen zu tätigen oder zu empfangen.',
assignedCards: 'Zugewiesene Karten',
assignedCardsDescription: 'Dies sind Karten, die von einem Workspace-Admin zugewiesen wurden, um die Ausgaben des Unternehmens zu verwalten.',
expensifyCard: 'Expensify Card',
Expand All @@ -1848,6 +1848,8 @@ const translations = {
chooseYourBankAccount: 'Wählen Sie Ihr Bankkonto aus',
chooseAccountBody: 'Stellen Sie sicher, dass Sie das richtige auswählen.',
confirmYourBankAccount: 'Bestätigen Sie Ihr Bankkonto',
personalBankAccounts: 'Persönliche Bankkonten',
businessBankAccounts: 'Geschäftsbankkonten',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1815,7 +1815,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Beta)',
sendAndReceiveMoney: 'Send and receive money with friends. US bank accounts only.',
enableWallet: 'Enable wallet',
addBankAccountToSendAndReceive: 'Get paid back for expenses you submit to a workspace.',
addBankAccountToSendAndReceive: 'Add a bank account to make or receive payments.',
assignedCards: 'Assigned cards',
assignedCardsDescription: 'These are cards assigned by a workspace admin to manage company spend.',
expensifyCard: 'Expensify Card',
Expand All @@ -1826,6 +1826,8 @@ const translations = {
chooseYourBankAccount: 'Choose your bank account',
chooseAccountBody: 'Make sure that you select the right one.',
confirmYourBankAccount: 'Confirm your bank account',
personalBankAccounts: 'Personal bank accounts',
businessBankAccounts: 'Business bank accounts',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1813,7 +1813,7 @@ const translations = {
expensifyWallet: 'Billetera Expensify (Beta)',
sendAndReceiveMoney: 'Envía y recibe dinero desde tu Billetera Expensify. Solo cuentas bancarias de EE. UU.',
enableWallet: 'Habilitar billetera',
addBankAccountToSendAndReceive: 'Recibe el reembolso de los gastos que envíes a un espacio de trabajo.',
addBankAccountToSendAndReceive: 'Añade una cuenta bancaria para hacer o recibir pagos.',
assignedCards: 'Tarjetas asignadas',
assignedCardsDescription: 'Son tarjetas asignadas por un administrador del espacio de trabajo para gestionar los gastos de la empresa.',
expensifyCard: 'Tarjeta Expensify',
Expand All @@ -1824,6 +1824,8 @@ const translations = {
chooseYourBankAccount: 'Elige tu cuenta bancaria',
chooseAccountBody: 'Asegúrese de elegir el adecuado.',
confirmYourBankAccount: 'Confirma tu cuenta bancaria',
personalBankAccounts: 'Cuentas bancarias personales',
businessBankAccounts: 'Cuentas bancarias empresariales',
},
cardPage: {
expensifyCard: 'Tarjeta Expensify',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1839,7 +1839,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Bêta)',
sendAndReceiveMoney: "Envoyez et recevez de l'argent avec des amis. Comptes bancaires américains uniquement.",
enableWallet: 'Activer le portefeuille',
addBankAccountToSendAndReceive: 'Soyez remboursé pour les dépenses que vous soumettez à un espace de travail.',
addBankAccountToSendAndReceive: 'Ajoutez un compte bancaire pour effectuer ou recevoir des paiements.',
assignedCards: 'Cartes assignées',
assignedCardsDescription: "Ce sont des cartes attribuées par un administrateur d'espace de travail pour gérer les dépenses de l'entreprise.",
expensifyCard: 'Expensify Card',
Expand All @@ -1850,6 +1850,8 @@ const translations = {
chooseYourBankAccount: 'Choisissez votre compte bancaire',
chooseAccountBody: 'Assurez-vous de sélectionner le bon.',
confirmYourBankAccount: 'Confirmez votre compte bancaire',
personalBankAccounts: 'Comptes bancaires personnels',
businessBankAccounts: 'Comptes bancaires professionnels',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1831,7 +1831,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Beta)',
sendAndReceiveMoney: 'Invia e ricevi denaro con gli amici. Solo conti bancari statunitensi.',
enableWallet: 'Abilita portafoglio',
addBankAccountToSendAndReceive: "Ricevi il rimborso per le spese che invii a un'area di lavoro.",
addBankAccountToSendAndReceive: 'Aggiungi un conto bancario per effettuare o ricevere pagamenti.',
assignedCards: 'Carte assegnate',
assignedCardsDescription: 'Queste sono carte assegnate da un amministratore del workspace per gestire le spese aziendali.',
expensifyCard: 'Expensify Card',
Expand All @@ -1842,6 +1842,8 @@ const translations = {
chooseYourBankAccount: 'Scegli il tuo conto bancario',
chooseAccountBody: 'Assicurati di selezionare quello giusto.',
confirmYourBankAccount: 'Conferma il tuo conto bancario',
personalBankAccounts: 'Conti bancari personali',
businessBankAccounts: 'Conti bancari aziendali',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1828,7 +1828,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet（ベータ版）',
sendAndReceiveMoney: '友達とお金を送受信する。米国の銀行口座のみ。',
enableWallet: 'ウォレットを有効にする',
addBankAccountToSendAndReceive: 'ワークスペースに提出した経費の払い戻しを受ける。',
addBankAccountToSendAndReceive: '支払いや受け取りを行うために銀行口座を追加してください。',
assignedCards: '割り当てられたカード',
assignedCardsDescription: 'これらは、会社の支出を管理するためにワークスペース管理者によって割り当てられたカードです。',
expensifyCard: 'Expensify Card',
Expand All @@ -1839,6 +1839,8 @@ const translations = {
chooseYourBankAccount: '銀行口座を選択してください',
chooseAccountBody: '正しいものを選択してください。',
confirmYourBankAccount: '銀行口座を確認してください',
personalBankAccounts: '個人銀行口座',
businessBankAccounts: 'ビジネス銀行口座',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/nl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1831,7 +1831,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Beta)',
sendAndReceiveMoney: 'Stuur en ontvang geld met vrienden. Alleen Amerikaanse bankrekeningen.',
enableWallet: 'Portemonnee inschakelen',
addBankAccountToSendAndReceive: 'Word terugbetaald voor uitgaven die je indient bij een werkruimte.',
addBankAccountToSendAndReceive: 'Voeg een bankrekening toe om betalingen te doen of te ontvangen.',
assignedCards: 'Toegewezen kaarten',
assignedCardsDescription: 'Dit zijn kaarten die door een werkruimtebeheerder zijn toegewezen om de uitgaven van het bedrijf te beheren.',
expensifyCard: 'Expensify Card',
Expand All @@ -1842,6 +1842,8 @@ const translations = {
chooseYourBankAccount: 'Kies uw bankrekening',
chooseAccountBody: 'Zorg ervoor dat je de juiste selecteert.',
confirmYourBankAccount: 'Bevestig uw bankrekening',
personalBankAccounts: 'Persoonlijke bankrekeningen',
businessBankAccounts: 'Zakelijke bankrekeningen',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/pl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1827,7 +1827,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Beta)',
sendAndReceiveMoney: 'Wysyłaj i odbieraj pieniądze z przyjaciółmi. Tylko konta bankowe w USA.',
enableWallet: 'Włącz portfel',
addBankAccountToSendAndReceive: 'Otrzymaj zwrot kosztów za wydatki, które zgłaszasz do przestrzeni roboczej.',
addBankAccountToSendAndReceive: 'Dodaj konto bankowe, aby dokonywać lub otrzymywać płatności.',
assignedCards: 'Przypisane karty',
assignedCardsDescription: 'Są to karty przypisane przez administratora przestrzeni roboczej do zarządzania wydatkami firmy.',
expensifyCard: 'Expensify Card',
Expand All @@ -1838,6 +1838,8 @@ const translations = {
chooseYourBankAccount: 'Wybierz swoje konto bankowe',
chooseAccountBody: 'Upewnij się, że wybierasz właściwy.',
confirmYourBankAccount: 'Potwierdź swoje konto bankowe',
personalBankAccounts: 'Osobiste konta bankowe',
businessBankAccounts: 'Firmowe konta bankowe',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/pt-BR.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1830,7 +1830,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet (Beta)',
sendAndReceiveMoney: 'Envie e receba dinheiro com amigos. Apenas contas bancárias dos EUA.',
enableWallet: 'Ativar carteira',
addBankAccountToSendAndReceive: 'Receba reembolso pelas despesas que você enviar para um espaço de trabalho.',
addBankAccountToSendAndReceive: 'Adicione uma conta bancária para fazer ou receber pagamentos.',
assignedCards: 'Cartões atribuídos',
assignedCardsDescription: 'Estes são cartões atribuídos por um administrador de espaço de trabalho para gerenciar os gastos da empresa.',
expensifyCard: 'Expensify Card',
Expand All @@ -1841,6 +1841,8 @@ const translations = {
chooseYourBankAccount: 'Escolha sua conta bancária',
chooseAccountBody: 'Certifique-se de selecionar o correto.',
confirmYourBankAccount: 'Confirme sua conta bancária',
personalBankAccounts: 'Contas bancárias pessoais',
businessBankAccounts: 'Contas bancárias empresariais',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
4 changes: 3 additions & 1 deletion src/languages/zh-hans.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1813,7 +1813,7 @@ const translations = {
expensifyWallet: 'Expensify Wallet（测试版）',
sendAndReceiveMoney: '与朋友发送和接收资金。仅限美国银行账户。',
enableWallet: '启用钱包',
addBankAccountToSendAndReceive: '获得报销您提交到工作区的费用。',
addBankAccountToSendAndReceive: '添加银行账户以进行付款或收款。',
assignedCards: '已分配的卡片',
assignedCardsDescription: '这些是由工作区管理员分配的卡片，用于管理公司支出。',
expensifyCard: 'Expensify Card',
Expand All @@ -1824,6 +1824,8 @@ const translations = {
chooseYourBankAccount: '选择您的银行账户',
chooseAccountBody: '确保您选择正确的选项。',
confirmYourBankAccount: '确认您的银行账户',
personalBankAccounts: '个人银行账户',
businessBankAccounts: '企业银行账户',
},
cardPage: {
expensifyCard: 'Expensify Card',
Expand Down
129 changes: 83 additions & 46 deletions src/pages/settings/Wallet/PaymentMethodList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {AccountData, BankAccountList, Card, CardList, CompanyCardFeed} from '@src/types/onyx';
import type {AccountData, BankAccount, BankAccountList, Card, CardList, CompanyCardFeed} from '@src/types/onyx';
import type {BankIcon} from '@src/types/onyx/Bank';
import type {Errors} from '@src/types/onyx/OnyxCommon';
import type PaymentMethod from '@src/types/onyx/PaymentMethod';
Expand Down Expand Up @@ -104,6 +104,9 @@

/** The policy invoice's transfer bank accountID */
invoiceTransferBankAccountID?: number;

/** Whether the bank accounts should be displayed in private and business sections */
shouldShowBankAccountSections?: boolean;
};

type PaymentMethodItem = PaymentMethod & {
Expand Down Expand Up @@ -166,7 +169,10 @@
return paymentMethod.accountType === actionPaymentMethodType && paymentMethod.methodID === activePaymentMethodID;
}

function keyExtractor(item: PaymentMethod) {
function keyExtractor(item: PaymentMethod | string) {
if (typeof item === 'string') {
return item;
}
return item.key ?? '';
}

Expand All @@ -189,6 +195,7 @@
listItemStyle = {},
shouldShowRightIcon = true,
invoiceTransferBankAccountID,
shouldShowBankAccountSections = false,
}: PaymentMethodListProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand Down Expand Up @@ -410,71 +417,101 @@
[shouldShowAddBankAccountButton, onPressItem, translate, onPress, buttonRef, styles.paymentMethod, listItemStyle],
);

const itemsToRender = useMemo(() => {
if (!shouldShowBankAccountSections) {
return filteredPaymentMethods;
}
if (
filteredPaymentMethods.find((method) => (method as BankAccount).accountData?.type === CONST.BANK_ACCOUNT.TYPE.PERSONAL) &&
filteredPaymentMethods.find((method) => (method as BankAccount).accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS)
) {
return [
translate('walletPage.personalBankAccounts'),
...filteredPaymentMethods.filter((method) => (method as BankAccount).accountData?.type === CONST.BANK_ACCOUNT.TYPE.PERSONAL),
translate('walletPage.businessBankAccounts'),
...filteredPaymentMethods.filter((method) => (method as BankAccount).accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS),
];
}
return filteredPaymentMethods;
}, [filteredPaymentMethods, shouldShowBankAccountSections, translate]);

/**
* Create a menuItem for each passed paymentMethod
*/
const renderItem = useCallback(
({item}: RenderSuggestionMenuItemProps<PaymentMethodItem>) => (
<OfflineWithFeedback
onClose={() => dismissError(item)}
pendingAction={item.pendingAction}
errors={item.errors}
errorRowStyles={styles.ph6}
canDismissError={item.canDismissError}
>
<MenuItem
onPress={item.onPress}
title={item.title}
description={item.description}
icon={item.icon}
plaidUrl={item.plaidUrl}
disabled={item.disabled}
iconType={item.plaidUrl ? CONST.ICON_TYPE_PLAID : CONST.ICON_TYPE_ICON}
displayInDefaultIconColor
iconHeight={item.iconHeight ?? item.iconSize}
iconWidth={item.iconWidth ?? item.iconSize}
iconStyles={item.iconStyles}
badgeText={
shouldShowDefaultBadge(
filteredPaymentMethods,
invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.methodID === userWallet?.walletLinkedAccountID,
)
? translate('paymentMethodList.defaultPaymentMethod')
: undefined
}
wrapperStyle={[styles.paymentMethod, listItemStyle]}
iconRight={item.iconRight}
badgeStyle={styles.badgeBordered}
shouldShowRightIcon={item.shouldShowRightIcon}
shouldShowSelectedState={shouldShowSelectedState}
isSelected={selectedMethodID.toString() === item.methodID?.toString()}
interactive={item.interactive}
brickRoadIndicator={item.brickRoadIndicator}
success={item.isMethodActive}
/>
</OfflineWithFeedback>
),

({item, index}: RenderSuggestionMenuItemProps<PaymentMethodItem | string>) => {
if (typeof item === 'string') {
return (
<View style={[listItemStyle, index === 0 ? styles.mt4 : styles.mt6, styles.mb1]}>
<Text style={[styles.textLabel, styles.colorMuted]}>{item}</Text>
</View>
);
}
return (
<OfflineWithFeedback
onClose={() => dismissError(item)}
pendingAction={item.pendingAction}
errors={item.errors}
errorRowStyles={styles.ph6}
canDismissError={item.canDismissError}
>
<MenuItem
onPress={item.onPress}
title={item.title}
description={item.description}
icon={item.icon}
plaidUrl={item.plaidUrl}
disabled={item.disabled}
iconType={item.plaidUrl ? CONST.ICON_TYPE_PLAID : CONST.ICON_TYPE_ICON}
displayInDefaultIconColor
iconHeight={item.iconHeight ?? item.iconSize}
iconWidth={item.iconWidth ?? item.iconSize}
iconStyles={item.iconStyles}
badgeText={
shouldShowDefaultBadge(
filteredPaymentMethods,
invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.methodID === userWallet?.walletLinkedAccountID,
)
? translate('paymentMethodList.defaultPaymentMethod')
: undefined
}
wrapperStyle={[styles.paymentMethod, listItemStyle]}
iconRight={item.iconRight}
badgeStyle={styles.badgeBordered}
shouldShowRightIcon={item.shouldShowRightIcon}
shouldShowSelectedState={shouldShowSelectedState}
isSelected={selectedMethodID.toString() === item.methodID?.toString()}
interactive={item.interactive}
brickRoadIndicator={item.brickRoadIndicator}
success={item.isMethodActive}
/>
</OfflineWithFeedback>
);
},
[

Check warning on line 491 in src/pages/settings/Wallet/PaymentMethodList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

React Hook useCallback has missing dependencies: 'styles.mb1' and 'styles.mt4'. Either include them or remove the dependency array
Copy link
Contributor

@shubham1206agra shubham1206agra Jul 31, 2025

Choose a reason for hiding this comment

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

@koko57 You missed missed dependency here.

@srikarparsi Please consider this as regression and penalise C+ accordingly.

Copy link
Contributor

@srikarparsi srikarparsi Jul 31, 2025

Choose a reason for hiding this comment

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

Hey @shubham1206agra, can you link the issue this caused please?

Copy link
Contributor

@shubham1206agra shubham1206agra Jul 31, 2025

Choose a reason for hiding this comment

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

There was no issue. But it caused lint failure when another PR was merged #67435.

Copy link
Contributor

@srikarparsi srikarparsi Jul 31, 2025

Choose a reason for hiding this comment

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

It looks like that is a different lint error? The one I see is

React Hook useCallback has missing dependencies: 'styles.mb1' and 'styles.mt4'. Either include them or remove the dependency array.

Is that the one you are referencing?

Copy link
Contributor

@shubham1206agra shubham1206agra Jul 31, 2025

Choose a reason for hiding this comment

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

Yes

styles.ph6,
styles.paymentMethod,
styles.badgeBordered,
styles.textLabel,
styles.colorMuted,
styles.mh8,
styles.mt6,
filteredPaymentMethods,
invoiceTransferBankAccountID,
userWallet?.walletLinkedAccountID,
translate,
listItemStyle,
shouldShowSelectedState,
selectedMethodID,
userWallet?.walletLinkedAccountID,
],
);

return (
<>
<View style={[style, {minHeight: (filteredPaymentMethods.length + (shouldShowAddBankAccount ? 1 : 0)) * variables.optionRowHeight}]}>
<FlashList
<FlashList<PaymentMethod | string>
estimatedItemSize={variables.optionRowHeight}
data={filteredPaymentMethods}
data={itemsToRender}
renderItem={renderItem}
keyExtractor={keyExtractor}
ListEmptyComponent={shouldShowEmptyListMessage ? renderListEmptyComponent : null}
Expand Down
Loading
Loading