v1.10.0-rc.5

Remove deprecated route

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

@@ -1,23 +0,0 @@
-name: Cache production build binaries
-description: 'Cache or restore if necessary'
-inputs:
-  node_version:
-    required: false
-    default: v22.x
-runs:
-  using: 'composite'
-  steps:
-    - name: Cache production build
-      uses: actions/cache@v3
-      id: production-build-cache
-      with:
-        path: |
-          ${{ github.workspace }}/apps/web/.next
-          **/.turbo/**
-          **/dist/**
-
-        key: prod-build-${{ github.run_id }}-${{ hashFiles('package-lock.json') }}
-        restore-keys: prod-build-
-
-    - run: npm run build
-      shell: bash

.github/workflows/ci.yml

@@ -26,7 +26,8 @@ jobs:
       - name: Copy env
         run: cp .env.example .env
 
-      - uses: ./.github/actions/cache-build
+      - name: Build app
+        run: npm run build
 
   build_docker:
     name: Build Docker Image

.github/workflows/clean-cache.yml

@@ -1,29 +0,0 @@
-name: cleanup caches by a branch
-on:
-  pull_request:
-    types:
-      - closed
-
-jobs:
-  cleanup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cleanup
-        run: |
-          gh extension install actions/gh-actions-cache
-
-          echo "Fetching list of cache key"
-          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
-
-          ## Setting this to not fail the workflow while deleting cache keys. 
-          set +e
-          echo "Deleting caches..."
-          for cacheKey in $cacheKeysForPR
-          do
-              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
-          done
-          echo "Done"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          REPO: ${{ github.repository }}
-          BRANCH: refs/pull/${{ github.event.pull_request.number }}/merge

.github/workflows/codeql-analysis.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     permissions:
       actions: read
       contents: read
@@ -30,7 +30,8 @@ jobs:
 
       - uses: ./.github/actions/node-install
 
-      - uses: ./.github/actions/cache-build
+      - name: Build app
+        run: npm run build
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v3

.github/workflows/e2e-tests.yml

@@ -28,7 +28,8 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
-      - uses: ./.github/actions/cache-build
+      - name: Build app
+        run: npm run build
 
       - name: Run Playwright tests
         run: npm run ci

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npm run commitlint -- $1

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 

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

@@ -6,5 +6,6 @@
   "solid": "Solid Integration",
   "preact": "Preact Integration",
   "angular": "Angular Integration",
-  "css-variables": "CSS Variables"
+  "css-variables": "CSS Variables",
+  "authoring": "Authoring"
 }

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

@@ -0,0 +1,167 @@
+---
+title: Authoring
+description: Learn how to use embedded authoring to create documents and templates in your application
+---
+
+# Embedded Authoring
+
+In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation directly within your application.
+
+## How Embedded Authoring Works
+
+The embedded authoring feature enables your users to create new documents without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.
+
+## Creating Documents with Embedded Authoring
+
+To implement document creation in your application, use the `EmbedCreateDocument` component from our SDK:
+
+```jsx
+import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+
+const DocumentCreator = () => {
+  // You'll need to obtain a presign token using your API key
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateDocument
+        presignToken={presignToken}
+        externalId="order-12345"
+        onDocumentCreated={(data) => {
+          console.log('Document created with ID:', data.documentId);
+          console.log('External reference ID:', data.externalId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+## Obtaining a Presign Token
+
+Before using the `EmbedCreateDocument` component, you'll need to obtain a presign token from your backend. This token authorizes the embedding session.
+
+You can create a presign token by making a request to:
+
+```
+POST /api/v2-beta/embedding/create-presign-token
+```
+
+This API endpoint requires authentication with your Documenso API key. The token has a default expiration of 1 hour, but you can customize this duration based on your security requirements.
+
+You can find more details on this request at our [API Documentation](https://openapi.documenso.com/reference#tag/embedding)
+
+## Configuration Options
+
+The `EmbedCreateDocument` component accepts several configuration options:
+
+| Option             | Type    | Description                                                        |
+| ------------------ | ------- | ------------------------------------------------------------------ |
+| `presignToken`     | string  | **Required**. The authentication token for the embedding session.  |
+| `externalId`       | string  | Optional reference ID from your system to link with the document.  |
+| `host`             | string  | Optional custom host URL. Defaults to `https://app.documenso.com`. |
+| `css`              | string  | Optional custom CSS to style the embedded component.               |
+| `cssVars`          | object  | Optional CSS variables for colors, spacing, and more.              |
+| `darkModeDisabled` | boolean | Optional flag to disable dark mode.                                |
+| `className`        | string  | Optional CSS class name for the iframe.                            |
+
+## Feature Toggles
+
+You can customize the authoring experience by enabling or disabling specific features:
+
+```jsx
+<EmbedCreateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  features={{
+    allowConfigureSignatureTypes: true,
+    allowConfigureLanguage: true,
+    allowConfigureDateFormat: true,
+    allowConfigureTimezone: true,
+    allowConfigureRedirectUrl: true,
+    allowConfigureCommunication: true,
+  }}
+/>
+```
+
+## Handling Document Creation Events
+
+The `onDocumentCreated` callback is triggered when a document is successfully created, providing both the document ID and your external reference ID:
+
+```jsx
+<EmbedCreateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  externalId="order-12345"
+  onDocumentCreated={(data) => {
+    // Navigate to a success page
+    navigate(`/documents/success?id=${data.documentId}`);
+
+    // Or update your database with the document ID
+    updateOrderDocument(data.externalId, data.documentId);
+  }}
+/>
+```
+
+## Styling the Embedded Component
+
+You can customize the appearance of the embedded component using standard CSS classes:
+
+```jsx
+<EmbedCreateDocument
+  className="h-screen w-full rounded-lg border-none shadow-md"
+  presignToken="YOUR_PRESIGN_TOKEN"
+  css={`
+    .documenso-embed {
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  `}
+  cssVars={{
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
+  }}
+/>
+```
+
+## Complete Integration Example
+
+Here's a complete example of integrating document creation in a React application:
+
+```tsx
+import { useState } from 'react';
+
+import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+
+function DocumentCreator() {
+  // In a real application, you would fetch this token from your backend
+  // using your API key at /api/v2-beta/embedding/create-presign-token
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+  const [documentId, setDocumentId] = useState<number | null>(null);
+
+  if (documentId) {
+    return (
+      <div>
+        <h2>Document Created Successfully!</h2>
+        <p>Document ID: {documentId}</p>
+        <button onClick={() => setDocumentId(null)}>Create Another Document</button>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateDocument
+        presignToken={presignToken}
+        externalId="order-12345"
+        onDocumentCreated={(data) => {
+          setDocumentId(data.documentId);
+        }}
+      />
+    </div>
+  );
+}
+
+export default DocumentCreator;
+```
+
+With embedded authoring, your users can seamlessly create documents within your application, enhancing the overall user experience and streamlining document workflows.

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

@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    colorPrimary: '#0000FF',
+    primary: '#0000FF',
-    colorBackground: '#F5F5F5',
+    background: '#F5F5F5',
-    borderRadius: '8px',
+    radius: '8px',
   }}
 />
 ```
@@ -169,6 +169,19 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
 
 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.
 
+## Embedded Authoring
+
+In addition to embedding signing experiences, Documenso now supports **embedded authoring**, allowing your users to create documents and templates directly within your application.
+
+With embedded authoring, you can:
+
+- Create new documents with custom fields
+- Configure document properties and settings
+- Set up recipients and signing workflows
+- Customize the authoring experience
+
+For detailed implementation instructions and code examples, see our [Embedded Authoring](/developers/embedding/authoring) guide.
+
 ## Related
 
 - [React Integration](/developers/embedding/react)
@@ -178,3 +191,4 @@ If you're using **web components**, the integration process is slightly differen
 - [Preact Integration](/developers/embedding/preact)
 - [Angular Integration](/developers/embedding/angular)
 - [CSS Variables](/developers/embedding/css-variables)
+- [Embedded Authoring](/developers/embedding/authoring)

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

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

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

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

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

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

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

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

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

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

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

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

apps/documentation/providers/plausible.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 import NextPlausibleProvider from 'next-plausible';

apps/openpage-api/lib/add-zero-month.ts

@@ -0,0 +1,54 @@
+import { DateTime } from 'luxon';
+
+export interface TransformedData {
+  labels: string[];
+  datasets: Array<{
+    label: string;
+    data: number[];
+  }>;
+}
+
+export function addZeroMonth(transformedData: TransformedData): TransformedData {
+  const result = {
+    labels: [...transformedData.labels],
+    datasets: transformedData.datasets.map((dataset) => ({
+      label: dataset.label,
+      data: [...dataset.data],
+    })),
+  };
+
+  if (result.labels.length === 0) {
+    return result;
+  }
+
+  if (result.datasets.every((dataset) => dataset.data[0] === 0)) {
+    return result;
+  }
+
+  try {
+    let firstMonth = DateTime.fromFormat(result.labels[0], 'MMM yyyy');
+    if (!firstMonth.isValid) {
+      const formats = ['MMM yyyy', 'MMMM yyyy', 'MM/yyyy', 'yyyy-MM'];
+
+      for (const format of formats) {
+        firstMonth = DateTime.fromFormat(result.labels[0], format);
+        if (firstMonth.isValid) break;
+      }
+
+      if (!firstMonth.isValid) {
+        console.warn(`Could not parse date: "${result.labels[0]}"`);
+        return transformedData;
+      }
+    }
+
+    const zeroMonth = firstMonth.minus({ months: 1 }).toFormat('MMM yyyy');
+    result.labels.unshift(zeroMonth);
+    result.datasets.forEach((dataset) => {
+      dataset.data.unshift(0);
+    });
+
+    return result;
+  } catch (error) {
+    return transformedData;
+  }
+}

apps/openpage-api/lib/growth/get-monthly-completed-document.ts

@@ -1,7 +1,9 @@
+import { DocumentStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
+
+import { addZeroMonth } from '../add-zero-month';
 
 export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
@@ -35,7 +37,7 @@ export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative'
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetCompletedDocumentsMonthlyResult = Awaited<

apps/openpage-api/lib/growth/get-signer-conversion.ts

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
+import { addZeroMonth } from '../add-zero-month';
+
 export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('Recipient')
@@ -34,7 +36,7 @@ export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' =
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetSignerConversionMonthlyResult = Awaited<

apps/openpage-api/lib/growth/get-user-monthly-growth.ts

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
+import { addZeroMonth } from '../add-zero-month';
+
 export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('User')
@@ -32,7 +34,7 @@ export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

apps/openpage-api/lib/transform-data.ts

@@ -1,5 +1,7 @@
 import { DateTime } from 'luxon';
 
+import { addZeroMonth } from './add-zero-month';
+
 type MetricKeys = {
   stars: number;
   forks: number;
@@ -37,31 +39,77 @@ export function transformData({
   data: DataEntry;
   metric: MetricKey;
 }): TransformData {
-  const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
+  try {
-    const [yearA, monthA] = dateA.split('-').map(Number);
+    if (!data || Object.keys(data).length === 0) {
-    const [yearB, monthB] = dateB.split('-').map(Number);
+      return {
+        labels: [],
+        datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
+      };
+    }
 
-    return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
+    const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
-  });
+      try {
+        const [yearA, monthA] = dateA.split('-').map(Number);
+        const [yearB, monthB] = dateB.split('-').map(Number);
 
-  const labels = sortedEntries.map(([date]) => {
+        if (isNaN(yearA) || isNaN(monthA) || isNaN(yearB) || isNaN(monthB)) {
-    const [year, month] = date.split('-');
+          console.warn(`Invalid date format: ${dateA} or ${dateB}`);
-    const dateTime = DateTime.fromObject({
+          return 0;
-      year: Number(year),
+        }
-      month: Number(month),
+
+        return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
+      } catch (error) {
+        console.error('Error sorting entries:', error);
+        return 0;
+      }
     });
-    return dateTime.toFormat('MMM yyyy');
-  });
 
-  return {
+    const labels = sortedEntries.map(([date]) => {
-    labels,
+      try {
-    datasets: [
+        const [year, month] = date.split('-');
-      {
+
-        label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
+        if (!year || !month || isNaN(Number(year)) || isNaN(Number(month))) {
-        data: sortedEntries.map(([_, stats]) => stats[metric]),
+          console.warn(`Invalid date format: ${date}`);
-      },
+          return date;
-    ],
+        }
-  };
+
+        const dateTime = DateTime.fromObject({
+          year: Number(year),
+          month: Number(month),
+        });
+
+        if (!dateTime.isValid) {
+          console.warn(`Invalid DateTime object for: ${date}`);
+          return date;
+        }
+
+        return dateTime.toFormat('MMM yyyy');
+      } catch (error) {
+        console.error('Error formatting date:', error, date);
+        return date;
+      }
+    });
+
+    const transformedData = {
+      labels,
+      datasets: [
+        {
+          label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
+          data: sortedEntries.map(([_, stats]) => {
+            const value = stats[metric];
+            return typeof value === 'number' && !isNaN(value) ? value : 0;
+          }),
+        },
+      ],
+    };
+
+    return addZeroMonth(transformedData);
+  } catch (error) {
+    return {
+      labels: [],
+      datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
+    };
+  }
 }
 
 // To be on the safer side

apps/remix/.bin/build.sh

@@ -1,7 +1,7 @@
-#!/usr/bin/env sh
+#!/usr/bin/env bash
 
 # Exit on error.
-set -eo pipefail
+set -e
 
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 WEB_APP_DIR="$SCRIPT_DIR/.."

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -1,4 +1,7 @@
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -9,64 +12,171 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
 
 import { DocumentSigningDisclosure } from '../general/document-signing/document-signing-disclosure';
 
+export type NextSigner = {
+  name: string;
+  email: string;
+};
+
 type ConfirmationDialogProps = {
   isOpen: boolean;
   onClose: () => void;
-  onConfirm: () => void;
+  onConfirm: (nextSigner?: NextSigner) => void;
   hasUninsertedFields: boolean;
   isSubmitting: boolean;
+  allowDictateNextSigner?: boolean;
+  defaultNextSigner?: NextSigner;
 };
 
+const ZNextSignerFormSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email address'),
+});
+
+type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
+
 export function AssistantConfirmationDialog({
   isOpen,
   onClose,
   onConfirm,
   hasUninsertedFields,
   isSubmitting,
+  allowDictateNextSigner = false,
+  defaultNextSigner,
 }: ConfirmationDialogProps) {
+  const form = useForm<TNextSignerFormSchema>({
+    resolver: zodResolver(ZNextSignerFormSchema),
+    defaultValues: {
+      name: defaultNextSigner?.name ?? '',
+      email: defaultNextSigner?.email ?? '',
+    },
+  });
+
   const onOpenChange = () => {
     if (isSubmitting) {
       return;
     }
 
+    form.reset({
+      name: defaultNextSigner?.name ?? '',
+      email: defaultNextSigner?.email ?? '',
+    });
+
     onClose();
   };
 
+  const handleSubmit = () => {
+    // Validate the form and submit it if dictate signer is enabled.
+    if (allowDictateNextSigner) {
+      void form.handleSubmit(onConfirm)();
+      return;
+    }
+
+    onConfirm();
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
-        <DialogHeader>
+        <Form {...form}>
-          <DialogTitle>
+          <form>
-            <Trans>Complete Document</Trans>
+            <fieldset disabled={isSubmitting} className="border-none p-0">
-          </DialogTitle>
+              <DialogHeader>
-          <DialogDescription>
+                <DialogTitle>
-            <Trans>
+                  <Trans>Complete Document</Trans>
-              Are you sure you want to complete the document? This action cannot be undone. Please
+                </DialogTitle>
-              ensure that you have completed prefilling all relevant fields before proceeding.
+                <DialogDescription>
-            </Trans>
+                  <Trans>
-          </DialogDescription>
+                    Are you sure you want to complete the document? This action cannot be undone.
-        </DialogHeader>
+                    Please ensure that you have completed prefilling all relevant fields before
+                    proceeding.
+                  </Trans>
+                </DialogDescription>
+              </DialogHeader>
 
-        <div className="flex flex-col gap-4">
+              <div className="mt-4 flex flex-col gap-4">
-          <DocumentSigningDisclosure />
+                {allowDictateNextSigner && (
-        </div>
+                  <div className="my-2">
+                    <p className="text-muted-foreground mb-1 text-sm font-semibold">
+                      The next recipient to sign this document will be{' '}
+                    </p>
 
-        <DialogFooter className="mt-4">
+                    <div className="flex flex-col gap-4 rounded-xl border p-4 md:flex-row">
-          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+                      <FormField
-            Cancel
+                        control={form.control}
-          </Button>
+                        name="name"
-          <Button
+                        render={({ field }) => (
-            variant={hasUninsertedFields ? 'destructive' : 'default'}
+                          <FormItem className="flex-1">
-            onClick={onConfirm}
+                            <FormLabel>
-            disabled={isSubmitting}
+                              <Trans>Name</Trans>
-            loading={isSubmitting}
+                            </FormLabel>
-          >
+                            <FormControl>
-            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
+                              <Input
-          </Button>
+                                {...field}
-        </DialogFooter>
+                                className="mt-2"
+                                placeholder="Enter the next signer's name"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="email"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Email</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                type="email"
+                                className="mt-2"
+                                placeholder="Enter the next signer's email"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <DocumentSigningDisclosure className="mt-4" />
+              </div>
+
+              <DialogFooter className="mt-4">
+                <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
+                  <Trans>Cancel</Trans>
+                </Button>
+                <Button
+                  type="button"
+                  variant={hasUninsertedFields ? 'destructive' : 'default'}
+                  disabled={isSubmitting}
+                  onClick={handleSubmit}
+                  loading={isSubmitting}
+                >
+                  {hasUninsertedFields ? <Trans>Proceed</Trans> : <Trans>Continue</Trans>}
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/remix/app/components/dialogs/document-delete-dialog.tsx

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
-import { match } from 'ts-pattern';
+import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -146,7 +146,7 @@ export const DocumentDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(DocumentStatus.COMPLETED, () => (
+              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
                 <AlertDescription>
                   <p>
                     <Trans>By deleting this document, the following will occur:</Trans>

apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx

@@ -0,0 +1,355 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentDistributionMethod } from '@prisma/client';
+import { InfoIcon } from 'lucide-react';
+import type { Control } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
+
+import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
+import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
+import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
+import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
+import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
+import { Combobox } from '@documenso/ui/primitives/combobox';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { useConfigureDocument } from './configure-document-context';
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+
+interface ConfigureDocumentAdvancedSettingsProps {
+  control: Control<TConfigureEmbedFormSchema>;
+  isSubmitting: boolean;
+}
+
+export const ConfigureDocumentAdvancedSettings = ({
+  control,
+  isSubmitting,
+}: ConfigureDocumentAdvancedSettingsProps) => {
+  const { _ } = useLingui();
+
+  const form = useFormContext<TConfigureEmbedFormSchema>();
+  const { features } = useConfigureDocument();
+
+  const { watch, setValue } = form;
+
+  // Lift watch() calls to reduce re-renders
+  const distributionMethod = watch('meta.distributionMethod');
+  const emailSettings = watch('meta.emailSettings');
+  const isEmailDistribution = distributionMethod === DocumentDistributionMethod.EMAIL;
+
+  return (
+    <div>
+      <h3 className="text-foreground mb-1 text-lg font-medium">
+        <Trans>Advanced Settings</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mb-6 text-sm">
+        <Trans>Configure additional options and preferences</Trans>
+      </p>
+
+      <Tabs defaultValue="general">
+        <TabsList className="mb-6 inline-flex">
+          <TabsTrigger value="general" className="px-4">
+            <Trans>General</Trans>
+          </TabsTrigger>
+
+          {features.allowConfigureCommunication && (
+            <TabsTrigger value="communication" className="px-4">
+              <Trans>Communication</Trans>
+            </TabsTrigger>
+          )}
+        </TabsList>
+
+        <TabsContent value="general" className="mt-0">
+          <div className="flex flex-col space-y-6">
+            {/* <FormField
+              control={control}
+              name="meta.externalId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex flex-row items-center">
+                    <Trans>External ID</Trans>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <InfoIcon className="mx-2 h-4 w-4" />
+                      </TooltipTrigger>
+                      <TooltipContent className="text-muted-foreground max-w-xs">
+                        <Trans>
+                          Add an external ID to the document. This can be used to identify the
+                          document in external systems.
+                        </Trans>
+                      </TooltipContent>
+                    </Tooltip>
+                  </FormLabel>
+                  <FormControl>
+                    <Input className="bg-background" {...field} disabled={isSubmitting} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            {features.allowConfigureSignatureTypes && (
+              <FormField
+                control={control}
+                name="meta.signatureTypes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Allowed Signature Types</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelectCombobox
+                        options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
+                          label: _(option.label),
+                          value: option.value,
+                        }))}
+                        selectedValues={field.value}
+                        onChange={field.onChange}
+                        className="bg-background w-full"
+                        emptySelectionPlaceholder="Select signature types"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureLanguage && (
+              <FormField
+                control={control}
+                name="meta.language"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Language</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
+                        <SelectTrigger className="bg-background">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                            <SelectItem key={code} value={code}>
+                              {language.full}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureDateFormat && (
+              <FormField
+                control={control}
+                name="meta.dateFormat"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Date Format</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
+                        <SelectTrigger className="bg-background">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {DATE_FORMATS.map((format) => (
+                            <SelectItem key={format.key} value={format.value}>
+                              {format.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureTimezone && (
+              <FormField
+                control={control}
+                name="meta.timezone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Time Zone</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Combobox
+                        className="bg-background"
+                        options={TIME_ZONES}
+                        {...field}
+                        onChange={(value) => value && field.onChange(value)}
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureRedirectUrl && (
+              <FormField
+                control={control}
+                name="meta.redirectUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex flex-row items-center">
+                      <Trans>Redirect URL</Trans>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <InfoIcon className="mx-2 h-4 w-4" />
+                        </TooltipTrigger>
+                        <TooltipContent className="text-muted-foreground max-w-xs">
+                          <Trans>
+                            Add a URL to redirect the user to once the document is signed
+                          </Trans>
+                        </TooltipContent>
+                      </Tooltip>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} disabled={isSubmitting} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+        </TabsContent>
+
+        {features.allowConfigureCommunication && (
+          <TabsContent value="communication" className="mt-0">
+            <div className="flex flex-col space-y-6">
+              <FormField
+                control={control}
+                name="meta.distributionMethod"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Distribution Method</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
+                        <SelectTrigger className="bg-background">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value={DocumentDistributionMethod.EMAIL}>
+                            <Trans>Email</Trans>
+                          </SelectItem>
+                          <SelectItem value={DocumentDistributionMethod.NONE}>
+                            <Trans>None</Trans>
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>
+                        Choose how to distribute your document to recipients. Email will send
+                        notifications, None will generate signing links for manual distribution.
+                      </Trans>
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <fieldset
+                className="flex flex-col space-y-6 disabled:cursor-not-allowed disabled:opacity-60"
+                disabled={!isEmailDistribution}
+              >
+                <FormField
+                  control={control}
+                  name="meta.subject"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel htmlFor="subject">
+                        <Trans>
+                          Subject <span className="text-muted-foreground">(Optional)</span>
+                        </Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          id="subject"
+                          className="bg-background mt-2"
+                          disabled={isSubmitting || !isEmailDistribution}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={control}
+                  name="meta.message"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel htmlFor="message">
+                        <Trans>
+                          Message <span className="text-muted-foreground">(Optional)</span>
+                        </Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Textarea
+                          id="message"
+                          className="bg-background mt-2 h-32 resize-none"
+                          disabled={isSubmitting || !isEmailDistribution}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DocumentSendEmailMessageHelper />
+
+                <DocumentEmailCheckboxes
+                  className={`mt-2 ${!isEmailDistribution ? 'pointer-events-none' : ''}`}
+                  value={emailSettings}
+                  onChange={(value) => setValue('meta.emailSettings', value)}
+                />
+              </fieldset>
+            </div>
+          </TabsContent>
+        )}
+      </Tabs>
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-context.tsx

@@ -0,0 +1,68 @@
+import { createContext, useContext } from 'react';
+
+export type ConfigureDocumentContext = {
+  // General
+  isTemplate: boolean;
+  isPersisted: boolean;
+  // Features
+  features: {
+    allowConfigureSignatureTypes?: boolean;
+    allowConfigureLanguage?: boolean;
+    allowConfigureDateFormat?: boolean;
+    allowConfigureTimezone?: boolean;
+    allowConfigureRedirectUrl?: boolean;
+    allowConfigureCommunication?: boolean;
+  };
+};
+
+const ConfigureDocumentContext = createContext<ConfigureDocumentContext | null>(null);
+
+export type ConfigureDocumentProviderProps = {
+  isTemplate?: boolean;
+  isPersisted?: boolean;
+  features: {
+    allowConfigureSignatureTypes?: boolean;
+    allowConfigureLanguage?: boolean;
+    allowConfigureDateFormat?: boolean;
+    allowConfigureTimezone?: boolean;
+    allowConfigureRedirectUrl?: boolean;
+    allowConfigureCommunication?: boolean;
+  };
+  children: React.ReactNode;
+};
+
+export const ConfigureDocumentProvider = ({
+  isTemplate,
+  isPersisted,
+  features,
+  children,
+}: ConfigureDocumentProviderProps) => {
+  return (
+    <ConfigureDocumentContext.Provider
+      value={{
+        isTemplate: isTemplate ?? false,
+        isPersisted: isPersisted ?? false,
+        features: {
+          allowConfigureSignatureTypes: features.allowConfigureSignatureTypes ?? true,
+          allowConfigureLanguage: features.allowConfigureLanguage ?? true,
+          allowConfigureDateFormat: features.allowConfigureDateFormat ?? true,
+          allowConfigureTimezone: features.allowConfigureTimezone ?? true,
+          allowConfigureRedirectUrl: features.allowConfigureRedirectUrl ?? true,
+          allowConfigureCommunication: features.allowConfigureCommunication ?? true,
+        },
+      }}
+    >
+      {children}
+    </ConfigureDocumentContext.Provider>
+  );
+};
+
+export const useConfigureDocument = () => {
+  const context = useContext(ConfigureDocumentContext);
+
+  if (!context) {
+    throw new Error('useConfigureDocument must be used within a ConfigureDocumentProvider');
+  }
+
+  return context;
+};

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -0,0 +1,393 @@
+import { useCallback, useRef } from 'react';
+
+import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
+import { motion } from 'framer-motion';
+import { GripVertical, HelpCircle, Plus, Trash } from 'lucide-react';
+import { nanoid } from 'nanoid';
+import type { Control } from 'react-hook-form';
+import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
+
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { useConfigureDocument } from './configure-document-context';
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+
+// Define a type for signer items
+type SignerItem = TConfigureEmbedFormSchema['signers'][number];
+
+export interface ConfigureDocumentRecipientsProps {
+  control: Control<TConfigureEmbedFormSchema>;
+  isSubmitting: boolean;
+}
+
+export const ConfigureDocumentRecipients = ({
+  control,
+  isSubmitting,
+}: ConfigureDocumentRecipientsProps) => {
+  const { _ } = useLingui();
+  const { isTemplate } = useConfigureDocument();
+
+  const $sensorApi = useRef<SensorAPI | null>(null);
+
+  const {
+    fields: signers,
+    append: appendSigner,
+    remove: removeSigner,
+    replace,
+    move,
+  } = useFieldArray({
+    control,
+    name: 'signers',
+  });
+
+  const { getValues, watch } = useFormContext<TConfigureEmbedFormSchema>();
+
+  const signingOrder = watch('meta.signingOrder');
+
+  const { errors } = useFormState({
+    control,
+  });
+
+  const onAddSigner = useCallback(() => {
+    const signerNumber = signers.length + 1;
+
+    appendSigner({
+      formId: nanoid(8),
+      name: isTemplate ? `Recipient ${signerNumber}` : '',
+      email: isTemplate ? `recipient.${signerNumber}@document.com` : '',
+      role: RecipientRole.SIGNER,
+      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1,
+    });
+  }, [appendSigner, signers]);
+
+  const isSigningOrderEnabled = signingOrder === DocumentSigningOrder.SEQUENTIAL;
+
+  const handleSigningOrderChange = useCallback(
+    (index: number, newOrderString: string) => {
+      const trimmedOrderString = newOrderString.trim();
+      if (!trimmedOrderString) {
+        return;
+      }
+
+      const newOrder = Number(trimmedOrderString);
+      if (!Number.isInteger(newOrder) || newOrder < 1) {
+        return;
+      }
+
+      // Get current form values to preserve unsaved input data
+      const currentSigners = getValues('signers') || [...signers];
+      const signer = currentSigners[index];
+
+      // Remove signer from current position and insert at new position
+      const remainingSigners = currentSigners.filter((_: unknown, idx: number) => idx !== index);
+      const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
+      remainingSigners.splice(newPosition, 0, signer);
+
+      // Update signing order for each item
+      const updatedSigners = remainingSigners.map((s: SignerItem, idx: number) => ({
+        ...s,
+        signingOrder: idx + 1,
+      }));
+
+      // Update the form
+      replace(updatedSigners);
+    },
+    [signers, replace, getValues],
+  );
+
+  const onDragEnd = useCallback(
+    (result: DropResult) => {
+      if (!result.destination) return;
+
+      // Use the move function from useFieldArray which preserves input values
+      move(result.source.index, result.destination.index);
+
+      // Update signing orders after move
+      const currentSigners = getValues('signers');
+      const updatedSigners = currentSigners.map((signer: SignerItem, index: number) => ({
+        ...signer,
+        signingOrder: index + 1,
+      }));
+
+      // Update the form with new ordering
+      replace(updatedSigners);
+    },
+    [move, replace, getValues],
+  );
+
+  return (
+    <div>
+      <h3 className="text-foreground mb-1 text-lg font-medium">
+        <Trans>Recipients</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mb-6 text-sm">
+        <Trans>Add signers and configure signing preferences</Trans>
+      </p>
+
+      <FormField
+        control={control}
+        name="meta.signingOrder"
+        render={({ field }) => (
+          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+            <FormControl>
+              <Checkbox
+                {...field}
+                id="signingOrder"
+                checked={field.value === DocumentSigningOrder.SEQUENTIAL}
+                onCheckedChange={(checked) => {
+                  field.onChange(
+                    checked ? DocumentSigningOrder.SEQUENTIAL : DocumentSigningOrder.PARALLEL,
+                  );
+                }}
+                disabled={isSubmitting}
+              />
+            </FormControl>
+            <FormLabel
+              htmlFor="signingOrder"
+              className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              <Trans>Enable signing order</Trans>
+            </FormLabel>
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={control}
+        name="meta.allowDictateNextSigner"
+        render={({ field: { value, ...field } }) => (
+          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+            <FormControl>
+              <Checkbox
+                {...field}
+                id="allowDictateNextSigner"
+                checked={value}
+                onCheckedChange={field.onChange}
+                disabled={isSubmitting || !isSigningOrderEnabled}
+              />
+            </FormControl>
+            <div className="flex items-center">
+              <FormLabel
+                htmlFor="allowDictateNextSigner"
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                <Trans>Allow signers to dictate next signer</Trans>
+              </FormLabel>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-muted-foreground ml-1 cursor-help">
+                    <HelpCircle className="h-3.5 w-3.5" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-80 p-4">
+                  <p>
+                    <Trans>
+                      When enabled, signers can choose who should sign next in the sequence instead
+                      of following the predefined order.
+                    </Trans>
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </FormItem>
+        )}
+      />
+
+      <DragDropContext
+        onDragEnd={onDragEnd}
+        sensors={[
+          (api: SensorAPI) => {
+            $sensorApi.current = api;
+          },
+        ]}
+      >
+        <Droppable droppableId="signers">
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
+              {signers.map((signer, index) => (
+                <Draggable
+                  key={signer.id}
+                  draggableId={signer.id}
+                  index={index}
+                  isDragDisabled={!isSigningOrderEnabled || isSubmitting}
+                >
+                  {(provided, snapshot) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      className={cn('py-1', {
+                        'bg-widget-foreground pointer-events-none rounded-md pt-2':
+                          snapshot.isDragging,
+                      })}
+                    >
+                      <motion.div
+                        className={cn('flex items-end gap-2 pb-2', {
+                          'border-destructive/50': errors?.signers?.[index],
+                        })}
+                      >
+                        {isSigningOrderEnabled && (
+                          <FormField
+                            control={control}
+                            name={`signers.${index}.signingOrder`}
+                            render={({ field }) => (
+                              <FormItem
+                                className={cn('flex w-16 flex-none items-center gap-x-1', {
+                                  'mb-6':
+                                    errors?.signers?.[index] &&
+                                    !errors?.signers?.[index]?.signingOrder,
+                                })}
+                              >
+                                <GripVertical className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                <FormControl>
+                                  <Input
+                                    type="number"
+                                    max={signers.length}
+                                    min={1}
+                                    className="w-full text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                    {...field}
+                                    disabled={isSubmitting || snapshot.isDragging}
+                                    onChange={(e) => {
+                                      field.onChange(e);
+                                    }}
+                                    onBlur={(e) => {
+                                      field.onBlur();
+                                      handleSigningOrderChange(index, e.target.value);
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        )}
+
+                        <FormField
+                          control={control}
+                          name={`signers.${index}.name`}
+                          render={({ field }) => (
+                            <FormItem
+                              className={cn('flex-1', {
+                                'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.name,
+                              })}
+                            >
+                              <FormLabel className="sr-only">
+                                <Trans>Name</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  placeholder={_(msg`Name`)}
+                                  className="w-full"
+                                  {...field}
+                                  disabled={isSubmitting || snapshot.isDragging}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={control}
+                          name={`signers.${index}.email`}
+                          render={({ field }) => (
+                            <FormItem
+                              className={cn('flex-1', {
+                                'mb-6':
+                                  errors?.signers?.[index] && !errors?.signers?.[index]?.email,
+                              })}
+                            >
+                              <FormLabel className="sr-only">
+                                <Trans>Email</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="email"
+                                  placeholder={_(msg`Email`)}
+                                  className="w-full"
+                                  {...field}
+                                  disabled={isSubmitting || snapshot.isDragging}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={control}
+                          name={`signers.${index}.role`}
+                          render={({ field }) => (
+                            <FormItem
+                              className={cn('flex-none', {
+                                'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.role,
+                              })}
+                            >
+                              <FormLabel className="sr-only">
+                                <Trans>Role</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <RecipientRoleSelect
+                                  {...field}
+                                  isAssistantEnabled={isSigningOrderEnabled}
+                                  onValueChange={field.onChange}
+                                  disabled={isSubmitting || snapshot.isDragging}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          disabled={isSubmitting || signers.length === 1 || snapshot.isDragging}
+                          onClick={() => removeSigner(index)}
+                        >
+                          <Trash className="h-4 w-4" />
+                        </Button>
+                      </motion.div>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+
+      <div className="mt-4 flex justify-end">
+        <Button
+          type="button"
+          variant="outline"
+          className="w-auto"
+          disabled={isSubmitting}
+          onClick={onAddSigner}
+        >
+          <Plus className="-ml-1 mr-2 h-5 w-5" />
+          <Trans>Add Signer</Trans>
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-upload.tsx

@@ -0,0 +1,238 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Cloud, FileText, Loader, X } from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
+import { useFormContext } from 'react-hook-form';
+
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useConfigureDocument } from './configure-document-context';
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+
+export interface ConfigureDocumentUploadProps {
+  isSubmitting?: boolean;
+}
+
+export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocumentUploadProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { isPersisted } = useConfigureDocument();
+
+  const form = useFormContext<TConfigureEmbedFormSchema>();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Watch the documentData field from the form
+  const documentData = form.watch('documentData');
+
+  const onFileDrop = async (acceptedFiles: File[]) => {
+    try {
+      const file = acceptedFiles[0];
+
+      if (!file) {
+        return;
+      }
+
+      setIsLoading(true);
+
+      // Convert file to UInt8Array
+      const arrayBuffer = await file.arrayBuffer();
+      const uint8Array = new Uint8Array(arrayBuffer);
+
+      // Store file metadata and UInt8Array in form data
+      form.setValue('documentData', {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        data: uint8Array, // Store as UInt8Array
+      });
+
+      // Auto-populate title if it's empty
+      const currentTitle = form.getValues('title');
+
+      if (!currentTitle) {
+        // Get filename without extension
+        const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, '');
+        form.setValue('title', fileNameWithoutExtension);
+      }
+    } catch (error) {
+      console.error('Error uploading file', error);
+
+      toast({
+        title: _(msg`Error uploading file`),
+        description: _(msg`There was an error uploading your file. Please try again.`),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onDropRejected = () => {
+    toast({
+      title: _(msg`Your document failed to upload.`),
+      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  const onRemoveFile = () => {
+    if (isPersisted) {
+      toast({
+        title: _(msg`Cannot remove document`),
+        description: _(msg`The document is already saved and cannot be changed.`),
+        duration: 5000,
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    form.unregister('documentData');
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'application/pdf': ['.pdf'],
+    },
+    maxSize: APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024,
+    multiple: false,
+    disabled: isSubmitting || isLoading || isPersisted,
+    onDrop: (files) => {
+      void onFileDrop(files);
+    },
+    onDropRejected,
+  });
+
+  return (
+    <div>
+      <FormField
+        control={form.control}
+        name="documentData"
+        render={() => (
+          <FormItem>
+            <FormLabel required>
+              <Trans>Upload Document</Trans>
+            </FormLabel>
+
+            <div className="relative">
+              {!documentData ? (
+                <div className="relative">
+                  <FormControl>
+                    <div
+                      {...getRootProps()}
+                      className={cn(
+                        'border-border bg-background relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed transition',
+                        {
+                          'border-primary/50 bg-primary/5': isDragActive,
+                          'hover:bg-muted/30':
+                            !isDragActive && !isSubmitting && !isLoading && !isPersisted,
+                          'cursor-not-allowed opacity-60': isSubmitting || isLoading || isPersisted,
+                        },
+                      )}
+                    >
+                      <input {...getInputProps()} />
+
+                      <div className="flex flex-col items-center justify-center gap-y-2 px-4 py-4 text-center">
+                        <Cloud
+                          className={cn('h-10 w-10', {
+                            'text-primary': isDragActive,
+                            'text-muted-foreground': !isDragActive,
+                          })}
+                        />
+
+                        <div
+                          className={cn('flex flex-col space-y-1', {
+                            'text-primary': isDragActive,
+                            'text-muted-foreground': !isDragActive,
+                          })}
+                        >
+                          <p className="text-sm font-medium">
+                            {isDragActive ? (
+                              <Trans>Drop your document here</Trans>
+                            ) : isPersisted ? (
+                              <Trans>Document is already uploaded</Trans>
+                            ) : (
+                              <Trans>Drag and drop or click to upload</Trans>
+                            )}
+                          </p>
+                          <p className="text-xs">
+                            {isPersisted ? (
+                              <Trans>This document cannot be changed</Trans>
+                            ) : (
+                              <Trans>
+                                .PDF documents accepted (max {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB)
+                              </Trans>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </FormControl>
+
+                  {isLoading && (
+                    <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
+                      <Loader className="text-muted-foreground h-10 w-10 animate-spin" />
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="mt-2 rounded-lg border p-4">
+                  <div className="flex items-center gap-x-4">
+                    <div className="bg-primary/10 text-primary flex h-12 w-12 items-center justify-center rounded-md">
+                      <FileText className="h-6 w-6" />
+                    </div>
+
+                    <div className="flex-1">
+                      <div className="text-sm font-medium">{documentData.name}</div>
+                      <div className="text-muted-foreground text-xs">
+                        {formatFileSize(documentData.size)}
+                      </div>
+                    </div>
+
+                    {!isPersisted && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={onRemoveFile}
+                        disabled={isSubmitting}
+                        className="h-8 w-8 p-0"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-view.tsx

@@ -0,0 +1,131 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { DocumentDistributionMethod, DocumentSigningOrder, RecipientRole } from '@prisma/client';
+import { nanoid } from 'nanoid';
+import { useForm } from 'react-hook-form';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { ConfigureDocumentAdvancedSettings } from './configure-document-advanced-settings';
+import { useConfigureDocument } from './configure-document-context';
+import { ConfigureDocumentRecipients } from './configure-document-recipients';
+import { ConfigureDocumentUpload } from './configure-document-upload';
+import {
+  type TConfigureEmbedFormSchema,
+  ZConfigureEmbedFormSchema,
+} from './configure-document-view.types';
+
+export interface ConfigureDocumentViewProps {
+  onSubmit: (data: TConfigureEmbedFormSchema) => void | Promise<void>;
+  defaultValues?: Partial<TConfigureEmbedFormSchema>;
+  isSubmitting?: boolean;
+}
+
+export const ConfigureDocumentView = ({ onSubmit, defaultValues }: ConfigureDocumentViewProps) => {
+  const { isTemplate } = useConfigureDocument();
+
+  const form = useForm<TConfigureEmbedFormSchema>({
+    resolver: zodResolver(ZConfigureEmbedFormSchema),
+    defaultValues: {
+      title: defaultValues?.title || '',
+      signers: defaultValues?.signers || [
+        {
+          formId: nanoid(8),
+          name: isTemplate ? `Recipient ${1}` : '',
+          email: isTemplate ? `recipient.${1}@document.com` : '',
+          role: RecipientRole.SIGNER,
+          signingOrder: 1,
+        },
+      ],
+      meta: {
+        subject: defaultValues?.meta?.subject || '',
+        message: defaultValues?.meta?.message || '',
+        distributionMethod:
+          defaultValues?.meta?.distributionMethod || DocumentDistributionMethod.EMAIL,
+        emailSettings: defaultValues?.meta?.emailSettings || ZDocumentEmailSettingsSchema.parse({}),
+        dateFormat: defaultValues?.meta?.dateFormat || DEFAULT_DOCUMENT_DATE_FORMAT,
+        timezone: defaultValues?.meta?.timezone || DEFAULT_DOCUMENT_TIME_ZONE,
+        redirectUrl: defaultValues?.meta?.redirectUrl || '',
+        language: defaultValues?.meta?.language || 'en',
+        signatureTypes: defaultValues?.meta?.signatureTypes || [],
+        signingOrder: defaultValues?.meta?.signingOrder || DocumentSigningOrder.PARALLEL,
+        allowDictateNextSigner: defaultValues?.meta?.allowDictateNextSigner || false,
+        externalId: defaultValues?.meta?.externalId || '',
+      },
+      documentData: defaultValues?.documentData,
+    },
+  });
+
+  const { control, handleSubmit } = form;
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  return (
+    <div className="flex w-full flex-col space-y-8">
+      <div>
+        <h2 className="text-foreground mb-1 text-xl font-semibold">
+          {isTemplate ? <Trans>Configure Template</Trans> : <Trans>Configure Document</Trans>}
+        </h2>
+
+        <p className="text-muted-foreground text-sm">
+          {isTemplate ? (
+            <Trans>Set up your template properties and recipient information</Trans>
+          ) : (
+            <Trans>Set up your document properties and recipient information</Trans>
+          )}
+        </p>
+      </div>
+
+      <Form {...form}>
+        <div className="flex flex-col space-y-8">
+          <div>
+            <FormField
+              control={control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Title</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} disabled={isSubmitting} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <ConfigureDocumentUpload isSubmitting={isSubmitting} />
+          <ConfigureDocumentRecipients control={control} isSubmitting={isSubmitting} />
+          <ConfigureDocumentAdvancedSettings control={control} isSubmitting={isSubmitting} />
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              onClick={onFormSubmit}
+              disabled={isSubmitting}
+              className="w-full sm:w-auto"
+            >
+              <Trans>Continue</Trans>
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-view.types.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod';
+
+import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
+import {
+  ZDocumentMetaDateFormatSchema,
+  ZDocumentMetaLanguageSchema,
+} from '@documenso/trpc/server/document-router/schema';
+
+// Define the schema for configuration
+export type TConfigureEmbedFormSchema = z.infer<typeof ZConfigureEmbedFormSchema>;
+
+export const ZConfigureEmbedFormSchema = z.object({
+  title: z.string().min(1, { message: 'Title is required' }),
+  signers: z
+    .array(
+      z.object({
+        formId: z.string(),
+        name: z.string().min(1, { message: 'Name is required' }),
+        email: z.string().email('Invalid email address'),
+        role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
+        signingOrder: z.number().optional(),
+      }),
+    )
+    .min(1, { message: 'At least one signer is required' }),
+  meta: z.object({
+    subject: z.string().optional(),
+    message: z.string().optional(),
+    distributionMethod: z.nativeEnum(DocumentDistributionMethod),
+    emailSettings: ZDocumentEmailSettingsSchema,
+    dateFormat: ZDocumentMetaDateFormatSchema.optional(),
+    timezone: z.string().min(1, 'Timezone is required'),
+    redirectUrl: z.string().optional(),
+    language: ZDocumentMetaLanguageSchema.optional(),
+    signatureTypes: z.array(z.string()).default([]),
+    signingOrder: z.enum(['SEQUENTIAL', 'PARALLEL']),
+    allowDictateNextSigner: z.boolean().default(false),
+    externalId: z.string().optional(),
+  }),
+  documentData: z
+    .object({
+      name: z.string(),
+      type: z.string(),
+      size: z.number(),
+      data: z.instanceof(Uint8Array), // UInt8Array can't be directly validated by zod
+    })
+    .optional(),
+});

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -0,0 +1,661 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentData } from '@prisma/client';
+import { FieldType, ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
+import { ChevronsUpDown } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { z } from 'zod';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { base64 } from '@documenso/lib/universal/base64';
+import { nanoid } from '@documenso/lib/universal/id';
+import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
+import { useSignerColors } from '@documenso/ui/lib/signer-colors';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { FieldSelector } from '@documenso/ui/primitives/field-selector';
+import { Form } from '@documenso/ui/primitives/form/form';
+import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
+import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
+import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+import { FieldAdvancedSettingsDrawer } from './field-advanced-settings-drawer';
+
+const MIN_HEIGHT_PX = 12;
+const MIN_WIDTH_PX = 36;
+
+const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
+const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
+
+export const ZConfigureFieldsFormSchema = z.object({
+  fields: z.array(
+    z.object({
+      formId: z.string().min(1),
+      id: z.string().min(1),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      recipientId: z.number().min(0),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+      fieldMeta: ZFieldMetaSchema.optional(),
+    }),
+  ),
+});
+
+export type TConfigureFieldsFormSchema = z.infer<typeof ZConfigureFieldsFormSchema>;
+
+export type ConfigureFieldsViewProps = {
+  configData: TConfigureEmbedFormSchema;
+  defaultValues?: Partial<TConfigureFieldsFormSchema>;
+  onBack: (data: TConfigureFieldsFormSchema) => void;
+  onSubmit: (data: TConfigureFieldsFormSchema) => void;
+};
+
+export const ConfigureFieldsView = ({
+  configData,
+  defaultValues,
+  onBack,
+  onSubmit,
+}: ConfigureFieldsViewProps) => {
+  const { toast } = useToast();
+  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+  const { _ } = useLingui();
+
+  // Track if we're on a mobile device
+  const [isMobile, setIsMobile] = useState(false);
+
+  // State for managing the mobile drawer
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Check for mobile viewport on component mount and resize
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkIfMobile();
+
+    // Add resize listener
+    window.addEventListener('resize', checkIfMobile);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', checkIfMobile);
+    };
+  }, []);
+
+  const documentData = useMemo(() => {
+    if (!configData.documentData) {
+      return null;
+    }
+
+    const data = base64.encode(configData.documentData?.data);
+
+    return {
+      id: 'preview',
+      type: 'BYTES_64',
+      data,
+      initialData: data,
+    } satisfies DocumentData;
+  }, [configData.documentData]);
+
+  const recipients = useMemo(() => {
+    return configData.signers.map<Recipient>((signer, index) => ({
+      id: index,
+      name: signer.name || '',
+      email: signer.email || '',
+      role: signer.role,
+      signingOrder: signer.signingOrder || null,
+      documentId: null,
+      templateId: null,
+      token: '',
+      documentDeletedAt: null,
+      expired: null,
+      signedAt: null,
+      authOptions: null,
+      rejectionReason: null,
+      sendStatus: SendStatus.NOT_SENT,
+      readStatus: ReadStatus.NOT_OPENED,
+      signingStatus: SigningStatus.NOT_SIGNED,
+    }));
+  }, [configData.signers]);
+
+  const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
+    () => recipients[0] || null,
+  );
+  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
+  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
+  const [coords, setCoords] = useState({
+    x: 0,
+    y: 0,
+  });
+  const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
+  const [lastActiveField, setLastActiveField] = useState<
+    TConfigureFieldsFormSchema['fields'][0] | null
+  >(null);
+  const [fieldClipboard, setFieldClipboard] = useState<
+    TConfigureFieldsFormSchema['fields'][0] | null
+  >(null);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+  const [currentField, setCurrentField] = useState<TConfigureFieldsFormSchema['fields'][0] | null>(
+    null,
+  );
+
+  const fieldBounds = useRef({
+    height: DEFAULT_HEIGHT_PX,
+    width: DEFAULT_WIDTH_PX,
+  });
+
+  const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
+  const selectedSignerStyles = useSignerColors(
+    selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
+  );
+
+  const form = useForm<TConfigureFieldsFormSchema>({
+    defaultValues: {
+      fields: defaultValues?.fields ?? [],
+    },
+  });
+
+  const { control, handleSubmit } = form;
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  const {
+    append,
+    remove,
+    update,
+    fields: localFields,
+  } = useFieldArray({
+    control: control,
+    name: 'fields',
+  });
+
+  const onFieldCopy = useCallback(
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
+      const { duplicate = false } = options ?? {};
+
+      if (lastActiveField) {
+        event?.preventDefault();
+
+        if (!duplicate) {
+          setFieldClipboard(lastActiveField);
+
+          toast({
+            title: 'Copied field',
+            description: 'Copied field to clipboard',
+          });
+
+          return;
+        }
+
+        const newField: TConfigureFieldsFormSchema['fields'][0] = {
+          ...structuredClone(lastActiveField),
+          formId: nanoid(12),
+          id: nanoid(12),
+          signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+          recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+          pageX: lastActiveField.pageX + 3,
+          pageY: lastActiveField.pageY + 3,
+        };
+
+        append(newField);
+      }
+    },
+    [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
+  );
+
+  const onFieldPaste = useCallback(
+    (event: KeyboardEvent) => {
+      if (fieldClipboard) {
+        event.preventDefault();
+
+        const copiedField = structuredClone(fieldClipboard);
+
+        append({
+          ...copiedField,
+          formId: nanoid(12),
+          id: nanoid(12),
+          signerEmail: selectedRecipient?.email ?? copiedField.signerEmail,
+          recipientId: selectedRecipient?.id ?? copiedField.recipientId,
+          pageX: copiedField.pageX + 3,
+          pageY: copiedField.pageY + 3,
+        });
+      }
+    },
+    [append, fieldClipboard, selectedRecipient?.email, selectedRecipient?.id],
+  );
+
+  useHotkeys(['ctrl+c', 'meta+c'], (evt) => onFieldCopy(evt));
+  useHotkeys(['ctrl+v', 'meta+v'], (evt) => onFieldPaste(evt));
+  useHotkeys(['ctrl+d', 'meta+d'], (evt) => onFieldCopy(evt, { duplicate: true }));
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField) return;
+
+      setIsFieldWithinBounds(
+        isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        ),
+      );
+
+      setCoords({
+        x: event.clientX - fieldBounds.current.width / 2,
+        y: event.clientY - fieldBounds.current.height / 2,
+      });
+    },
+    [isWithinPageBounds, selectedField],
+  );
+
+  const onMouseClick = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField || !selectedRecipient) {
+        return;
+      }
+
+      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+
+      if (
+        !$page ||
+        !isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        )
+      ) {
+        return;
+      }
+
+      const { top, left, height, width } = getBoundingClientRect($page);
+
+      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
+
+      // Calculate x and y as a percentage of the page width and height
+      let pageX = ((event.pageX - left) / width) * 100;
+      let pageY = ((event.pageY - top) / height) * 100;
+
+      // Get the bounds as a percentage of the page width and height
+      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
+      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
+
+      // And center it based on the bounds
+      pageX -= fieldPageWidth / 2;
+      pageY -= fieldPageHeight / 2;
+
+      const field = {
+        id: nanoid(12),
+        formId: nanoid(12),
+        type: selectedField,
+        pageNumber,
+        pageX,
+        pageY,
+        pageWidth: fieldPageWidth,
+        pageHeight: fieldPageHeight,
+        recipientId: selectedRecipient.id,
+        signerEmail: selectedRecipient.email,
+        fieldMeta: undefined,
+      };
+
+      append(field);
+
+      // Automatically open advanced settings for field types that need configuration
+      if (ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING.includes(selectedField)) {
+        setCurrentField(field);
+        setShowAdvancedSettings(true);
+      }
+
+      setSelectedField(null);
+    },
+    [append, getPage, isWithinPageBounds, selectedField, selectedRecipient],
+  );
+
+  const onFieldResize = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const {
+        x: pageX,
+        y: pageY,
+        width: pageWidth,
+        height: pageHeight,
+      } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+        pageWidth,
+        pageHeight,
+      });
+    },
+    [getFieldPosition, localFields, update],
+  );
+
+  const onFieldMove = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const { x: pageX, y: pageY } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+      });
+    },
+    [getFieldPosition, localFields, update],
+  );
+
+  const handleUpdateFieldMeta = useCallback(
+    (formId: string, fieldMeta: TFieldMetaSchema) => {
+      const fieldIndex = localFields.findIndex((field) => field.formId === formId);
+
+      if (fieldIndex !== -1) {
+        const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
+
+        update(fieldIndex, {
+          ...localFields[fieldIndex],
+          fieldMeta: parsedFieldMeta,
+        });
+      }
+    },
+    [localFields, update],
+  );
+
+  useEffect(() => {
+    if (selectedField) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseClick);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseClick);
+    };
+  }, [onMouseClick, onMouseMove, selectedField]);
+
+  useEffect(() => {
+    const observer = new MutationObserver((_mutations) => {
+      const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+
+      if (!$page) {
+        return;
+      }
+
+      fieldBounds.current = {
+        height: Math.max(DEFAULT_HEIGHT_PX),
+        width: Math.max(DEFAULT_WIDTH_PX),
+      };
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // Close drawer when a field is selected on mobile
+  useEffect(() => {
+    if (isMobile && selectedField) {
+      setIsDrawerOpen(false);
+    }
+  }, [isMobile, selectedField]);
+
+  return (
+    <>
+      <div className="grid w-full grid-cols-12 gap-4">
+        {/* Desktop sidebar */}
+        {!isMobile && (
+          <div className="order-2 col-span-12 md:order-1 md:col-span-4">
+            <div className="bg-widget border-border sticky top-4 max-h-[calc(100vh-2rem)] rounded-lg border p-4 pb-6">
+              <h2 className="mb-1 text-lg font-medium">
+                <Trans>Configure Fields</Trans>
+              </h2>
+
+              <p className="text-muted-foreground mb-6 text-sm">
+                <Trans>Configure the fields you want to place on the document.</Trans>
+              </p>
+
+              <RecipientSelector
+                selectedRecipient={selectedRecipient}
+                onSelectedRecipientChange={setSelectedRecipient}
+                recipients={recipients}
+                className="w-full"
+              />
+
+              <hr className="my-6" />
+
+              <div className="space-y-2">
+                <FieldSelector
+                  selectedField={selectedField}
+                  onSelectedFieldChange={setSelectedField}
+                  className="w-full"
+                  disabled={!selectedRecipient}
+                />
+              </div>
+
+              <div className="mt-6 flex gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="flex-1"
+                  loading={form.formState.isSubmitting}
+                  onClick={() => onBack(form.getValues())}
+                >
+                  <Trans>Back</Trans>
+                </Button>
+
+                <Button
+                  className="flex-1"
+                  type="button"
+                  loading={form.formState.isSubmitting}
+                  disabled={!form.formState.isValid}
+                  onClick={async () => onFormSubmit()}
+                >
+                  <Trans>Save</Trans>
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className={cn('order-1 col-span-12 md:order-2', !isMobile && 'md:col-span-8')}>
+          <div className="relative">
+            {selectedField && (
+              <div
+                className={cn(
+                  'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
+                  selectedSignerStyles.default.base,
+                  {
+                    '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
+                    'dark:text-black/60': isFieldWithinBounds,
+                  },
+                  selectedField === 'SIGNATURE' && 'font-signature',
+                )}
+                style={{
+                  top: coords.y,
+                  left: coords.x,
+                  height: fieldBounds.current.height,
+                  width: fieldBounds.current.width,
+                }}
+              >
+                <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+                  {_(FRIENDLY_FIELD_TYPE[selectedField])}
+                </span>
+              </div>
+            )}
+
+            <Form {...form}>
+              {documentData && (
+                <div>
+                  <PDFViewer documentData={documentData} />
+
+                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                    {localFields.map((field, index) => {
+                      const recipientIndex = recipients.findIndex(
+                        (r) => r.id === field.recipientId,
+                      );
+
+                      return (
+                        <FieldItem
+                          key={field.formId}
+                          field={field}
+                          minHeight={MIN_HEIGHT_PX}
+                          minWidth={MIN_WIDTH_PX}
+                          defaultHeight={DEFAULT_HEIGHT_PX}
+                          defaultWidth={DEFAULT_WIDTH_PX}
+                          onResize={(node) => onFieldResize(node, index)}
+                          onMove={(node) => onFieldMove(node, index)}
+                          onRemove={() => remove(index)}
+                          onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                          onFocus={() => setLastActiveField(field)}
+                          onBlur={() => setLastActiveField(null)}
+                          onAdvancedSettings={() => {
+                            setCurrentField(field);
+                            setShowAdvancedSettings(true);
+                          }}
+                          recipientIndex={recipientIndex}
+                          active={activeFieldId === field.formId}
+                          onFieldActivate={() => setActiveFieldId(field.formId)}
+                          onFieldDeactivate={() => setActiveFieldId(null)}
+                          disabled={selectedRecipient?.id !== field.recipientId}
+                        />
+                      );
+                    })}
+                  </ElementVisible>
+                </div>
+              )}
+            </Form>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Floating Action Bar and Drawer */}
+      {isMobile && (
+        <Sheet open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
+          <SheetTrigger asChild>
+            <div className="bg-widget border-border fixed bottom-6 left-6 right-6 z-50 flex items-center justify-between gap-2 rounded-lg border p-4">
+              <span className="text-lg font-medium">
+                <Trans>Configure Fields</Trans>
+              </span>
+
+              <button
+                type="button"
+                className="border-border text-muted-foreground inline-flex h-10 w-10 items-center justify-center rounded-lg border"
+              >
+                <ChevronsUpDown className="h-6 w-6" />
+              </button>
+            </div>
+          </SheetTrigger>
+
+          <SheetContent
+            position="bottom"
+            size="xl"
+            className="bg-widget h-fit max-h-[80vh] overflow-y-auto rounded-t-xl p-4"
+          >
+            <h2 className="mb-1 text-lg font-medium">
+              <Trans>Configure Fields</Trans>
+            </h2>
+
+            <p className="text-muted-foreground mb-6 text-sm">
+              <Trans>Configure the fields you want to place on the document.</Trans>
+            </p>
+
+            <RecipientSelector
+              selectedRecipient={selectedRecipient}
+              onSelectedRecipientChange={setSelectedRecipient}
+              recipients={recipients}
+              className="w-full"
+            />
+
+            <hr className="my-6" />
+
+            <div className="space-y-2">
+              <FieldSelector
+                selectedField={selectedField}
+                onSelectedFieldChange={(field) => {
+                  setSelectedField(field);
+                  if (field) {
+                    setIsDrawerOpen(false);
+                  }
+                }}
+                className="w-full"
+                disabled={!selectedRecipient}
+              />
+            </div>
+
+            <div className="mt-6 flex gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                className="flex-1"
+                loading={form.formState.isSubmitting}
+                onClick={() => onBack(form.getValues())}
+              >
+                <Trans>Back</Trans>
+              </Button>
+
+              <Button
+                className="flex-1"
+                type="button"
+                loading={form.formState.isSubmitting}
+                disabled={!form.formState.isValid}
+                onClick={async () => onFormSubmit()}
+              >
+                <Trans>Save</Trans>
+              </Button>
+            </div>
+          </SheetContent>
+        </Sheet>
+      )}
+
+      <FieldAdvancedSettingsDrawer
+        isOpen={showAdvancedSettings}
+        onOpenChange={setShowAdvancedSettings}
+        currentField={currentField}
+        fields={localFields}
+        onFieldUpdate={handleUpdateFieldMeta}
+      />
+    </>
+  );
+};

