Products

Part ofFinOps↗

Manages an organization's products and services: a filterable, sortable table with create, edit, view and delete flows, plus measure-unit management.

Quick Start

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

export function ProductsPage() {
  return (
    <ProductsWidget
      baseUrl="https://api.tesouro.com"
      widgetToken={widgetToken}
      organizationId={organizationId}
    />
  );
}

You supply only auth and optional label overrides; the widget owns data, loading, pagination and permissions.

Behaviour

• The widget gates on invoice scopes, not product:*. invoice:read:org is required to view it (otherwise it shows "Access restricted"); invoice:write:org enables create, edit, delete and measure-unit management. A token carrying only product:* scopes is denied.
• Prices are entered and shown in major units (such as dollars); the widget converts to the API's minor units.
• Only Name is sortable. The filter bar has a name search and a Filters menu with type (product/service) and measure unit, each applied filter shown as a removable chip; pagination is Previous/Next.
• A product is edited inline in its details sheet. Save stays disabled until a field changes, and Cancel or a successful save return to the product's details.
• Deleting a measure unit that products use shows a warning listing the affected products.
• Products are priced in USD. There is no currency picker: a new product is created in USD, and editing an existing product keeps the currency it was saved with.
• The form's unit picker selects an existing measure unit only. Units are created, renamed and deleted from the list's Manage units of measure button.
• When the API rejects a save, each validation error appears under the field that caused it; anything that names no field appears above the form.

Props

Widget props

Each label prop is merged over the English defaults; nested label groups merge per group.

TypeScript

import type {
  ProductsWidgetProps,
  ProductsScreenLabels,
  ProductFormSheetLabels,
  ProductDetailsSheetLabels,
  ProductDeleteDialogLabels,
  MeasureUnitsManagerLabels,
  MeasureUnitDeleteDialogLabels,
  ProductMessageLabels,
} from '@tesouro/embedded-components-react';