v1.9.1-rc.9

Fix optional fields blocking the signature process in embeds

.github/workflows/codeql-analysis.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     permissions:
       actions: read
       contents: read

.github/workflows/e2e-tests.yml

@@ -8,7 +8,7 @@ jobs:
   e2e_tests:
     name: 'E2E Tests'
     timeout-minutes: 60
-    runs-on: ubuntu-22.04
+    runs-on: warp-ubuntu-2204-x64-16x
     steps:
       - uses: actions/checkout@v4
 

README.md

@@ -1,4 +1,4 @@
-> 🚨 We are live on Product Hunt 🎉  Check out our latest launch: <a href="documen.so/sign-everywhere">The Platform Plan</a>!
+> 🚨 We are live on Product Hunt 🎉  Check out our latest launch: <a href="https://documen.so/sign-everywhere">The Platform Plan</a>!
 
 <a href="https://www.producthunt.com/posts/documenso-platform-plan?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-documenso&#0045;platform&#0045;plan" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=670576&theme=light" alt="Documenso&#0032;Platform&#0032;Plan - Whitelabeled&#0032;signing&#0032;flows&#0032;in&#0032;your&#0032;product | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 

apps/documentation/package.json

@@ -27,6 +27,6 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "typescript": "^5"
+    "typescript": "5.6.2"
   }
 }

apps/documentation/pages/developers/embedding/_meta.json

@@ -5,5 +5,7 @@
   "svelte": "Svelte Integration",
   "solid": "Solid Integration",
   "preact": "Preact Integration",
-  "css-variables": "CSS Variables"
+  "angular": "Angular Integration",
+  "css-variables": "CSS Variables",
+  "web-components": "Web Components"
 }

apps/documentation/pages/developers/embedding/angular.mdx

@@ -0,0 +1,90 @@
+---
+title: Angular Integration
+description: Learn how to use our embedding SDK within your Angular application.
+---
+
+# Angular Integration
+
+Our Angular SDK provides a simple way to embed a signing experience within your Angular application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-angular
+```
+
+## Usage
+
+To embed a signing experience, you'll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.
+
+### Direct Link Template
+
+If you have a direct link template, you can simply provide the token for the template to the `EmbedDirectTemplate` component.
+
+```typescript
+import { Component } from '@angular/core';
+import { EmbedDirectTemplate } from '@documenso/embed-angular';
+
+@Component({
+  selector: 'app-embedding',
+  template: `
+    <embed-direct-template [token]="token" />
+  `,
+  standalone: true,
+  imports: [EmbedDirectTemplate],
+})
+export class EmbeddingComponent {
+  token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+}
+```
+
+#### Props
+
+| Prop                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| email               | string (optional)   | The email the signer that will be used by default for signing                              |
+| lockEmail           | boolean (optional)  | Whether or not the email field should be locked disallowing modifications                  |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+| onFieldSigned       | function (optional) | A callback function that will be called when a field is signed                             |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field is unsigned                           |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `EmbedSignDocument` component.
+
+```typescript
+import { Component } from '@angular/core';
+import { EmbedSignDocument } from '@documenso/embed-angular';
+
+@Component({
+  selector: 'app-embedding',
+  template: `
+    <embed-sign-document [token]="token" />
+  `,
+  standalone: true,
+  imports: [EmbedSignDocument],
+})
+export class EmbeddingComponent {
+  token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+}
+```
+
+#### Props
+
+| Prop                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |

apps/documentation/pages/developers/embedding/css-variables.mdx

@@ -111,6 +111,83 @@ The colors will be automatically converted to the appropriate format internally.
 
 4. **Consistent Radius**: Use a consistent border radius value that matches your application's design system.
 
+## CSS Class Targets
+
+In addition to CSS variables, specific components in the embedded experience can be targeted using CSS classes for more granular styling:
+
+### Component Classes
+
+| Class Name                        | Description                                                             |
+| --------------------------------- | ----------------------------------------------------------------------- |
+| `.embed--Root`                    | Main container for the embedded signing experience                      |
+| `.embed--DocumentContainer`       | Container for the document and signing widget                           |
+| `.embed--DocumentViewer`          | Container for the document viewer                                       |
+| `.embed--DocumentWidget`          | The signing widget container                                            |
+| `.embed--DocumentWidgetContainer` | Outer container for the signing widget, handles positioning             |
+| `.embed--DocumentWidgetHeader`    | Header section of the signing widget                                    |
+| `.embed--DocumentWidgetContent`   | Main content area of the signing widget                                 |
+| `.embed--DocumentWidgetForm`      | Form section within the signing widget                                  |
+| `.embed--DocumentWidgetFooter`    | Footer section of the signing widget                                    |
+| `.embed--WaitingForTurn`          | Container for the waiting screen when it's not the user's turn to sign  |
+| `.embed--DocumentCompleted`       | Container for the completion screen after signing                       |
+| `.field--FieldRootContainer`      | Base container for document fields (signatures, text, checkboxes, etc.) |
+
+Field components also expose several data attributes that can be used for styling different states:
+
+| Data Attribute      | Values                                         | Description                          |
+| ------------------- | ---------------------------------------------- | ------------------------------------ |
+| `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
+| `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
+| `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+
+### Field Styling Example
+
+```css
+/* Style all field containers */
+.field--FieldRootContainer {
+  transition: all 200ms ease;
+}
+
+/* Style specific field types */
+.field--FieldRootContainer[data-field-type='SIGNATURE'] {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Style inserted fields */
+.field--FieldRootContainer[data-inserted='true'] {
+  background-color: var(--primary);
+  opacity: 0.2;
+}
+
+/* Style fields being validated */
+.field--FieldRootContainer[data-validate='true'] {
+  border-color: orange;
+}
+```
+
+### Example Usage
+
+```css
+/* Custom styles for the document widget */
+.embed--DocumentWidget {
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Custom styles for the waiting screen */
+.embed--WaitingForTurn {
+  background-color: #f9fafb;
+  padding: 2rem;
+}
+
+/* Responsive adjustments for the document container */
+@media (min-width: 768px) {
+  .embed--DocumentContainer {
+    gap: 2rem;
+  }
+}
+```
+
 ## Related
 
 - [React Integration](/developers/embedding/react)

apps/documentation/pages/developers/embedding/index.mdx

@@ -5,7 +5,7 @@ description: Learn how to use embedding to bring signing to your own website or
 
 # Embedding
 
-Our embedding feature lets you integrate our document signing experience into your own application or website. Whether you're building with React, Preact, Vue, Svelte, Solid, or using generalized web components, this guide will help you get started with embedding Documenso.
+Our embedding feature lets you integrate our document signing experience into your own application or website. Whether you're building with React, Preact, Vue, Svelte, Solid, Angular, or using generalized web components, this guide will help you get started with embedding Documenso.
 
 ## Availability
 
@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   }}
 />
 ```
@@ -74,12 +74,14 @@ These customization options are available for both Direct Templates and Signing
 We support embedding across a range of popular JavaScript frameworks, including:
 
 | Framework        | Package                                                                                      |
-| --------- | -------------------------------------------------------------------------------- |
+| ---------        | ----------------------------------------------------------------------------------           |
 | React            | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)               |
 | Preact           | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)             |
 | Vue              | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)                   |
 | Svelte           | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)             |
 | Solid            | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)               |
+| Angular          | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular)           |
+| Web Components   | [@documenso/embed-webcomponent](https://www.npmjs.com/package/@documenso/embed-webcomponent) |
 
 Additionally, we provide **web components** for more generalized use. However, please note that web components are still in their early stages and haven't been extensively tested.
 
@@ -127,7 +129,7 @@ This will show a dialog which will ask you to configure which recipient should b
 
 ## Embedding with Signing Tokens
 
-To embed the signing process for an ordinary document, you’ll need a **document signing token** for the recipient. This token provides the necessary access to load the document and facilitate the signing process securely.
+To embed the signing process for an ordinary document, you'll need a **document signing token** for the recipient. This token provides the necessary access to load the document and facilitate the signing process securely.
 
 #### Instructions
 
@@ -164,6 +166,8 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
 - [Vue](/developers/embedding/vue)
 - [Svelte](/developers/embedding/svelte)
 - [Solid](/developers/embedding/solid)
+- [Angular](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
 
 If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.
 
@@ -174,4 +178,6 @@ If you're using **web components**, the integration process is slightly differen
 - [Svelte Integration](/developers/embedding/svelte)
 - [Solid Integration](/developers/embedding/solid)
 - [Preact Integration](/developers/embedding/preact)
+- [Angular Integration](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
 - [CSS Variables](/developers/embedding/css-variables)

apps/documentation/pages/developers/embedding/preact.mdx

@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   };
 
   return (

apps/documentation/pages/developers/embedding/react.mdx

@@ -99,9 +99,9 @@ const MyEmbeddingComponent = () => {
       `}
       // CSS Variables
       cssVars={{
-        colorPrimary: '#0000FF',
+        primary: '#0000FF',
-        colorBackground: '#F5F5F5',
+        background: '#F5F5F5',
-        borderRadius: '8px',
+        radius: '8px',
       }}
       // Dark Mode Control
       darkModeDisabled={true}

apps/documentation/pages/developers/embedding/solid.mdx

@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   };
 
   return (

apps/documentation/pages/developers/embedding/svelte.mdx

@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   };
 </script>
 

apps/documentation/pages/developers/embedding/vue.mdx

@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
   }
 `;
   const cssVars = {
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   };
 </script>
 

apps/documentation/pages/developers/embedding/web-components.mdx

@@ -0,0 +1,89 @@
+---
+title: Web Components Integration
+description: Learn how to use our embedding SDK via Web Components on a framework-less web application.
+---
+
+# Web Components Integration
+
+Our Web Components SDK provides a simple way to embed a signing experience within your framework-less web application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-webcomponent
+```
+
+Then in your html file, add the following to add the script, replacing the path with the proper path to the web component script.
+
+```html
+<script src="YOUR_PATH_HERE"></script>
+```
+
+## Usage
+
+To embed a signing experience, you'll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.
+
+### Direct Link Template
+
+If you have a direct link template, you can simply provide the token for the template to the `documenso-embed-direct-template` tag.
+
+```html
+<documenso-embed-direct-template
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-direct-template>
+```
+
+#### Attributes
+
+| Attribute                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| email               | string (optional)   | The email the signer that will be used by default for signing                              |
+| lockEmail           | boolean (optional)  | Whether or not the email field should be locked disallowing modifications                  |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+| onFieldSigned       | function (optional) | A callback function that will be called when a field is signed                             |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field is unsigned                           |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `documenso-embed-sign-document` tag.
+
+```html
+<documenso-embed-sign-document
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-sign-document>
+```
+
+#### Attributes
+
+| Attribute                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+
+### Creating via JavaScript
+
+You can also create the tag element using javascript, for dynamic generation of either modes. For example, this would add the sign document embed to the DOM.
+
+```javascript
+document.getElementById('my-wrapper-here').innerHTML = '';
+
+const tag = document.createElement('documenso-embed-sign-document');
+tag.setAttribute('token', data.token);
+tag.style.width = '100%';
+tag.style.height = '100%';
+
+document.getElementById('my-wrapper-here').appendChild(tag);
+```

apps/documentation/pages/developers/public-api/index.mdx

@@ -3,6 +3,8 @@ title: Public API
 description: Learn how to interact with your documents programmatically using the Documenso public API.
 ---
 
+import { Callout, Steps } from 'nextra/components';
+
 # Public API
 
 Documenso provides a public REST API enabling you to interact with your documents programmatically. The API exposes various HTTP endpoints that allow you to perform operations such as:
@@ -13,10 +15,35 @@ Documenso provides a public REST API enabling you to interact with your document
 
 The documentation walks you through creating API keys and using them to authenticate your API requests. You'll also learn about the available endpoints, request and response formats, and how to use the API.
 
-## Swagger Documentation
+## API V1 - Stable
 
