fix: build errors

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

@@ -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/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

@@ -3,6 +3,8 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
+import { addZeroMonth } from '../add-zero-month';
+
 export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('Document')
@@ -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]) => {
-    const [yearA, monthA] = dateA.split('-').map(Number);
-    const [yearB, monthB] = dateB.split('-').map(Number);
+  try {
+    if (!data || Object.keys(data).length === 0) {
+      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]) => {
-    const [year, month] = date.split('-');
-    const dateTime = DateTime.fromObject({
-      year: Number(year),
-      month: Number(month),
+        if (isNaN(yearA) || isNaN(monthA) || isNaN(yearB) || isNaN(monthB)) {
+          console.warn(`Invalid date format: ${dateA} or ${dateB}`);
+          return 0;
+        }
+
+        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 {
-    labels,
-    datasets: [
-      {
-        label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
-        data: sortedEntries.map(([_, stats]) => stats[metric]),
-      },
-    ],
-  };
+    const labels = sortedEntries.map(([date]) => {
+      try {
+        const [year, month] = date.split('-');
+
+        if (!year || !month || isNaN(Number(year)) || isNaN(Number(month))) {
+          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>
-          <DialogTitle>
-            <Trans>Complete Document</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>
-              Are you sure you want to complete the document? This action cannot be undone. Please
-              ensure that you have completed prefilling all relevant fields before proceeding.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
+        <Form {...form}>
+          <form>
+            <fieldset disabled={isSubmitting} className="border-none p-0">
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Complete Document</Trans>
+                </DialogTitle>
+                <DialogDescription>
+                  <Trans>
+                    Are you sure you want to complete the document? This action cannot be undone.
+                    Please ensure that you have completed prefilling all relevant fields before
+                    proceeding.
+                  </Trans>
+                </DialogDescription>
+              </DialogHeader>
 
-        <div className="flex flex-col gap-4">
-          <DocumentSigningDisclosure />
-        </div>
+              <div className="mt-4 flex flex-col gap-4">
+                {allowDictateNextSigner && (
+                  <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">
-          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-            Cancel
-          </Button>
-          <Button
-            variant={hasUninsertedFields ? 'destructive' : 'default'}
-            onClick={onConfirm}
-            disabled={isSubmitting}
-            loading={isSubmitting}
-          >
-            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
-          </Button>
-        </DialogFooter>
+                    <div className="flex flex-col gap-4 rounded-xl border p-4 md:flex-row">
+                      <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Name</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...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" />
+              </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

@@ -162,7 +162,16 @@ export const DocumentDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .exhaustive()}
+              // DocumentStatus.REJECTED isnt working currently so this is a fallback to prevent 500 error.
+              // The union should work but currently its not
+              .otherwise(() => (
+                <AlertDescription>
+                  <Trans>
+                    Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                    this document will be permanently deleted.
+                  </Trans>
+                </AlertDescription>
+              ))}
           </Alert>
         ) : (
           <Alert variant="warning" className="-mt-1">

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

@@ -0,0 +1,119 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DocumentRestoreDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  onRestore?: () => Promise<void> | void;
+  documentTitle: string;
+  teamId?: number;
+  canManageDocument: boolean;
+};
+
+export const DocumentRestoreDialog = ({
+  id,
+  open,
+  onOpenChange,
+  onRestore,
+  documentTitle,
+  canManageDocument,
+}: DocumentRestoreDialogProps) => {
+  const { toast } = useToast();
+  const { refreshLimits } = useLimits();
+  const { _ } = useLingui();
+
+  const { mutateAsync: restoreDocument, isPending } =
+    trpcReact.document.restoreDocument.useMutation({
+      onSuccess: async () => {
+        void refreshLimits();
+
+        toast({
+          title: _(msg`Document restored`),
+          description: _(msg`"${documentTitle}" has been successfully restored`),
+          duration: 5000,
+        });
+
+        await onRestore?.();
+
+        onOpenChange(false);
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(msg`This document could not be restored at this time. Please try again.`),
+          variant: 'destructive',
+          duration: 7500,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Restore Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            {canManageDocument ? (
+              <Trans>
+                You are about to restore <strong>"{documentTitle}"</strong>
+              </Trans>
+            ) : (
+              <Trans>
+                You are about to unhide <strong>"{documentTitle}"</strong>
+              </Trans>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" className="-mt-1">
+          <AlertDescription>
+            {canManageDocument ? (
+              <Trans>
+                The document will be restored to your account and will be available in your
+                documents list.
+              </Trans>
+            ) : (
+              <Trans>
+                The document will be unhidden from your account and will be available in your
+                documents list.
+              </Trans>
+            )}
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="button"
+            loading={isPending}
+            onClick={() => void restoreDocument({ documentId: id })}
+          >
+            <Trans>Restore</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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-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-signing-page.tsx

@@ -15,6 +15,7 @@ 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';
@@ -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,
@@ -85,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);
 
@@ -202,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');
@@ -468,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/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/document-signing/document-signing-complete-dialog.tsx

@@ -1,9 +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';
@@ -14,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';
 
@@ -22,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,
@@ -35,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>
@@ -71,110 +130,184 @@ export const DocumentSigningCompleteDialog = ({
       </DialogTrigger>
 
       <DialogContent>
-        <DialogTitle>
-          <div className="text-foreground text-xl font-semibold">
-            {match(role)
-              .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>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
+              <DialogTitle>
+                <div className="text-foreground text-xl font-semibold">
+                  {match(role)
+                    .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]">
-          {match(role)
-            .with(RecipientRole.VIEWER, () => (
-              <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}
+              <div className="text-muted-foreground max-w-[50ch]">
+                {match(role)
+                  .with(RecipientRole.VIEWER, () => (
+                    <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>
-                    ".
-                  </span>
-                  <br /> Are you sure?
-                </Trans>
-              </span>
-            ))
-            .with(RecipientRole.SIGNER, () => (
-              <span>
-                <Trans>
-                  <span className="inline-flex flex-wrap">
-                    You are about to complete signing "
-                    <span className="inline-block max-w-[11rem] truncate align-baseline">
-                      {documentTitle}
+                  ))
+                  .with(RecipientRole.SIGNER, () => (
+                    <span>
+                      <Trans>
+                        <span className="inline-flex flex-wrap">
+                          You are about to complete signing "
+                          <span className="inline-block max-w-[11rem] truncate align-baseline">
+                            {documentTitle}
+                          </span>
+                          ".
+                        </span>
+                        <br /> Are you sure?
+                      </Trans>
                     </span>
-                    ".
-                  </span>
-                  <br /> Are you sure?
-                </Trans>
-              </span>
-            ))
-            .with(RecipientRole.APPROVER, () => (
-              <span>
-                <Trans>
-                  <span className="inline-flex flex-wrap">
-                    You are about to complete approving{' '}
-                    <span className="inline-block max-w-[11rem] truncate align-baseline">
-                      "{documentTitle}"
+                  ))
+                  .with(RecipientRole.APPROVER, () => (
+                    <span>
+                      <Trans>
+                        <span className="inline-flex flex-wrap">
+                          You are about to complete approving{' '}
+                          <span className="inline-block max-w-[11rem] truncate align-baseline">
+                            "{documentTitle}"
+                          </span>
+                          .
+                        </span>
+                        <br /> Are you sure?
+                      </Trans>
                     </span>
-                    .
-                  </span>
-                  <br /> Are you sure?
-                </Trans>
-              </span>
-            ))
-            .otherwise(() => (
-              <span>
-                <Trans>
-                  <span className="inline-flex flex-wrap">
-                    You are about to complete viewing "
-                    <span className="inline-block max-w-[11rem] truncate align-baseline">
-                      {documentTitle}
+                  ))
+                  .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>
-                    ".
-                  </span>
-                  <br /> Are you sure?
-                </Trans>
-              </span>
-            ))}
-        </div>
+                  ))}
+              </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>
-          <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);
-              }}
-            >
-              <Trans>Cancel</Trans>
-            </Button>
+                      <Button
+                        type="button"
+                        className="mt-2"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setIsEditingNextSigner((prev) => !prev)}
+                      >
+                        <Trans>Update Recipient</Trans>
+                      </Button>
+                    </div>
+                  )}
 
-            <Button
-              type="button"
-              className="flex-1"
-              disabled={!isComplete}
-              loading={isSubmitting}
-              onClick={onSignatureComplete}
-            >
-              {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>
+                  {isEditingNextSigner && (
+                    <div className="flex flex-col gap-4 md:flex-row">
+                      <FormField
+                        control={form.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormLabel>
+                              <Trans>Name</Trans>
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...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-form.tsx

@@ -24,7 +24,10 @@ import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group
 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';
 
@@ -64,8 +67,11 @@ export const DocumentSigningForm = ({
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
-  const { mutateAsync: completeDocumentWithToken } =
-    trpc.recipient.completeDocumentWithToken.useMutation();
+  const {
+    mutateAsync: completeDocumentWithToken,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
 
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
@@ -73,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),
@@ -98,18 +102,6 @@ export const DocumentSigningForm = ({
     validateFieldsInserted(fieldsRequiringValidation);
   };
 
-  const onFormSubmit = async () => {
-    setValidateUninsertedFields(true);
-
-    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
-
-    if (!isFieldsValid) {
-      return;
-    }
-
-    await completeDocument();
-  };
-
   const onAssistantFormSubmit = () => {
     if (uninsertedRecipientFields.length > 0) {
       return;
@@ -118,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',
@@ -135,12 +127,18 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
-    await completeDocumentWithToken({
+  const completeDocument = async (
+    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,
@@ -155,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(
@@ -204,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>
@@ -288,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>
 
@@ -300,12 +327,20 @@ 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">
                   {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
                     <Trans>Please review the document before approving.</Trans>
@@ -353,31 +388,41 @@ export const DocumentSigningForm = ({
                       </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 = {
-  document: DocumentAndSender;
+export type DocumentSigningPageViewProps = {
   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} />

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

@@ -38,11 +38,6 @@ export const DocumentSigningRecipientProvider = ({
   recipient,
   targetSigner = null,
 }: DocumentSigningRecipientProviderProps) => {
-  // console.log({
-  //   recipient,
-  //   targetSigner,
-  //   isAssistantMode: !!targetSigner,
-  // });
   return (
     <DocumentSigningRecipientContext.Provider
       value={{

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
-    .string()
-    .min(5, msg`Please provide a reason`)
-    .max(500, msg`Reason must be less than 500 characters`),
+  reason: z.string().max(500, msg`Reason must be less than 500 characters`),
 });
 
 type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;

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

@@ -217,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) => ({
@@ -361,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}

apps/remix/app/components/general/document/document-history-sheet.tsx

@@ -170,6 +170,7 @@ export const DocumentHistorySheet = ({
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED },
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT },
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_MOVED_TO_TEAM },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RESTORED },
                     () => null,
                   )
                   .with(

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

@@ -25,7 +25,7 @@ export const DocumentPageViewInformation = ({
   const { _, i18n } = useLingui();
 
   const documentInformation = useMemo(() => {
-    return [
+    const documentInfo = [
       {
         description: msg`Uploaded by`,
         value:
@@ -44,6 +44,19 @@ export const DocumentPageViewInformation = ({
           .toRelative(),
       },
     ];
+
+    if (document.deletedAt) {
+      documentInfo.push({
+        description: msg`Deleted`,
+        value:
+          document.deletedAt &&
+          DateTime.fromJSDate(document.deletedAt)
+            .setLocale(i18n.locales?.[0] || i18n.locale)
+            .toFormat('MMMM d, yyyy'),
+      });
+    }
+
+    return documentInfo;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, document, userId]);
 

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, XCircle } from 'lucide-react';
+import { CheckCircle2, Clock, File, Trash, XCircle } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -36,11 +36,11 @@ 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',
+  DELETED: {
+    label: msg`Deleted`,
+    labelExtended: msg`Document deleted`,
+    icon: Trash,
+    color: 'text-red-700 dark:text-red-500',
   },
   INBOX: {
     label: msg`Inbox`,
@@ -53,6 +53,12 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
     labelExtended: msg`Document All`,
     color: 'text-muted-foreground',
   },
+  REJECTED: {
+    label: msg`Rejected`,
+    labelExtended: msg`Document rejected`,
+    icon: XCircle,
+    color: 'text-red-500 dark:text-red-300',
+  },
 };
 
 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {

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

@@ -167,6 +167,7 @@ export const TemplateEditForm = ({
           templateId: template.id,
           meta: {
             signingOrder: data.signingOrder,
+            allowDictateNextSigner: data.allowDictateNextSigner,
           },
         }),
 
@@ -270,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}

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

@@ -15,6 +15,7 @@ import {
   MoreHorizontal,
   MoveRight,
   Pencil,
+  RotateCcw,
   Share,
   Trash2,
 } from 'lucide-react';
@@ -39,6 +40,7 @@ import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialo
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentMoveDialog } from '~/components/dialogs/document-move-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { DocumentRestoreDialog } from '~/components/dialogs/document-restore-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
@@ -58,18 +60,20 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
   const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isRestoreDialogOpen, setRestoreDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
 
   const recipient = row.recipients.find((recipient) => recipient.email === user.email);
 
   const isOwner = row.user.id === user.id;
-  // const isRecipient = !!recipient;
+  const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = isDocumentCompleted(row.status);
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const isCurrentTeamDocument = team && row.team?.url === team.url;
+  const isDocumentDeleted = row.deletedAt !== null;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
@@ -171,10 +175,17 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
           Void
         </DropdownMenuItem> */}
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
-          <Trash2 className="mr-2 h-4 w-4" />
-          {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
-        </DropdownMenuItem>
+        {isDocumentDeleted || (isRecipient && !canManageDocument) ? (
+          <DropdownMenuItem disabled={isRecipient} onClick={() => setRestoreDialogOpen(true)}>
+            <RotateCcw className="mr-2 h-4 w-4" />
+            <Trans>Restore</Trans>
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
+            <Trash2 className="mr-2 h-4 w-4" />
+            {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
+          </DropdownMenuItem>
+        )}
 
         <DropdownMenuLabel>
           <Trans>Share</Trans>
@@ -220,6 +231,15 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
         canManageDocument={canManageDocument}
       />
 
+      <DocumentRestoreDialog
+        id={row.id}
+        open={isRestoreDialogOpen}
+        onOpenChange={setRestoreDialogOpen}
+        documentTitle={row.title}
+        teamId={team?.id}
+        canManageDocument={canManageDocument}
+      />
+
       <DocumentMoveDialog
         documentId={row.id}
         open={isMoveDialogOpen}

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

@@ -1,6 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Bird, CheckCircle2 } from 'lucide-react';
+import { Bird, CheckCircle2, Trash } from 'lucide-react';
 import { match } from 'ts-pattern';
 
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -30,6 +30,11 @@ export const DocumentsTableEmptyState = ({ status }: DocumentsTableEmptyStatePro
       message: msg`You have not yet created or received any documents. To create a document please upload one.`,
       icon: Bird,
     }))
+    .with(ExtendedDocumentStatus.DELETED, () => ({
+      title: msg`Nothing in the trash`,
+      message: msg`There are no documents in the trash.`,
+      icon: Trash,
+    }))
     .otherwise(() => ({
       title: msg`Nothing to do`,
       message: msg`All documents have been processed. Any new documents that are sent or received will show here.`,

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

@@ -9,7 +9,6 @@ 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 type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
@@ -76,13 +75,12 @@ export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTab
       },
       {
         header: _(msg`Actions`),
-        cell: ({ row }) =>
-          (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && (
-            <div className="flex items-center gap-x-4">
-              <DocumentsTableActionButton row={row.original} />
-              <DocumentsTableActionDropdown row={row.original} />
-            </div>
-          ),
+        cell: ({ row }) => (
+          <div className="flex items-center gap-x-4">
+            <DocumentsTableActionButton row={row.original} />
+            <DocumentsTableActionDropdown row={row.original} />
+          </div>
+        ),
       },
     ] satisfies DataTableColumnDef<DocumentsTableRow>[];
   }, [team]);

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._index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { useSearchParams } from 'react-router';
-import { Link } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
@@ -51,6 +50,7 @@ export default function DocumentsPage() {
     [ExtendedDocumentStatus.PENDING]: 0,
     [ExtendedDocumentStatus.COMPLETED]: 0,
     [ExtendedDocumentStatus.REJECTED]: 0,
+    [ExtendedDocumentStatus.DELETED]: 0,
     [ExtendedDocumentStatus.INBOX]: 0,
     [ExtendedDocumentStatus.ALL]: 0,
   });
@@ -114,13 +114,17 @@ export default function DocumentsPage() {
         </div>
 
         <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+          <Tabs
+            value={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+            className="overflow-x-auto"
+          >
             <TabsList>
               {[
                 ExtendedDocumentStatus.INBOX,
                 ExtendedDocumentStatus.PENDING,
                 ExtendedDocumentStatus.COMPLETED,
                 ExtendedDocumentStatus.DRAFT,
+                ExtendedDocumentStatus.DELETED,
                 ExtendedDocumentStatus.ALL,
               ].map((value) => (
                 <TabsTrigger

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

@@ -6,6 +6,7 @@ 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();
 
@@ -245,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">
@@ -337,15 +341,17 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
         </CardContent>
       </Card>
 
-      <div className="my-8 flex-row-reverse">
-        <div className="flex items-end justify-end gap-x-4">
-          <p className="flex-shrink-0 text-sm font-medium print:text-xs">
-            {_(msg`Signing certificate provided by`)}:
-          </p>
+      {isPlatformDocument && (
+        <div className="my-8 flex-row-reverse">
+          <div className="flex items-end justify-end gap-x-4">
+            <p className="flex-shrink-0 text-sm font-medium print:text-xs">
+              {_(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/_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,

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+/sign.$url.tsx

@@ -8,6 +8,7 @@ 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';
@@ -33,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,
@@ -41,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
@@ -130,6 +132,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     allRecipients,
     recipient,
     fields,
+    completedFields,
     hidePoweredBy,
     isPlatformDocument,
     isEnterpriseDocument,
@@ -145,6 +148,7 @@ export default function EmbedSignDocumentPage() {
     allRecipients,
     recipient,
     fields,
+    completedFields,
     hidePoweredBy,
     isPlatformDocument,
     isEnterpriseDocument,
@@ -171,6 +175,7 @@ export default function EmbedSignDocumentPage() {
           documentData={document.documentData}
           recipient={recipient}
           fields={fields}
+          completedFields={completedFields}
           metadata={document.documentMeta}
           isCompleted={isDocumentCompleted(document.status)}
           hidePoweredBy={

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/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/index-browser': '../../node_modules/.prisma/client/index-browser.js',
-      canvas: './app/types/empty-module.ts',
+      '.prisma/client/default': path.resolve(
+        __dirname,
+        '../../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/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" \
+    -t "documenso-base" \
     "$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/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" \
+    -t "documenso-base" \
     "$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",
@@ -18,7 +18,7 @@
     "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",

packages/api/v1/implementation.ts

@@ -323,6 +323,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
         dateFormat: dateFormat?.value,
         redirectUrl: body.meta.redirectUrl,
         signingOrder: body.meta.signingOrder,
+        allowDictateNextSigner: body.meta.allowDictateNextSigner,
         language: body.meta.language,
         typedSignatureEnabled: body.meta.typedSignatureEnabled,
         uploadSignatureEnabled: body.meta.uploadSignatureEnabled,

packages/api/v1/schema.ts

@@ -155,6 +155,7 @@ export const ZCreateDocumentMutationSchema = z.object({
         }),
       redirectUrl: z.string(),
       signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
+      allowDictateNextSigner: z.boolean().optional(),
       language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
       typedSignatureEnabled: z.boolean().optional().default(true),
       uploadSignatureEnabled: z.boolean().optional().default(true),
@@ -220,6 +221,7 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
       dateFormat: z.string(),
       redirectUrl: z.string(),
       signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
+      allowDictateNextSigner: z.boolean().optional(),
       language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
     })
     .partial()
@@ -287,6 +289,7 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
       dateFormat: z.string(),
       redirectUrl: ZUrlSchema,
       signingOrder: z.nativeEnum(DocumentSigningOrder),
+      allowDictateNextSigner: z.boolean(),
       language: z.enum(SUPPORTED_LANGUAGE_CODES),
       distributionMethod: z.nativeEnum(DocumentDistributionMethod),
       typedSignatureEnabled: z.boolean(),

packages/app-tests/e2e/api/v2/embedding-presign.spec.ts

@@ -0,0 +1,203 @@
+import { expect, test } from '@playwright/test';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+test.describe('Embedding Presign API', () => {
+  test('createEmbeddingPresignToken: should create a token with default expiration', async ({
+    request,
+  }) => {
+    const user = await seedUser();
+
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test',
+      expiresIn: null,
+    });
+
+    const response = await request.post(
+      `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta/embedding/create-presign-token`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          apiToken: token,
+        },
+      },
+    );
+
+    const responseData = await response.json();
+
+    console.log(responseData);
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.token).toBeDefined();
+    expect(responseData.expiresAt).toBeDefined();
+    expect(responseData.expiresIn).toBe(3600); // Default 1 hour in seconds
+  });
+
+  test('createEmbeddingPresignToken: should create a token with custom expiration', async ({
+    request,
+  }) => {
+    const user = await seedUser();
+
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test',
+      expiresIn: null,
+    });
+
+    const response = await request.post(
+      `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta/embedding/create-presign-token`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          apiToken: token,
+          expiresIn: 120, // 2 hours
+        },
+      },
+    );
+
+    const responseData = await response.json();
+
+    console.log(responseData);
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.token).toBeDefined();
+    expect(responseData.expiresAt).toBeDefined();
+    expect(responseData.expiresIn).toBe(7200); // 2 hours in seconds
+  });
+
+  test('createEmbeddingPresignToken: should create a token with immediate expiration in dev mode', async ({
+    request,
+  }) => {
+    const user = await seedUser();
+
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test',
+      expiresIn: null,
+    });
+
+    const response = await request.post(
+      `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta/embedding/create-presign-token`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          apiToken: token,
+          expiresIn: 0, // Immediate expiration
+        },
+      },
+    );
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    const responseData = await response.json();
+
+    console.log(responseData);
+
+    expect(responseData.token).toBeDefined();
+    expect(responseData.expiresAt).toBeDefined();
+    expect(responseData.expiresIn).toBe(0); // 0 seconds
+  });
+
+  test('verifyEmbeddingPresignToken: should verify a valid token', async ({ request }) => {
+    const user = await seedUser();
+
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test',
+      expiresIn: null,
+    });
+
+    // First create a token
+    const createResponse = await request.post(
+      `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta/embedding/create-presign-token`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          apiToken: token,
+        },
+      },
+    );
+
+    expect(createResponse.ok()).toBeTruthy();
+    const createResponseData = await createResponse.json();
+
+    console.log('Create response:', createResponseData);
+
+    const presignToken = createResponseData.token;
+
+    // Then verify it
+    const verifyResponse = await request.post(
+      `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta/embedding/verify-presign-token`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          token: presignToken,
+        },
+      },
+    );
+
+    expect(verifyResponse.ok()).toBeTruthy();
+    expect(verifyResponse.status()).toBe(200);
+
+    const verifyResponseData = await verifyResponse.json();
+
+    console.log('Verify response:', verifyResponseData);
+
+    expect(verifyResponseData.success).toBe(true);
+  });
+
+  test('verifyEmbeddingPresignToken: should reject an invalid token', async ({ request }) => {
+    const user = await seedUser();
+
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test',
+      expiresIn: null,
+    });
+
+    const response = await request.post(
+      `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta/embedding/verify-presign-token`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          token: 'invalid-token',
+        },
+      },
+    );
+
+    const responseData = await response.json();
+
+    console.log('Invalid token response:', responseData);
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.success).toBe(false);
+  });
+});

packages/app-tests/e2e/document-auth/action-auth.spec.ts

@@ -210,7 +210,7 @@ test('[DOCUMENT_AUTH]: should allow field signing when required for recipient au
         }),
       },
     ],
-    fields: [FieldType.DATE],
+    fields: [FieldType.DATE, FieldType.SIGNATURE],
   });
 
   for (const recipient of recipients) {
@@ -309,7 +309,7 @@ test('[DOCUMENT_AUTH]: should allow field signing when required for recipient an
         }),
       },
     ],
-    fields: [FieldType.DATE],
+    fields: [FieldType.DATE, FieldType.SIGNATURE],
     updateDocumentOptions: {
       authOptions: createDocumentAuthOptions({
         globalAccessAuth: null,

packages/app-tests/e2e/document-auth/next-recipient-dictation.spec.ts

@@ -0,0 +1,390 @@
+import { expect, test } from '@playwright/test';
+import {
+  DocumentSigningOrder,
+  DocumentStatus,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} from '@prisma/client';
+
+import { prisma } from '@documenso/prisma';
+import { seedPendingDocumentWithFullFields } from '@documenso/prisma/seed/documents';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { signDirectSignaturePad, signSignaturePad } from '../fixtures/signature';
+
+test('[NEXT_RECIPIENT_DICTATION]: should allow updating next recipient when dictation is enabled', async ({
+  page,
+}) => {
+  const user = await seedUser();
+  const firstSigner = await seedUser();
+  const secondSigner = await seedUser();
+  const thirdSigner = await seedUser();
+
+  const { recipients, document } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: [firstSigner, secondSigner, thirdSigner],
+    recipientsCreateOptions: [{ signingOrder: 1 }, { signingOrder: 2 }, { signingOrder: 3 }],
+    updateDocumentOptions: {
+      documentMeta: {
+        upsert: {
+          create: {
+            allowDictateNextSigner: true,
+            signingOrder: DocumentSigningOrder.SEQUENTIAL,
+          },
+          update: {
+            allowDictateNextSigner: true,
+            signingOrder: DocumentSigningOrder.SEQUENTIAL,
+          },
+        },
+      },
+    },
+  });
+
+  const firstRecipient = recipients[0];
+  const { token, fields } = firstRecipient;
+
+  const signUrl = `/sign/${token}`;
+
+  await page.goto(signUrl);
+  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+  await signSignaturePad(page);
+
+  // Fill in all fields
+  for (const field of fields) {
+    await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+    if (field.type === FieldType.TEXT) {
+      await page.locator('#custom-text').fill('TEXT');
+      await page.getByRole('button', { name: 'Save' }).click();
+    }
+
+    await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+  }
+
+  // Complete signing and update next recipient
+  await page.getByRole('button', { name: 'Complete' }).click();
+
+  // Verify next recipient info is shown
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(page.getByText('The next recipient to sign this document will be')).toBeVisible();
+
+  // Update next recipient
+  await page.locator('button').filter({ hasText: 'Update Recipient' }).click();
+  await page.waitForTimeout(1000);
+
+  // Use dialog context to ensure we're targeting the correct form fields
+  const dialog = page.getByRole('dialog');
+  await dialog.getByLabel('Name').fill('New Recipient');
+  await dialog.getByLabel('Email').fill('new.recipient@example.com');
+
+  // Submit and verify completion
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  // Verify document and recipient states
+  const updatedDocument = await prisma.document.findUniqueOrThrow({
+    where: { id: document.id },
+    include: {
+      recipients: {
+        orderBy: { signingOrder: 'asc' },
+      },
+    },
+  });
+
+  // Document should still be pending as there are more recipients
+  expect(updatedDocument.status).toBe(DocumentStatus.PENDING);
+
+  // First recipient should be completed
+  const updatedFirstRecipient = updatedDocument.recipients[0];
+  expect(updatedFirstRecipient.signingStatus).toBe(SigningStatus.SIGNED);
+
+  // Second recipient should be the new recipient
+  const updatedSecondRecipient = updatedDocument.recipients[1];
+  expect(updatedSecondRecipient.name).toBe('New Recipient');
+  expect(updatedSecondRecipient.email).toBe('new.recipient@example.com');
+  expect(updatedSecondRecipient.signingOrder).toBe(2);
+  expect(updatedSecondRecipient.signingStatus).toBe(SigningStatus.NOT_SIGNED);
+});
+
+test('[NEXT_RECIPIENT_DICTATION]: should not show dictation UI when disabled', async ({ page }) => {
+  const user = await seedUser();
+  const firstSigner = await seedUser();
+  const secondSigner = await seedUser();
+
+  const { recipients, document } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: [firstSigner, secondSigner],
+    recipientsCreateOptions: [{ signingOrder: 1 }, { signingOrder: 2 }],
+    updateDocumentOptions: {
+      documentMeta: {
+        upsert: {
+          create: {
+            allowDictateNextSigner: false,
+            signingOrder: DocumentSigningOrder.SEQUENTIAL,
+          },
+          update: {
+            allowDictateNextSigner: false,
+            signingOrder: DocumentSigningOrder.SEQUENTIAL,
+          },
+        },
+      },
+    },
+  });
+
+  const firstRecipient = recipients[0];
+  const { token, fields } = firstRecipient;
+
+  const signUrl = `/sign/${token}`;
+
+  await page.goto(signUrl);
+  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+  await signSignaturePad(page);
+
+  // Fill in all fields
+  for (const field of fields) {
+    await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+    if (field.type === FieldType.TEXT) {
+      await page.locator('#custom-text').fill('TEXT');
+      await page.getByRole('button', { name: 'Save' }).click();
+    }
+
+    await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+  }
+
+  // Complete signing
+  await page.getByRole('button', { name: 'Complete' }).click();
+
+  // Verify next recipient UI is not shown
+  await expect(
+    page.getByText('The next recipient to sign this document will be'),
+  ).not.toBeVisible();
+  await expect(page.getByRole('button', { name: 'Update Recipient' })).not.toBeVisible();
+
+  // Submit and verify completion
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  // Verify document and recipient states
+
+  const updatedDocument = await prisma.document.findUniqueOrThrow({
+    where: { id: document.id },
+    include: {
+      recipients: {
+        orderBy: { signingOrder: 'asc' },
+      },
+    },
+  });
+
+  // Document should still be pending as there are more recipients
+  expect(updatedDocument.status).toBe(DocumentStatus.PENDING);
+
+  // First recipient should be completed
+  const updatedFirstRecipient = updatedDocument.recipients[0];
+  expect(updatedFirstRecipient.signingStatus).toBe(SigningStatus.SIGNED);
+
+  // Second recipient should remain unchanged
+  const updatedSecondRecipient = updatedDocument.recipients[1];
+  expect(updatedSecondRecipient.email).toBe(secondSigner.email);
+  expect(updatedSecondRecipient.signingOrder).toBe(2);
+  expect(updatedSecondRecipient.signingStatus).toBe(SigningStatus.NOT_SIGNED);
+});
+
+test('[NEXT_RECIPIENT_DICTATION]: should work with parallel signing flow', async ({ page }) => {
+  const user = await seedUser();
+  const firstSigner = await seedUser();
+  const secondSigner = await seedUser();
+
+  const { recipients, document } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: [firstSigner, secondSigner],
+    recipientsCreateOptions: [{ signingOrder: 1 }, { signingOrder: 2 }],
+    updateDocumentOptions: {
+      documentMeta: {
+        upsert: {
+          create: {
+            allowDictateNextSigner: false,
+            signingOrder: DocumentSigningOrder.PARALLEL,
+          },
+          update: {
+            allowDictateNextSigner: false,
+            signingOrder: DocumentSigningOrder.PARALLEL,
+          },
+        },
+      },
+    },
+  });
+
+  // Test both recipients can sign in parallel
+  for (const recipient of recipients) {
+    const { token, fields } = recipient;
+    const signUrl = `/sign/${token}`;
+
+    await page.goto(signUrl);
+    await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+    await signSignaturePad(page);
+
+    // Fill in all fields
+    for (const field of fields) {
+      await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+      if (field.type === FieldType.TEXT) {
+        await page.locator('#custom-text').fill('TEXT');
+        await page.getByRole('button', { name: 'Save' }).click();
+      }
+
+      await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+    }
+
+    // Complete signing
+    await page.getByRole('button', { name: 'Complete' }).click();
+
+    // Verify next recipient UI is not shown in parallel flow
+    await expect(
+      page.getByText('The next recipient to sign this document will be'),
+    ).not.toBeVisible();
+    await expect(page.getByRole('button', { name: 'Update Recipient' })).not.toBeVisible();
+
+    // Submit and verify completion
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(`${signUrl}/complete`);
+  }
+
+  // Verify final document and recipient states
+  await expect(async () => {
+    const updatedDocument = await prisma.document.findUniqueOrThrow({
+      where: { id: document.id },
+      include: {
+        recipients: {
+          orderBy: { signingOrder: 'asc' },
+        },
+      },
+    });
+
+    // Document should be completed since all recipients have signed
+    expect(updatedDocument.status).toBe(DocumentStatus.COMPLETED);
+
+    // All recipients should be completed
+    for (const recipient of updatedDocument.recipients) {
+      expect(recipient.signingStatus).toBe(SigningStatus.SIGNED);
+    }
+  }).toPass();
+});
+
+test('[NEXT_RECIPIENT_DICTATION]: should allow assistant to dictate next signer', async ({
+  page,
+}) => {
+  const user = await seedUser();
+  const assistant = await seedUser();
+  const signer = await seedUser();
+  const thirdSigner = await seedUser();
+
+  const { recipients, document } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: [assistant, signer, thirdSigner],
+    recipientsCreateOptions: [
+      { signingOrder: 1, role: RecipientRole.ASSISTANT },
+      { signingOrder: 2, role: RecipientRole.SIGNER },
+      { signingOrder: 3, role: RecipientRole.SIGNER },
+    ],
+    updateDocumentOptions: {
+      documentMeta: {
+        upsert: {
+          create: {
+            allowDictateNextSigner: true,
+            signingOrder: DocumentSigningOrder.SEQUENTIAL,
+          },
+          update: {
+            allowDictateNextSigner: true,
+            signingOrder: DocumentSigningOrder.SEQUENTIAL,
+          },
+        },
+      },
+    },
+  });
+
+  const assistantRecipient = recipients[0];
+  const { token, fields } = assistantRecipient;
+
+  const signUrl = `/sign/${token}`;
+
+  await page.goto(signUrl);
+  await expect(page.getByRole('heading', { name: 'Assist Document' })).toBeVisible();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByRole('radio', { name: assistantRecipient.name }).click();
+
+  // Fill in all fields
+  for (const field of fields) {
+    await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+    if (field.type === FieldType.SIGNATURE) {
+      await signDirectSignaturePad(page);
+      await page.getByRole('button', { name: 'Sign', exact: true }).click();
+    }
+
+    if (field.type === FieldType.TEXT) {
+      await page.locator('#custom-text').fill('TEXT');
+      await page.getByRole('button', { name: 'Save' }).click();
+    }
+
+    await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+  }
+
+  // Complete assisting and update next recipient
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Verify next recipient info is shown
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(page.getByText('The next recipient to sign this document will be')).toBeVisible();
+
+  // Use dialog context to ensure we're targeting the correct form fields
+  const dialog = page.getByRole('dialog');
+  await dialog.getByRole('button', { name: 'Update Recipient' }).click();
+  await dialog.getByLabel('Name').fill('New Signer');
+  await dialog.getByLabel('Email').fill('new.signer@example.com');
+
+  // Submit and verify completion
+  await page.getByRole('button', { name: /Continue|Proceed/i }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  // Verify document and recipient states
+  await expect(async () => {
+    const updatedDocument = await prisma.document.findUniqueOrThrow({
+      where: { id: document.id },
+      include: {
+        recipients: {
+          orderBy: { signingOrder: 'asc' },
+        },
+      },
+    });
+
+    // Document should still be pending as there are more recipients
+    expect(updatedDocument.status).toBe(DocumentStatus.PENDING);
+
+    // Assistant should be completed
+    const updatedAssistant = updatedDocument.recipients[0];
+    expect(updatedAssistant.signingStatus).toBe(SigningStatus.SIGNED);
+    expect(updatedAssistant.role).toBe(RecipientRole.ASSISTANT);
+
+    // Second recipient should be the new signer
+    const updatedSigner = updatedDocument.recipients[1];
+    expect(updatedSigner.name).toBe('New Signer');
+    expect(updatedSigner.email).toBe('new.signer@example.com');
+    expect(updatedSigner.signingOrder).toBe(2);
+    expect(updatedSigner.signingStatus).toBe(SigningStatus.NOT_SIGNED);
+    expect(updatedSigner.role).toBe(RecipientRole.SIGNER);
+
+    // Third recipient should remain unchanged
+    const thirdRecipient = updatedDocument.recipients[2];
+    expect(thirdRecipient.email).toBe(thirdSigner.email);
+    expect(thirdRecipient.signingOrder).toBe(3);
+    expect(thirdRecipient.signingStatus).toBe(SigningStatus.NOT_SIGNED);
+    expect(thirdRecipient.role).toBe(RecipientRole.SIGNER);
+  }).toPass();
+});

packages/app-tests/e2e/fixtures/signature.ts

@@ -1,5 +1,8 @@
 import type { Page } from '@playwright/test';
 
+/**
+ * Will open the signature pad dialog and sign it.
+ */
 export const signSignaturePad = async (page: Page) => {
   await page.waitForTimeout(200);
 
@@ -12,3 +15,14 @@ export const signSignaturePad = async (page: Page) => {
   // Click Next button
   await page.getByRole('button', { name: 'Next' }).click();
 };
+
+/**
+ * For when the signature pad is already open.
+ */
+export const signDirectSignaturePad = async (page: Page) => {
+  await page.waitForTimeout(200);
+
+  // Click type tab
+  await page.getByRole('tab', { name: 'Type' }).click();
+  await page.getByTestId('signature-pad-type-input').fill('Signature');
+};

packages/app-tests/e2e/public-profiles/public-profiles.spec.ts

@@ -56,6 +56,7 @@ test('[PUBLIC_PROFILE]: create profile', async ({ page }) => {
   // Go back to public profile page.
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/settings/public-profile`);
   await page.getByRole('switch').click();
+  await page.waitForTimeout(1000);
 
   // Assert values.
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/p/${publicProfileUrl}`);
@@ -127,6 +128,7 @@ test('[PUBLIC_PROFILE]: create team profile', async ({ page }) => {
   // Go back to public profile page.
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/settings/public-profile`);
   await page.getByRole('switch').click();
+  await page.waitForTimeout(1000);
 
   // Assert values.
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/p/${publicProfileUrl}`);

packages/app-tests/e2e/teams/team-signature-settings.spec.ts

@@ -148,6 +148,10 @@ test('[TEAMS]: check signature modes work for templates', async ({ page }) => {
 
     await page.getByRole('button', { name: 'Update' }).first().click();
 
+    // Wait for finish
+    await page.getByText('Document preferences updated').waitFor({ state: 'visible' });
+    await page.waitForTimeout(1000);
+
     const template = await seedTeamTemplateWithMeta(team);
 
     await page.goto(`/t/${team.url}/templates/${template.id}`);

packages/app-tests/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "test:dev": "NODE_OPTIONS=--experimental-require-module playwright test",
     "test-ui:dev": "NODE_OPTIONS=--experimental-require-module playwright test --ui",
-    "test:e2e": "NODE_OPTIONS=--experimental-require-module start-server-and-test \"npm run start -w @documenso/remix\" http://localhost:3000 \"playwright test $E2E_TEST_PATH\""
+    "test:e2e": "NODE_OPTIONS=--experimental-require-module NODE_ENV=test start-server-and-test \"npm run start -w @documenso/remix\" http://localhost:3000 \"playwright test $E2E_TEST_PATH\""
   },
   "keywords": [],
   "author": "",

packages/ee/server-only/util/is-document-platform.ts

@@ -6,7 +6,7 @@ import { prisma } from '@documenso/prisma';
 
 import { getPlatformPlanPriceIds } from '../stripe/get-platform-plan-prices';
 
-export type IsDocumentPlatformOptions = Pick<Document, 'id' | 'userId' | 'teamId'>;
+export type IsDocumentPlatformOptions = Pick<Document, 'userId' | 'teamId'>;
 
 /**
  * Whether the user is platform, or has permission to use platform features on

packages/lib/package.json

@@ -28,6 +28,7 @@
     "@lingui/core": "^5.2.0",
     "@lingui/macro": "^5.2.0",
     "@lingui/react": "^5.2.0",
+    "jose": "^6.0.0",
     "@noble/ciphers": "0.4.0",
     "@noble/hashes": "1.3.2",
     "@node-rs/bcrypt": "^1.10.0",
@@ -58,4 +59,4 @@
     "@types/luxon": "^3.3.1",
     "@types/pg": "^8.11.4"
   }
-}
+}

packages/lib/server-only/admin/get-documents-stats.ts

@@ -15,6 +15,7 @@ export const getDocumentStats = async () => {
     [ExtendedDocumentStatus.COMPLETED]: 0,
     [ExtendedDocumentStatus.REJECTED]: 0,
     [ExtendedDocumentStatus.ALL]: 0,
+    [ExtendedDocumentStatus.DELETED]: 0,
   };
 
   counts.forEach((stat) => {

packages/lib/server-only/document-meta/upsert-document-meta.ts

@@ -24,6 +24,7 @@ export type CreateDocumentMetaOptions = {
   redirectUrl?: string;
   emailSettings?: TDocumentEmailSettings;
   signingOrder?: DocumentSigningOrder;
+  allowDictateNextSigner?: boolean;
   distributionMethod?: DocumentDistributionMethod;
   typedSignatureEnabled?: boolean;
   uploadSignatureEnabled?: boolean;
@@ -43,6 +44,7 @@ export const upsertDocumentMeta = async ({
   password,
   redirectUrl,
   signingOrder,
+  allowDictateNextSigner,
   emailSettings,
   distributionMethod,
   typedSignatureEnabled,
@@ -97,6 +99,7 @@ export const upsertDocumentMeta = async ({
         documentId,
         redirectUrl,
         signingOrder,
+        allowDictateNextSigner,
         emailSettings,
         distributionMethod,
         typedSignatureEnabled,
@@ -112,6 +115,7 @@ export const upsertDocumentMeta = async ({
         timezone,
         redirectUrl,
         signingOrder,
+        allowDictateNextSigner,
         emailSettings,
         distributionMethod,
         typedSignatureEnabled,

packages/lib/server-only/document/complete-document-with-token.ts

@@ -7,7 +7,10 @@ import {
   WebhookTriggerEvents,
 } from '@prisma/client';
 
-import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import {
+  DOCUMENT_AUDIT_LOG_TYPE,
+  RECIPIENT_DIFF_TYPE,
+} from '@documenso/lib/types/document-audit-logs';
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
@@ -30,6 +33,10 @@ export type CompleteDocumentWithTokenOptions = {
   userId?: number;
   authOptions?: TRecipientActionAuth;
   requestMetadata?: RequestMetadata;
+  nextSigner?: {
+    email: string;
+    name: string;
+  };
 };
 
 const getDocument = async ({ token, documentId }: CompleteDocumentWithTokenOptions) => {
@@ -57,6 +64,7 @@ export const completeDocumentWithToken = async ({
   token,
   documentId,
   requestMetadata,
+  nextSigner,
 }: CompleteDocumentWithTokenOptions) => {
   const document = await getDocument({ token, documentId });
 
@@ -146,7 +154,6 @@ export const completeDocumentWithToken = async ({
           recipientName: recipient.name,
           recipientId: recipient.id,
           recipientRole: recipient.role,
-          // actionAuth: derivedRecipientActionAuth || undefined,
         },
       }),
     });
@@ -164,6 +171,9 @@ export const completeDocumentWithToken = async ({
     select: {
       id: true,
       signingOrder: true,
+      name: true,
+      email: true,
+      role: true,
     },
     where: {
       documentId: document.id,
@@ -186,9 +196,49 @@ export const completeDocumentWithToken = async ({
       const [nextRecipient] = pendingRecipients;
 
       await prisma.$transaction(async (tx) => {
+        if (nextSigner && document.documentMeta?.allowDictateNextSigner) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
+              documentId: document.id,
+              user: {
+                name: recipient.name,
+                email: recipient.email,
+              },
+              requestMetadata,
+              data: {
+                recipientEmail: nextRecipient.email,
+                recipientName: nextRecipient.name,
+                recipientId: nextRecipient.id,
+                recipientRole: nextRecipient.role,
+                changes: [
+                  {
+                    type: RECIPIENT_DIFF_TYPE.NAME,
+                    from: nextRecipient.name,
+                    to: nextSigner.name,
+                  },
+                  {
+                    type: RECIPIENT_DIFF_TYPE.EMAIL,
+                    from: nextRecipient.email,
+                    to: nextSigner.email,
+                  },
+                ],
+              },
+            }),
+          });
+        }
+
         await tx.recipient.update({
           where: { id: nextRecipient.id },
-          data: { sendStatus: SendStatus.SENT },
+          data: {
+            sendStatus: SendStatus.SENT,
+            ...(nextSigner && document.documentMeta?.allowDictateNextSigner
+              ? {
+                  name: nextSigner.name,
+                  email: nextSigner.email,
+                }
+              : {}),
+          },
         });
 
         await jobs.triggerJob({

packages/lib/server-only/document/find-documents.ts

@@ -136,18 +136,26 @@ export const findDocuments = async ({
     };
   }
 
+  const deletedDateRange =
+    status === ExtendedDocumentStatus.DELETED
+      ? {
+          gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+          lte: DateTime.now().toJSDate(),
+        }
+      : null;
+
   let deletedFilter: Prisma.DocumentWhereInput = {
     AND: {
       OR: [
         {
           userId: user.id,
-          deletedAt: null,
+          deletedAt: deletedDateRange,
         },
         {
           recipients: {
             some: {
               email: user.email,
-              documentDeletedAt: null,
+              documentDeletedAt: deletedDateRange,
             },
           },
         },
@@ -162,19 +170,19 @@ export const findDocuments = async ({
           ? [
               {
                 teamId: team.id,
-                deletedAt: null,
+                deletedAt: deletedDateRange,
               },
               {
                 user: {
                   email: team.teamEmail.email,
                 },
-                deletedAt: null,
+                deletedAt: deletedDateRange,
               },
               {
                 recipients: {
                   some: {
                     email: team.teamEmail.email,
-                    documentDeletedAt: null,
+                    documentDeletedAt: deletedDateRange,
                   },
                 },
               },
@@ -182,7 +190,7 @@ export const findDocuments = async ({
           : [
               {
                 teamId: team.id,
-                deletedAt: null,
+                deletedAt: deletedDateRange,
               },
             ],
       },
@@ -297,6 +305,14 @@ const findDocumentsFilter = (status: ExtendedDocumentStatus, user: User) => {
             },
           },
         },
+        {
+          status: ExtendedDocumentStatus.REJECTED,
+          recipients: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
       ],
     }))
     .with(ExtendedDocumentStatus.INBOX, () => ({
@@ -368,7 +384,24 @@ const findDocumentsFilter = (status: ExtendedDocumentStatus, user: User) => {
           recipients: {
             some: {
               email: user.email,
-              signingStatus: SigningStatus.REJECTED,
+            },
+          },
+        },
+      ],
+    }))
+    .with(ExtendedDocumentStatus.DELETED, () => ({
+      OR: [
+        {
+          userId: user.id,
+          deletedAt: {
+            gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+            not: null,
+          },
+        },
+        {
+          recipients: {
+            some: {
+              email: user.email,
             },
           },
         },
@@ -410,7 +443,7 @@ const findTeamDocumentsFilter = (
   status: ExtendedDocumentStatus,
   team: Team & { teamEmail: TeamEmail | null },
   visibilityFilters: Prisma.DocumentWhereInput[],
-) => {
+): Prisma.DocumentWhereInput | null => {
   const teamEmail = team.teamEmail?.email ?? null;
 
   return match<ExtendedDocumentStatus, Prisma.DocumentWhereInput | null>(status)
@@ -599,5 +632,32 @@ const findTeamDocumentsFilter = (
 
       return filter;
     })
+    .with(ExtendedDocumentStatus.DELETED, () => {
+      return {
+        OR: teamEmail
+          ? [
+              {
+                teamId: team.id,
+              },
+              {
+                user: {
+                  email: teamEmail,
+                },
+              },
+              {
+                recipients: {
+                  some: {
+                    email: teamEmail,
+                  },
+                },
+              },
+            ]
+          : [
+              {
+                teamId: team.id,
+              },
+            ],
+      };
+    })
     .exhaustive();
 };

packages/lib/server-only/document/get-stats.ts

@@ -1,7 +1,5 @@
-import { TeamMemberRole } from '@prisma/client';
 import type { Prisma, User } from '@prisma/client';
-import { SigningStatus } from '@prisma/client';
-import { DocumentVisibility } from '@prisma/client';
+import { DocumentVisibility, SigningStatus, TeamMemberRole } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { match } from 'ts-pattern';
 
@@ -17,7 +15,7 @@ export type GetStatsInput = {
   search?: string;
 };
 
-export const getStats = async ({ user, period, search = '', ...options }: GetStatsInput) => {
+export const getStats = async ({ user, period, search, ...options }: GetStatsInput) => {
   let createdAt: Prisma.DocumentWhereInput['createdAt'];
 
   if (period) {
@@ -30,7 +28,7 @@ export const getStats = async ({ user, period, search = '', ...options }: GetSta
     };
   }
 
-  const [ownerCounts, notSignedCounts, hasSignedCounts] = await (options.team
+  const [ownerCounts, notSignedCounts, hasSignedCounts, deletedCounts] = await (options.team
     ? getTeamCounts({
         ...options.team,
         createdAt,
@@ -45,6 +43,7 @@ export const getStats = async ({ user, period, search = '', ...options }: GetSta
     [ExtendedDocumentStatus.PENDING]: 0,
     [ExtendedDocumentStatus.COMPLETED]: 0,
     [ExtendedDocumentStatus.REJECTED]: 0,
+    [ExtendedDocumentStatus.DELETED]: 0,
     [ExtendedDocumentStatus.INBOX]: 0,
     [ExtendedDocumentStatus.ALL]: 0,
   };
@@ -71,6 +70,8 @@ export const getStats = async ({ user, period, search = '', ...options }: GetSta
     }
   });
 
+  stats[ExtendedDocumentStatus.DELETED] = deletedCounts || 0;
+
   Object.keys(stats).forEach((key) => {
     if (key !== ExtendedDocumentStatus.ALL && isExtendedDocumentStatus(key)) {
       stats[ExtendedDocumentStatus.ALL] += stats[key];
@@ -167,6 +168,32 @@ const getCounts = async ({ user, createdAt, search }: GetCountsOption) => {
         AND: [searchFilter],
       },
     }),
+    // Deleted count
+    prisma.document.count({
+      where: {
+        OR: [
+          {
+            userId: user.id,
+            deletedAt: {
+              gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+              not: null,
+            },
+          },
+          {
+            recipients: {
+              some: {
+                email: user.email,
+                documentDeletedAt: {
+                  gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+                  not: null,
+                },
+              },
+            },
+          },
+        ],
+        AND: [searchFilter],
+      },
+    }),
   ]);
 };
 
@@ -336,5 +363,40 @@ const getTeamCounts = async (options: GetTeamCountsOption) => {
     }),
     notSignedCountsGroupByArgs ? prisma.document.groupBy(notSignedCountsGroupByArgs) : [],
     hasSignedCountsGroupByArgs ? prisma.document.groupBy(hasSignedCountsGroupByArgs) : [],
+    prisma.document.count({
+      where: {
+        OR: [
+          {
+            teamId,
+            userId: userIdWhereClause,
+            deletedAt: {
+              gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+              not: null,
+            },
+          },
+          {
+            user: {
+              email: teamEmail,
+            },
+            deletedAt: {
+              gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+              not: null,
+            },
+          },
+          {
+            recipients: {
+              some: {
+                email: teamEmail,
+                documentDeletedAt: {
+                  gte: DateTime.now().minus({ days: 30 }).toJSDate(),
+                  not: null,
+                },
+              },
+            },
+          },
+        ],
+        AND: [searchFilter],
+      },
+    }),
   ]);
 };

packages/lib/server-only/document/restore-document.ts

@@ -0,0 +1,108 @@
+import { WebhookTriggerEvents } from '@prisma/client';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { triggerWebhook } from '@documenso/lib/server-only/webhooks/trigger/trigger-webhook';
+import {
+  ZWebhookDocumentSchema,
+  mapDocumentToWebhookDocumentPayload,
+} from '@documenso/lib/types/webhook-payload';
+import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
+import { prisma } from '@documenso/prisma';
+
+export type RestoreDocumentOptions = {
+  id: number;
+  userId: number;
+  teamId?: number;
+  requestMetadata: ApiRequestMetadata;
+};
+
+export const restoreDocument = async ({
+  id,
+  userId,
+  teamId,
+  requestMetadata,
+}: RestoreDocumentOptions) => {
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  });
+
+  if (!user) {
+    throw new AppError(AppErrorCode.NOT_FOUND, {
+      message: 'User not found',
+    });
+  }
+
+  const document = await prisma.document.findUnique({
+    where: {
+      id,
+    },
+    include: {
+      recipients: true,
+      documentMeta: true,
+      team: {
+        include: {
+          members: true,
+        },
+      },
+    },
+  });
+
+  if (!document || (teamId !== undefined && teamId !== document.teamId)) {
+    throw new AppError(AppErrorCode.NOT_FOUND, {
+      message: 'Document not found',
+    });
+  }
+
+  const isUserOwner = document.userId === userId;
+  const isUserTeamMember = document.team?.members.some((member) => member.userId === userId);
+
+  if (!isUserOwner && !isUserTeamMember) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Not allowed to restore this document',
+    });
+  }
+
+  const restoredDocument = await prisma.$transaction(async (tx) => {
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        documentId: document.id,
+        type: 'DOCUMENT_RESTORED',
+        metadata: requestMetadata,
+        data: {},
+      }),
+    });
+
+    return await tx.document.update({
+      where: {
+        id: document.id,
+      },
+      data: {
+        deletedAt: null,
+      },
+    });
+  });
+
+  await prisma.recipient.updateMany({
+    where: {
+      documentId: document.id,
+      documentDeletedAt: {
+        not: null,
+      },
+    },
+    data: {
+      documentDeletedAt: null,
+    },
+  });
+
+  await triggerWebhook({
+    event: WebhookTriggerEvents.DOCUMENT_RESTORED,
+    data: ZWebhookDocumentSchema.parse(mapDocumentToWebhookDocumentPayload(document)),
+    userId,
+    teamId,
+  });
+
+  return restoredDocument;
+};

packages/lib/server-only/embedding-presign/create-embedding-presign-token.ts

@@ -0,0 +1,63 @@
+import { SignJWT } from 'jose';
+import { DateTime } from 'luxon';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { env } from '../../utils/env';
+import { getApiTokenByToken } from '../public-api/get-api-token-by-token';
+
+export type CreateEmbeddingPresignTokenOptions = {
+  apiToken: string;
+  /**
+   * Number of hours until the token expires
+   * In development mode, can be set to 0 to create a token that expires immediately (for testing)
+   */
+  expiresIn?: number;
+};
+
+export const createEmbeddingPresignToken = async ({
+  apiToken,
+  expiresIn,
+}: CreateEmbeddingPresignTokenOptions) => {
+  try {
+    // Validate the API token
+    const validatedToken = await getApiTokenByToken({ token: apiToken });
+
+    const now = DateTime.now();
+
+    // In development mode, allow setting expiresIn to 0 for testing
+    // In production, enforce a minimum expiration time
+    const isDevelopment = env('NODE_ENV') !== 'production';
+    console.log('isDevelopment', isDevelopment);
+    const minExpirationMinutes = isDevelopment ? 0 : 5;
+
+    // Ensure expiresIn is at least the minimum allowed value
+    const effectiveExpiresIn =
+      expiresIn !== undefined && expiresIn >= minExpirationMinutes ? expiresIn : 60; // Default to 1 hour if not specified or below minimum
+
+    const expiresAt = now.plus({ minutes: effectiveExpiresIn });
+
+    const secret = new TextEncoder().encode(validatedToken.token);
+
+    const token = await new SignJWT({
+      aud: String(validatedToken.teamId ?? validatedToken.userId),
+      sub: String(validatedToken.id),
+    })
+      .setProtectedHeader({ alg: 'HS256' })
+      .setIssuedAt(now.toJSDate())
+      .setExpirationTime(expiresAt.toJSDate())
+      .sign(secret);
+
+    return {
+      token,
+      expiresAt: expiresAt.toJSDate(),
+      expiresIn: Math.floor(expiresAt.diff(now).toMillis() / 1000),
+    };
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error;
+    }
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
+      message: 'Failed to create presign token',
+    });
+  }
+};

