diff --git a/docs/articles/new-expensify/getting-started/Expensify-Home-Overview.md b/docs/articles/new-expensify/getting-started/Expensify-Home-Overview.md index 8b2c437734a3..36dcca7df4fe 100644 --- a/docs/articles/new-expensify/getting-started/Expensify-Home-Overview.md +++ b/docs/articles/new-expensify/getting-started/Expensify-Home-Overview.md @@ -50,6 +50,7 @@ The **Time-sensitive alerts** section appears only when there is something that These alerts appear when: - A workflow is blocked, such as a broken bank or accounting connection due to expired or invalid credentials - A bank account is locked, such as a business or personal bank account that has been locked due to a failed debit or bank-side restriction +- A reimbursement is waiting for the payee to add a personal deposit account - There is potential risk, such as suspected Expensify Card fraud on an active card - An action must be taken within a short window, such as a limited-time offer or early adoption discount diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 02b4f8b17e36..051c3addadd6 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -3777,6 +3777,12 @@ const CONST = { BANK_ACCOUNT: 'bankAccountID', }, + /** The payment method a payee still has to set up before a queued payment can settle */ + MISSING_PAYMENT_METHODS: { + BANK_ACCOUNT: 'bankAccount', + WALLET: 'wallet', + }, + IOU: { MAX_RECENT_REPORTS_TO_SHOW: 5, MAX_RECENT_ATTENDEES: 40, diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b889d244e154..c25ccc0e0a69 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -121,6 +121,7 @@ const DYNAMIC_ROUTES = { path: 'add-bank-account/verify-account', entryScreens: [ SCREENS.SETTINGS.WALLET.ROOT, + SCREENS.HOME, SCREENS.RIGHT_MODAL.SEARCH_REPORT, SCREENS.RIGHT_MODAL.EXPENSE_REPORT, SCREENS.REPORT, diff --git a/src/languages/de.ts b/src/languages/de.ts index af8ff126d4ff..793a2723cdb2 100644 --- a/src/languages/de.ts +++ b/src/languages/de.ts @@ -968,6 +968,7 @@ const translations: TranslationDeepObject = { title: 'Zeitkritisch', addShippingAddress: {title: 'Wir benötigen deine Versandadresse', subtitle: 'Geben Sie eine Adresse an, um Ihre Expensify Karte zu erhalten.', cta: 'Adresse hinzufügen'}, addPaymentCard: {title: 'Fügen Sie eine Zahlungskarte hinzu, um Expensify weiter zu nutzen', subtitle: 'Konto > Abonnement', cta: 'Hinzufügen'}, + addBankAccount: {title: 'Fügen Sie ein Bankkonto hinzu, um eine Erstattung zu erhalten'}, activateCard: {title: 'Aktivieren Sie Ihre Expensify Karte', subtitle: 'Validieren Sie Ihre Karte und beginnen Sie mit dem Ausgeben.', cta: 'Aktivieren'}, reviewCardFraud: { title: 'Möglichen Betrug mit Ihrer Expensify Karte überprüfen', diff --git a/src/languages/en.ts b/src/languages/en.ts index 8688ffd2f8f9..a9263bb036d0 100644 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1035,6 +1035,10 @@ const translations = { subtitle: 'Account > Subscription', cta: 'Add', }, + addBankAccount: { + // @context Home reminder shown to a payment recipient when a reimbursement is waiting for them to add a personal deposit account. + title: 'Add a bank account to get reimbursed', + }, activateCard: { title: 'Activate your Expensify Card', subtitle: 'Validate your card and start spending.', diff --git a/src/languages/es.ts b/src/languages/es.ts index 7aedd99cd67a..776f8a349694 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -938,6 +938,7 @@ const translations: TranslationDeepObject = { subtitle: 'Cuenta > Suscripción', cta: 'Añadir', }, + addBankAccount: {title: 'Añade una cuenta bancaria para recibir el reembolso'}, activateCard: { title: 'Activa tu Tarjeta Expensify', subtitle: 'Valida tu tarjeta y empieza a gastar.', diff --git a/src/languages/fr.ts b/src/languages/fr.ts index 002590e1b08f..73d23c8bad0f 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -971,6 +971,7 @@ const translations: TranslationDeepObject = { title: 'Urgent', addShippingAddress: {title: 'Nous avons besoin de votre adresse de livraison', subtitle: 'Indiquez une adresse pour recevoir votre Carte Expensify.', cta: 'Ajouter une adresse'}, addPaymentCard: {title: 'Ajoutez une carte de paiement pour continuer à utiliser Expensify', subtitle: 'Compte > Abonnement', cta: 'Ajouter'}, + addBankAccount: {title: 'Ajoutez un compte bancaire pour être remboursé'}, activateCard: {title: 'Activer votre Carte Expensify', subtitle: 'Validez votre carte et commencez à dépenser.', cta: 'Activer'}, reviewCardFraud: { title: 'Examiner une éventuelle fraude sur votre Carte Expensify', diff --git a/src/languages/it.ts b/src/languages/it.ts index 78c08b4b6400..abe58d8e67ac 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -969,6 +969,7 @@ const translations: TranslationDeepObject = { title: 'Sensibile al tempo', addShippingAddress: {title: 'Ci serve il tuo indirizzo di spedizione', subtitle: 'Fornisci un indirizzo per ricevere la tua Carta Expensify.', cta: 'Aggiungi indirizzo'}, addPaymentCard: {title: 'Aggiungi una carta di pagamento per continuare a usare Expensify', subtitle: 'Account > Abbonamento', cta: 'Aggiungi'}, + addBankAccount: {title: 'Aggiungi un conto bancario per ricevere il rimborso'}, activateCard: {title: 'Attiva la tua Carta Expensify', subtitle: 'Convalida la tua carta e inizia a spendere.', cta: 'Attiva'}, reviewCardFraud: { title: 'Esamina una possibile frode sulla tua Carta Expensify', diff --git a/src/languages/ja.ts b/src/languages/ja.ts index 3ac6fb336613..a38415fe5628 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -958,6 +958,7 @@ const translations: TranslationDeepObject = { title: '時間に敏感', addShippingAddress: {title: '配送先住所が必要です', subtitle: 'Expensify カードを受け取る住所を入力してください。', cta: '住所を追加'}, addPaymentCard: {title: 'Expensify を引き続きご利用いただくには、支払いカードを追加してください', subtitle: 'アカウント ＞ サブスクリプション', cta: '追加'}, + addBankAccount: {title: '銀行口座を追加して払い戻しを受け取りましょう'}, activateCard: {title: 'Expensify カードを有効化する', subtitle: 'カードを認証して支出を始めましょう。', cta: '有効化'}, reviewCardFraud: { title: 'Expensify カードの不正利用の可能性を確認する', diff --git a/src/languages/nl.ts b/src/languages/nl.ts index 3405ec30cc31..51163191b082 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -967,6 +967,7 @@ const translations: TranslationDeepObject = { title: 'Tijdgevoelig', addShippingAddress: {title: 'We hebben je verzendadres nodig', subtitle: 'Geef een adres op om je Expensify Kaart te ontvangen.', cta: 'Adres toevoegen'}, addPaymentCard: {title: 'Voeg een betaalkaart toe om Expensify te blijven gebruiken', subtitle: 'Account > Abonnement', cta: 'Toevoegen'}, + addBankAccount: {title: 'Voeg een bankrekening toe om je terugbetaling te ontvangen'}, activateCard: {title: 'Activeer je Expensify Kaart', subtitle: 'Valideer je kaart en begin met uitgeven.', cta: 'Activeren'}, reviewCardFraud: { title: 'Controleer mogelijk misbruik van je Expensify Kaart', diff --git a/src/languages/pl.ts b/src/languages/pl.ts index dd61ef993763..1bb11563a071 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -969,6 +969,7 @@ const translations: TranslationDeepObject = { title: 'Wymaga szybkiej reakcji', addShippingAddress: {title: 'Potrzebujemy Twojego adresu wysyłki', subtitle: 'Podaj adres, na który mamy wysłać twoją Kartę Expensify.', cta: 'Dodaj adres'}, addPaymentCard: {title: 'Dodaj kartę płatniczą, żeby dalej korzystać z Expensify', subtitle: 'Konto > Subskrypcja', cta: 'Dodaj'}, + addBankAccount: {title: 'Dodaj konto bankowe, aby otrzymać zwrot'}, activateCard: {title: 'Aktywuj swoją Kartę Expensify', subtitle: 'Zatwierdź swoją kartę i zacznij wydawać.', cta: 'Aktywuj'}, reviewCardFraud: { title: 'Sprawdź potencjalne oszustwo na swojej Karcie Expensify', diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index ce0fcfbe42b5..8842052d8d35 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -967,6 +967,7 @@ const translations: TranslationDeepObject = { title: 'Urgente', addShippingAddress: {title: 'Precisamos do seu endereço de entrega', subtitle: 'Informe um endereço para receber seu Cartão Expensify.', cta: 'Adicionar endereço'}, addPaymentCard: {title: 'Adicione um cartão de pagamento para continuar usando o Expensify', subtitle: 'Conta > Assinatura', cta: 'Adicionar'}, + addBankAccount: {title: 'Adicione uma conta bancária para ser reembolsado'}, activateCard: {title: 'Ative seu Cartão Expensify', subtitle: 'Valide seu cartão e comece a gastar.', cta: 'Ativar'}, reviewCardFraud: { title: 'Analisar possível fraude no seu Cartão Expensify', diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index d2b1662932aa..5edacf402e75 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -941,6 +941,7 @@ const translations: TranslationDeepObject = { title: '时间敏感', addShippingAddress: {title: '我们需要您的收货地址', subtitle: '请提供一个地址以接收您的 Expensify 卡。', cta: '添加地址'}, addPaymentCard: {title: '添加支付卡以继续使用 Expensify', subtitle: '账户 ＞ 订阅', cta: '添加'}, + addBankAccount: {title: '添加银行账户以接收报销'}, activateCard: {title: '激活你的 Expensify 卡', subtitle: '验证您的银行卡并开始消费。', cta: '启用'}, reviewCardFraud: { title: '审查您 Expensify 卡上的潜在欺诈交易', diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 2803d8120732..ebcc5d1d16b5 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -222,7 +222,6 @@ import { isMovedAction, isOlderReportAction, isPendingRemove, - isReimbursementQueuedAction, isReopenedAction, isReportActionVisible, isReportPreviewAction, @@ -933,7 +932,7 @@ type Ancestor = { shouldDisplayNewMarker: boolean; }; -type MissingPaymentMethod = 'bankAccount' | 'wallet'; +type MissingPaymentMethod = ValueOf; type OutstandingChildRequest = { hasOutstandingChildRequest?: boolean; @@ -11449,22 +11448,34 @@ function isAllowedToApproveExpenseReport(report: OnyxEntry, approverAcco /** * What missing payment method does this report action indicate, if any? */ +function getMissingPaymentMethodForQueuedPayment( + userWalletTierName: string | undefined, + reportAction: ReportAction, + bankAccountList: OnyxEntry, +): MissingPaymentMethod | undefined { + const paymentType = getOriginalMessage(reportAction)?.paymentType; + if (paymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) { + return !userWalletTierName || userWalletTierName === CONST.WALLET.TIER_NAME.SILVER ? CONST.MISSING_PAYMENT_METHODS.WALLET : undefined; + } + + return !hasCreditBankAccount(bankAccountList) ? CONST.MISSING_PAYMENT_METHODS.BANK_ACCOUNT : undefined; +} + +/** + * What missing payment method does this action indicate for the current report submitter, if any? + */ function getIndicatedMissingPaymentMethod( userWalletTierName: string | undefined, reportId: string | undefined, - reportAction: ReportAction, + reportAction: ReportAction, bankAccountList: OnyxEntry, ): MissingPaymentMethod | undefined { - const isSubmitterOfUnsettledReport = reportId && isCurrentUserSubmitter(getReport(reportId, deprecatedAllReports)) && !isSettled(reportId); - if (!reportId || !isSubmitterOfUnsettledReport || !isReimbursementQueuedAction(reportAction)) { + const isSubmitterOfUnsettledReport = !!reportId && isCurrentUserSubmitter(getReport(reportId, deprecatedAllReports)) && !isSettled(reportId); + if (!isSubmitterOfUnsettledReport) { return undefined; } - const paymentType = getOriginalMessage(reportAction)?.paymentType; - if (paymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) { - return !userWalletTierName || userWalletTierName === CONST.WALLET.TIER_NAME.SILVER ? 'wallet' : undefined; - } - return !hasCreditBankAccount(bankAccountList) ? 'bankAccount' : undefined; + return getMissingPaymentMethodForQueuedPayment(userWalletTierName, reportAction, bankAccountList); } /** @@ -13937,6 +13948,7 @@ export { sortIconsByName, getIconsForParticipants, getIndicatedMissingPaymentMethod, + getMissingPaymentMethodForQueuedPayment, getLastVisibleMessage, getMoneyRequestSpendBreakdown, getNonHeldAndFullAmount, diff --git a/src/pages/AddPersonalBankAccountPage.tsx b/src/pages/AddPersonalBankAccountPage.tsx index 7ad564857e61..d7c165a2b27e 100644 --- a/src/pages/AddPersonalBankAccountPage.tsx +++ b/src/pages/AddPersonalBankAccountPage.tsx @@ -9,6 +9,7 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; +import getActiveTabName from '@libs/Navigation/helpers/getActiveTabName'; import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName'; import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; @@ -18,6 +19,7 @@ import {continueSetup} from '@userActions/PaymentMethods'; import NAVIGATORS from '@src/NAVIGATORS'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; import React, {useContext, useEffect} from 'react'; @@ -29,13 +31,15 @@ function AddPersonalBankAccountPage() { const [personalBankAccount] = useOnyx(ONYXKEYS.PERSONAL_BANK_ACCOUNT); const shouldShowSuccess = personalBankAccount?.shouldShowSuccess ?? false; const topmostFullScreenRoute = navigationRef.current?.getRootState()?.routes.findLast((route) => isFullScreenName(route.name)); + const activeTab = getActiveTabName(topmostFullScreenRoute); const kycWallRef = useContext(KYCWallContext); const goBack = () => { - switch (topmostFullScreenRoute?.name) { + switch (activeTab) { case NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR: Navigation.goBack(ROUTES.SETTINGS_WALLET); break; + case SCREENS.HOME: case NAVIGATORS.REPORTS_SPLIT_NAVIGATOR: Navigation.closeRHPFlow(); break; diff --git a/src/pages/home/TimeSensitiveSection/hooks/useTimeSensitiveAddBankAccount.ts b/src/pages/home/TimeSensitiveSection/hooks/useTimeSensitiveAddBankAccount.ts new file mode 100644 index 000000000000..49953e3a09d4 --- /dev/null +++ b/src/pages/home/TimeSensitiveSection/hooks/useTimeSensitiveAddBankAccount.ts @@ -0,0 +1,61 @@ +/** + * Identifies queued payments that require the current user to add a personal bank account. + */ +import useOnyx from '@hooks/useOnyx'; + +import hasCreditBankAccount from '@libs/actions/ReimbursementAccount/hasCreditBankAccount'; +import {isNewerReportAction, isReimbursementQueuedAction} from '@libs/ReportActionsUtils'; +import {getMissingPaymentMethodForQueuedPayment} from '@libs/ReportUtils'; + +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {Report, ReportAction, ReportActions} from '@src/types/onyx'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; + +import type {OnyxCollection} from 'react-native-onyx'; + +import {accountIDSelector} from '@selectors/Session'; +import {tierNameSelector} from '@selectors/UserWallet'; + +type ReimbursementQueuedAction = ReportAction; + +function getLatestReimbursementQueuedAction(reportID: string, allReportActions: OnyxCollection): ReimbursementQueuedAction | undefined { + let latestAction: ReimbursementQueuedAction | undefined; + const reportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`]; + + for (const action of Object.values(reportActions ?? {})) { + if (isReimbursementQueuedAction(action) && (!latestAction || isNewerReportAction(action, latestAction))) { + latestAction = action; + } + } + + return latestAction; +} + +function useTimeSensitiveAddBankAccount() { + const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: accountIDSelector}); + const waitingReportIDsSelector = (allReports: OnyxCollection): string[] => + Object.values(allReports ?? {}) + .filter((report): report is Report => !!report?.reportID && report.isWaitingOnBankAccount === true && report.ownerAccountID === accountID) + .map((report) => report.reportID); + const [waitingReportIDs] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: waitingReportIDsSelector}); + const [bankAccountList, bankAccountListMetadata] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const [userWalletTierName] = useOnyx(ONYXKEYS.USER_WALLET, {selector: tierNameSelector}); + const canShowAddBankAccount = accountID !== undefined && !isLoadingOnyxValue(bankAccountListMetadata) && !hasCreditBankAccount(bankAccountList); + + const shouldShowAddBankAccountSelector = (allReportActions: OnyxCollection): boolean => { + if (!canShowAddBankAccount) { + return false; + } + + return (waitingReportIDs ?? []).some((reportID) => { + const queuedAction = getLatestReimbursementQueuedAction(reportID, allReportActions); + return !!queuedAction && getMissingPaymentMethodForQueuedPayment(userWalletTierName, queuedAction, bankAccountList) === CONST.MISSING_PAYMENT_METHODS.BANK_ACCOUNT; + }); + }; + const [shouldShowAddBankAccount = false] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS, {selector: shouldShowAddBankAccountSelector}); + + return {shouldShowAddBankAccount}; +} + +export default useTimeSensitiveAddBankAccount; diff --git a/src/pages/home/TimeSensitiveSection/index.tsx b/src/pages/home/TimeSensitiveSection/index.tsx index b02e842254bf..aef9df798b9b 100644 --- a/src/pages/home/TimeSensitiveSection/index.tsx +++ b/src/pages/home/TimeSensitiveSection/index.tsx @@ -29,12 +29,14 @@ import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; import useBrokenDirectCompanyCardFeedsForAdmin from './hooks/useBrokenDirectCompanyCardFeedsForAdmin'; +import useTimeSensitiveAddBankAccount from './hooks/useTimeSensitiveAddBankAccount'; import useTimeSensitiveAddPaymentCard from './hooks/useTimeSensitiveAddPaymentCard'; import useTimeSensitiveBilling from './hooks/useTimeSensitiveBilling'; import useTimeSensitiveCards from './hooks/useTimeSensitiveCards'; import useTimeSensitiveLockedBankAccount from './hooks/useTimeSensitiveLockedBankAccount'; import useTimeSensitiveSignerInfo from './hooks/useTimeSensitiveSignerInfo'; import ActivateCard from './items/ActivateCard'; +import AddBankAccount from './items/AddBankAccount'; import AddPaymentCard from './items/AddPaymentCard'; import AddShippingAddress from './items/AddShippingAddress'; import AddVirtualCardPersonalDetails from './items/AddVirtualCardPersonalDetails'; @@ -82,6 +84,7 @@ function TimeSensitiveSection() { // Use custom hooks for offers and cards (Release 3) const {shouldShowAddPaymentCard} = useTimeSensitiveAddPaymentCard(); + const {shouldShowAddBankAccount} = useTimeSensitiveAddBankAccount(); const { shouldShowAddShippingAddress, shouldShowActivateCard, @@ -167,6 +170,7 @@ function TimeSensitiveSection() { shouldShowFixFailedBilling || shouldShowReviewCardFraud || shouldShowAddPaymentCard || + shouldShowAddBankAccount || hasBrokenCompanyCards || hasBrokenPersonalCards || hasBrokenPolicyConnections || @@ -183,14 +187,15 @@ function TimeSensitiveSection() { // 2. Fix failed billing (existing customers with declined cards) // 3. Potential card fraud // 4. Add payment card (trial ended, no payment card) - // 5. Broken bank connections (company cards) - // 6. Broken bank connections (personal cards) - // 7. Locked bank accounts (workspace VBAs and personal) - // 8. Enter signer info for global bank accounts - // 9. Broken policy connections (accounting + HR) - // 10. Expensify card shipping - // 11. Expensify card activation - // 12. Virtual Expensify card needs personal details + // 5. Add bank account for a queued reimbursement + // 6. Broken bank connections (company cards) + // 7. Broken bank connections (personal cards) + // 8. Locked bank accounts (workspace VBAs and personal) + // 9. Enter signer info for global bank accounts + // 10. Broken policy connections (accounting + HR) + // 11. Expensify card shipping + // 12. Expensify card activation + // 13. Virtual Expensify card needs personal details const items: React.ReactNode[] = []; // Priority 1: Validate account @@ -219,7 +224,11 @@ function TimeSensitiveSection() { if (shouldShowAddPaymentCard) { items.push(); } - // Priority 5: Broken company card connections + // Priority 5: Add bank account for a queued reimbursement + if (shouldShowAddBankAccount) { + items.push(); + } + // Priority 6: Broken company card connections for (const connection of brokenCompanyCardConnections) { const card = cardFeedErrors.cardsWithBrokenFeedConnection[connection.cardID]; if (!card) { @@ -234,7 +243,7 @@ function TimeSensitiveSection() { />, ); } - // Priority 6: Broken personal card connections + // Priority 7: Broken personal card connections for (const connection of brokenPersonalCardConnections) { const card = cardFeedErrors.personalCardsWithBrokenConnection[connection.cardID]; if (!card) { @@ -247,7 +256,7 @@ function TimeSensitiveSection() { />, ); } - // Priority 7: Locked bank accounts + // Priority 8: Locked bank accounts for (const lockedBankAccount of lockedBankAccounts) { items.push( , ); } - // Priority 8: Enter signer info for global bank accounts + // Priority 9: Enter signer info for global bank accounts for (const item of pendingSignerInfo) { items.push( , ); } - // Priority 9: Broken policy connections (accounting + HR) + // Priority 10: Broken policy connections (accounting + HR) for (const connection of brokenPolicyConnections) { items.push( , ); } - // Priority 10: Expensify card shipping + // Priority 11: Expensify card shipping if (shouldShowAddShippingAddress) { for (const card of cardsNeedingShippingAddress) { items.push( @@ -291,7 +300,7 @@ function TimeSensitiveSection() { ); } } - // Priority 11: Expensify card activation + // Priority 12: Expensify card activation if (shouldShowActivateCard) { for (const card of cardsNeedingActivation) { items.push( @@ -302,7 +311,7 @@ function TimeSensitiveSection() { ); } } - // Priority 11: Virtual Expensify card needs personal details before reveal + // Priority 13: Virtual Expensify card needs personal details before reveal if (shouldShowAddVirtualCardPersonalDetails) { for (const card of virtualCardsNeedingPersonalDetails) { items.push( diff --git a/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx b/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx new file mode 100644 index 000000000000..0db3dc0226bf --- /dev/null +++ b/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx @@ -0,0 +1,38 @@ +/** + * Home widget that opens personal bank-account setup for a queued reimbursement. + */ +import BaseWidgetItem from '@components/BaseWidgetItem'; + +import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; +import useLocalize from '@hooks/useLocalize'; +import useOnyx from '@hooks/useOnyx'; + +import {openPersonalBankAccountSetupView} from '@libs/actions/BankAccounts'; + +import colors from '@styles/theme/colors'; + +import ONYXKEYS from '@src/ONYXKEYS'; + +import {isUserValidatedSelector} from '@selectors/Account'; +import React from 'react'; + +function AddBankAccount() { + const {translate} = useLocalize(); + const icons = useMemoizedLazyExpensifyIcons(['Bank']); + const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector}); + + return ( + openPersonalBankAccountSetupView({isUserValidated})} + buttonProps={{success: true}} + /> + ); +} + +export default AddBankAccount; diff --git a/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx b/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx index 9cf296b6ebbe..20964df90f83 100644 --- a/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx +++ b/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx @@ -57,7 +57,7 @@ function ReimbursementQueuedContent({action, report, iouReport}: ReimbursementQu return ( <> - {missingPaymentMethod === 'bankAccount' && ( + {missingPaymentMethod === CONST.MISSING_PAYMENT_METHODS.BANK_ACCOUNT && (