Settings

Part ofEmbedded Banking↗andFinOps↗

A single navigable settings surface combining profile, team, invoice, bill-pay, expense, accounting, legal and help sections.

Quick Start

import { SettingsWidget } from '@tesouro/embedded-components-react';

export function SettingsPage() {
  return (
    <SettingsWidget
      baseUrl="https://api.example.com"
      widgetToken="wt_live_abc123"
      organizationId="org_xyz"
    />
  );
}

Behaviour

• Most built-in sections are scope-gated, and scopes arrive with widget init. A section the user's scopes hide falls back to the first visible one, and nothing is reported through onSelectedSectionChange, so your URL can name a section the user isn't looking at.
• Sections from additionalSections aren't scope-gated. An id that collides with a built-in section is ignored; use that section's *Content prop instead.
• The Help "Contact Us" line is hidden until you set helpContactUrl, and the Profile contact line is unlinked until you set profileContactUrl.
• The widget reads no URL or router; you own navigation via selectedSection and onSelectedSectionChange.

Props

Widget props

Examples

Deep-linking to a section

const section = searchParams.get('section') ?? undefined;

<SettingsWidget
  selectedSection={section}
  onSelectedSectionChange={(next) =>
    router.replace(`/settings?section=${next}`)
  }
/>;

To open on a section without owning the selection, use defaultSelectedSection={SettingsSection.Team} on its own.

Contributing a section

<SettingsWidget
  additionalSections={[
    {
      id: 'security',
      label: 'Security',
      content: <SecurityPage />,
      after: SettingsSection.Profile,
    },
  ]}
/>

TypeScript

import {
  SettingsSection,
  type SettingsWidgetProps,
  type SettingsWidgetSectionId,
  type SettingsWidgetAdditionalSection,
  type SettingsWidgetLabels,
  type SettingsWidgetFeatureLabels,
} from '@tesouro/embedded-components-react';

SettingsSection names the built-in section ids: profile, team, invoice, expense, bill-pay, accounting, legal, help.