[$250] [HOLD for payment 2024-04-03] [Simplified Collect] [Workflows] Connect bank account label is too small in Workspace > Workflows

[lakchote]

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: 1.4.54-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: NA
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: NA
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710853970755619

Action Performed:

1. Go to Workspace settings and enable Workflows.
2. From here, enable "Make or track payments"

Expected Result:

The default label for "Connect bank account" should be in 15px font size.

Actual Result:

The label is in 13px font.

Workaround:

NA, pertains to font-size.

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01058f2b7b8cc824a4
• Upwork Job ID: 1770120433483059200
• Last Price Increase: 2024-04-26

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[shubham1206agra]

Proposal

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

Connect bank account label is too small in Workspace > Workflows

What is the root cause of that problem?

This is due to the usage of the wrong component. Used MenuItem instead of MenuItemWithTopDescription.

Line

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

Line 155 in e34f10e

<MenuItem

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

Replace MenuItem with MenuItemWithTopDescription, and adjust the usage accordingly.

Sample

<MenuItemWithTopDescription
    description={hasVBA ? translate('common.bankAccount') : translate('workflowsPage.connectBankAccount')}
    title={state === BankAccount.STATE.OPEN ? bankDisplayName : undefined}
    onPress={() => navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID))}
    shouldShowRightIcon
    wrapperStyle={containerStyle}
    hoverAndPressStyle={[styles.mr0, styles.br2]}
/>

Similar change should be made to

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

Line 172 in e34f10e

<MenuItem

Result

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01058f2b7b8cc824a4

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @jjcoffee (Internal)

[lakchote]

@shubham1206agra thanks for your proposal but this will be dealt internally as it's a small change and I've assigned myself right from the start.