v1.7.0-rc.5

Introduces `NEXT_PRIVATE_INTERNAL_WEBAPP_URL` used for requesting the
app by itself (backend) [e.g. for background jobs]

.env.example

@@ -27,6 +27,8 @@ NEXT_PRIVATE_OIDC_SKIP_VERIFY=""
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
+# URL used by the web app to request itself (e.g. local background jobs)
+NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"

.github/actions/cache-build/action.yml

@@ -3,7 +3,7 @@ description: 'Cache or restore if necessary'
 inputs:
   node_version:
     required: false
-    default: v18.x
+    default: v20.x
 runs:
   using: 'composite'
   steps:
@@ -17,7 +17,7 @@ runs:
           **/.turbo/**
           **/dist/**
 
-        key: prod-build-${{ github.run_id }}
+        key: prod-build-${{ github.run_id }}-${{ hashFiles('package-lock.json') }}
         restore-keys: prod-build-
 
     - run: npm run build

.github/actions/node-install/action.yml

@@ -2,7 +2,7 @@ name: 'Setup node and cache node_modules'
 inputs:
   node_version:
     required: false
-    default: v18.x
+    default: v20.x
 
 runs:
   using: 'composite'

.github/workflows/e2e-tests.yml

@@ -32,6 +32,9 @@ jobs:
 
       - name: Run Playwright tests
         run: npm run ci
+        env:
+          # Needed since we use next start which will set the NODE_ENV to production
+          NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH: './example/cert.p12'
 
       - uses: actions/upload-artifact@v4
         if: always()

README.md

@@ -303,6 +303,10 @@ WantedBy=multi-user.target
 
 [![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
 
+## Elestio
+
+[![Deploy on Elestio](https://elest.io/images/logos/deploy-to-elestio-btn.png)](https://elest.io/open-source/documenso)
+
 ## Troubleshooting
 
 ### I'm not receiving any emails when using the developer quickstart.

apps/documentation/package.json

@@ -16,7 +16,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "14.0.3",
+    "next": "14.2.6",
     "next-plausible": "^3.12.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
@@ -32,4 +32,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}

apps/documentation/pages/developers/_meta.json

@@ -12,5 +12,6 @@
     "title": "API & Integration Guides"
   },
   "public-api": "Public API",
+  "embedding": "Embedding",
   "webhooks": "Webhooks"
-}
+}

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

@@ -0,0 +1,131 @@
+---
+title: Get Started
+description: Learn how to use embedding to bring signing to your own website or application
+---
+
+# 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.
+
+## Availability
+
+Embedding is currently available for all users on a **Teams Plan** and above, as well as **Early Adopter's** within a team (Early Adopters can create a team for free).
+
+In the future, we will roll out a **Platform Plan** that will offer additional enhancements for embedding, including the option to remove Documenso branding for a more customized experience.
+
+## How Embedding Works
+
+Embedding with Documenso allows you to handle document signing in two main ways:
+
+1. **Using Direct Templates**: Using direct templates you can have an evergreen template that upon completion will create a new document within Documenso.
+2. **Using a Signing Token**: A more advanced option for those running rich integrations with Documenso already. Given a recipients signing token you can embed the signing experience in your application rather than direct the recipient to Documenso.
+
+_For most use-cases we recommend using direct templates, however if you have a need for a more advanced integration, we are happy to help you get started._
+
+## Supported Frameworks
+
+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)   |
+
+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.
+
+## Embedding with Direct Templates
+
+#### Instructions
+
+To get started with embedding using a Direct Template we will need the URL segment which is also referred to as the token for the template.
+
+You can find your URL/Token by performing the following steps:
+
+1. **Navigate to your team's templates within Documenso**
+
+![Team Templates](/embedding/team-templates.png)
+
+2. **Click on the direct link template you want to embed**
+
+This will copy the URL to your clipboard, e.g. `https://stg-app.documenso.com/d/-WoSwWVT-fYOERS2MI37k`
+
+**For the above url the token is `-WoSwWVT-fYOERS2MI37k`**
+
+3. Provide the token to the `EmbedDirectTemplate` component in your frameworks SDK
+
+```jsx
+import { EmbedDirectTemplate } from '@documenso/embed-react';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedDirectTemplate token={token} />;
+};
+```
+
+---
+
+**Converting a regular template to a direct link template**
+
+If you don't currently have any direct link templates you can easily create one by selecting the "Direct Link" option within the actions dropdown on the templates table.
+
+This will show a dialog which will ask you to configure which recipient should be used as the direct link signer.
+
+![Enable Direct Link Template](/embedding/enable-direct-link.png)
+
+---
+
+## 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.
+
+#### Instructions
+
+1. Retrieve the signing token for the recipient document you want to embed
+
+This will typically be done using an API integration where signing tokens are provided as part of the response when creating a document. Alternatively you can manually get a signing link by clicking hovering over a recipients avatar and clicking their email on a document that you own.
+
+![Copy Recipient Token](/embedding/copy-recipient-token.png)
+
+With the signing url on our clipboard we can extract the token the same way we did for the direct link template.
+
+So `https://stg-app.documenso.com/sign/lm7Tp2_yhvFfzdeJQzYQF` will become `lm7Tp2_yhvFfzdeJQzYQF`
+
+2. Provide the token to the `EmbedSignDocument` component in your frameworks SDK
+
+```jsx
+import { EmbedSignDocument } from '@documenso/embed-react';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedSignDocument token={token} />;
+};
+```
+
+---
+
+## Using Embedding in Your Application
+
+Once you've obtained the appropriate tokens, you can integrate the signing experience into your application. For framework-specific instructions, please refer to the guides provided in our documentation for:
+
+- [React](/developers/embedding/react)
+- [Preact](/developers/embedding/preact)
+- [Vue](/developers/embedding/vue)
+- [Svelte](/developers/embedding/svelte)
+- [Solid](/developers/embedding/solid)
+
+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.
+
+## Stay Tuned for the Platform Plan
+
+While embedding is already a powerful tool, we're working on a **Platform Plan** that will introduce even more functionality. This plan will offer:
+
+- Additional customization options
+- The ability to remove Documenso branding
+- Additional controls for the signing experience
+
+More details will be shared as we approach the release.

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

@@ -0,0 +1,77 @@
+---
+title: Preact Integration
+description: Learn how to use our embedding SDK within your Preact application.
+---
+
+# Preact Integration
+
+Our Preact SDK provides a simple way to embed a signing experience within your Preact application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-preact
+```
+
+## 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.
+
+```jsx
+import { EmbedDirectTemplate } from '@documenso/embed-preact';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedDirectTemplate token={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                  |
+| externalId          | string (optional)   | The external ID to be used for the document that will be created upon completion           |
+| 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 has been signed                       |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field has been unsigned                     |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `EmbedSignDocument` component.
+
+```jsx
+import { EmbedSignDocument } from '@documenso/embed-preact';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedSignDocument token={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/react.mdx

@@ -0,0 +1,77 @@
+---
+title: React Integration
+description: Learn how to use our embedding SDK within your React application.
+---
+
+# React Integration
+
+Our React SDK provides a simple way to embed a signing experience within your React application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-react
+```
+
+## 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.
+
+```jsx
+import { EmbedDirectTemplate } from '@documenso/embed-react';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedDirectTemplate token={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                  |
+| externalId          | string (optional)   | The external ID to be used for the document that will be created upon completion           |
+| 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 has been signed                       |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field has been unsigned                     |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `EmbedSignDocument` component.
+
+```jsx
+import { EmbedSignDocument } from '@documenso/embed-react';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedSignDocument token={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/solid.mdx

@@ -0,0 +1,77 @@
+---
+title: Solid.js Integration
+description: Learn how to use our embedding SDK within your Solid.js application.
+---
+
+# Solid.js Integration
+
+Our Solid.js SDK provides a simple way to embed a signing experience within your Solid.js application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-solid
+```
+
+## 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.
+
+```jsx
+import { EmbedDirectTemplate } from '@documenso/embed-solid';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedDirectTemplate token={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                  |
+| externalId          | string (optional)   | The external ID to be used for the document that will be created upon completion           |
+| 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 has been signed                       |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field has been unsigned                     |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `EmbedSignDocument` component.
+
+```jsx
+import { EmbedSignDocument } from '@documenso/embed-solid';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedSignDocument token={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/svelte.mdx

@@ -0,0 +1,79 @@
+---
+title: Svelte Integration
+description: Learn how to use our embedding SDK within your Svelte application.
+---
+
+# Svelte Integration
+
+Our Svelte SDK provides a simple way to embed a signing experience within your Svelte application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-svelte
+```
+
+## 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.
+
+```html
+<script lang="ts">
+  import { EmbedDirectTemplate } from '@documenso/embed-svelte';
+
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+</script>
+
+<template>
+  <EmbedDirectTemplate {token} />
+</template>
+```
+
+#### 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                  |
+| externalId          | string (optional)   | The external ID to be used for the document that will be created upon completion           |
+| 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 has been signed                       |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field has been unsigned                     |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `EmbedSignDocument` component.
+
+```jsx
+import { EmbedSignDocument } from '@documenso/embed-svelte';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedSignDocument token={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/vue.mdx

@@ -0,0 +1,79 @@
+---
+title: Vue Integration
+description: Learn how to use our embedding SDK within your Vue application.
+---
+
+# Vue Integration
+
+Our Vue SDK provides a simple way to embed a signing experience within your Vue application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-vue
+```
+
+## 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.
+
+```html
+<script setup lang="ts">
+  import { EmbedDirectTemplate } from '@documenso/embed-vue';
+
+  const token = ref('YOUR_TOKEN_HERE'); // Replace with the actual token
+</script>
+
+<template>
+  <EmbedDirectTemplate :token="token" />
+</template>
+```
+
+#### 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                  |
+| externalId          | string (optional)   | The external ID to be used for the document that will be created upon completion           |
+| 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 has been signed                       |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field has been unsigned                     |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `EmbedSignDocument` component.
+
+```jsx
+import { EmbedSignDocument } from '@documenso/embed-vue';
+
+const MyEmbeddingComponent = () => {
+  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
+
+  return <EmbedSignDocument token={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/local-development/_meta.json

@@ -3,5 +3,6 @@
   "quickstart": "Developer Quickstart",
   "manual": "Manual Setup",
   "gitpod": "Gitpod",
-  "signing-certificate": "Signing Certificate"
-}
+  "signing-certificate": "Signing Certificate",
+  "translations": "Translations"
+}

apps/documentation/pages/developers/local-development/translations.mdx

@@ -0,0 +1,128 @@
+---
+title: Translations
+description: Handling translations in code.
+---
+
+# About
+
+Documenso uses the following stack to handle translations:
+
+- [Lingui](https://lingui.dev/) - React i10n library
+- [Crowdin](https://crowdin.com/) - Handles syncing translations
+- [OpenAI](https://openai.com/) - Provides AI translations
+
+Additional reading can be found in the [Lingui documentation](https://lingui.dev/introduction).
+
+## Requirements
+
+You **must** insert **`setupI18nSSR()`** when creating any of the following files:
+
+- Server layout.tsx
+- Server page.tsx
+- Server loading.tsx
+
+Server meaning it does not have `'use client'` in it.
+
+```tsx
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
+export default function SomePage() {
+  setupI18nSSR(); // Required if there are translations within the page, or nested in components.
+
+  // Rest of code...
+}
+```
+
+Additional information can be found [here.](https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui)
+
+## Quick guide
+
+If you require more in-depth information, please see the [Lingui documentation](https://lingui.dev/introduction).
+
+### HTML
+
+Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/macro** (not @lingui/react).
+
+```html
+<h1>
+  <Trans>Title</Trans>
+</h1>
+```
+
+For text that is broken into elements, but represent a whole sentence, you must wrap it in a Trans tag so ensure the full message is extracted correctly.
+
+```html
+<h1>
+  <Trans>
+    This is one
+    <span className="text-foreground/60">full</span>
+    <a href="https://documenso.com">sentence</a>
+  </Trans>
+</h1>
+```
+
+### Constants outside of react components
+
+```tsx
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+// Wrap text in msg`text to translate` when it's in a constant here, or another file/package.
+export const CONSTANT_WITH_MSG = {
+  foo: msg`Hello`,
+  bar: msg`World`,
+};
+
+export const SomeComponent = () => {
+  const { _ } = useLingui();
+
+  return (
+    <div>
+      {/* This will render the correct translated text. */}
+      <p>{_(CONSTANT_WITH_MSG.foo)}</p>
+    </div>
+  );
+};
+```
+
+### Plurals
+
+Lingui provides a Plural component to make it easy. See full documentation [here.](https://lingui.dev/ref/macro#plural-1)
+
+```tsx
+// Basic usage.
+<Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+```
+
+### Dates
+
+Lingui provides a [DateTime instance](https://lingui.dev/ref/core#i18n.date) with the configured locale.
+
+#### Server components
+
+Note that the i18n instance is coming from **setupI18nSSR**.
+
+```tsx
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+export const SomeComponent = () => {
+  const { i18n } = setupI18nSSR();
+
+  return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
+};
+```
+
+#### Client components
+
+Note that the i18n instance is coming from the **import**.
+
+```tsx
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+export const SomeComponent = () => {
+  return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
+};
+```

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

@@ -15,7 +15,7 @@ The signature field collects the signer's signature. It's required for each reci
 
 The field doesn't have any additional settings. You just need to place it on the document where you want the signer to sign.
 
-![The signature field in the Documenso document editor](public/document-signing/signature-field-document-editor-view.webp)
+![The signature field in the Documenso document editor](/document-signing/signature-field-document-editor-view.webp)
 
 ### Document Signing View
 
@@ -23,11 +23,11 @@ The recipient will see the signature field when they open the document to sign.
 
 The recipient must click on the signature field to open the signing view, where they can sign using their mouse, touchpad, or touchscreen.
 
-![The signature field in the Documenso document signing view](public/document-signing/signature-field-document-signing-view.webp)
+![The signature field in the Documenso document signing view](/document-signing/signature-field-document-signing-view.webp)
 
 The image below shows the signature field signed by the recipient.
 
-![The signature field signed by the user in the Documenso document signing view](public/document-signing/signed-signature-field.webp)
+![The signature field signed by the user in the Documenso document signing view](/document-signing/signed-signature-field.webp)
 
 After signing, the recipient can click the "Complete" button to complete the signing process.
 
@@ -39,7 +39,7 @@ The email field is used to collect the signer's email address.
 
 The field doesn't have any additional settings. You just need to place it on the document where you want the signer to sign.
 
-![The email field in the Documenso document editor](public/document-signing/email-field-document-editor-view.webp)
+![The email field in the Documenso document editor](/document-signing/email-field-document-editor-view.webp)
 
 ### Document Signing View
 
@@ -47,11 +47,11 @@ When the recipient opens the document to sign, they will see the email field.
 
 The recipient must click on the email field to automatically sign the field with the email associated with their account.
 
-![The email field in the Documenso document signing view](public/document-signing/email-field-document-signing-view.webp)
+![The email field in the Documenso document signing view](/document-signing/email-field-document-signing-view.webp)
 
 The image below shows the email field signed by the recipient.
 
-![The email field signed by the user in the Documenso document signing view](public/document-signing/signed-email-field.webp)
+![The email field signed by the user in the Documenso document signing view](/document-signing/signed-email-field.webp)
 
 After entering their email address, the recipient can click the "Complete" button to complete the signing process.
 
@@ -63,7 +63,7 @@ The name field is used to collect the signer's name.
 
 The field doesn't have any additional settings. You just need to place it on the document where you want the signer to sign.
 
-![The name field in the Documenso document editor](public/document-signing/name-field-document-editor-view.webp)
+![The name field in the Documenso document editor](/document-signing/name-field-document-editor-view.webp)
 
 ### Document Signing View
 
@@ -71,11 +71,11 @@ When the recipient opens the document to sign, they will see the name field.
 
 The recipient must click on the name field, which will automatically sign the field with the name associated with their account.
 
-![The name field in the Documenso document signing view](public/document-signing/name-field-document-signing-view.webp)
+![The name field in the Documenso document signing view](/document-signing/name-field-document-signing-view.webp)
 
 The image below shows the name field signed by the recipient.
 
-![The name field signed by the user in the Documenso document signing view](public/document-signing/name-field-signed.webp)
+![The name field signed by the user in the Documenso document signing view](/document-signing/name-field-signed.webp)
 
 After entering their name, the recipient can click the "Complete" button to complete the signing process.
 
@@ -87,7 +87,7 @@ The date field is used to collect the date of the signature.
 
 The field doesn't have any additional settings. You just need to place it on the document where you want the signer to sign.
 
-![The date field in the Documenso document editor](public/document-signing/date-field-document-editor-view.webp)
+![The date field in the Documenso document editor](/document-signing/date-field-document-editor-view.webp)
 
 ### Document Signing View
 
@@ -95,11 +95,11 @@ When the recipient opens the document to sign, they will see the date field.
 
 The recipient must click on the date field to automatically sign the field with the current date and time.
 
-![The date field in the Documenso document signing view](public/document-signing/date-field-document-signing-view.webp)
+![The date field in the Documenso document signing view](/document-signing/date-field-document-signing-view.webp)
 
 The image below shows the date field signed by the recipient.
 
-![The date field signed by the user in the Documenso document signing view](public/document-signing/date-field-signed.webp)
+![The date field signed by the user in the Documenso document signing view](/document-signing/date-field-signed.webp)
 
 After entering the date, the recipient can click the "Complete" button to complete the signing process.
 
@@ -111,11 +111,11 @@ The text field is used to collect text input from the signer.
 
 Place the text field on the document where you want the signer to enter text. The text field comes with additional settings that can be configured.
 
-![The text field in the Documenso document editor](public/document-signing/text-field-document-editor-view.webp)
+![The text field in the Documenso document editor](/document-signing/text-field-document-editor-view.webp)
 
 To open the settings, click on the text field and then on the "Sliders" icon. That opens the settings panel on the right side of the screen.
 
-![The text field settings in the Documenso document editor](public/document-signing/text-field-advanced-settings-document-editor-view.webp)
+![The text field settings in the Documenso document editor](/document-signing/text-field-advanced-settings-document-editor-view.webp)
 
 The text field settings include:
 
@@ -137,7 +137,7 @@ It also comes with a couple of rules:
 
 Let's look at the following example.
 
-![A text field with the settings configured by the user in the Documenso document editor](public/document-signing/text-field-with-filled-advanced-settings.webp)
+![A text field with the settings configured by the user in the Documenso document editor](/document-signing/text-field-with-filled-advanced-settings.webp)
 
 The field is configured as follows:
 
@@ -156,23 +156,23 @@ What the recipient sees when they open the document to sign depends on the setti
 
 In this case, the recipient sees the text field signed with the default value.
 
-![Text field with the default value signed by the user in the Documenso document signing view](public/document-signing/text-field-autosigned.webp)
+![Text field with the default value signed by the user in the Documenso document signing view](/document-signing/text-field-autosigned.webp)
 
 The recipient can modify the text field value since the field is not read-only. To change the value, the recipient must click the field to un-sign it.
 
 Once it's unsigned, the field uses the label set by the sender.
 
-![Unsigned text field in the Documenso document signing view](public/document-signing/text-field-unsigned.webp)
+![Unsigned text field in the Documenso document signing view](/document-signing/text-field-unsigned.webp)
 
 To sign the field with a different value, the recipient needs to click on the field and enter the new value.
 
-![Text field with the text input in the Documenso document signing view](public/document-signing/text-field-input-modal.webp)
+![Text field with the text input in the Documenso document signing view](/document-signing/text-field-input-modal.webp)
 
 Since the text field has a character limit, the recipient must enter a value that doesn't exceed the limit. Otherwise, an error message will appear, and the field will not be signed.
 
 The image below illustrates the text field signed with a new value.
 
-![Text field signed with a new value](public/document-signing/text-field-new-value-signed.webp)
+![Text field signed with a new value](/document-signing/text-field-new-value-signed.webp)
 
 After signing the field, the recipient can click the "Complete" button to complete the signing process.
 
@@ -184,11 +184,11 @@ The number field is used for collecting a number input from the signer.
 
 Place the number field on the document where you want the signer to enter a number. The number field comes with additional settings that can be configured.
 
-![The number field in the Documenso document editor](public/document-signing/number-field-document-editor.webp)
+![The number field in the Documenso document editor](/document-signing/number-field-document-editor.webp)
 
 To open the settings, click on the number field and then on the "Sliders" icon. That opens the settings panel on the right side of the screen.
 
-![The number field in the Documenso document editor](public/document-signing/number-field-document-editor-view.webp)
+![The number field in the Documenso document editor](/document-signing/number-field-document-editor-view.webp)
 
 The number field settings include:
 
@@ -221,7 +221,7 @@ In this example, the number field is configured as follows:
 - Validation:
 - Min value: 5, Max value: 50
 
-![A number field with the label configured by the user in the Documenso document editor](public/document-signing/number-field-label.webp)
+![A number field with the label configured by the user in the Documenso document editor](/document-signing/number-field-label.webp)
 
 Since the field has a label set, the label is displayed instead of the default number field value - "Add number".
 
@@ -231,23 +231,23 @@ What the recipient sees when they open the document to sign depends on the setti
 
 The recipient sees the number field signed with the default value in this case.
 
-![Number field with the default value signed by the user in the Documenso document signing view](public/document-signing/number-field-autosigned.webp)
+![Number field with the default value signed by the user in the Documenso document signing view](/document-signing/number-field-autosigned.webp)
 
 Since the number field is not read-only, the recipient can modify its value. To change the value, the recipient must click the field to un-sign it.
 
 Once it's unsigned, the field uses the label set by the sender.
 
-![Unsigned number field in the Documenso document signing view](public/document-signing/number-field-unsigned.webp)
+![Unsigned number field in the Documenso document signing view](/document-signing/number-field-unsigned.webp)
 
 To sign the field with a different value, the recipient needs to click on the field and enter the new value.
 
-![Number field with the number input in the Documenso document signing view](public/document-signing/number-field-input-modal.webp)
+![Number field with the number input in the Documenso document signing view](/document-signing/number-field-input-modal.webp)
 
 Since the number field has a validation rule set, the recipient must enter a value that meets the rules. In this example, the value needs to be between 5 and 50. Otherwise, an error message will appear, and the field will not be signed.
 
 The image below illustrates the text field signed with a new value.
 
-![Number field signed with a new value](public/document-signing/number-field-signed-with-another-value.webp)
+![Number field signed with a new value](/document-signing/number-field-signed-with-another-value.webp)
 
 After signing the field, the recipient can click the "Complete" button to complete the signing process.
 
@@ -259,11 +259,11 @@ The radio field is used to collect a single choice from the signer.
 
 Place the radio field on the document where you want the signer to select a choice. The radio field comes with additional settings that can be configured.
 
-![The radio field in the Documenso document editor](public/document-signing/radio-field-document-editor-view.webp)
+![The radio field in the Documenso document editor](/document-signing/radio-field-document-editor-view.webp)
 
 To open the settings, click on the radio field and then on the "Sliders" icon. That opens the settings panel on the right side of the screen.
 
-![The radio field advanced settings in the Documenso document editor](public/document-signing/radio-field-advanced-settings-document-editor-view.webp)
+![The radio field advanced settings in the Documenso document editor](/document-signing/radio-field-advanced-settings-document-editor-view.webp)
 
 The radio field settings include:
 
@@ -293,7 +293,7 @@ In this example, the radio field is configured as follows:
   - Empty value
   - Option 3
 
-![The radio field with the settings configured by the user in the Documenso document editor](public/document-signing/radio-field-options-document-editor-view.webp)
+![The radio field with the settings configured by the user in the Documenso document editor](/document-signing/radio-field-options-document-editor-view.webp)
 
 Since the field contains radio options, it displays them instead of the default radio field value, "Radio".
 
@@ -303,11 +303,11 @@ What the recipient sees when they open the document to sign depends on the setti
 
 In this case, the recipient sees the radio field unsigned because the sender didn't select a value.
 
-![Radio field with no value selected in the Documenso document signing view](public/document-signing/radio-field-unsigned.webp)
+![Radio field with no value selected in the Documenso document signing view](/document-signing/radio-field-unsigned.webp)
 
 The recipient can select one of the options by clicking on the radio button next to the option.
 
-![Radio field with the value selected by the user in the Documenso document signing view](public/document-signing/radio-field-signed.webp)
+![Radio field with the value selected by the user in the Documenso document signing view](/document-signing/radio-field-signed.webp)
 
 After signing the field, the recipient can click the "Complete" button to complete the signing process.
 
@@ -319,11 +319,11 @@ The checkbox field is used to collect multiple choices from the signer.
 
 Place the checkbox field on the document where you want the signer to select choices. The checkbox field comes with additional settings that can be configured.
 
-![The checkbox field in the Documenso document editor](public/document-signing/checkbox-document-editor-view.webp)
+![The checkbox field in the Documenso document editor](/document-signing/checkbox-document-editor-view.webp)
 
 To open the settings, click on the checkbox field and then on the "Sliders" icon. That opens the settings panel on the right side of the screen.
 
-![The checkbox field settings in the Documenso document editor](public/document-signing/checkbox-advanced-settings.webp)
+![The checkbox field settings in the Documenso document editor](/document-signing/checkbox-advanced-settings.webp)
 
 The checkbox field settings include the following:
 
@@ -356,7 +356,7 @@ In this example, the checkbox field is configured as follows:
   - Option 3 (checked)
   - Empty value
 
-![The checkbox field with the settings configured by the user in the Documenso document editor](public/document-signing/checkbox-advanced-settings-document-editor-view.webp)
+![The checkbox field with the settings configured by the user in the Documenso document editor](/document-signing/checkbox-advanced-settings-document-editor-view.webp)
 
 Since the field contains checkbox options, it displays them instead of the default checkbox field value, "Checkbox".
 
@@ -366,7 +366,7 @@ What the recipient sees when they open the document to sign depends on the setti
 
 In this case, the recipient sees the checkbox field signed with the values selected by the sender.
 
-![Checkbox field with the values selected by the user in the Documenso document signing view](public/document-signing/checkbox-field-document-signing-view.webp)
+![Checkbox field with the values selected by the user in the Documenso document signing view](/document-signing/checkbox-field-document-signing-view.webp)
 
 Since the field is required, the recipient can either sign with the values selected by the sender or modify the values.
 
@@ -377,11 +377,11 @@ The values can be modified in 2 ways:
 
 The image below illustrates the checkbox field with the values cleared by the recipient. Since the field is required, it has a red border instead of the yellow one (non-required fields).
 
-![Checkbox field the values cleared by the user in the Documenso document signing view](public/document-signing/checkbox-field-unsigned.webp)
+![Checkbox field the values cleared by the user in the Documenso document signing view](/document-signing/checkbox-field-unsigned.webp)
 
 Then, the recipient can select values other than the ones chosen by the sender.
 
-![Checkbox field with the values selected by the user in the Documenso document signing view](public/document-signing/checkbox-field-custom-sign.webp)
+![Checkbox field with the values selected by the user in the Documenso document signing view](/document-signing/checkbox-field-custom-sign.webp)
 
 After signing the field, the recipient can click the "Complete" button to complete the signing process.
 
@@ -393,11 +393,11 @@ The dropdown/select field collects a single choice from a list of options.
 
 Place the dropdown/select field on the document where you want the signer to select a choice. The dropdown/select field comes with additional settings that can be configured.
 
-![The dropdown/select field in the Documenso document editor](public/document-signing/select-field-sliders.webp)
+![The dropdown/select field in the Documenso document editor](/document-signing/select-field-sliders.webp)
 
 To open the settings, click on the dropdown/select field and then on the "Sliders" icon. That opens the settings panel on the right side of the screen.
 
-![The dropdown/select field settings in the Documenso document editor](public/document-signing/select-field-advanced-settings-panel.webp)
+![The dropdown/select field settings in the Documenso document editor](/document-signing/select-field-advanced-settings-panel.webp)
 
 The dropdown/select field settings include:
 
@@ -433,14 +433,14 @@ What the recipient sees when they open the document to sign depends on the setti
 
 In this case, the recipient sees the dropdown/select field with the default label, "-- Select ---" since the sender has not set a default value.
 
-![Dropdown/select field  in the Documenso document signing view](public/document-signing/select-field-unsigned.webp)
+![Dropdown/select field  in the Documenso document signing view](/document-signing/select-field-unsigned.webp)
 
 The recipient can modify the dropdown/select field value since the field is not read-only. To change the value, the recipient must click on the field for the dropdown list to appear.
 
-![Dropdown/select field with the dropdown list in the Documenso document signing view](public/document-signing/select-field-unsigned-dropdown.webp)
+![Dropdown/select field with the dropdown list in the Documenso document signing view](/document-signing/select-field-unsigned-dropdown.webp)
 
 The recipient can select one of the options from the list. The image below illustrates the dropdown/select field signed with a new value.
 
-![Dropdown/select field signed with a value](public/document-signing/select-field-signed.webp)
+![Dropdown/select field signed with a value](/document-signing/select-field-signed.webp)
 
 After signing the field, the recipient can click the "Complete" button to complete the signing process.

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

@@ -18,17 +18,17 @@ The guide assumes you have a Documenso account. If you don't, you can create a f
 
 Navigate to the [Documenso dashboard](https://app.documenso.com/documents) and click on the "Add a document" button. Select the document you want to upload and wait for the upload to complete.
 
-![Documenso dashboard](public/document-signing/documenso-documents-dashboard.webp)
+![Documenso dashboard](/document-signing/documenso-documents-dashboard.webp)
 
 After the upload is complete, you will be redirected to the document's page. You can configure the document's settings and add recipients and fields here.
 
-![Documenso document overview](public/document-signing/documenso-uploaded-document.webp)
+![Documenso document overview](/document-signing/documenso-uploaded-document.webp)
 
 ### (Optional) Advanced Options
 
 Click on the "Advanced options" button to access additional settings for the document. You can set an external ID, date format, time zone, and the redirect URL.
 
-![Advanced settings for a document uploaded in the Documenso dashboard](public/document-signing/documenso-uploaded-document-advanced-options.webp)
+![Advanced settings for a document uploaded in the Documenso dashboard](/document-signing/documenso-uploaded-document-advanced-options.webp)
 
 The external ID allows you to set a custom ID for the document that can be used to identify the document in your external system(s).
 
@@ -45,7 +45,7 @@ The available options are:
 - **Require account** - The recipient must be signed in to view the document.
 - **None** - The document can be accessed directly by the URL sent to the recipient.
 
-![Document access settings in the Documenso dashboard](public/document-signing/documenso-enterprise-document-access.webp)
+![Document access settings in the Documenso dashboard](/document-signing/documenso-enterprise-document-access.webp)
 
 <Callout type="info">
   The "Document Access" feature is only available for Enterprise accounts.
@@ -61,7 +61,7 @@ The available options are:
 - **Require 2FA** - The recipient must have an account and 2FA enabled via their settings.
 - **None** - No authentication required.
 
-![Document recipient action authentication in the Documenso dashboard](public/document-signing/document-enterprise-recipient-action-authentication.webp)
+![Document recipient action authentication in the Documenso dashboard](/document-signing/document-enterprise-recipient-action-authentication.webp)
 
 This can be overridden by setting the authentication requirements directly for each recipient in the next step.
 
@@ -75,11 +75,11 @@ Click the "+ Add Signer" button to add a new recipient. You can configure the re
 
 You can choose any option from the ["Recipient Authentication"](#optional-recipient-authentication) section, or you can set it to "Inherit authentication method" to use the global action signing authentication method configured in the "General Settings" step.
 
-![The required authentication method for a recipient](public/document-signing/documenso-document-recipient-authentication-method.webp)
+![The required authentication method for a recipient](/document-signing/documenso-document-recipient-authentication-method.webp)
 
 You can also set the recipient's role, which determines their actions and permissions in the document.
 
-![The recipient role](public/document-signing/documenso-document-recipient-role.webp)
+![The recipient role](/document-signing/documenso-document-recipient-role.webp)
 
 #### Roles
 
@@ -96,7 +96,7 @@ Documenso has 4 roles for recipients with different permissions and actions.
 
 Documenso supports 9 different field types that can be added to the document. Each field type collects various information from the recipients when they sign the document.
 
-![The available field types in the Documenso dashboard](public/document-signing/documenso-document-fields.webp)
+![The available field types in the Documenso dashboard](/document-signing/documenso-document-fields.webp)
 
 The available field types are:
 
@@ -121,13 +121,13 @@ All fields can be placed anywhere on the document and resized as needed.
 
 Signer Roles require at least 1 signature field. You will get an error message if you try to send a document without a signature field.
 
-![Error message when trying to send a document without a signature field](public/document-signing/documenso-no-signature-field-found.webp)
+![Error message when trying to send a document without a signature field](/document-signing/documenso-no-signature-field-found.webp)
 
 ### Email Settings
 
 Before sending the document, you can configure the email settings and customize the subject line, message, and sender name.
 
-![Email settings in the Documenso dashboard](public/document-signing/documenso-document-email-settings.webp)
+![Email settings in the Documenso dashboard](/document-signing/documenso-document-email-settings.webp)
 
 If you leave the email subject and message empty, Documenso will use the default email template.
 
@@ -135,13 +135,13 @@ If you leave the email subject and message empty, Documenso will use the default
 
 After configuring the document, click the "Send" button to send the document to the recipients. The recipients will receive an email with a link to sign the document.
 
-![The email sent to the recipients with the signing link](public/document-signing/documenso-sign-email.webp)
+![The email sent to the recipients with the signing link](/document-signing/documenso-sign-email.webp)
 
 #### Signing Link
 
 If you need to copy the signing link for each recipient, you can do so by clicking on the recipient whose link you want to copy. The signing link is copied automatically to your clipboard.
 
-![How to copy the signing link for each recipient from the Documenso dashboard](public/document-signing/documenso-signing-links.webp)
+![How to copy the signing link for each recipient from the Documenso dashboard](/document-signing/documenso-signing-links.webp)
 
 The signing link has the following format:
 

apps/documentation/pages/users/templates.mdx

@@ -10,15 +10,15 @@ Documenso allows you to create templates, which are reusable documents. Template
 
 To create a new template, navigate to the ["Templates" page](https://app.documenso.com/templates) and click on the "New Template" button.
 
-![Documenso template page](public/templates/documenso-template-page.webp)
+![Documenso template page](/templates/documenso-template-page.webp)
 
 Clicking on the "New Template" button opens a new modal to upload the document you want to use as a template. Select the document and wait for Documenso to upload it to your account.
 
-![Upload a new template document in the Documenso dashboard](public/templates/documenso-template-page-upload-document.webp)
+![Upload a new template document in the Documenso dashboard](/templates/documenso-template-page-upload-document.webp)
 
 Once the upload is complete, Documenso opens the template configuration page.
 
-![A successfuly uploaded document in the Documenso dashboard](public/templates/documenso-template-page-uploaded-document.webp)
+![A successfuly uploaded document in the Documenso dashboard](/templates/documenso-template-page-uploaded-document.webp)
 
 You can then configure the template by adding recipients, fields, and other options.
 
@@ -28,7 +28,7 @@ When you send a document for signing, Documenso emails the recipients with a lin
 
 Documenso uses a generic subject and message but also allows you to customize them for each document and template.
 
-![Configuring the email options for the Documenso template](public/templates/documenso-template-page-uploaded-document-email-options.webp)
+![Configuring the email options for the Documenso template](/templates/documenso-template-page-uploaded-document-email-options.webp)
 
 To configure the email options, click the "Email Options" tab and fill in the subject and message fields. Every time you use this template for signing, Documenso will use the custom subject and message you provided. They can also be overridden before sending the document.
 
@@ -36,7 +36,7 @@ To configure the email options, click the "Email Options" tab and fill in the su
 
 The template also has advanced options that you can configure. These options include settings such as the external ID, date format, time zone and the redirect URL.
 
-![Configuring the advanced options for the Documenso template](public/templates/documenso-template-page-uploaded-document-advanced-options.webp)
+![Configuring the advanced options for the Documenso template](/templates/documenso-template-page-uploaded-document-advanced-options.webp)
 
 The external ID allows you to set a custom ID for the document that can be used to identify the document in your external system(s).
 
@@ -50,7 +50,7 @@ You can add placeholders for the template recipients. Placeholders specify where
 
 You can also add recipients directly to the template. Recipients are the people who will receive the document for signing.
 
-![Adding placeholder recipients for the Documenso template](public/templates/documenso-template-recipients.webp)
+![Adding placeholder recipients for the Documenso template](/templates/documenso-template-recipients.webp)
 
 If you add placeholders to the template, you must replace them with actual recipients when creating a document from it. See the modal from the ["Use a Template"](#use-a-template) section.
 
@@ -70,7 +70,7 @@ Documenso provides the following field types:
 - **Checkbox** - Collects multiple choices from the signer
 - **Dropdown/Select** - Collects a single choice from a list of choices
 
-![Adding fields for the Documenso template](public/templates/documenso-template-page-fields.webp)
+![Adding fields for the Documenso template](/templates/documenso-template-page-fields.webp)
 
 After adding the fields, press the "Save Template" button to save the template.
 
@@ -85,7 +85,7 @@ Click on the "Use Template" button to create a new document from the template. B
 
 After filling in the recipients, click the "Create Document" button to create the document in your account.
 
-![Use an available Documenso template](public/templates/documenso-use-template.webp)
+![Use an available Documenso template](/templates/documenso-use-template.webp)
 
 You can also send the document straight to the recipients for signing by checking the "Send document" checkbox.
 

apps/marketing/content/blog/introducing-embedding.mdx

@@ -0,0 +1,72 @@
+---
+title: 'Introducing Embedding Support for Documenso'
+description: 'Embedding is now here! Learn how we built it and how it can be used to bring e-signing to your own applications.'
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2024-09-06
+tags:
+  - Development
+---
+
+When we first launched Documenso, one of the most requested features was embedding. We knew it was important and aligned with our desire to not just be a e-signing application but to instead provide the e-signature infrastructure for the web and beyond.
+
+With that said, we decided to hold off initially so we could focus on building a solid, well-featured core application. Looking back, this was definitely the right call. Embedding is only as good as the features behind it, and we didn't want to release something that wasn't ready to meet user and developer expectations.
+
+Over the past year, we've been busy adding tons of new features and reaching new levels of compliance, like 21 CFR Part 11. We've also introduced [new fields](/blog/introducing-advanced-signing-fields), [built out an API](/blog/public-api), [added webhooks, integrations with Zapier](/blog/launch-week-2-day-4), and a lot more.
+
+Now that we've laid a solid foundation, it's finally time to focus on embedding, the top-requested feature from both our users and those self-hosting our platform.
+
+## Why Embedding Took Time
+
+In previous projects, I’ve often seen embedding built by bundling components for use in a client’s website or app. This method gives users maximum flexibility for styling and behavior, while avoiding certain cross-origin issues. However, it can also introduce problems like code conflicts or performance bottlenecks. For example, third-party tools such as Google Tag Manager (GTM) or other marketing scripts can interfere with your SDK. Additionally, the SDK must remain lightweight to avoid slowing down the client’s page.
+
+For Documenso, we decided to explore a different approach. After carefully researching our options, we opted for an iframe-based solution. While iframes are typically less flexible—especially when it comes to theming or passing pre-filled data containing personally identifiable information (PII)—we identified ways to mitigate these concerns.
+
+One of the biggest challenges was ensuring that we could pass sensitive data, like emails for pre-filling forms, without exposing PII to our server. To solve this, we used [fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) in the URL, which are processed client-side and never sent in network requests. This method ensures that PII is protected and not logged by our server or any intermediate web services.
+
+### Using the PostMessage API for Communication
+
+To maintain a high level of interactivity, our iframes communicate with the parent window using the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). This allows us to notify the parent app when specific events occur inside the iframe, creating a more dynamic user experience and bridging the gap between our iframe-based solution and typical fat SDKs.
+
+Additionally, props are passed into the iframe via the [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) of the URL. This avoids the need for complex two-way data synchronization between the parent and child frames, making the system stable and more reliable.
+
+### Building the Embeds with Mitosis
+
+Given that our iframe solution is quite lightweight, we saw this as a great opportunity to experiment with [Mitosis](https://mitosis.builder.io/) which would let us do something truly special. For those unfamiliar, Mitosis is a project by Builder.io that lets you write components once and then transpile them into a variety of frameworks like React, Vue, and Svelte.
+
+We used Mitosis to build two key components: a direct template embed and a document signing embed. The direct template allows users to use a template as if it were an evergreen document—meaning that, when someone completes the template, a new document is automatically generated. This is the use case we expect most users to adopt for embedding. For more advanced workflows, we also offer a document signing embed, which can handle multi-recipient workflows and other complex scenarios intended for use in deeper, rich integrations.
+
+Mitosis allowed us to quickly target several popular frameworks, including [React](https://www.npmjs.com/package/@documenso/embed-react), [Preact](https://www.npmjs.com/package/@documenso/embed-preact), [Vue](https://www.npmjs.com/package/@documenso/embed-vue), [Svelte](https://www.npmjs.com/package/@documenso/embed-svelte), and [SolidJS](https://www.npmjs.com/package/@documenso/embed-solid).
+
+I had also hoped to include Angular, but while Mitosis makes it really easy to transpile component, we still have to take care of bundling and packaging the resulting component ourselves. While the above frameworks can all be bundled using Vite.js, Angular still has it's own set of tooling that we would need to learn and use. Given this constraint we opted to put Angular on hold for now while we wait for the newer Vite.js support to mature.
+
+### Challenges and Lessons with Mitosis and more
+
+While our experience with Mitosis was largely positive, there were some challenges along the way. For instance, certain state properties with the same names as props caused issues during the transpilation process, leading to type errors and unexpected transpilation results with some targets.
+
+This was also a challenge since our initial implementation of the two components had some minor separation of concerns which also resulted in some transpilation issues with some targets. We addressed this by removing the separation of concerns for now since it was mostly for show rather than out of necessity.
+
+On top of that, packaging and publishing the embeds posed its own set of challenges, particularly given the growing complexity of JavaScript package management. Tools like [Publint](https://www.npmjs.com/package/publint) helped streamline the process by ensuring we followed best practices for both CommonJS and ESM formats.
+
+### To the Future, The Documenso Platform
+
+With the embedding feature now in place, we're excited to continue expanding Documenso's capabilities. Embeds are just the beginning of what we're calling the Documenso platform. Through our user research, we've learned that while many businesses appreciate having a flexible e-signature solution, they're even more interested in using our tools to build signing functionality directly into their own apps—without worrying about the technical complexities of compliance and security that come with e-signing.
+
+Over the coming months, we'll be working on enhancing our API, strengthening integrations with tools like Zapier, and improving our webhook system. Our goal is to give users the ability to embed e-signatures and document management wherever they need it, whether that's through self-hosting or by using Documenso as a platform. We can't wait to see how our users and self-hosters leverage these new capabilities!
+
+### Ready to Get Started?
+
+If you're ready to embed document signing into your own app or website, check out our [Embedding Documentation](https://docs.documenso.com/developers/embedding?utm_source=blog&utm_campaign=introducing-embedding) to see how easy it is to get started. You'll find everything you need to get started today!
+
+<video
+  src="/blog/introducing-embedding/embedding-demo.mp4"
+  className="aspect-video w-full"
+  autoPlay
+  loop
+  controls
+/>
+
+We're always here to help! If you have questions or need support, join our [Discord](https://documen.so/discord) or [book a demo](https://documen.so/book-a-demo). We'd love to hear how you're using Documenso or wanting to use Documenso to enhance your workflow.
+
+Stay tuned for more updates as we continue to evolve the Documenso platform and make it even easier to bring document signing into your workflows.

apps/marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.7.0-rc.2",
+  "version": "1.7.0-rc.5",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -20,7 +20,8 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/react": "^4.11.1",
+    "@lingui/macro": "^4.11.3",
+    "@lingui/react": "^4.11.3",
     "@openstatus/react": "^0.0.3",
     "cmdk": "^0.2.1",
     "contentlayer": "^0.3.4",
@@ -31,16 +32,16 @@
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "next": "14.0.3",
+    "next": "14.2.6",
     "next-auth": "4.24.5",
     "next-axiom": "^1.1.1",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",
     "posthog-js": "^1.77.3",
-    "react": "18.2.0",
+    "react": "^18",
     "react-confetti": "^6.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
@@ -49,18 +50,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@lingui/loader": "^4.11.1",
-    "@lingui/swc-plugin": "4.0.6",
+    "@lingui/loader": "^4.11.3",
+    "@lingui/swc-plugin": "4.0.8",
     "@types/node": "20.1.0",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7"
-  },
-  "overrides": {
-    "next-auth": {
-      "next": "$next"
-    },
-    "next-contentlayer": {
-      "next": "$next"
-    }
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
   }
 }

apps/marketing/process-env.d.ts

@@ -2,7 +2,8 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     NEXT_PUBLIC_WEBAPP_URL?: string;
     NEXT_PUBLIC_MARKETING_URL?: string;
-
+    NEXT_PRIVATE_INTERNAL_WEBAPP_URL?:string;
+    
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;

apps/marketing/src/app/(marketing)/[content]/page.tsx

@@ -5,6 +5,8 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {
@@ -29,6 +31,8 @@ const mdxComponents: MDXComponents = {
  * Will render the document if it exists, otherwise will return a 404.
  */
 export default function ContentPage({ params }: { params: { content: string } }) {
+  setupI18nSSR();
+
   const post = allDocuments.find((post) => post._raw.flattenedPath === params.content);
 
   if (!post) {

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -7,6 +7,8 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 export const dynamic = 'force-dynamic';
@@ -47,6 +49,8 @@ const mdxComponents: MDXComponents = {
 };
 
 export default function BlogPostPage({ params }: { params: { post: string } }) {
+  setupI18nSSR();
+
   const post = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
 
   if (!post) {

apps/marketing/src/app/(marketing)/singleplayer/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { SinglePlayerClient } from './client';
 
 export const metadata: Metadata = {
@@ -13,5 +15,7 @@ export const dynamic = 'force-dynamic';
 // !: the Single Player Mode page. This regression was introduced during
 // !: the upgrade of Next.js to v13.5.x.
 export default function SingleplayerPage() {
+  setupI18nSSR();
+
   return <SinglePlayerClient />;
 }

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.7.0-rc.2",
+  "version": "1.7.0-rc.5",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -23,7 +23,8 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/react": "^4.11.1",
+    "@lingui/macro": "^4.11.3",
+    "@lingui/react": "^4.11.3",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
     "@tanstack/react-query": "^4.29.5",
@@ -34,7 +35,7 @@
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "next": "14.0.3",
+    "next": "14.2.6",
     "next-auth": "4.24.5",
     "next-axiom": "^1.1.1",
     "next-plausible": "^3.10.1",
@@ -43,8 +44,9 @@
     "perfect-freehand": "^1.2.0",
     "posthog-js": "^1.75.3",
     "posthog-node": "^3.1.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18",
+    "react-call": "^1.3.0",
+    "react-dom": "^18",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
     "react-hotkeys-hook": "^4.4.1",
@@ -60,24 +62,16 @@
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",
-    "@lingui/loader": "^4.11.1",
-    "@lingui/swc-plugin": "4.0.6",
+    "@lingui/loader": "^4.11.3",
+    "@lingui/swc-plugin": "4.0.8",
     "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
     "@types/papaparse": "^5.3.14",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@types/ua-parser-js": "^0.7.39",
     "typescript": "5.2.2"
-  },
-  "overrides": {
-    "next-auth": {
-      "next": "$next"
-    },
-    "next-contentlayer": {
-      "next": "$next"
-    }
   }
 }

apps/web/process-env.d.ts

@@ -2,6 +2,7 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     NEXT_PUBLIC_WEBAPP_URL?: string;
     NEXT_PUBLIC_MARKETING_URL?: string;
+    NEXT_PRIVATE_INTERNAL_WEBAPP_URL?:string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

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

@@ -94,7 +94,7 @@ export const DirectTemplatePageView = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
-      const token = await createDocumentFromDirectTemplate({
+      const { token } = await createDocumentFromDirectTemplate({
         directTemplateToken,
         directTemplateExternalId,
         directRecipientName: fullName,

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

@@ -63,6 +63,7 @@ export const SigningPageView = ({
           {document.User.name}
         </p>
       </div>
+
       <p className="text-muted-foreground">
         {match(recipient.role)
           .with(RecipientRole.VIEWER, () => (

apps/web/src/app/embed/authenticate.tsx

@@ -0,0 +1,32 @@
+import { Trans } from '@lingui/macro';
+
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+
+import { Logo } from '~/components/branding/logo';
+import { SignInForm } from '~/components/forms/signin';
+
+export type EmbedAuthenticateViewProps = {
+  email?: string;
+  returnTo: string;
+};
+
+export const EmbedAuthenticateView = ({ email, returnTo }: EmbedAuthenticateViewProps) => {
+  return (
+    <div className="flex min-h-[100dvh] w-full items-center justify-center">
+      <div className="flex w-full max-w-md flex-col">
+        <Logo className="h-8" />
+
+        <Alert className="mt-8" variant="warning">
+          <AlertDescription>
+            <Trans>
+              To view this document you need to be signed into your account, please sign in to
+              continue.
+            </Trans>
+          </AlertDescription>
+        </Alert>
+
+        <SignInForm className="mt-4" initialEmail={email} returnTo={returnTo} />
+      </div>
+    </div>
+  );
+};

apps/web/src/app/embed/base-schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const ZBaseEmbedDataSchema = z.object({
+  css: z.string().optional().transform(value => value || undefined),
+});

apps/web/src/app/embed/client-loading.tsx

@@ -0,0 +1,7 @@
+export const EmbedClientLoading = () => {
+  return (
+    <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
+      Loading...
+    </div>
+  );
+};

apps/web/src/app/embed/completed.tsx

@@ -0,0 +1,33 @@
+import { Trans } from '@lingui/macro';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import type { Signature } from '@documenso/prisma/client';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+
+export type EmbedDocumentCompletedPageProps = {
+  name?: string;
+  signature?: Signature;
+};
+
+export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <h3 className="text-foreground text-2xl font-semibold">
+        <Trans>Document Completed!</Trans>
+      </h3>
+
+      <div className="mt-8 w-full max-w-md">
+        <SigningCard3D
+          className='w-full mx-auto'
+          name={name || 'Documenso'}
+          signature={signature}
+          signingCelebrationImage={signingCelebration}
+        />
+      </div>
+
+      <p className="mt-8 max-w-[50ch] text-center text-muted-foreground text-sm">
+        <Trans>The document is now completed, please follow any instructions provided within the parent application.</Trans>
+      </p>
+    </div>
+  );
+};

apps/web/src/app/embed/direct/[[...url]]/client.tsx

@@ -0,0 +1,456 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useSearchParams } from 'next/navigation';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { DateTime } from 'luxon';
+
+import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type { DocumentMeta, Recipient, TemplateMeta } from '@documenso/prisma/client';
+import { FieldType, type DocumentData, type Field } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import type { DirectTemplateLocalField } from '~/app/(recipient)/d/[token]/sign-direct-template';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+import { Logo } from '~/components/branding/logo';
+
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+import { EmbedClientLoading } from '../../client-loading';
+import { EmbedDocumentCompleted } from '../../completed';
+import { EmbedDocumentFields } from '../../document-fields';
+import { ZDirectTemplateEmbedDataSchema } from './schema';
+
+export type EmbedDirectTemplateClientPageProps = {
+  token: string;
+  updatedAt: Date;
+  documentData: DocumentData;
+  recipient: Recipient;
+  fields: Field[];
+  metadata?: DocumentMeta | TemplateMeta | null;
+};
+
+export const EmbedDirectTemplateClientPage = ({
+  token,
+  updatedAt,
+  documentData,
+  recipient,
+  fields,
+  metadata,
+}: EmbedDirectTemplateClientPageProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const searchParams = useSearchParams();
+
+  const { fullName, email, signature, setFullName, setEmail, setSignature } =
+    useRequiredSigningContext();
+
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+  const [hasCompletedDocument, setHasCompletedDocument] = useState(false);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const [isEmailLocked, setIsEmailLocked] = useState(false);
+  const [isNameLocked, setIsNameLocked] = useState(false);
+
+  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+
+  const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
+
+  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
+
+  const [pendingFields, _completedFields] = [
+    localFields.filter((field) => !field.inserted),
+    localFields.filter((field) => field.inserted),
+  ];
+
+  const { mutateAsync: createDocumentFromDirectTemplate, isLoading: isSubmitting } =
+    trpc.template.createDocumentFromDirectTemplate.useMutation();
+
+  const onSignField = (payload: TSignFieldWithTokenMutationSchema) => {
+    setLocalFields((fields) =>
+      fields.map((field) => {
+        if (field.id !== payload.fieldId) {
+          return field;
+        }
+
+        const newField: DirectTemplateLocalField = structuredClone({
+          ...field,
+          customText: payload.value,
+          inserted: true,
+          signedValue: payload,
+        });
+
+        if (field.type === FieldType.SIGNATURE) {
+          newField.Signature = {
+            id: 1,
+            created: new Date(),
+            recipientId: 1,
+            fieldId: 1,
+            signatureImageAsBase64: payload.value,
+            typedSignature: null,
+          };
+        }
+
+        if (field.type === FieldType.DATE) {
+          newField.customText = DateTime.now()
+            .setZone(metadata?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+            .toFormat(metadata?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+        }
+
+        return newField;
+      }),
+    );
+
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-signed',
+          data: null,
+        },
+        '*',
+      );
+    }
+
+    setShowPendingFieldTooltip(false);
+  };
+
+  const onUnsignField = (payload: TRemovedSignedFieldWithTokenMutationSchema) => {
+    setLocalFields((fields) =>
+      fields.map((field) => {
+        if (field.id !== payload.fieldId) {
+          return field;
+        }
+
+        return structuredClone({
+          ...field,
+          customText: '',
+          inserted: false,
+          signedValue: undefined,
+          Signature: undefined,
+        });
+      }),
+    );
+
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-unsigned',
+          data: null,
+        },
+        '*',
+      );
+    }
+
+    setShowPendingFieldTooltip(false);
+  };
+
+  const onNextFieldClick = () => {
+    validateFieldsInserted(localFields);
+
+    setShowPendingFieldTooltip(true);
+    setIsExpanded(false);
+  };
+
+  const onCompleteClick = async () => {
+    try {
+      const valid = validateFieldsInserted(localFields);
+
+      if (!valid) {
+        setShowPendingFieldTooltip(true);
+        return;
+      }
+
+      let directTemplateExternalId = searchParams?.get('externalId') || undefined;
+
+      if (directTemplateExternalId) {
+        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
+      }
+
+      localFields.forEach((field) => {
+        if (!field.signedValue) {
+          throw new Error('Invalid configuration');
+        }
+      });
+
+      const {
+        documentId,
+        token: documentToken,
+        recipientId,
+      } = await createDocumentFromDirectTemplate({
+        directTemplateToken: token,
+        directTemplateExternalId,
+        directRecipientName: fullName,
+        directRecipientEmail: email,
+        templateUpdatedAt: updatedAt,
+        signedFieldValues: localFields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
+      });
+
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-completed',
+            data: {
+              token: documentToken,
+              documentId,
+              recipientId,
+            },
+          },
+          '*',
+        );
+      }
+
+      setHasCompletedDocument(true);
+    } catch (err) {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-error',
+            data: String(err),
+          },
+          '*',
+        );
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    try {
+      const data = ZDirectTemplateEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (data.email) {
+        setEmail(data.email);
+        setIsEmailLocked(!!data.lockEmail);
+      }
+
+      if (data.name) {
+        setFullName(data.name);
+        setIsNameLocked(!!data.lockName);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    setHasFinishedInit(true);
+
+    // !: While the two setters are stable we still want to ensure we're avoiding
+    // !: re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (hasFinishedInit && hasDocumentLoaded && window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-ready',
+          data: null,
+        },
+        '*',
+      );
+    }
+  }, [hasFinishedInit, hasDocumentLoaded]);
+
+  if (hasCompletedDocument) {
+    return (
+      <EmbedDocumentCompleted
+        name={fullName}
+        signature={{
+          id: 1,
+          fieldId: 1,
+          recipientId: 1,
+          created: new Date(),
+          typedSignature: null,
+          signatureImageAsBase64: signature,
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
+
+      <div className="relative flex flex-col md:flex-row w-full gap-x-6 gap-y-12">
+        {/* Viewer */}
+        <div className="flex-1">
+          <LazyPDFViewer
+            documentData={documentData}
+            onDocumentLoad={() => setHasDocumentLoaded(true)}
+          />
+        </div>
+
+        {/* Widget */}
+        <div
+          className="group/document-widget fixed md:sticky md:top-4 left-0 w-full bottom-8 px-6 md:px-0 z-50 md:z-auto md:w-[350px] flex-shrink-0 h-fit"
+          data-expanded={isExpanded || undefined}
+        >
+          <div className="w-full border-border bg-widget flex md:min-h-[min(calc(100dvh-2rem),48rem)] h-fit flex-col rounded-xl border px-4 py-4 md:py-6">
+            {/* Header */}
+            <div>
+              <div className="flex items-center justify-between gap-x-2">
+                <h3 className="text-foreground text-xl md:text-2xl font-semibold">
+                  <Trans>Sign document</Trans>
+                </h3>
+
+                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
+                    <LucideChevronDown
+                      className="h-5 w-5 text-muted-foreground"
+                      onClick={() => setIsExpanded(false)}
+                    />
+                  ) : (
+                    <LucideChevronUp
+                      className="h-5 w-5 text-muted-foreground"
+                      onClick={() => setIsExpanded(true)}
+                    />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Sign the document to complete the process.</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+            </div>
+
+            {/* Form */}
+            <div className="-mx-2 px-2 hidden group-data-[expanded]/document-widget:block md:block">
+              <div className="flex flex-1 flex-col gap-y-4">
+                <div>
+                  <Label htmlFor="full-name">
+                    <Trans>Full Name</Trans>
+                  </Label>
+
+                  <Input
+                    type="text"
+                    id="full-name"
+                    className="bg-background mt-2"
+                    disabled={isNameLocked}
+                    value={fullName}
+                    onChange={(e) => !isNameLocked && setFullName(e.target.value.trim())}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="email">
+                    <Trans>Email</Trans>
+                  </Label>
+
+                  <Input
+                    type="email"
+                    id="email"
+                    className="bg-background mt-2"
+                    disabled={isEmailLocked}
+                    value={email}
+                    onChange={(e) => !isEmailLocked && setEmail(e.target.value.trim())}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="Signature">
+                    <Trans>Signature</Trans>
+                  </Label>
+
+                  <Card className="mt-2" gradient degrees={-120}>
+                    <CardContent className="p-0">
+                      <SignaturePad
+                        key={signature}
+                        className="h-44 w-full"
+                        disabled={isThrottled || isSubmitting}
+                        defaultValue={signature ?? undefined}
+                        onChange={(value) => {
+                          setSignature(value);
+                        }}
+                      />
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex-1 hidden group-data-[expanded]/document-widget:block md:block" />
+
+            <div className="w-full grid-cols-2 items-center mt-4 hidden group-data-[expanded]/document-widget:grid md:grid">
+              {pendingFields.length > 0 ? (
+                <Button className="col-start-2" onClick={() => onNextFieldClick()}>
+                  <Trans>Next</Trans>
+                </Button>
+              ) : (
+                <Button
+                  className="col-start-2"
+                  disabled={isThrottled}
+                  loading={isSubmitting}
+                  onClick={() => throttledOnCompleteClick()}
+                >
+                  <Trans>Complete</Trans>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {showPendingFieldTooltip && pendingFields.length > 0 && (
+            <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
+              <Trans>Click to insert field</Trans>
+            </FieldToolTip>
+          )}
+        </ElementVisible>
+
+        {/* Fields */}
+        <EmbedDocumentFields
+          recipient={recipient}
+          fields={localFields}
+          metadata={metadata}
+          onSignField={onSignField}
+          onUnsignField={onUnsignField}
+        />
+      </div>
+
+      <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
+        <span>Powered by</span>
+        <Logo className="ml-2 inline-block h-[14px]" />
+      </div>
+    </div>
+  );
+};

apps/web/src/app/embed/direct/[[...url]]/not-found.tsx

@@ -0,0 +1,3 @@
+export default function EmbedDirectTemplateNotFound() {
+  return <div>Not Found</div>
+}

apps/web/src/app/embed/direct/[[...url]]/page.tsx

@@ -0,0 +1,97 @@
+import { notFound } from 'next/navigation';
+
+import { match } from 'ts-pattern';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DocumentAuthProvider } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { SigningProvider } from '~/app/(signing)/sign/[token]/provider';
+
+import { EmbedAuthenticateView } from '../../authenticate';
+import { EmbedPaywall } from '../../paywall';
+import { EmbedDirectTemplateClientPage } from './client';
+
+export type EmbedDirectTemplatePageProps = {
+  params: {
+    url?: string[];
+  };
+};
+
+export default async function EmbedDirectTemplatePage({ params }: EmbedDirectTemplatePageProps) {
+  if (params.url?.length !== 1) {
+    return notFound();
+  }
+
+  const [token] = params.url;
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  // `template.directLink` is always available but we're doing this to
+  // satisfy the type checker.
+  if (!template || !template.directLink) {
+    return notFound();
+  }
+
+  // TODO: Make this more robust, we need to ensure the owner is either
+  // TODO: the member of a team that has an active subscription, is an early
+  // TODO: adopter or is an enterprise user.
+  if (IS_BILLING_ENABLED() && !template.teamId) {
+    return <EmbedPaywall />;
+  }
+
+  const { user } = await getServerComponentSession();
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return <EmbedAuthenticateView email={user?.email} returnTo={`/embed/direct/${token}`} />;
+  }
+
+  const { directTemplateRecipientId } = template.directLink;
+
+  const recipient = template.Recipient.find(
+    (recipient) => recipient.id === directTemplateRecipientId,
+  );
+
+  if (!recipient) {
+    return notFound();
+  }
+
+  const fields = template.Field.filter((field) => field.recipientId === directTemplateRecipientId);
+
+  return (
+    <SigningProvider
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+    >
+      <DocumentAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <EmbedDirectTemplateClientPage
+          token={token}
+          updatedAt={template.updatedAt}
+          documentData={template.templateDocumentData}
+          recipient={recipient}
+          fields={fields}
+          metadata={template.templateMeta}
+        />
+      </DocumentAuthProvider>
+    </SigningProvider>
+  );
+}

apps/web/src/app/embed/direct/[[...url]]/schema.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+import { ZBaseEmbedDataSchema } from '../../base-schema';
+
+export const ZDirectTemplateEmbedDataSchema = ZBaseEmbedDataSchema.extend({
+  email: z
+    .union([z.literal(''), z.string().email()])
+    .optional()
+    .transform((value) => value || undefined),
+  lockEmail: z.boolean().optional().default(false),
+  name: z
+    .string()
+    .optional()
+    .transform((value) => value || undefined),
+  lockName: z.boolean().optional().default(false),
+});
+
+export type TDirectTemplateEmbedDataSchema = z.infer<typeof ZDirectTemplateEmbedDataSchema>;
+
+export type TDirectTemplateEmbedDataInputSchema = z.input<typeof ZDirectTemplateEmbedDataSchema>;

apps/web/src/app/embed/document-fields.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { DocumentMeta, Recipient, TemplateMeta } from '@documenso/prisma/client';
+import { FieldType, type Field } from '@documenso/prisma/client';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+
+import { CheckboxField } from '~/app/(signing)/sign/[token]/checkbox-field';
+import { DateField } from '~/app/(signing)/sign/[token]/date-field';
+import { DropdownField } from '~/app/(signing)/sign/[token]/dropdown-field';
+import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
+import { InitialsField } from '~/app/(signing)/sign/[token]/initials-field';
+import { NameField } from '~/app/(signing)/sign/[token]/name-field';
+import { NumberField } from '~/app/(signing)/sign/[token]/number-field';
+import { RadioField } from '~/app/(signing)/sign/[token]/radio-field';
+import { SignatureField } from '~/app/(signing)/sign/[token]/signature-field';
+import { TextField } from '~/app/(signing)/sign/[token]/text-field';
+
+export type EmbedDocumentFieldsProps = {
+  recipient: Recipient;
+  fields: Field[];
+  metadata?: DocumentMeta | TemplateMeta | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const EmbedDocumentFields = ({
+  recipient,
+  fields,
+  metadata,
+  onSignField,
+  onUnsignField,
+}: EmbedDocumentFieldsProps) => {
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map((field) =>
+        match(field.type)
+          .with(FieldType.SIGNATURE, () => (
+            <SignatureField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.INITIALS, () => (
+            <InitialsField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.NAME, () => (
+            <NameField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.DATE, () => (
+            <DateField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+              dateFormat={metadata?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+              timezone={metadata?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+            />
+          ))
+          .with(FieldType.EMAIL, () => (
+            <EmailField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.TEXT, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <TextField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.NUMBER, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <NumberField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.RADIO, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <RadioField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.CHECKBOX, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <CheckboxField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.DROPDOWN, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <DropdownField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .otherwise(() => null),
+      )}
+    </ElementVisible>
+  );
+};

apps/web/src/app/embed/paywall.tsx

@@ -0,0 +1,5 @@
+export const EmbedPaywall = () => {
+  return <div>
+    <h1>Paywall</h1>
+  </div>
+}

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -0,0 +1,327 @@
+'use client';
+
+import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type { DocumentMeta, Recipient, TemplateMeta } from '@documenso/prisma/client';
+import { type DocumentData, type Field } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { useEffect, useState } from 'react';
+
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+import { Logo } from '~/components/branding/logo';
+import { EmbedClientLoading } from '../../client-loading';
+import { EmbedDocumentCompleted } from '../../completed';
+import { EmbedDocumentFields } from '../../document-fields';
+import { ZSignDocumentEmbedDataSchema } from './schema';
+
+export type EmbedSignDocumentClientPageProps = {
+  token: string;
+  documentId: number;
+  documentData: DocumentData;
+  recipient: Recipient;
+  fields: Field[];
+  metadata?: DocumentMeta | TemplateMeta | null;
+  isCompleted?: boolean;
+};
+
+export const EmbedSignDocumentClientPage = ({
+  token,
+  documentId,
+  documentData,
+  recipient,
+  fields,
+  metadata,
+  isCompleted,
+}: EmbedSignDocumentClientPageProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { fullName, email, signature, setFullName, setSignature } = useRequiredSigningContext();
+
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+  const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const [isNameLocked, setIsNameLocked] = useState(false);
+
+  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+
+  const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
+
+  const [pendingFields, _completedFields] = [
+    fields.filter((field) => !field.inserted),
+    fields.filter((field) => field.inserted),
+  ];
+
+  const { mutateAsync: completeDocumentWithToken, isLoading: isSubmitting } =
+    trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const onNextFieldClick = () => {
+    validateFieldsInserted(fields);
+
+    setShowPendingFieldTooltip(true);
+    setIsExpanded(false);
+  };
+
+  const onCompleteClick = async () => {
+    try {
+      const valid = validateFieldsInserted(fields);
+
+      if (!valid) {
+        setShowPendingFieldTooltip(true);
+        return;
+      }
+
+      await completeDocumentWithToken({
+        documentId,
+        token,
+      });
+
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-completed',
+            data: {
+              token,
+              documentId,
+              recipientId: recipient.id,
+            },
+          },
+          '*',
+        );
+      }
+
+      setHasCompletedDocument(true);
+    } catch (err) {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-error',
+            data: null,
+          },
+          '*',
+        );
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    try {
+      const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (!isCompleted && data.name) {
+        setFullName(data.name);
+      }
+
+      // Since a recipient can be provided a name we can lock it without requiring
+      // a to be provided by the parent application, unlike direct templates.
+      setIsNameLocked(!!data.lockName);
+    } catch (err) {
+      console.error(err);
+    }
+
+    setHasFinishedInit(true);
+
+    // !: While the two setters are stable we still want to ensure we're avoiding
+    // !: re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (hasFinishedInit && hasDocumentLoaded && window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-ready',
+          data: null,
+        },
+        '*',
+      );
+    }
+  }, [hasFinishedInit, hasDocumentLoaded]);
+
+  if (hasCompletedDocument) {
+    return (
+      <EmbedDocumentCompleted
+        name={fullName}
+        signature={{
+          id: 1,
+          fieldId: 1,
+          recipientId: 1,
+          created: new Date(),
+          typedSignature: null,
+          signatureImageAsBase64: signature,
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
+
+      <div className="relative flex flex-col md:flex-row w-full gap-x-6 gap-y-12">
+        {/* Viewer */}
+        <div className="flex-1">
+          <LazyPDFViewer
+            documentData={documentData}
+            onDocumentLoad={() => setHasDocumentLoaded(true)}
+          />
+        </div>
+
+        {/* Widget */}
+        <div
+          className="group/document-widget fixed md:sticky md:top-4 left-0 w-full bottom-8 px-6 md:px-0 z-50 md:z-auto md:w-[350px] flex-shrink-0 h-fit"
+          data-expanded={isExpanded || undefined}
+        >
+          <div className="w-full border-border bg-widget flex  flex-col rounded-xl border px-4 py-4 md:py-6">
+            {/* Header */}
+            <div>
+              <div className="flex items-center justify-between gap-x-2">
+                <h3 className="text-foreground text-xl md:text-2xl font-semibold">
+                  <Trans>Sign document</Trans>
+                </h3>
+
+                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
+                    <LucideChevronDown
+                      className="h-5 w-5 text-muted-foreground"
+                      onClick={() => setIsExpanded(false)}
+                    />
+                  ) : (
+                    <LucideChevronUp
+                      className="h-5 w-5 text-muted-foreground"
+                      onClick={() => setIsExpanded(true)}
+                    />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Sign the document to complete the process.</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+            </div>
+
+            {/* Form */}
+            <div className="-mx-2 px-2 hidden group-data-[expanded]/document-widget:block md:block">
+              <div className="flex flex-1 flex-col gap-y-4">
+                <div>
+                  <Label htmlFor="full-name">
+                    <Trans>Full Name</Trans>
+                  </Label>
+
+                  <Input
+                    type="text"
+                    id="full-name"
+                    className="bg-background mt-2"
+                    disabled={isNameLocked}
+                    value={fullName}
+                    onChange={(e) => !isNameLocked && setFullName(e.target.value.trim())}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="email">
+                    <Trans>Email</Trans>
+                  </Label>
+
+                  <Input
+                    type="email"
+                    id="email"
+                    className="bg-background mt-2"
+                    value={email}
+                    disabled
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="Signature">
+                    <Trans>Signature</Trans>
+                  </Label>
+
+                  <Card className="mt-2" gradient degrees={-120}>
+                    <CardContent className="p-0">
+                      <SignaturePad
+                        key={signature}
+                        className="h-44 w-full"
+                        disabled={isThrottled || isSubmitting}
+                        defaultValue={signature ?? undefined}
+                        onChange={(value) => {
+                          setSignature(value);
+                        }}
+                      />
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex-1 hidden group-data-[expanded]/document-widget:block md:block" />
+
+            <div className="w-full grid-cols-2 items-center mt-4 hidden group-data-[expanded]/document-widget:grid md:grid">
+              {pendingFields.length > 0 ? (
+                <Button className="col-start-2" onClick={() => onNextFieldClick()}>
+                  <Trans>Next</Trans>
+                </Button>
+              ) : (
+                <Button
+                  className="col-start-2"
+                  disabled={isThrottled}
+                  loading={isSubmitting}
+                  onClick={() => throttledOnCompleteClick()}
+                >
+                  <Trans>Complete</Trans>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {showPendingFieldTooltip && pendingFields.length > 0 && (
+            <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
+              <Trans>Click to insert field</Trans>
+            </FieldToolTip>
+          )}
+        </ElementVisible>
+
+        {/* Fields */}
+        <EmbedDocumentFields recipient={recipient} fields={fields} metadata={metadata} />
+      </div>
+
+      <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
+        <span>Powered by</span>
+        <Logo className="ml-2 inline-block h-[14px]" />
+      </div>
+    </div>
+  );
+};

apps/web/src/app/embed/sign/[[...url]]/not-found.tsx

@@ -0,0 +1,3 @@
+export default function EmbedDirectTemplateNotFound() {
+  return <div>Not Found</div>
+}

apps/web/src/app/embed/sign/[[...url]]/page.tsx

@@ -0,0 +1,95 @@
+import { notFound } from 'next/navigation';
+
+import { match } from 'ts-pattern';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DocumentAuthProvider } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { SigningProvider } from '~/app/(signing)/sign/[token]/provider';
+
+import { EmbedAuthenticateView } from '../../authenticate';
+import { EmbedPaywall } from '../../paywall';
+import { EmbedSignDocumentClientPage } from './client';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { DocumentStatus } from '@documenso/prisma/client';
+
+export type EmbedSignDocumentPageProps = {
+  params: {
+    url?: string[];
+  };
+};
+
+export default async function EmbedSignDocumentPage({ params }: EmbedSignDocumentPageProps) {
+  if (params.url?.length !== 1) {
+    return notFound();
+  }
+
+  const [token] = params.url;
+
+  const { user } = await getServerComponentSession();
+
+  const [document, fields, recipient] = await Promise.all([
+    getDocumentAndSenderByToken({
+      token,
+      userId: user?.id,
+      requireAccessAuth: false,
+    }).catch(() => null),
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+  ]);
+
+  // `document.directLink` is always available but we're doing this to
+  // satisfy the type checker.
+  if (!document || !recipient) {
+    return notFound();
+  }
+
+  // TODO: Make this more robust, we need to ensure the owner is either
+  // TODO: the member of a team that has an active subscription, is an early
+  // TODO: adopter or is an enterprise user.
+  if (IS_BILLING_ENABLED() && !document.teamId) {
+    return <EmbedPaywall />;
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: document.authOptions,
+  });
+
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return <EmbedAuthenticateView email={user?.email || recipient.email} returnTo={`/embed/direct/${token}`} />;
+  }
+
+  return (
+    <SigningProvider
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user?.name : recipient.name}
+      signature={user?.email === recipient.email ? user?.signature : undefined}
+    >
+      <DocumentAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <EmbedSignDocumentClientPage
+          token={token}
+          documentId={document.id}
+          documentData={document.documentData}
+          recipient={recipient}
+          fields={fields}
+          metadata={document.documentMeta}
+          isCompleted={document.status === DocumentStatus.COMPLETED}
+        />
+      </DocumentAuthProvider>
+    </SigningProvider>
+  );
+}

apps/web/src/app/embed/sign/[[...url]]/schema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+import { ZBaseEmbedDataSchema } from '../../base-schema';
+
+export const ZSignDocumentEmbedDataSchema = ZBaseEmbedDataSchema.extend({
+  email: z
+    .union([z.literal(''), z.string().email()])
+    .optional()
+    .transform((value) => value || undefined),
+  lockEmail: z.boolean().optional().default(false),
+  name: z
+    .string()
+    .optional()
+    .transform((value) => value || undefined),
+  lockName: z.boolean().optional().default(false),
+});

apps/web/src/components/forms/signin.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -74,6 +74,7 @@ export type SignInFormProps = {
   isGoogleSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
   oidcProviderLabel?: string;
+  returnTo?: string;
 };
 
 export const SignInForm = ({
@@ -82,6 +83,7 @@ export const SignInForm = ({
   isGoogleSSOEnabled,
   isOIDCSSOEnabled,
   oidcProviderLabel,
+  returnTo,
 }: SignInFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -100,6 +102,22 @@ export const SignInForm = ({
 
   const isPasskeyEnabled = getFlag('app_passkey');
 
+  const callbackUrl = useMemo(() => {
+    // Handle SSR
+    if (typeof window === 'undefined') {
+      return LOGIN_REDIRECT_PATH;
+    }
+
+    let url = new URL(returnTo || LOGIN_REDIRECT_PATH, window.location.origin);
+
+    // Don't allow different origins
+    if (url.origin !== window.location.origin) {
+      url = new URL(LOGIN_REDIRECT_PATH, window.location.origin);
+    }
+
+    return url.toString();
+  }, [returnTo]);
+
   const { mutateAsync: createPasskeySigninOptions } =
     trpc.auth.createPasskeySigninOptions.useMutation();
 
@@ -157,7 +175,7 @@ export const SignInForm = ({
 
       const result = await signIn('webauthn', {
         credential: JSON.stringify(credential),
-        callbackUrl: LOGIN_REDIRECT_PATH,
+        callbackUrl,
         redirect: false,
       });
 
@@ -210,7 +228,7 @@ export const SignInForm = ({
 
       const result = await signIn('credentials', {
         ...credentials,
-        callbackUrl: LOGIN_REDIRECT_PATH,
+        callbackUrl,
         redirect: false,
       });
 
@@ -259,7 +277,9 @@ export const SignInForm = ({
 
   const onSignInWithGoogleClick = async () => {
     try {
-      await signIn('google', { callbackUrl: LOGIN_REDIRECT_PATH });
+      await signIn('google', {
+        callbackUrl,
+      });
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),
@@ -273,7 +293,9 @@ export const SignInForm = ({
 
   const onSignInWithOIDCClick = async () => {
     try {
-      await signIn('oidc', { callbackUrl: LOGIN_REDIRECT_PATH });
+      await signIn('oidc', {
+        callbackUrl,
+      });
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/web/src/middleware.ts

@@ -76,6 +76,20 @@ async function middleware(req: NextRequest): Promise<NextResponse> {
     return response;
   }
 
+  if (req.nextUrl.pathname.startsWith('/embed')) {
+    const res = NextResponse.next();
+
+    // Allow third parties to iframe the document.
+    res.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.headers.set('Access-Control-Allow-Origin', '*');
+    res.headers.set('Content-Security-Policy', "frame-ancestors *");
+    res.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+    res.headers.set('X-Content-Type-Options', 'nosniff');
+    res.headers.set('X-Frame-Options', 'ALLOW-ALL');
+
+    return res;
+  }
+
   return NextResponse.next();
 }
 

docker/README.md

@@ -74,6 +74,7 @@ docker run -d \
   -e NEXT_PRIVATE_ENCRYPTION_KEY="<your-next-private-encryption-key>"
   -e NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-next-private-encryption-secondary-key>"
   -e NEXT_PUBLIC_WEBAPP_URL="<your-next-public-webapp-url>"
+  -e NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
   -e NEXT_PRIVATE_DATABASE_URL="<your-next-private-database-url>"
   -e NEXT_PRIVATE_DIRECT_DATABASE_URL="<your-next-private-database-url>"
   -e NEXT_PRIVATE_SMTP_TRANSPORT="<your-next-private-smtp-transport>"

docker/production/compose.yml

@@ -29,6 +29,7 @@ services:
       - NEXT_PRIVATE_GOOGLE_CLIENT_ID=${NEXT_PRIVATE_GOOGLE_CLIENT_ID}
       - NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=${NEXT_PRIVATE_GOOGLE_CLIENT_SECRET}
       - NEXT_PUBLIC_WEBAPP_URL=${NEXT_PUBLIC_WEBAPP_URL:?err}
+      - NEXT_PRIVATE_INTERNAL_WEBAPP_URL=${NEXT_PRIVATE_INTERNAL_WEBAPP_URL:-http://localhost:$PORT}
       - NEXT_PUBLIC_MARKETING_URL=${NEXT_PUBLIC_MARKETING_URL:-https://documenso.com}
       - NEXT_PRIVATE_DATABASE_URL=${NEXT_PRIVATE_DATABASE_URL:?err}
       - NEXT_PRIVATE_DIRECT_DATABASE_URL=${NEXT_PRIVATE_DIRECT_DATABASE_URL:-${NEXT_PRIVATE_DATABASE_URL}}

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.7.0-rc.2",
+  "version": "1.7.0-rc.5",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@lingui/cli": "^4.11.1",
+    "@lingui/cli": "^4.11.3",
     "@trigger.dev/cli": "^2.3.18",
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.3.0",
@@ -63,20 +63,13 @@
   ],
   "dependencies": {
     "@documenso/pdf-sign": "^0.1.0",
-    "@lingui/core": "^4.11.1",
-    "@lingui/macro": "^4.11.2",
+    "@lingui/core": "^4.11.3",
     "inngest-cli": "^0.29.1",
     "next-runtime-env": "^3.2.0",
-    "react": "18.2.0"
+    "react": "^18"
   },
   "overrides": {
-    "next-auth": {
-      "next": "14.0.3"
-    },
-    "next-contentlayer": {
-      "next": "14.0.3"
-    },
-    "react": "18.2.0"
+    "next": "14.2.6"
   },
   "trigger.dev": {
     "endpointId": "documenso-app"

packages/api/v1/contract.ts

@@ -21,6 +21,7 @@ import {
   ZSendDocumentForSigningMutationSchema,
   ZSuccessfulDeleteTemplateResponseSchema,
   ZSuccessfulDocumentResponseSchema,
+  ZSuccessfulFieldCreationResponseSchema,
   ZSuccessfulFieldResponseSchema,
   ZSuccessfulGetDocumentResponseSchema,
   ZSuccessfulGetTemplateResponseSchema,
@@ -236,7 +237,7 @@ export const ApiContractV1 = c.router(
       path: '/api/v1/documents/:id/fields',
       body: ZCreateFieldMutationSchema,
       responses: {
-        200: ZSuccessfulFieldResponseSchema,
+        200: ZSuccessfulFieldCreationResponseSchema,
         400: ZUnsuccessfulResponseSchema,
         401: ZUnsuccessfulResponseSchema,
         404: ZUnsuccessfulResponseSchema,

packages/api/v1/implementation.ts

@@ -1,4 +1,5 @@
 import { createNextRoute } from '@ts-rest/next';
+import { match } from 'ts-pattern';
 
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
@@ -15,7 +16,6 @@ import { getDocumentById } from '@documenso/lib/server-only/document/get-documen
 import { resendDocument } from '@documenso/lib/server-only/document/resend-document';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { updateDocument } from '@documenso/lib/server-only/document/update-document';
-import { createField } from '@documenso/lib/server-only/field/create-field';
 import { deleteField } from '@documenso/lib/server-only/field/delete-field';
 import { getFieldById } from '@documenso/lib/server-only/field/get-field-by-id';
 import { updateField } from '@documenso/lib/server-only/field/update-field';
@@ -32,6 +32,13 @@ import { deleteTemplate } from '@documenso/lib/server-only/template/delete-templ
 import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
@@ -39,6 +46,8 @@ import {
   getPresignGetUrl,
   getPresignPostUrl,
 } from '@documenso/lib/universal/upload/server-actions';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
+import { prisma } from '@documenso/prisma';
 import { DocumentDataType, DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
 import { ApiContractV1 } from './contract';
@@ -870,100 +879,167 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
   createField: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
-    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY, fieldMeta } =
-      args.body;
+    const fields = Array.isArray(args.body) ? args.body : [args.body];
 
-    if (pageNumber <= 0) {
-      return {
-        status: 400,
-        body: {
-          message: 'Invalid page number',
-        },
-      };
-    }
-
-    const document = await getDocumentById({
-      id: Number(documentId),
-      userId: user.id,
-      teamId: team?.id,
+    const document = await prisma.document.findFirst({
+      select: { id: true, status: true },
+      where: {
+        id: Number(documentId),
+        ...(team?.id
+          ? {
+              team: {
+                id: team.id,
+                members: { some: { userId: user.id } },
+              },
+            }
+          : {
+              userId: user.id,
+              teamId: null,
+            }),
+      },
     });
 
     if (!document) {
       return {
         status: 404,
-        body: {
-          message: 'Document not found',
-        },
+        body: { message: 'Document not found' },
       };
     }
 
     if (document.status === DocumentStatus.COMPLETED) {
       return {
         status: 400,
-        body: {
-          message: 'Document is already completed',
-        },
-      };
-    }
-
-    const recipient = await getRecipientById({
-      id: Number(recipientId),
-      documentId: Number(documentId),
-    }).catch(() => null);
-
-    if (!recipient) {
-      return {
-        status: 404,
-        body: {
-          message: 'Recipient not found',
-        },
-      };
-    }
-
-    if (recipient.signingStatus === SigningStatus.SIGNED) {
-      return {
-        status: 400,
-        body: {
-          message: 'Recipient has already signed the document',
-        },
+        body: { message: 'Document is already completed' },
       };
     }
 
     try {
-      const field = await createField({
-        documentId: Number(documentId),
-        recipientId: Number(recipientId),
-        userId: user.id,
-        teamId: team?.id,
-        type,
-        pageNumber,
-        pageX,
-        pageY,
-        pageWidth,
-        pageHeight,
-        fieldMeta,
-        requestMetadata: extractNextApiRequestMetadata(args.req),
-      });
+      const createdFields = await prisma.$transaction(async (tx) => {
+        return Promise.all(
+          fields.map(async (fieldData) => {
+            const {
+              recipientId,
+              type,
+              pageNumber,
+              pageWidth,
+              pageHeight,
+              pageX,
+              pageY,
+              fieldMeta,
+            } = fieldData;
 
-      const remappedField = {
-        id: field.id,
-        documentId: field.documentId,
-        recipientId: field.recipientId ?? -1,
-        type: field.type,
-        pageNumber: field.page,
-        pageX: Number(field.positionX),
-        pageY: Number(field.positionY),
-        pageWidth: Number(field.width),
-        pageHeight: Number(field.height),
-        customText: field.customText,
-        fieldMeta: ZFieldMetaSchema.parse(field.fieldMeta),
-        inserted: field.inserted,
-      };
+            if (pageNumber <= 0) {
+              throw new Error('Invalid page number');
+            }
+
+            const recipient = await getRecipientById({
+              id: Number(recipientId),
+              documentId: Number(documentId),
+            }).catch(() => null);
+
+            if (!recipient) {
+              throw new Error('Recipient not found');
+            }
+
+            if (recipient.signingStatus === SigningStatus.SIGNED) {
+              throw new Error('Recipient has already signed the document');
+            }
+
+            const advancedField = ['NUMBER', 'RADIO', 'CHECKBOX', 'DROPDOWN', 'TEXT'].includes(
+              type,
+            );
+
+            if (advancedField && !fieldMeta) {
+              throw new Error(
+                'Field meta is required for this type of field. Please provide the appropriate field meta object.',
+              );
+            }
+
+            if (fieldMeta && fieldMeta.type.toLowerCase() !== String(type).toLowerCase()) {
+              throw new Error('Field meta type does not match the field type');
+            }
+
+            const result = match(type)
+              .with('RADIO', () => ZRadioFieldMeta.safeParse(fieldMeta))
+              .with('CHECKBOX', () => ZCheckboxFieldMeta.safeParse(fieldMeta))
+              .with('DROPDOWN', () => ZDropdownFieldMeta.safeParse(fieldMeta))
+              .with('NUMBER', () => ZNumberFieldMeta.safeParse(fieldMeta))
+              .with('TEXT', () => ZTextFieldMeta.safeParse(fieldMeta))
+              .with('SIGNATURE', 'INITIALS', 'DATE', 'EMAIL', 'NAME', () => ({
+                success: true,
+                data: {},
+              }))
+              .with('FREE_SIGNATURE', () => ({
+                success: false,
+                error: 'FREE_SIGNATURE is not supported',
+                data: {},
+              }))
+              .exhaustive();
+
+            if (!result.success) {
+              throw new Error('Field meta parsing failed');
+            }
+
+            const field = await tx.field.create({
+              data: {
+                documentId: Number(documentId),
+                recipientId: Number(recipientId),
+                type,
+                page: pageNumber,
+                positionX: pageX,
+                positionY: pageY,
+                width: pageWidth,
+                height: pageHeight,
+                customText: '',
+                inserted: false,
+                fieldMeta: result.data,
+              },
+              include: {
+                Recipient: true,
+              },
+            });
+
+            await tx.documentAuditLog.create({
+              data: createDocumentAuditLogData({
+                type: 'FIELD_CREATED',
+                documentId: Number(documentId),
+                user: {
+                  id: team?.id ?? user.id,
+                  email: team?.name ?? user.email,
+                  name: team ? '' : user.name,
+                },
+                data: {
+                  fieldId: field.secondaryId,
+                  fieldRecipientEmail: field.Recipient?.email ?? '',
+                  fieldRecipientId: recipientId,
+                  fieldType: field.type,
+                },
+                requestMetadata: extractNextApiRequestMetadata(args.req),
+              }),
+            });
+
+            return {
+              id: field.id,
+              documentId: Number(field.documentId),
+              recipientId: field.recipientId ?? -1,
+              type: field.type,
+              pageNumber: field.page,
+              pageX: Number(field.positionX),
+              pageY: Number(field.positionY),
+              pageWidth: Number(field.width),
+              pageHeight: Number(field.height),
+              customText: field.customText,
+              fieldMeta: ZFieldMetaSchema.parse(field.fieldMeta),
+              inserted: field.inserted,
+            };
+          }),
+        );
+      });
 
       return {
         status: 200,
         body: {
-          ...remappedField,
+          fields: createdFields,
           documentId: Number(documentId),
         },
       };
@@ -974,7 +1050,8 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
   updateField: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId, fieldId } = args.params;
-    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY } = args.body;
+    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY, fieldMeta } =
+      args.body;
 
     const document = await getDocumentById({
       id: Number(documentId),
@@ -1036,6 +1113,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       pageWidth,
       pageHeight,
       requestMetadata: extractNextApiRequestMetadata(args.req),
+      fieldMeta: fieldMeta ? ZFieldMetaSchema.parse(fieldMeta) : undefined,
     });
 
     const remappedField = {

packages/api/v1/schema.ts

@@ -293,7 +293,7 @@ export type TSuccessfulRecipientResponseSchema = z.infer<typeof ZSuccessfulRecip
 /**
  * Fields
  */
-export const ZCreateFieldMutationSchema = z.object({
+const ZCreateFieldSchema = z.object({
   recipientId: z.number(),
   type: z.nativeEnum(FieldType),
   pageNumber: z.number(),
@@ -301,12 +301,17 @@ export const ZCreateFieldMutationSchema = z.object({
   pageY: z.number(),
   pageWidth: z.number(),
   pageHeight: z.number(),
-  fieldMeta: ZFieldMetaSchema,
+  fieldMeta: ZFieldMetaSchema.openapi({}),
 });
 
+export const ZCreateFieldMutationSchema = z.union([
+  ZCreateFieldSchema,
+  z.array(ZCreateFieldSchema).min(1),
+]);
+
 export type TCreateFieldMutationSchema = z.infer<typeof ZCreateFieldMutationSchema>;
 
-export const ZUpdateFieldMutationSchema = ZCreateFieldMutationSchema.partial();
+export const ZUpdateFieldMutationSchema = ZCreateFieldSchema.partial();
 
 export type TUpdateFieldMutationSchema = z.infer<typeof ZUpdateFieldMutationSchema>;
 
@@ -314,6 +319,26 @@ export const ZDeleteFieldMutationSchema = null;
 
 export type TDeleteFieldMutationSchema = typeof ZDeleteFieldMutationSchema;
 
+const ZSuccessfulFieldSchema = z.object({
+  id: z.number(),
+  documentId: z.number(),
+  recipientId: z.number(),
+  type: z.nativeEnum(FieldType),
+  pageNumber: z.number(),
+  pageX: z.number(),
+  pageY: z.number(),
+  pageWidth: z.number(),
+  pageHeight: z.number(),
+  customText: z.string(),
+  fieldMeta: ZFieldMetaSchema,
+  inserted: z.boolean(),
+});
+
+export const ZSuccessfulFieldCreationResponseSchema = z.object({
+  fields: z.union([ZSuccessfulFieldSchema, z.array(ZSuccessfulFieldSchema)]),
+  documentId: z.number(),
+});
+
 export const ZSuccessfulFieldResponseSchema = z.object({
   id: z.number(),
   documentId: z.number(),

packages/ee/package.json

@@ -17,9 +17,9 @@
     "@documenso/prisma": "*",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "next": "14.0.3",
+    "next": "14.2.6",
     "next-auth": "4.24.5",
-    "react": "18.2.0",
+    "react": "^18",
     "ts-pattern": "^5.0.5",
     "zod": "^3.22.4"
   }

packages/lib/client-only/hooks/use-throttle-fn.ts

@@ -0,0 +1,60 @@
+import { useCallback, useRef, useState } from 'react';
+
+type ThrottleOptions = {
+  leading?: boolean;
+  trailing?: boolean;
+}
+
+export function useThrottleFn<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  ms = 500,
+  options: ThrottleOptions = {}
+): [(...args: Parameters<T>) => void, boolean, () => void] {
+  const [isThrottling, setIsThrottling] = useState(false);
+  const $isThrottling = useRef(false);
+
+  const $timeout = useRef<NodeJS.Timeout | null>(null);
+  const $lastArgs = useRef<Parameters<T> | null>(null);
+  
+  const { leading = true, trailing = true } = options;
+
+  const $setIsThrottling = useCallback((value: boolean) => {
+    $isThrottling.current = value;
+    setIsThrottling(value);
+  }, []);
+
+  const throttledFn = useCallback(
+    (...args: Parameters<T>) => {
+      if (!$isThrottling.current) {
+        $setIsThrottling(true);
+        if (leading) {
+          fn(...args);
+        } else {
+          $lastArgs.current = args;
+        }
+
+        $timeout.current = setTimeout(() => {
+          if (trailing && $lastArgs.current) {
+            fn(...$lastArgs.current);
+            $lastArgs.current = null;
+          }
+          $setIsThrottling(false);
+        }, ms);
+      } else {
+        $lastArgs.current = args;
+      }
+    },
+    [fn, ms, leading, trailing, $setIsThrottling]
+  );
+
+  const cancel = useCallback(() => {
+    if ($timeout.current) {
+      clearTimeout($timeout.current);
+      $timeout.current = null;
+      $setIsThrottling(false);
+      $lastArgs.current = null;
+    }
+  }, [$setIsThrottling]);
+
+  return [throttledFn, isThrottling, cancel];
+}

packages/lib/constants/app.ts

@@ -6,6 +6,7 @@ export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
 
 export const NEXT_PUBLIC_WEBAPP_URL = () => env('NEXT_PUBLIC_WEBAPP_URL');
 export const NEXT_PUBLIC_MARKETING_URL = () => env('NEXT_PUBLIC_MARKETING_URL');
+export const NEXT_PRIVATE_INTERNAL_WEBAPP_URL = process.env.NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? NEXT_PUBLIC_WEBAPP_URL();
 
 export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
 export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';

packages/lib/jobs/client/local.ts

@@ -6,7 +6,7 @@ import { json } from 'micro';
 import { prisma } from '@documenso/prisma';
 import { BackgroundJobStatus, Prisma } from '@documenso/prisma/client';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 import { sign } from '../../server-only/crypto/sign';
 import { verify } from '../../server-only/crypto/verify';
 import {
@@ -229,7 +229,7 @@ export class LocalJobProvider extends BaseJobProvider {
   }) {
     const { jobId, jobDefinitionId, data, isRetry } = options;
 
-    const endpoint = `${NEXT_PUBLIC_WEBAPP_URL()}/api/jobs/${jobDefinitionId}/${jobId}`;
+    const endpoint = `${NEXT_PRIVATE_INTERNAL_WEBAPP_URL}/api/jobs/${jobDefinitionId}/${jobId}`;
     const signature = sign(data);
 
     const headers: Record<string, string> = {

packages/lib/package.json

@@ -41,13 +41,13 @@
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
     "nanoid": "^4.0.2",
-    "next": "14.0.3",
+    "next": "14.2.6",
     "next-auth": "4.24.5",
     "oslo": "^0.17.0",
     "pdf-lib": "^1.17.1",
     "pg": "^8.11.3",
     "playwright": "1.43.0",
-    "react": "18.2.0",
+    "react": "^18",
     "remeda": "^1.27.1",
     "sharp": "0.32.6",
     "stripe": "^12.7.0",

packages/lib/server-only/document/get-document-by-token.ts

@@ -147,7 +147,7 @@ export const getDocumentAndRecipientByToken = async ({
     },
   });
 
-  const recipient = result.Recipient[0];
+  const [recipient] = result.Recipient;
 
   // Sanity check, should not be possible.
   if (!recipient) {

packages/lib/server-only/feature-flags/all.ts

@@ -5,7 +5,7 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL, NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
 
 /**
@@ -46,6 +46,10 @@ export default async function handlerFeatureFlagAll(req: Request) {
     if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
+
+    if (origin.startsWith(NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? 'http://localhost:3000')) {
+      res.headers.set('Access-Control-Allow-Origin', origin);
+    }
   }
 
   return res;

packages/lib/server-only/feature-flags/get.ts

@@ -7,7 +7,7 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL, NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 
 /**
  * Evaluate a single feature flag based on the current user if possible.
@@ -67,6 +67,10 @@ export default async function handleFeatureFlagGet(req: Request) {
     if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
+    
+    if (origin.startsWith(NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? 'http://localhost:3000')) {
+      res.headers.set('Access-Control-Allow-Origin', origin);
+    }
   }
 
   return res;

packages/lib/server-only/field/create-field.ts

@@ -110,24 +110,21 @@ export const createField = async ({
   }
 
   const result = match(type)
-    .with('RADIO', () => {
-      return ZRadioFieldMeta.safeParse(fieldMeta);
-    })
-    .with('CHECKBOX', () => {
-      return ZCheckboxFieldMeta.safeParse(fieldMeta);
-    })
-    .with('DROPDOWN', () => {
-      return ZDropdownFieldMeta.safeParse(fieldMeta);
-    })
-    .with('NUMBER', () => {
-      return ZNumberFieldMeta.safeParse(fieldMeta);
-    })
-    .with('TEXT', () => {
-      return ZTextFieldMeta.safeParse(fieldMeta);
-    })
-    .otherwise(() => {
-      return { success: false, data: {} };
-    });
+    .with('RADIO', () => ZRadioFieldMeta.safeParse(fieldMeta))
+    .with('CHECKBOX', () => ZCheckboxFieldMeta.safeParse(fieldMeta))
+    .with('DROPDOWN', () => ZDropdownFieldMeta.safeParse(fieldMeta))
+    .with('NUMBER', () => ZNumberFieldMeta.safeParse(fieldMeta))
+    .with('TEXT', () => ZTextFieldMeta.safeParse(fieldMeta))
+    .with('SIGNATURE', 'INITIALS', 'DATE', 'EMAIL', 'NAME', () => ({
+      success: true,
+      data: {},
+    }))
+    .with('FREE_SIGNATURE', () => ({
+      success: false,
+      error: 'FREE_SIGNATURE is not supported',
+      data: {},
+    }))
+    .exhaustive();
 
   if (!result.success) {
     throw new Error('Field meta parsing failed');
@@ -145,7 +142,7 @@ export const createField = async ({
       height: pageHeight,
       customText: '',
       inserted: false,
-      fieldMeta: advancedField ? result.data : undefined,
+      fieldMeta: result.data,
     },
     include: {
       Recipient: true,

packages/lib/server-only/field/update-field.ts

@@ -37,6 +37,10 @@ export const updateField = async ({
   requestMetadata,
   fieldMeta,
 }: UpdateFieldOptions) => {
+  if (type === 'FREE_SIGNATURE') {
+    throw new Error('Cannot update a FREE_SIGNATURE field');
+  }
+
   const oldField = await prisma.field.findFirstOrThrow({
     where: {
       id: fieldId,
@@ -61,6 +65,11 @@ export const updateField = async ({
     },
   });
 
+  const newFieldMeta = {
+    ...(oldField.fieldMeta as FieldMeta),
+    ...fieldMeta,
+  };
+
   const field = prisma.$transaction(async (tx) => {
     const updatedField = await tx.field.update({
       where: {
@@ -74,13 +83,39 @@ export const updateField = async ({
         positionY: pageY,
         width: pageWidth,
         height: pageHeight,
-        fieldMeta,
+        fieldMeta: newFieldMeta,
       },
       include: {
         Recipient: true,
       },
     });
 
+    const user = await prisma.user.findFirstOrThrow({
+      where: {
+        id: userId,
+      },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+      },
+    });
+
+    let team: Team | null = null;
+
+    if (teamId) {
+      team = await prisma.team.findFirst({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+      });
+    }
+
     await tx.documentAuditLog.create({
       data: createDocumentAuditLogData({
         type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
@@ -104,31 +139,5 @@ export const updateField = async ({
     return updatedField;
   });
 
-  const user = await prisma.user.findFirstOrThrow({
-    where: {
-      id: userId,
-    },
-    select: {
-      id: true,
-      name: true,
-      email: true,
-    },
-  });
-
-  let team: Team | null = null;
-
-  if (teamId) {
-    team = await prisma.team.findFirst({
-      where: {
-        id: teamId,
-        members: {
-          some: {
-            userId,
-          },
-        },
-      },
-    });
-  }
-
   return field;
 };

packages/lib/server-only/subscription/get-active-subscriptions-by-user-id.ts

@@ -0,0 +1,21 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+import { SubscriptionStatus } from '@documenso/prisma/client';
+
+export type GetActiveSubscriptionsByUserIdOptions = {
+  userId: number;
+};
+
+export const getActiveSubscriptionsByUserId = async ({
+  userId,
+}: GetActiveSubscriptionsByUserIdOptions) => {
+  return await prisma.subscription.findMany({
+    where: {
+      userId,
+      status: {
+        not: SubscriptionStatus.INACTIVE,
+      },
+    },
+  });
+};

packages/lib/server-only/template/create-document-from-direct-template.ts

@@ -210,7 +210,7 @@ export const createDocumentFromDirectTemplate = async ({
 
   const initialRequestTime = new Date();
 
-  const { documentId, directRecipientToken } = await prisma.$transaction(async (tx) => {
+  const { documentId, recipientId, token } = await prisma.$transaction(async (tx) => {
     const documentData = await tx.documentData.create({
       data: {
         type: template.templateDocumentData.type,
@@ -539,8 +539,9 @@ export const createDocumentFromDirectTemplate = async ({
     });
 
     return {
+      token: createdDirectRecipient.token,
       documentId: document.id,
-      directRecipientToken: createdDirectRecipient.token,
+      recipientId: createdDirectRecipient.id,
     };
   });
 
@@ -559,5 +560,9 @@ export const createDocumentFromDirectTemplate = async ({
     // Log and reseal as required until we configure middleware.
   }
 
-  return directRecipientToken;
+  return {
+    token,
+    documentId,
+    recipientId,
+  };
 };

packages/lib/server-only/webhooks/trigger/trigger-webhook.ts

@@ -1,6 +1,6 @@
 import type { WebhookTriggerEvents } from '@documenso/prisma/client';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../../constants/app';
+import { NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../../constants/app';
 import { sign } from '../../crypto/sign';
 import { getAllWebhooksByEventTrigger } from '../get-all-webhooks-by-event-trigger';
 
@@ -29,7 +29,7 @@ export const triggerWebhook = async ({ event, data, userId, teamId }: TriggerWeb
     const signature = sign(body);
 
     await Promise.race([
-      fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/api/webhook/trigger`, {
+      fetch(`${NEXT_PRIVATE_INTERNAL_WEBAPP_URL}/api/webhook/trigger`, {
         method: 'POST',
         headers: {
           'content-type': 'application/json',

packages/lib/translations/de/common.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2024-08-27 16:03\n"
+"PO-Revision-Date: 2024-09-05 06:04\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -116,7 +116,7 @@ msgid "Advanced Options"
 msgstr "Erweiterte Optionen"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:510
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:369
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
 msgid "Advanced settings"
 msgstr "Erweiterte Einstellungen"
 
@@ -140,6 +140,14 @@ msgstr "Genehmiger"
 msgid "Approving"
 msgstr "Genehmigung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:276
+msgid "Black"
+msgstr ""
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:290
+msgid "Blue"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
@@ -167,7 +175,7 @@ msgid "Character Limit"
 msgstr "Zeichenbeschränkung"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:932
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:756
 msgid "Checkbox"
 msgstr "Checkbox"
 
@@ -179,7 +187,7 @@ msgstr "Checkbox-Werte"
 msgid "Clear filters"
 msgstr "Filter löschen"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:310
 msgid "Clear Signature"
 msgstr "Unterschrift löschen"
 
@@ -196,7 +204,7 @@ msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:511
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:371
 msgid "Configure the {0} field"
 msgstr "Konfigurieren Sie das Feld {0}"
 
@@ -213,7 +221,7 @@ msgid "Custom Text"
 msgstr "Benutzerdefinierter Text"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:828
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:651
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:652
 msgid "Date"
 msgstr "Datum"
 
@@ -245,7 +253,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:958
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:782
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -257,7 +265,7 @@ msgstr "Dropdown-Optionen"
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:232
 #: packages/ui/primitives/document-flow/add-signers.tsx:239
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:599
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:600
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:210
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:217
 msgid "Email"
@@ -312,6 +320,10 @@ msgstr "Globale Empfängerauthentifizierung"
 msgid "Go Back"
 msgstr "Zurück"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:297
+msgid "Green"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "Ich bin ein Unterzeichner dieses Dokuments"
@@ -367,7 +379,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-fields.tsx:802
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:265
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:626
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:245
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:251
 msgid "Name"
@@ -386,12 +398,12 @@ msgid "Needs to view"
 msgstr "Muss sehen"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:613
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:464
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:465
 msgid "No recipient matching this description was found."
 msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:629
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:480
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:481
 msgid "No recipients with this role"
 msgstr "Keine Empfänger mit dieser Rolle"
 
@@ -416,7 +428,7 @@ msgid "No value found."
 msgstr "Kein Wert gefunden."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:880
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:704
 msgid "Number"
 msgstr "Nummer"
 
@@ -451,7 +463,7 @@ msgid "Placeholder"
 msgstr "Platzhalter"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:906
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:730
 msgid "Radio"
 msgstr "Radio"
 
@@ -477,6 +489,10 @@ msgstr "Erhält Kopie"
 msgid "Recipient action authentication"
 msgstr "Empfängeraktion Authentifizierung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:283
+msgid "Red"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"
@@ -502,7 +518,7 @@ msgstr "Zeilen pro Seite"
 msgid "Save"
 msgstr "Speichern"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:797
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:798
 msgid "Save Template"
 msgstr "Vorlage speichern"
 
@@ -552,7 +568,7 @@ msgstr "Unterschreiben"
 #: packages/ui/primitives/document-flow/add-fields.tsx:724
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:547
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:548
 msgid "Signature"
 msgstr "Unterschrift"
 
@@ -598,7 +614,7 @@ msgid "Template title"
 msgstr "Vorlagentitel"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:854
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:678
 msgid "Text"
 msgstr "Text"
 
@@ -733,6 +749,10 @@ msgstr "Viewer"
 msgid "Viewing"
 msgstr "Viewing"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:280
+#~ msgid "White"
+#~ msgstr ""
+
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:44
 msgid "You are about to send this document to the recipients. Are you sure you want to continue?"
 msgstr "Sie sind dabei, dieses Dokument an die Empfänger zu senden. Sind Sie sicher, dass Sie fortfahren möchten?"

packages/lib/translations/de/marketing.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2024-08-27 16:03\n"
+"PO-Revision-Date: 2024-09-05 06:04\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"

packages/lib/translations/en/common.po

@@ -111,7 +111,7 @@ msgid "Advanced Options"
 msgstr "Advanced Options"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:510
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:369
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
 msgid "Advanced settings"
 msgstr "Advanced settings"
 
@@ -135,6 +135,14 @@ msgstr "Approver"
 msgid "Approving"
 msgstr "Approving"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:276
+msgid "Black"
+msgstr "Black"
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:290
+msgid "Blue"
+msgstr "Blue"
+
 #: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
@@ -162,7 +170,7 @@ msgid "Character Limit"
 msgstr "Character Limit"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:932
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:756
 msgid "Checkbox"
 msgstr "Checkbox"
 
@@ -174,7 +182,7 @@ msgstr "Checkbox values"
 msgid "Clear filters"
 msgstr "Clear filters"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:310
 msgid "Clear Signature"
 msgstr "Clear Signature"
 
@@ -191,7 +199,7 @@ msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:511
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:371
 msgid "Configure the {0} field"
 msgstr "Configure the {0} field"
 
@@ -208,7 +216,7 @@ msgid "Custom Text"
 msgstr "Custom Text"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:828
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:651
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:652
 msgid "Date"
 msgstr "Date"
 
@@ -240,7 +248,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:958
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:782
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -252,7 +260,7 @@ msgstr "Dropdown options"
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:232
 #: packages/ui/primitives/document-flow/add-signers.tsx:239
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:599
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:600
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:210
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:217
 msgid "Email"
@@ -307,6 +315,10 @@ msgstr "Global recipient action authentication"
 msgid "Go Back"
 msgstr "Go Back"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:297
+msgid "Green"
+msgstr "Green"
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "I am a signer of this document"
@@ -362,7 +374,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-fields.tsx:802
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:265
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:626
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:245
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:251
 msgid "Name"
@@ -381,12 +393,12 @@ msgid "Needs to view"
 msgstr "Needs to view"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:613
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:464
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:465
 msgid "No recipient matching this description was found."
 msgstr "No recipient matching this description was found."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:629
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:480
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:481
 msgid "No recipients with this role"
 msgstr "No recipients with this role"
 
@@ -411,7 +423,7 @@ msgid "No value found."
 msgstr "No value found."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:880
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:704
 msgid "Number"
 msgstr "Number"
 
@@ -446,7 +458,7 @@ msgid "Placeholder"
 msgstr "Placeholder"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:906
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:730
 msgid "Radio"
 msgstr "Radio"
 
@@ -472,6 +484,10 @@ msgstr "Receives copy"
 msgid "Recipient action authentication"
 msgstr "Recipient action authentication"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:283
+msgid "Red"
+msgstr "Red"
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"
@@ -497,7 +513,7 @@ msgstr "Rows per page"
 msgid "Save"
 msgstr "Save"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:797
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:798
 msgid "Save Template"
 msgstr "Save Template"
 
@@ -547,7 +563,7 @@ msgstr "Sign"
 #: packages/ui/primitives/document-flow/add-fields.tsx:724
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:547
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:548
 msgid "Signature"
 msgstr "Signature"
 
@@ -593,7 +609,7 @@ msgid "Template title"
 msgstr "Template title"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:854
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:678
 msgid "Text"
 msgstr "Text"
 
@@ -728,6 +744,10 @@ msgstr "Viewer"
 msgid "Viewing"
 msgstr "Viewing"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:280
+#~ msgid "White"
+#~ msgstr "White"
+
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:44
 msgid "You are about to send this document to the recipients. Are you sure you want to continue?"
 msgstr "You are about to send this document to the recipients. Are you sure you want to continue?"

packages/lib/translations/en/web.po

@@ -21,15 +21,15 @@ msgstr "\"{0}\" will appear on the document as it has a timezone of \"{timezone}
 msgid "\"{documentTitle}\" has been successfully deleted"
 msgstr "\"{documentTitle}\" has been successfully deleted"
 
-#: apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx:75
+#: apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx:76
 msgid "({0}) has invited you to approve this document"
 msgstr "({0}) has invited you to approve this document"
 
-#: apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx:72
+#: apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx:73
 msgid "({0}) has invited you to sign this document"
 msgstr "({0}) has invited you to sign this document"
 
-#: apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx:69
+#: apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx:70
 msgid "({0}) has invited you to view this document"
 msgstr "({0}) has invited you to view this document"
 
@@ -495,11 +495,11 @@ msgstr "An error occurred while uploading your document."
 #: apps/web/src/components/forms/public-profile-claim-dialog.tsx:113
 #: apps/web/src/components/forms/public-profile-form.tsx:104
 #: apps/web/src/components/forms/reset-password.tsx:87
-#: apps/web/src/components/forms/signin.tsx:230
-#: apps/web/src/components/forms/signin.tsx:238
-#: apps/web/src/components/forms/signin.tsx:252
-#: apps/web/src/components/forms/signin.tsx:265
-#: apps/web/src/components/forms/signin.tsx:279
+#: apps/web/src/components/forms/signin.tsx:248
+#: apps/web/src/components/forms/signin.tsx:256
+#: apps/web/src/components/forms/signin.tsx:270
+#: apps/web/src/components/forms/signin.tsx:285
+#: apps/web/src/components/forms/signin.tsx:301
 #: apps/web/src/components/forms/signup.tsx:113
 #: apps/web/src/components/forms/signup.tsx:128
 #: apps/web/src/components/forms/signup.tsx:142
@@ -603,7 +603,7 @@ msgid "Background Color"
 msgstr "Background Color"
 
 #: apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx:167
-#: apps/web/src/components/forms/signin.tsx:451
+#: apps/web/src/components/forms/signin.tsx:473
 msgid "Backup Code"
 msgstr "Backup Code"
 
@@ -747,6 +747,8 @@ msgstr "Click to copy signing link for sending to recipient"
 
 #: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:175
 #: apps/web/src/app/(signing)/sign/[token]/form.tsx:107
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:435
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:312
 msgid "Click to insert field"
 msgstr "Click to insert field"
 
@@ -763,6 +765,8 @@ msgid "Close"
 msgstr "Close"
 
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:58
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:425
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:302
 #: apps/web/src/components/forms/v2/signup.tsx:522
 msgid "Complete"
 msgstr "Complete"
@@ -1193,6 +1197,10 @@ msgstr "Document Cancelled"
 msgid "Document completed"
 msgstr "Document completed"
 
+#: apps/web/src/app/embed/completed.tsx:16
+msgid "Document Completed!"
+msgstr "Document Completed!"
+
 #: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:142
 msgid "Document created"
 msgstr "Document created"
@@ -1384,11 +1392,13 @@ msgstr "Edit webhook"
 #: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:220
 #: apps/web/src/app/(recipient)/d/[token]/configure-direct-template.tsx:118
 #: apps/web/src/app/(signing)/sign/[token]/email-field.tsx:126
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:376
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:254
 #: apps/web/src/components/(teams)/dialogs/add-team-email-dialog.tsx:169
 #: apps/web/src/components/(teams)/dialogs/update-team-email-dialog.tsx:153
 #: apps/web/src/components/forms/forgot-password.tsx:81
 #: apps/web/src/components/forms/profile.tsx:122
-#: apps/web/src/components/forms/signin.tsx:304
+#: apps/web/src/components/forms/signin.tsx:326
 #: apps/web/src/components/forms/signup.tsx:180
 msgid "Email"
 msgstr "Email"
@@ -1552,12 +1562,14 @@ msgid "File cannot be larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB"
 msgstr "File cannot be larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB"
 
 #: apps/web/src/app/(unauthenticated)/forgot-password/page.tsx:21
-#: apps/web/src/components/forms/signin.tsx:336
+#: apps/web/src/components/forms/signin.tsx:358
 msgid "Forgot your password?"
 msgstr "Forgot your password?"
 
 #: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:326
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:193
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:361
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:239
 #: apps/web/src/components/forms/profile.tsx:110
 #: apps/web/src/components/forms/v2/signup.tsx:300
 msgid "Full Name"
@@ -1995,6 +2007,8 @@ msgstr "New team owner"
 msgid "New Template"
 msgstr "New Template"
 
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:416
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:293
 #: apps/web/src/components/forms/v2/signup.tsx:509
 msgid "Next"
 msgstr "Next"
@@ -2048,7 +2062,7 @@ msgstr "No value found."
 msgid "No worries, it happens! Enter your email and we'll email you a special link to reset your password."
 msgstr "No worries, it happens! Enter your email and we'll email you a special link to reset your password."
 
-#: apps/web/src/components/forms/signin.tsx:142
+#: apps/web/src/components/forms/signin.tsx:160
 msgid "Not supported"
 msgstr "Not supported"
 
@@ -2106,7 +2120,7 @@ msgstr "Opened"
 msgid "Or"
 msgstr "Or"
 
-#: apps/web/src/components/forms/signin.tsx:356
+#: apps/web/src/components/forms/signin.tsx:378
 msgid "Or continue with"
 msgstr "Or continue with"
 
@@ -2123,7 +2137,7 @@ msgstr "Owner"
 msgid "Paid"
 msgstr "Paid"
 
-#: apps/web/src/components/forms/signin.tsx:401
+#: apps/web/src/components/forms/signin.tsx:423
 msgid "Passkey"
 msgstr "Passkey"
 
@@ -2156,14 +2170,14 @@ msgstr "Passkeys"
 msgid "Passkeys allow you to sign in and authenticate using biometrics, password managers, etc."
 msgstr "Passkeys allow you to sign in and authenticate using biometrics, password managers, etc."
 
-#: apps/web/src/components/forms/signin.tsx:143
+#: apps/web/src/components/forms/signin.tsx:161
 msgid "Passkeys are not supported on this browser"
 msgstr "Passkeys are not supported on this browser"
 
 #: apps/web/src/components/(dashboard)/common/command-menu.tsx:65
 #: apps/web/src/components/forms/password.tsx:123
 #: apps/web/src/components/forms/reset-password.tsx:110
-#: apps/web/src/components/forms/signin.tsx:322
+#: apps/web/src/components/forms/signin.tsx:344
 #: apps/web/src/components/forms/signup.tsx:196
 #: apps/web/src/components/forms/v2/signup.tsx:332
 msgid "Password"
@@ -2286,7 +2300,7 @@ msgstr "Please provide a token from your authenticator, or a backup code."
 msgid "Please try again and make sure you enter the correct email address."
 msgstr "Please try again and make sure you enter the correct email address."
 
-#: apps/web/src/components/forms/signin.tsx:185
+#: apps/web/src/components/forms/signin.tsx:203
 msgid "Please try again later or login using your normal details"
 msgstr "Please try again later or login using your normal details"
 
@@ -2696,6 +2710,11 @@ msgstr "Sign as {0} <0>({1})</0>"
 msgid "Sign as<0>{0} <1>({1})</1></0>"
 msgstr "Sign as<0>{0} <1>({1})</1></0>"
 
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:329
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:207
+msgid "Sign document"
+msgstr "Sign document"
+
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-dialog.tsx:59
 msgid "Sign field"
 msgstr "Sign field"
@@ -2706,8 +2725,8 @@ msgid "Sign Here"
 msgstr "Sign Here"
 
 #: apps/web/src/app/not-found.tsx:29
-#: apps/web/src/components/forms/signin.tsx:349
-#: apps/web/src/components/forms/signin.tsx:476
+#: apps/web/src/components/forms/signin.tsx:371
+#: apps/web/src/components/forms/signin.tsx:498
 msgid "Sign In"
 msgstr "Sign In"
 
@@ -2720,6 +2739,11 @@ msgstr "Sign in to your account"
 msgid "Sign Out"
 msgstr "Sign Out"
 
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:350
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:228
+msgid "Sign the document to complete the process."
+msgstr "Sign the document to complete the process."
+
 #: apps/web/src/app/(signing)/sign/[token]/signing-auth-page.tsx:72
 msgid "Sign up"
 msgstr "Sign up"
@@ -2742,6 +2766,8 @@ msgstr "Sign Up with OIDC"
 #: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:338
 #: apps/web/src/app/(signing)/sign/[token]/signature-field.tsx:197
 #: apps/web/src/app/(signing)/sign/[token]/signature-field.tsx:227
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:391
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:268
 #: apps/web/src/components/forms/profile.tsx:132
 msgid "Signature"
 msgstr "Signature"
@@ -2758,8 +2784,8 @@ msgstr "Signatures will appear once the document has been completed"
 msgid "Signed"
 msgstr "Signed"
 
-#: apps/web/src/components/forms/signin.tsx:349
-#: apps/web/src/components/forms/signin.tsx:476
+#: apps/web/src/components/forms/signin.tsx:371
+#: apps/web/src/components/forms/signin.tsx:498
 msgid "Signing in..."
 msgstr "Signing in..."
 
@@ -2808,6 +2834,8 @@ msgstr "Site Settings"
 #: apps/web/src/app/(teams)/t/[teamUrl]/layout-billing-banner.tsx:53
 #: apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx:39
 #: apps/web/src/app/(unauthenticated)/verify-email/[token]/page.tsx:61
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:243
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:123
 #: apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx:50
 #: apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx:99
 #: apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx:210
@@ -3101,6 +3129,10 @@ msgstr "The direct link has been copied to your clipboard"
 msgid "The document has been successfully moved to the selected team."
 msgstr "The document has been successfully moved to the selected team."
 
+#: apps/web/src/app/embed/completed.tsx:29
+msgid "The document is now completed, please follow any instructions provided within the parent application."
+msgstr "The document is now completed, please follow any instructions provided within the parent application."
+
 #: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:159
 msgid "The document was created but could not be sent to recipients."
 msgstr "The document was created but could not be sent to recipients."
@@ -3276,7 +3308,7 @@ msgstr "This link is invalid or has expired. Please contact your team to resend
 msgid "This passkey has already been registered."
 msgstr "This passkey has already been registered."
 
-#: apps/web/src/components/forms/signin.tsx:182
+#: apps/web/src/components/forms/signin.tsx:200
 msgid "This passkey is not configured for this application. Please login and add one in the user settings."
 msgstr "This passkey is not configured for this application. Please login and add one in the user settings."
 
@@ -3284,7 +3316,7 @@ msgstr "This passkey is not configured for this application. Please login and ad
 msgid "This price includes minimum 5 seats."
 msgstr "This price includes minimum 5 seats."
 
-#: apps/web/src/components/forms/signin.tsx:184
+#: apps/web/src/components/forms/signin.tsx:202
 msgid "This session has expired. Please try again."
 msgstr "This session has expired. Please try again."
 
@@ -3363,6 +3395,10 @@ msgstr "To gain access to your account, please confirm your email address by cli
 msgid "To mark this document as viewed, you need to be logged in as <0>{0}</0>"
 msgstr "To mark this document as viewed, you need to be logged in as <0>{0}</0>"
 
+#: apps/web/src/app/embed/authenticate.tsx:21
+msgid "To view this document you need to be signed into your account, please sign in to continue."
+msgstr "To view this document you need to be signed into your account, please sign in to continue."
+
 #: apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx:178
 msgid "Toggle the switch to hide your profile from the public."
 msgstr "Toggle the switch to hide your profile from the public."
@@ -3444,7 +3480,7 @@ msgstr "Two factor authentication"
 msgid "Two factor authentication recovery codes are used to access your account in the event that you lose access to your authenticator app."
 msgstr "Two factor authentication recovery codes are used to access your account in the event that you lose access to your authenticator app."
 
-#: apps/web/src/components/forms/signin.tsx:414
+#: apps/web/src/components/forms/signin.tsx:436
 msgid "Two-Factor Authentication"
 msgstr "Two-Factor Authentication"
 
@@ -3543,8 +3579,8 @@ msgstr "Unable to reset password"
 msgid "Unable to setup two-factor authentication"
 msgstr "Unable to setup two-factor authentication"
 
-#: apps/web/src/components/forms/signin.tsx:229
-#: apps/web/src/components/forms/signin.tsx:237
+#: apps/web/src/components/forms/signin.tsx:247
+#: apps/web/src/components/forms/signin.tsx:255
 msgid "Unable to sign in"
 msgstr "Unable to sign in"
 
@@ -3650,12 +3686,12 @@ msgid "Uploaded file not an allowed file type"
 msgstr "Uploaded file not an allowed file type"
 
 #: apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx:187
-#: apps/web/src/components/forms/signin.tsx:471
+#: apps/web/src/components/forms/signin.tsx:493
 msgid "Use Authenticator"
 msgstr "Use Authenticator"
 
 #: apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx:185
-#: apps/web/src/components/forms/signin.tsx:469
+#: apps/web/src/components/forms/signin.tsx:491
 msgid "Use Backup Code"
 msgstr "Use Backup Code"
 
@@ -3874,9 +3910,9 @@ msgid "We encountered an unknown error while attempting to save your details. Pl
 msgstr "We encountered an unknown error while attempting to save your details. Please try again later."
 
 #: apps/web/src/components/forms/profile.tsx:89
-#: apps/web/src/components/forms/signin.tsx:254
-#: apps/web/src/components/forms/signin.tsx:267
-#: apps/web/src/components/forms/signin.tsx:281
+#: apps/web/src/components/forms/signin.tsx:272
+#: apps/web/src/components/forms/signin.tsx:287
+#: apps/web/src/components/forms/signin.tsx:303
 msgid "We encountered an unknown error while attempting to sign you In. Please try again later."
 msgstr "We encountered an unknown error while attempting to sign you In. Please try again later."
 
@@ -3960,6 +3996,8 @@ msgid "We were unable to setup two-factor authentication for your account. Pleas
 msgstr "We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again."
 
 #: apps/web/src/app/(recipient)/d/[token]/direct-template.tsx:119
+#: apps/web/src/app/embed/direct/[[...url]]/client.tsx:245
+#: apps/web/src/app/embed/sign/[[...url]]/client.tsx:125
 msgid "We were unable to submit this document at this time. Please try again later."
 msgstr "We were unable to submit this document at this time. Please try again later."
 

packages/signing/transports/local-cert.ts

@@ -28,9 +28,18 @@ export const signWithLocalCert = async ({ pdf }: SignWithLocalCertOptions) => {
   }
 
   if (!cert) {
-    cert = Buffer.from(
-      fs.readFileSync(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12'),
-    );
+    let certPath = process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || '/opt/documenso/cert.p12';
+
+    // We don't want to make the development server suddenly crash when using the `dx` script
+    // so we retain this when NODE_ENV isn't set to production which it should be in most production
+    // deployments.
+    //
+    // Our docker image automatically sets this so it shouldn't be an issue for self-hosters.
+    if (process.env.NODE_ENV !== 'production') {
+      certPath = process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12';
+    }
+
+    cert = Buffer.from(fs.readFileSync(certPath));
   }
 
   const signature = signWithP12({

packages/ui/components/document/document-share-button.tsx

@@ -142,8 +142,9 @@ export const DocumentShareButton = ({
           <DialogTitle>Share your signing experience!</DialogTitle>
 
           <DialogDescription className="mt-4">
-            Don't worry, the document you signed or sent wont be shared; only your signing
-            experience is. Share your signing card and showcase your signature!
+            Rest assured, your document is strictly confidential and will never be shared. Only your
+            signing experience will be highlighted. Share your personalized signing card to showcase
+            your signature!
           </DialogDescription>
         </DialogHeader>
 

packages/ui/components/signing-card.tsx

@@ -241,6 +241,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
           mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
           WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
         }}
+        priority
       />
     </motion.div>
   );

packages/ui/package.json

@@ -20,15 +20,16 @@
     "@documenso/tailwind-config": "*",
     "@documenso/tsconfig": "*",
     "@types/luxon": "^3.3.2",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "react": "18.2.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18",
     "typescript": "5.2.2"
   },
   "dependencies": {
     "@documenso/lib": "*",
     "@hookform/resolvers": "^3.3.0",
-    "@lingui/react": "^4.11.1",
+    "@lingui/macro": "^4.11.3",
+    "@lingui/react": "^4.11.3",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-aspect-ratio": "^1.0.2",
@@ -63,12 +64,12 @@
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.2",
-    "next": "14.0.3",
+    "next": "14.2.6",
     "pdfjs-dist": "3.11.174",
-    "react": "18.2.0",
+    "react": "^18",
     "react-colorful": "^5.6.1",
     "react-day-picker": "^8.7.1",
-    "react-dom": "18.2.0",
+    "react-dom": "^18",
     "react-hook-form": "^7.45.4",
     "react-pdf": "7.7.3",
     "react-rnd": "^10.4.1",
@@ -77,4 +78,4 @@
     "ts-pattern": "^5.0.5",
     "zod": "^3.22.4"
   }
-}
+}

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -9,6 +9,13 @@ import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
 import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
@@ -36,6 +43,7 @@ export const SignaturePad = ({
   const [isPressed, setIsPressed] = useState(false);
   const [lines, setLines] = useState<Point[][]>([]);
   const [currentLine, setCurrentLine] = useState<Point[]>([]);
+  const [selectedColor, setSelectedColor] = useState('black');
 
   const perfectFreehandOptions = useMemo(() => {
     const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@@ -85,6 +93,7 @@ export const SignaturePad = ({
           ctx.restore();
           ctx.imageSmoothingEnabled = true;
           ctx.imageSmoothingQuality = 'high';
+          ctx.fillStyle = selectedColor;
 
           lines.forEach((line) => {
             const pathData = new Path2D(
@@ -129,6 +138,7 @@ export const SignaturePad = ({
 
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
+        ctx.fillStyle = selectedColor;
 
         newLines.forEach((line) => {
           const pathData = new Path2D(
@@ -237,7 +247,13 @@ export const SignaturePad = ({
     >
       <canvas
         ref={$el}
-        className={cn('relative block dark:invert', className)}
+        className={cn(
+          'relative block',
+          {
+            'dark:hue-rotate-180 dark:invert': selectedColor === 'black',
+          },
+          className,
+        )}
         style={{ touchAction: 'none' }}
         onPointerMove={(event) => onMouseMove(event)}
         onPointerDown={(event) => onMouseDown(event)}
@@ -247,6 +263,44 @@ export const SignaturePad = ({
         {...props}
       />
 
+      <div className="text-foreground absolute right-2 top-2 filter">
+        <Select defaultValue={selectedColor} onValueChange={(value) => setSelectedColor(value)}>
+          <SelectTrigger className="h-auto w-auto border-none p-1">
+            <SelectValue placeholder="" />
+          </SelectTrigger>
+
+          <SelectContent className="w-[150px]" align="end">
+            <SelectItem value="black">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-black shadow-sm" />
+                <Trans>Black</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="red">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[red] shadow-sm" />
+                <Trans>Red</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="blue">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[blue] shadow-sm" />
+                <Trans>Blue</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="green">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[green] shadow-sm" />
+                <Trans>Green</Trans>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="absolute bottom-4 right-4 flex gap-2">
         <button
           type="button"

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -112,6 +112,7 @@ export const AddTemplateFieldsFormPartial = ({
           recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
         signerToken:
           recipients.find((recipient) => recipient.id === field.recipientId)?.token ?? '',
+        fieldMeta: field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined,
       })),
     },
   });

render.yaml

@@ -43,6 +43,8 @@ services:
           envVarKey: RENDER_EXTERNAL_URL
       - key: NEXT_PUBLIC_MARKETING_URL
         value: 'http://localhost:3001'
+      - key: NEXT_PRIVATE_INTERNAL_WEBAPP_URL
+        value: 'http://localhost:10000'
 
       # SMTP
       - key: NEXT_PRIVATE_SMTP_TRANSPORT

turbo.json

@@ -48,6 +48,7 @@
     "NEXT_PUBLIC_PROJECT",
     "NEXT_PUBLIC_WEBAPP_URL",
     "NEXT_PUBLIC_MARKETING_URL",
+    "NEXT_PRIVATE_INTERNAL_WEBAPP_URL",
     "NEXT_PUBLIC_POSTHOG_KEY",
     "NEXT_PUBLIC_FEATURE_BILLING_ENABLED",
     "NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID",