Content block

Signing queue

Ordered contracts with add, remove, reorder, hints, and preview.

Copy the bindings from
app/features/forms/routes/dashboard/submitted-forms.kind/components/send-queue-eyebrow-section.tsx
Route
/dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind
Empty

Queue · Signing order0

No contracts in the signing queue yet.

Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <SigningQueue
    queue={[]}
    onAdd={onAdd}
    onRemove={onRemove}
    onReorder={onReorder}
    onPreview={onPreview}
  />
</Form>
One

Queue · Signing order1

Select the eye icon to read a contract before sending.

  1. 1

    Adoption Contract

    Last contract before payment

Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <SigningQueue
    queue={[
      {
        id: 'adoption',
        name: 'Adoption Contract',
        step: 1,
      },
    ]}
    onAdd={onAdd}
    onRemove={onRemove}
    onReorder={onReorder}
    onPreview={onPreview}
  />
</Form>
Many with hints and preview

Queue · Signing order2

Drag to reorder. Select the eye icon to read a contract before sending.

  1. 1

    Adoption Contract

    Sign, then continue

  2. 2

    Spay/Neuter Agreement for Unaltered Animals

    Last contract before payment

Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <SigningQueue
    queue={[
      {
        id: 'adoption',
        name: 'Adoption Contract',
        step: 1,
      },
      {
        id: 'spay',
        name: 'Spay/Neuter Agreement for Unaltered Animals',
        step: 2,
      },
    ]}
    onAdd={onAdd}
    onRemove={onRemove}
    onReorder={onReorder}
    onPreview={onPreview}
  />
</Form>
Group editor, no hints or preview

Queue · Signing order2

  1. 1

    Adoption Contract

  2. 2

    Spay/Neuter Agreement for Unaltered Animals

Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <SigningQueue
    queue={[
      {
        id: 'adoption',
        name: 'Adoption Contract',
        step: 1,
      },
      {
        id: 'spay',
        name: 'Spay/Neuter Agreement for Unaltered Animals',
        step: 2,
      },
    ]}
    onAdd={onAdd}
    onRemove={onRemove}
    onReorder={onReorder}
    showRowHints={false}
  />
</Form>
Search and count

Queue · Signing order10

Drag to reorder. Select the eye icon to read a contract before sending.

  1. 1

    Contract 1

    Sign, then continue

  2. 2

    Contract 2

    Sign, then continue

  3. 3

    Contract 3

    Sign, then continue

  4. 4

    Contract 4

    Sign, then continue

  5. 5

    Contract 5

    Sign, then continue

  6. 6

    Contract 6

    Sign, then continue

  7. 7

    Contract 7

    Sign, then continue

  8. 8

    Contract 8

    Sign, then continue

  9. 9

    Contract 9

    Sign, then continue

  10. 10

    Contract 10

    Last contract before payment

Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <SigningQueue
    queue={[
      {
        id: '0',
        name: 'Contract 1',
        step: 1,
      },
      {
        id: '1',
        name: 'Contract 2',
        step: 2,
      },
      {
        id: '2',
        name: 'Contract 3',
        step: 3,
      },
      {
        id: '3',
        name: 'Contract 4',
        step: 4,
      },
      {
        id: '4',
        name: 'Contract 5',
        step: 5,
      },
      {
        id: '5',
        name: 'Contract 6',
        step: 6,
      },
      {
        id: '6',
        name: 'Contract 7',
        step: 7,
      },
      {
        id: '7',
        name: 'Contract 8',
        step: 8,
      },
      {
        id: '8',
        name: 'Contract 9',
        step: 9,
      },
      {
        id: '9',
        name: 'Contract 10',
        step: 10,
      },
    ]}
    onAdd={onAdd}
    onRemove={onRemove}
    onReorder={onReorder}
    onPreview={onPreview}
  />
</Form>