packages/lib/server-only/embedding-presign/verify-embedding-presign-token.ts

@@ -0,0 +1,115 @@
+import type { JWTPayload } from 'jose';
+import { decodeJwt, jwtVerify } from 'jose';
+
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type VerifyEmbeddingPresignTokenOptions = {
+  token: string;
+};
+
+export const verifyEmbeddingPresignToken = async ({
+  token,
+}: VerifyEmbeddingPresignTokenOptions) => {
+  // First decode the JWT to get the claims without verification
+  let decodedToken: JWTPayload;
+
+  try {
+    decodedToken = decodeJwt<JWTPayload>(token);
+  } catch (error) {
+    console.error('Error decoding JWT token:', error);
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid presign token format',
+    });
+  }
+
+  // Validate the required claims
+  if (!decodedToken.sub || typeof decodedToken.sub !== 'string') {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid presign token format: missing or invalid subject claim',
+    });
+  }
+
+  if (!decodedToken.aud || typeof decodedToken.aud !== 'string') {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid presign token format: missing or invalid audience claim',
+    });
+  }
+
+  // Convert string IDs to numbers
+  const tokenId = Number(decodedToken.sub);
+  const audienceId = Number(decodedToken.aud);
+
+  if (Number.isNaN(tokenId) || !Number.isInteger(tokenId)) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid token ID format in subject claim',
+    });
+  }
+
+  if (Number.isNaN(audienceId) || !Number.isInteger(audienceId)) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid user ID format in audience claim',
+    });
+  }
+
+  // Get the API token to use as the verification secret
+  const apiToken = await prisma.apiToken.findFirst({
+    where: {
+      id: tokenId,
+    },
+  });
+
+  if (!apiToken) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid presign token: API token not found',
+    });
+  }
+
+  // This should never happen but we need to narrow types
+  if (!apiToken.userId) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid presign token: API token does not have a user attached',
+    });
+  }
+
+  const userId = apiToken.userId;
+
+  if (audienceId !== apiToken.teamId && audienceId !== apiToken.userId) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Invalid presign token: API token does not match audience',
+    });
+  }
+
+  // Now verify the token with the actual secret
+  const secret = new TextEncoder().encode(apiToken.token);
+
+  try {
+    await jwtVerify(token, secret);
+  } catch (error) {
+    // Check if the token has expired
+    if (error instanceof Error && error.name === 'JWTExpired') {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, {
+        message: 'Presign token has expired',
+      });
+    }
+
+    // Handle invalid signature
+    if (error instanceof Error && error.name === 'JWSInvalid') {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, {
+        message: 'Invalid presign token signature',
+      });
+    }
+
+    // Log and rethrow other errors
+    console.error('Error verifying JWT token:', error);
+    throw new AppError(AppErrorCode.UNAUTHORIZED, {
+      message: 'Failed to verify presign token',
+    });
+  }
+
+  return {
+    ...apiToken,
+    userId,
+  };
+};

