diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx index f142bc9f43f8..01fe6171149b 100644 --- a/src/components/SettlementButton/index.tsx +++ b/src/components/SettlementButton/index.tsx @@ -33,7 +33,7 @@ import {approveMoneyRequest, savePreferredPaymentMethod as savePreferredPaymentM import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {LastPaymentMethodType, Policy} from '@src/types/onyx'; +import type {BankAccount, LastPaymentMethodType, Policy} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; @@ -115,6 +115,8 @@ function SettlementButton({ const hasSinglePolicy = !policy && activeAdminPolicies.length === 1; const hasMultiplePolicies = !policy && activeAdminPolicies.length > 1; const lastPaymentMethodRef = useRef(lastPaymentMethod); + const formattedPaymentMethods = formatPaymentMethods(bankAccountList, fundList, styles); + const hasIntentToPay = formattedPaymentMethods.length === 1 && !lastPaymentMethod; useEffect(() => { if (isLoadingLastPaymentMethod) { @@ -128,12 +130,22 @@ function SettlementButton({ const shouldShowPaywithExpensifyOption = !shouldHidePaymentOptions; const shouldShowPayElsewhereOption = !shouldHidePaymentOptions && !isInvoiceReport; + function getPaymentSubitems(payAsBusiness: boolean) { + return formattedPaymentMethods.map((formattedPaymentMethod) => ({ + text: formattedPaymentMethod?.title ?? '', + description: formattedPaymentMethod?.description ?? '', + icon: formattedPaymentMethod?.icon, + shouldUpdateSelectedIndex: true, + onSelected: () => { + onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType, undefined); + }, + })); + } + function getLatestBankAccountItem() { if (!hasVBBA(policy?.id)) { return; } - - const formattedPaymentMethods = formatPaymentMethods(bankAccountList, fundList ?? {}, styles); const policyBankAccounts = formattedPaymentMethods.filter((method) => method.methodID === policy?.achAccount?.bankAccountID); return policyBankAccounts.map((formattedPaymentMethod) => ({ @@ -251,53 +263,10 @@ function SettlementButton({ } if (isInvoiceReport) { - const formattedPaymentMethods = formatPaymentMethods(bankAccountList, fundList, styles); const isCurrencySupported = isCurrencySupportedForDirectReimbursement(currency as CurrencyType); - const getPaymentSubitems = (payAsBusiness: boolean) => - formattedPaymentMethods.map((formattedPaymentMethod) => ({ - text: formattedPaymentMethod?.title ?? '', - description: formattedPaymentMethod?.description ?? '', - icon: formattedPaymentMethod?.icon, - shouldUpdateSelectedIndex: true, - onSelected: () => { - onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType, undefined); - }, - })); - - if (isIndividualInvoiceRoomUtil(chatReport)) { - buttonOptions.push({ - text: translate('iou.settlePersonal', {formattedAmount}), - icon: Expensicons.User, - value: lastPaymentMethod ?? CONST.IOU.PAYMENT_TYPE.ELSEWHERE, - backButtonText: translate('iou.individual'), - subMenuItems: [ - ...(isCurrencySupported ? getPaymentSubitems(false) : []), - { - text: translate('workspace.invoices.paymentMethods.addBankAccount'), - icon: Expensicons.Bank, - onSelected: () => Navigation.navigate(addBankAccountRoute), - }, - { - text: translate('iou.payElsewhere', {formattedAmount: ''}), - icon: Expensicons.Cash, - value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE, - shouldUpdateSelectedIndex: true, - onSelected: () => { - onPress(CONST.IOU.PAYMENT_TYPE.ELSEWHERE, undefined, undefined); - savePreferredPaymentMethod(policyIDKey, CONST.IOU.PAYMENT_TYPE.ELSEWHERE); - }, - }, - ], - }); - } - - buttonOptions.push({ - text: translate('iou.settleBusiness', {formattedAmount}), - icon: Expensicons.Building, - value: lastPaymentMethod ?? CONST.IOU.PAYMENT_TYPE.ELSEWHERE, - backButtonText: translate('iou.business'), - subMenuItems: [ - ...(isCurrencySupported ? getPaymentSubitems(true) : []), + const getInvoicesOptions = (payAsBusiness: boolean) => { + return [ + ...(isCurrencySupported ? getPaymentSubitems(payAsBusiness) : []), { text: translate('workspace.invoices.paymentMethods.addBankAccount'), icon: Expensicons.Bank, @@ -309,12 +278,32 @@ function SettlementButton({ value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE, shouldUpdateSelectedIndex: true, onSelected: () => { - onPress(CONST.IOU.PAYMENT_TYPE.ELSEWHERE, true); + onPress(CONST.IOU.PAYMENT_TYPE.ELSEWHERE, payAsBusiness, undefined); savePreferredPaymentMethod(policyIDKey, CONST.IOU.PAYMENT_TYPE.ELSEWHERE); }, }, - ], - }); + ]; + }; + + if (isIndividualInvoiceRoomUtil(chatReport)) { + buttonOptions.push({ + text: translate('iou.settlePersonal', {formattedAmount}), + icon: Expensicons.User, + value: hasIntentToPay ? CONST.IOU.PAYMENT_TYPE.EXPENSIFY : lastPaymentMethod ?? CONST.IOU.PAYMENT_TYPE.ELSEWHERE, + backButtonText: translate('iou.individual'), + subMenuItems: getInvoicesOptions(false), + }); + buttonOptions.push({ + text: translate('iou.settleBusiness', {formattedAmount}), + icon: Expensicons.Building, + value: hasIntentToPay ? CONST.IOU.PAYMENT_TYPE.EXPENSIFY : lastPaymentMethod ?? CONST.IOU.PAYMENT_TYPE.ELSEWHERE, + backButtonText: translate('iou.business'), + subMenuItems: getInvoicesOptions(true), + }); + } else { + // If there is pay as business option, we should show the submenu items instead. + buttonOptions.push(...getInvoicesOptions(true)); + } } if (shouldShowApproveButton) { @@ -361,6 +350,19 @@ function SettlementButton({ return; } if (isInvoiceReport) { + // if user has intent to pay, we should get the only bank account information to pay the invoice. + if (hasIntentToPay) { + const currentBankInformation = formattedPaymentMethods.at(0) as BankAccount; + onPress( + CONST.IOU.PAYMENT_TYPE.EXPENSIFY, + currentBankInformation.accountType !== CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, + currentBankInformation.methodID, + currentBankInformation.accountType, + undefined, + ); + return; + } + const isBusinessInvoice = isBusinessInvoiceRoom(chatReport); if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) { onPress(iouPaymentType, isBusinessInvoice); @@ -427,13 +429,14 @@ function SettlementButton({ return lastPaymentPolicy.name; } - if (lastPaymentMethod === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) { - if (isBusinessInvoiceRoom(chatReport) && bankAccount) { - return translate('iou.invoiceBussinessBank', {lastFour: bankAccount?.accountData?.accountNumber?.slice(-4) ?? ''}); + if (lastPaymentMethod === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || hasIntentToPay) { + const bankAccountToDisplay = hasIntentToPay ? (formattedPaymentMethods.at(0) as BankAccount) : bankAccount; + if (isBusinessInvoiceRoom(chatReport) && bankAccountToDisplay) { + return translate('iou.invoiceBussinessBank', {lastFour: bankAccountToDisplay?.accountData?.accountNumber?.slice(-4) ?? ''}); } - if (isIndividualInvoiceRoomUtil(chatReport) && bankAccount) { - return translate('iou.invoicePersonalBank', {lastFour: bankAccount?.accountData?.accountNumber?.slice(-4) ?? ''}); + if (isIndividualInvoiceRoomUtil(chatReport) && bankAccountToDisplay) { + return translate('iou.invoicePersonalBank', {lastFour: bankAccountToDisplay?.accountData?.accountNumber?.slice(-4) ?? ''}); } return translate('common.wallet'); @@ -453,6 +456,8 @@ function SettlementButton({ const customText = getCustomText(); const secondlineText = getSecondLineText(); + const shouldUseSplitButton = hasPreferredPaymentMethod || !!lastPaymentPolicy || (!!bankAccount && isExpenseReportUtil(iouReport)) || (isInvoiceReport && hasIntentToPay); + return ( onPress(paymentType, undefined, undefined)} @@ -475,7 +480,7 @@ function SettlementButton({ shouldAlwaysShowDropdownMenu={isInvoiceReport} customText={customText} menuHeaderText={isInvoiceReport ? translate('workspace.invoices.paymentMethods.chooseInvoiceMethod') : undefined} - isSplitButton={hasPreferredPaymentMethod || !!lastPaymentPolicy || (!!bankAccount && isExpenseReportUtil(iouReport))} + isSplitButton={shouldUseSplitButton} isDisabled={isDisabled} isLoading={isLoading} defaultSelectedIndex={lastPaymentPolicy ? paymentButtonOptions.findIndex((option) => option.value === lastPaymentPolicy.id) : 0} diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index af193f1a8f28..26c426675dae 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -8487,7 +8487,7 @@ function getPayMoneyRequestParams( const optimisticLastPaymentMethod = { [iouReport.policyID]: { lastUsed: paymentMethodType, - ...(isInvoiceReport ? {Invoice: {name: paymentMethodType, bankAccountID}} : {}), + ...(isInvoiceReport ? {invoice: {name: paymentMethodType, bankAccountID}} : {}), }, }; diff --git a/src/types/onyx/LastPaymentMethod.ts b/src/types/onyx/LastPaymentMethod.ts index f25cf9d1abcc..460178a46851 100644 --- a/src/types/onyx/LastPaymentMethod.ts +++ b/src/types/onyx/LastPaymentMethod.ts @@ -18,11 +18,11 @@ type LastPaymentMethodType = { /** The default last payment method */ lastUsed: string; /** The lastPaymentMethod of an IOU */ - Iou: string; + iou: string; /** The lastPaymentMethod of an Expense */ - Expense: string; + expense: string; /** The lastPaymentMethod of an Invoice */ - Invoice: string | PaymentInformation; + invoice: string | PaymentInformation; }; /** Record of last payment methods, indexed by policy id */