Bank account missing right caret in Workflows → Payments

[m-natarajan]

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.18-8
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @JmillsExpensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Add a bank account to a workspace
2. Navigate to Workspace → Workflows → Payments
3. Observe the bank account row

Expected Result:

The bank account row should display a right caret (›) to indicate it is navigable.
Visual consistency with other clickable settings rows.

Actual Result:

The bank account row does not show a right caret.
The row appears less clearly interactive compared to other settings.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @MarioExpensify

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Triggered auto assignment to @kadiealexander (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.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[daledah]

Proposal

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

The bank account row does not show a right caret. The row appears less clearly interactive compared to other settings.

What is the root cause of that problem?

In the WorkspaceWorkflowsPage, the bank account MenuItem has shouldShowRightIcon set to isAccountInSetupState, which means the right caret icon is only displayed when the account is in a setup state. When the bank account is fully set up, the right icon is not shown, making the row appear non-interactive.

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 341 to 364 in 4e0897a

	<MenuItem
	title={bankTitle}
	description={getPaymentMethodDescription(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, accountData, translate)}
	onPress={() => {
	if (isAccountLocked) {
	showLockedAccountModal();
	return;
	}
	navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
	}}
	displayInDefaultIconColor
	icon={bankIcon.icon}
	iconHeight={bankIcon.iconHeight ?? bankIcon.iconSize}
	iconWidth={bankIcon.iconWidth ?? bankIcon.iconSize}
	iconStyles={bankIcon.iconStyles}
	disabled={isOffline || !isPolicyAdmin}
	badgeText={isAccountInSetupState ? translate('common.actionRequired') : undefined}
	badgeIcon={isAccountInSetupState ? expensifyIcons.DotIndicator : undefined}
	badgeSuccess={isAccountInSetupState ? true : undefined}
	shouldShowRightIcon={isAccountInSetupState}
	shouldGreyOutWhenDisabled={!policy?.pendingFields?.reimbursementChoice}
	wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
	brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	/>

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

We should always show the right caret icon for the bank account row to indicate it is navigable. Change shouldShowRightIcon to always be true.

- shouldShowRightIcon={isAccountInSetupState}
+ shouldShowRightIcon

What alternative solutions did you explore? (Optional)

N/A

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.

[abbasifaizan70]

Proposal

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

The bank account row should display a right caret (›) to indicate it is navigable. Visual consistency with other clickable settings rows.

What is the root cause of that problem?

The bank account row is implemented as a MenuItem that only shows the right icon (caret) when the account is in setup state (isAccountInSetupState). When the account is already connected, shouldShowRightIcon is false, so the caret is hidden even though the row remains navigable. Other clickable rows in the same Payments section (e.g. the payer row) pass shouldShowRightIcon so the caret is always shown when the row is navigable.

Relevant code:

The bank account MenuItem sets shouldShowRightIcon={isAccountInSetupState}, so the right caret is only visible during setup:

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 341 to 364 in c8097f3

	<MenuItem
	title={bankTitle}
	description={getPaymentMethodDescription(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, accountData, translate)}
	onPress={() => {
	if (isAccountLocked) {
	showLockedAccountModal();
	return;
	}
	navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
	}}
	displayInDefaultIconColor
	icon={bankIcon.icon}
	iconHeight={bankIcon.iconHeight ?? bankIcon.iconSize}
	iconWidth={bankIcon.iconWidth ?? bankIcon.iconSize}
	iconStyles={bankIcon.iconStyles}
	disabled={isOffline || !isPolicyAdmin}
	badgeText={isAccountInSetupState ? translate('common.actionRequired') : undefined}
	badgeIcon={isAccountInSetupState ? expensifyIcons.DotIndicator : undefined}
	badgeSuccess={isAccountInSetupState ? true : undefined}
	shouldShowRightIcon={isAccountInSetupState}
	shouldGreyOutWhenDisabled={!policy?.pendingFields?.reimbursementChoice}
	wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
	brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	/>

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

Show the right caret whenever the bank account row is navigable (not disabled). Pass shouldShowRightIcon as true when the row is enabled (!isOffline && isPolicyAdmin) so the caret is always visible for the clickable state, matching the payer row and other settings rows.

Solution:

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 341 to 364 in c8097f3

	<MenuItem
	title={bankTitle}
	description={getPaymentMethodDescription(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, accountData, translate)}
	onPress={() => {
	if (isAccountLocked) {
	showLockedAccountModal();
	return;
	}
	navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
	}}
	displayInDefaultIconColor
	icon={bankIcon.icon}
	iconHeight={bankIcon.iconHeight ?? bankIcon.iconSize}
	iconWidth={bankIcon.iconWidth ?? bankIcon.iconSize}
	iconStyles={bankIcon.iconStyles}
	disabled={isOffline || !isPolicyAdmin}
	badgeText={isAccountInSetupState ? translate('common.actionRequired') : undefined}
	badgeIcon={isAccountInSetupState ? expensifyIcons.DotIndicator : undefined}
	badgeSuccess={isAccountInSetupState ? true : undefined}
	shouldShowRightIcon={isAccountInSetupState}
	shouldGreyOutWhenDisabled={!policy?.pendingFields?.reimbursementChoice}
	wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
	brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	/>

                                 <MenuItem
                                     title={bankTitle}
                                     description={getPaymentMethodDescription(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, accountData, translate)}
                                     onPress={() => {
                                         if (isAccountLocked) {
                                             showLockedAccountModal();
                                             return;
                                         }
                                         navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
                                     }}
                                     displayInDefaultIconColor
                                     icon={bankIcon.icon}
                                     iconHeight={bankIcon.iconHeight ?? bankIcon.iconSize}
                                     iconWidth={bankIcon.iconWidth ?? bankIcon.iconSize}
                                     iconStyles={bankIcon.iconStyles}
                                     disabled={isOffline || !isPolicyAdmin}
                                     badgeText={isAccountInSetupState ? translate('common.actionRequired') : undefined}
                                     badgeIcon={isAccountInSetupState ? expensifyIcons.DotIndicator : undefined}
                                     badgeSuccess={isAccountInSetupState ? true : undefined}
-                                    shouldShowRightIcon={isAccountInSetupState}
+                                    shouldShowRightIcon={!isOffline && isPolicyAdmin}
                                     shouldGreyOutWhenDisabled={!policy?.pendingFields?.reimbursementChoice}
                                     wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
                                     brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                                 />

This keeps the caret visible whenever the row is clickable (user is policy admin and not offline), and hides it when the row is disabled, consistent with other navigable settings rows in the app.

[PiyushChandra17]

Proposal

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

Bank account missing right caret in Workflows → Payments

What is the root cause of that problem?

We are already showing shouldShowRightIcon here

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Line 360 in f9b0565

shouldShowRightIcon={isAccountInSetupState}

However interactive prop is missing to MenuItem

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

Add interactive prop to MenuItem

<MenuItem
    ...
    interactive={true}
    shouldShowRightIcon={isAccountInSetupState}
    ... 
/>

What alternative solutions did you explore? (Optional)

Result:

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.

[github-actions]

⚠️ @PiyushChandra17 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[rojiphil]

@daledah proposal LGTM i.e. shouldShowRightIcon should be true all the time which is consistent with other menu items. Also, we need to show the right icon here for Add bank account since it is navigable.
🎀👀🎀 C+ reviewed