packages/lib/server-only/recipient/get-next-pending-recipient.ts

@@ -0,0 +1,37 @@
+import { prisma } from '@documenso/prisma';
+
+export const getNextPendingRecipient = async ({
+  documentId,
+  currentRecipientId,
+}: {
+  documentId: number;
+  currentRecipientId: number;
+}) => {
+  const recipients = await prisma.recipient.findMany({
+    where: {
+      documentId,
+    },
+    orderBy: [
+      {
+        signingOrder: {
+          sort: 'asc',
+          nulls: 'last',
+        },
+      },
+      {
+        id: 'asc',
+      },
+    ],
+  });
+
+  const currentIndex = recipients.findIndex((r) => r.id === currentRecipientId);
+
+  if (currentIndex === -1 || currentIndex === recipients.length - 1) {
+    return null;
+  }
+
+  return {
+    ...recipients[currentIndex + 1],
+    token: '',
+  };
+};

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

@@ -5,6 +5,7 @@ import { z } from 'zod';
 import { createTeamCustomer } from '@documenso/ee/server-only/stripe/create-team-customer';
 import { getTeamRelatedPrices } from '@documenso/ee/server-only/stripe/get-team-related-prices';
 import { mapStripeSubscriptionToPrismaUpsertAction } from '@documenso/ee/server-only/stripe/webhook/on-subscription-updated';
