Hide Vendors row in More features when accounting connection doesn't scope vendors

[Beamanator]

Version Number: latest main

Reproduction Steps

1. Enable the vendorMatching beta on any account.
2. Open a workspace with either (a) no accounting integration connected, or (b) an accounting integration whose non-reimbursable export destination does not scope the vendor field.
3. Go to Settings → Workspace → More features.

Expected Result

The Vendors row should not appear in More features. It should only appear when the workspace has an accounting connection whose export config scopes the vendor field (this is exactly what hasVendorFeature in src/libs/PolicyUtils.ts returns).

When the row does appear, it should stay locked ON with a tooltip explaining that it is on because of the accounting integration (similar to how Categories/Tags/Taxes are handled when they come from a connection).

Actual Result

The row is rendered for any user with the beta enabled, regardless of accounting/export config. The toggle is disabled/locked with no explanation, so users don't understand how to make it work or turn it off.

Video repro from Tom in Slack: https://expensify.slack.com/archives/C07HPDRELLD/p1786096006215669?thread_ts=1785782693.225439&cid=C07HPDRELLD

Design & discussion

• Design mock from @heyjennahay: https://expensify.slack.com/archives/C07HPDRELLD/p1786102642946129?thread_ts=1785782693.225439&cid=C07HPDRELLD
• Design spec quote: "Vendor will be displayed in More features if visible in workspace but is locked (similar to Categories/Tags/Taxes when imported from an accounting connection) and cannot be disabled. Visibility is solely determined by the non-reimbursable export setting in the initial releases meaning the tab will automatically be added when you configure the relevant accounting export setting."
• Slack thread: https://expensify.slack.com/archives/C07HPDRELLD/p1785782693225439

Fix scope

Two mechanical changes plus one copy string.

1. Hide the row when the feature doesn't apply.

src/pages/workspace/WorkspaceMoreFeaturesPage/index.tsx around line 461 — change the render gate from:

{isVendorMatchingEnabled && (
    <MoreFeatureToggle ... />
)}

to:

{hasVendorFeature(policy, isVendorMatchingEnabled) && (
    <MoreFeatureToggle ... />
)}

hasVendorFeature already exists in src/libs/PolicyUtils.ts and is exported. It mirrors the PHP backend gate (QBO w/ non-reimbursable = Credit Card or Debit Card, Sage Intacct w/ non-reimbursable = Credit Card Charge, Xero w/ config.isConfigured). No changes needed there — it is the single source of truth for this predicate.

2. Add a tooltip on the locked switch explaining why it's on.

The row stays disabled (there is no backend EnablePolicyVendors command yet, and the inline comment at the same call site explains why the switch stays purely derived). Per the design it should show a tooltip on hover, similar to how imported-from-integration Categories/Tags/Taxes explain themselves.

• src/pages/workspace/WorkspaceMoreFeaturesPage/MoreFeatureToggle.tsx: add a disabledText?: string prop and forward it to the underlying <ToggleSettingOptionRow> — that component already accepts disabledText and wraps the switch in <Tooltip text={disabledText}> when disabled is true.
• Pass disabledText={translate('workspace.moreFeatures.vendors.enabledExplanation')} to the Vendors <MoreFeatureToggle> in WorkspaceMoreFeaturesPage/index.tsx.
• Add the new copy string in src/languages/en.ts inside workspace.moreFeatures.vendors (around line 6388). Suggested wording: "This is enabled by your accounting integration." — confirm final copy with @heyjennahay before shipping.
• Add the same key to es.ts.

Scope confirmations (already answered — no follow-up needed)

• Integration coverage: use hasVendorFeature as-is. Only QBO, Sage Intacct, and Xero are in scope. NetSuite and QuickBooks Desktop are intentionally excluded until they're picked up in a later release of the vendor project.
• Backend toggle: out of scope for this fix. The switch stays purely derived from policy.connections — do not add an onToggle handler or an EnablePolicyVendors API call. That is a separate future PR (see the inline comment at WorkspaceMoreFeaturesPage/index.tsx line 461 on main).

Related

• Parent tracker: https://github.com/Expensify/Expensify/issues/597263
• Internal tracking issue: https://github.com/Expensify/Expensify/issues/669714

Platforms

All platforms — this is a shared React page.

Testing

1. Enable the vendorMatching beta.
2. Open a workspace with no accounting connection → Vendors row should not appear.
3. Connect QBO with non-reimbursable export = Credit Card → Vendors row appears, locked ON, tooltip on hover.
4. Switch non-reimbursable export to a non-card destination (e.g. Journal Entry) → Vendors row disappears.
5. Repeat 3–4 for Sage Intacct (Credit Card Charge) and Xero (any configured connection).

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022087896943819450269
• Upwork Job ID: 2087896943819450269
• Last Price Increase: 2026-08-13

