Invoice - Partially set up bank account appears in the payment dropdown button

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.1-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2943/folder/13176671/41237471/1123995198
Email or phone of affected tester (no customers): applausetester+sjodijnoindjsio2s2@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.1 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• User A has a USD workspace with Invoices enabled.
• User A has sent an invoice in USD to User B.
• Perform the steps below as User B:

1. Go to staging.new.expensify.com
2. Create a USD workspace.
3. Go to workspace settings > Workflows.
4. Click Add bank account.
5. Click Connect manually.
6. Continue until Date of birth step.
   7, Click outside RHP to close it.
7. Open the invoice report from User A.
8. Click Pay dropdown button.
9. Click Pay as a business.
10. Click on the partially set up bank account.

Expected Result:

Partially set up bank account should not appear in the payment dropdown button.

Actual Result:

Partially set up bank account appears in the payment dropdown button.
Error shows up when trying to pay with the partially set up bank account.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Invoice - Partially set up bank account appears in the payment dropdown button

What is the root cause of that problem?

In SettlementButton, getPaymentSubitems filters payment methods by account type but doesn't exclude partially set up accounts

App/src/components/SettlementButton/index.tsx

Lines 216 to 243 in 5129860

	const getPaymentSubitems = useCallback(
	(payAsBusiness: boolean) => {
	const requiredAccountType = payAsBusiness ? CONST.BANK_ACCOUNT.TYPE.BUSINESS : CONST.BANK_ACCOUNT.TYPE.PERSONAL;
	return formattedPaymentMethods
	.filter((method) => {
	const accountData = method?.accountData as AccountData;
	return accountData?.type === requiredAccountType;
	})
	.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	shouldUpdateSelectedIndex: true,
	onSelected: () => {
	if (checkForNecessaryAction()) {
	return;
	}
	onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType, undefined);
	},
	iconStyles: formattedPaymentMethod?.iconStyles,
	iconHeight: formattedPaymentMethod?.iconSize,
	iconWidth: formattedPaymentMethod?.iconSize,
	value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
	}));
	},
	[formattedPaymentMethods, onPress, checkForNecessaryAction],
	);

It only checks accountData?.type === requiredAccountType and doesn't verify the account state. This allows partially set up accounts (state SETUP, VERIFYING, or PENDING) to appear in the payment dropdown

What changes do you think we should make in order to solve the problem?

Filter out partially set up accounts in getPaymentSubitems

    const getPaymentSubitems = useCallback(
        (payAsBusiness: boolean) => {
            const requiredAccountType = payAsBusiness ? CONST.BANK_ACCOUNT.TYPE.BUSINESS : CONST.BANK_ACCOUNT.TYPE.PERSONAL;

            return formattedPaymentMethods
                .filter((method) => {
                    const accountData = method?.accountData as AccountData;
                    const isCorrectType = accountData?.type === requiredAccountType;
                    const isNotPartiallySetup = !isBankAccountPartiallySetup(accountData?.state);
                    return isCorrectType && isNotPartiallySetup;
                })
                .map((formattedPaymentMethod) => ({
                    text: formattedPaymentMethod?.title ?? '',
                    description: formattedPaymentMethod?.description ?? '',
                    icon: formattedPaymentMethod?.icon,
                    shouldUpdateSelectedIndex: true,
                    onSelected: () => {
                        if (checkForNecessaryAction()) {
                            return;
                        }
                        onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType, undefined);
                    },
                    iconStyles: formattedPaymentMethod?.iconStyles,
                    iconHeight: formattedPaymentMethod?.iconSize,
                    iconWidth: formattedPaymentMethod?.iconSize,
                    value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
                }));
        },
        [formattedPaymentMethods, onPress, checkForNecessaryAction],
    );

App/src/components/SettlementButton/index.tsx

Lines 216 to 243 in 5129860

	const getPaymentSubitems = useCallback(
	(payAsBusiness: boolean) => {
	const requiredAccountType = payAsBusiness ? CONST.BANK_ACCOUNT.TYPE.BUSINESS : CONST.BANK_ACCOUNT.TYPE.PERSONAL;
	return formattedPaymentMethods
	.filter((method) => {
	const accountData = method?.accountData as AccountData;
	return accountData?.type === requiredAccountType;
	})
	.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	shouldUpdateSelectedIndex: true,
	onSelected: () => {
	if (checkForNecessaryAction()) {
	return;
	}
	onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType, undefined);
	},
	iconStyles: formattedPaymentMethod?.iconStyles,
	iconHeight: formattedPaymentMethod?.iconSize,
	iconWidth: formattedPaymentMethod?.iconSize,
	value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
	}));
	},
	[formattedPaymentMethods, onPress, checkForNecessaryAction],
	);