-The [Swagger documentation](https://app.documenso.com/api/v1/openapi) also provides information about the API endpoints, request parameters, response formats, and authentication methods.
+Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) for details about the API endpoints, request parameters, response formats, and authentication methods.
+
+## API V2 - Beta
+
+<Callout type="warning">API V2 is currently beta, and will be subject to breaking changes</Callout>
+
+Check out the [API V2 documentation](https://documen.so/api-v2-docs) for details about the API endpoints, request parameters, response formats, and authentication methods.
+
+Our new API V2 supports the following typed SDKs:
+
+- [TypeScript](https://github.com/documenso/sdk-typescript)
+- [Python](https://github.com/documenso/sdk-python)
+- [Go](https://github.com/documenso/sdk-go)
+
+<Callout type="info">
+  For the staging API, please use the following base URL:
+  `https://stg-app.documenso.dev/api/v2-beta/`
+</Callout>
+
+🚀 [V2 Announcement](https://documen.so/sdk-blog)
+
+📖 [Documentation](https://documen.so/api-v2-docs)
+
+💬 [Leave Feedback](https://documen.so/sdk-feedback)
+
+🔔 [Breaking Changes](https://documen.so/sdk-breaking)
 
 ## Availability
 
-The API is available to individual users and teams.
+The API is available to individual users, teams and higher plans. [Fair Use](https://documen.so/fair) applies.

apps/documentation/pages/developers/public-api/reference.mdx

@@ -532,3 +532,93 @@ Replace the `text` value with the corresponding field type:
 - For the `SELECT` field it should be `select`. (check this before merge)
 
 You must pass this property at all times, even if you don't need to set any other properties. If you don't, the endpoint will throw an error.
+
+## Pre-fill Fields On Document Creation
+
+The API allows you to pre-fill fields on document creation. This is useful when you want to create a document from an existing template and pre-fill the fields with specific values.
+
+To pre-fill a field, you need to make a `POST` request to the `/api/v1/templates/{templateId}/generate-document` endpoint with the field information. Here's an example:
+
+```json
+{
+  "title": "my-document.pdf",
+  "recipients": [
+    {
+      "id": 3,
+      "name": "Example User",
+      "email": "example@documenso.com",
+      "signingOrder": 1,
+      "role": "SIGNER"
+    }
+  ],
+  "prefillFields": [
+    {
+      "id": 21,
+      "type": "text",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "my-value"
+    },
+    {
+      "id": 22,
+      "type": "number",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "123"
+    },
+    {
+      "id": 23,
+      "type": "checkbox",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": ["option-1", "option-2"]
+    }
+  ]
+}
+```
+
+Check out the endpoint in the [API V1 documentation](https://app.documenso.com/api/v1/openapi#:~:text=/%7BtemplateId%7D/-,generate,-%2Ddocument).
+
+### API V2
+
+For API V2, you need to make a `POST` request to the `/api/v2-beta/template/use` endpoint with the field(s) information. Here's an example:
+
+```json
+{
+  "templateId": 111,
+  "recipients": [
+    {
+      "id": 3,
+      "name": "Example User",
+      "email": "example@documenso.com",
+      "signingOrder": 1,
+      "role": "SIGNER"
+    }
+  ],
+  "prefillFields": [
+    {
+      "id": 21,
+      "type": "text",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "my-value"
+    },
+    {
+      "id": 22,
+      "type": "number",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "123"
+    },
+    {
+      "id": 23,
+      "type": "checkbox",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": ["option-1", "option-2"]
+    }
+  ]
+}
+```
+
+Check out the endpoint in the [API V2 documentation](https://openapi.documenso.com/reference#tag/template/POST/template/use).

apps/documentation/pages/developers/webhooks.mdx

@@ -21,6 +21,7 @@ Documenso supports Webhooks and allows you to subscribe to the following events:
 - `document.signed`
 - `document.completed`
 - `document.rejected`
+- `document.cancelled`
 
 ## Create a webhook subscription
 
@@ -37,7 +38,7 @@ Clicking on the "**Create Webhook**" button opens a modal to create a new webhoo
 To create a new webhook subscription, you need to provide the following information:
 
 - Enter the webhook URL that will receive the event payload.
-- Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`, `document.rejected`.
+- Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`, `document.rejected`, `document.cancelled`.
 - Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Secret` header of the request.
 
 ![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/webhooks-page-create-webhook-modal.webp)
@@ -528,6 +529,96 @@ Example payload for the `document.rejected` event:
 }
 ```
 
+Example payload for the `document.rejected` event:
+
+```json
+{
+  "event": "DOCUMENT_CANCELLED",
+  "payload": {
+    "id": 7,
+    "externalId": null,
+    "userId": 3,
+    "authOptions": null,
+    "formValues": null,
+    "visibility": "EVERYONE",
+    "title": "documenso.pdf",
+    "status": "PENDING",
+    "documentDataId": "cm6exvn93006hi02ru90a265a",
+    "createdAt": "2025-01-27T11:02:14.393Z",
+    "updatedAt": "2025-01-27T11:03:16.387Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null,
+    "templateId": null,
+    "source": "DOCUMENT",
+    "documentMeta": {
+      "id": "cm6exvn96006ji02rqvzjvwoy",
+      "subject": "",
+      "message": "",
+      "timezone": "Etc/UTC",
+      "password": null,
+      "dateFormat": "yyyy-MM-dd hh:mm a",
+      "redirectUrl": "",
+      "signingOrder": "PARALLEL",
+      "typedSignatureEnabled": true,
+      "language": "en",
+      "distributionMethod": "EMAIL",
+      "emailSettings": {
+        "documentDeleted": true,
+        "documentPending": true,
+        "recipientSigned": true,
+        "recipientRemoved": true,
+        "documentCompleted": true,
+        "ownerDocumentCompleted": true,
+        "recipientSigningRequest": true
+      }
+    },
+    "recipients": [
+      {
+        "id": 7,
+        "documentId": 7,
+        "templateId": null,
+        "email": "mybirihix@mailinator.com",
+        "name": "Zorita Baird",
+        "token": "XkKx1HCs6Znm2UBJA2j6o",
+        "documentDeletedAt": null,
+        "expired": null,
+        "signedAt": null,
+        "authOptions": { "accessAuth": null, "actionAuth": null },
+        "signingOrder": 1,
+        "rejectionReason": null,
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ],
+    "Recipient": [
+      {
+        "id": 7,
+        "documentId": 7,
+        "templateId": null,
+        "email": "signer@documenso.com",
+        "name": "Signer",
+        "token": "XkKx1HCs6Znm2UBJA2j6o",
+        "documentDeletedAt": null,
+        "expired": null,
+        "signedAt": null,
+        "authOptions": { "accessAuth": null, "actionAuth": null },
+        "signingOrder": 1,
+        "rejectionReason": null,
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2025-01-27T11:03:27.730Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
 ## Availability
 
 Webhooks are available to individual users and teams.

apps/documentation/pages/users/signing-documents/index.mdx

@@ -86,11 +86,12 @@ You can also set the recipient's role, which determines their actions and permis
 Documenso has 4 roles for recipients with different permissions and actions.
 
 |   Role    |                                    Function                                     | Action required | Signature |
-| :------: | :-----------------------------------------------------------------------------: | :-------------: | :-------: |
+| :-------: | :-----------------------------------------------------------------------------: | :-------------: | :-------: |
 |  Signer   |                Needs to sign signatures fields assigned to them.                |       Yes       |    Yes    |
 | Approver  |          Needs to approve the document as a whole. Signature optional.          |       Yes       | Optional  |
 |  Viewer   |                   Needs to confirm they viewed the document.                    |       Yes       |    No     |
-|   BCC    | Receives a copy of the signed document after completion. No action is required. |       No        |    No     |
+| Assistant | Can help prepare the document by filling in fields on behalf of other signers.  |       Yes       |    No     |
+|    CC     | Receives a copy of the signed document after completion. No action is required. |       No        |    No     |
 
 ### Fields
 

apps/openpage-api/package.json

@@ -16,8 +16,8 @@
     "next": "14.2.6"
   },
   "devDependencies": {
-    "@types/node": "20.16.5",
+    "@types/node": "^20",
     "@types/react": "18.3.5",
-    "typescript": "5.5.4"
+    "typescript": "5.6.2"
   }
 }

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.9.0-rc.6",
+  "version": "1.9.1-rc.9",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -26,7 +26,6 @@
     "@lingui/react": "^4.11.3",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
-    "@tanstack/react-query": "^4.29.5",
     "colord": "^2.9.3",
     "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
@@ -55,7 +54,7 @@
     "recharts": "^2.7.2",
     "remeda": "^2.17.3",
     "sharp": "0.32.6",
-    "trpc-openapi": "^1.2.0",
+    "trpc-to-openapi": "2.0.4",
     "ts-pattern": "^5.0.5",
     "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",
@@ -68,11 +67,11 @@
     "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
-    "@types/node": "20.1.0",
+    "@types/node": "^20",
     "@types/papaparse": "^5.3.14",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/ua-parser-js": "^0.7.39",
-    "typescript": "5.2.2"
+    "typescript": "5.6.2"
   }
 }

apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx

@@ -28,7 +28,7 @@ export const AdminActions = ({ className, document, recipients }: AdminActionsPr
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
+  const { mutate: resealDocument, isPending: isResealDocumentLoading } =
     trpc.admin.resealDocument.useMutation({
       onSuccess: () => {
         toast({

apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx

@@ -59,7 +59,7 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
         <Trans>Admin Actions</Trans>
       </h2>
 
-      <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
+      <AdminActions className="mt-2" document={document} recipients={document.recipients} />
 
       <hr className="my-4" />
       <h2 className="text-lg font-semibold">
@@ -68,7 +68,7 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
       <div className="mt-4">
         <Accordion type="multiple" className="space-y-4">
-          {document.Recipient.map((recipient) => (
+          {document.recipients.map((recipient) => (
             <AccordionItem
               key={recipient.id}
               value={recipient.id.toString()}

apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx

@@ -39,9 +39,9 @@ type TAdminUpdateRecipientFormSchema = z.infer<typeof ZAdminUpdateRecipientFormS
 
 export type RecipientItemProps = {
   recipient: Recipient & {
-    Field: Array<
+    fields: Array<
       Field & {
-        Signature: Signature | null;
+        signature: Signature | null;
       }
     >;
   };
@@ -89,13 +89,13 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
         accessorKey: 'signature',
         cell: ({ row }) => (
           <div>
-            {row.original.Signature?.typedSignature && (
+            {row.original.signature?.typedSignature && (
-              <span>{row.original.Signature.typedSignature}</span>
+              <span>{row.original.signature.typedSignature}</span>
             )}
 
-            {row.original.Signature?.signatureImageAsBase64 && (
+            {row.original.signature?.signatureImageAsBase64 && (
               <img
-                src={row.original.Signature.signatureImageAsBase64}
+                src={row.original.signature.signatureImageAsBase64}
                 alt="Signature"
                 className="h-12 w-full dark:invert"
               />
@@ -103,7 +103,7 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
           </div>
         ),
       },
-    ] satisfies DataTableColumnDef<(typeof recipient)['Field'][number]>[];
+    ] satisfies DataTableColumnDef<(typeof recipient)['fields'][number]>[];
   }, []);
 
   const onUpdateRecipientFormSubmit = async ({ name, email }: TAdminUpdateRecipientFormSchema) => {
@@ -190,7 +190,7 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
         <Trans>Fields</Trans>
       </h2>
 
-      <DataTable columns={columns} data={recipient.Field} />
+      <DataTable columns={columns} data={recipient.fields} />
     </div>
   );
 };

apps/web/src/app/(dashboard)/admin/documents/[id]/super-delete-document-dialog.tsx

@@ -8,7 +8,6 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 import type { Document } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -36,7 +35,7 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
 
   const [reason, setReason] = useState('');
 
-  const { mutateAsync: deleteDocument, isLoading: isDeletingDocument } =
+  const { mutateAsync: deleteDocument, isPending: isDeletingDocument } =
     trpc.admin.deleteDocument.useMutation();
 
   const handleDeleteDocument = async () => {
@@ -55,29 +54,20 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
 
       router.push('/admin/documents');
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
       toast({
         title: _(msg`An unknown error occurred`),
         variant: 'destructive',
         description:
-            err.message ??
           'We encountered an unknown error while attempting to delete your document. Please try again later.',
       });
     }
-    }
   };
 
   return (
     <div>
       <div>
         <Alert
-          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
+          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
           variant="neutral"
         >
           <div>

apps/web/src/app/(dashboard)/admin/documents/document-results.tsx

@@ -37,7 +37,7 @@ export const AdminDocumentResults = () => {
   const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
   const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
 
-  const { data: findDocumentsData, isLoading: isFindDocumentsLoading } =
+  const { data: findDocumentsData, isPending: isFindDocumentsLoading } =
     trpc.admin.findDocuments.useQuery(
       {
         query: debouncedTerm,
@@ -45,7 +45,7 @@ export const AdminDocumentResults = () => {
         perPage: perPage || 20,
       },
       {
-        keepPreviousData: true,
+        placeholderData: (previousData) => previousData,
       },
     );
 
@@ -86,14 +86,14 @@ export const AdminDocumentResults = () => {
         header: _(msg`Owner`),
         accessorKey: 'owner',
         cell: ({ row }) => {
-          const avatarFallbackText = row.original.User.name
+          const avatarFallbackText = row.original.user.name
-            ? extractInitials(row.original.User.name)
+            ? extractInitials(row.original.user.name)
-            : row.original.User.email.slice(0, 1).toUpperCase();
+            : row.original.user.email.slice(0, 1).toUpperCase();
 
           return (
             <Tooltip delayDuration={200}>
               <TooltipTrigger>
-                <Link href={`/admin/users/${row.original.User.id}`}>
+                <Link href={`/admin/users/${row.original.user.id}`}>
                   <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
                     <AvatarFallback className="text-xs text-gray-400">
                       {avatarFallbackText}
@@ -110,8 +110,8 @@ export const AdminDocumentResults = () => {
                 </Avatar>
 
                 <div className="text-muted-foreground flex flex-col text-sm">
-                  <span>{row.original.User.name}</span>
+                  <span>{row.original.user.name}</span>
-                  <span>{row.original.User.email}</span>
+                  <span>{row.original.user.email}</span>
                 </div>
               </TooltipContent>
             </Tooltip>

apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
-import { ChevronDownIcon as CaretSortIcon, Loader } from 'lucide-react';
+import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
@@ -54,7 +54,15 @@ export const LeaderboardTable = ({
             onClick={() => handleColumnSort('name')}
           >
             {_(msg`Name`)}
-            <CaretSortIcon className="ml-2 h-4 w-4" />
+            {sortBy === 'name' ? (
+              sortOrder === 'asc' ? (
+                <ChevronUpIcon className="ml-2 h-4 w-4" />
+              ) : (
+                <ChevronDownIcon className="ml-2 h-4 w-4" />
+              )
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4" />
+            )}
           </div>
         ),
         accessorKey: 'name',
@@ -80,7 +88,15 @@ export const LeaderboardTable = ({
             onClick={() => handleColumnSort('signingVolume')}
           >
             {_(msg`Signing Volume`)}
-            <CaretSortIcon className="ml-2 h-4 w-4" />
+            {sortBy === 'signingVolume' ? (
+              sortOrder === 'asc' ? (
+                <ChevronUpIcon className="ml-2 h-4 w-4" />
+              ) : (
+                <ChevronDownIcon className="ml-2 h-4 w-4" />
+              )
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4" />
+            )}
           </div>
         ),
         accessorKey: 'signingVolume',
@@ -94,7 +110,15 @@ export const LeaderboardTable = ({
               onClick={() => handleColumnSort('createdAt')}
             >
               {_(msg`Created`)}
-              <CaretSortIcon className="ml-2 h-4 w-4" />
+              {sortBy === 'createdAt' ? (
+                sortOrder === 'asc' ? (
+                  <ChevronUpIcon className="ml-2 h-4 w-4" />
+                ) : (
+                  <ChevronDownIcon className="ml-2 h-4 w-4" />
+                )
+              ) : (
+                <ChevronsUpDown className="ml-2 h-4 w-4" />
+              )}
             </div>
           );
         },
@@ -102,7 +126,7 @@ export const LeaderboardTable = ({
         cell: ({ row }) => i18n.date(row.original.createdAt),
       },
     ] satisfies DataTableColumnDef<SigningVolume>[];
-  }, [sortOrder]);
+  }, [sortOrder, sortBy]);
 
   useEffect(() => {
     startTransition(() => {
@@ -133,6 +157,9 @@ export const LeaderboardTable = ({
   const handleColumnSort = (column: 'name' | 'createdAt' | 'signingVolume') => {
     startTransition(() => {
       updateSearchParams({
+        search: debouncedSearchString,
+        page,
+        perPage,
         sortBy: column,
         sortOrder: sortBy === column && sortOrder === 'asc' ? 'desc' : 'asc',
       });

apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx

@@ -13,7 +13,6 @@ import {
   SITE_SETTINGS_BANNER_ID,
   ZSiteSettingsBannerSchema,
 } from '@documenso/lib/server-only/site-settings/schemas/banner';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { ColorPicker } from '@documenso/ui/primitives/color-picker';
@@ -59,7 +58,7 @@ export function BannerForm({ banner }: BannerFormProps) {
 
   const enabled = form.watch('enabled');
 
-  const { mutateAsync: updateSiteSetting, isLoading: isUpdateSiteSettingLoading } =
+  const { mutateAsync: updateSiteSetting, isPending: isUpdateSiteSettingLoading } =
     trpcReact.admin.updateSiteSetting.useMutation();
 
   const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
@@ -78,13 +77,6 @@ export function BannerForm({ banner }: BannerFormProps) {
 
       router.refresh();
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
       toast({
         title: _(msg`An unknown error occurred`),
         variant: 'destructive',
@@ -93,7 +85,6 @@ export function BannerForm({ banner }: BannerFormProps) {
         ),
       });
     }
-    }
   };
 
   return (

apps/web/src/app/(dashboard)/admin/users/[id]/delete-user-dialog.tsx

@@ -6,9 +6,10 @@ import { useRouter } from 'next/navigation';
 
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { match } from 'ts-pattern';
 
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { User } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,7 +38,7 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
 
   const [email, setEmail] = useState('');
 
-  const { mutateAsync: deleteUser, isLoading: isDeletingUser } =
+  const { mutateAsync: deleteUser, isPending: isDeletingUser } =
     trpc.admin.deleteUser.useMutation();
 
   const onDeleteAccount = async () => {
@@ -54,23 +55,19 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
 
       router.push('/admin/users');
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.NOT_FOUND, () => msg`User not found.`)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not authorized to delete this user.`)
+        .otherwise(() => msg`An error occurred while deleting the user.`);
+
       toast({
-          title: _(msg`An error occurred`),
+        title: _(msg`Error`),
-          description: err.message,
+        description: _(errorMessage),
         variant: 'destructive',
+        duration: 7500,
       });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          variant: 'destructive',
-          description:
-            err.message ??
-            _(
-              msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
-            ),
-        });
-      }
     }
   };
 

apps/web/src/app/(dashboard)/admin/users/[id]/disable-user-dialog.tsx

@@ -34,7 +34,7 @@ export const DisableUserDialog = ({ className, userToDisable }: DisableUserDialo
 
   const [email, setEmail] = useState('');
 
-  const { mutateAsync: disableUser, isLoading: isDisablingUser } =
+  const { mutateAsync: disableUser, isPending: isDisablingUser } =
     trpc.admin.disableUser.useMutation();
 
   const onDisableAccount = async () => {

apps/web/src/app/(dashboard)/admin/users/[id]/enable-user-dialog.tsx

@@ -34,7 +34,7 @@ export const EnableUserDialog = ({ className, userToEnable }: EnableUserDialogPr
 
   const [email, setEmail] = useState('');
 
-  const { mutateAsync: enableUser, isLoading: isEnablingUser } =
+  const { mutateAsync: enableUser, isPending: isEnablingUser } =
     trpc.admin.enableUser.useMutation();
 
   const onEnableAccount = async () => {

apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx

@@ -22,8 +22,8 @@ type UserData = {
   name: string | null;
   email: string;
   roles: Role[];
-  Subscription?: SubscriptionLite[] | null;
+  subscriptions?: SubscriptionLite[] | null;
-  Document: DocumentLite[];
+  documents: DocumentLite[];
 };
 
 type SubscriptionLite = Pick<
@@ -81,7 +81,7 @@ export const UsersDataTable = ({
         header: _(msg`Subscription`),
         accessorKey: 'subscription',
         cell: ({ row }) => {
-          const foundIndividualSubscription = (row.original.Subscription ?? []).find((sub) =>
+          const foundIndividualSubscription = (row.original.subscriptions ?? []).find((sub) =>
             individualPriceIds.includes(sub.priceId),
           );
 
@@ -92,7 +92,7 @@ export const UsersDataTable = ({
         header: _(msg`Documents`),
         accessorKey: 'documents',
         cell: ({ row }) => {
-          return <div>{row.original.Document.length}</div>;
+          return <div>{row.original.documents?.length}</div>;
         },
       },
       {

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-button.tsx

@@ -18,14 +18,14 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewButtonProps = {
   document: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
+    recipients: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
   team?: Pick<Team, 'id' | 'url'>;
 };
 
-export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButtonProps) => {
+export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -34,7 +34,7 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
     return null;
   }
 
-  const recipient = document.Recipient.find((recipient) => recipient.email === session.user.email);
+  const recipient = document.recipients.find((recipient) => recipient.email === session.user.email);
 
   const isRecipient = !!recipient;
   const isPending = document.status === DocumentStatus.PENDING;
@@ -46,10 +46,16 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
 
   const onDownloadClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.getDocumentById.query({
+      const documentWithData = await trpcClient.document.getDocumentById.query(
+        {
           documentId: document.id,
-        teamId: team?.id,
+        },
-      });
+        {
+          context: {
+            teamId: document.team?.id?.toString(),
+          },
+        },
+      );
 
       const documentData = documentWithData?.documentData;
 

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx

@@ -41,8 +41,8 @@ import { DuplicateDocumentDialog } from '../duplicate-document-dialog';
 
 export type DocumentPageViewDropdownProps = {
   document: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
+    recipients: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
   team?: Pick<Team, 'id' | 'url'> & { teamEmail: TeamEmail | null };
@@ -60,9 +60,9 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
     return null;
   }
 
-  const recipient = document.Recipient.find((recipient) => recipient.email === session.user.email);
+  const recipient = document.recipients.find((recipient) => recipient.email === session.user.email);
 
-  const isOwner = document.User.id === session.user.id;
+  const isOwner = document.user.id === session.user.id;
   const isDraft = document.status === DocumentStatus.DRAFT;
   const isPending = document.status === DocumentStatus.PENDING;
   const isDeleted = document.deletedAt !== null;
@@ -74,10 +74,16 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
 
   const onDownloadClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.getDocumentById.query({
+      const documentWithData = await trpcClient.document.getDocumentById.query(
+        {
           documentId: document.id,
-        teamId: team?.id,
+        },
-      });
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
 
       const documentData = documentWithData?.documentData;
 
@@ -95,7 +101,7 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
     }
   };
 
-  const nonSignedRecipients = document.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
+  const nonSignedRecipients = document.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
     <DropdownMenu>
@@ -150,7 +156,7 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
 
         {canManageDocument && (
           <DocumentRecipientLinkCopyDialog
-            recipients={document.Recipient}
+            recipients={document.recipients}
             trigger={
               <DropdownMenuItem
                 disabled={!isPending || isDeleted}

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx

@@ -12,8 +12,8 @@ import type { Document, Recipient, User } from '@documenso/prisma/client';
 export type DocumentPageViewInformationProps = {
   userId: number;
   document: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
+    recipients: Recipient[];
   };
 };
 
@@ -29,7 +29,8 @@ export const DocumentPageViewInformation = ({
     return [
       {
         description: msg`Uploaded by`,
-        value: userId === document.userId ? _(msg`You`) : document.User.name ?? document.User.email,
+        value:
+          userId === document.userId ? _(msg`You`) : (document.user.name ?? document.user.email),
       },
       {
         description: msg`Created`,

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx

@@ -12,13 +12,14 @@ import {
   MailOpenIcon,
   PenIcon,
   PlusIcon,
+  UserIcon,
 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
-import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import type { Document, Recipient } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -28,7 +29,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewRecipientsProps = {
   document: Document & {
-    Recipient: Recipient[];
+    recipients: Recipient[];
   };
   documentRootPath: string;
 };
@@ -40,7 +41,7 @@ export const DocumentPageViewRecipients = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const recipients = document.Recipient;
+  const recipients = document.recipients;
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
@@ -120,6 +121,12 @@ export const DocumentPageViewRecipients = ({
                           <Trans>Viewed</Trans>
                         </>
                       ))
+                      .with(RecipientRole.ASSISTANT, () => (
+                        <>
+                          <UserIcon className="mr-1 h-3 w-3" />
+                          <Trans>Assisted</Trans>
+                        </>
+                      ))
                       .exhaustive()}
                   </Badge>
                 )}

apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx

@@ -71,7 +71,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
 
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
-  const isRecipient = document?.Recipient.find((recipient) => recipient.email === user.email);
+  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
   let canAccessDocument = true;
 
   if (team && !isRecipient && document?.userId !== user.id) {
@@ -125,12 +125,13 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     getFieldsForDocument({
       documentId,
       userId: user.id,
+      teamId: team?.id,
     }),
   ]);
 
   const documentWithRecipients = {
     ...document,
-    Recipient: recipients,
+    recipients,
   };
 
   return (

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -12,7 +12,7 @@ import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
-import type { TGetDocumentWithDetailsByIdResponse } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import type { TDocument } from '@documenso/lib/types/document';
 import { DocumentDistributionMethod, DocumentStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -35,7 +35,7 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditDocumentFormProps = {
   className?: string;
-  initialDocument: TGetDocumentWithDetailsByIdResponse;
+  initialDocument: TDocument;
   documentRootPath: string;
   isDocumentEnterprise: boolean;
 };
@@ -64,7 +64,6 @@ export const EditDocumentForm = ({
     trpc.document.getDocumentWithDetailsById.useQuery(
       {
         documentId: initialDocument.id,
-        teamId: team?.id,
       },
       {
         initialData: initialDocument,
@@ -72,15 +71,14 @@ export const EditDocumentForm = ({
       },
     );
 
-  const { Recipient: recipients, Field: fields } = document;
+  const { recipients, fields } = document;
 
-  const { mutateAsync: setSettingsForDocument } = trpc.document.setSettingsForDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.setSettingsForDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
       utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
-          teamId: team?.id,
         },
         (oldData) => ({ ...(oldData || initialDocument), ...newData }),
       );
@@ -94,7 +92,6 @@ export const EditDocumentForm = ({
         utils.document.getDocumentWithDetailsById.setData(
           {
             documentId: initialDocument.id,
-            teamId: team?.id,
           },
           (oldData) => ({ ...(oldData || initialDocument), ...newData, id: Number(newData.id) }),
         );
@@ -107,40 +104,20 @@ export const EditDocumentForm = ({
       utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
-          teamId: team?.id,
         },
-        (oldData) => ({ ...(oldData || initialDocument), Field: newFields }),
+        (oldData) => ({ ...(oldData || initialDocument), fields: newFields }),
       );
     },
   });
 
-  const { mutateAsync: updateTypedSignature } =
+  const { mutateAsync: setRecipients } = trpc.recipient.setDocumentRecipients.useMutation({
-    trpc.document.updateTypedSignatureSettings.useMutation({
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      onSuccess: (newData) => {
-        utils.document.getDocumentWithDetailsById.setData(
-          {
-            documentId: initialDocument.id,
-            teamId: team?.id,
-          },
-          (oldData) => ({
-            ...(oldData || initialDocument),
-            ...newData,
-            id: Number(newData.id),
-          }),
-        );
-      },
-    });
-
-  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: ({ recipients: newRecipients }) => {
       utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
-          teamId: team?.id,
         },
-        (oldData) => ({ ...(oldData || initialDocument), Recipient: newRecipients }),
+        (oldData) => ({ ...(oldData || initialDocument), recipients: newRecipients }),
       );
     },
   });
@@ -151,7 +128,6 @@ export const EditDocumentForm = ({
       utils.document.getDocumentWithDetailsById.setData(
         {
           documentId: initialDocument.id,
-          teamId: team?.id,
         },
         (oldData) => ({ ...(oldData || initialDocument), ...newData }),
       );
@@ -205,9 +181,8 @@ export const EditDocumentForm = ({
     try {
       const { timezone, dateFormat, redirectUrl, language } = data.meta;
 
-      await setSettingsForDocument({
+      await updateDocument({
         documentId: document.id,
-        teamId: team?.id,
         data: {
           title: data.title,
           externalId: data.externalId || null,
@@ -246,10 +221,9 @@ export const EditDocumentForm = ({
           signingOrder: data.signingOrder,
         }),
 
-        addSigners({
+        setRecipients({
           documentId: document.id,
-          teamId: team?.id,
+          recipients: data.signers.map((signer) => ({
-          signers: data.signers.map((signer) => ({
             ...signer,
             // Explicitly set to null to indicate we want to remove auth if required.
             actionAuth: signer.actionAuth || null,
@@ -279,9 +253,12 @@ export const EditDocumentForm = ({
         fields: data.fields,
       });
 
-      await updateTypedSignature({
+      await updateDocument({
         documentId: document.id,
+
+        meta: {
           typedSignatureEnabled: data.typedSignatureEnabled,
+        },
       });
 
       // Clear all field data from localStorage
@@ -313,7 +290,6 @@ export const EditDocumentForm = ({
     try {
       await sendDocument({
         documentId: document.id,
-        teamId: team?.id,
         meta: {
           subject,
           message,

apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx

@@ -52,7 +52,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
-  const isRecipient = document?.Recipient.find((recipient) => recipient.email === user.email);
+  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
   let canAccessDocument = true;
 
   if (!isRecipient && document?.userId !== user.id) {
@@ -78,7 +78,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     redirect(`${documentRootPath}/${documentId}`);
   }
 
-  const { documentMeta, Recipient: recipients } = document;
+  const { documentMeta, recipients } = document;
 
   if (documentMeta?.password) {
     const key = DOCUMENSO_ENCRYPTION_KEY;

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx

@@ -37,15 +37,14 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isInitialLoading, isLoadingError } =
+  const { data, isLoading, isLoadingError } = trpc.document.findDocumentAuditLogs.useQuery(
-    trpc.document.findDocumentAuditLogs.useQuery(
     {
       documentId,
       page: parsedSearchParams.page,
       perPage: parsedSearchParams.perPage,
     },
     {
-        keepPreviousData: true,
+      placeholderData: (previousData) => previousData,
     },
   );
 
@@ -132,7 +131,7 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
         enable: isLoadingError,
       }}
       skeleton={{
-        enable: isLoading && isInitialLoading,
+        enable: isLoading,
         rows: 3,
         component: (
           <>

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx

@@ -77,9 +77,9 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     },
     {
       description: msg`Created by`,
-      value: document.User.name
+      value: document.user.name
-        ? `${document.User.name} (${document.User.email})`
+        ? `${document.user.name} (${document.user.email})`
-        : document.User.email,
+        : document.user.email,
     },
     {
       description: msg`Date created`,

apps/web/src/app/(dashboard)/documents/[id]/logs/download-audit-log-button.tsx

@@ -15,20 +15,16 @@ export type DownloadAuditLogButtonProps = {
   documentId: number;
 };
 
-export const DownloadAuditLogButton = ({
+export const DownloadAuditLogButton = ({ className, documentId }: DownloadAuditLogButtonProps) => {
-  className,
-  teamId,
-  documentId,
-}: DownloadAuditLogButtonProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const { mutateAsync: downloadAuditLogs, isLoading } =
+  const { mutateAsync: downloadAuditLogs, isPending } =
     trpc.document.downloadAuditLogs.useMutation();
 
   const onDownloadAuditLogsClick = async () => {
     try {
-      const { url } = await downloadAuditLogs({ teamId, documentId });
+      const { url } = await downloadAuditLogs({ documentId });
 
       const iframe = Object.assign(document.createElement('iframe'), {
         src: url,
@@ -74,10 +70,10 @@ export const DownloadAuditLogButton = ({
   return (
     <Button
       className={cn('w-full sm:w-auto', className)}
-      loading={isLoading}
+      loading={isPending}
       onClick={() => void onDownloadAuditLogsClick()}
     >
-      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
+      {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}
       <Trans>Download Audit Logs</Trans>
     </Button>
   );

apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx

@@ -26,12 +26,12 @@ export const DownloadCertificateButton = ({
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const { mutateAsync: downloadCertificate, isLoading } =
+  const { mutateAsync: downloadCertificate, isPending } =
     trpc.document.downloadCertificate.useMutation();
 
   const onDownloadCertificatesClick = async () => {
     try {
-      const { url } = await downloadCertificate({ documentId, teamId });
+      const { url } = await downloadCertificate({ documentId });
 
       const iframe = Object.assign(document.createElement('iframe'), {
         src: url,
@@ -77,12 +77,12 @@ export const DownloadCertificateButton = ({
   return (
     <Button
       className={cn('w-full sm:w-auto', className)}
-      loading={isLoading}
+      loading={isPending}
       variant="outline"
       disabled={documentStatus !== DocumentStatus.COMPLETED}
       onClick={() => void onDownloadCertificatesClick()}
     >
-      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
+      {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}
       <Trans>Download Certificate</Trans>
     </Button>
   );

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -91,7 +91,7 @@ export const ResendDocumentActionItem = ({
 
   const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
     try {
-      await resendDocument({ documentId: document.id, recipients, teamId: team?.id });
+      await resendDocument({ documentId: document.id, recipients });
 
       toast({
         title: _(msg`Document re-sent`),

apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx

@@ -12,15 +12,14 @@ import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
-import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DataTableActionButtonProps = {
   row: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
+    recipients: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
   team?: Pick<Team, 'id' | 'url'>;
@@ -35,9 +34,9 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
     return null;
   }
 
-  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+  const recipient = row.recipients.find((recipient) => recipient.email === session.user.email);
 
-  const isOwner = row.User.id === session.user.id;
+  const isOwner = row.user.id === session.user.id;
   const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
@@ -50,18 +49,20 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
 
   const onDownloadClick = async () => {
     try {
-      let document: DocumentWithData | null = null;
+      const document = !recipient
-
+        ? await trpcClient.document.getDocumentById.query(
-      if (!recipient) {
+            {
-        document = await trpcClient.document.getDocumentById.query({
               documentId: row.id,
-          teamId: team?.id,
+            },
-        });
+            {
-      } else {
+              context: {
-        document = await trpcClient.document.getDocumentByToken.query({
+                teamId: team?.id?.toString(),
+              },
+            },
+          )
+        : await trpcClient.document.getDocumentByToken.query({
             token: recipient.token,
           });
-      }
 
       const documentData = document?.documentData;
 

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -23,9 +23,8 @@ import { useSession } from 'next-auth/react';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { DocumentStatus, RecipientRole } from '@documenso/prisma/client';
 import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
-import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { DocumentStatus, RecipientRole } from '@documenso/prisma/client';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@@ -46,8 +45,8 @@ import { MoveDocumentDialog } from './move-document-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
+    recipients: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
   team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
@@ -66,9 +65,9 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
     return null;
   }
 
-  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+  const recipient = row.recipients.find((recipient) => recipient.email === session.user.email);
 
-  const isOwner = row.User.id === session.user.id;
+  const isOwner = row.user.id === session.user.id;
   // const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
@@ -81,18 +80,13 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
   const onDownloadClick = async () => {
     try {
-      let document: DocumentWithData | null = null;
+      const document = !recipient
-
+        ? await trpcClient.document.getDocumentById.query({
-      if (!recipient) {
-        document = await trpcClient.document.getDocumentById.query({
             documentId: row.id,
-          teamId: team?.id,
+          })
-        });
+        : await trpcClient.document.getDocumentByToken.query({
-      } else {
-        document = await trpcClient.document.getDocumentByToken.query({
             token: recipient.token,
           });
-      }
 
       const documentData = document?.documentData;
 
@@ -110,7 +104,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
     }
   };
 
-  const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
+  const nonSignedRecipients = row.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
     <DropdownMenu>
@@ -168,7 +162,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         </DropdownMenuItem>
 
         {/* We don't want to allow teams moving documents across at the moment. */}
-        {!team && (
+        {!team && !row.teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
             <Trans>Move to Team</Trans>
@@ -195,7 +189,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
         {canManageDocument && (
           <DocumentRecipientLinkCopyDialog
-            recipients={row.Recipient}
+            recipients={row.recipients}
             trigger={
               <DropdownMenuItem disabled={!isPending} asChild onSelect={(e) => e.preventDefault()}>
                 <div>
@@ -239,14 +233,12 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         onOpenChange={setMoveDialogOpen}
       />
 
-      {isDuplicateDialogOpen && (
       <DuplicateDocumentDialog
         id={row.id}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
         team={team}
       />
-      )}
     </DropdownMenu>
   );
 };

apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx

@@ -25,7 +25,7 @@ export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) =>
 
   const senderIds = parseToIntegerArray(searchParams?.get('senderIds') ?? '');
 
-  const { data, isInitialLoading } = trpc.team.getTeamMembers.useQuery({
+  const { data, isLoading } = trpc.team.getTeamMembers.useQuery({
     teamId,
   });
 
@@ -61,7 +61,7 @@ export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) =>
       }
       enableClearAllButton={true}
       inputPlaceholder={msg`Search`}
-      loading={!isMounted || isInitialLoading}
+      loading={!isMounted || isLoading}
       options={comboBoxOptions}
       selectedValues={senderIds}
       onChange={onChange}

apps/web/src/app/(dashboard)/documents/data-table-title.tsx

@@ -10,9 +10,9 @@ import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 
 export type DataTableTitleProps = {
   row: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
     team: Pick<Team, 'url'> | null;
-    Recipient: Recipient[];
+    recipients: Recipient[];
   };
   teamUrl?: string;
 };
@@ -24,9 +24,9 @@ export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
     return null;
   }
 
-  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+  const recipient = row.recipients.find((recipient) => recipient.email === session.user.email);
 
-  const isOwner = row.User.id === session.user.id;
+  const isOwner = row.user.id === session.user.id;
   const isRecipient = !!recipient;
   const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
 

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -9,9 +9,9 @@ import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { TFindDocumentsResponse } from '@documenso/lib/server-only/document/find-documents';
 import type { Team } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -57,14 +57,14 @@ export const DocumentsDataTable = ({
       {
         id: 'sender',
         header: _(msg`Sender`),
-        cell: ({ row }) => row.original.User.name ?? row.original.User.email,
+        cell: ({ row }) => row.original.user.name ?? row.original.user.email,
       },
       {
         header: _(msg`Recipient`),
         accessorKey: 'recipient',
         cell: ({ row }) => (
           <StackAvatarsWithTooltip
-            recipients={row.original.Recipient}
+            recipients={row.original.recipients}
             documentStatus={row.original.status}
           />
         ),

apps/web/src/app/(dashboard)/documents/delete-document-dialog.tsx

@@ -38,7 +38,6 @@ export const DeleteDocumentDialog = ({
   onOpenChange,
   status,
   documentTitle,
-  teamId,
   canManageDocument,
 }: DeleteDocumentDialogProps) => {
   const router = useRouter();
@@ -52,7 +51,7 @@ export const DeleteDocumentDialog = ({
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
-  const { mutateAsync: deleteDocument, isLoading } = trpcReact.document.deleteDocument.useMutation({
+  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
     onSuccess: () => {
       router.refresh();
       void refreshLimits();
@@ -76,7 +75,7 @@ export const DeleteDocumentDialog = ({
 
   const onDelete = async () => {
     try {
-      await deleteDocument({ documentId: id, teamId });
+      await deleteDocument({ documentId: id });
     } catch {
       toast({
         title: _(msg`Something went wrong`),
@@ -93,7 +92,7 @@ export const DeleteDocumentDialog = ({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -194,7 +193,7 @@ export const DeleteDocumentDialog = ({
 
           <Button
             type="button"
-            loading={isLoading}
+            loading={isPending}
             onClick={onDelete}
             disabled={!isDeleteEnabled && canManageDocument}
             variant="destructive"

apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx

@@ -37,7 +37,6 @@ export const DuplicateDocumentDialog = ({
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
     documentId: id,
-    teamId: team?.id,
   });
 
   const documentData = document?.documentData
@@ -49,10 +48,10 @@ export const DuplicateDocumentDialog = ({
 
   const documentsPath = formatDocumentsPath(team?.url);
 
-  const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
+  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({
-      onSuccess: (newId) => {
+      onSuccess: ({ documentId }) => {
-        router.push(`${documentsPath}/${newId}/edit`);
+        router.push(`${documentsPath}/${documentId}/edit`);
 
         toast({
           title: _(msg`Document Duplicated`),
@@ -66,7 +65,7 @@ export const DuplicateDocumentDialog = ({
 
   const onDuplicate = async () => {
     try {
-      await duplicateDocument({ documentId: id, teamId: team?.id });
+      await duplicateDocument({ documentId: id });
     } catch {
       toast({
         title: _(msg`Something went wrong`),

apps/web/src/app/(dashboard)/documents/move-document-dialog.tsx

@@ -40,9 +40,9 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
 
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
-  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+  const { data: teams, isPending: isLoadingTeams } = trpc.team.getTeams.useQuery();
 
-  const { mutateAsync: moveDocument, isLoading } = trpc.document.moveDocumentToTeam.useMutation({
+  const { mutateAsync: moveDocument, isPending } = trpc.document.moveDocumentToTeam.useMutation({
     onSuccess: () => {
       router.refresh();
       toast({
@@ -119,8 +119,8 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
           <Button variant="secondary" onClick={() => onOpenChange(false)}>
             <Trans>Cancel</Trans>
           </Button>
-          <Button onClick={onMove} loading={isLoading} disabled={!selectedTeamId || isLoading}>
+          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
-            {isLoading ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
+            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -8,16 +8,16 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
@@ -76,7 +76,6 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
       const { id } = await createDocument({
         title: file.name,
         documentDataId,
-        teamId: team?.id,
         timezone: userTimezone,
       });
 
@@ -100,25 +99,20 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
       console.error(err);
 
-      if (error.code === 'INVALID_DOCUMENT_FILE') {
+      const errorMessage = match(error.code)
-        toast({
+        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs`)
-          title: _(msg`Invalid file`),
+        .with(
-          description: _(msg`You cannot upload encrypted PDFs`),
+          AppErrorCode.LIMIT_EXCEEDED,
-          variant: 'destructive',
+          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
-        });
+        )
-      } else if (err instanceof TRPCClientError) {
+        .otherwise(() => msg`An error occurred while uploading your document.`);
+
       toast({
         title: _(msg`Error`),
-          description: err.message,
+        description: _(errorMessage),
         variant: 'destructive',
+        duration: 7500,
       });
-      } else {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`An error occurred while uploading your document.`),
-          variant: 'destructive',
-        });
-      }
     } finally {
       setIsLoading(false);
     }

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -36,7 +36,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
 
   const [enteredEmail, setEnteredEmail] = useState<string>('');
 
-  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+  const { mutateAsync: deleteAccount, isPending: isDeletingAccount } =
     trpc.profile.deleteAccount.useMutation();
 
   const onDeleteAccount = async () => {

apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx

@@ -5,7 +5,6 @@ import { useEffect, useMemo, useState } from 'react';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import type {
   Team,
   TeamProfile,
@@ -15,6 +14,7 @@ import type {
 } from '@documenso/prisma/client';
 import { TemplateType } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
+import type { FindTemplateRow } from '@documenso/trpc/server/template-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Switch } from '@documenso/ui/primitives/switch';
@@ -61,13 +61,12 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
   const { data } = trpc.template.findTemplates.useQuery({
     perPage: 100,
-    teamId: team?.id,
   });
 
-  const { mutateAsync: updateUserProfile, isLoading: isUpdatingUserProfile } =
+  const { mutateAsync: updateUserProfile, isPending: isUpdatingUserProfile } =
     trpc.profile.updatePublicProfile.useMutation();
 
-  const { mutateAsync: updateTeamProfile, isLoading: isUpdatingTeamProfile } =
+  const { mutateAsync: updateTeamProfile, isPending: isUpdatingTeamProfile } =
     trpc.team.updateTeamPublicProfile.useMutation();
 
   const isUpdating = isUpdatingUserProfile || isUpdatingTeamProfile;

apps/web/src/app/(dashboard)/settings/public-profile/public-templates-data-table.tsx

@@ -7,11 +7,11 @@ import { useLingui } from '@lingui/react';
 import { EditIcon, FileIcon, LinkIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import type { TemplateDirectLink } from '@documenso/prisma/client';
 import { TemplateType } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
+import type { FindTemplateRow } from '@documenso/trpc/server/template-router/schema';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,15 +23,12 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ManagePublicTemplateDialog } from '~/components/templates/manage-public-template-dialog';
-import { useOptionalCurrentTeam } from '~/providers/team';
 
 type DirectTemplate = FindTemplateRow & {
   directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
 };
 
 export const PublicTemplatesDataTable = () => {
-  const team = useOptionalCurrentTeam();
-
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -42,12 +39,10 @@ export const PublicTemplatesDataTable = () => {
     templateId: number;
   } | null>(null);
 
-  const { data, isInitialLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery(
+  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery(
+    {},
     {
-      teamId: team?.id,
+      placeholderData: (previousData) => previousData,
-    },
-    {
-      keepPreviousData: true,
     },
   );
 
@@ -85,7 +80,7 @@ export const PublicTemplatesDataTable = () => {
         {/* Loading and error handling states. */}
         {publicDirectTemplates.length === 0 && (
           <>
-            {isInitialLoading &&
+            {isLoading &&
               Array(3)
                 .fill(0)
                 .map((_, index) => (
@@ -120,7 +115,7 @@ export const PublicTemplatesDataTable = () => {
               </div>
             )}
 
-            {!isInitialLoading && (
+            {!isLoading && (
               <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
                 <Trans>No public profile templates found</Trans>
                 <ManagePublicTemplateDialog

apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx

@@ -35,14 +35,13 @@ export const UserSecurityActivityDataTable = () => {
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isInitialLoading, isLoadingError } =
+  const { data, isLoading, isLoadingError } = trpc.profile.findUserSecurityAuditLogs.useQuery(
-    trpc.profile.findUserSecurityAuditLogs.useQuery(
     {
       page: parsedSearchParams.page,
       perPage: parsedSearchParams.perPage,
     },
     {
-        keepPreviousData: true,
+      placeholderData: (previousData) => previousData,
     },
   );
 
@@ -134,7 +133,7 @@ export const UserSecurityActivityDataTable = () => {
         enable: isLoadingError,
       }}
       skeleton={{
-        enable: isLoading && isInitialLoading,
+        enable: isLoading,
         rows: 3,
         component: (
           <>

apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx

@@ -65,7 +65,7 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
     },
   });
 
-  const { mutateAsync: createPasskeyRegistrationOptions, isLoading } =
+  const { mutateAsync: createPasskeyRegistrationOptions, isPending } =
     trpc.auth.createPasskeyRegistrationOptions.useMutation();
 
   const { mutateAsync: createPasskey } = trpc.auth.createPasskey.useMutation();
@@ -141,7 +141,7 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
     >
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
         {trigger ?? (
-          <Button variant="secondary" loading={isLoading}>
+          <Button variant="secondary" loading={isPending}>
             <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />
             <Trans>Add passkey</Trans>
           </Button>

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx

@@ -60,7 +60,7 @@ export const UserPasskeysDataTableActions = ({
     },
   });
 
-  const { mutateAsync: updatePasskey, isLoading: isUpdatingPasskey } =
+  const { mutateAsync: updatePasskey, isPending: isUpdatingPasskey } =
     trpc.auth.updatePasskey.useMutation({
       onSuccess: () => {
         toast({
@@ -80,7 +80,7 @@ export const UserPasskeysDataTableActions = ({
       },
     });
 
-  const { mutateAsync: deletePasskey, isLoading: isDeletingPasskey } =
+  const { mutateAsync: deletePasskey, isPending: isDeletingPasskey } =
     trpc.auth.deletePasskey.useMutation({
       onSuccess: () => {
         toast({

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx

@@ -29,13 +29,13 @@ export const UserPasskeysDataTable = () => {
 
   const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
-  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.auth.findPasskeys.useQuery(
+  const { data, isLoading, isLoadingError } = trpc.auth.findPasskeys.useQuery(
     {
       page: parsedSearchParams.page,
       perPage: parsedSearchParams.perPage,
     },
     {
-      keepPreviousData: true,
+      placeholderData: (previousData) => previousData,
     },
   );
 
@@ -100,7 +100,7 @@ export const UserPasskeysDataTable = () => {
         enable: isLoadingError,
       }}
       skeleton={{
-        enable: isLoading && isInitialLoading,
+        enable: isLoading,
         rows: 3,
         component: (
           <>

apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx

@@ -17,7 +17,7 @@ export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButto
 
   const {
     mutateAsync: acceptTeamInvitation,
-    isLoading,
+    isPending,
     isSuccess,
   } = trpc.team.acceptTeamInvitation.useMutation({
     onSuccess: () => {
@@ -40,8 +40,8 @@ export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButto
   return (
     <Button
       onClick={async () => acceptTeamInvitation({ teamId })}
-      loading={isLoading}
+      loading={isPending}
-      disabled={isLoading || isSuccess}
+      disabled={isPending || isSuccess}
     >
       <Trans>Accept</Trans>
     </Button>

apps/web/src/app/(dashboard)/settings/teams/decline-team-invitation-button.tsx

@@ -17,7 +17,7 @@ export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationBut
 
   const {
     mutateAsync: declineTeamInvitation,
-    isLoading,
+    isPending,
     isSuccess,
   } = trpc.team.declineTeamInvitation.useMutation({
     onSuccess: () => {
@@ -40,8 +40,8 @@ export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationBut
   return (
     <Button
       onClick={async () => declineTeamInvitation({ teamId })}
-      loading={isLoading}
+      loading={isPending}
-      disabled={isLoading || isSuccess}
+      disabled={isPending || isSuccess}
       variant="ghost"
     >
       <Trans>Decline</Trans>

apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx

@@ -30,7 +30,7 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+  const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
     trpc.team.deleteTeamEmail.useMutation({
       onSuccess: () => {
         toast({

apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx

@@ -23,11 +23,11 @@ import { AcceptTeamInvitationButton } from './accept-team-invitation-button';
 import { DeclineTeamInvitationButton } from './decline-team-invitation-button';
 
 export const TeamInvitations = () => {
-  const { data, isInitialLoading } = trpc.team.getTeamInvitations.useQuery();
+  const { data, isLoading } = trpc.team.getTeamInvitations.useQuery();
 
   return (
     <AnimatePresence>
-      {data && data.length > 0 && !isInitialLoading && (
+      {data && data.length > 0 && !isLoading && (
         <AnimateGenericFadeInOut>
           <Alert variant="secondary">
             <div className="flex h-full flex-row items-center p-2">

apps/web/src/app/(dashboard)/templates/[id]/edit/edit-template.tsx

@@ -12,7 +12,7 @@ import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
-import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import type { TTemplate } from '@documenso/lib/types/template';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -32,7 +32,7 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditTemplateFormProps = {
   className?: string;
-  initialTemplate: TemplateWithDetails;
+  initialTemplate: TTemplate;
   isEnterprise: boolean;
   templateRootPath: string;
 };
@@ -62,7 +62,6 @@ export const EditTemplateForm = ({
   const { data: template, refetch: refetchTemplate } = trpc.template.getTemplateById.useQuery(
     {
       templateId: initialTemplate.id,
-      teamId: initialTemplate.teamId || undefined,
     },
     {
       initialData: initialTemplate,
@@ -70,7 +69,7 @@ export const EditTemplateForm = ({
     },
   );
 
-  const { Recipient: recipients, Field: fields, templateDocumentData } = template;
+  const { recipients, fields, templateDocumentData } = template;
 
   const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
     settings: {
@@ -104,19 +103,6 @@ export const EditTemplateForm = ({
     },
   });
 
-  const { mutateAsync: setSigningOrderForTemplate } =
-    trpc.template.setSigningOrderForTemplate.useMutation({
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      onSuccess: (newData) => {
-        utils.template.getTemplateById.setData(
-          {
-            templateId: initialTemplate.id,
-          },
-          (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
-        );
-      },
-    });
-
   const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
@@ -129,7 +115,7 @@ export const EditTemplateForm = ({
     },
   });
 
-  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation({
+  const { mutateAsync: setRecipients } = trpc.recipient.setTemplateRecipients.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
       utils.template.getTemplateById.setData(
@@ -141,31 +127,14 @@ export const EditTemplateForm = ({
     },
   });
 
-  const { mutateAsync: updateTypedSignature } =
-    trpc.template.updateTemplateTypedSignatureSettings.useMutation({
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      onSuccess: (newData) => {
-        utils.template.getTemplateById.setData(
-          {
-            templateId: initialTemplate.id,
-          },
-          (oldData) => ({
-            ...(oldData || initialTemplate),
-            ...newData,
-            id: Number(newData.id),
-          }),
-        );
-      },
-    });
-
   const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
     try {
       await updateTemplateSettings({
         templateId: template.id,
-        teamId: team?.id,
         data: {
           title: data.title,
           externalId: data.externalId || null,
+          visibility: data.visibility,
           globalAccessAuth: data.globalAccessAuth ?? null,
           globalActionAuth: data.globalActionAuth ?? null,
         },
@@ -195,16 +164,16 @@ export const EditTemplateForm = ({
   ) => {
     try {
       await Promise.all([
-        setSigningOrderForTemplate({
+        updateTemplateSettings({
           templateId: template.id,
-          teamId: team?.id,
+          meta: {
             signingOrder: data.signingOrder,
+          },
         }),
 
-        addTemplateSigners({
+        setRecipients({
           templateId: template.id,
-          teamId: team?.id,
+          recipients: data.signers,
-          signers: data.signers,
         }),
       ]);
 
@@ -228,10 +197,11 @@ export const EditTemplateForm = ({
         fields: data.fields,
       });
 
-      await updateTypedSignature({
+      await updateTemplateSettings({
         templateId: template.id,
-        teamId: team?.id,
+        meta: {
           typedSignatureEnabled: data.typedSignatureEnabled,
+        },
       });
 
       // Clear all field data from localStorage
@@ -296,6 +266,7 @@ export const EditTemplateForm = ({
             <AddTemplateSettingsFormPartial
               key={recipients.length}
               template={template}
+              currentTeamMemberRole={team?.currentTeamMember?.role}
               documentFlow={documentFlow.settings}
               recipients={recipients}
               fields={fields}

apps/web/src/app/(dashboard)/templates/[id]/template-direct-link-dialog-wrapper.tsx

@@ -11,7 +11,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import { TemplateDirectLinkDialog } from '../template-direct-link-dialog';
 
 export type TemplateDirectLinkDialogWrapperProps = {
-  template: Template & { directLink?: TemplateDirectLink | null; Recipient: Recipient[] };
+  template: Template & { directLink?: TemplateDirectLink | null; recipients: Recipient[] };
 };
 
 export const TemplateDirectLinkDialogWrapper = ({

apps/web/src/app/(dashboard)/templates/[id]/template-page-view-documents-table.tsx

@@ -69,11 +69,9 @@ export const TemplatePageViewDocumentsTable = ({
     Object.fromEntries(searchParams ?? []),
   );
 
-  const { data, isLoading, isInitialLoading, isLoadingError } =
+  const { data, isLoading, isLoadingError } = trpc.document.findDocuments.useQuery(
-    trpc.document.findDocuments.useQuery(
     {
       templateId,
-        teamId: team?.id,
       page: parsedSearchParams.page,
       perPage: parsedSearchParams.perPage,
       query: parsedSearchParams.query,
@@ -81,7 +79,7 @@ export const TemplatePageViewDocumentsTable = ({
       status: parsedSearchParams.status,
     },
     {
-        keepPreviousData: true,
+      placeholderData: (previousData) => previousData,
     },
   );
 
@@ -117,7 +115,7 @@ export const TemplatePageViewDocumentsTable = ({
         accessorKey: 'recipient',
         cell: ({ row }) => (
           <StackAvatarsWithTooltip
-            recipients={row.original.Recipient}
+            recipients={row.original.recipients}
             documentStatus={row.original.status}
           />
         ),
@@ -242,7 +240,7 @@ export const TemplatePageViewDocumentsTable = ({
           enable: isLoadingError,
         }}
         skeleton={{
-          enable: isLoading && isInitialLoading,
+          enable: isLoading,
           rows: 3,
           component: (
             <>

apps/web/src/app/(dashboard)/templates/[id]/template-page-view-information.tsx

@@ -12,7 +12,7 @@ import type { Template, User } from '@documenso/prisma/client';
 export type TemplatePageViewInformationProps = {
   userId: number;
   template: Template & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
+    user: Pick<User, 'id' | 'name' | 'email'>;
   };
 };
 
@@ -28,7 +28,8 @@ export const TemplatePageViewInformation = ({
     return [
       {
         description: msg`Uploaded by`,
-        value: userId === template.userId ? _(msg`You`) : template.User.name ?? template.User.email,
+        value:
+          userId === template.userId ? _(msg`You`) : (template.user.name ?? template.user.email),
       },
       {
         description: msg`Created`,

apps/web/src/app/(dashboard)/templates/[id]/template-page-view-recent-activity.tsx

@@ -20,12 +20,10 @@ export type TemplatePageViewRecentActivityProps = {
 
 export const TemplatePageViewRecentActivity = ({
   templateId,
-  teamId,
   documentRootPath,
 }: TemplatePageViewRecentActivityProps) => {
   const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocuments.useQuery({
     templateId,
-    teamId,
     orderByColumn: 'createdAt',
     orderByDirection: 'asc',
     perPage: 5,
@@ -125,7 +123,7 @@ export const TemplatePageViewRecentActivity = ({
                   {match(document.source)
                     .with(DocumentSource.DOCUMENT, DocumentSource.TEMPLATE, () => (
                       <Trans>
-                        Document created by <span className="font-bold">{document.User.name}</span>
+                        Document created by <span className="font-bold">{document.user.name}</span>
                       </Trans>
                     ))
                     .with(DocumentSource.TEMPLATE_DIRECT_LINK, () => (

apps/web/src/app/(dashboard)/templates/[id]/template-page-view-recipients.tsx

@@ -10,7 +10,7 @@ import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 
 export type TemplatePageViewRecipientsProps = {
   template: Template & {
-    Recipient: Recipient[];
+    recipients: Recipient[];
   };
   templateRootPath: string;
 };
@@ -21,7 +21,7 @@ export const TemplatePageViewRecipients = ({
 }: TemplatePageViewRecipientsProps) => {
   const { _ } = useLingui();
 
-  const recipients = template.Recipient;
+  const recipients = template.recipients;
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -14,6 +14,7 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { TemplateType } from '~/components/formatter/template-type';
+import { TemplateBulkSendDialog } from '~/components/templates/template-bulk-send-dialog';
 
 import { DataTableActionDropdown } from '../data-table-action-dropdown';
 import { TemplateDirectLinkBadge } from '../template-direct-link-badge';
@@ -54,10 +55,10 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
     redirect(templateRootPath);
   }
 
-  const { templateDocumentData, Field, Recipient: recipients, templateMeta } = template;
+  const { templateDocumentData, fields, recipients, templateMeta } = template;
 
   // Remap to fit the DocumentReadOnlyFields component.
-  const readOnlyFields = Field.map((field) => {
+  const readOnlyFields = fields.map((field) => {
     const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
       name: '',
       email: '',
@@ -66,8 +67,8 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
 
     return {
       ...field,
-      Recipient: recipient,
+      recipient,
-      Signature: null,
+      signature: null,
     };
   });
 
@@ -111,6 +112,8 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
         <div className="mt-2 flex flex-row space-x-4 sm:mt-0 sm:self-end">
           <TemplateDirectLinkDialogWrapper template={template} />
 
+          <TemplateBulkSendDialog templateId={template.id} recipients={template.recipients} />
+
           <Button className="w-full" asChild>
             <Link href={`${templateRootPath}/${template.id}/edit`}>
               <LucideEdit className="mr-1.5 h-3.5 w-3.5" />
@@ -165,7 +168,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
                 <UseTemplateDialog
                   templateId={template.id}
                   templateSigningOrder={template.templateMeta?.signingOrder}
-                  recipients={template.Recipient}
+                  recipients={template.recipients}
                   documentRootPath={documentRootPath}
                   trigger={
                     <Button className="w-full">

apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import Link from 'next/link';
 
 import { Trans } from '@lingui/macro';
-import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2 } from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2, Upload } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
 import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
@@ -17,6 +17,8 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
+import { TemplateBulkSendDialog } from '~/components/templates/template-bulk-send-dialog';
+
 import { DeleteTemplateDialog } from './delete-template-dialog';
 import { DuplicateTemplateDialog } from './duplicate-template-dialog';
 import { MoveTemplateDialog } from './move-template-dialog';
@@ -25,7 +27,7 @@ import { TemplateDirectLinkDialog } from './template-direct-link-dialog';
 export type DataTableActionDropdownProps = {
   row: Template & {
     directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-    Recipient: Recipient[];
+    recipients: Recipient[];
   };
   templateRootPath: string;
   teamId?: number;
@@ -79,13 +81,24 @@ export const DataTableActionDropdown = ({
           <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
-        {!teamId && (
+        {!teamId && !row.teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
             <Trans>Move to Team</Trans>
           </DropdownMenuItem>
         )}
 
+        <TemplateBulkSendDialog
+          templateId={row.id}
+          recipients={row.recipients}
+          trigger={
+            <div className="hover:bg-accent hover:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors">
+              <Upload className="mr-2 h-4 w-4" />
+              <Trans>Bulk Send via CSV</Trans>
+            </div>
+          }
+        />
+
         <DropdownMenuItem
           disabled={!isOwner && !isTeamTemplate}
           onClick={() => setDeleteDialogOpen(true)}

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -10,7 +10,7 @@ import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
+import type { FindTemplateRow } from '@documenso/trpc/server/template-router/schema';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -146,7 +146,7 @@ export const TemplatesDataTable = ({
                 templateId={row.original.id}
                 templateSigningOrder={row.original.templateMeta?.signingOrder}
                 documentDistributionMethod={row.original.templateMeta?.distributionMethod}
-                recipients={row.original.Recipient}
+                recipients={row.original.recipients}
                 documentRootPath={documentRootPath}
               />
 

apps/web/src/app/(dashboard)/templates/delete-template-dialog.tsx

@@ -22,18 +22,13 @@ type DeleteTemplateDialogProps = {
   onOpenChange: (_open: boolean) => void;
 };
 
-export const DeleteTemplateDialog = ({
+export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateDialogProps) => {
-  id,
-  teamId,
-  open,
-  onOpenChange,
-}: DeleteTemplateDialogProps) => {
   const router = useRouter();
 
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: deleteTemplate, isLoading } = trpcReact.template.deleteTemplate.useMutation({
+  const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
     onSuccess: () => {
       router.refresh();
 
@@ -56,7 +51,7 @@ export const DeleteTemplateDialog = ({
   });
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -75,7 +70,7 @@ export const DeleteTemplateDialog = ({
           <Button
             type="button"
             variant="secondary"
-            disabled={isLoading}
+            disabled={isPending}
             onClick={() => onOpenChange(false)}
           >
             <Trans>Cancel</Trans>
@@ -84,8 +79,8 @@ export const DeleteTemplateDialog = ({
           <Button
             type="button"
             variant="destructive"
-            loading={isLoading}
+            loading={isPending}
-            onClick={async () => deleteTemplate({ templateId: id, teamId })}
+            onClick={async () => deleteTemplate({ templateId: id })}
           >
             <Trans>Delete</Trans>
           </Button>

apps/web/src/app/(dashboard)/templates/duplicate-template-dialog.tsx

@@ -24,7 +24,6 @@ type DuplicateTemplateDialogProps = {
 
 export const DuplicateTemplateDialog = ({
   id,
-  teamId,
   open,
   onOpenChange,
 }: DuplicateTemplateDialogProps) => {
@@ -33,7 +32,7 @@ export const DuplicateTemplateDialog = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const { mutateAsync: duplicateTemplate, isLoading } =
+  const { mutateAsync: duplicateTemplate, isPending } =
     trpcReact.template.duplicateTemplate.useMutation({
       onSuccess: () => {
         router.refresh();
@@ -56,7 +55,7 @@ export const DuplicateTemplateDialog = ({
     });
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -71,7 +70,7 @@ export const DuplicateTemplateDialog = ({
         <DialogFooter>
           <Button
             type="button"
-            disabled={isLoading}
+            disabled={isPending}
             variant="secondary"
             onClick={() => onOpenChange(false)}
           >
@@ -80,11 +79,10 @@ export const DuplicateTemplateDialog = ({
 
           <Button
             type="button"
-            loading={isLoading}
+            loading={isPending}
             onClick={async () =>
               duplicateTemplate({
                 templateId: id,
-                teamId,
               })
             }
           >

apps/web/src/app/(dashboard)/templates/move-template-dialog.tsx

@@ -42,8 +42,8 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
 
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
-  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+  const { data: teams, isPending: isLoadingTeams } = trpc.team.getTeams.useQuery();
-  const { mutateAsync: moveTemplate, isLoading } = trpc.template.moveTemplateToTeam.useMutation({
+  const { mutateAsync: moveTemplate, isPending } = trpc.template.moveTemplateToTeam.useMutation({
     onSuccess: () => {
       router.refresh();
       toast({
@@ -130,8 +130,8 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
           <Button variant="secondary" onClick={() => onOpenChange(false)}>
             <Trans>Cancel</Trans>
           </Button>
-          <Button onClick={onMove} loading={isLoading} disabled={!selectedTeamId || isLoading}>
+          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
-            {isLoading ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
+            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -31,7 +31,7 @@ type NewTemplateDialogProps = {
   templateRootPath: string;
 };
 
-export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialogProps) => {
+export const NewTemplateDialog = ({ templateRootPath }: NewTemplateDialogProps) => {
   const router = useRouter();
 
   const { data: session } = useSession();
@@ -58,7 +58,6 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       });
 
       const { id } = await createTemplate({
-        teamId,
         title: file.name,
         templateDocumentDataId,
       });

apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx

@@ -46,12 +46,10 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 type TemplateDirectLinkDialogProps = {
   template: Template & {
     directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-    Recipient: Recipient[];
+    recipients: Recipient[];
   };
   open: boolean;
   onOpenChange: (_open: boolean) => void;
@@ -68,8 +66,6 @@ export const TemplateDirectLinkDialog = ({
   const { quota, remaining } = useLimits();
   const { _ } = useLingui();
 
-  const team = useOptionalCurrentTeam();
-
   const [, copy] = useCopyToClipboard();
   const router = useRouter();
 
@@ -81,13 +77,17 @@ export const TemplateDirectLinkDialog = ({
   );
 
   const validDirectTemplateRecipients = useMemo(
-    () => template.Recipient.filter((recipient) => recipient.role !== RecipientRole.CC),
+    () =>
-    [template.Recipient],
+      template.recipients.filter(
+        (recipient) =>
+          recipient.role !== RecipientRole.CC && recipient.role !== RecipientRole.ASSISTANT,
+      ),
+    [template.recipients],
   );
 
   const {
     mutateAsync: createTemplateDirectLink,
-    isLoading: isCreatingTemplateDirectLink,
+    isPending: isCreatingTemplateDirectLink,
     reset: resetCreateTemplateDirectLink,
   } = trpcReact.template.createTemplateDirectLink.useMutation({
     onSuccess: (data) => {
@@ -108,7 +108,7 @@ export const TemplateDirectLinkDialog = ({
     },
   });
 
-  const { mutateAsync: toggleTemplateDirectLink, isLoading: isTogglingTemplateAccess } =
+  const { mutateAsync: toggleTemplateDirectLink, isPending: isTogglingTemplateAccess } =
     trpcReact.template.toggleTemplateDirectLink.useMutation({
       onSuccess: (data) => {
         const enabledDescription = msg`Direct link signing has been enabled`;
@@ -131,7 +131,7 @@ export const TemplateDirectLinkDialog = ({
       },
     });
 
-  const { mutateAsync: deleteTemplateDirectLink, isLoading: isDeletingTemplateDirectLink } =
+  const { mutateAsync: deleteTemplateDirectLink, isPending: isDeletingTemplateDirectLink } =
     trpcReact.template.deleteTemplateDirectLink.useMutation({
       onSuccess: () => {
         onOpenChange(false);
@@ -174,7 +174,6 @@ export const TemplateDirectLinkDialog = ({
 
     await createTemplateDirectLink({
       templateId: template.id,
-      teamId: team?.id,
       directRecipientId: recipientId,
     });
   };
@@ -327,7 +326,7 @@ export const TemplateDirectLinkDialog = ({
                 </div>
 
                 {/* Prevent creating placeholder direct template recipient if the email already exists. */}
-                {!template.Recipient.some(
+                {!template.recipients.some(
                   (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
                 ) && (
                   <DialogFooter className="mx-auto">
@@ -345,7 +344,6 @@ export const TemplateDirectLinkDialog = ({
                         onClick={async () =>
                           createTemplateDirectLink({
                             templateId: template.id,
-                            teamId: team?.id,
                           })
                         }
                       >

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -47,8 +47,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 const ZAddRecipientsForNewDocumentSchema = z
   .object({
     distributeDocument: z.boolean(),
@@ -120,8 +118,6 @@ export function UseTemplateDialog({
 
   const [open, setOpen] = useState(false);
 
-  const team = useOptionalCurrentTeam();
-
   const form = useForm<TAddRecipientsForNewDocumentSchema>({
     resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
     defaultValues: {
@@ -163,7 +159,6 @@ export function UseTemplateDialog({
 
       const { id } = await createDocumentFromTemplate({
         templateId,
-        teamId: team?.id,
         recipients: data.recipients,
         distributeDocument: data.distributeDocument,
         customDocumentDataId,

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx

@@ -66,6 +66,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
   const { data: auditLogs } = await findDocumentAuditLogs({
     documentId: documentId,
     userId: document.userId,
+    teamId: document.teamId || undefined,
     perPage: 100_000,
   });
 
@@ -103,7 +104,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
             <span className="font-medium">{_(msg`Owner`)}</span>
 
             <span className="mt-1 block break-words">
-              {document.User.name} ({document.User.email})
+              {document.user.name} ({document.user.email})
             </span>
           </p>
 
@@ -139,7 +140,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
             <p className="font-medium">{_(msg`Recipients`)}</p>
 
             <ul className="mt-1 list-inside list-disc">
-              {document.Recipient.map((recipient) => (
+              {document.recipients.map((recipient) => (
                 <li key={recipient.id}>
                   <span className="text-muted-foreground">
                     [{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}]

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx

@@ -86,7 +86,7 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
   });
 
   const isOwner = (email: string) => {
-    return email.toLowerCase() === document.User.email.toLowerCase();
+    return email.toLowerCase() === document.user.email.toLowerCase();
   };
 
   const getDevice = (userAgent?: string | null) => {
@@ -104,7 +104,7 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
   };
 
   const getAuthenticationLevel = (recipientId: number) => {
-    const recipient = document.Recipient.find((recipient) => recipient.id === recipientId);
+    const recipient = document.recipients.find((recipient) => recipient.id === recipientId);
 
     if (!recipient) {
       return 'Unknown';
@@ -157,7 +157,9 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
   };
 
   const getRecipientSignatureField = (recipientId: number) => {
-    return document.Recipient.find((recipient) => recipient.id === recipientId)?.Field.find(
+    return document.recipients
+      .find((recipient) => recipient.id === recipientId)
+      ?.fields.find(
         (field) => field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE,
       );
   };
@@ -181,7 +183,7 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
             </TableHeader>
 
             <TableBody className="print:text-xs">
-              {document.Recipient.map((recipient, i) => {
+              {document.recipients.map((recipient, i) => {
                 const logs = getRecipientAuditLogs(recipient.id);
                 const signature = getRecipientSignatureField(recipient.id);
 
@@ -209,17 +211,17 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
                               boxShadow: `0px 0px 0px 4.88px rgba(122, 196, 85, 0.1), 0px 0px 0px 1.22px rgba(122, 196, 85, 0.6), 0px 0px 0px 0.61px rgba(122, 196, 85, 1)`,
                             }}
                           >
-                            {signature.Signature?.signatureImageAsBase64 && (
+                            {signature.signature?.signatureImageAsBase64 && (
                               <img
-                                src={`${signature.Signature?.signatureImageAsBase64}`}
+                                src={`${signature.signature?.signatureImageAsBase64}`}
                                 alt="Signature"
                                 className="max-h-12 max-w-full"
                               />
                             )}
 
-                            {signature.Signature?.typedSignature && (
+                            {signature.signature?.typedSignature && (
                               <p className="font-signature text-center text-sm">
-                                {signature.Signature?.typedSignature}
+                                {signature.signature?.typedSignature}
                               </p>
                             )}
                           </div>

apps/web/src/app/(recipient)/d/[token]/configure-direct-template.tsx

@@ -7,8 +7,9 @@ import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import type { Field, Recipient } from '@documenso/prisma/client';
+import type { TTemplate } from '@documenso/lib/types/template';
-import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import type { Recipient } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -40,8 +41,8 @@ export type TConfigureDirectTemplateFormSchema = z.infer<typeof ZConfigureDirect
 export type ConfigureDirectTemplateFormProps = {
   flowStep: DocumentFlowStep;
   isDocumentPdfLoaded: boolean;
-  template: Omit<TemplateWithDetails, 'User'>;
+  template: Omit<TTemplate, 'user'>;
-  directTemplateRecipient: Recipient & { Field: Field[] };
+  directTemplateRecipient: Recipient & { fields: Field[] };
   initialEmail?: string;
   onSubmit: (_data: TConfigureDirectTemplateFormSchema) => void;
 };
@@ -57,10 +58,10 @@ export const ConfigureDirectTemplateFormPartial = ({
   const { _ } = useLingui();
   const { data: session } = useSession();
 
-  const { Recipient } = template;
+  const { recipients } = template;
   const { derivedRecipientAccessAuth } = useRequiredDocumentAuthContext();
 
-  const recipientsWithBlankDirectRecipientEmail = Recipient.map((recipient) => {
+  const recipientsWithBlankDirectRecipientEmail = recipients.map((recipient) => {
     if (recipient.id === directTemplateRecipient.id) {
       return {
         ...recipient,
@@ -74,7 +75,7 @@ export const ConfigureDirectTemplateFormPartial = ({
   const form = useForm<TConfigureDirectTemplateFormSchema>({
     resolver: zodResolver(
       ZConfigureDirectTemplateFormSchema.superRefine((items, ctx) => {
-        if (template.Recipient.map((recipient) => recipient.email).includes(items.email)) {
+        if (template.recipients.map((recipient) => recipient.email).includes(items.email)) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: _(msg`Email cannot already exist in the template`),
@@ -96,7 +97,7 @@ export const ConfigureDirectTemplateFormPartial = ({
 
       <DocumentFlowFormContainerContent>
         {isDocumentPdfLoaded &&
-          directTemplateRecipient.Field.map((field, index) => (
+          directTemplateRecipient.fields.map((field, index) => (
             <ShowFieldItem
               key={index}
               field={field}

apps/web/src/app/(recipient)/d/[token]/direct-template.tsx

@@ -8,9 +8,9 @@ import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TTemplate } from '@documenso/lib/types/template';
 import type { Field } from '@documenso/prisma/client';
 import { type Recipient } from '@documenso/prisma/client';
-import type { TemplateWithDetails } from '@documenso/prisma/types/template';
 import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
@@ -28,9 +28,9 @@ import type { DirectTemplateLocalField } from './sign-direct-template';
 import { SignDirectTemplateForm } from './sign-direct-template';
 
 export type TemplatesDirectPageViewProps = {
-  template: Omit<TemplateWithDetails, 'User'>;
+  template: Omit<TTemplate, 'user'>;
   directTemplateToken: string;
-  directTemplateRecipient: Recipient & { Field: Field[] };
+  directTemplateRecipient: Recipient & { fields: Field[] };
 };
 
 type DirectTemplateStep = 'configure' | 'sign';
@@ -164,7 +164,7 @@ export const DirectTemplatePageView = ({
             <SignDirectTemplateForm
               flowStep={directTemplateFlow.sign}
               directRecipient={recipient}
-              directRecipientFields={directTemplateRecipient.Field}
+              directRecipientFields={directTemplateRecipient.fields}
               template={template}
               onSubmit={onSignDirectTemplateSubmit}
             />

apps/web/src/app/(recipient)/d/[token]/page.tsx

@@ -41,7 +41,7 @@ export default async function TemplatesDirectPage({ params }: TemplatesDirectPag
     notFound();
   }
 
-  const directTemplateRecipient = template.Recipient.find(
+  const directTemplateRecipient = template.recipients.find(
     (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
   );
 
@@ -81,7 +81,7 @@ export default async function TemplatesDirectPage({ params }: TemplatesDirectPag
           <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
             <UsersIcon className="h-4 w-4" />
             <p className="text-muted-foreground/80">
-              <Plural value={template.Recipient.length} one="# recipient" other="# recipients" />
+              <Plural value={template.recipients.length} one="# recipient" other="# recipients" />
             </p>
           </div>
 

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -14,10 +14,10 @@ import {
   ZRadioFieldMeta,
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
+import type { TTemplate } from '@documenso/lib/types/template';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { Field, Recipient, Signature } from '@documenso/prisma/client';
 import { FieldType } from '@documenso/prisma/client';
-import type { TemplateWithDetails } from '@documenso/prisma/types/template';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
@@ -47,6 +47,7 @@ import { NameField } from '~/app/(signing)/sign/[token]/name-field';
 import { NumberField } from '~/app/(signing)/sign/[token]/number-field';
 import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
 import { RadioField } from '~/app/(signing)/sign/[token]/radio-field';
+import { RecipientProvider } from '~/app/(signing)/sign/[token]/recipient-context';
 import { SignDialog } from '~/app/(signing)/sign/[token]/sign-dialog';
 import { SignatureField } from '~/app/(signing)/sign/[token]/signature-field';
 import { TextField } from '~/app/(signing)/sign/[token]/text-field';
@@ -55,13 +56,13 @@ export type SignDirectTemplateFormProps = {
   flowStep: DocumentFlowStep;
   directRecipient: Recipient;
   directRecipientFields: Field[];
-  template: Omit<TemplateWithDetails, 'User'>;
+  template: Omit<TTemplate, 'user'>;
   onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
 };
 
 export type DirectTemplateLocalField = Field & {
   signedValue?: TSignFieldWithTokenMutationSchema;
-  Signature?: Signature;
+  signature?: Signature;
 };
 
 export const SignDirectTemplateForm = ({
@@ -89,19 +90,19 @@ export const SignDirectTemplateForm = ({
 
         const tempField: DirectTemplateLocalField = {
           ...field,
-          customText: value.value,
+          customText: value.value ?? '',
           inserted: true,
           signedValue: value,
         };
 
         if (field.type === FieldType.SIGNATURE) {
-          tempField.Signature = {
+          tempField.signature = {
             id: 1,
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
+            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
-            typedSignature: value.value.startsWith('data:') ? null : value.value,
+            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
           } satisfies Signature;
         }
 
@@ -127,7 +128,7 @@ export const SignDirectTemplateForm = ({
           customText: '',
           inserted: false,
           signedValue: undefined,
-          Signature: undefined,
+          signature: undefined,
         };
       }),
     );
@@ -169,7 +170,7 @@ export const SignDirectTemplateForm = ({
   };
 
   return (
-    <>
+    <RecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
@@ -186,16 +187,15 @@ export const SignDirectTemplateForm = ({
                 <SignatureField
                   key={field.id}
                   field={field}
-                  recipient={directRecipient}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
+                  typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
                 <InitialsField
                   key={field.id}
                   field={field}
-                  recipient={directRecipient}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                 />
@@ -204,7 +204,6 @@ export const SignDirectTemplateForm = ({
                 <NameField
                   key={field.id}
                   field={field}
-                  recipient={directRecipient}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                 />
@@ -213,7 +212,6 @@ export const SignDirectTemplateForm = ({
                 <DateField
                   key={field.id}
                   field={field}
-                  recipient={directRecipient}
                   dateFormat={template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
                   timezone={template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
                   onSignField={onSignField}
@@ -224,7 +222,6 @@ export const SignDirectTemplateForm = ({
                 <EmailField
                   key={field.id}
                   field={field}
-                  recipient={directRecipient}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                 />
@@ -241,7 +238,6 @@ export const SignDirectTemplateForm = ({
                       ...field,
                       fieldMeta: parsedFieldMeta,
                     }}
-                    recipient={directRecipient}
                     onSignField={onSignField}
                     onUnsignField={onUnsignField}
                   />
@@ -259,7 +255,6 @@ export const SignDirectTemplateForm = ({
                       ...field,
                       fieldMeta: parsedFieldMeta,
                     }}
-                    recipient={directRecipient}
                     onSignField={onSignField}
                     onUnsignField={onUnsignField}
                   />
@@ -277,7 +272,6 @@ export const SignDirectTemplateForm = ({
                       ...field,
                       fieldMeta: parsedFieldMeta,
                     }}
-                    recipient={directRecipient}
                     onSignField={onSignField}
                     onUnsignField={onUnsignField}
                   />
@@ -295,7 +289,6 @@ export const SignDirectTemplateForm = ({
                       ...field,
                       fieldMeta: parsedFieldMeta,
                     }}
-                    recipient={directRecipient}
                     onSignField={onSignField}
                     onUnsignField={onUnsignField}
                   />
@@ -313,7 +306,6 @@ export const SignDirectTemplateForm = ({
                       ...field,
                       fieldMeta: parsedFieldMeta,
                     }}
-                    recipient={directRecipient}
                     onSignField={onSignField}
                     onUnsignField={onUnsignField}
                   />
@@ -351,6 +343,7 @@ export const SignDirectTemplateForm = ({
                     onChange={(value) => {
                       setSignature(value);
                     }}
+                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
                   />
                 </CardContent>
               </Card>
@@ -383,6 +376,6 @@ export const SignDirectTemplateForm = ({
           />
         </div>
       </DocumentFlowFormContainerFooter>
-    </>
+    </RecipientProvider>
   );
 };

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -52,15 +52,15 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
   const isRecipient = 'Signature' in recipientOrSender;
 
   const signatureImage = match(recipientOrSender)
-    .with({ Signature: P.array(P._) }, (recipient) => {
+    .with({ signatures: P.array(P._) }, (recipient) => {
-      return recipient.Signature?.[0]?.signatureImageAsBase64 || null;
+      return recipient.signatures?.[0]?.signatureImageAsBase64 || null;
     })
     .otherwise((sender) => {
       return sender.signature || null;
     });
 
   const signatureName = match(recipientOrSender)
-    .with({ Signature: P.array(P._) }, (recipient) => {
+    .with({ signatures: P.array(P._) }, (recipient) => {
       return recipient.name || recipient.email;
     })
     .otherwise((sender) => {

apps/web/src/app/(signing)/sign/[token]/assistant/assistant-confirmation-dialog.tsx

@@ -0,0 +1,73 @@
+import { Trans } from '@lingui/macro';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+import { SigningDisclosure } from '~/components/general/signing-disclosure';
+
+type ConfirmationDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  hasUninsertedFields: boolean;
+  isSubmitting: boolean;
+};
+
+export function AssistantConfirmationDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  hasUninsertedFields,
+  isSubmitting,
+}: ConfirmationDialogProps) {
+  const onOpenChange = () => {
+    if (isSubmitting) {
+      return;
+    }
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Complete Document</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>
+              Are you sure you want to complete the document? This action cannot be undone. Please
+              ensure that you have completed prefilling all relevant fields before proceeding.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          <SigningDisclosure />
+        </div>
+
+        <DialogFooter className="mt-4">
+          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            variant={hasUninsertedFields ? 'destructive' : 'default'}
+            onClick={onConfirm}
+            disabled={isSubmitting}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx

@@ -13,7 +13,6 @@ import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
 import { fromCheckboxValue, toCheckboxValue } from '@documenso/lib/universal/field-checkbox';
-import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -27,29 +26,30 @@ import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type CheckboxFieldProps = {
   field: FieldWithSignatureAndFieldMeta;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const CheckboxField = ({
+export const CheckboxField = ({ field, onSignField, onUnsignField }: CheckboxFieldProps) => {
-  field,
-  recipient,
-  onSignField,
-  onUnsignField,
-}: CheckboxFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
 
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
-  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(
+    field.fieldMeta ?? {
+      type: 'checkbox',
+      values: [{ id: 1, checked: false, value: '' }],
+    },
+  );
 
   const values = parsedFieldMeta.values?.map((item) => ({
     ...item,
@@ -81,12 +81,12 @@ export const CheckboxField = ({
     );
   }, [checkedValues, validationSign, checkboxValidationLength]);
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
@@ -122,7 +122,9 @@ export const CheckboxField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -151,7 +153,7 @@ export const CheckboxField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }
@@ -183,29 +185,26 @@ export const CheckboxField = ({
           ...checkedValues,
           item.value.length > 0 ? item.value : `empty-value-${item.id}`,
         ];
-
-        await removeSignedFieldWithToken({
-          token: recipient.token,
-          fieldId: field.id,
-        });
-
-        if (isLengthConditionMet) {
-          await signFieldWithToken({
-            token: recipient.token,
-            fieldId: field.id,
-            value: toCheckboxValue(checkedValues),
-            isBase64: true,
-          });
-        }
       } else {
         updatedValues = checkedValues.filter(
           (v) => v !== item.value && v !== `empty-value-${item.id}`,
         );
+      }
+
+      setCheckedValues(updatedValues);
 
       await removeSignedFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
       });
+
+      if (updatedValues.length > 0) {
+        await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value: toCheckboxValue(updatedValues),
+          isBase64: true,
+        });
       }
     } catch (err) {
       console.error(err);
@@ -216,7 +215,6 @@ export const CheckboxField = ({
         variant: 'destructive',
       });
     } finally {
-      setCheckedValues(updatedValues);
       startTransition(() => router.refresh());
     }
   };

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -16,20 +16,21 @@ import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones'
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import type { Recipient } from '@documenso/prisma/client';
+import { ZDateFieldMeta } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type DateFieldProps = {
   field: FieldWithSignature;
-  recipient: Recipient;
   dateFormat?: string | null;
   timezone?: string | null;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
@@ -38,33 +39,34 @@ export type DateFieldProps = {
 
 export const DateField = ({
   field,
-  recipient,
   dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
   timezone = DEFAULT_DOCUMENT_TIME_ZONE,
   onSignField,
   onUnsignField,
 }: DateFieldProps) => {
   const router = useRouter();
-
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
+
   const [isPending, startTransition] = useTransition();
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
+  const safeFieldMeta = ZDateFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
   const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
-
   const isDifferentTime = field.inserted && localDateString !== field.customText;
-
   const tooltipText = _(
     msg`"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`,
   );
@@ -97,7 +99,9 @@ export const DateField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -123,7 +127,7 @@ export const DateField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }
@@ -150,9 +154,21 @@ export const DateField = ({
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
             {localDateString}
           </p>
+        </div>
       )}
     </SigningFieldContainer>
   );

apps/web/src/app/(signing)/sign/[token]/document-auth-provider.tsx

@@ -106,7 +106,7 @@ export const DocumentAuthProvider = ({
       perPage: MAXIMUM_PASSKEYS,
     },
     {
-      keepPreviousData: true,
+      placeholderData: (previousData) => previousData,
       enabled: derivedRecipientActionAuth === DocumentAuth.PASSKEY,
     },
   );

apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx

@@ -12,7 +12,6 @@ import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/tr
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZDropdownFieldMeta } from '@documenso/lib/types/field-meta';
-import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -30,23 +29,19 @@ import {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type DropdownFieldProps = {
   field: FieldWithSignatureAndFieldMeta;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const DropdownField = ({
+export const DropdownField = ({ field, onSignField, onUnsignField }: DropdownFieldProps) => {
-  field,
-  recipient,
-  onSignField,
-  onUnsignField,
-}: DropdownFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
 
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -58,12 +53,12 @@ export const DropdownField = ({
   const defaultValue = parsedFieldMeta?.defaultValue;
   const [localChoice, setLocalChoice] = useState(parsedFieldMeta.defaultValue ?? '');
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
@@ -103,7 +98,9 @@ export const DropdownField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -134,7 +131,7 @@ export const DropdownField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -11,43 +11,48 @@ import { Loader } from 'lucide-react';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import type { Recipient } from '@documenso/prisma/client';
+import { ZEmailFieldMeta } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredSigningContext } from './provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type EmailFieldProps = {
   field: FieldWithSignature;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const EmailField = ({ field, recipient, onSignField, onUnsignField }: EmailFieldProps) => {
+export const EmailField = ({ field, onSignField, onUnsignField }: EmailFieldProps) => {
   const router = useRouter();
 
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const { email: providedEmail } = useRequiredSigningContext();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
 
   const [isPending, startTransition] = useTransition();
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
+  const safeFieldMeta = ZEmailFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
@@ -81,7 +86,9 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -107,7 +114,7 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }
@@ -128,9 +135,21 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
             {field.customText}
           </p>
+        </div>
       )}
     </SigningFieldContainer>
   );

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -1,19 +1,22 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useId, useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { Trans } from '@lingui/macro';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useSession } from 'next-auth/react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { type Field, FieldType, type Recipient, RecipientRole } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
+import { type Field, FieldType, RecipientRole } from '@documenso/prisma/client';
+import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
@@ -21,8 +24,11 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { AssistantConfirmationDialog } from './assistant/assistant-confirmation-dialog';
 import { useRequiredSigningContext } from './provider';
 import { SignDialog } from './sign-dialog';
 
@@ -32,6 +38,8 @@ export type SigningFormProps = {
   fields: Field[];
   redirectUrl?: string | null;
   isRecipientsTurn: boolean;
+  allRecipients?: RecipientWithFields[];
+  setSelectedSignerId?: (id: number | null) => void;
 };
 
 export const SigningForm = ({
@@ -40,19 +48,35 @@ export const SigningForm = ({
   fields,
   redirectUrl,
   isRecipientsTurn,
+  allRecipients = [],
+  setSelectedSignerId,
 }: SigningFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
   const router = useRouter();
   const analytics = useAnalytics();
+
   const { data: session } = useSession();
 
+  const assistantSignersId = useId();
+
   const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
     useRequiredSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
+  const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
   const { mutateAsync: completeDocumentWithToken } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
+  const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
+    defaultValues: {
+      selectedSignerId: undefined,
+    },
+  });
+
   const { handleSubmit, formState } = useForm();
 
   // Keep the loading state going if successful since the redirect may take some time.
@@ -67,7 +91,11 @@ export const SigningForm = ({
 
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(fieldsRequiringValidation.filter((field) => !field.inserted));
-  }, [fields]);
+  }, [fieldsRequiringValidation]);
+
+  const uninsertedRecipientFields = useMemo(() => {
+    return fieldsRequiringValidation.filter((field) => field.recipientId === recipient.id);
+  }, [fieldsRequiringValidation, recipient]);
 
   const fieldsValidated = () => {
     setValidateUninsertedFields(true);
@@ -88,12 +116,31 @@ export const SigningForm = ({
     }
 
     await completeDocument();
+  };
 
-    // Reauth is currently not required for completing the document.
+  const onAssistantFormSubmit = () => {
-    // await executeActionAuthProcedure({
+    if (uninsertedRecipientFields.length > 0) {
-    //   onReauthFormSubmit: completeDocument,
+      return;
-    //   actionTarget: 'DOCUMENT',
+    }
-    // });
+
+    setIsConfirmationDialogOpen(true);
+  };
+
+  const handleAssistantConfirmDialogSubmit = async () => {
+    setIsAssistantSubmitting(true);
+
+    try {
+      await completeDocument();
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while completing the document. Please try again.',
+        variant: 'destructive',
+      });
+
+      setIsAssistantSubmitting(false);
+      setIsConfirmationDialogOpen(false);
+    }
   };
 
   const completeDocument = async (authOptions?: TRecipientActionAuth) => {
@@ -113,7 +160,7 @@ export const SigningForm = ({
   };
 
   return (
-    <form
+    <div
       className={cn(
         'dark:bg-background border-border bg-widget sticky flex h-full flex-col rounded-xl border px-4 py-6',
         {
@@ -121,7 +168,6 @@ export const SigningForm = ({
           'top-4 max-h-[min(68rem,calc(100vh-2rem))]': !session,
         },
       )}
-      onSubmit={handleSubmit(onFormSubmit)}
     >
       {validateUninsertedFields && uninsertedFields[0] && (
         <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
@@ -129,17 +175,13 @@ export const SigningForm = ({
         </FieldToolTip>
       )}
 
-      <fieldset
+      <div className="custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2">
-        disabled={isSubmitting}
+        <div className="flex flex-1 flex-col">
-        className={cn(
-          'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
-        )}
-      >
-        <div className={cn('flex flex-1 flex-col')}>
           <h3 className="text-foreground text-2xl font-semibold">
             {recipient.role === RecipientRole.VIEWER && <Trans>View Document</Trans>}
             {recipient.role === RecipientRole.SIGNER && <Trans>Sign Document</Trans>}
             {recipient.role === RecipientRole.APPROVER && <Trans>Approve Document</Trans>}
+            {recipient.role === RecipientRole.ASSISTANT && <Trans>Assist Document</Trans>}
           </h3>
 
           {recipient.role === RecipientRole.VIEWER ? (
@@ -176,15 +218,112 @@ export const SigningForm = ({
                 </div>
               </div>
             </>
+          ) : recipient.role === RecipientRole.ASSISTANT ? (
+            <>
+              <form onSubmit={assistantForm.handleSubmit(onAssistantFormSubmit)}>
+                <p className="text-muted-foreground mt-2 text-sm">
+                  <Trans>
+                    Complete the fields for the following signers. Once reviewed, they will inform
+                    you if any modifications are needed.
+                  </Trans>
+                </p>
+
+                <hr className="border-border my-4" />
+
+                <fieldset className="dark:bg-background border-border rounded-2xl border bg-white p-3">
+                  <Controller
+                    name="selectedSignerId"
+                    control={assistantForm.control}
+                    rules={{ required: 'Please select a signer' }}
+                    render={({ field }) => (
+                      <RadioGroup
+                        className="gap-0 space-y-3 shadow-none"
+                        value={field.value?.toString()}
+                        onValueChange={(value) => {
+                          field.onChange(value);
+                          setSelectedSignerId?.(Number(value));
+                        }}
+                      >
+                        {allRecipients
+                          .filter((r) => r.fields.length > 0)
+                          .map((r) => (
+                            <div
+                              key={`${assistantSignersId}-${r.id}`}
+                              className="bg-widget border-border relative flex flex-col gap-4 rounded-lg border p-4"
+                            >
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-3">
+                                  <RadioGroupItem
+                                    id={`${assistantSignersId}-${r.id}`}
+                                    value={r.id.toString()}
+                                    className="after:absolute after:inset-0"
+                                  />
+
+                                  <div className="grid grow gap-1">
+                                    <Label
+                                      className="inline-flex items-start"
+                                      htmlFor={`${assistantSignersId}-${r.id}`}
+                                    >
+                                      {r.name}
+
+                                      {r.id === recipient.id && (
+                                        <span className="text-muted-foreground ml-2">
+                                          {_(msg`(You)`)}
+                                        </span>
+                                      )}
+                                    </Label>
+                                    <p className="text-muted-foreground text-xs">{r.email}</p>
+                                  </div>
+                                </div>
+                                <div className="text-muted-foreground text-xs leading-[inherit]">
+                                  {r.fields.length} {r.fields.length === 1 ? 'field' : 'fields'}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                      </RadioGroup>
+                    )}
+                  />
+                </fieldset>
+
+                <div className="mt-6 flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    size="lg"
+                    loading={isAssistantSubmitting}
+                    disabled={isAssistantSubmitting || uninsertedRecipientFields.length > 0}
+                  >
+                    {isAssistantSubmitting ? <Trans>Submitting...</Trans> : <Trans>Continue</Trans>}
+                  </Button>
+                </div>
+
+                <AssistantConfirmationDialog
+                  hasUninsertedFields={uninsertedFields.length > 0}
+                  isOpen={isConfirmationDialogOpen}
+                  onClose={() => !isAssistantSubmitting && setIsConfirmationDialogOpen(false)}
+                  onConfirm={handleAssistantConfirmDialogSubmit}
+                  isSubmitting={isAssistantSubmitting}
+                />
+              </form>
+            </>
           ) : (
             <>
+              <form onSubmit={handleSubmit(onFormSubmit)}>
                 <p className="text-muted-foreground mt-2 text-sm">
+                  {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
+                    <Trans>Please review the document before approving.</Trans>
+                  ) : (
                     <Trans>Please review the document before signing.</Trans>
+                  )}
                 </p>
 
                 <hr className="border-border mb-8 mt-4" />
 
-              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+                <fieldset
+                  disabled={isSubmitting}
+                  className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2"
+                >
                   <div className="flex flex-1 flex-col gap-y-4">
                     <div>
                       <Label htmlFor="full-name">
@@ -200,6 +339,7 @@ export const SigningForm = ({
                       />
                     </div>
 
+                    {hasSignatureField && (
                       <div>
                         <Label htmlFor="Signature">
                           <Trans>Signature</Trans>
@@ -224,7 +364,7 @@ export const SigningForm = ({
                           </CardContent>
                         </Card>
 
-                    {hasSignatureField && !signatureValid && (
+                        {!signatureValid && (
                           <div className="text-destructive mt-2 text-sm">
                             <Trans>
                               Signature is too small. Please provide a more complete signature.
@@ -232,6 +372,7 @@ export const SigningForm = ({
                           </div>
                         )}
                       </div>
+                    )}
                   </div>
 
                   <div className="flex flex-col gap-4 md:flex-row">
@@ -256,11 +397,12 @@ export const SigningForm = ({
                       disabled={!isRecipientsTurn}
                     />
                   </div>
-              </div>
+                </fieldset>
+              </form>
             </>
           )}
         </div>
-      </fieldset>
+      </div>
-    </form>
+    </div>
   );
 };

apps/web/src/app/(signing)/sign/[token]/initials-field.tsx

@@ -12,7 +12,6 @@ import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/tr
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -22,36 +21,32 @@ import type {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredSigningContext } from './provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type InitialsFieldProps = {
   field: FieldWithSignature;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const InitialsField = ({
+export const InitialsField = ({ field, onSignField, onUnsignField }: InitialsFieldProps) => {
-  field,
-  recipient,
-  onSignField,
-  onUnsignField,
-}: InitialsFieldProps) => {
   const router = useRouter();
   const { toast } = useToast();
   const { _ } = useLingui();
 
   const { fullName } = useRequiredSigningContext();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
   const initials = extractInitials(fullName);
 
   const [isPending, startTransition] = useTransition();
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
@@ -87,7 +82,9 @@ export const InitialsField = ({
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -11,13 +11,14 @@ import { Loader } from 'lucide-react';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { type Recipient } from '@documenso/prisma/client';
+import { ZNameFieldMeta } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -26,16 +27,16 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { useRequiredSigningContext } from './provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type NameFieldProps = {
   field: FieldWithSignature;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const NameField = ({ field, recipient, onSignField, onUnsignField }: NameFieldProps) => {
+export const NameField = ({ field, onSignField, onUnsignField }: NameFieldProps) => {
   const router = useRouter();
 
   const { _ } = useLingui();
@@ -43,26 +44,30 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
 
   const { fullName: providedFullName, setFullName: setProvidedFullName } =
     useRequiredSigningContext();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
   const [isPending, startTransition] = useTransition();
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
+  const safeFieldMeta = ZNameFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
   const [showFullNameModal, setShowFullNameModal] = useState(false);
   const [localFullName, setLocalFullName] = useState('');
 
   const onPreSign = () => {
-    if (!providedFullName) {
+    if (!providedFullName && !isAssistantMode) {
       setShowFullNameModal(true);
       return false;
     }
@@ -85,9 +90,9 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
 
   const onSign = async (authOptions?: TRecipientActionAuth, name?: string) => {
     try {
-      const value = name || providedFullName;
+      const value = name || providedFullName || '';
 
-      if (!value) {
+      if (!value && !isAssistantMode) {
         setShowFullNameModal(true);
         return;
       }
@@ -119,7 +124,9 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -145,7 +152,7 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }
@@ -172,9 +179,21 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
             {field.customText}
           </p>
+        </div>
       )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>

apps/web/src/app/(signing)/sign/[token]/number-field.tsx

@@ -13,7 +13,6 @@ import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/tr
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZNumberFieldMeta } from '@documenso/lib/types/field-meta';
-import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -27,6 +26,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 type ValidationErrors = {
@@ -39,21 +39,32 @@ type ValidationErrors = {
 
 export type NumberFieldProps = {
   field: FieldWithSignature;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const NumberField = ({ field, recipient, onSignField, onUnsignField }: NumberFieldProps) => {
+export const NumberField = ({ field, onSignField, onUnsignField }: NumberFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
 
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
-  const [showRadioModal, setShowRadioModal] = useState(false);
+  const [showNumberModal, setShowNumberModal] = useState(false);
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const safeFieldMeta = ZNumberFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
-  const parsedFieldMeta = field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null;
-  const isReadOnly = parsedFieldMeta?.readOnly;
   const defaultValue = parsedFieldMeta?.value;
   const [localNumber, setLocalNumber] = useState(
     parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0',
@@ -71,16 +82,6 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
 
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
   const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     setLocalNumber(text);
@@ -104,7 +105,7 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
   };
 
   const onDialogSignClick = () => {
-    setShowRadioModal(false);
+    setShowNumberModal(false);
 
     void executeActionAuthProcedure({
       onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
@@ -147,14 +148,20 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
   };
 
   const onPreSign = () => {
-    setShowRadioModal(true);
+    if (isAssistantMode) {
+      return true;
+    }
+
+    setShowNumberModal(true);
 
     if (localNumber && parsedFieldMeta) {
       const validationErrors = validateNumberField(localNumber, parsedFieldMeta, true);
@@ -192,23 +199,23 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }
   };
 
   useEffect(() => {
-    if (!showRadioModal) {
+    if (!showNumberModal) {
       setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0');
       setErrors(initialErrors);
     }
-  }, [showRadioModal]);
+  }, [showNumberModal]);
 
   useEffect(() => {
     if (
       (!field.inserted && defaultValue && localNumber) ||
-      (!field.inserted && isReadOnly && defaultValue)
+      (!field.inserted && parsedFieldMeta?.readOnly && defaultValue)
     ) {
       void executeActionAuthProcedure({
         onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
@@ -221,8 +228,8 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
 
   if (parsedFieldMeta?.label) {
     fieldDisplayName =
-      parsedFieldMeta.label.length > 10
+      parsedFieldMeta.label.length > 20
-        ? parsedFieldMeta.label.substring(0, 10) + '...'
+        ? parsedFieldMeta.label.substring(0, 20) + '...'
         : parsedFieldMeta.label;
   }
 
@@ -234,7 +241,7 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
       onPreSign={onPreSign}
       onSign={onSign}
       onRemove={onRemove}
-      type="Signature"
+      type="Number"
     >
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
@@ -260,12 +267,24 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
             {field.customText}
           </p>
+        </div>
       )}
 
-      <Dialog open={showRadioModal} onOpenChange={setShowRadioModal}>
+      <Dialog open={showNumberModal} onOpenChange={setShowNumberModal}>
         <DialogContent>
           <DialogTitle>
             {parsedFieldMeta?.label ? parsedFieldMeta?.label : <Trans>Number</Trans>}
@@ -321,7 +340,7 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
                 className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
-                  setShowRadioModal(false);
+                  setShowNumberModal(false);
                   setLocalNumber('');
                 }}
               >

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -12,11 +12,12 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { extractNextHeaderRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 
 import { DocumentAuthProvider } from './document-auth-provider';
 import { NoLongerAvailable } from './no-longer-available';
@@ -43,14 +44,14 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
 
-  const [document, fields, recipient, completedFields] = await Promise.all([
+  const [document, recipient, fields, completedFields] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
       userId: user?.id,
       requireAccessAuth: false,
     }).catch(() => null),
-    getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
+    getFieldsForToken({ token }),
     getCompletedFieldsForToken({ token }),
   ]);
 
@@ -63,12 +64,21 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const recipientWithFields = { ...recipient, fields };
+
   const isRecipientsTurn = await getIsRecipientsTurnToSign({ token });
 
   if (!isRecipientsTurn) {
     return redirect(`/sign/${token}/waiting`);
   }
 
+  const allRecipients =
+    recipient.role === RecipientRole.ASSISTANT
+      ? await getRecipientsForAssistant({
+          token,
+        })
+      : [];
+
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
     recipientAuth: recipient.authOptions,
@@ -153,11 +163,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
         user={user}
       >
         <SigningPageView
-          recipient={recipient}
+          recipient={recipientWithFields}
           document={document}
           fields={fields}
           completedFields={completedFields}
           isRecipientsTurn={isRecipientsTurn}
+          allRecipients={allRecipients}
         />
       </DocumentAuthProvider>
     </SigningProvider>

apps/web/src/app/(signing)/sign/[token]/radio-field.tsx

@@ -12,7 +12,6 @@ import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/tr
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
-import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -24,18 +23,19 @@ import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { useRecipientContext } from './recipient-context';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type RadioFieldProps = {
   field: FieldWithSignatureAndFieldMeta;
-  recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const RadioField = ({ field, recipient, onSignField, onUnsignField }: RadioFieldProps) => {
+export const RadioField = ({ field, onSignField, onUnsignField }: RadioFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { recipient, targetSigner, isAssistantMode } = useRecipientContext();
 
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -52,12 +52,12 @@ export const RadioField = ({ field, recipient, onSignField, onUnsignField }: Rad
 
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
+    isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
@@ -99,7 +99,9 @@ export const RadioField = ({ field, recipient, onSignField, onUnsignField }: Rad
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while signing the document.`),
+        description: isAssistantMode
+          ? _(msg`An error occurred while signing as assistant.`)
+          : _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -126,7 +128,7 @@ export const RadioField = ({ field, recipient, onSignField, onUnsignField }: Rad
 
       toast({
         title: _(msg`Error`),
-        description: _(msg`An error occurred while removing the signature.`),
+        description: _(msg`An error occurred while removing the selection.`),
         variant: 'destructive',
       });
     }

apps/web/src/app/(signing)/sign/[token]/recipient-context.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { type PropsWithChildren, createContext, useContext } from 'react';
+
+import type { Recipient } from '@documenso/prisma/client';
+import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+
+export interface RecipientContextValue {
+  /**
+   * The recipient who is currently signing the document.
+   * In regular mode, this is the actual signer.
+   * In assistant mode, this is the recipient who is helping fill out the document.
+   */
+  recipient: Recipient | RecipientWithFields;
+
+  /**
+   * Only present in assistant mode.
+   * The recipient on whose behalf we're filling out the document.
+   */
+  targetSigner: RecipientWithFields | null;
+
+  /**
+   * Whether we're in assistant mode (one recipient filling out for another)
+   */
+  isAssistantMode: boolean;
+}
+
+const RecipientContext = createContext<RecipientContextValue | null>(null);
+
+export interface RecipientProviderProps extends PropsWithChildren {
+  recipient: Recipient | RecipientWithFields;
+  targetSigner?: RecipientWithFields | null;
+}
+
+export const RecipientProvider = ({
+  children,
+  recipient,
+  targetSigner = null,
+}: RecipientProviderProps) => {
+  // console.log({
+  //   recipient,
+  //   targetSigner,
+  //   isAssistantMode: !!targetSigner,
+  // });
+  return (
+    <RecipientContext.Provider
+      value={{
+        recipient,
+        targetSigner,
+        isAssistantMode: !!targetSigner,
+      }}
+    >
+      {children}
+    </RecipientContext.Provider>
+  );
+};
+
+export function useRecipientContext() {
+  const context = useContext(RecipientContext);
+
+  if (!context) {
+    throw new Error('useRecipientContext must be used within a RecipientProvider');
+  }
+
+  return context;
+}

apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx

@@ -43,9 +43,10 @@ type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
 export interface RejectDocumentDialogProps {
   document: Pick<Document, 'id'>;
   token: string;
+  onRejected?: (reason: string) => void | Promise<void>;
 }
 
-export function RejectDocumentDialog({ document, token }: RejectDocumentDialogProps) {
+export function RejectDocumentDialog({ document, token, onRejected }: RejectDocumentDialogProps) {
   const { toast } = useToast();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -79,7 +80,11 @@ export function RejectDocumentDialog({ document, token }: RejectDocumentDialogPr
 
       setIsOpen(false);
 
+      if (onRejected) {
+        await onRejected(reason);
+      } else {
         router.push(`/sign/${token}/rejected`);
+      }
     } catch (err) {
       toast({
         title: 'Error',

apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/macro';
+import { match } from 'ts-pattern';
 
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import type { Field } from '@documenso/prisma/client';
@@ -58,21 +59,33 @@ export const SignDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
+          {match({ isComplete, role })
+            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
+            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
+            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
+              <Trans>Mark as viewed</Trans>
+            ))
+            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
+            .exhaustive()}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
         <DialogTitle>
           <div className="text-foreground text-xl font-semibold">
-            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            {match(role)
-            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+              .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
-            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
+              .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
+              .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
+              .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
+              .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
+              .exhaustive()}
           </div>
         </DialogTitle>
 
         <div className="text-muted-foreground max-w-[50ch]">
-          {role === RecipientRole.VIEWER && (
+          {match(role)
+            .with(RecipientRole.VIEWER, () => (
               <span>
                 <Trans>
                   <span className="inline-flex flex-wrap">
@@ -85,8 +98,8 @@ export const SignDialog = ({
                   <br /> Are you sure?
                 </Trans>
               </span>
-          )}
+            ))
-          {role === RecipientRole.SIGNER && (
+            .with(RecipientRole.SIGNER, () => (
               <span>
                 <Trans>
                   <span className="inline-flex flex-wrap">
@@ -99,8 +112,8 @@ export const SignDialog = ({
                   <br /> Are you sure?
                 </Trans>
               </span>
-          )}
+            ))
-          {role === RecipientRole.APPROVER && (
+            .with(RecipientRole.APPROVER, () => (
               <span>
                 <Trans>
                   <span className="inline-flex flex-wrap">
@@ -113,7 +126,21 @@ export const SignDialog = ({
                   <br /> Are you sure?
                 </Trans>
               </span>
-          )}
+            ))
+            .otherwise(() => (
+              <span>
+                <Trans>
+                  <span className="inline-flex flex-wrap">
+                    You are about to complete viewing "
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
+                      {documentTitle}
+                    </span>
+                    ".
+                  </span>
+                  <br /> Are you sure?
+                </Trans>
+              </span>
+            ))}
         </div>
 
         <SigningDisclosure className="mt-4" />
@@ -138,9 +165,13 @@ export const SignDialog = ({
               loading={isSubmitting}
               onClick={onSignatureComplete}
             >
-              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+              {match(role)
-              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+                .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
-              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
+                .with(RecipientRole.SIGNER, () => <Trans>Sign</Trans>)
+                .with(RecipientRole.APPROVER, () => <Trans>Approve</Trans>)
+                .with(RecipientRole.CC, () => <Trans>Mark as Viewed</Trans>)
+                .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
+                .exhaustive()}
             </Button>
           </div>
         </DialogFooter>