[melvin-bot]

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

[melvin-bot]

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

[heyjennahay]

Sorry for the change but the logic is slightly different than described above

While I did say in the DD that we should hide Vendors unless you have the right connection set up, I think for the sake of discoverability and design consistency, it would be better to keep it always displayed but add a modal when clicked explaining why it is disabled + locked (consistent with what do for Tax when there is an accounting connection).

1. For QBO, Xero and Intacct with the correct export setting it is there + enabled + locked + pop up error
2. For QBO, Xero and Intacct without the correct export setting it is there + disabled + locked + pop up error
3. For non supported or no accounting connection it should not be displayed (for now, we will add it soon)

Tool tip text

Not so fast...
To enable or disable this feature, you'll need to change your accounting import settings.

[Beamanator]

Spec update per @heyjennahay (comment)

Render behavior is more nuanced than the original ticket — the row should still show for supported integrations that just haven't set up the correct export, so users can discover the feature. Only hide it entirely for unsupported connections / no connection.

Revised three-state matrix

Workspace state	Row visible?	Row isActive	Row disabled	Tooltip
Connected to QBO / Xero / Intacct and export config scopes vendors (hasVendorFeature true)	✅	true (locked ON)	true	✅
Connected to QBO / Xero / Intacct without the right export config	✅	false (locked OFF)	true	✅
No accounting connection, or connection is NetSuite / QuickBooks Desktop	❌	—	—	—

Fix scope (supersedes the earlier section in the ticket body)

1. New render gate.

hasVendorFeature is no longer the render gate — it's now used only for isActive. The render gate is "one of the three supported integrations is connected, ignoring export config."

Use getConnectedIntegration (already exported from src/libs/PolicyUtils.ts) with an explicit allowlist:

const vendorMatchingConnection = getConnectedIntegration(policy, [
    CONST.POLICY.CONNECTIONS.NAME.QBO,
    CONST.POLICY.CONNECTIONS.NAME.XERO,
    CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT,
]);
const shouldShowVendorRow = isVendorMatchingEnabled && !!vendorMatchingConnection;

Then in WorkspaceMoreFeaturesPage/index.tsx around line 461:

{shouldShowVendorRow && (
    <MoreFeatureToggle
        ...
        isActive={hasVendorFeature(policy, isVendorMatchingEnabled)}
        disabled
        disabledText={translate('workspace.moreFeatures.vendors.disabledMessage')}
        ...
    />
)}

(Feel free to wrap the allowlist + getConnectedIntegration call in a small helper like isVendorMatchingIntegrationConnected(policy) in PolicyUtils.ts if it makes the call site cleaner — either way is fine.)

2. Tooltip plumbing (unchanged from earlier scope).

Add disabledText?: string prop to MoreFeatureToggle and forward to <ToggleSettingOptionRow> (which already supports it).

3. Copy — final wording from @heyjennahay.

Add to src/languages/en.ts under workspace.moreFeatures.vendors (and mirror in es.ts):

Not so fast...
To enable or disable this feature, you'll need to change your accounting import settings.

Note this is a two-line string with a title — implementations of disabledText in this codebase are single-string tooltips, so the contributor should either:

• render as one string with a newline ("Not so fast...\nTo enable or disable this feature, you'll need to change your accounting import settings."), or
• if the existing tooltip component doesn't render newlines well, use a modal instead of a tooltip (Jenna's mock actually shows a modal — see the screenshot in her comment).

Check Jenna's screenshot: it looks like a centered modal, not a hover tooltip. If a modal is intended, wire it up via disabledAction (already threaded through MoreFeatureToggle — see how other locked rows use withReadOnlyFallback()); the modal component pattern used by other More features rows (showConfirmModal) is available in the same file. Confirm with @heyjennahay whether it's modal or tooltip before implementing.

Revised repro / testing

1. Enable the vendorMatching beta.
2. No connection → row hidden.
3. QBD or NetSuite connected → row hidden.
4. QBO connected, non-reimbursable export = Journal Entry → row visible, toggle locked OFF, tooltip/modal on interaction.
5. QBO connected, non-reimbursable export = Credit Card → row visible, toggle locked ON, tooltip/modal on interaction.
6. Repeat 4–5 for Sage Intacct (correct = Credit Card Charge) and Xero (correct = config.isConfigured true; wrong ≈ not yet configured).

[heyjennahay]

Confirming it should be a pop up error modal per the screenshot

[skrohan5016-coder]

Proposal

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

The Vendors row in More features needs the updated three-state behavior from the design discussion:

1. QBO, Xero, or Sage Intacct with vendor-scoping export config: show the row locked ON.
2. The same supported integrations without the required export config: show the row locked OFF for discoverability.
3. NetSuite, QuickBooks Desktop, another unsupported connection, or no accounting connection: hide the row.

Whenever the supported row is shown, interacting with the locked switch should explain that its state is controlled by accounting import settings.

What is the root cause of that problem?

The current render gate is only isVendorMatchingEnabled, so every beta user sees the row. hasVendorFeature() is correctly used for the active state, but it answers a narrower question: whether a supported connection's current export configuration actually scopes vendors. It cannot also serve as the visibility predicate because a supported-but-not-configured workspace must now see a locked-OFF row.

The current disabled action is withReadOnlyFallback() with no writable-user callback, so admins receive no explanation. ToggleSettingOptionRow already sends disabled switch presses to disabledAction; no new switch component behavior is required.

There is also an interaction detail worth preserving: ToggleSettingOptionRow only makes the row body navigable when isActive && onPress. Therefore a supported-but-not-configured workspace will remain non-navigable and use the disabled switch explanation, while an active workspace can still open Vendors from the row body.

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

1. Separate visibility from activation

Add a small helper in PolicyUtils.ts, or compute this once at the page, using the explicit launch allowlist:

function getVendorMatchingConnection(policy: OnyxEntry<Policy>) {
    return getConnectedIntegration(policy, [
        CONST.POLICY.CONNECTIONS.NAME.QBO,
        CONST.POLICY.CONNECTIONS.NAME.XERO,
        CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT,
    ]);
}

Then derive:

const vendorMatchingConnection = getVendorMatchingConnection(policy);
const shouldShowVendorRow = isVendorMatchingEnabled && !!vendorMatchingConnection;
const isVendorFeatureActive = hasVendorFeature(policy, isVendorMatchingEnabled);

Use shouldShowVendorRow for rendering and isVendorFeatureActive for isActive.

Do not use hasAccountingConnections() as the visibility gate: that would wrongly show NetSuite/QBD. Do not use hasVendorFeature() as the visibility gate: that would hide the supported locked-OFF discovery state.

Keep the existing usePolicyConnectionsPrefetch() because both predicates depend on detailed policy.connections. The row should be derived from the hydrated connection data rather than optimistic areConnectionsEnabled alone.

2. Use the existing disabled-action modal path

The design comment says “pop up error,” and the attached mock is a centered modal rather than a hover-only tooltip. A modal is also available on native, where hover tooltips are not. Add a local callback:

const showVendorAccountingSettingsExplanation = () =>
    showConfirmModal({
        title: translate('workspace.moreFeatures.vendors.disabledTitle'),
        prompt: translate('workspace.moreFeatures.vendors.disabledPrompt'),
        confirmText: translate('common.buttonConfirm'),
        shouldShowCancelButton: false,
    });

Use:

disabled
disabledAction={withReadOnlyFallback(showVendorAccountingSettingsExplanation)}

This composition is important: writable admins receive the accounting explanation, while users without write access continue to receive the standard read-only modal.

There is no need to add disabledText plumbing to MoreFeatureToggle for this version. A tooltip-only implementation would not reproduce the same interaction on iOS/Android and would make the title/body copy awkward as one tooltip string.

3. Add the finalized localized copy

Under workspace.moreFeatures.vendors:

disabledTitle: 'Not so fast...',
disabledPrompt: "To enable or disable this feature, you'll need to change your accounting import settings.",

Add the corresponding Spanish keys following the repository translation workflow.

Keep the switch locked and onToggle={() => {}}; this issue must not invent an EnablePolicyVendors command. Keep row-body navigation for the active state only.

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

Add a table-driven test for the page/helper covering:

1. Beta off + any connection → hidden.
2. Beta on + no connection → hidden.
3. NetSuite or QBD → hidden.
4. QBO with Journal Entry/non-vendor config → visible, locked OFF, accounting modal.
5. QBO with Credit Card/Debit Card config → visible, locked ON, accounting modal, row body can navigate.
6. Intacct without Credit Card Charge → visible, locked OFF.
7. Intacct with Credit Card Charge → visible, locked ON.
8. Xero present but not configured → visible, locked OFF.
9. Xero configured → visible, locked ON.
10. A read-only user on any visible state gets the read-only modal instead of the accounting-management modal.
11. Connection data loaded through the existing prefetch updates visibility/state without leaving the wrong row permanently hidden or active.

What alternative solutions did you explore? (Optional)

• Render only when hasVendorFeature() is true: rejected because it loses the required supported locked-OFF discovery state.
• Render for any accounting connection: rejected because NetSuite/QBD are explicitly out of scope.
• Add only a disabledText tooltip: rejected because the final mock/wording is a modal interaction and hover is not portable to native.
• Add an API toggle: rejected because Vendors is still derived from accounting export configuration and no backend enable command exists.