What alternative solutions did you explore? (Optional)

None

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Partially set up bank account appears in the payment dropdown button.
Error shows up when trying to pay with the partially set up bank account.

What is the root cause of that problem?

The payment items don't filter out the incomplete bank account here

App/src/components/SettlementButton/index.tsx

Line 216 in 0a0c4e0

const getPaymentSubitems = useCallback(

What changes do you think we should make in order to solve the problem?

We should use the same way we check for pending bank account in the workflow page here to filter out the partial setup bank account

const getPaymentSubitems = useCallback(
        (payAsBusiness: boolean) => {
            const requiredAccountType = payAsBusiness ? CONST.BANK_ACCOUNT.TYPE.BUSINESS : CONST.BANK_ACCOUNT.TYPE.PERSONAL;

            return formattedPaymentMethods
                .filter((method) => {
                    const accountData = method?.accountData as AccountData;
                    const isPartiallySetup = isBankAccountPartiallySetup(accountData?.state);
                    return accountData?.type === requiredAccountType && !isPartiallySetup;
                })

App/src/components/SettlementButton/index.tsx

Line 216 in 0a0c4e0

const getPaymentSubitems = useCallback(

We should fix the same for search page here

App/src/hooks/useBulkPayOptions.ts

Line 102 in 0a0c4e0

const getPaymentSubitems = useCallback(

What alternative solutions did you explore? (Optional)

Since formattedPaymentMethods is used in many places, we can update this variable to filter out the partial bank account

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

• Some bank accounts are not fully set up.
• They still appear in invoice and bulk pay screens.
• Users can select them.
• Payments then fail.

What is the root cause of that problem?

• Payment builders only check the bank account type.
• They do not check if the account setup is complete.
• Partially set up ACH accounts pass the filter.

What changes do you think we should make in order to solve the problem?

• Add a shared helper in the existing bank/payment utility file.
• The helper returns false for partially set up bank accounts.
• Use this helper in all payment option builders.
• Remove local filters and rely on the helper.
• Add a short comment to explain why the check is required.

// bankAccountsUtils.ts (existing utility file)export function isPaymentEligibleBankAccount(method: FormattedPaymentMethod) {    const data = method?.accountData as AccountData;    // Partially set up bank accounts must never surface as payment options.    return !isBankAccountPartiallySetup(data?.state);}

// SettlementButton/index.tsxconst getPaymentSubitems = useCallback(    (payAsBusiness: boolean) => {        const requiredType = payAsBusiness ? CONST.BANK_ACCOUNT.TYPE.BUSINESS : CONST.BANK_ACCOUNT.TYPE.PERSONAL;        return formattedPaymentMethods            .filter((method) => {                const data = method?.accountData as AccountData;                return data?.type === requiredType && isPaymentEligibleBankAccount(method);            })            .map((formattedPaymentMethod) => ({                text: formattedPaymentMethod?.title ?? '',                description: formattedPaymentMethod?.description ?? '',                icon: formattedPaymentMethod?.icon,                shouldUpdateSelectedIndex: true,                onSelected: () => {                    if (checkForNecessaryAction()) {                        return;                    }                    onPress(                        CONST.IOU.PAYMENT_TYPE.EXPENSIFY,                        payAsBusiness,                        formattedPaymentMethod.methodID,                        formattedPaymentMethod.accountType,                        undefined,                    );                },                iconStyles: formattedPaymentMethod?.iconStyles,                iconHeight: formattedPaymentMethod?.iconSize,                iconWidth: formattedPaymentMethod?.iconSize,                value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,            }));    },    [formattedPaymentMethods, onPress, checkForNecessaryAction],);

// useBulkPayOptions.tsconst filteredMethods = useMemo(    () => formattedPaymentMethods.filter(isPaymentEligibleBankAccount),    [formattedPaymentMethods],);