fix: team member invites

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

@@ -0,0 +1,23 @@
+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,8 +26,7 @@ jobs:
       - name: Copy env
         run: cp .env.example .env
 
-      - name: Build app
-        run: npm run build
+      - uses: ./.github/actions/cache-build
 
   build_docker:
     name: Build Docker Image

.github/workflows/clean-cache.yml

@@ -0,0 +1,29 @@
+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-latest
+    runs-on: ubuntu-22.04
     permissions:
       actions: read
       contents: read
@@ -30,8 +30,7 @@ jobs:
 
       - uses: ./.github/actions/node-install
 
-      - name: Build app
-        run: npm run build
+      - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v3

.github/workflows/e2e-tests.yml

@@ -28,11 +28,7 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
-      - name: Build app
-        run: npm run build
-
-      - name: Install playwright browsers
-        run: npx playwright install --with-deps
+      - uses: ./.github/actions/cache-build
 
       - name: Run Playwright tests
         run: npm run ci

.husky/commit-msg

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

.husky/pre-commit

@@ -1,3 +1,6 @@
+#!/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,6 +6,5 @@
   "solid": "Solid Integration",
   "preact": "Preact Integration",
   "angular": "Angular Integration",
-  "css-variables": "CSS Variables",
-  "authoring": "Authoring"
-}
+  "css-variables": "CSS Variables"
+}

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

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

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