[thelullabyy]

@MelvinBot Please drop your proposal

[MelvinBot]

Proposal

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

The Vendors row in Settings → Workspace → More features currently renders for every beta user, and its switch is hard-locked with no explanation. Per the updated spec + Jenna's confirmation, it should follow a three-state matrix:

Workspace state	Visible?	isActive	Interaction
QBO / Xero / Intacct with vendor-scoping export config	✅	ON (locked)	modal
QBO / Xero / Intacct without the right export config	✅	OFF (locked)	modal
NetSuite / QuickBooks Desktop / no connection	❌	—	—

What is the root cause of that problem?

Two things are wired to the wrong predicate:

1. Visibility is gated only on isVendorMatchingEnabled, so all beta users see the row. It should also require one of the three supported integrations to be connected. hasVendorFeature() can't be the visibility gate — it answers the narrower "is the export config actually scoping vendors" question, which would wrongly hide the supported-but-unconfigured locked-OFF discovery state.
2. The locked switch has no explanation. The row passes disabledAction={withReadOnlyFallback()} with no writable-user callback, so admins tapping it get nothing (read-only users still get the generic read-only modal).

Current code (SHA 380ee96)

• Render gate + row: WorkspaceMoreFeaturesPage/index.tsx:460-481 — gated on isVendorMatchingEnabled; isActive={hasVendorFeature(policy, isVendorMatchingEnabled)}; bare disabled; disabledAction={withReadOnlyFallback()}.
• hasVendorFeature and getConnectedIntegration are both exported.
• Every other locked row (Categories/Tags/Taxes) already uses the pattern disabledAction={withReadOnlyFallback(warnFn)} where warnFn opens a confirm modal — so no new component behavior is needed.

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

1. Split visibility from activation. Gate the row on "a supported integration is connected", derived from getConnectedIntegration with an explicit allowlist (QBO / Xero / Sage Intacct); keep hasVendorFeature only for isActive:

const vendorConnection = getConnectedIntegration(policy, [
    CONST.POLICY.CONNECTIONS.NAME.QBO,
    CONST.POLICY.CONNECTIONS.NAME.XERO,
    CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT,
]);
const shouldShowVendorRow = isVendorMatchingEnabled && !!vendorConnection;

Render the row on shouldShowVendorRow, keep isActive={hasVendorFeature(policy, isVendorMatchingEnabled)}. (Optionally wrap the allowlist call in a isVendorMatchingIntegrationConnected(policy) helper in PolicyUtils.ts.)

2. Explain the lock with the existing modal path — no disabledText/tooltip plumbing needed, and it works on native (hover tooltips don't). Reuse the withReadOnlyFallback + showConfirmModal pattern the other locked rows already use:

disabled
disabledAction={withReadOnlyFallback(() => showConfirmModal({
    title: translate('workspace.moreFeatures.vendors.disabledTitle'),
    prompt: translate('workspace.moreFeatures.vendors.disabledMessage'),
    shouldShowCancelButton: false,
}))}

This keeps read-only users on the standard read-only modal while giving writable admins the accounting-settings explanation. Leave onToggle={() => {}} and the row-body onPress navigation as-is — ToggleSettingsOptionRow only makes the body navigable when isActive && onPress, so locked-OFF rows correctly won't navigate and locked-ON rows still open Vendors.

3. Copy — add under workspace.moreFeatures.vendors in en.ts (and mirror in es.ts):

disabledTitle: Not so fast...
disabledMessage: To enable or disable this feature, you'll need to change your accounting import settings.

No EnablePolicyVendors command is introduced — the switch stays derived, matching the existing inline comment.

Test scenarios

Beta off → hidden · Beta on, no connection → hidden · NetSuite/QBD → hidden · QBO w/ Journal Entry export → visible, locked OFF, modal · QBO w/ Credit Card export → visible, locked ON, modal, row navigates · Intacct without/with Credit Card Charge → OFF/ON · Xero unconfigured/configured → OFF/ON · read-only user on any visible state → read-only modal.

What alternative solutions did you explore? (Optional)

• Render only when hasVendorFeature() is true — rejected: loses the supported locked-OFF discovery state.
• Render for any accounting connection (hasAccountingConnections) — rejected: would wrongly show NetSuite / QBD.
• Add a disabledText tooltip to MoreFeatureToggle — rejected: Jenna confirmed a modal, and hover tooltips aren't portable to native.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/98591#issuecomment-5291226182) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[melvin-bot]

@Beamanator, @thelullabyy Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Beamanator]

Where we at here? 😅