Invoice - Incomplete bank account on Invoices does not open bank setup RHP

[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/41237461/1123995192
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: Workspace Settings

Action Performed:

Precondition:

• Create a USD workspace.
• Invoice is enabled.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Invoices.
3. Click Add bank account.
4. Click Connect manually.
5. Continue until Date of birth step.
6. Click outside RHP to close it.
7. Click on the bank account.

Expected Result:

Add bank account RHP will open with Continue setup and Start over button (similar to adding bank account in Workflows).

Actual Result:

3-dot menu with Make default payment method and Delete button opens.

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 @garrettmknight (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 - Incomplete bank account on Invoices does not open bank setup RHP

What is the root cause of that problem?

In WorkspaceInvoiceVBASection, paymentMethodPressed only handles accounts with an accountType and shows the 3-dot menu. It doesn't check if the account is partially setup before showing the menu

App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Lines 115 to 145 in 5129860

	const paymentMethodPressed = ({event, accountData, accountType, methodID, icon, description}: PaymentMethodPressHandlerParams) => {
	if (shouldShowDefaultDeleteMenu) {
	setShouldShowDefaultDeleteMenu(false);
	return;
	}
	paymentMethodButtonRef.current = event?.currentTarget as HTMLDivElement;
	// The delete/default menu
	if (accountType) {
	let formattedSelectedPaymentMethod: FormattedSelectedPaymentMethod = {
	title: '',
	};
	if (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
	formattedSelectedPaymentMethod = {
	title: accountData?.addressName ?? '',
	icon,
	description: description ?? getPaymentMethodDescription(accountType, accountData, translate),
	type: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
	};
	}
	setPaymentMethod({
	isSelectedPaymentMethodDefault: transferBankAccountID === methodID,
	selectedPaymentMethod: accountData ?? {},
	selectedPaymentMethodType: accountType,
	formattedSelectedPaymentMethod,
	methodID: methodID ?? CONST.DEFAULT_NUMBER_ID,
	});
	setShouldShowDefaultDeleteMenu(true);
	setMenuPosition();
	}
	};

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

Check if the account is partially setup before showing the 3-dot menu

    const paymentMethodPressed = ({event, accountData, accountType, methodID, icon, description}: PaymentMethodPressHandlerParams) => {
        if (shouldShowDefaultDeleteMenu) {
            setShouldShowDefaultDeleteMenu(false);
            return;
        }
        paymentMethodButtonRef.current = event?.currentTarget as HTMLDivElement;

        if (accountData && 'state' in accountData && isBankAccountPartiallySetup(accountData.state)) { // Or simplify this by checking `isBankAccountPartiallySetup(accountData.state)` only
            navigateToBankAccountRoute(policyID, ROUTES.WORKSPACE_INVOICES.getRoute(policyID));
            return;
        }

        ...

App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Lines 115 to 145 in 5129860

	const paymentMethodPressed = ({event, accountData, accountType, methodID, icon, description}: PaymentMethodPressHandlerParams) => {
	if (shouldShowDefaultDeleteMenu) {
	setShouldShowDefaultDeleteMenu(false);
	return;
	}
	paymentMethodButtonRef.current = event?.currentTarget as HTMLDivElement;
	// The delete/default menu
	if (accountType) {
	let formattedSelectedPaymentMethod: FormattedSelectedPaymentMethod = {
	title: '',
	};
	if (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
	formattedSelectedPaymentMethod = {
	title: accountData?.addressName ?? '',
	icon,
	description: description ?? getPaymentMethodDescription(accountType, accountData, translate),
	type: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
	};
	}
	setPaymentMethod({
	isSelectedPaymentMethodDefault: transferBankAccountID === methodID,
	selectedPaymentMethod: accountData ?? {},
	selectedPaymentMethodType: accountType,
	formattedSelectedPaymentMethod,
	methodID: methodID ?? CONST.DEFAULT_NUMBER_ID,
	});
	setShouldShowDefaultDeleteMenu(true);
	setMenuPosition();
	}
	};

Additionally, we can create a separate handler for 3-dot menu clicks that always shows the menu

What alternative solutions did you explore? (Optional)

None

[dmkt9]

Proposal

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

3-dot menu with Make default payment method and Delete button opens.

What is the root cause of that problem?

In paymentMethodPressed of WorkspaceInvoiceVBASection, there is no check for whether the bank account has been incompleted, and by default it only displays the 3‑dot menu.

App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Line 115 in 232cb11

const paymentMethodPressed = ({event, accountData, accountType, methodID, icon, description}: PaymentMethodPressHandlerParams) => {

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

Test branch

In PaymentMethodListItem, we should check the bank account status. If it has not been completed, we should open the bank account route instead of the menu. Performing the check here will align with how we verify and display the actionRequired badge for the item:

App/src/pages/settings/Wallet/PaymentMethodListItem.tsx

Line 96 in 232cb11

const handleRowPress = (e: GestureResponderEvent | KeyboardEvent | undefined) => {

if (isAccountInSetupState(item)) {
    navigateToBankAccountRoute(policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID));
    return;
}

What alternative solutions did you explore? (Optional)

N/A

[bernhardoj]

Proposal

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

Incomplete bank account on invoices page doesn't open the BA RHP to continue the setup.

What is the root cause of that problem?

In invoices page, we only have onPress handler which always open the 3-dot menu.

App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Lines 197 to 199 in 8f123f4

	<PaymentMethodList
	onPress={paymentMethodPressed}
	onAddBankAccountPress={onAddBankAccountPress}

App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Lines 115 to 145 in 8f123f4

	const paymentMethodPressed = ({event, accountData, accountType, methodID, icon, description}: PaymentMethodPressHandlerParams) => {
	if (shouldShowDefaultDeleteMenu) {
	setShouldShowDefaultDeleteMenu(false);
	return;
	}
	paymentMethodButtonRef.current = event?.currentTarget as HTMLDivElement;
	// The delete/default menu
	if (accountType) {
	let formattedSelectedPaymentMethod: FormattedSelectedPaymentMethod = {
	title: '',
	};
	if (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
	formattedSelectedPaymentMethod = {
	title: accountData?.addressName ?? '',
	icon,
	description: description ?? getPaymentMethodDescription(accountType, accountData, translate),
	type: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
	};
	}
	setPaymentMethod({
	isSelectedPaymentMethodDefault: transferBankAccountID === methodID,
	selectedPaymentMethod: accountData ?? {},
	selectedPaymentMethodType: accountType,
	formattedSelectedPaymentMethod,
	methodID: methodID ?? CONST.DEFAULT_NUMBER_ID,
	});
	setShouldShowDefaultDeleteMenu(true);
	setMenuPosition();
	}
	};

If we compare with wallet page, we have separate onPress and onThreeDotsMenuPress.

App/src/pages/settings/Wallet/WalletPage/index.tsx

Lines 473 to 476 in 8f123f4

	<PaymentMethodList
	onPress={onBankAccountRowPressed}
	onAddBankAccountPress={addBankAccountPressed}
	onThreeDotsMenuPress={paymentMethodPressed}

onBankAccountRowPressed will open the BA RHP.

App/src/pages/settings/Wallet/WalletPage/index.tsx

Lines 153 to 163 in 8f123f4

	const onBankAccountRowPressed = ({accountData}: PaymentMethodPressHandlerParams) => {
	const accountPolicyID = accountData?.additionalData?.policyID;
	if (accountPolicyID) {
	if (isAccountLocked) {
	showLockedAccountModal();
	return;
	}
	navigateToBankAccountRoute(accountPolicyID, ROUTES.SETTINGS_WALLET);
	}
	};

It'll be called if the BA is incomplete.

App/src/pages/settings/Wallet/PaymentMethodListItem.tsx

Lines 96 to 98 in 8f123f4

	const handleRowPress = (e: GestureResponderEvent | KeyboardEvent | undefined) => {
	if (isAccountInSetupState(item) || !threeDotsMenuItems || (item.cardID && item.onThreeDotsMenuPress)) {
	item.onPress?.(e);

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

Apply the same logic from the wallet page to the invoices page.