[$125] - QBO - Hint text is not below the toggle

[nlemma]

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: v9.1.15-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5859741&group_by=cases:section_id&group_id=296775&group_order=asc
Email or phone of affected tester (no customers): applausetester+ccardfeed@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: macOS Sonoma 14.5 - Chrome
App Component: QBO

Action Performed:

Prerequisite: Workspace connected with QBO

1. Go to staging.new.expensify.com
2. Click Settings > Workspace
3. Click on the workspace connected to QBO
4. Click Accounting > Export
5. Click Export company cards as
6. Make sure "Vendor Bill" is selected in Export as
7. Observe the hint text for Default vendor

Expected Result:

Hint text is below the toggle

Actual Result:

Hint text is not below the toggle

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021907636962979367682
• Upwork Job ID: 1907636962979367682
• Last Price Increase: 2025-04-03
• Automatic offers:
• gijoe0295 | Contributor | 106774929

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

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

[gijoe0295]

Proposal

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

QBO - Hint text is not below the toggle

What is the root cause of that problem?

Missed to enable shouldPlaceSubtitleBelowSwitch for that row.

App/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx

Lines 79 to 81 in e593f9d

	<ToggleSettingOptionRow
	title={translate('workspace.accounting.defaultVendor')}
	subtitle={translate('workspace.qbo.defaultVendorDescription')}

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

Enable shouldPlaceSubtitleBelowSwitch for that row.

We should probably check all ToggleSettingOptionRow to see if they need that prop too.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[VictoriaExpensify]

Sharing an example of expected formatting:

We should fix this but it is a low priority and should be a very easy fix, so I'm going to reduce the bounty on this one

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[thelullabyy]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-03 05:55:24 UTC.

Proposal

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

• The hint text (subtitle) is not displayed below the toggle as expected.

What is the root cause of that problem?

• In the following code:
  

  App/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx

  Lines 79 to 81 in e593f9d

  	<ToggleSettingOptionRow
  	title={translate('workspace.accounting.defaultVendor')}
  	subtitle={translate('workspace.qbo.defaultVendorDescription')}

the shouldPlaceSubtitleBelowSwitch prop is not set to true. As a result, the subtitle appears beside the switch rather than beneath it.

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

• We've encountered this same issue multiple times in the past, usually because the shouldPlaceSubtitleBelowSwitch prop in the ToggleSettingsOptionRow component defaults to false:
  

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

  Line 91 in 3b313d1

  shouldPlaceSubtitleBelowSwitch,

This makes it easy for implementers to overlook setting it explicitly, resulting in incorrect UI layouts.

• To prevent this issue from recurring, we propose changing the default value of shouldPlaceSubtitleBelowSwitch to true in:
  

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

  Line 91 in 3b313d1

  shouldPlaceSubtitleBelowSwitch,

• After updating the default, we should also remove any redundant manual passing of shouldPlaceSubtitleBelowSwitch={true} in places like:
  

  App/src/pages/workspace/accounting/intacct/import/SageIntacctImportPage.tsx

  Line 80 in 3b313d1

  shouldPlaceSubtitleBelowSwitch

since true will now be the default behavior.

• In the future, if there’s a toggle where we don’t want to display the subtitle below the switch, we can simply set shouldPlaceSubtitleBelowSwitch to false explicitly when using ToggleSettingsOptionRow. These cases should be rare, so requiring implementers to manually override the default is a reasonable tradeoff for avoiding common layout issues.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• N/A

What alternative solutions did you explore? (Optional)