@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    primary: '#0000FF',
-    background: '#F5F5F5',
-    radius: '8px',
+    colorPrimary: '#0000FF',
+    colorBackground: '#F5F5F5',
+    borderRadius: '8px',
   }}
 />
 ```
@@ -169,19 +169,6 @@ 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)
@@ -191,4 +178,3 @@ For detailed implementation instructions and code examples, see our [Embedded Au
 - [Preact Integration](/developers/embedding/preact)
 - [Angular Integration](/developers/embedding/angular)
 - [CSS Variables](/developers/embedding/css-variables)
-- [Embedded Authoring](/developers/embedding/authoring)

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

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

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

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

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

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

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

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

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

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

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

@@ -532,93 +532,3 @@ 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,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import NextPlausibleProvider from 'next-plausible';

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

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

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

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

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

@@ -2,8 +2,6 @@ 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')
@@ -36,7 +34,7 @@ export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' =
     ],
   };
 
-  return addZeroMonth(transformedData);
+  return transformedData;
 };
 
 export type GetSignerConversionMonthlyResult = Awaited<

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

@@ -2,8 +2,6 @@ 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')
@@ -34,7 +32,7 @@ export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count
     ],
   };
 
-  return addZeroMonth(transformedData);
+  return transformedData;
 };
 
 export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

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

@@ -1,7 +1,5 @@
 import { DateTime } from 'luxon';
 
-import { addZeroMonth } from './add-zero-month';
-
 type MetricKeys = {
   stars: number;
   forks: number;
@@ -39,77 +37,31 @@ export function transformData({
   data: DataEntry;
   metric: MetricKey;
 }): TransformData {
-  try {
-    if (!data || Object.keys(data).length === 0) {
-      return {
-        labels: [],
-        datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
-      };
-    }
+  const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
+    const [yearA, monthA] = dateA.split('-').map(Number);
+    const [yearB, monthB] = dateB.split('-').map(Number);
 
-    const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
-      try {
-        const [yearA, monthA] = dateA.split('-').map(Number);
-        const [yearB, monthB] = dateB.split('-').map(Number);
+    return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
+  });
 
-        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;
-      }
+  const labels = sortedEntries.map(([date]) => {
+    const [year, month] = date.split('-');
+    const dateTime = DateTime.fromObject({
+      year: Number(year),
+      month: Number(month),
     });
+    return dateTime.toFormat('MMM yyyy');
+  });
 
-    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: [] }],
-    };
-  }
+  return {
+    labels,
+    datasets: [
+      {
+        label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
+        data: sortedEntries.map(([_, stats]) => stats[metric]),
+      },
+    ],
+  };
 }
 
 // To be on the safer side

apps/remix/.bin/build.sh

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

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

@@ -1,9 +1,4 @@
-import { useState } from 'react';
-
-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 {
@@ -14,192 +9,64 @@ 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: (nextSigner?: NextSigner) => void;
+  onConfirm: () => 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 [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
-
-  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>
-        <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>
+        <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="mt-4 flex flex-col gap-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>
+        <div className="flex flex-col gap-4">
+          <DocumentSigningDisclosure />
+        </div>
 
-                        <Button
-                          type="button"
-                          className="mt-2"
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                        >
-                          <Trans>Update Recipient</Trans>
-                        </Button>
-                      </div>
-                    )}
-
-                    {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" />
-              </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>
+        <DialogFooter className="mt-4">
+          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            variant={hasUninsertedFields ? 'destructive' : 'default'}
+            onClick={onConfirm}
+            disabled={isSubmitting}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? 'Submitting...' : hasUninsertedFields ? 'Proceed' : 'Continue'}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

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

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

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button variant="outline">
+          <Button>
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>

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

@@ -1,355 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,393 +0,0 @@
-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

@@ -1,238 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,661 +0,0 @@
-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 { useRecipientColors } from '@documenso/ui/lib/recipient-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 selectedRecipientStyles = useRecipientColors(
-    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]',
-                  selectedRecipientStyles.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

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

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

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

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

@@ -10,6 +10,7 @@ export type EmbedDocumentCompletedPageProps = {
 };
 
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
+  console.log({ signature });
   return (
     <div className="embed--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-2xl font-semibold">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,10 +9,6 @@ import { z } from 'zod';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TTemplate } from '@documenso/lib/types/template';
-import {
-  DocumentReadOnlyFields,
-  mapFieldsWithRecipients,
-} from '@documenso/ui/components/document/document-read-only-fields';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -20,6 +16,7 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import {
   Form,
@@ -100,16 +97,14 @@ export const DirectTemplateConfigureForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded && (
-          <DocumentReadOnlyFields
-            fields={mapFieldsWithRecipients(
-              directTemplateRecipient.fields,
-              recipientsWithBlankDirectRecipientEmail,
-            )}
-            recipientIds={recipients.map((recipient) => recipient.id)}
-            showRecipientColors={true}
-          />
-        )}
+        {isDocumentPdfLoaded &&
+          directTemplateRecipient.fields.map((field, index) => (
+            <ShowFieldItem
+              key={index}
+              field={field}
+              recipients={recipientsWithBlankDirectRecipientEmail}
+            />
+          ))}
 
         <Form {...form}>
           <fieldset

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

@@ -8,7 +8,6 @@ import { useNavigate, useSearchParams } from 'react-router';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TTemplate } from '@documenso/lib/types/template';
-import { isRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
@@ -104,27 +103,17 @@ export const DirectTemplatePageView = ({
         directRecipientEmail: recipient.email,
         templateUpdatedAt: template.updatedAt,
         signedFieldValues: fields.map((field) => {
-          if (isRequiredField(field) && !field.signedValue) {
+          if (!field.signedValue) {
             throw new Error('Invalid configuration');
           }
 
-          return {
-            token: field.signedValue?.token ?? '',
-            fieldId: field.signedValue?.fieldId ?? 0,
-            value: field.signedValue?.value,
-            isBase64: field.signedValue?.isBase64,
-            authOptions: field.signedValue?.authOptions,
-          };
+          return field.signedValue;
         }),
       });
 
       const redirectUrl = template.templateMeta?.redirectUrl;
 
-      if (redirectUrl) {
-        window.location.href = redirectUrl;
-      } else {
-        await navigate(`/sign/${token}/complete`);
-      }
+      await (redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${token}/complete`));
     } catch (err) {
       toast({
         title: _(msg`Something went wrong`),

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient, Signature } from '@prisma/client';
@@ -17,7 +17,6 @@ import {
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import type { TTemplate } from '@documenso/lib/types/template';
-import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
@@ -25,6 +24,7 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
@@ -35,7 +35,7 @@ import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/ty
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useStep } from '@documenso/ui/primitives/stepper';
 
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@@ -73,16 +73,13 @@ export const DirectTemplateSigningForm = ({
   template,
   onSubmit,
 }: DirectTemplateSigningFormProps) => {
-  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
+  const { fullName, signature, signatureValid, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const fieldsRequiringValidation = useMemo(() => {
-    return localFields.filter((field) => isFieldUnsignedAndRequired(field));
-  }, [localFields]);
-
   const { currentStep, totalSteps, previousStep } = useStep();
 
   const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
@@ -94,7 +91,7 @@ export const DirectTemplateSigningForm = ({
 
         const tempField: DirectTemplateLocalField = {
           ...field,
-          customText: value.value ?? '',
+          customText: value.value,
           inserted: true,
           signedValue: value,
         };
@@ -105,8 +102,8 @@ export const DirectTemplateSigningForm = ({
             created: new Date(),
             recipientId: 1,
             fieldId: 1,
-            signatureImageAsBase64: value.value?.startsWith('data:') ? value.value : null,
-            typedSignature: value.value && !value.value.startsWith('data:') ? value.value : null,
+            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
+            typedSignature: value.value.startsWith('data:') ? null : value.value,
           } satisfies Signature;
         }
 
@@ -138,19 +135,25 @@ export const DirectTemplateSigningForm = ({
     );
   };
 
+  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
+
   const uninsertedFields = useMemo(() => {
-    return sortFieldsByPosition(fieldsRequiringValidation);
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
   }, [localFields]);
 
   const fieldsValidated = () => {
     setValidateUninsertedFields(true);
-    validateFieldsInserted(fieldsRequiringValidation);
+    validateFieldsInserted(localFields);
   };
 
   const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
-    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
+    if (hasSignatureField && !signatureValid) {
+      return;
+    }
+
+    const isFieldsValid = validateFieldsInserted(localFields);
 
     if (!isFieldsValid) {
       return;
@@ -167,55 +170,6 @@ export const DirectTemplateSigningForm = ({
     // Do not reset to false since we do a redirect.
   };
 
-  useEffect(() => {
-    const updatedFields = [...localFields];
-
-    localFields.forEach((field) => {
-      const index = updatedFields.findIndex((f) => f.id === field.id);
-      let value = '';
-
-      match(field.type)
-        .with(FieldType.TEXT, () => {
-          const meta = field.fieldMeta ? ZTextFieldMeta.safeParse(field.fieldMeta) : null;
-
-          if (meta?.success) {
-            value = meta.data.text ?? '';
-          }
-        })
-        .with(FieldType.NUMBER, () => {
-          const meta = field.fieldMeta ? ZNumberFieldMeta.safeParse(field.fieldMeta) : null;
-
-          if (meta?.success) {
-            value = meta.data.value ?? '';
-          }
-        })
-        .with(FieldType.DROPDOWN, () => {
-          const meta = field.fieldMeta ? ZDropdownFieldMeta.safeParse(field.fieldMeta) : null;
-
-          if (meta?.success) {
-            value = meta.data.defaultValue ?? '';
-          }
-        });
-
-      if (value) {
-        const signedValue = {
-          token: directRecipient.token,
-          fieldId: field.id,
-          value,
-        };
-
-        updatedFields[index] = {
-          ...field,
-          customText: value,
-          inserted: true,
-          signedValue,
-        };
-      }
-    });
-
-    setLocalFields(updatedFields);
-  }, []);
-
   return (
     <DocumentSigningRecipientProvider recipient={directRecipient}>
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
@@ -237,8 +191,6 @@ export const DirectTemplateSigningForm = ({
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
                   typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
-                  uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
-                  drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -383,15 +335,19 @@ export const DirectTemplateSigningForm = ({
                 <Trans>Signature</Trans>
               </Label>
 
-              <SignaturePadDialog
-                className="mt-2"
-                disabled={isSubmitting}
-                value={signature ?? ''}
-                onChange={(value) => setSignature(value)}
-                typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
-                uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
-                drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
-              />
+              <Card className="mt-2" gradient degrees={-120}>
+                <CardContent className="p-0">
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    defaultValue={signature ?? undefined}
+                    onChange={(value) => {
+                      setSignature(value);
+                    }}
+                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
+                  />
+                </CardContent>
+              </Card>
             </div>
           </div>
         </div>

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

@@ -97,16 +97,6 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      // Do nothing, this should only happen when the user clicks the field, but
-      // misses the checkbox which triggers this callback.
-      if (checkedValues.length === 0) {
-        return;
-      }
-
-      if (!isLengthConditionMet) {
-        return;
-      }
-
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
@@ -204,30 +194,18 @@ export const DocumentSigningCheckboxField = ({
 
       setCheckedValues(updatedValues);
 
-      const removePayload: TRemovedSignedFieldWithTokenMutationSchema = {
+      await removeSignedFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-      };
+      });
 
-      if (onUnsignField) {
-        await onUnsignField(removePayload);
-      } else {
-        await removeSignedFieldWithToken(removePayload);
-      }
-
-      if (updatedValues.length > 0 && shouldAutoSignField) {
-        const signPayload: TSignFieldWithTokenMutationSchema = {
+      if (updatedValues.length > 0) {
+        await signFieldWithToken({
           token: recipient.token,
           fieldId: field.id,
           value: toCheckboxValue(updatedValues),
           isBase64: true,
-        };
-
-        if (onSignField) {
-          await onSignField(signPayload);
-        } else {
-          await signFieldWithToken(signPayload);
-        }
+        });
       }
     } catch (err) {
       console.error(err);
@@ -276,26 +254,21 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div className="z-50 my-0.5 flex flex-col gap-y-1">
+          <div className="z-50 flex flex-col gap-y-2">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
               return (
-                <div key={index} className="flex items-center">
+                <div key={index} className="flex items-center gap-x-1.5">
                   <Checkbox
-                    className="h-3 w-3"
-                    id={`checkbox-${field.id}-${item.id}`}
+                    className="h-4 w-4"
+                    id={`checkbox-${index}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  {!item.value.includes('empty-value-') && item.value && (
-                    <Label
-                      htmlFor={`checkbox-${field.id}-${item.id}`}
-                      className="text-foreground ml-1.5 text-xs font-normal"
-                    >
-                      {item.value}
-                    </Label>
-                  )}
+                  <Label htmlFor={`checkbox-${index}`}>
+                    {item.value.includes('empty-value-') ? '' : item.value}
+                  </Label>
                 </div>
               );
             })}
@@ -304,27 +277,22 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="my-0.5 flex flex-col gap-y-1">
+        <div className="flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
             return (
-              <div key={index} className="flex items-center">
+              <div key={index} className="flex items-center gap-x-1.5">
                 <Checkbox
                   className="h-3 w-3"
-                  id={`checkbox-${field.id}-${item.id}`}
+                  id={`checkbox-${index}`}
                   checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                {!item.value.includes('empty-value-') && item.value && (
-                  <Label
-                    htmlFor={`checkbox-${field.id}-${item.id}`}
-                    className="text-foreground ml-1.5 text-xs font-normal"
-                  >
-                    {item.value}
-                  </Label>
-                )}
+                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                  {item.value.includes('empty-value-') ? '' : item.value}
+                </Label>
               </div>
             );
           })}

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

@@ -1,12 +1,8 @@
 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';
@@ -17,15 +13,6 @@ 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';
 
@@ -34,23 +21,11 @@ export type DocumentSigningCompleteDialogProps = {
   documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
-  onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise<void>;
+  onSignatureComplete: () => 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,
@@ -59,54 +34,19 @@ 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 (form.formState.isSubmitting || !isComplete) {
+    if (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>
@@ -118,196 +58,92 @@ export const DocumentSigningCompleteDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {match({ isComplete, role })
-            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
-            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
-            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
-              <Trans>Mark as viewed</Trans>
-            ))
-            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
-            .exhaustive()}
+          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
-        <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>
+        <DialogTitle>
+          <div className="text-foreground text-xl font-semibold">
+            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
+          </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}
-                          </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}
-                          </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}"
-                          </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}
-                          </span>
-                          ".
-                        </span>
-                        <br /> Are you sure?
-                      </Trans>
-                    </span>
-                  ))}
-              </div>
+        <div className="text-muted-foreground max-w-[50ch]">
+          {role === 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>
+          )}
+          {role === 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>
+          )}
+          {role === 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>
+          )}
+        </div>
 
-              {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>
+        <DocumentSigningDisclosure className="mt-4" />
 
-                      <Button
-                        type="button"
-                        className="mt-2"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setIsEditingNextSigner((prev) => !prev)}
-                      >
-                        <Trans>Update Recipient</Trans>
-                      </Button>
-                    </div>
-                  )}
+        <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>
 
-                  {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="flex-1"
-                    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>
+            <Button
+              type="button"
+              className="flex-1"
+              disabled={!isComplete}
+              loading={isSubmitting}
+              onClick={onSignatureComplete}
+            >
+              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
+            </Button>
+          </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

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

@@ -142,7 +142,7 @@ export const DocumentSigningDateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Date</Trans>
         </p>
       )}
@@ -151,10 +151,12 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-foreground w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                '!text-center': parsedFieldMeta?.textAlign === 'center',
-                '!text-right': parsedFieldMeta?.textAlign === 'right',
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

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

@@ -177,11 +177,15 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
-                  'text-foreground z-10 h-full w-full border-none ring-0 focus:border-none focus:ring-0',
+                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
+                  {
+                    'hover:text-red-300': parsedFieldMeta.required,
+                    'hover:text-yellow-300': !parsedFieldMeta.required,
+                  },
                 )}
               >
                 <SelectValue
@@ -201,7 +205,7 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}

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

@@ -1,6 +1,7 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -13,14 +14,10 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -123,18 +120,34 @@ export const DocumentSigningEmailField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Email</Trans>
-        </DocumentSigningFieldsUninserted>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText}
+          </p>
+        </div>
       )}
     </DocumentSigningFieldContainer>
   );

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

@@ -2,14 +2,12 @@ import React from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { X } from 'lucide-react';
 
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
-import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
@@ -130,70 +128,59 @@ export const DocumentSigningFieldContainer = ({
   };
 
   return (
-    <div className={cn('[container-type:size]')}>
-      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
+    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
+      <FieldRootContainer field={field}>
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
-            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
+            className="absolute inset-0 z-10 h-full w-full rounded-md border"
             onClick={async () => handleInsertField()}
           />
         )}
 
         {readOnlyField && (
           <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
-            <span className="bg-foreground/50 text-background rounded-xl p-2">
+            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
               <Trans>Read only field</Trans>
             </span>
           </button>
         )}
 
+        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button
+                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+                onClick={onRemoveSignedFieldClick}
+              >
+                <Trans>Remove</Trans>
+              </button>
+            </TooltipTrigger>
+
+            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+          </Tooltip>
+        )}
+
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
-            className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
             onClick={() => void onClearCheckBoxValues(type)}
           >
-            <span className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
               <X className="h-4 w-4" />
             </span>
           </button>
         )}
 
-        {type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <button className="absolute inset-0 z-10" onClick={onRemoveSignedFieldClick}></button>
-            </TooltipTrigger>
-
-            <TooltipContent
-              className="border-0 bg-orange-300 fill-orange-300 font-bold text-orange-900"
-              sideOffset={2}
-            >
-              {tooltipText && <p>{tooltipText}</p>}
-
-              <Trans>Remove</Trans>
-              <TooltipArrow />
-            </TooltipContent>
-          </Tooltip>
+        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+            onClick={onRemoveSignedFieldClick}
+          >
+            <Trans>Remove</Trans>
+          </button>
         )}
 
-        {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
-          field.fieldMeta?.label && (
-            <div
-              className={cn(
-                'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
-                {
-                  'bg-foreground/5 border-border border': !field.inserted,
-                },
-                {
-                  'bg-documenso-200 border-primary border': field.inserted,
-                },
-              )}
-            >
-              {field.fieldMeta.label}
-            </div>
-          )}
-
         {children}
       </FieldRootContainer>
     </div>

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

@@ -1,51 +0,0 @@
-import { Loader } from 'lucide-react';
-
-import { cn } from '@documenso/ui/lib/utils';
-
-export const DocumentSigningFieldsLoader = () => {
-  return (
-    <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-      <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-    </div>
-  );
-};
-
-export const DocumentSigningFieldsUninserted = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
-      {children}
-    </p>
-  );
-};
-
-type DocumentSigningFieldsInsertedProps = {
-  children: React.ReactNode;
-
-  /**
-   * The text alignment of the field.
-   *
-   * Defaults to left.
-   */
-  textAlign?: 'left' | 'center' | 'right';
-};
-
-export const DocumentSigningFieldsInserted = ({
-  children,
-  textAlign = 'left',
-}: DocumentSigningFieldsInsertedProps) => {
-  return (
-    <div className="flex h-full w-full items-center">
-      <p
-        className={cn(
-          'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-          {
-            '!text-center': textAlign === 'center',
-            '!text-right': textAlign === 'right',
-          },
-        )}
-      >
-        {children}
-      </p>
-    </div>
-  );
-};

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

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

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

@@ -1,12 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { ZInitialsFieldMeta } from '@documenso/lib/types/field-meta';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -17,11 +17,6 @@ import type {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -55,9 +50,6 @@ export const DocumentSigningInitialsField = ({
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
-  const safeFieldMeta = ZInitialsFieldMeta.safeParse(field.fieldMeta);
-  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
-
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = initials ?? '';
@@ -130,18 +122,22 @@ export const DocumentSigningInitialsField = ({
       onRemove={onRemove}
       type="Initials"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Initials</Trans>
-        </DocumentSigningFieldsUninserted>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
-        </DocumentSigningFieldsInserted>
+        </p>
       )}
     </DocumentSigningFieldContainer>
   );

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -15,6 +16,7 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -23,11 +25,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -169,18 +166,34 @@ export const DocumentSigningNameField = ({
       onRemove={onRemove}
       type="Name"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
           <Trans>Name</Trans>
-        </DocumentSigningFieldsUninserted>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText}
+          </p>
+        </div>
       )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
@@ -189,7 +202,7 @@ export const DocumentSigningNameField = ({
             <Trans>
               Sign as
               <div>
-                {recipient.name} <div className="text-foreground">({recipient.email})</div>
+                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
               </div>
             </Trans>
           </DialogTitle>
@@ -211,7 +224,7 @@ export const DocumentSigningNameField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="flex-1"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
                   setShowFullNameModal(false);

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { Hash, Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@@ -24,11 +25,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type ValidationErrors = {
@@ -249,16 +245,45 @@ export const DocumentSigningNumberField = ({
       onRemove={onRemove}
       type="Number"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>{fieldDisplayName}</DocumentSigningFieldsUninserted>
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
+          </span>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText}
+          </p>
+        </div>
       )}
 
       <Dialog open={showNumberModal} onOpenChange={setShowNumberModal}>
@@ -314,7 +339,7 @@ export const DocumentSigningNumberField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="flex-1"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
                   setShowNumberModal(false);

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

@@ -19,7 +19,6 @@ import {
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -37,12 +36,13 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
-export type DocumentSigningPageViewProps = {
-  recipient: RecipientWithFields;
+export type SigningPageViewProps = {
   document: DocumentAndSender;
+  recipient: RecipientWithFields;
   fields: Field[];
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
@@ -50,13 +50,13 @@ export type DocumentSigningPageViewProps = {
 };
 
 export const DocumentSigningPageView = ({
-  recipient,
   document,
+  recipient,
   fields,
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
-}: DocumentSigningPageViewProps) => {
+}: SigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
@@ -157,11 +157,7 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields
-          documentMeta={documentMeta || undefined}
-          fields={completedFields}
-          showRecipientTooltip={true}
-        />
+        <DocumentReadOnlyFields fields={completedFields} />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
@@ -181,8 +177,6 @@ export const DocumentSigningPageView = ({
                     key={field.id}
                     field={field}
                     typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
-                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
-                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
                   />
                 ))
                 .with(FieldType.INITIALS, () => (

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

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

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -20,7 +21,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import { DocumentSigningFieldsLoader } from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningRadioFieldProps = {
@@ -150,52 +150,44 @@ export const DocumentSigningRadioField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <RadioGroup
-          onValueChange={(value) => handleSelectItem(value)}
-          className="z-10 my-0.5 gap-y-1"
-        >
+        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center">
+            <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
-                className="h-3 w-3 shrink-0"
+                className="h-4 w-4 shrink-0"
                 value={item.value}
-                id={`option-${field.id}-${item.id}`}
+                id={`option-${index}`}
                 checked={item.checked}
               />
-              {!item.value.includes('empty-value-') && item.value && (
-                <Label
-                  htmlFor={`option-${field.id}-${item.id}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
-                >
-                  {item.value}
-                </Label>
-              )}
+
+              <Label htmlFor={`option-${index}`}>
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
             </div>
           ))}
         </RadioGroup>
       )}
 
       {field.inserted && (
-        <RadioGroup className="my-0.5 gap-y-1">
+        <RadioGroup className="gap-y-1">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center">
+            <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
                 className="h-3 w-3"
                 value={item.value}
-                id={`option-${field.id}-${item.id}`}
+                id={`option-${index}`}
                 checked={item.value === field.customText}
               />
-              {!item.value.includes('empty-value-') && item.value && (
-                <Label
-                  htmlFor={`option-${field.id}-${item.id}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
-                >
-                  {item.value}
-                </Label>
-              )}
+              <Label htmlFor={`option-${index}`} className="text-xs">
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
             </div>
           ))}
         </RadioGroup>

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

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

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

@@ -17,6 +17,7 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -28,14 +29,11 @@ import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
-
 export type DocumentSigningSignatureFieldProps = {
   field: FieldWithSignature;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
   typedSignatureEnabled?: boolean;
-  uploadSignatureEnabled?: boolean;
-  drawSignatureEnabled?: boolean;
 };
 
 export const DocumentSigningSignatureField = ({
@@ -43,8 +41,6 @@ export const DocumentSigningSignatureField = ({
   onSignField,
   onUnsignField,
   typedSignatureEnabled,
-  uploadSignatureEnabled,
-  drawSignatureEnabled,
 }: DocumentSigningSignatureFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -56,8 +52,12 @@ export const DocumentSigningSignatureField = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [fontSize, setFontSize] = useState(2);
 
-  const { signature: providedSignature, setSignature: setProvidedSignature } =
-    useRequiredDocumentSigningContext();
+  const {
+    signature: providedSignature,
+    setSignature: setProvidedSignature,
+    signatureValid,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
@@ -89,7 +89,7 @@ export const DocumentSigningSignatureField = ({
   }, [field.inserted, signature?.signatureImageAsBase64]);
 
   const onPreSign = () => {
-    if (!providedSignature) {
+    if (!providedSignature || !signatureValid) {
       setShowSignatureModal(true);
       return false;
     }
@@ -102,7 +102,6 @@ export const DocumentSigningSignatureField = ({
   const onDialogSignClick = () => {
     setShowSignatureModal(false);
     setProvidedSignature(localSignature);
-
     if (!localSignature) {
       return;
     }
@@ -117,14 +116,14 @@ export const DocumentSigningSignatureField = ({
     try {
       const value = signature || providedSignature;
 
-      if (!value) {
+      if (!value || (signature && !signatureValid)) {
         setShowSignatureModal(true);
         return;
       }
 
       const isTypedSignature = !value.startsWith('data:image');
 
-      if (isTypedSignature && typedSignatureEnabled === false) {
+      if (isTypedSignature && !typedSignatureEnabled) {
         toast({
           title: _(msg`Error`),
           description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
@@ -242,7 +241,7 @@ export const DocumentSigningSignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground group-hover:text-recipient-green text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200">
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
           <Trans>Signature</Trans>
         </p>
       )}
@@ -259,7 +258,7 @@ export const DocumentSigningSignatureField = ({
         <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
           <p
             ref={signatureRef}
-            className="font-signature text-muted-foreground w-full overflow-hidden break-all text-center leading-tight duration-200"
+            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
             style={{ fontSize: `${fontSize}rem` }}
           >
             {signature?.typedSignature}
@@ -276,14 +275,29 @@ export const DocumentSigningSignatureField = ({
             </Trans>
           </DialogTitle>
 
-          <SignaturePad
-            className="mt-2"
-            value={localSignature ?? ''}
-            onChange={({ value }) => setLocalSignature(value)}
-            typedSignatureEnabled={typedSignatureEnabled}
-            uploadSignatureEnabled={uploadSignatureEnabled}
-            drawSignatureEnabled={drawSignatureEnabled}
-          />
+          <div className="">
+            <Label htmlFor="signature">
+              <Trans>Signature</Trans>
+            </Label>
+
+            <div className="border-border mt-2 rounded-md border">
+              <SignaturePad
+                id="signature"
+                className="h-44 w-full"
+                onChange={(value) => setLocalSignature(value)}
+                allowTypedSignature={typedSignatureEnabled}
+                onValidityChange={(isValid) => {
+                  setSignatureValid(isValid);
+                }}
+              />
+            </div>
+
+            {!signatureValid && (
+              <div className="text-destructive mt-2 text-sm">
+                <Trans>Signature is too small. Please provide a more complete signature.</Trans>
+              </div>
+            )}
+          </div>
 
           <DocumentSigningDisclosure />
 
@@ -291,7 +305,7 @@ export const DocumentSigningSignatureField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="flex-1"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 onClick={() => {
                   setShowSignatureModal(false);
@@ -303,7 +317,7 @@ export const DocumentSigningSignatureField = ({
               <Button
                 type="button"
                 className="flex-1"
-                disabled={!localSignature}
+                disabled={!localSignature || !signatureValid}
                 onClick={() => onDialogSignClick()}
               >
                 <Trans>Sign</Trans>

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
+import { Loader, Type } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
@@ -24,11 +25,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
-import {
-  DocumentSigningFieldsInserted,
-  DocumentSigningFieldsLoader,
-  DocumentSigningFieldsUninserted,
-} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningTextFieldProps = {
@@ -252,20 +248,49 @@ export const DocumentSigningTextField = ({
       onRemove={onRemove}
       type="Text"
     >
-      {isLoading && <DocumentSigningFieldsLoader />}
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
 
       {!field.inserted && (
-        <DocumentSigningFieldsUninserted>
-          {fieldDisplayName || <Trans>Text</Trans>}
-        </DocumentSigningFieldsUninserted>
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+              {fieldDisplayName || <Trans>Text</Trans>}
+            </span>
+          </span>
+        </p>
       )}
 
       {field.inserted && (
-        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText.length < 20
-            ? field.customText
-            : field.customText.substring(0, 20) + '...'}
-        </DocumentSigningFieldsInserted>
+        <div className="flex h-full w-full items-center">
+          <p
+            className={cn(
+              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              {
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-right': parsedFieldMeta?.textAlign === 'right',
+              },
+            )}
+          >
+            {field.customText.length < 20
+              ? field.customText
+              : field.customText.substring(0, 20) + '...'}
+          </p>
+        </div>
       )}
 
       <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
@@ -279,9 +304,11 @@ export const DocumentSigningTextField = ({
               id="custom-text"
               placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
               className={cn('mt-2 w-full rounded-md', {
-                'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
                   userInputHasErrors,
-                'text-center': parsedFieldMeta?.textAlign === 'center',
+                'text-left': parsedFieldMeta?.textAlign === 'left',
+                'text-center':
+                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
                 'text-right': parsedFieldMeta?.textAlign === 'right',
               })}
               value={localText}
@@ -327,8 +354,8 @@ export const DocumentSigningTextField = ({
             <div className="mt-4 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"
-                className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
                   setLocalCustomText('');

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta } from '@prisma/client';
+import { FieldType, SigningStatus } from '@prisma/client';
+import { Clock, EyeOffIcon } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: DocumentField[];
+  documentMeta?: DocumentMeta;
+  showFieldStatus?: boolean;
+};
+
+export const DocumentReadOnlyFields = ({
+  documentMeta,
+  fields,
+  showFieldStatus = true,
+}: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              cardClassName="border-gray-300/50 !shadow-none backdrop-blur-[1px] bg-gray-50 ring-0 ring-offset-0"
+            >
+              <div className="absolute -right-3 -top-3">
+                <PopoverHover
+                  trigger={
+                    <Avatar className="dark:border-foreground h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                        {extractInitials(field.recipient.name || field.recipient.email)}
+                      </AvatarFallback>
+                    </Avatar>
+                  }
+                  contentProps={{
+                    className: 'relative flex w-fit flex-col p-4 text-sm',
+                  }}
+                >
+                  {showFieldStatus && (
+                    <Badge
+                      className="mx-auto mb-1 py-0.5"
+                      variant={
+                        field.recipient.signingStatus === SigningStatus.SIGNED
+                          ? 'default'
+                          : 'secondary'
+                      }
+                    >
+                      {field.recipient.signingStatus === SigningStatus.SIGNED ? (
+                        <>
+                          <SignatureIcon className="mr-1 h-3 w-3" />
+                          <Trans>Signed</Trans>
+                        </>
+                      ) : (
+                        <>
+                          <Clock className="mr-1 h-3 w-3" />
+                          <Trans>Pending</Trans>
+                        </>
+                      )}
+                    </Badge>
+                  )}
+
+                  <p className="text-center font-semibold">
+                    <span>{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field</span>
+                  </p>
+
+                  <p className="text-muted-foreground mt-1 text-center text-xs">
+                    {field.recipient.name
+                      ? `${field.recipient.name} (${field.recipient.email})`
+                      : field.recipient.email}{' '}
+                  </p>
+
+                  <button
+                    className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
+                    onClick={() => handleHideField(field.secondaryId)}
+                    title="Hide field"
+                  >
+                    <EyeOffIcon className="h-3 w-3" />
+                  </button>
+                </PopoverHover>
+              </div>
+
+              <div className="text-muted-foreground dark:text-background/70 break-all text-sm">
+                {field.recipient.signingStatus === SigningStatus.SIGNED &&
+                  match(field)
+                    .with({ type: FieldType.SIGNATURE }, (field) =>
+                      field.signature?.signatureImageAsBase64 ? (
+                        <img
+                          src={field.signature.signatureImageAsBase64}
+                          alt="Signature"
+                          className="h-full w-full object-contain dark:invert"
+                        />
+                      ) : (
+                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl">
+                          {field.signature?.typedSignature}
+                        </p>
+                      ),
+                    )
+                    .with(
+                      {
+                        type: P.union(
+                          FieldType.NAME,
+                          FieldType.INITIALS,
+                          FieldType.EMAIL,
+                          FieldType.NUMBER,
+                          FieldType.RADIO,
+                          FieldType.CHECKBOX,
+                          FieldType.DROPDOWN,
+                        ),
+                      },
+                      () => field.customText,
+                    )
+                    .with({ type: FieldType.TEXT }, () => field.customText.substring(0, 20) + '...')
+                    .with({ type: FieldType.DATE }, () =>
+                      convertToLocalSystemFormat(
+                        field.customText,
+                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+                      ),
+                    )
+                    .with({ type: FieldType.FREE_SIGNATURE }, () => null)
+                    .exhaustive()}
+
+                {field.recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                  <p
+                    className={cn('text-muted-foreground text-lg duration-200', {
+                      'font-signature sm:text-xl md:text-2xl':
+                        field.type === FieldType.SIGNATURE ||
+                        field.type === FieldType.FREE_SIGNATURE,
+                    })}
+                  >
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
+                  </p>
+                )}
+              </div>
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};

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

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

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

apps/remix/app/components/general/legacy-field-warning-popover.tsx

@@ -1,112 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { AlertCircle } from 'lucide-react';
-import { useRevalidator } from 'react-router';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { PopoverHover } from '@documenso/ui/primitives/popover';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type LegacyFieldWarningPopoverProps = {
-  type?: 'document' | 'template';
-  documentId?: number;
-  templateId?: number;
-};
-
-export const LegacyFieldWarningPopover = ({
-  type = 'document',
-  documentId,
-  templateId,
-}: LegacyFieldWarningPopoverProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const revalidator = useRevalidator();
-
-  const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
-    trpc.template.updateTemplate.useMutation();
-  const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
-    trpc.document.updateDocument.useMutation();
-
-  const onUpdateFieldsClick = async () => {
-    if (type === 'document') {
-      if (!documentId) {
-        return;
-      }
-
-      await updateDocument({
-        documentId,
-        data: {
-          useLegacyFieldInsertion: false,
-        },
-      });
-    }
-
-    if (type === 'template') {
-      if (!templateId) {
-        return;
-      }
-
-      await updateTemplate({
-        templateId,
-        data: {
-          useLegacyFieldInsertion: false,
-        },
-      });
-    }
-
-    void revalidator.revalidate();
-
-    toast({
-      title: _(msg`Fields updated`),
-      description: _(
-        msg`The fields have been updated to the new field insertion method successfully`,
-      ),
-    });
-  };
-
-  return (
-    <PopoverHover
-      side="bottom"
-      trigger={
-        <Button variant="outline" className="h-9 w-9 p-0">
-          <span className="sr-only">
-            {type === 'document' ? (
-              <Trans>Document is using legacy field insertion</Trans>
-            ) : (
-              <Trans>Template is using legacy field insertion</Trans>
-            )}
-          </span>
-          <AlertCircle className="h-5 w-5" />
-        </Button>
-      }
-    >
-      <p className="text-muted-foreground text-sm">
-        {type === 'document' ? (
-          <Trans>
-            This document is using legacy field insertion, we recommend using the new field
-            insertion method for more accurate results.
-          </Trans>
-        ) : (
-          <Trans>
-            This template is using legacy field insertion, we recommend using the new field
-            insertion method for more accurate results.
-          </Trans>
-        )}
-      </p>
-
-      <div className="mt-2 flex w-full items-center justify-end">
-        <Button
-          type="button"
-          size="sm"
-          loading={isUpdatingDocument || isUpdatingTemplate}
-          onClick={onUpdateFieldsClick}
-        >
-          <Trans>Update Fields</Trans>
-        </Button>
-      </div>
-    </PopoverHover>
-  );
-};

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

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

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

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

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

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

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

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

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

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

apps/remix/app/root.tsx

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

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

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

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

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

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

@@ -13,7 +13,6 @@ import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/g
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -25,6 +24,7 @@ import { DocumentPageViewDropdown } from '~/components/general/document/document
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import {
   DocumentStatus as DocumentStatusComponent,
@@ -200,14 +200,8 @@ export default function DocumentPage() {
           </CardContent>
         </Card>
 
-        {document.status !== DocumentStatus.COMPLETED && (
-          <DocumentReadOnlyFields
-            fields={fields}
-            documentMeta={documentMeta || undefined}
-            showRecipientTooltip={true}
-            showRecipientColors={true}
-            recipientIds={recipients.map((recipient) => recipient.id)}
-          />
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
         )}
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
@@ -226,9 +220,6 @@ export default function DocumentPage() {
                   .with(DocumentStatus.COMPLETED, () => (
                     <Trans>This document has been signed by all recipients</Trans>
                   ))
-                  .with(DocumentStatus.REJECTED, () => (
-                    <Trans>This document has been rejected by a recipient</Trans>
-                  ))
                   .with(DocumentStatus.DRAFT, () => (
                     <Trans>This document is currently a draft and has not been sent</Trans>
                   ))

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

@@ -1,5 +1,5 @@
 import { Plural, Trans } from '@lingui/react/macro';
-import { TeamMemberRole } from '@prisma/client';
+import { DocumentStatus as InternalDocumentStatus, TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
 import { match } from 'ts-pattern';
@@ -9,12 +9,10 @@ import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-ent
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
 import { DocumentStatus } from '~/components/general/document/document-status';
-import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
@@ -73,7 +71,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  if (isDocumentCompleted(document.status)) {
+  if (document.status === InternalDocumentStatus.COMPLETED) {
     throw redirect(`${documentRootPath}/${documentId}`);
   }
 
@@ -101,43 +99,29 @@ export default function DocumentEditPage() {
         <Trans>Documents</Trans>
       </Link>
 
-      <div className="mt-4 flex w-full items-end justify-between">
-        <div className="flex-1">
-          <h1
-            className="block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-            title={document.title}
-          >
-            {document.title}
-          </h1>
+      <h1
+        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+        title={document.title}
+      >
+        {document.title}
+      </h1>
 
-          <div className="mt-2.5 flex items-center gap-x-6">
-            <DocumentStatus
-              inheritColor
-              status={document.status}
-              className="text-muted-foreground"
-            />
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
 
-            {recipients.length > 0 && (
-              <div className="text-muted-foreground flex items-center">
-                <Users2 className="mr-2 h-5 w-5" />
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
 
-                <StackAvatarsWithTooltip
-                  recipients={recipients}
-                  documentStatus={document.status}
-                  position="bottom"
-                >
-                  <span>
-                    <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
-                  </span>
-                </StackAvatarsWithTooltip>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {document.useLegacyFieldInsertion && (
-          <div>
-            <LegacyFieldWarningPopover type="document" documentId={document.id} />
+            <StackAvatarsWithTooltip
+              recipients={recipients}
+              documentStatus={document.status}
+              position="bottom"
+            >
+              <span>
+                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+              </span>
+            </StackAvatarsWithTooltip>
           </div>
         )}
       </div>

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

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

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

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

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

@@ -7,7 +7,6 @@ import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -15,6 +14,7 @@ import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
 import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
 import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
@@ -151,9 +151,6 @@ export default function TemplatePage() {
         <DocumentReadOnlyFields
           fields={readOnlyFields}
           showFieldStatus={false}
-          showRecipientTooltip={true}
-          showRecipientColors={true}
-          recipientIds={recipients.map((recipient) => recipient.id)}
           documentMeta={mockedDocumentMeta}
         />
 

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

@@ -8,7 +8,6 @@ import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 
-import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplateEditForm } from '~/components/general/template/template-edit-form';
 import { TemplateType } from '~/components/general/template/template-type';
@@ -92,14 +91,8 @@ export default function TemplateEditPage() {
           </div>
         </div>
 
-        <div className="mt-2 flex items-center gap-2 sm:mt-0 sm:self-end">
+        <div className="mt-2 sm:mt-0 sm:self-end">
           <TemplateDirectLinkDialogWrapper template={template} />
-
-          {template.useLegacyFieldInsertion && (
-            <div>
-              <LegacyFieldWarningPopover type="template" templateId={template.id} />
-            </div>
-          )}
         </div>
       </div>
 

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

@@ -1,12 +1,11 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { FieldType, SigningStatus } from '@prisma/client';
+import { FieldType } from '@prisma/client';
 import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 
-import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
@@ -60,8 +59,6 @@ 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({
@@ -73,7 +70,6 @@ export async function loader({ request }: Route.LoaderArgs) {
   return {
     document,
     documentLanguage,
-    isPlatformDocument,
     auditLogs,
     messages,
   };
@@ -89,7 +85,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, isPlatformDocument, auditLogs, messages } = loaderData;
+  const { document, documentLanguage, auditLogs, messages } = loaderData;
 
   const { i18n, _ } = useLingui();
 
@@ -163,13 +159,6 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
           log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED &&
           log.data.recipientId === recipientId,
       ),
-      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED]: auditLogs[
-        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED
-      ].filter(
-        (log) =>
-          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED &&
-          log.data.recipientId === recipientId,
-      ),
     };
   };
 
@@ -249,24 +238,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">
@@ -293,42 +282,25 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
                           </span>
                         </p>
 
-                        {logs.DOCUMENT_RECIPIENT_REJECTED[0] ? (
-                          <p className="text-muted-foreground text-sm print:text-xs">
-                            <span className="font-medium">{_(msg`Rejected`)}:</span>{' '}
-                            <span className="inline-block">
-                              {logs.DOCUMENT_RECIPIENT_REJECTED[0]
-                                ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_REJECTED[0].createdAt)
-                                    .setLocale(APP_I18N_OPTIONS.defaultLocale)
-                                    .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
-                                : _(msg`Unknown`)}
-                            </span>
-                          </p>
-                        ) : (
-                          <p className="text-muted-foreground text-sm print:text-xs">
-                            <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
-                            <span className="inline-block">
-                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
-                                ? DateTime.fromJSDate(
-                                    logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt,
-                                  )
-                                    .setLocale(APP_I18N_OPTIONS.defaultLocale)
-                                    .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
-                                : _(msg`Unknown`)}
-                            </span>
-                          </p>
-                        )}
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
+                          <span className="inline-block">
+                            {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
+                              ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt)
+                                  .setLocale(APP_I18N_OPTIONS.defaultLocale)
+                                  .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+                              : _(msg`Unknown`)}
+                          </span>
+                        </p>
 
                         <p className="text-muted-foreground text-sm print:text-xs">
                           <span className="font-medium">{_(msg`Reason`)}:</span>{' '}
                           <span className="inline-block">
-                            {recipient.signingStatus === SigningStatus.REJECTED
-                              ? recipient.rejectionReason
-                              : _(
-                                  isOwner(recipient.email)
-                                    ? FRIENDLY_SIGNING_REASONS['__OWNER__']
-                                    : FRIENDLY_SIGNING_REASONS[recipient.role],
-                                )}
+                            {_(
+                              isOwner(recipient.email)
+                                ? FRIENDLY_SIGNING_REASONS['__OWNER__']
+                                : FRIENDLY_SIGNING_REASONS[recipient.role],
+                            )}
                           </span>
                         </p>
                       </div>
@@ -341,17 +313,15 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
         </CardContent>
       </Card>
 
-      {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>
+      <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" />
-          </div>
+          <BrandingLogo className="max-h-6 print:max-h-4" />
         </div>
-      )}
+      </div>
     </div>
   );
 }

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/react/macro';
-import { DocumentSigningOrder, DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { 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,7 +13,6 @@ 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';
@@ -73,24 +72,7 @@ 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,
@@ -178,7 +160,7 @@ export default function SigningPage() {
     recipientWithFields,
   } = data;
 
-  if (document.deletedAt || document.status === DocumentStatus.REJECTED) {
+  if (document.deletedAt) {
     return (
       <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
         <SigningCard3D
@@ -233,9 +215,6 @@ export default function SigningPage() {
       email={recipient.email}
       fullName={user?.email === recipient.email ? user?.name : recipient.name}
       signature={user?.email === recipient.email ? user?.signature : undefined}
-      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
-      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
-      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
     >
       <DocumentSigningAuthProvider
         documentAuthOptions={document.authOptions}

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

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

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

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

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/api+/branding.logo.team.$teamId.ts

@@ -1,6 +1,6 @@
 import sharp from 'sharp';
 
-import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { prisma } from '@documenso/prisma';
 
 import type { Route } from './+types/branding.logo.team.$teamId';
@@ -24,14 +24,7 @@ export async function loader({ params }: Route.LoaderArgs) {
     },
   });
 
-  console.log('########################');
-  console.log('########################');
-  console.log('########################');
-  console.log('########################');
-  console.log('########################');
-
   if (!settings || !settings.brandingEnabled) {
-    console.log('----------------------------');
     return Response.json(
       {
         status: 'error',
@@ -42,7 +35,6 @@ export async function loader({ params }: Route.LoaderArgs) {
   }
 
   if (!settings.brandingLogo) {
-    console.log('!!!!!!!!!!!!!!!!!!!!!!!!');
     return Response.json(
       {
         status: 'error',
@@ -52,10 +44,7 @@ export async function loader({ params }: Route.LoaderArgs) {
     );
   }
 
-  const file = await getFileServerSide(JSON.parse(settings.brandingLogo)).catch((e) => {
-    console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@');
-    console.error(e);
-  });
+  const file = await getFile(JSON.parse(settings.brandingLogo)).catch(() => null);
 
   if (!file) {
     return Response.json(

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

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