apps/remix/app/components/embed/authoring/field-advanced-settings-drawer.tsx

@@ -0,0 +1,83 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type { FieldType } from '@prisma/client';
+
+import { type TFieldMetaSchema as FieldMeta } from '@documenso/lib/types/field-meta';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
+import { FieldAdvancedSettings } from '@documenso/ui/primitives/document-flow/field-item-advanced-settings';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { Sheet, SheetContent, SheetTitle } from '@documenso/ui/primitives/sheet';
+
+export type FieldAdvancedSettingsDrawerProps = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  currentField: {
+    id: string;
+    formId: string;
+    type: FieldType;
+    pageNumber: number;
+    pageX: number;
+    pageY: number;
+    pageWidth: number;
+    pageHeight: number;
+    recipientId: number;
+    signerEmail: string;
+    fieldMeta?: FieldMeta;
+  } | null;
+  fields: Array<{
+    id: string;
+    formId: string;
+    type: FieldType;
+    pageNumber: number;
+    pageX: number;
+    pageY: number;
+    pageWidth: number;
+    pageHeight: number;
+    recipientId: number;
+    signerEmail: string;
+    fieldMeta?: FieldMeta;
+  }>;
+  onFieldUpdate: (formId: string, fieldMeta: FieldMeta) => void;
+};
+
+export const FieldAdvancedSettingsDrawer = ({
+  isOpen,
+  onOpenChange,
+  currentField,
+  fields,
+  onFieldUpdate,
+}: FieldAdvancedSettingsDrawerProps) => {
+  const { _ } = useLingui();
+
+  if (!currentField) {
+    return null;
+  }
+
+  return (
+    <Sheet open={isOpen} onOpenChange={onOpenChange}>
+      <SheetContent position="right" size="lg" className="w-9/12 max-w-sm overflow-y-auto">
+        <SheetTitle className="sr-only">
+          {parseMessageDescriptor(
+            _,
+            msg`Configure ${parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[currentField.type])} Field`,
+          )}
+        </SheetTitle>
+
+        <FieldAdvancedSettings
+          title={msg`Advanced settings`}
+          description={msg`Configure the ${parseMessageDescriptor(
+            _,
+            FRIENDLY_FIELD_TYPE[currentField.type],
+          )} field`}
+          field={currentField}
+          fields={fields}
+          onAdvancedSettings={() => onOpenChange(false)}
+          onSave={(fieldMeta) => {
+            onFieldUpdate(currentField.formId, fieldMeta);
+            onOpenChange(false);
+          }}
+        />
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -1,7 +1,11 @@
+import { Loader } from 'lucide-react';
+
 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...
+      <Loader className="mr-2 h-4 w-4 animate-spin" />
+
+      <span>Loading...</span>
     </div>
   );
 };

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import type { DocumentMeta, Recipient, Signature, TemplateMeta } from '@prisma/client';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -13,6 +13,10 @@ 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 {
+  isFieldUnsignedAndRequired,
+  isRequiredField,
+} from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -21,12 +25,11 @@ import type {
 } 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 { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
@@ -65,16 +68,8 @@ export const EmbedDirectTemplateClientPage = ({
 
   const [searchParams] = useSearchParams();
 
-  const {
+  const { fullName, email, signature, setFullName, setEmail, setSignature } =
-    fullName,
+    useRequiredDocumentSigningContext();
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setEmail,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -92,7 +87,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
 
   const [pendingFields, _completedFields] = [
-    localFields.filter((field) => !field.inserted),
+    localFields.filter((field) => isFieldUnsignedAndRequired(field)),
     localFields.filter((field) => field.inserted),
   ];
 
@@ -110,7 +105,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         const newField: DirectTemplateLocalField = structuredClone({
           ...field,
-          customText: payload.value,
+          customText: payload.value ?? '',
           inserted: true,
           signedValue: payload,
         });
@@ -121,8 +116,10 @@ export const EmbedDirectTemplateClientPage = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: payload.value.startsWith('data:') ? payload.value : null,
+            signatureImageAsBase64:
-            typedSignature: payload.value.startsWith('data:') ? null : payload.value,
+              payload.value && payload.value.startsWith('data:') ? payload.value : null,
+            typedSignature:
+              payload.value && !payload.value.startsWith('data:') ? payload.value : null,
           } satisfies Signature;
         }
 
@@ -180,7 +177,7 @@ export const EmbedDirectTemplateClientPage = ({
   };
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(localFields);
+    validateFieldsInserted(pendingFields);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -188,11 +185,7 @@ export const EmbedDirectTemplateClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      if (hasSignatureField && !signatureValid) {
+      const valid = validateFieldsInserted(pendingFields);
-        return;
-      }
-
-      const valid = validateFieldsInserted(localFields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -205,12 +198,6 @@ export const EmbedDirectTemplateClientPage = ({
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
-      localFields.forEach((field) => {
-        if (!field.signedValue) {
-          throw new Error('Invalid configuration');
-        }
-      });
-
       const {
         documentId,
         token: documentToken,
@@ -221,13 +208,11 @@ export const EmbedDirectTemplateClientPage = ({
         directRecipientName: fullName,
         directRecipientEmail: email,
         templateUpdatedAt: updatedAt,
-        signedFieldValues: localFields.map((field) => {
+        signedFieldValues: localFields
-          if (!field.signedValue) {
+          .filter((field) => {
-            throw new Error('Invalid configuration');
+            return field.signedValue && (isRequiredField(field) || field.inserted);
-          }
+          })
-
+          .map((field) => field.signedValue!),
-          return field.signedValue;
-        }),
       });
 
       if (window.parent) {
@@ -347,7 +332,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
@@ -415,40 +400,24 @@ export const EmbedDirectTemplateClientPage = ({
                   />
                 </div>
 
-                <div>
+                {hasSignatureField && (
-                  <Label htmlFor="Signature">
+                  <div>
-                    <Trans>Signature</Trans>
+                    <Label htmlFor="Signature">
-                  </Label>
+                      <Trans>Signature</Trans>
+                    </Label>
 
-                  <Card className="mt-2" gradient degrees={-120}>
+                    <SignaturePadDialog
-                    <CardContent className="p-0">
+                      className="mt-2"
-                      <SignaturePad
+                      disabled={isThrottled || isSubmitting}
-                        className="h-44 w-full"
+                      disableAnimation
-                        disabled={isThrottled || isSubmitting}
+                      value={signature ?? ''}
-                        defaultValue={signature ?? undefined}
+                      onChange={(v) => setSignature(v ?? '')}
-                        onChange={(value) => {
+                      typedSignatureEnabled={metadata?.typedSignatureEnabled}
-                          setSignature(value);
+                      uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
-                        }}
+                      drawSignatureEnabled={metadata?.drawSignatureEnabled}
-                        onValidityChange={(isValid) => {
+                    />
-                          setSignatureValid(isValid);
+                  </div>
-                        }}
+                )}
-                        allowTypedSignature={Boolean(
-                          metadata &&
-                            'typedSignatureEnabled' in metadata &&
-                            metadata.typedSignatureEnabled,
-                        )}
-                      />
-                    </CardContent>
-                  </Card>
-
-                  {hasSignatureField && !signatureValid && (
-                    <div className="text-destructive mt-2 text-sm">
-                      <Trans>
-                        Signature is too small. Please provide a more complete signature.
-                      </Trans>
-                    </div>
-                  )}
-                </div>
               </div>
             </div>
 

apps/remix/app/components/embed/embed-document-completed.tsx

@@ -10,7 +10,6 @@ export type EmbedDocumentCompletedPageProps = {
 };
 
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
-  console.log({ signature });
   return (
     <div className="embed--DocumentCompleted 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">

apps/remix/app/components/embed/embed-document-fields.tsx

@@ -54,6 +54,8 @@ export const EmbedDocumentFields = ({
               onSignField={onSignField}
               onUnsignField={onUnsignField}
               typedSignatureEnabled={metadata?.typedSignatureEnabled}
+              uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+              drawSignatureEnabled={metadata?.drawSignatureEnabled}
             />
           ))
           .with(FieldType.INITIALS, () => (

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useLayoutEffect, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -15,18 +15,19 @@ import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { 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 { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
@@ -36,6 +37,7 @@ import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-sc
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
+import { DocumentReadOnlyFields } from '../general/document/document-read-only-fields';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
@@ -47,6 +49,7 @@ export type EmbedSignDocumentClientPageProps = {
   documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
+  completedFields: DocumentField[];
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
@@ -60,6 +63,7 @@ export const EmbedSignDocumentClientPage = ({
   documentData,
   recipient,
   fields,
+  completedFields,
   metadata,
   isCompleted,
   hidePoweredBy = false,
@@ -69,15 +73,8 @@ export const EmbedSignDocumentClientPage = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const {
+  const { fullName, email, signature, setFullName, setSignature } =
-    fullName,
+    useRequiredDocumentSigningContext();
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -92,6 +89,8 @@ export const EmbedSignDocumentClientPage = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
+    useState(false);
 
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
 
@@ -101,19 +100,26 @@ export const EmbedSignDocumentClientPage = ({
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
   const [pendingFields, _completedFields] = [
-    fields.filter((field) => field.recipientId === recipient.id && !field.inserted),
+    fields.filter(
+      (field) => field.recipientId === recipient.id && isFieldUnsignedAndRequired(field),
+    ),
     fields.filter((field) => field.inserted),
   ];
 
   const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
+  const fieldsRequiringValidation = useMemo(
+    () => fields.filter(isFieldUnsignedAndRequired),
+    [fields],
+  );
+
   const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
   const assistantSignersId = useId();
 
   const onNextFieldClick = () => {
-    validateFieldsInserted(fields);
+    validateFieldsInserted(fieldsRequiringValidation);
 
     setShowPendingFieldTooltip(true);
     setIsExpanded(false);
@@ -121,11 +127,7 @@ export const EmbedSignDocumentClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      if (hasSignatureField && !signatureValid) {
+      const valid = validateFieldsInserted(fieldsRequiringValidation);
-        return;
-      }
-
-      const valid = validateFieldsInserted(fields);
 
       if (!valid) {
         setShowPendingFieldTooltip(true);
@@ -206,6 +208,7 @@ export const EmbedSignDocumentClientPage = ({
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
       setAllowDocumentRejection(!!data.allowDocumentRejection);
+      setShowOtherRecipientsCompletedFields(!!data.showOtherRecipientsCompletedFields);
 
       if (data.darkModeDisabled) {
         document.documentElement.classList.add('dark-mode-disabled');
@@ -287,7 +290,7 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
             <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
@@ -418,40 +421,24 @@ export const EmbedSignDocumentClientPage = ({
                         />
                       </div>
 
-                      <div>
+                      {hasSignatureField && (
-                        <Label htmlFor="Signature">
+                        <div>
-                          <Trans>Signature</Trans>
+                          <Label htmlFor="Signature">
-                        </Label>
+                            <Trans>Signature</Trans>
+                          </Label>
 
-                        <Card className="mt-2" gradient degrees={-120}>
+                          <SignaturePadDialog
-                          <CardContent className="p-0">
+                            className="mt-2"
-                            <SignaturePad
+                            disabled={isThrottled || isSubmitting}
-                              className="h-44 w-full"
+                            disableAnimation
-                              disabled={isThrottled || isSubmitting}
+                            value={signature ?? ''}
-                              defaultValue={signature ?? undefined}
+                            onChange={(v) => setSignature(v ?? '')}
-                              onChange={(value) => {
+                            typedSignatureEnabled={metadata?.typedSignatureEnabled}
-                                setSignature(value);
+                            uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
-                              }}
+                            drawSignatureEnabled={metadata?.drawSignatureEnabled}
-                              onValidityChange={(isValid) => {
+                          />
-                                setSignatureValid(isValid);
+                        </div>
-                              }}
+                      )}
-                              allowTypedSignature={Boolean(
-                                metadata &&
-                                  'typedSignatureEnabled' in metadata &&
-                                  metadata.typedSignatureEnabled,
-                              )}
-                            />
-                          </CardContent>
-                        </Card>
-
-                        {hasSignatureField && !signatureValid && (
-                          <div className="text-destructive mt-2 text-sm">
-                            <Trans>
-                              Signature is too small. Please provide a more complete signature.
-                            </Trans>
-                          </div>
-                        )}
-                      </div>
                     </>
                   )}
                 </div>
@@ -467,9 +454,7 @@ export const EmbedSignDocumentClientPage = ({
                 ) : (
                   <Button
                     className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
-                    disabled={
+                    disabled={isThrottled}
-                      isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
-                    }
                     loading={isSubmitting}
                     onClick={() => throttledOnCompleteClick()}
                   >
@@ -490,6 +475,9 @@ export const EmbedSignDocumentClientPage = ({
 
           {/* Fields */}
           <EmbedDocumentFields fields={fields} metadata={metadata} />
+
+          {/* Completed fields */}
+          <DocumentReadOnlyFields documentMeta={metadata || undefined} fields={completedFields} />
         </div>
 
         {!hidePoweredBy && (

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -6,10 +6,10 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -42,7 +42,7 @@ export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
 export const DisableAuthenticatorAppDialog = () => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { revalidate } = useRevalidator();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
@@ -92,7 +92,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      await revalidate();
+      await refreshSession();
     } catch (_err) {
       toast({
         title: _(msg`Unable to disable two-factor authentication`),

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -5,12 +5,12 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -48,7 +48,7 @@ export type EnableAuthenticatorAppDialogProps = {
 export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-  const { revalidate } = useRevalidator();
+  const { refreshSession } = useSession();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
@@ -74,6 +74,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     try {
       const data = await authClient.twoFactor.setup();
+      await refreshSession();
 
       setSetup2FAData(data);
     } catch (err) {
@@ -92,6 +93,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
   const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
     try {
       const data = await authClient.twoFactor.enable({ code: token });
+      await refreshSession();
 
       setRecoveryCodes(data.recoveryCodes);
       onSuccess?.();
@@ -139,7 +141,6 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
       setRecoveryCodes(null);
-      void revalidate();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/remix/app/components/forms/profile.tsx

@@ -19,12 +19,15 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZProfileFormSchema = z.object({
-  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+  name: z
-  signature: z.string().min(1, 'Signature Pad cannot be empty'),
+    .string()
+    .trim()
+    .min(1, { message: msg`Please enter a valid name.`.id }),
+  signature: z.string().min(1, { message: msg`Signature Pad cannot be empty.`.id }),
 });
 
 export const ZTwoFactorAuthTokenSchema = z.object({
@@ -109,22 +112,20 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
             </Label>
             <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
           </div>
+
           <FormField
             control={form.control}
             name="signature"
-            render={({ field: { onChange } }) => (
+            render={({ field: { onChange, value } }) => (
               <FormItem>
                 <FormLabel>
                   <Trans>Signature</Trans>
                 </FormLabel>
                 <FormControl>
-                  <SignaturePad
+                  <SignaturePadDialog
-                    className="h-44 w-full"
                     disabled={isSubmitting}
-                    containerClassName={cn('rounded-lg border bg-background')}
+                    value={value}
-                    defaultValue={user.signature ?? undefined}
                     onChange={(v) => onChange(v ?? '')}
-                    allowTypedSignature={true}
                   />
                 </FormControl>
                 <FormMessage />
@@ -134,7 +135,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
         </fieldset>
 
         <Button type="submit" loading={isSubmitting} className="self-end">
-          {isSubmitting ? <Trans>Updating profile...</Trans> : <Trans>Update profile</Trans>}
+          <Trans>Update profile</Trans>
         </Button>
       </form>
     </Form>

apps/remix/app/components/forms/signup.tsx

@@ -30,7 +30,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { UserProfileSkeleton } from '~/components/general/user-profile-skeleton';
@@ -353,16 +353,15 @@ export const SignUpForm = ({
                 <FormField
                   control={form.control}
                   name="signature"
-                  render={({ field: { onChange } }) => (
+                  render={({ field: { onChange, value } }) => (
                     <FormItem>
                       <FormLabel>
                         <Trans>Sign Here</Trans>
                       </FormLabel>
                       <FormControl>
-                        <SignaturePad
+                        <SignaturePadDialog
-                          className="h-36 w-full"
                           disabled={isSubmitting}
-                          containerClassName="mt-2 rounded-lg border bg-background"
+                          value={value}
                           onChange={(v) => onChange(v ?? '')}
                         />
                       </FormControl>
@@ -531,6 +530,27 @@ export const SignUpForm = ({
             </div>
           </form>
         </Form>
+        <p className="text-muted-foreground mt-6 text-xs">
+          <Trans>
+            By proceeding, you agree to our{' '}
+            <Link
+              to="https://documen.so/terms"
+              target="_blank"
+              className="text-documenso-700 duration-200 hover:opacity-70"
+            >
+              Terms of Service
+            </Link>{' '}
+            and{' '}
+            <Link
+              to="https://documen.so/privacy"
+              target="_blank"
+              className="text-documenso-700 duration-200 hover:opacity-70"
+            >
+              Privacy Policy
+            </Link>
+            .
+          </Trans>
+        </p>
       </div>
     </div>
   );

apps/remix/app/components/forms/team-branding-preferences-form.tsx

@@ -308,7 +308,7 @@ export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPref
 
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Save</Trans>
+              <Trans>Update</Trans>
             </Button>
           </div>
         </fieldset>

apps/remix/app/components/forms/team-document-preferences-form.tsx

@@ -8,12 +8,15 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
+import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -23,7 +26,9 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from '@documenso/ui/primitives/form/form';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import {
   Select,
   SelectContent,
@@ -38,8 +43,10 @@ const ZTeamDocumentPreferencesFormSchema = z.object({
   documentVisibility: z.nativeEnum(DocumentVisibility),
   documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES),
   includeSenderDetails: z.boolean(),
-  typedSignatureEnabled: z.boolean(),
   includeSigningCertificate: z.boolean(),
+  signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
+    message: msg`At least one signature type must be enabled`.id,
+  }),
 });
 
 type TTeamDocumentPreferencesFormSchema = z.infer<typeof ZTeamDocumentPreferencesFormSchema>;
@@ -69,8 +76,8 @@ export const TeamDocumentPreferencesForm = ({
         ? settings?.documentLanguage
         : 'en',
       includeSenderDetails: settings?.includeSenderDetails ?? false,
-      typedSignatureEnabled: settings?.typedSignatureEnabled ?? true,
       includeSigningCertificate: settings?.includeSigningCertificate ?? true,
+      signatureTypes: extractTeamSignatureSettings(settings),
     },
     resolver: zodResolver(ZTeamDocumentPreferencesFormSchema),
   });
@@ -84,7 +91,7 @@ export const TeamDocumentPreferencesForm = ({
         documentLanguage,
         includeSenderDetails,
         includeSigningCertificate,
-        typedSignatureEnabled,
+        signatureTypes,
       } = data;
 
       await updateTeamDocumentPreferences({
@@ -93,8 +100,10 @@ export const TeamDocumentPreferencesForm = ({
           documentVisibility,
           documentLanguage,
           includeSenderDetails,
-          typedSignatureEnabled,
           includeSigningCertificate,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
         },
       });
 
@@ -190,6 +199,44 @@ export const TeamDocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="signatureTypes"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel className="flex flex-row items-center">
+                  <Trans>Default Signature Settings</Trans>
+                  <DocumentSignatureSettingsTooltip />
+                </FormLabel>
+
+                <FormControl>
+                  <MultiSelectCombobox
+                    options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
+                      label: _(option.label),
+                      value: option.value,
+                    }))}
+                    selectedValues={field.value}
+                    onChange={field.onChange}
+                    className="bg-background w-full"
+                    enableSearch={false}
+                    emptySelectionPlaceholder="Select signature types"
+                    testId="signature-types-combobox"
+                  />
+                </FormControl>
+
+                {form.formState.errors.signatureTypes ? (
+                  <FormMessage />
+                ) : (
+                  <FormDescription>
+                    <Trans>
+                      Controls which signatures are allowed to be used when signing a document.
+                    </Trans>
+                  </FormDescription>
+                )}
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="includeSenderDetails"
@@ -238,36 +285,6 @@ export const TeamDocumentPreferencesForm = ({
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="typedSignatureEnabled"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Enable Typed Signature</Trans>
-                </FormLabel>
-
-                <div>
-                  <FormControl className="block">
-                    <Switch
-                      ref={field.ref}
-                      name={field.name}
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </div>
-
-                <FormDescription>
-                  <Trans>
-                    Controls whether the recipients can sign the documents using a typed signature.
-                    Enable or disable the typed signature globally.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
           <FormField
             control={form.control}
             name="includeSigningCertificate"
@@ -301,7 +318,7 @@ export const TeamDocumentPreferencesForm = ({
 
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Save</Trans>
+              <Trans>Update</Trans>
             </Button>
           </div>
         </fieldset>

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -76,7 +76,7 @@ export const AppNavDesktop = ({
 
       <Button
         variant="outline"
-        className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
+        className="text-muted-foreground flex w-full max-w-96 items-center justify-between rounded-lg"
         onClick={() => setIsCommandMenuOpen(true)}
       >
         <div className="flex items-center">

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -113,7 +113,11 @@ export const DirectTemplatePageView = ({
 
       const redirectUrl = template.templateMeta?.redirectUrl;
 
-      await (redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${token}/complete`));
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      } else {
+        await navigate(`/sign/${token}/complete`);
+      }
     } catch (err) {
       toast({
         title: _(msg`Something went wrong`),

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient, Signature } from '@prisma/client';
@@ -24,7 +24,6 @@ import type {
 } 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 {
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
@@ -35,7 +34,7 @@ import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/ty
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useStep } from '@documenso/ui/primitives/stepper';
 
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@@ -73,8 +72,7 @@ export const DirectTemplateSigningForm = ({
   template,
   onSubmit,
 }: DirectTemplateSigningFormProps) => {
-  const { fullName, signature, signatureValid, setFullName, setSignature } =
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
-    useRequiredDocumentSigningContext();
 
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
@@ -91,7 +89,7 @@ export const DirectTemplateSigningForm = ({
 
         const tempField: DirectTemplateLocalField = {
           ...field,
-          customText: value.value,
+          customText: value.value ?? '',
           inserted: true,
           signedValue: value,
         };
@@ -102,8 +100,8 @@ export const DirectTemplateSigningForm = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
+            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
-            typedSignature: value.value.startsWith('data:') ? null : value.value,
+            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
           } satisfies Signature;
         }
 
@@ -135,8 +133,6 @@ export const DirectTemplateSigningForm = ({
     );
   };
 
-  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
-
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
   }, [localFields]);
@@ -149,10 +145,6 @@ export const DirectTemplateSigningForm = ({
   const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
     const isFieldsValid = validateFieldsInserted(localFields);
 
     if (!isFieldsValid) {
@@ -170,6 +162,55 @@ export const DirectTemplateSigningForm = ({
     // Do not reset to false since we do a redirect.
   };
 
+  useEffect(() => {
+    const updatedFields = [...localFields];
+
+    localFields.forEach((field) => {
+      const index = updatedFields.findIndex((f) => f.id === field.id);
+      let value = '';
+
+      match(field.type)
+        .with(FieldType.TEXT, () => {
+          const meta = field.fieldMeta ? ZTextFieldMeta.safeParse(field.fieldMeta) : null;
+
+          if (meta?.success) {
+            value = meta.data.text ?? '';
+          }
+        })
+        .with(FieldType.NUMBER, () => {
+          const meta = field.fieldMeta ? ZNumberFieldMeta.safeParse(field.fieldMeta) : null;
+
+          if (meta?.success) {
+            value = meta.data.value ?? '';
+          }
+        })
+        .with(FieldType.DROPDOWN, () => {
+          const meta = field.fieldMeta ? ZDropdownFieldMeta.safeParse(field.fieldMeta) : null;
+
+          if (meta?.success) {
+            value = meta.data.defaultValue ?? '';
+          }
+        });
+
+      if (value) {
+        const signedValue = {
+          token: directRecipient.token,
+          fieldId: field.id,
+          value,
+        };
+
+        updatedFields[index] = {
+          ...field,
+          customText: value,
+          inserted: true,
+          signedValue,
+        };
+      }
+    });
+
+    setLocalFields(updatedFields);
+  }, []);
+
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
@@ -191,6 +232,8 @@ export const DirectTemplateSigningForm = ({
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                   typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                  uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                  drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -335,19 +378,15 @@ export const DirectTemplateSigningForm = ({
                 <Trans>Signature</Trans>
               </Label>
 
-              <Card className="mt-2" gradient degrees={-120}>
+              <SignaturePadDialog
-                <CardContent className="p-0">
+                className="mt-2"
-                  <SignaturePad
+                disabled={isSubmitting}
-                    className="h-44 w-full"
+                value={signature ?? ''}
-                    disabled={isSubmitting}
+                onChange={(value) => setSignature(value)}
-                    defaultValue={signature ?? undefined}
+                typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
-                    onChange={(value) => {
+                uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
-                      setSignature(value);
+                drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
-                    }}
+              />
-                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
-                  />
-                </CardContent>
-              </Card>
             </div>
           </div>
         </div>

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -97,6 +97,10 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
+      if (!isLengthConditionMet) {
+        return;
+      }
+
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
@@ -194,18 +198,30 @@ export const DocumentSigningCheckboxField = ({
 
       setCheckedValues(updatedValues);
 
-      await removeSignedFieldWithToken({
+      const removePayload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
 
-      if (updatedValues.length > 0) {
+      if (onUnsignField) {
-        await signFieldWithToken({
+        await onUnsignField(removePayload);
+      } else {
+        await removeSignedFieldWithToken(removePayload);
+      }
+
+      if (updatedValues.length > 0 && shouldAutoSignField) {
+        const signPayload: TSignFieldWithTokenMutationSchema = {
           token: recipient.token,
           fieldId: field.id,
           value: toCheckboxValue(updatedValues),
           isBase64: true,
-        });
+        };
+
+        if (onSignField) {
+          await onSignField(signPayload);
+        } else {
+          await signFieldWithToken(signPayload);
+        }
       }
     } catch (err) {
       console.error(err);

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -1,8 +1,12 @@
 import { useMemo, useState } from 'react';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import type { Field } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
 
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { Button } from '@documenso/ui/primitives/button';
@@ -13,6 +17,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
 
 import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
 
@@ -21,11 +34,23 @@ export type DocumentSigningCompleteDialogProps = {
   documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
-  onSignatureComplete: () => void | Promise<void>;
+  onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise<void>;
   role: RecipientRole;
   disabled?: boolean;
+  allowDictateNextSigner?: boolean;
+  defaultNextSigner?: {
+    name: string;
+    email: string;
+  };
 };
 
+const ZNextSignerFormSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email address'),
+});
+
+type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
+
 export const DocumentSigningCompleteDialog = ({
   isSubmitting,
   documentTitle,
@@ -34,19 +59,54 @@ export const DocumentSigningCompleteDialog = ({
   onSignatureComplete,
   role,
   disabled = false,
+  allowDictateNextSigner = false,
+  defaultNextSigner,
 }: DocumentSigningCompleteDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
+  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
+
+  const form = useForm<TNextSignerFormSchema>({
+    resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
+    defaultValues: {
+      name: defaultNextSigner?.name ?? '',
+      email: defaultNextSigner?.email ?? '',
+    },
+  });
 
   const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
 
   const handleOpenChange = (open: boolean) => {
-    if (isSubmitting || !isComplete) {
+    if (form.formState.isSubmitting || !isComplete) {
       return;
     }
 
+    if (open) {
+      form.reset({
+        name: defaultNextSigner?.name ?? '',
+        email: defaultNextSigner?.email ?? '',
+      });
+    }
+
+    setIsEditingNextSigner(false);
     setShowDialog(open);
   };
 
+  const onFormSubmit = async (data: TNextSignerFormSchema) => {
+    console.log('data', data);
+    console.log('form.formState.errors', form.formState.errors);
+    try {
+      if (allowDictateNextSigner && data.name && data.email) {
+        await onSignatureComplete({ name: data.name, email: data.email });
+      } else {
+        await onSignatureComplete();
+      }
+    } catch (error) {
+      console.error('Error completing signature:', error);
+    }
+  };
+
+  const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
+
   return (
     <Dialog open={showDialog} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -58,92 +118,196 @@ export const DocumentSigningCompleteDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
+          {match({ isComplete, role })
+            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
+            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
+            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
+              <Trans>Mark as viewed</Trans>
+            ))
+            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
+            .exhaustive()}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
-        <DialogTitle>
+        <Form {...form}>
-          <div className="text-foreground text-xl font-semibold">
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
-            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+              <DialogTitle>
-            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
+                <div className="text-foreground text-xl font-semibold">
-          </div>
+                  {match(role)
-        </DialogTitle>
+                    .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
+                    .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
+                    .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
+                    .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
+                    .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
+                    .exhaustive()}
+                </div>
+              </DialogTitle>
 
-        <div className="text-muted-foreground max-w-[50ch]">
+              <div className="text-muted-foreground max-w-[50ch]">
-          {role === RecipientRole.VIEWER && (
+                {match(role)
-            <span>
+                  .with(RecipientRole.VIEWER, () => (
-              <Trans>
+                    <span>
-                <span className="inline-flex flex-wrap">
+                      <Trans>
-                  You are about to complete viewing "
+                        <span className="inline-flex flex-wrap">
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                          You are about to complete viewing "
-                    {documentTitle}
+                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                  </span>
+                            {documentTitle}
-                  ".
+                          </span>
-                </span>
+                          ".
-                <br /> Are you sure?
+                        </span>
-              </Trans>
+                        <br /> Are you sure?
-            </span>
+                      </Trans>
-          )}
+                    </span>
-          {role === RecipientRole.SIGNER && (
+                  ))
-            <span>
+                  .with(RecipientRole.SIGNER, () => (
-              <Trans>
+                    <span>
-                <span className="inline-flex flex-wrap">
+                      <Trans>
-                  You are about to complete signing "
+                        <span className="inline-flex flex-wrap">
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                          You are about to complete signing "
-                    {documentTitle}
+                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                  </span>
+                            {documentTitle}
-                  ".
+                          </span>
-                </span>
+                          ".
-                <br /> Are you sure?
+                        </span>
-              </Trans>
+                        <br /> Are you sure?
-            </span>
+                      </Trans>
-          )}
+                    </span>
-          {role === RecipientRole.APPROVER && (
+                  ))
-            <span>
+                  .with(RecipientRole.APPROVER, () => (
-              <Trans>
+                    <span>
-                <span className="inline-flex flex-wrap">
+                      <Trans>
-                  You are about to complete approving{' '}
+                        <span className="inline-flex flex-wrap">
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                          You are about to complete approving{' '}
-                    "{documentTitle}"
+                          <span className="inline-block max-w-[11rem] truncate align-baseline">
-                  </span>
+                            "{documentTitle}"
-                  .
+                          </span>
-                </span>
+                          .
-                <br /> Are you sure?
+                        </span>
-              </Trans>
+                        <br /> Are you sure?
-            </span>
+                      </Trans>
-          )}
+                    </span>
-        </div>
+                  ))
+                  .otherwise(() => (
+                    <span>
+                      <Trans>
+                        <span className="inline-flex flex-wrap">
+                          You are about to complete viewing "
+                          <span className="inline-block max-w-[11rem] truncate align-baseline">
+                            {documentTitle}
+                          </span>
+                          ".
+                        </span>
+                        <br /> Are you sure?
+                      </Trans>
+                    </span>
+                  ))}
+              </div>
 
-        <DocumentSigningDisclosure className="mt-4" />
+              {allowDictateNextSigner && (
+                <div className="mt-4 flex flex-col gap-4">
+                  {!isEditingNextSigner && (
+                    <div>
+                      <p className="text-muted-foreground text-sm">
+                        The next recipient to sign this document will be{' '}
+                        <span className="font-semibold">{form.watch('name')}</span> (
+                        <span className="font-semibold">{form.watch('email')}</span>).
+                      </p>
 
-        <DialogFooter>
+                      <Button
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
+                        type="button"
-            <Button
+                        className="mt-2"
-              type="button"
+                        variant="outline"
-              className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                        size="sm"
-              variant="secondary"
+                        onClick={() => setIsEditingNextSigner((prev) => !prev)}
-              onClick={() => {
+                      >
-                setShowDialog(false);
+                        <Trans>Update Recipient</Trans>
-              }}
+                      </Button>
-            >
+                    </div>
-              <Trans>Cancel</Trans>
+                  )}
-            </Button>
 
-            <Button
+                  {isEditingNextSigner && (
-              type="button"
+                    <div className="flex flex-col gap-4 md:flex-row">
-              className="flex-1"
+                      <FormField
-              disabled={!isComplete}
+                        control={form.control}
-              loading={isSubmitting}
+                        name="name"
-              onClick={onSignatureComplete}
+                        render={({ field }) => (
-            >
+                          <FormItem className="flex-1">
-              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+                            <FormLabel>
-              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+                              <Trans>Name</Trans>
-              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
+                            </FormLabel>
-            </Button>
+                            <FormControl>
-          </div>
+                              <Input
-        </DialogFooter>
+                                {...field}
+                                className="mt-2"
+                                placeholder="Enter the next signer's name"
+                              />
+                            </FormControl>
+
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="email"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Email</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                type="email"
+                                className="mt-2"
+                                placeholder="Enter the next signer's email"
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <DocumentSigningDisclosure className="mt-4" />
+
+              <DialogFooter className="mt-4">
+                <div className="flex w-full flex-1 flex-nowrap gap-4">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    onClick={() => setShowDialog(false)}
+                    disabled={form.formState.isSubmitting}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    className="flex-1"
+                    disabled={!isComplete || !isNextSignerValid}
+                    loading={form.formState.isSubmitting}
+                  >
+                    {match(role)
+                      .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
+                      .with(RecipientRole.SIGNER, () => <Trans>Sign</Trans>)
+                      .with(RecipientRole.APPROVER, () => <Trans>Approve</Trans>)
+                      .with(RecipientRole.CC, () => <Trans>Mark as Viewed</Trans>)
+                      .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
+                      .exhaustive()}
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -181,6 +181,23 @@ export const DocumentSigningFieldContainer = ({
           </button>
         )}
 
+        {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
+          field.fieldMeta?.label && (
+            <div
+              className={cn(
+                'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
+                {
+                  'bg-foreground/5 border-border border': !field.inserted,
+                },
+                {
+                  'bg-documenso-200 border-primary border': field.inserted,
+                },
+              )}
+            >
+              {field.fieldMeta.label}
+            </div>
+          )}
+
         {children}
       </FieldRootContainer>
     </div>

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -18,14 +18,16 @@ import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { AssistantConfirmationDialog } from '../../dialogs/assistant-confirmation-dialog';
+import {
+  AssistantConfirmationDialog,
+  type NextSigner,
+} from '../../dialogs/assistant-confirmation-dialog';
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 
@@ -59,15 +61,17 @@ export const DocumentSigningForm = ({
 
   const assistantSignersId = useId();
 
-  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
-    useRequiredDocumentSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
-  const { mutateAsync: completeDocumentWithToken } =
+  const {
-    trpc.recipient.completeDocumentWithToken.useMutation();
+    mutateAsync: completeDocumentWithToken,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
 
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
@@ -75,10 +79,8 @@ export const DocumentSigningForm = ({
     },
   });
 
-  const { handleSubmit, formState } = useForm();
-
   // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
+  const isSubmitting = isPending || isSuccess;
 
   const fieldsRequiringValidation = useMemo(
     () => fields.filter(isFieldUnsignedAndRequired),
@@ -100,22 +102,6 @@ export const DocumentSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const onFormSubmit = async () => {
-    setValidateUninsertedFields(true);
-
-    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
-
-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
-    if (!isFieldsValid) {
-      return;
-    }
-
-    await completeDocument();
-  };
-
   const onAssistantFormSubmit = () => {
     if (uninsertedRecipientFields.length > 0) {
       return;
@@ -124,11 +110,11 @@ export const DocumentSigningForm = ({
     setIsConfirmationDialogOpen(true);
   };
 
-  const handleAssistantConfirmDialogSubmit = async () => {
+  const handleAssistantConfirmDialogSubmit = async (nextSigner?: NextSigner) => {
     setIsAssistantSubmitting(true);
 
     try {
-      await completeDocument();
+      await completeDocument(undefined, nextSigner);
     } catch (err) {
       toast({
         title: 'Error',
@@ -141,12 +127,18 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
+  const completeDocument = async (
-    await completeDocumentWithToken({
+    authOptions?: TRecipientActionAuth,
+    nextSigner?: { email: string; name: string },
+  ) => {
+    const payload = {
       token: recipient.token,
       documentId: document.id,
       authOptions,
-    });
+      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+    };
+
+    await completeDocumentWithToken(payload);
 
     analytics.capture('App: Recipient has completed signing', {
       signerId: recipient.id,
@@ -161,6 +153,29 @@ export const DocumentSigningForm = ({
     }
   };
 
+  const nextRecipient = useMemo(() => {
+    if (
+      !document.documentMeta?.signingOrder ||
+      document.documentMeta.signingOrder !== 'SEQUENTIAL'
+    ) {
+      return undefined;
+    }
+
+    const sortedRecipients = allRecipients.sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) return a.id - b.id;
+      if (a.signingOrder === null) return 1;
+      if (b.signingOrder === null) return -1;
+      if (a.signingOrder === b.signingOrder) return a.id - b.id;
+      return a.signingOrder - b.signingOrder;
+    });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
+  }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
+
   return (
     <div
       className={cn(
@@ -210,12 +225,19 @@ export const DocumentSigningForm = ({
 
                   <DocumentSigningCompleteDialog
                     isSubmitting={isSubmitting}
-                    onSignatureComplete={handleSubmit(onFormSubmit)}
                     documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
+                    onSignatureComplete={async (nextSigner) => {
+                      await completeDocument(undefined, nextSigner);
+                    }}
                     role={recipient.role}
-                    disabled={!isRecipientsTurn}
+                    allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
+                    defaultNextSigner={
+                      nextRecipient
+                        ? { name: nextRecipient.name, email: nextRecipient.email }
+                        : undefined
+                    }
                   />
                 </div>
               </div>
@@ -294,9 +316,8 @@ export const DocumentSigningForm = ({
                     className="w-full"
                     size="lg"
                     loading={isAssistantSubmitting}
-                    disabled={isAssistantSubmitting || uninsertedRecipientFields.length > 0}
                   >
-                    {isAssistantSubmitting ? <Trans>Submitting...</Trans> : <Trans>Continue</Trans>}
+                    <Trans>Continue</Trans>
                   </Button>
                 </div>
 
@@ -306,14 +327,26 @@ export const DocumentSigningForm = ({
                   onClose={() => !isAssistantSubmitting && setIsConfirmationDialogOpen(false)}
                   onConfirm={handleAssistantConfirmDialogSubmit}
                   isSubmitting={isAssistantSubmitting}
+                  allowDictateNextSigner={
+                    nextRecipient && document.documentMeta?.allowDictateNextSigner
+                  }
+                  defaultNextSigner={
+                    nextRecipient
+                      ? { name: nextRecipient.name, email: nextRecipient.email }
+                      : undefined
+                  }
                 />
               </form>
             </>
           ) : (
             <>
-              <form onSubmit={handleSubmit(onFormSubmit)}>
+              <div>
                 <p className="text-muted-foreground mt-2 text-sm">
-                  <Trans>Please review the document before signing.</Trans>
+                  {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
+                    <Trans>Please review the document before approving.</Trans>
+                  ) : (
+                    <Trans>Please review the document before signing.</Trans>
+                  )}
                 </p>
 
                 <hr className="border-border mb-8 mt-4" />
@@ -337,64 +370,59 @@ export const DocumentSigningForm = ({
                       />
                     </div>
 
-                    <div>
+                    {hasSignatureField && (
-                      <Label htmlFor="Signature">
+                      <div>
-                        <Trans>Signature</Trans>
+                        <Label htmlFor="Signature">
-                      </Label>
+                          <Trans>Signature</Trans>
+                        </Label>
 
-                      <Card className="mt-2" gradient degrees={-120}>
+                        <SignaturePadDialog
-                        <CardContent className="p-0">
+                          className="mt-2"
-                          <SignaturePad
+                          disabled={isSubmitting}
-                            className="h-44 w-full"
+                          value={signature ?? ''}
-                            disabled={isSubmitting}
+                          onChange={(v) => setSignature(v ?? '')}
-                            defaultValue={signature ?? undefined}
+                          typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
-                            onValidityChange={(isValid) => {
+                          uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
-                              setSignatureValid(isValid);
+                          drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
-                            }}
+                        />
-                            onChange={(value) => {
+                      </div>
-                              if (signatureValid) {
+                    )}
-                                setSignature(value);
-                              }
-                            }}
-                            allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
-                          />
-                        </CardContent>
-                      </Card>
-
-                      {hasSignatureField && !signatureValid && (
-                        <div className="text-destructive mt-2 text-sm">
-                          <Trans>
-                            Signature is too small. Please provide a more complete signature.
-                          </Trans>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="flex flex-col gap-4 md:flex-row">
-                    <Button
-                      type="button"
-                      className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
-                      variant="secondary"
-                      size="lg"
-                      disabled={typeof window !== 'undefined' && window.history.length <= 1}
-                      onClick={async () => navigate(-1)}
-                    >
-                      <Trans>Cancel</Trans>
-                    </Button>
-
-                    <DocumentSigningCompleteDialog
-                      isSubmitting={isSubmitting}
-                      onSignatureComplete={handleSubmit(onFormSubmit)}
-                      documentTitle={document.title}
-                      fields={fields}
-                      fieldsValidated={fieldsValidated}
-                      role={recipient.role}
-                      disabled={!isRecipientsTurn}
-                    />
                   </div>
                 </fieldset>
-              </form>
+
+                <div className="mt-6 flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={async () => navigate(-1)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <DocumentSigningCompleteDialog
+                    isSubmitting={isSubmitting || isAssistantSubmitting}
+                    documentTitle={document.title}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    disabled={!isRecipientsTurn}
+                    onSignatureComplete={async (nextSigner) => {
+                      await completeDocument(undefined, nextSigner);
+                    }}
+                    role={recipient.role}
+                    allowDictateNextSigner={
+                      nextRecipient && document.documentMeta?.allowDictateNextSigner
+                    }
+                    defaultNextSigner={
+                      nextRecipient
+                        ? { name: nextRecipient.name, email: nextRecipient.email }
+                        : undefined
+                    }
+                  />
+                </div>
+              </div>
             </>
           )}
         </div>

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -40,9 +40,9 @@ import { DocumentReadOnlyFields } from '~/components/general/document/document-r
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
-export type SigningPageViewProps = {
+export type DocumentSigningPageViewProps = {
-  document: DocumentAndSender;
   recipient: RecipientWithFields;
+  document: DocumentAndSender;
   fields: Field[];
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
@@ -50,13 +50,13 @@ export type SigningPageViewProps = {
 };
 
 export const DocumentSigningPageView = ({
-  document,
   recipient,
+  document,
   fields,
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
-}: SigningPageViewProps) => {
+}: DocumentSigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
@@ -157,7 +157,7 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields fields={completedFields} />
+        <DocumentReadOnlyFields documentMeta={documentMeta || undefined} fields={completedFields} />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
@@ -177,6 +177,8 @@ export const DocumentSigningPageView = ({
                     key={field.id}
                     field={field}
                     typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
+                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
                   />
                 ))
                 .with(FieldType.INITIALS, () => (

apps/remix/app/components/general/document-signing/document-signing-provider.tsx

@@ -1,4 +1,6 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
+
+import { isBase64Image } from '@documenso/lib/constants/signatures';
 
 export type DocumentSigningContextValue = {
   fullName: string;
@@ -7,8 +9,6 @@ export type DocumentSigningContextValue = {
   setEmail: (_value: string) => void;
   signature: string | null;
   setSignature: (_value: string | null) => void;
-  signatureValid: boolean;
-  setSignatureValid: (_valid: boolean) => void;
 };
 
 const DocumentSigningContext = createContext<DocumentSigningContextValue | null>(null);
@@ -31,6 +31,9 @@ export interface DocumentSigningProviderProps {
   fullName?: string | null;
   email?: string | null;
   signature?: string | null;
+  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
   children: React.ReactNode;
 }
 
@@ -38,18 +41,31 @@ export const DocumentSigningProvider = ({
   fullName: initialFullName,
   email: initialEmail,
   signature: initialSignature,
+  typedSignatureEnabled = true,
+  uploadSignatureEnabled = true,
+  drawSignatureEnabled = true,
   children,
 }: DocumentSigningProviderProps) => {
   const [fullName, setFullName] = useState(initialFullName || '');
   const [email, setEmail] = useState(initialEmail || '');
-  const [signature, setSignature] = useState(initialSignature || null);
-  const [signatureValid, setSignatureValid] = useState(true);
 
-  useEffect(() => {
+  // Ensure the user signature doesn't show up if it's not allowed.
-    if (initialSignature) {
+  const [signature, setSignature] = useState(
-      setSignature(initialSignature);
+    (() => {
-    }
+      const sig = initialSignature || '';
-  }, [initialSignature]);
+      const isBase64 = isBase64Image(sig);
+
+      if (isBase64 && (uploadSignatureEnabled || drawSignatureEnabled)) {
+        return sig;
+      }
+
+      if (!isBase64 && typedSignatureEnabled) {
+        return sig;
+      }
+
+      return null;
+    })(),
+  );
 
   return (
     <DocumentSigningContext.Provider
@@ -60,8 +76,6 @@ export const DocumentSigningProvider = ({
         setEmail,
         signature,
         setSignature,
-        signatureValid,
-        setSignatureValid,
       }}
     >
       {children}

apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx

@@ -31,10 +31,7 @@ import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZRejectDocumentFormSchema = z.object({
-  reason: z
+  reason: z.string().max(500, msg`Reason must be less than 500 characters`),
-    .string()
-    .min(5, msg`Please provide a reason`)
-    .max(500, msg`Reason must be less than 500 characters`),
 });
 
 type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -17,7 +17,6 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -29,11 +28,14 @@ import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
+
 export type DocumentSigningSignatureFieldProps = {
   field: FieldWithSignature;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
   typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
 };
 
 export const DocumentSigningSignatureField = ({
@@ -41,6 +43,8 @@ export const DocumentSigningSignatureField = ({
   onSignField,
   onUnsignField,
   typedSignatureEnabled,
+  uploadSignatureEnabled,
+  drawSignatureEnabled,
 }: DocumentSigningSignatureFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -52,12 +56,8 @@ export const DocumentSigningSignatureField = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [fontSize, setFontSize] = useState(2);
 
-  const {
+  const { signature: providedSignature, setSignature: setProvidedSignature } =
-    signature: providedSignature,
+    useRequiredDocumentSigningContext();
-    setSignature: setProvidedSignature,
-    signatureValid,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
@@ -89,7 +89,7 @@ export const DocumentSigningSignatureField = ({
   }, [field.inserted, signature?.signatureImageAsBase64]);
 
   const onPreSign = () => {
-    if (!providedSignature || !signatureValid) {
+    if (!providedSignature) {
       setShowSignatureModal(true);
       return false;
     }
@@ -102,6 +102,7 @@ export const DocumentSigningSignatureField = ({
   const onDialogSignClick = () => {
     setShowSignatureModal(false);
     setProvidedSignature(localSignature);
+
     if (!localSignature) {
       return;
     }
@@ -116,14 +117,14 @@ export const DocumentSigningSignatureField = ({
     try {
       const value = signature || providedSignature;
 
-      if (!value || (signature && !signatureValid)) {
+      if (!value) {
         setShowSignatureModal(true);
         return;
       }
 
       const isTypedSignature = !value.startsWith('data:image');
 
-      if (isTypedSignature && !typedSignatureEnabled) {
+      if (isTypedSignature && typedSignatureEnabled === false) {
         toast({
           title: _(msg`Error`),
           description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
@@ -275,29 +276,14 @@ export const DocumentSigningSignatureField = ({
             </Trans>
           </DialogTitle>
 
-          <div className="">
+          <SignaturePad
-            <Label htmlFor="signature">
+            className="mt-2"
-              <Trans>Signature</Trans>
+            value={localSignature ?? ''}
-            </Label>
+            onChange={({ value }) => setLocalSignature(value)}
-
+            typedSignatureEnabled={typedSignatureEnabled}
-            <div className="border-border mt-2 rounded-md border">
+            uploadSignatureEnabled={uploadSignatureEnabled}
-              <SignaturePad
+            drawSignatureEnabled={drawSignatureEnabled}
-                id="signature"
+          />
-                className="h-44 w-full"
-                onChange={(value) => setLocalSignature(value)}
-                allowTypedSignature={typedSignatureEnabled}
-                onValidityChange={(isValid) => {
-                  setSignatureValid(isValid);
-                }}
-              />
-            </div>
-
-            {!signatureValid && (
-              <div className="text-destructive mt-2 text-sm">
-                <Trans>Signature is too small. Please provide a more complete signature.</Trans>
-              </div>
-            )}
-          </div>
 
           <DocumentSigningDisclosure />
 
@@ -317,7 +303,7 @@ export const DocumentSigningSignatureField = ({
               <Button
                 type="button"
                 className="flex-1"
-                disabled={!localSignature || !signatureValid}
+                disabled={!localSignature}
                 onClick={() => onDialogSignClick()}
               >
                 <Trans>Sign</Trans>

apps/remix/app/components/general/document/document-certificate-download-button.tsx

@@ -1,9 +1,10 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
+import type { DocumentStatus } from '@prisma/client';
 import { DownloadIcon } from 'lucide-react';
 
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -76,7 +77,7 @@ export const DocumentCertificateDownloadButton = ({
       className={cn('w-full sm:w-auto', className)}
       loading={isPending}
       variant="outline"
-      disabled={documentStatus !== DocumentStatus.COMPLETED}
+      disabled={!isDocumentCompleted(documentStatus)}
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -5,6 +5,7 @@ import { useLingui } from '@lingui/react';
 import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
 import { useNavigate, useSearchParams } from 'react-router';
 
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@@ -71,7 +72,7 @@ export const DocumentEditForm = ({
 
   const { recipients, fields } = document;
 
-  const { mutateAsync: updateDocument } = trpc.document.setSettingsForDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
       utils.document.getDocumentWithDetailsById.setData(
@@ -174,7 +175,7 @@ export const DocumentEditForm = ({
 
   const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
     try {
-      const { timezone, dateFormat, redirectUrl, language } = data.meta;
+      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
 
       await updateDocument({
         documentId: document.id,
@@ -190,6 +191,9 @@ export const DocumentEditForm = ({
           dateFormat,
           redirectUrl,
           language: isValidLanguageCode(language) ? language : undefined,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
         },
       });
 
@@ -213,6 +217,13 @@ export const DocumentEditForm = ({
           signingOrder: data.signingOrder,
         }),
 
+        updateDocument({
+          documentId: document.id,
+          meta: {
+            allowDictateNextSigner: data.allowDictateNextSigner,
+          },
+        }),
+
         setRecipients({
           documentId: document.id,
           recipients: data.signers.map((signer) => ({
@@ -242,14 +253,6 @@ export const DocumentEditForm = ({
         fields: data.fields,
       });
 
-      await updateDocument({
-        documentId: document.id,
-
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
         const key = localStorage.key(i);
@@ -365,6 +368,7 @@ export const DocumentEditForm = ({
               documentFlow={documentFlow.signers}
               recipients={recipients}
               signingOrder={document.documentMeta?.signingOrder}
+              allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
               isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}
@@ -378,7 +382,6 @@ export const DocumentEditForm = ({
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
-              typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
               teamId={team?.id}
             />
 

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -9,6 +9,7 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -32,7 +33,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
 
   const isRecipient = !!recipient;
   const isPending = document.status === DocumentStatus.PENDING;
-  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isComplete = isDocumentCompleted(document);
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -20,6 +20,7 @@ import { useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -63,7 +64,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const isDraft = document.status === DocumentStatus.DRAFT;
   const isPending = document.status === DocumentStatus.PENDING;
   const isDeleted = document.deletedAt !== null;
-  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isComplete = isDocumentCompleted(document);
   const isCurrentTeamDocument = team && document.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 

apps/remix/app/components/general/document/document-page-view-recipients.tsx

@@ -17,6 +17,7 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
@@ -48,7 +49,7 @@ export const DocumentPageViewRecipients = ({
           <Trans>Recipients</Trans>
         </h1>
 
-        {document.status !== DocumentStatus.COMPLETED && (
+        {!isDocumentCompleted(document.status) && (
           <Link
             to={`${documentRootPath}/${document.id}/edit?step=signers`}
             title={_(msg`Modify recipients`)}

apps/remix/app/components/general/document/document-read-only-fields.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta } from '@prisma/client';
+import type { DocumentMeta, TemplateMeta } from '@prisma/client';
 import { FieldType, SigningStatus } from '@prisma/client';
 import { Clock, EyeOffIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
@@ -27,7 +27,7 @@ import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 export type DocumentReadOnlyFieldsProps = {
   fields: DocumentField[];
-  documentMeta?: DocumentMeta;
+  documentMeta?: DocumentMeta | TemplateMeta;
   showFieldStatus?: boolean;
 };
 

apps/remix/app/components/general/document/document-status.tsx

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { CheckCircle2, Clock, File } from 'lucide-react';
+import { CheckCircle2, Clock, File, XCircle } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -36,6 +36,12 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
     icon: File,
     color: 'text-yellow-500 dark:text-yellow-200',
   },
+  REJECTED: {
+    label: msg`Rejected`,
+    labelExtended: msg`Document rejected`,
+    icon: XCircle,
+    color: 'text-red-500 dark:text-red-300',
+  },
   INBOX: {
     label: msg`Inbox`,
     labelExtended: msg`Document inbox`,

apps/remix/app/components/general/generic-error-layout.tsx

@@ -62,7 +62,7 @@ export const GenericErrorLayout = ({
   const team = useOptionalCurrentTeam();
 
   const { subHeading, heading, message } =
-    errorCodeMap[errorCode || 404] ?? defaultErrorCodeMap[500];
+    errorCodeMap[errorCode || 500] ?? defaultErrorCodeMap[500];
 
   return (
     <div className="fixed inset-0 z-0 flex h-screen w-screen items-center justify-center">

apps/remix/app/components/general/refresh-on-focus.tsx

@@ -2,6 +2,9 @@ import { useCallback, useEffect } from 'react';
 
 import { useRevalidator } from 'react-router';
 
+/**
+ * Not really used anymore, this causes random 500s when the user refreshes while this occurs.
+ */
 export const RefreshOnFocus = () => {
   const { revalidate, state } = useRevalidator();
 

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -4,6 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { useNavigate } from 'react-router';
 
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@@ -124,6 +125,8 @@ export const TemplateEditForm = ({
   });
 
   const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+    const { signatureTypes } = data.meta;
+
     try {
       await updateTemplateSettings({
         templateId: template.id,
@@ -136,6 +139,9 @@ export const TemplateEditForm = ({
         },
         meta: {
           ...data.meta,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
         },
       });
@@ -161,6 +167,7 @@ export const TemplateEditForm = ({
           templateId: template.id,
           meta: {
             signingOrder: data.signingOrder,
+            allowDictateNextSigner: data.allowDictateNextSigner,
           },
         }),
 
@@ -187,13 +194,6 @@ export const TemplateEditForm = ({
         fields: data.fields,
       });
 
-      await updateTemplateSettings({
-        templateId: template.id,
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
         const key = localStorage.key(i);
@@ -271,6 +271,7 @@ export const TemplateEditForm = ({
               recipients={recipients}
               fields={fields}
               signingOrder={template.templateMeta?.signingOrder}
+              allowDictateNextSigner={template.templateMeta?.allowDictateNextSigner}
               templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
               isEnterprise={isEnterprise}
@@ -284,7 +285,6 @@ export const TemplateEditForm = ({
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
               teamId={team?.id}
-              typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
             />
           </Stepper>
         </DocumentFlowFormContainer>

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -9,6 +9,7 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,7 +38,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
-  const isComplete = row.status === DocumentStatus.COMPLETED;
+  const isComplete = isDocumentCompleted(row.status);
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
   const isCurrentTeamDocument = team && row.team?.url === team.url;

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -22,6 +22,7 @@ import { Link } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -66,7 +67,7 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
   // const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
-  const isComplete = row.status === DocumentStatus.COMPLETED;
+  const isComplete = isDocumentCompleted(row.status);
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const isCurrentTeamDocument = team && row.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);

apps/remix/app/components/tables/documents-table.tsx

@@ -9,8 +9,8 @@ import { match } from 'ts-pattern';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -77,7 +77,7 @@ export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTab
       {
         header: _(msg`Actions`),
         cell: ({ row }) =>
-          (!row.original.deletedAt || row.original.status === ExtendedDocumentStatus.COMPLETED) && (
+          (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && (
             <div className="flex items-center gap-x-4">
               <DocumentsTableActionButton row={row.original} />
               <DocumentsTableActionDropdown row={row.original} />

apps/remix/app/root.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import Plausible from 'plausible-tracker';
-import posthog from 'posthog-js';
 import {
   Links,
   Meta,
@@ -28,7 +27,6 @@ import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
 import { GenericErrorLayout } from './components/general/generic-error-layout';
-import { RefreshOnFocus } from './components/general/refresh-on-focus';
 import { langCookie } from './storage/lang-cookie.server';
 import { themeSessionResolver } from './storage/theme-session.server';
 import { appMetaTags } from './utils/meta';
@@ -160,8 +158,6 @@ export function LayoutContent({ children }: { children: React.ReactNode }) {
         <ScrollRestoration />
         <Scripts />
 
-        <RefreshOnFocus />
-
         <script
           dangerouslySetInnerHTML={{
             __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
@@ -181,7 +177,6 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 
   if (errorCode !== 404) {
     console.error('[RootErrorBoundary]', error);
-    posthog.captureException(error);
   }
 
   return <GenericErrorLayout errorCode={errorCode} />;

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -103,7 +103,9 @@ export default function AdminDocumentDetailsPage({ loaderData }: Route.Component
                 variant="outline"
                 loading={isResealDocumentLoading}
                 disabled={document.recipients.some(
-                  (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
+                  (recipient) =>
+                    recipient.signingStatus !== SigningStatus.SIGNED &&
+                    recipient.signingStatus !== SigningStatus.REJECTED,
                 )}
                 onClick={() => resealDocument({ id: document.id })}
               >

apps/remix/app/routes/_authenticated+/admin+/stats.tsx

@@ -23,12 +23,12 @@ import {
   getUsersWithSubscriptionsCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
 import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
-import { env } from '@documenso/lib/utils/env';
 
 import { AdminStatsSignerConversionChart } from '~/components/general/admin-stats-signer-conversion-chart';
 import { AdminStatsUsersWithDocumentsChart } from '~/components/general/admin-stats-users-with-documents';
 import { CardMetric } from '~/components/general/metric-card';
 
+import { version } from '../../../../package.json';
 import type { Route } from './+types/stats';
 
 export async function loader() {
@@ -89,7 +89,7 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
           value={usersWithSubscriptionsCount}
         />
 
-        <CardMetric icon={FileCog} title={_(msg`App Version`)} value={`v${env('APP_VERSION')}`} />
+        <CardMetric icon={FileCog} title={_(msg`App Version`)} value={`v${version}`} />
       </div>
 
       <div className="mt-16 gap-8">

apps/remix/app/routes/_authenticated+/documents.$id._index.tsx

@@ -220,6 +220,9 @@ export default function DocumentPage() {
                   .with(DocumentStatus.COMPLETED, () => (
                     <Trans>This document has been signed by all recipients</Trans>
                   ))
+                  .with(DocumentStatus.REJECTED, () => (
+                    <Trans>This document has been rejected by a recipient</Trans>
+                  ))
                   .with(DocumentStatus.DRAFT, () => (
                     <Trans>This document is currently a draft and has not been sent</Trans>
                   ))

apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx

@@ -1,5 +1,5 @@
 import { Plural, Trans } from '@lingui/react/macro';
-import { DocumentStatus as InternalDocumentStatus, TeamMemberRole } from '@prisma/client';
+import { TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { match } from 'ts-pattern';
@@ -9,6 +9,7 @@ import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-ent
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
@@ -71,7 +72,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  if (document.status === InternalDocumentStatus.COMPLETED) {
+  if (isDocumentCompleted(document.status)) {
     throw redirect(`${documentRootPath}/${documentId}`);
   }
 

apps/remix/app/routes/_authenticated+/documents.$id.logs.tsx

@@ -129,7 +129,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
         <Trans>Document</Trans>
       </Link>
 
-      <div className="flex flex-col justify-between truncate sm:flex-row">
+      <div className="flex flex-col">
         <div>
           <h1
             className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
@@ -137,7 +137,8 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
           >
             {document.title}
           </h1>
-
+        </div>
+        <div className="mt-1 flex flex-col justify-between sm:flex-row">
           <div className="mt-2.5 flex items-center gap-x-6">
             <DocumentStatusComponent
               inheritColor
@@ -145,16 +146,15 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
               className="text-muted-foreground"
             />
           </div>
-        </div>
+          <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
+            <DocumentCertificateDownloadButton
+              className="mr-2"
+              documentId={document.id}
+              documentStatus={document.status}
+            />
 
-        <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
+            <DocumentAuditLogDownloadButton documentId={document.id} />
-          <DocumentCertificateDownloadButton
+          </div>
-            className="mr-2"
-            documentId={document.id}
-            documentStatus={document.status}
-          />
-
-          <DocumentAuditLogDownloadButton documentId={document.id} />
         </div>
       </div>
 
@@ -163,7 +163,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
           {documentInformation.map((info, i) => (
             <div className="text-foreground text-sm" key={i}>
               <h3 className="font-semibold">{_(info.description)}</h3>
-              <p className="text-muted-foreground">{info.value}</p>
+              <p className="text-muted-foreground truncate">{info.value}</p>
             </div>
           ))}
 

apps/remix/app/routes/_authenticated+/documents._index.tsx

@@ -50,6 +50,7 @@ export default function DocumentsPage() {
     [ExtendedDocumentStatus.DRAFT]: 0,
     [ExtendedDocumentStatus.PENDING]: 0,
     [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.REJECTED]: 0,
     [ExtendedDocumentStatus.INBOX]: 0,
     [ExtendedDocumentStatus.ALL]: 0,
   });

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -1,11 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { FieldType } from '@prisma/client';
+import { FieldType, SigningStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 
+import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
@@ -59,6 +60,8 @@ export async function loader({ request }: Route.LoaderArgs) {
     throw redirect('/');
   }
 
+  const isPlatformDocument = await isDocumentPlatform(document);
+
   const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
 
   const auditLogs = await getDocumentCertificateAuditLogs({
@@ -70,6 +73,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   return {
     document,
     documentLanguage,
+    isPlatformDocument,
     auditLogs,
     messages,
   };
@@ -85,7 +89,7 @@ export async function loader({ request }: Route.LoaderArgs) {
  * Update: Maybe <Trans> tags work now after RR7 migration.
  */
 export default function SigningCertificate({ loaderData }: Route.ComponentProps) {
-  const { document, documentLanguage, auditLogs, messages } = loaderData;
+  const { document, documentLanguage, isPlatformDocument, auditLogs, messages } = loaderData;
 
   const { i18n, _ } = useLingui();
 
@@ -159,6 +163,13 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
           log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED &&
           log.data.recipientId === recipientId,
       ),
+      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED]: auditLogs[
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED
+      ].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED &&
+          log.data.recipientId === recipientId,
+      ),
     };
   };
 
@@ -238,24 +249,24 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                               {signature.secondaryId}
                             </span>
                           </p>
-
-                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                            <span className="font-medium">{_(msg`IP Address`)}:</span>{' '}
-                            <span className="inline-block">
-                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)}
-                            </span>
-                          </p>
-
-                          <p className="text-muted-foreground mt-1 text-sm print:text-xs">
-                            <span className="font-medium">{_(msg`Device`)}:</span>{' '}
-                            <span className="inline-block">
-                              {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
-                            </span>
-                          </p>
                         </>
                       ) : (
                         <p className="text-muted-foreground">N/A</p>
                       )}
+
+                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                        <span className="font-medium">{_(msg`IP Address`)}:</span>{' '}
+                        <span className="inline-block">
+                          {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)}
+                        </span>
+                      </p>
+
+                      <p className="text-muted-foreground mt-1 text-sm print:text-xs">
+                        <span className="font-medium">{_(msg`Device`)}:</span>{' '}
+                        <span className="inline-block">
+                          {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
+                        </span>
+                      </p>
                     </TableCell>
 
                     <TableCell truncate={false} className="w-[min-content] align-top">
@@ -282,25 +293,42 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                           </span>
                         </p>
 
-                        <p className="text-muted-foreground text-sm print:text-xs">
+                        {logs.DOCUMENT_RECIPIENT_REJECTED[0] ? (
-                          <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
+                          <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="inline-block">
+                            <span className="font-medium">{_(msg`Rejected`)}:</span>{' '}
-                            {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
+                            <span className="inline-block">
-                              ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt)
+                              {logs.DOCUMENT_RECIPIENT_REJECTED[0]
-                                  .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                                ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_REJECTED[0].createdAt)
-                                  .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+                                    .setLocale(APP_I18N_OPTIONS.defaultLocale)
-                              : _(msg`Unknown`)}
+                                    .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
-                          </span>
+                                : _(msg`Unknown`)}
-                        </p>
+                            </span>
+                          </p>
+                        ) : (
+                          <p className="text-muted-foreground text-sm print:text-xs">
+                            <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
+                            <span className="inline-block">
+                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
+                                ? DateTime.fromJSDate(
+                                    logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt,
+                                  )
+                                    .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                                    .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+                                : _(msg`Unknown`)}
+                            </span>
+                          </p>
+                        )}
 
                         <p className="text-muted-foreground text-sm print:text-xs">
                           <span className="font-medium">{_(msg`Reason`)}:</span>{' '}
                           <span className="inline-block">
-                            {_(
+                            {recipient.signingStatus === SigningStatus.REJECTED
-                              isOwner(recipient.email)
+                              ? recipient.rejectionReason
-                                ? FRIENDLY_SIGNING_REASONS['__OWNER__']
+                              : _(
-                                : FRIENDLY_SIGNING_REASONS[recipient.role],
+                                  isOwner(recipient.email)
-                            )}
+                                    ? FRIENDLY_SIGNING_REASONS['__OWNER__']
+                                    : FRIENDLY_SIGNING_REASONS[recipient.role],
+                                )}
                           </span>
                         </p>
                       </div>
@@ -313,15 +341,17 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
         </CardContent>
       </Card>
 
-      <div className="my-8 flex-row-reverse">
+      {isPlatformDocument && (
-        <div className="flex items-end justify-end gap-x-4">
+        <div className="my-8 flex-row-reverse">
-          <p className="flex-shrink-0 text-sm font-medium print:text-xs">
+          <div className="flex items-end justify-end gap-x-4">
-            {_(msg`Signing certificate provided by`)}:
+            <p className="flex-shrink-0 text-sm font-medium print:text-xs">
-          </p>
+              {_(msg`Signing certificate provided by`)}:
+            </p>
 
-          <BrandingLogo className="max-h-6 print:max-h-4" />
+            <BrandingLogo className="max-h-6 print:max-h-4" />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

apps/remix/app/routes/_profile+/_layout.tsx

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { PlusIcon } from 'lucide-react';
 import { ChevronLeft } from 'lucide-react';
-import { Link, Outlet } from 'react-router';
+import { Link, Outlet, isRouteErrorResponse } from 'react-router';
 
 import LogoIcon from '@documenso/assets/logo_icon.png';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
@@ -16,6 +16,8 @@ import { BrandingLogo } from '~/components/general/branding-logo';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { appMetaTags } from '~/utils/meta';
 
+import type { Route } from './+types/_layout';
+
 export function meta() {
   return appMetaTags('Profile');
 }
@@ -96,7 +98,9 @@ export default function PublicProfileLayout() {
   );
 }
 
-export function ErrorBoundary() {
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
+
   const errorCodeMap = {
     404: {
       subHeading: msg`404 Profile not found`,
@@ -107,6 +111,7 @@ export function ErrorBoundary() {
 
   return (
     <GenericErrorLayout
+      errorCode={errorCode}
       errorCodeMap={errorCodeMap}
       secondaryButton={null}
       primaryButton={

apps/remix/app/routes/_recipient+/_layout.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/react/macro';
 import { ChevronLeft } from 'lucide-react';
-import { Link, Outlet } from 'react-router';
+import { Link, Outlet, isRouteErrorResponse } from 'react-router';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { Button } from '@documenso/ui/primitives/button';
@@ -8,6 +8,8 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 
+import type { Route } from './+types/_layout';
+
 /**
  * A layout to handle scenarios where the user is a recipient of a given resource
  * where we do not care whether they are authenticated or not.
@@ -30,9 +32,12 @@ export default function RecipientLayout() {
   );
 }
 
-export function ErrorBoundary() {
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const errorCode = isRouteErrorResponse(error) ? error.status : 500;
+
   return (
     <GenericErrorLayout
+      errorCode={errorCode}
       secondaryButton={null}
       primaryButton={
         <Button asChild className="w-32">

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -79,7 +79,14 @@ export default function DirectTemplatePage() {
   const { template, directTemplateRecipient } = data;
 
   return (
-    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+    <DocumentSigningProvider
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+      typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+    >
       <DocumentSigningAuthProvider
         documentAuthOptions={template.authOptions}
         recipient={directTemplateRecipient}

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { DocumentSigningOrder, DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { Clock8 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { getOptionalLoaderContext } from 'server/utils/get-loader-session';
@@ -13,6 +13,7 @@ import { viewedDocument } from '@documenso/lib/server-only/document/viewed-docum
 import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
+import { getNextPendingRecipient } from '@documenso/lib/server-only/recipient/get-next-pending-recipient';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
@@ -72,7 +73,24 @@ export async function loader({ params, request }: Route.LoaderArgs) {
       ? await getRecipientsForAssistant({
           token,
         })
-      : [];
+      : [recipient];
+
+  if (
+    document.documentMeta?.signingOrder === DocumentSigningOrder.SEQUENTIAL &&
+    recipient.role !== RecipientRole.ASSISTANT
+  ) {
+    const nextPendingRecipient = await getNextPendingRecipient({
+      documentId: document.id,
+      currentRecipientId: recipient.id,
+    });
+
+    if (nextPendingRecipient) {
+      allRecipients.push({
+        ...nextPendingRecipient,
+        fields: [],
+      });
+    }
+  }
 
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
@@ -160,7 +178,7 @@ export default function SigningPage() {
     recipientWithFields,
   } = data;
 
-  if (document.deletedAt) {
+  if (document.deletedAt || document.status === DocumentStatus.REJECTED) {
     return (
       <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
         <SigningCard3D
@@ -215,6 +233,9 @@ export default function SigningPage() {
       email={recipient.email}
       fullName={user?.email === recipient.email ? user?.name : recipient.name}
       signature={user?.email === recipient.email ? user?.signature : undefined}
+      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
     >
       <DocumentSigningAuthProvider
         documentAuthOptions={document.authOptions}

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -17,6 +17,7 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { env } from '@documenso/lib/utils/env';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
@@ -205,12 +206,12 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
           <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
             <DocumentShareButton documentId={document.id} token={recipient.token} />
 
-            {document.status === DocumentStatus.COMPLETED ? (
+            {isDocumentCompleted(document.status) ? (
               <DocumentDownloadButton
                 className="flex-1"
                 fileName={document.title}
                 documentData={document.documentData}
-                disabled={document.status !== DocumentStatus.COMPLETED}
+                disabled={!isDocumentCompleted(document.status)}
               />
             ) : (
               <DocumentDialog
@@ -268,7 +269,7 @@ export const PollUntilDocumentCompleted = ({ document }: PollUntilDocumentComple
   const { revalidate } = useRevalidator();
 
   useEffect(() => {
-    if (document.status === DocumentStatus.COMPLETED) {
+    if (isDocumentCompleted(document.status)) {
       return;
     }
 

apps/remix/app/routes/_redirects+/ingest.$.tsx

@@ -19,18 +19,30 @@ const posthogProxy = async (request: Request) => {
   const headers = new Headers(request.headers);
   headers.set('host', hostname);
 
-  const response = await fetch(newUrl, {
+  const fetchOptions: RequestInit = {
     method: request.method,
     headers,
-    body: request.body,
+    redirect: 'follow',
-    // @ts-expect-error - Not really sure about this
+  };
-    duplex: 'half',
+
-  });
+  if (!['GET', 'HEAD'].includes(request.method)) {
+    fetchOptions.body = request.body;
+    // @ts-expect-error - It should exist
+    fetchOptions.duplex = 'half';
+  }
+
+  const response = await fetch(newUrl, fetchOptions);
+
+  const responseHeaders = new Headers(response.headers);
+  responseHeaders.delete('content-encoding');
+  responseHeaders.delete('content-length');
+  responseHeaders.delete('transfer-encoding');
+  responseHeaders.delete('cookie');
 
   return new Response(response.body, {
     status: response.status,
     statusText: response.statusText,
-    headers: response.headers,
+    headers: responseHeaders,
   });
 };
 

apps/remix/app/routes/_unauthenticated+/team.verify.transfer.$token.tsx

@@ -6,7 +6,7 @@ import { isTokenExpired } from '@documenso/lib/utils/token-verification';
 import { prisma } from '@documenso/prisma';
 import { Button } from '@documenso/ui/primitives/button';
 
-import type { Route } from './+types/team.verify.transfer.token';
+import type { Route } from './+types/team.verify.transfer.$token';
 
 export async function loader({ params }: Route.LoaderArgs) {
   const { token } = params;

apps/remix/app/routes/embed+/_v0+/direct.$url.tsx

@@ -131,7 +131,14 @@ export default function EmbedDirectTemplatePage() {
   } = useSuperLoaderData<typeof loader>();
 
   return (
-    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+    <DocumentSigningProvider
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+      typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+    >
       <DocumentSigningAuthProvider
         documentAuthOptions={template.authOptions}
         recipient={recipient}
@@ -145,7 +152,9 @@ export default function EmbedDirectTemplatePage() {
             recipient={recipient}
             fields={fields}
             metadata={template.templateMeta}
-            hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
+            hidePoweredBy={
+              isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
+            }
             allowWhiteLabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
           />
         </DocumentSigningRecipientProvider>

apps/remix/app/routes/embed+/_v0+/sign.$url.tsx

@@ -1,4 +1,4 @@
-import { DocumentStatus, RecipientRole } from '@prisma/client';
+import { RecipientRole } from '@prisma/client';
 import { data } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -8,12 +8,14 @@ import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-ent
 import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
 import { getTeamById } from '@documenso/lib/server-only/team/get-team';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 
 import { EmbedSignDocumentClientPage } from '~/components/embed/embed-document-signing-page';
@@ -32,7 +34,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   const { user } = await getOptionalSession(request);
 
-  const [document, fields, recipient] = await Promise.all([
+  const [document, fields, recipient, completedFields] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
       userId: user?.id,
@@ -40,6 +42,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
+    getCompletedFieldsForToken({ token }).catch(() => []),
   ]);
 
   // `document.directLink` is always available but we're doing this to
@@ -129,6 +132,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     allRecipients,
     recipient,
     fields,
+    completedFields,
     hidePoweredBy,
     isPlatformDocument,
     isEnterpriseDocument,
@@ -144,6 +148,7 @@ export default function EmbedSignDocumentPage() {
     allRecipients,
     recipient,
     fields,
+    completedFields,
     hidePoweredBy,
     isPlatformDocument,
     isEnterpriseDocument,
@@ -155,6 +160,9 @@ export default function EmbedSignDocumentPage() {
       email={recipient.email}
       fullName={user?.email === recipient.email ? user?.name : recipient.name}
       signature={user?.email === recipient.email ? user?.signature : undefined}
+      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
     >
       <DocumentSigningAuthProvider
         documentAuthOptions={document.authOptions}
@@ -167,9 +175,12 @@ export default function EmbedSignDocumentPage() {
           documentData={document.documentData}
           recipient={recipient}
           fields={fields}
+          completedFields={completedFields}
           metadata={document.documentMeta}
-          isCompleted={document.status === DocumentStatus.COMPLETED}
+          isCompleted={isDocumentCompleted(document.status)}
-          hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
+          hidePoweredBy={
+            isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
+          }
           allowWhitelabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
           allRecipients={allRecipients}
         />

apps/remix/app/routes/embed+/v1.authoring+/_layout.tsx

@@ -0,0 +1,66 @@
+import { useLayoutEffect, useState } from 'react';
+
+import { Outlet } from 'react-router';
+
+import { TrpcProvider, trpc } from '@documenso/trpc/react';
+
+import { EmbedClientLoading } from '~/components/embed/embed-client-loading';
+import { ZBaseEmbedAuthoringSchema } from '~/types/embed-authoring-base-schema';
+import { injectCss } from '~/utils/css-vars';
+
+export default function AuthoringLayout() {
+  const [token, setToken] = useState('');
+
+  const {
+    mutateAsync: verifyEmbeddingPresignToken,
+    isPending: isVerifyingEmbeddingPresignToken,
+    data: isVerified,
+  } = trpc.embeddingPresign.verifyEmbeddingPresignToken.useMutation();
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      const { token, css, cssVars, darkModeDisabled } = result.data;
+
+      if (darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      injectCss({
+        css,
+        cssVars,
+      });
+
+      void verifyEmbeddingPresignToken({ token }).then((result) => {
+        if (result.success) {
+          setToken(token);
+        }
+      });
+    } catch (err) {
+      console.error('Error verifying embedding presign token:', err);
+    }
+  }, []);
+
+  if (isVerifyingEmbeddingPresignToken) {
+    return <EmbedClientLoading />;
+  }
+
+  if (typeof isVerified !== 'undefined' && !isVerified.success) {
+    return <div>Invalid embedding presign token</div>;
+  }
+
+  return (
+    <TrpcProvider headers={{ authorization: `Bearer ${token}` }}>
+      <Outlet />
+    </TrpcProvider>
+  );
+}

apps/remix/app/routes/embed+/v1.authoring+/create-completed.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { CheckCircle2 } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+export default function EmbeddingAuthoringCompletedPage() {
+  const [searchParams] = useSearchParams();
+
+  // Get templateId and externalId from URL search params
+  const templateId = searchParams.get('templateId');
+  const documentId = searchParams.get('documentId');
+  const externalId = searchParams.get('externalId');
+
+  const id = Number(templateId || documentId);
+  const type = templateId ? 'template' : 'document';
+
+  // Send postMessage to parent window with the details
+  useEffect(() => {
+    if (!id || !window.parent || window.parent === window) {
+      return;
+    }
+
+    window.parent.postMessage(
+      {
+        type: `${type}-created`,
+        [`${type}Id`]: id,
+        externalId,
+      },
+      '*',
+    );
+  }, [id, type, externalId]);
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col items-center justify-center p-6 text-center">
+      <div className="mx-auto w-full max-w-md">
+        <CheckCircle2 className="text-primary mx-auto h-16 w-16" />
+
+        <h1 className="mt-6 text-2xl font-bold">
+          {type === 'template' ? <Trans>Template Created</Trans> : <Trans>Document Created</Trans>}
+        </h1>
+
+        <p className="text-muted-foreground mt-2">
+          {type === 'template' ? (
+            <Trans>Your template has been created successfully</Trans>
+          ) : (
+            <Trans>Your document has been created successfully</Trans>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/embed+/v1.authoring+/document.create.tsx

@@ -0,0 +1,184 @@
+import { useLayoutEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { useNavigate } from 'react-router';
+
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
+import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
+import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
+import {
+  ConfigureFieldsView,
+  type TConfigureFieldsFormSchema,
+} from '~/components/embed/authoring/configure-fields-view';
+import {
+  type TBaseEmbedAuthoringSchema,
+  ZBaseEmbedAuthoringSchema,
+} from '~/types/embed-authoring-base-schema';
+
+export default function EmbeddingAuthoringDocumentCreatePage() {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  const [configuration, setConfiguration] = useState<TConfigureEmbedFormSchema | null>(null);
+  const [fields, setFields] = useState<TConfigureFieldsFormSchema | null>(null);
+  const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
+  const [externalId, setExternalId] = useState<string | null>(null);
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const { mutateAsync: createEmbeddingDocument } =
+    trpc.embeddingPresign.createEmbeddingDocument.useMutation();
+
+  const handleConfigurePageViewSubmit = (data: TConfigureEmbedFormSchema) => {
+    // Store the configuration data and move to the field placement stage
+    setConfiguration(data);
+    setCurrentStep(2);
+  };
+
+  const handleBackToConfig = (data: TConfigureFieldsFormSchema) => {
+    // Return to the configuration view but keep the data
+    setFields(data);
+    setCurrentStep(1);
+  };
+
+  const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
+    try {
+      if (!configuration || !configuration.documentData) {
+        toast({
+          variant: 'destructive',
+          title: _('Error'),
+          description: _('Please configure the document first'),
+        });
+
+        return;
+      }
+
+      const fields = data.fields;
+
+      const documentData = await putPdfFile({
+        arrayBuffer: async () => Promise.resolve(configuration.documentData!.data.buffer),
+        name: configuration.documentData.name,
+        type: configuration.documentData.type,
+      });
+
+      // Use the externalId from the URL fragment if available
+      const documentExternalId = externalId || configuration.meta.externalId;
+
+      const createResult = await createEmbeddingDocument({
+        title: configuration.title,
+        documentDataId: documentData.id,
+        externalId: documentExternalId,
+        meta: {
+          ...configuration.meta,
+          drawSignatureEnabled:
+            configuration.meta.signatureTypes.length === 0 ||
+            configuration.meta.signatureTypes.includes(DocumentSignatureType.DRAW),
+          typedSignatureEnabled:
+            configuration.meta.signatureTypes.length === 0 ||
+            configuration.meta.signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled:
+            configuration.meta.signatureTypes.length === 0 ||
+            configuration.meta.signatureTypes.includes(DocumentSignatureType.UPLOAD),
+        },
+        recipients: configuration.signers.map((signer) => ({
+          name: signer.name,
+          email: signer.email,
+          role: signer.role,
+          fields: fields
+            .filter((field) => field.signerEmail === signer.email)
+            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .map<any>((f) => ({
+              ...f,
+              pageX: f.pageX,
+              pageY: f.pageY,
+              width: f.pageWidth,
+              height: f.pageHeight,
+            })),
+        })),
+      });
+
+      toast({
+        title: _('Success'),
+        description: _('Document created successfully'),
+      });
+
+      // Send a message to the parent window with the document details
+      if (window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'document-created',
+            documentId: createResult.documentId,
+            externalId: documentExternalId,
+          },
+          '*',
+        );
+      }
+
+      const hash = window.location.hash.slice(1);
+
+      // Navigate to the completion page instead of the document details page
+      await navigate(
+        `/embed/v1/authoring/create-completed?documentId=${createResult.documentId}&externalId=${documentExternalId}#${hash}`,
+      );
+    } catch (err) {
+      console.error('Error creating document:', err);
+
+      toast({
+        variant: 'destructive',
+        title: _('Error'),
+        description: _('Failed to create document'),
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      setFeatures(result.data.features);
+
+      // Extract externalId from the parsed data if available
+      if (result.data.externalId) {
+        setExternalId(result.data.externalId);
+      }
+    } catch (err) {
+      console.error('Error parsing embedding params:', err);
+    }
+  }, []);
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
+      <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
+        <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
+          <ConfigureDocumentView
+            defaultValues={configuration ?? undefined}
+            onSubmit={handleConfigurePageViewSubmit}
+          />
+
+          <ConfigureFieldsView
+            configData={configuration!}
+            defaultValues={fields ?? undefined}
+            onBack={handleBackToConfig}
+            onSubmit={handleConfigureFieldsSubmit}
+          />
+        </Stepper>
+      </ConfigureDocumentProvider>
+    </div>
+  );
+}

apps/remix/app/routes/embed+/v1.authoring+/template.create.tsx

@@ -0,0 +1,175 @@
+import { useLayoutEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { useNavigate } from 'react-router';
+
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ConfigureDocumentProvider } from '~/components/embed/authoring/configure-document-context';
+import { ConfigureDocumentView } from '~/components/embed/authoring/configure-document-view';
+import type { TConfigureEmbedFormSchema } from '~/components/embed/authoring/configure-document-view.types';
+import {
+  ConfigureFieldsView,
+  type TConfigureFieldsFormSchema,
+} from '~/components/embed/authoring/configure-fields-view';
+import {
+  type TBaseEmbedAuthoringSchema,
+  ZBaseEmbedAuthoringSchema,
+} from '~/types/embed-authoring-base-schema';
+
+export default function EmbeddingAuthoringTemplateCreatePage() {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  const [configuration, setConfiguration] = useState<TConfigureEmbedFormSchema | null>(null);
+  const [fields, setFields] = useState<TConfigureFieldsFormSchema | null>(null);
+  const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
+  const [externalId, setExternalId] = useState<string | null>(null);
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const { mutateAsync: createEmbeddingTemplate } =
+    trpc.embeddingPresign.createEmbeddingTemplate.useMutation();
+
+  const handleConfigurePageViewSubmit = (data: TConfigureEmbedFormSchema) => {
+    // Store the configuration data and move to the field placement stage
+    setConfiguration(data);
+    setCurrentStep(2);
+  };
+
+  const handleBackToConfig = (data: TConfigureFieldsFormSchema) => {
+    // Return to the configuration view but keep the data
+    setFields(data);
+    setCurrentStep(1);
+  };
+
+  const handleConfigureFieldsSubmit = async (data: TConfigureFieldsFormSchema) => {
+    try {
+      console.log('configuration', configuration);
+      console.log('data', data);
+      if (!configuration || !configuration.documentData) {
+        toast({
+          variant: 'destructive',
+          title: _('Error'),
+          description: _('Please configure the template first'),
+        });
+
+        return;
+      }
+
+      const fields = data.fields;
+
+      const documentData = await putPdfFile({
+        arrayBuffer: async () => Promise.resolve(configuration.documentData!.data.buffer),
+        name: configuration.documentData.name,
+        type: configuration.documentData.type,
+      });
+
+      // Use the externalId from the URL fragment if available
+      const metaWithExternalId = {
+        ...configuration.meta,
+        externalId: externalId || configuration.meta.externalId,
+      };
+
+      const createResult = await createEmbeddingTemplate({
+        title: configuration.title,
+        documentDataId: documentData.id,
+        meta: metaWithExternalId,
+        recipients: configuration.signers.map((signer) => ({
+          name: signer.name,
+          email: signer.email,
+          role: signer.role,
+          fields: fields
+            .filter((field) => field.signerEmail === signer.email)
+            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .map<any>((field) => ({
+              ...field,
+              pageX: field.pageX,
+              pageY: field.pageY,
+              width: field.pageWidth,
+              height: field.pageHeight,
+            })),
+        })),
+      });
+
+      toast({
+        title: _('Success'),
+        description: _('Template created successfully'),
+      });
+
+      // Send a message to the parent window with the template details
+      if (window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'template-created',
+            templateId: createResult.templateId,
+            externalId: metaWithExternalId.externalId,
+          },
+          '*',
+        );
+      }
+
+      const hash = window.location.hash.slice(1);
+
+      // Navigate to the completion page instead of the template details page
+      await navigate(
+        `/embed/v1/authoring/create-completed?templateId=${createResult.templateId}&externalId=${metaWithExternalId.externalId}#${hash}`,
+      );
+    } catch (err) {
+      console.error('Error creating template:', err);
+
+      toast({
+        variant: 'destructive',
+        title: _('Error'),
+        description: _('Failed to create template'),
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    try {
+      const hash = window.location.hash.slice(1);
+
+      const result = ZBaseEmbedAuthoringSchema.safeParse(
+        JSON.parse(decodeURIComponent(atob(hash))),
+      );
+
+      if (!result.success) {
+        return;
+      }
+
+      setFeatures(result.data.features);
+
+      // Extract externalId from the parsed data if available
+      if (result.data.externalId) {
+        setExternalId(result.data.externalId);
+      }
+    } catch (err) {
+      console.error('Error parsing embedding params:', err);
+    }
+  }, []);
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
+      <ConfigureDocumentProvider isTemplate={true} features={features ?? {}}>
+        <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
+          <ConfigureDocumentView
+            defaultValues={configuration ?? undefined}
+            onSubmit={handleConfigurePageViewSubmit}
+          />
+
+          <ConfigureFieldsView
+            configData={configuration!}
+            defaultValues={fields ?? undefined}
+            onBack={handleBackToConfig}
+            onSubmit={handleConfigureFieldsSubmit}
+          />
+        </Stepper>
+      </ConfigureDocumentProvider>
+    </div>
+  );
+}

apps/remix/app/storage/theme-session.server.ts

@@ -12,6 +12,7 @@ const themeSessionStorage = createCookieSessionStorage({
     secrets: ['insecure-secret-do-not-care'],
     secure: useSecureCookies,
     domain: getCookieDomain(),
+    maxAge: 60 * 60 * 24 * 365,
   },
 });
 

apps/remix/app/types/embed-authoring-base-schema.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+import { ZBaseEmbedDataSchema } from './embed-base-schemas';
+
+export const ZBaseEmbedAuthoringSchema = z
+  .object({
+    token: z.string(),
+    externalId: z.string().optional(),
+    features: z
+      .object({
+        allowConfigureSignatureTypes: z.boolean().optional(),
+        allowConfigureLanguage: z.boolean().optional(),
+        allowConfigureDateFormat: z.boolean().optional(),
+        allowConfigureTimezone: z.boolean().optional(),
+        allowConfigureRedirectUrl: z.boolean().optional(),
+        allowConfigureCommunication: z.boolean().optional(),
+      })
+      .optional()
+      .default({}),
+  })
+  .and(ZBaseEmbedDataSchema);
+
+export type TBaseEmbedAuthoringSchema = z.infer<typeof ZBaseEmbedAuthoringSchema>;

apps/remix/app/types/embed-document-sign-schema.ts

@@ -14,4 +14,5 @@ export const ZSignDocumentEmbedDataSchema = ZBaseEmbedDataSchema.extend({
     .transform((value) => value || undefined),
   lockName: z.boolean().optional().default(false),
   allowDocumentRejection: z.boolean().optional(),
+  showOtherRecipientsCompletedFields: z.boolean().optional(),
 });

apps/remix/package.json

@@ -99,5 +99,6 @@
     "vite": "^6.1.0",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
-  }
+  },
+  "version": "1.10.0-rc.5"
 }

apps/remix/vite.config.ts

@@ -2,6 +2,7 @@ import { lingui } from '@lingui/vite-plugin';
 import { reactRouter } from '@react-router/dev/vite';
 import autoprefixer from 'autoprefixer';
 import serverAdapter from 'hono-react-router-adapter/vite';
+import path from 'node:path';
 import tailwindcss from 'tailwindcss';
 import { defineConfig } from 'vite';
 import macrosPlugin from 'vite-plugin-babel-macros';
@@ -44,9 +45,15 @@ export default defineConfig({
   resolve: {
     alias: {
       https: 'node:https',
-      '.prisma/client/default': '../../node_modules/.prisma/client/default.js',
+      '.prisma/client/default': path.resolve(
-      '.prisma/client/index-browser': '../../node_modules/.prisma/client/index-browser.js',
+        __dirname,
-      canvas: './app/types/empty-module.ts',
+        '../../node_modules/.prisma/client/default.js',
+      ),
+      '.prisma/client/index-browser': path.resolve(
+        __dirname,
+        '../../node_modules/.prisma/client/index-browser.js',
+      ),
+      canvas: path.resolve(__dirname, './app/types/empty-module.ts'),
     },
   },
   /**

docker/Dockerfile

@@ -33,7 +33,7 @@ FROM base AS installer
 RUN apk add --no-cache libc6-compat
 RUN apk add --no-cache jq
 # Required for node_modules/aws-crt
-RUN apk add --no-cache make cmake g++ openssl
+RUN apk add --no-cache make cmake g++ openssl bash
 
 WORKDIR /app
 

docker/build.sh

@@ -8,6 +8,7 @@ command -v docker >/dev/null 2>&1 || {
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 
+# Get Git information
 APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
 GIT_SHA="$(git rev-parse HEAD)"
 
@@ -15,12 +16,39 @@ echo "Building docker image for monorepo at $MONOREPO_ROOT"
 echo "App version: $APP_VERSION"
 echo "Git SHA: $GIT_SHA"
 
+# Build with temporary base tag
 docker build -f "$SCRIPT_DIR/Dockerfile" \
     --progress=plain \
-    -t "documenso/documenso:latest" \
+    -t "documenso-base" \
-    -t "documenso/documenso:$GIT_SHA" \
-    -t "documenso/documenso:$APP_VERSION" \
-    -t "ghcr.io/documenso/documenso:latest" \
-    -t "ghcr.io/documenso/documenso:$GIT_SHA" \
-    -t "ghcr.io/documenso/documenso:$APP_VERSION" \
     "$MONOREPO_ROOT"
+
+# Handle repository tagging
+if [ ! -z "$DOCKER_REPOSITORY" ]; then
+    echo "Using custom repository: $DOCKER_REPOSITORY"
+    
+    # Add tags for custom repository
+    docker tag "documenso-base" "$DOCKER_REPOSITORY:latest"
+    docker tag "documenso-base" "$DOCKER_REPOSITORY:$GIT_SHA"
+
+    # Add version tag if available
+    if [ ! -z "$APP_VERSION" ] && [ "$APP_VERSION" != "undefined" ]; then
+        docker tag "documenso-base" "$DOCKER_REPOSITORY:$APP_VERSION"
+    fi
+else
+    echo "Using default repositories: dockerhub and ghcr.io"
+    
+    # Add tags for both default repositories
+    docker tag "documenso-base" "documenso/documenso:latest"
+    docker tag "documenso-base" "documenso/documenso:$GIT_SHA"
+    docker tag "documenso-base" "ghcr.io/documenso/documenso:latest"
+    docker tag "documenso-base" "ghcr.io/documenso/documenso:$GIT_SHA"
+
+    # Add version tags if available
+    if [ ! -z "$APP_VERSION" ] && [ "$APP_VERSION" != "undefined" ]; then
+        docker tag "documenso-base" "documenso/documenso:$APP_VERSION"
+        docker tag "documenso-base" "ghcr.io/documenso/documenso:$APP_VERSION"
+    fi
+fi
+
+# Remove the temporary base tag
+docker rmi "documenso-base"

docker/buildx.sh

@@ -9,11 +9,11 @@ SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 
 # Get the platform from environment variable or set to linux/amd64 if not set
-# quote the string to prevent word splitting
 if [ -z "$PLATFORM" ]; then
     PLATFORM="linux/amd64"
 fi
 
+# Get Git information
 APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
 GIT_SHA="$(git rev-parse HEAD)"
 
@@ -21,14 +21,41 @@ echo "Building docker image for monorepo at $MONOREPO_ROOT"
 echo "App version: $APP_VERSION"
 echo "Git SHA: $GIT_SHA"
 
+# Build with temporary base tag
 docker buildx build \
     -f "$SCRIPT_DIR/Dockerfile" \
     --platform=$PLATFORM \
     --progress=plain \
-    -t "documenso/documenso:latest" \
+    -t "documenso-base" \
-    -t "documenso/documenso:$GIT_SHA" \
-    -t "documenso/documenso:$APP_VERSION" \
-    -t "ghcr.io/documenso/documenso:latest" \
-    -t "ghcr.io/documenso/documenso:$GIT_SHA" \
-    -t "ghcr.io/documenso/documenso:$APP_VERSION" \
     "$MONOREPO_ROOT"
+
+# Handle repository tagging
+if [ ! -z "$DOCKER_REPOSITORY" ]; then
+    echo "Using custom repository: $DOCKER_REPOSITORY"
+    
+    # Add tags for custom repository
+    docker tag "documenso-base" "$DOCKER_REPOSITORY:latest"
+    docker tag "documenso-base" "$DOCKER_REPOSITORY:$GIT_SHA"
+
+    # Add version tag if available
+    if [ ! -z "$APP_VERSION" ] && [ "$APP_VERSION" != "undefined" ]; then
+        docker tag "documenso-base" "$DOCKER_REPOSITORY:$APP_VERSION"
+    fi
+else
+    echo "Using default repositories: dockerhub and ghcr.io"
+    
+    # Add tags for both default repositories
+    docker tag "documenso-base" "documenso/documenso:latest"
+    docker tag "documenso-base" "documenso/documenso:$GIT_SHA"
+    docker tag "documenso-base" "ghcr.io/documenso/documenso:latest"
+    docker tag "documenso-base" "ghcr.io/documenso/documenso:$GIT_SHA"
+
+    # Add version tags if available
+    if [ ! -z "$APP_VERSION" ] && [ "$APP_VERSION" != "undefined" ]; then
+        docker tag "documenso-base" "documenso/documenso:$APP_VERSION"
+        docker tag "documenso-base" "ghcr.io/documenso/documenso:$APP_VERSION"
+    fi
+fi
+
+# Remove the temporary base tag
+docker rmi "documenso-base"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.9.0-rc.11",
+  "version": "1.10.0-rc.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.9.0-rc.11",
+      "version": "1.10.0-rc.5",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -95,6 +95,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
+      "version": "1.10.0-rc.5",
       "dependencies": {
         "@documenso/api": "*",
         "@documenso/assets": "*",
@@ -41559,6 +41560,7 @@
         "@vvo/tzdb": "^6.117.0",
         "csv-parse": "^5.6.0",
         "inngest": "^3.19.13",
+        "jose": "^6.0.0",
         "kysely": "0.26.3",
         "luxon": "^3.4.0",
         "micro": "^10.0.1",
@@ -41581,6 +41583,15 @@
         "@types/pg": "^8.11.4"
       }
     },
+    "packages/lib/node_modules/jose": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.0.10.tgz",
+      "integrity": "sha512-skIAxZqcMkOrSwjJvplIPYrlXGpxTPnro2/QWTDCxAdWQrSTV5/KqspMWmi5WAx5+ULswASJiZ0a+1B/Lxt9cw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "packages/prettier-config": {
       "name": "@documenso/prettier-config",
       "version": "0.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.0-rc.11",
+  "version": "1.10.0-rc.5",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --filter=@documenso/remix",
@@ -14,11 +14,11 @@
     "prepare": "husky && husky install || true",
     "commitlint": "commitlint --edit",
     "clean": "turbo run clean && rimraf node_modules",
-    "d": "npm run dx && npm run dev",
+    "d": "npm run dx && npm run translate:compile && npm run dev",
     "dx": "npm i && npm run dx:up && npm run prisma:migrate-dev && npm run prisma:seed",
     "dx:up": "docker compose -f docker/development/compose.yml up -d",
     "dx:down": "docker compose -f docker/development/compose.yml down",
-    "ci": "turbo run test:e2e",
+    "ci": "turbo run build --filter=@documenso/remix && turbo run test:e2e",
     "prisma:generate": "npm run with:env -- npm run prisma:generate -w @documenso/prisma",
     "prisma:migrate-dev": "npm run with:env -- npm run prisma:migrate-dev -w @documenso/prisma",
     "prisma:migrate-deploy": "npm run with:env -- npm run prisma:migrate-deploy -w @documenso/prisma",