+import { isDocumentPlatform as isUserPlatformPlan } from '@documenso/ee/server-only/util/is-document-platform';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { subscriptionsContainsActivePlan } from '@documenso/lib/utils/billing';
@@ -60,6 +61,11 @@ export const createTeam = async ({
     },
   });
 
+  const isPlatformPlan = await isUserPlatformPlan({
+    userId: user.id,
+    teamId: null,
+  });
+
   let isPaymentRequired = IS_BILLING_ENABLED();
   let customerId: string | null = null;
 
@@ -68,7 +74,25 @@ export const createTeam = async ({
       prices.map((price) => price.id),
     );
 
-    isPaymentRequired = !subscriptionsContainsActivePlan(user.subscriptions, teamRelatedPriceIds);
+    const hasTeamRelatedSubscription = subscriptionsContainsActivePlan(
+      user.subscriptions,
+      teamRelatedPriceIds,
+    );
+
+    if (isPlatformPlan) {
+      // For platform users, check if they already have any teams
+      const existingTeams = await prisma.team.findMany({
+        where: {
+          ownerUserId: userId,
+        },
+      });
+
+      // Payment is required if they already have any team
+      isPaymentRequired = existingTeams.length > 0;
+    } else {
+      // For non-platform users, payment is required if they don't have a team-related subscription
+      isPaymentRequired = !hasTeamRelatedSubscription;
+    }
 
     customerId = await createTeamCustomer({
       name: user.name ?? teamName,

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

@@ -82,6 +82,7 @@ export type CreateDocumentFromTemplateOptions = {
     signingOrder?: DocumentSigningOrder;
     language?: SupportedLanguageCodes;
     distributionMethod?: DocumentDistributionMethod;
+    allowDictateNextSigner?: boolean;
     emailSettings?: TDocumentEmailSettings;
     typedSignatureEnabled?: boolean;
     uploadSignatureEnabled?: boolean;
@@ -410,6 +411,10 @@ export const createDocumentFromTemplate = async ({
               override?.uploadSignatureEnabled ?? template.templateMeta?.uploadSignatureEnabled,
             drawSignatureEnabled:
               override?.drawSignatureEnabled ?? template.templateMeta?.drawSignatureEnabled,
+            allowDictateNextSigner:
+              override?.allowDictateNextSigner ??
+              template.templateMeta?.allowDictateNextSigner ??
+              false,
           },
         },
         recipients: {

packages/lib/types/document-audit-logs.ts

@@ -39,6 +39,7 @@ export const ZDocumentAuditLogTypeSchema = z.enum([
   'DOCUMENT_TITLE_UPDATED', // When the document title is updated.
   'DOCUMENT_EXTERNAL_ID_UPDATED', // When the document external ID is updated.
   'DOCUMENT_MOVED_TO_TEAM', // When the document is moved to a team.
+  'DOCUMENT_RESTORED', // When a deleted document is restored.
 ]);
 
 export const ZDocumentAuditLogEmailTypeSchema = z.enum([
@@ -551,6 +552,14 @@ export const ZDocumentAuditLogEventDocumentMovedToTeamSchema = z.object({
   }),
 });
 
+/**
+ * Event: Document restored.
+ */
+export const ZDocumentAuditLogEventDocumentRestoredSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RESTORED),
+  data: z.object({}),
+});
+
 export const ZDocumentAuditLogBaseSchema = z.object({
   id: z.string(),
   createdAt: z.date(),
@@ -588,6 +597,7 @@ export const ZDocumentAuditLogSchema = ZDocumentAuditLogBaseSchema.and(
     ZDocumentAuditLogEventRecipientAddedSchema,
     ZDocumentAuditLogEventRecipientUpdatedSchema,
     ZDocumentAuditLogEventRecipientRemovedSchema,
+    ZDocumentAuditLogEventDocumentRestoredSchema,
   ]),
 );
 

packages/lib/types/document.ts

@@ -53,6 +53,7 @@ export const ZDocumentSchema = DocumentSchema.pick({
     typedSignatureEnabled: true,
     uploadSignatureEnabled: true,
     drawSignatureEnabled: true,
+    allowDictateNextSigner: true,
     language: true,
     emailSettings: true,
   }).nullable(),