diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx index b3b2823f0482..149322507e56 100644 --- a/src/components/SettlementButton/index.tsx +++ b/src/components/SettlementButton/index.tsx @@ -132,7 +132,7 @@ function SettlementButton({ // whether the user has single policy and the expense is p2p const hasSinglePolicy = !isExpenseReport && activeAdminPolicies.length === 1; const hasMultiplePolicies = !isExpenseReport && activeAdminPolicies.length > 1; - const formattedPaymentMethods = formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles); + const formattedPaymentMethods = formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles, translate); const hasIntentToPay = ((formattedPaymentMethods.length === 1 && isIOUReport(iouReport)) || !!policy?.achAccount) && !lastPaymentMethod; const {isBetaEnabled} = usePermissions(); const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {canBeMissing: true}); diff --git a/src/hooks/useBulkPayOptions.ts b/src/hooks/useBulkPayOptions.ts index 11df01d894de..5d8486b652b5 100644 --- a/src/hooks/useBulkPayOptions.ts +++ b/src/hooks/useBulkPayOptions.ts @@ -52,7 +52,7 @@ function useBulkPayOptions({selectedPolicyID, selectedReportID, activeAdminPolic const canUsePersonalBankAccount = isIOUReport; const isPersonalOnlyOption = canUsePersonalBankAccount && !canUseBusinessBankAccount; const shouldShowBusinessBankAccountOptions = isExpenseReport && !isPersonalOnlyOption; - const formattedPaymentMethods = formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles); + const formattedPaymentMethods = formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles, translate); const canUseWallet = !isExpenseReport && !isInvoiceReport && isCurrencySupportedWallet; const hasSinglePolicy = !isExpenseReport && activeAdminPolicies.length === 1; const hasMultiplePolicies = !isExpenseReport && activeAdminPolicies.length > 1; diff --git a/src/hooks/usePaymentOptions.ts b/src/hooks/usePaymentOptions.ts index 98376c035891..cae5f5cd2364 100644 --- a/src/hooks/usePaymentOptions.ts +++ b/src/hooks/usePaymentOptions.ts @@ -157,7 +157,7 @@ function usePaymentOptions({ } if (isInvoiceReport) { - const formattedPaymentMethods = formatPaymentMethods(bankAccountList, fundList, styles); + const formattedPaymentMethods = formatPaymentMethods(bankAccountList, fundList, styles, translate); const isCurrencySupported = isCurrencySupportedForDirectReimbursement(currency as CurrencyType); const getPaymentSubitems = (payAsBusiness: boolean) => formattedPaymentMethods.map((formattedPaymentMethod) => ({ diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 09f9b00bd165..f404faefd44c 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -5,6 +5,7 @@ import type {Merge, ValueOf} from 'type-fest'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; import getBankIcon from '@components/Icon/BankIcons'; import type {ContinueActionParams, PaymentMethod as KYCPaymentMethod} from '@components/KYCWall/types'; +import type {LocalizedTranslate} from '@components/LocaleContextProvider'; import type {PopoverMenuItem} from '@components/PopoverMenu'; import type {BankAccountMenuItem} from '@components/Search/types'; import type {ThemeStyles} from '@styles/index'; @@ -18,8 +19,6 @@ import type PaymentMethod from '@src/types/onyx/PaymentMethod'; import type {ACHAccount} from '@src/types/onyx/Policy'; import {setPersonalBankAccountContinueKYCOnSuccess} from './actions/BankAccounts'; import {approveMoneyRequest} from './actions/IOU'; -// eslint-disable-next-line @typescript-eslint/no-deprecated -import {translateLocal} from './Localize'; import BankAccountModel from './models/BankAccount'; import Navigation from './Navigation/Navigation'; import {shouldRestrictUserBillableActions} from './SubscriptionUtils'; @@ -64,19 +63,21 @@ function hasExpensifyPaymentMethod(fundList: Record, bankAccountLi return validBankAccount || (shouldIncludeDebitCard && validDebitCard); } -function getPaymentMethodDescription(accountType: AccountType, account: BankAccount['accountData'] | Fund['accountData'] | ACHAccount, bankCurrency?: string): string { +function getPaymentMethodDescription( + accountType: AccountType, + account: BankAccount['accountData'] | Fund['accountData'] | ACHAccount, + translate: LocalizedTranslate, + bankCurrency?: string, +): string { if (account) { if (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && 'accountNumber' in account) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return `${bankCurrency ? `${bankCurrency} ${CONST.DOT_SEPARATOR} ` : ''}${translateLocal('paymentMethodList.accountLastFour')} ${account.accountNumber?.slice(-4)}`; + return `${bankCurrency ? `${bankCurrency} ${CONST.DOT_SEPARATOR} ` : ''}${translate('paymentMethodList.accountLastFour')} ${account.accountNumber?.slice(-4)}`; } if (accountType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT && 'accountNumber' in account) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return `${translateLocal('paymentMethodList.accountLastFour')} ${account.accountNumber?.slice(-4)}`; + return `${translate('paymentMethodList.accountLastFour')} ${account.accountNumber?.slice(-4)}`; } if (accountType === CONST.PAYMENT_METHODS.DEBIT_CARD && 'cardNumber' in account) { - // eslint-disable-next-line @typescript-eslint/no-deprecated - return `${translateLocal('paymentMethodList.cardLastFour')} ${account.cardNumber?.slice(-4)}`; + return `${translate('paymentMethodList.cardLastFour')} ${account.cardNumber?.slice(-4)}`; } } return ''; @@ -85,7 +86,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco /** * Get the PaymentMethods list */ -function formatPaymentMethods(bankAccountList: Record, fundList: Record | Fund[], styles: ThemeStyles): PaymentMethod[] { +function formatPaymentMethods(bankAccountList: Record, fundList: Record | Fund[], styles: ThemeStyles, translate: LocalizedTranslate): PaymentMethod[] { const combinedPaymentMethods: PaymentMethod[] = []; Object.values(bankAccountList).forEach((bankAccount) => { @@ -101,7 +102,7 @@ function formatPaymentMethods(bankAccountList: Record, fund }); combinedPaymentMethods.push({ ...bankAccount, - description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData, bankAccount.bankCurrency), + description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData, translate, bankAccount.bankCurrency), icon, iconSize, iconHeight, @@ -114,7 +115,7 @@ function formatPaymentMethods(bankAccountList: Record, fund const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank, isCard: true, styles}); combinedPaymentMethods.push({ ...card, - description: getPaymentMethodDescription(card?.accountType, card.accountData), + description: getPaymentMethodDescription(card?.accountType, card.accountData, translate), icon, iconSize, iconHeight, diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index adf494c957ae..b71357768af1 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -182,7 +182,7 @@ function CardSection() { medium /> - {getPaymentMethodDescription(defaultCard?.accountType, defaultCard?.accountData)} + {getPaymentMethodDescription(defaultCard?.accountType, defaultCard?.accountData, translate)} {translate('subscription.cardSection.cardInfo', { name: defaultCard?.accountData?.addressName ?? '', diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index f09d45c21bf1..4e911199c4ec 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -314,7 +314,7 @@ function PaymentMethodList({ // const paymentCardList = fundList ?? {}; // const filteredCardList = Object.values(paymentCardList).filter((card) => !!card.accountData?.additionalData?.isP2PDebitCard); const filteredCardList = {}; - let combinedPaymentMethods = formatPaymentMethods(isLoadingBankAccountList ? {} : (bankAccountList ?? {}), filteredCardList, styles); + let combinedPaymentMethods = formatPaymentMethods(isLoadingBankAccountList ? {} : (bankAccountList ?? {}), filteredCardList, styles, translate); if (!isOffline) { combinedPaymentMethods = combinedPaymentMethods.filter( diff --git a/src/pages/settings/Wallet/TransferBalancePage.tsx b/src/pages/settings/Wallet/TransferBalancePage.tsx index d608b85bcc53..08ac2fa509e3 100644 --- a/src/pages/settings/Wallet/TransferBalancePage.tsx +++ b/src/pages/settings/Wallet/TransferBalancePage.tsx @@ -73,7 +73,7 @@ function TransferBalancePage() { * Get the selected/default payment method account for wallet transfer */ function getSelectedPaymentMethodAccount(): PaymentMethod | undefined { - const paymentMethods = formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles); + const paymentMethods = formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles, translate); const defaultAccount = paymentMethods.find((method) => method.isDefault); const selectedAccount = paymentMethods.find( @@ -86,7 +86,7 @@ function TransferBalancePage() { saveWalletTransferMethodType(filterPaymentMethodType); // If we only have a single option for the given paymentMethodType do not force the user to make a selection - const combinedPaymentMethods = formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles); + const combinedPaymentMethods = formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles, translate); const filteredMethods = combinedPaymentMethods.filter((paymentMethod) => paymentMethod.accountType === filterPaymentMethodType); if (filteredMethods.length === 1) { diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index f5abdf7f192c..195d67713156 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -164,14 +164,14 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) { formattedSelectedPaymentMethod = { title: accountData?.addressName ?? '', icon, - description: description ?? getPaymentMethodDescription(accountType, accountData), + description: description ?? getPaymentMethodDescription(accountType, accountData, translate), type: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, }; } else if (accountType === CONST.PAYMENT_METHODS.DEBIT_CARD) { formattedSelectedPaymentMethod = { title: accountData?.addressName ?? '', icon, - description: description ?? getPaymentMethodDescription(accountType, accountData), + description: description ?? getPaymentMethodDescription(accountType, accountData, translate), type: CONST.PAYMENT_METHODS.DEBIT_CARD, }; } @@ -240,7 +240,7 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) { const makeDefaultPaymentMethod = useCallback(() => { const paymentCardList = fundList ?? {}; // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors - const paymentMethods = formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles); + const paymentMethods = formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles, translate); const previousPaymentMethod = paymentMethods.find((method) => !!method.isDefault); const currentPaymentMethod = paymentMethods.find((method) => method.methodID === paymentMethod.methodID); @@ -250,13 +250,14 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) { makeDefaultPaymentMethodPaymentMethods(0, paymentMethod.selectedPaymentMethod.fundID ?? CONST.DEFAULT_NUMBER_ID, previousPaymentMethod, currentPaymentMethod); } }, [ + fundList, + bankAccountList, + styles, + translate, + paymentMethod.selectedPaymentMethodType, paymentMethod.methodID, paymentMethod.selectedPaymentMethod.bankAccountID, paymentMethod.selectedPaymentMethod.fundID, - paymentMethod.selectedPaymentMethodType, - bankAccountList, - fundList, - styles, ]); const deletePaymentMethod = useCallback(() => { @@ -333,7 +334,7 @@ function WalletPage({shouldListenForResize = false}: WalletPageProps) { }, [hideDefaultDeleteMenu, paymentMethod.methodID, paymentMethod.selectedPaymentMethodType, bankAccountList, fundList, shouldShowDefaultDeleteMenu]); // Don't show "Make default payment method" button if it's the only payment method or if it's already the default const isCurrentPaymentMethodDefault = () => { - const hasMultiplePaymentMethods = formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles).length > 1; + const hasMultiplePaymentMethods = formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles, translate).length > 1; if (hasMultiplePaymentMethods) { if (paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { return paymentMethod.selectedPaymentMethod.bankAccountID === userWallet?.walletLinkedAccountID; diff --git a/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx b/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx index bafcc8711c6c..11d9d28c8aa7 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx @@ -94,7 +94,7 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps) formattedSelectedPaymentMethod = { title: accountData?.addressName ?? '', icon, - description: description ?? getPaymentMethodDescription(accountType, accountData), + description: description ?? getPaymentMethodDescription(accountType, accountData, translate), type: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, }; } @@ -127,13 +127,13 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps) const makeDefaultPaymentMethod = useCallback(() => { // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors - const paymentMethods = formatPaymentMethods(bankAccountList ?? {}, {}, styles); + const paymentMethods = formatPaymentMethods(bankAccountList ?? {}, {}, styles, translate); const previousPaymentMethod = paymentMethods.find((method) => !!method.isDefault); const currentPaymentMethod = paymentMethods.find((method) => method.methodID === paymentMethod.methodID); if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { setInvoicingTransferBankAccount(currentPaymentMethod?.methodID ?? CONST.DEFAULT_NUMBER_ID, policyID, previousPaymentMethod?.methodID ?? CONST.DEFAULT_NUMBER_ID); } - }, [bankAccountList, styles, paymentMethod.selectedPaymentMethodType, paymentMethod.methodID, policyID]); + }, [bankAccountList, styles, translate, paymentMethod.selectedPaymentMethodType, paymentMethod.methodID, policyID]); const onAddBankAccountPress = () => { if (shouldShowDefaultDeleteMenu) { diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index c136a759b579..c491ccb9fed2 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -300,7 +300,7 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) { { if (isAccountLocked) { showLockedAccountModal();