Customers

Part ofFinOps↗

Manages an organization's customers: a searchable list with money columns, a details sheet, and create, edit and delete flows.

Quick Start

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

export function CustomersPage() {
  return (
    <CustomersWidget
      baseUrl="https://api.tesouro.com"
      widgetToken="wt_..."
      organizationId="org_..."
    />
  );
}

It is the customers-only view of CounterpartsWidget and shares its label types.

Behaviour

• Create, edit and delete actions are gated by the user's widget-init scopes.
• Queries wait until widgetToken and organizationId resolve.
• Addresses are US-only: country is fixed to the United States with a US state picker.

Props

Widget props

Every copy prop is merged over built-in English defaults.

Examples

Linking to your invoice pages

<CustomersWidget
  onViewAllDocuments={({ id }) => navigate(`/invoices?customer=${id}`)}
  onCreateDocument={({ id }) => navigate(`/invoices/new?customer=${id}`)}
/>

TypeScript

import type {
  CounterpartActionTarget,
  CustomersWidgetProps,
} from '@tesouro/embedded-components-react';

CounterpartActionTarget is { id: string; name: string }. The label types are the same shapes CounterpartsWidget uses; see CounterpartsWidget.md for their fields.