Content block

Selectable catalog

Search existing items, select them, edit or create an item, and see a subtotal.

Copy the bindings from
app/features/forms/routes/dashboard/submitted-forms.kind/components/invoice-items-row.tsx
Route
/dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind
Archived item retained on an invoice

Invoice items1

Old carrier

Archived, kept on this invoice

$35.00
Subtotal$35.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <CatalogList
    selectedIds={[
      'archived',
    ]}
    onChange={onChange}
    onEdit={onEdit}
    onCreate={onCreate}
    subtotal={3500}
    items={[
      {
        id: 'archived',
        name: 'Old carrier',
        amountCents: 3500,
        isArchived: true,
      },
    ]}
  />
</Form>
Empty

Invoice items0

No saved items yet.

Subtotal$0.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <CatalogList
    selectedIds={[]}
    onChange={onChange}
    onEdit={onEdit}
    onCreate={onCreate}
    subtotal={0}
    items={[]}
  />
</Form>
One

Invoice items1

Travel carrier$35.00
Subtotal$35.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <CatalogList
    selectedIds={[
      'carrier',
    ]}
    onChange={onChange}
    onEdit={onEdit}
    onCreate={onCreate}
    subtotal={3500}
    items={[
      {
        id: 'carrier',
        name: 'Travel carrier',
        amountCents: 3500,
      },
    ]}
  />
</Form>
Many and search

Invoice items3

Travel carrier$35.00
Starter supplies$20.00
Training session$75.00
Subtotal$35.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <CatalogList
    selectedIds={[
      'carrier',
    ]}
    onChange={onChange}
    onEdit={onEdit}
    onCreate={onCreate}
    subtotal={3500}
    items={[
      {
        id: 'carrier',
        name: 'Travel carrier',
        amountCents: 3500,
      },
      {
        id: 'supplies',
        name: 'Starter supplies',
        amountCents: 2000,
      },
      {
        id: 'training',
        name: 'Training session',
        amountCents: 7500,
      },
    ]}
  />
</Form>