fix: build errors

This PR is handles the changes required to support envelopes. The new
envelope editor/signing page will be hidden during release.

The core changes here is to migrate the documents and templates model to
a centralized envelopes model.

Even though Documents and Templates are removed, from the user
perspective they will still exist as we remap envelopes to documents and
templates.

.env.example

@@ -136,3 +136,5 @@ E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 # OPTIONAL: The file to save the logger output to. Will disable stdout if provided.
 NEXT_PRIVATE_LOGGER_FILE_PATH=
 
+# [[PLAIN SUPPORT]]
+NEXT_PRIVATE_PLAIN_API_KEY=

.github/workflows/translations-upload.yml

@@ -20,8 +20,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GH_PAT }}
 
       - uses: ./.github/actions/node-install
 

.gitignore

@@ -56,4 +56,7 @@ logs.json
 
 # claude
 .claude
-CLAUDE.md
+CLAUDE.md
+
+# agents
+.specs

AGENTS.md

@@ -0,0 +1,57 @@
+# Agent Guidelines for Documenso
+
+## Build/Test/Lint Commands
+
+- `npm run build` - Build all packages
+- `npm run lint` - Lint all packages
+- `npm run lint:fix` - Auto-fix linting issues
+- `npm run test:e2e` - Run E2E tests with Playwright
+- `npm run test:dev -w @documenso/app-tests` - Run single E2E test in dev mode
+- `npm run test-ui:dev -w @documenso/app-tests` - Run E2E tests with UI
+- `npm run format` - Format code with Prettier
+- `npm run dev` - Start development server for Remix app
+
+## Code Style Guidelines
+
+- Use TypeScript for all code; prefer `type` over `interface`
+- Use functional components with `const Component = () => {}`
+- Never use classes; prefer functional/declarative patterns
+- Use descriptive variable names with auxiliary verbs (isLoading, hasError)
+- Directory names: lowercase with dashes (auth-wizard)
+- Use named exports for components
+- Never use 'use client' directive
+- Never use 1-line if statements
+- Structure files: exported component, subcomponents, helpers, static content, types
+
+## Error Handling & Validation
+
+- Use custom AppError class when throwing errors
+- When catching errors on the frontend use `const error = AppError.parse(error)` to get the error code
+- Use early returns and guard clauses
+- Use Zod for form validation and react-hook-form for forms
+- Use error boundaries for unexpected errors
+
+## UI & Styling
+
+- Use Shadcn UI, Radix, and Tailwind CSS with mobile-first approach
+- Use `<Form>` `<FormItem>` elements with fieldset having `:disabled` attribute when loading
+- Use Lucide icons with longhand names (HomeIcon vs Home)
+
+## TRPC Routes
+
+- Each route in own file: `routers/teams/create-team.ts`
+- Associated types file: `routers/teams/create-team.types.ts`
+- Request/response schemas: `Z[RouteName]RequestSchema`, `Z[RouteName]ResponseSchema`
+- Only use GET and POST methods in OpenAPI meta
+- Deconstruct input argument on its own line
+- Prefer route names such as get/getMany/find/create/update/delete
+- "create" routes request schema should have the ID and data in the top level
+- "update" routes request schema should have the ID in the top level and the data in a nested "data" object
+
+## Translations & Remix
+
+- Use `<Trans>string</Trans>` for JSX translations from `@lingui/react/macro`
+- Use `t\`string\`` macro for TypeScript translations
+- Use `(params: Route.Params)` and `(loaderData: Route.LoaderData)` for routes
+- Directly return data from loaders, don't use `json()`
+- Use `superLoaderJson` when sending complex data through loaders such as dates or prisma decimals

README.md

@@ -214,8 +214,6 @@ For detailed instructions on how to configure and run the Docker container, plea
 
 We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!
 
-> Please note that the below deployment methods are for v0.9, we will update these to v1.0 once it has been released.
-
 ### Fetch, configure, and build
 
 First, clone the code from Github:
@@ -258,7 +256,7 @@ npm run start
 
 This will start the server on `localhost:3000`. For now, any reverse proxy can then do the frontend and SSL termination.
 
-> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
+> If you want to run with another port than 3000, you can start the application with `next -p <ANY PORT>` from the `apps/remix` folder.
 
 ### Run as a service
 
@@ -308,7 +306,7 @@ The Web UI can be found at http://localhost:9000, while the SMTP port will be on
 
 ### Support IPv6
 
-If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Next.js start command
+If you are deploying to a cluster that uses only IPv6, You can use a custom command to pass a parameter to the Remix start command
 
 For local docker run
 

SIGNING.md

@@ -10,15 +10,26 @@ For the digital signature of your documents you need a signing certificate in .p
 
    `openssl req -new -x509 -key private.key -out certificate.crt -days 365`
 
-   This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The -days parameter sets the number of days for which the certificate is valid.
+   This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The `-days` parameter sets the number of days for which the certificate is valid.
 
-3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following command to do this:
+3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following commands to do this:
 
-   `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt`
+   ```bash
+   # Set certificate password securely (won't appear in command history)
+   read -s -p "Enter certificate password: " CERT_PASS
+   echo
+   
+   # Create the p12 certificate using the environment variable
+   openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt \
+       -password env:CERT_PASS \
+       -keypbe PBE-SHA1-3DES \
+       -certpbe PBE-SHA1-3DES \
+       -macalg sha1
+   ```
 
-4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
+4. **IMPORTANT**: A certificate password is required to prevent signing failures. Make sure to use a strong password (minimum 4 characters) when prompted. Certificates without passwords will cause "Failed to get private key bags" errors during document signing.
 
-5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
+5. Place the certificate `/apps/remix/resources/certificate.p12` (If the path does not exist, it needs to be created)
 
 ## Docker
 

apps/documentation/pages/developers/contributing/contributing-translations.mdx

@@ -25,7 +25,7 @@ The translation files are organized into folders represented by their respective
 Each PO file contains translations which look like this:
 
 ```po
-#: apps/web/src/app/(signing)/sign/[token]/no-longer-available.tsx:61
+#: apps/remix/app/(signing)/sign/[token]/no-longer-available.tsx:61
 msgid "Want to send slick signing links like this one? <0>Check out Documenso.</0>"
 msgstr "Möchten Sie auffällige Signatur-Links wie diesen senden? <0>Überprüfen Sie Documenso.</0>"
 ```

apps/documentation/pages/developers/self-hosting/how-to.mdx

@@ -54,7 +54,7 @@ Install the project dependencies as follows:
 
 ```bash
 npm i
-npm run build:web
+npm run build
 npm run prisma:migrate-deploy
 ```
 
@@ -69,7 +69,7 @@ npm run start
 This will start the server on `localhost:3000`. Any reverse proxy can handle the front end and SSL termination.
 
 <Callout type="info">
- If you want to run with another port than `3000`, you can start the application with `next -p <ANY PORT>` from the `apps/web` folder.
+ If you want to run with another port than `3000`, you can start the application with `next -p <ANY PORT>` from the `apps/remix` folder.
 </Callout>
 
 </Steps>
@@ -119,16 +119,89 @@ NEXT_PRIVATE_SMTP_USERNAME="<your-username>"
 NEXT_PRIVATE_SMTP_PASSWORD="<your-password>"
 ```
 
-### Update the Volume Binding
+### Set Up Your Signing Certificate
 
-The `cert.p12` file is required to sign and encrypt documents, so you must provide your key file. Update the volume binding in the `compose.yml` file to point to your key file:
+<Callout type="warning">
+  This is the most common source of issues for self-hosters. Please follow these steps carefully.
+</Callout>
 
-```yaml
-volumes:
-  - /path/to/your/keyfile.p12:/opt/documenso/cert.p12
-```
+The `cert.p12` file is required to sign and encrypt documents. You have three options:
 
-After updating the volume binding, save the `compose.yml` file and run the following command to start the containers:
+#### Option A: Generate Certificate Inside Container (Recommended)
+
+This method avoids file permission issues by creating the certificate directly inside the Docker container:
+
+1. Start your containers:
+
+   ```bash
+   docker-compose up -d
+   ```
+
+2. Set certificate password securely and generate certificate inside the container:
+
+   ```bash
+   # Set certificate password securely (won't appear in command history)
+   read -s -p "Enter certificate password: " CERT_PASS
+   echo
+
+   # Generate certificate inside container using environment variable
+   docker exec -e CERT_PASS="$CERT_PASS" -it documenso-production-documenso-1 bash -c "
+     openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
+       -keyout /tmp/private.key \
+       -out /tmp/certificate.crt \
+       -subj '/C=US/ST=State/L=City/O=Organization/CN=localhost' && \
+     openssl pkcs12 -export -out /app/certs/cert.p12 \
+       -inkey /tmp/private.key -in /tmp/certificate.crt \
+       -passout env:CERT_PASS && \
+     rm /tmp/private.key /tmp/certificate.crt
+   "
+   ```
+
+3. Add the certificate passphrase to your `.env` file:
+
+   ```bash
+   NEXT_PRIVATE_SIGNING_PASSPHRASE="your_password_here"
+   ```
+
+4. Restart the container to apply changes:
+   ```bash
+   docker-compose restart documenso
+   ```
+
+#### Option B: Use an Existing Certificate File
+
+If you have an existing `.p12` certificate file:
+
+1. **Place your certificate file** in an accessible location on your host system
+2. **Set proper permissions:**
+
+   ```bash
+   # Make sure the certificate is readable
+   chmod 644 /path/to/your/cert.p12
+
+   # For Docker, ensure proper ownership
+   chown 1001:1001 /path/to/your/cert.p12
+   ```
+
+3. **Update the volume binding** in the `compose.yml` file:
+
+   ```yaml
+   volumes:
+     - /path/to/your/cert.p12:/opt/documenso/cert.p12:ro
+   ```
+
+4. **Add certificate configuration** to your `.env` file:
+   ```bash
+   NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=/opt/documenso/cert.p12
+   NEXT_PRIVATE_SIGNING_PASSPHRASE=your_certificate_password
+   ```
+
+<Callout type="warning">
+  Your certificate MUST have a password. Certificates without passwords will cause "Failed to get
+  private key bags" errors.
+</Callout>
+
+After setting up your certificate, save the `compose.yml` file and run the following command to start the containers:
 
 ```bash
 docker-compose --env-file ./.env up -d
@@ -249,7 +322,7 @@ After=network.target
 Environment=PATH=/path/to/your/node/binaries
 Type=simple
 User=www-data
-WorkingDirectory=/var/www/documenso/apps/web
+WorkingDirectory=/var/www/documenso/apps/remix
 ExecStart=/usr/bin/next start -p 3500
 TimeoutSec=15
 Restart=always

apps/documentation/pages/users/compliance/standards-and-regulations.mdx

@@ -19,13 +19,13 @@ device, and other FDA-regulated industries.
 - [x] User Access Management
 - [x] Quality Assurance Documentation
 
-## SOC/ SOC II
+## SOC 2
 
-<Callout type="warning" emoji="⏳">
-  Status: [Planned](https://github.com/documenso/backlog/issues/24)
+<Callout type="info" emoji="✅">
+  Status: [Compliant](https://documen.so/trust)
 </Callout>
 
-SOC II is a framework for managing and auditing the security, availability, processing integrity, confidentiality,
+SOC 2 is a framework for managing and auditing the security, availability, processing integrity, confidentiality,
 and data privacy in cloud and IT service organizations, established by the American Institute of Certified
 Public Accountants (AICPA).
 
@@ -34,9 +34,9 @@ Public Accountants (AICPA).
 <Callout type="warning" emoji="⏳">
   Status: [Planned](https://github.com/documenso/backlog/issues/26)
 </Callout>
-ISO 27001 is an international standard for managing information security, specifying requirements for
-establishing, implementing, maintaining, and continually improving an information security management
-system (ISMS).
+ISO 27001 is an international standard for managing information security, specifying requirements
+for establishing, implementing, maintaining, and continually improving an information security
+management system (ISMS).
 
 ### HIPAA
 

apps/documentation/pages/users/documents/sending-documents.mdx

@@ -18,6 +18,11 @@ The guide assumes you have a Documenso account. If you don't, you can create a f
 
 Navigate to the [Documenso dashboard](https://app.documenso.com/documents) and click on the "Add a document" button. Select the document you want to upload and wait for the upload to complete.
 
+<Callout type="info">
+  The maximum file size for uploaded documents is 150MB in production. In staging, the limit is
+  50MB.
+</Callout>
+
 ![Documenso dashboard](/document-signing/documenso-documents-dashboard.webp)
 
 After the upload is complete, you will be redirected to the document's page. You can configure the document's settings and add recipients and fields here.

apps/documentation/pages/users/email-domains.mdx

@@ -5,15 +5,14 @@ import { Callout, Steps } from 'nextra/components';
 Email Domains allow you to send emails to recipients from your own domain instead of the default Documenso email address.
 
 <Callout type="info">
-  **Platform and Enterprise Only**: Email Domains is only available to Platform and Enterprise
-  customers.
+  **Enterprise Only**: Email Domains is only available to Enterprise customers and custom plans
 </Callout>
 
 ## Creating Email Domains
 
 Before setting up email domains, ensure you have:
 
-- A Platform or Enterprise subscription
+- An Enterprise subscription
 - Access to your domain's DNS settings
 - Access to your Documenso organisation as an admin or manager
 

apps/documentation/pages/users/organisations/_meta.json

@@ -3,5 +3,6 @@
   "members": "Members",
   "groups": "Groups",
   "teams": "Teams",
+  "sso": "SSO",
   "billing": "Billing"
-}
+}

apps/documentation/pages/users/organisations/sso/_meta.json

@@ -0,0 +1,4 @@
+{
+  "index": "Configuration",
+  "microsoft-entra-id": "Microsoft Entra ID"
+}

apps/documentation/pages/users/organisations/sso/index.mdx

@@ -0,0 +1,149 @@
+---
+title: SSO Portal
+description: Learn how to set up a custom SSO login portal for your organisation.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisation SSO Portal
+
+The SSO Portal provides a dedicated login URL for your organisation that integrates with any OIDC compliant identity provider. This feature provides:
+
+- **Single Sign-On**: Access Documenso using your own authentication system
+- **Automatic onboarding**: New users will be automatically added to your organisation when they sign in through the portal
+- **Delegated account management**: Your organisation has full control over the users who sign in through the portal
+
+<Callout type="warning">
+  Anyone who signs in through your portal will be added to your organisation as a member.
+</Callout>
+
+## Getting Started
+
+To set up the SSO Portal, you need to be an organisation owner, admin, or manager.
+
+<Callout type="info">
+  **Enterprise Only**: This feature is only available to Enterprise customers.
+</Callout>
+
+<Steps>
+
+### Access Organisation SSO Settings
+
+![Organisation SSO Portal settings](/organisations/organisations-sso-settings.webp)
+
+### Configure SSO Portal
+
+See the [Microsoft Entra ID](/users/organisations/sso/microsoft-entra-id) guide to find the values for the following fields.
+
+#### Issuer URL
+
+Enter the OpenID discovery endpoint URL for your provider. Here are some common examples:
+
+- **Google Workspace**: `https://accounts.google.com/.well-known/openid-configuration`
+- **Microsoft Entra ID**: `https://login.microsoftonline.com/{tenant-id}/v2.0/.well-known/openid-configuration`
+- **Okta**: `https://{your-domain}.okta.com/.well-known/openid-configuration`
+- **Auth0**: `https://{your-domain}.auth0.com/.well-known/openid-configuration`
+
+#### Client Credentials
+
+Enter the client ID and client secret provided by your identity provider:
+
+- **Client ID**: The unique identifier for your application
+- **Client Secret**: The secret key for authenticating your application
+
+#### Default Organisation Role
+
+Select the default Organisation role that new users will receive when they first sign in through the portal.
+
+#### Allowed Email Domains
+
+Specify which email domains are allowed to sign in through your SSO portal. Separate domains with spaces:
+
+```
+your-domain.com another-domain.com
+```
+
+Leave this field empty to allow all domains.
+
+### Configure Your Identity Provider
+
+You'll need to configure your identity provider with the following information:
+
+- Redirect URI
+- Scopes
+
+These values are found at the top of the page.
+
+### Save Configuration
+
+Toggle the "Enable SSO portal" switch to activate the feature for your organisation.
+
+Click "Update" to save your SSO portal configuration. The portal will be activated once all required fields are completed.
+
+</Steps>
+
+## Testing Your SSO Portal
+
+Once configured, you can test your SSO portal by:
+
+1. Navigating to your portal URL found at the top of the organisation SSO portal settings page
+2. Sign in with a test account from your configured domain
+3. Verifying that the user is properly provisioned with the correct organisation role
+
+## Best Practices
+
+### Reduce Friction
+
+Create a custom subdomain for your organisation's SSO portal. For example, you can create a subdomain like `documenso.your-organisation.com` which redirects to the portal link.
+
+### Security Considerations
+
+Please note that anyone who signs in through your portal will be added to your organisation as a member.
+
+- **Domain Restrictions**: Use allowed domains to prevent unauthorized access
+- **Role Assignment**: Carefully consider the default organisation role for new users
+
+## Troubleshooting
+
+### Common Issues
+
+**"Invalid issuer URL"**
+
+- Verify the issuer URL is correct and accessible
+- Ensure the URL follows the OpenID Connect discovery format
+
+**"Client authentication failed"**
+
+- Check that your client ID and client secret are correct
+- Verify that your application is properly registered with your identity provider
+
+**"User not provisioned"**
+
+- Check that the user's email domain is in the allowed domains list
+- Verify the default organisation role is set correctly
+
+**"Redirect URI mismatch"**
+
+- Ensure the redirect URI in Documenso matches exactly what's configured in your identity provider
+- Check for any trailing slashes or protocol mismatches
+
+### Getting Help
+
+If you encounter issues with your SSO portal configuration:
+
+1. Review your identity provider's documentation for OpenID Connect setup
+2. Check the Documenso logs for detailed error messages
+3. Contact your identity provider's support for provider-specific issues
+
+<Callout type="info">
+  For additional support for SSO Portal configuration, contact our support team at
+  support@documenso.com.
+</Callout>
+
+## Identity Provider Guides
+
+For detailed setup instructions for specific identity providers:
+
+- [Microsoft Entra ID](/users/organisations/sso/microsoft-entra-id) - Complete guide for Azure AD configuration

apps/documentation/pages/users/organisations/sso/microsoft-entra-id.mdx

@@ -0,0 +1,76 @@
+---
+title: Microsoft Entra ID
+description: Learn how to configure Microsoft Entra ID (Azure AD) for your organisation's SSO portal.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Microsoft Entra ID Configuration
+
+Microsoft Entra ID (formerly Azure Active Directory) is a popular identity provider for enterprise SSO. This guide will walk you through creating an app registration and configuring it for use with your Documenso SSO portal.
+
+## Prerequisites
+
+- Access to Microsoft Entra ID (Azure AD) admin center
+- Access to your Documenso organisation as an administrator or manager
+
+<Callout type="warning">Each user in your Azure AD will need an email associated with it.</Callout>
+
+## Creating an App Registration
+
+<Steps>
+
+### Access Azure Portal
+
+1. Navigate to the Azure Portal
+2. Sign in with your Microsoft Entra ID administrator account
+3. Search for "Azure Active Directory" or "Microsoft Entra ID" in the search bar
+4. Click on "Microsoft Entra ID" from the results
+
+### Create App Registration
+
+1. In the left sidebar, click on "App registrations"
+2. Click the "New registration" button
+
+### Configure App Registration
+
+Fill in the registration form with the following details:
+
+- **Name**: Your preferred name (e.g. `Documenso SSO Portal`)
+- **Supported account types**: Choose based on your needs
+- **Redirect URI (Web)**: Found in the Documenso SSO portal settings page
+
+Click "Register" to create the app registration.
+
+### Get Client ID
+
+After registration, you'll be taken to the app's overview page. The **Application (client) ID** is displayed prominently - this is your Client ID for Documenso.
+
+### Create Client Secret
+
+1. In the left sidebar, click on "Certificates & secrets"
+2. Click "New client secret"
+3. Add a description (e.g., "Documenso SSO Secret")
+4. Choose an expiration period (recommended 12-24 months)
+5. Click "Add"
+
+Make sure you copy the "Secret value", not the "Secret ID", you won't be able to access it again after you leave the page.
+
+</Steps>
+
+## Getting Your OpenID Configuration URL
+
+1. In the Azure portal, go to "Microsoft Entra ID"
+2. Click on "Overview" in the left sidebar
+3. Click the "Endpoints" in the horizontal tab
+4. Copy the "OpenID Connect metadata document" value
+
+## Configure Documenso SSO Portal
+
+Now you have all the information needed to configure your Documenso SSO portal:
+
+- **Issuer URL**: The "OpenID Connect metadata document" value from the previous step
+- **Client ID**: The Application (client) ID from your app registration
+- **Client Secret**: The secret value you copied during creation

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

@@ -1,4 +1,4 @@
-import { DocumentStatus } from '@prisma/client';
+import { DocumentStatus, EnvelopeType } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
@@ -7,18 +7,19 @@ import { addZeroMonth } from '../add-zero-month';
 
 export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
-    .selectFrom('Document')
+    .selectFrom('Envelope')
     .select(({ fn }) => [
-      fn<Date>('DATE_TRUNC', [sql.lit('MONTH'), 'Document.updatedAt']).as('month'),
+      fn<Date>('DATE_TRUNC', [sql.lit('MONTH'), 'Envelope.updatedAt']).as('month'),
       fn.count('id').as('count'),
       fn
         .sum(fn.count('id'))
         // Feels like a bug in the Kysely extension but I just can not do this orderBy in a type-safe manner
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-        .over((ob) => ob.orderBy(fn('DATE_TRUNC', [sql.lit('MONTH'), 'Document.updatedAt']) as any))
+        .over((ob) => ob.orderBy(fn('DATE_TRUNC', [sql.lit('MONTH'), 'Envelope.updatedAt']) as any))
         .as('cume_count'),
     ])
-    .where(() => sql`"Document"."status" = ${DocumentStatus.COMPLETED}::"DocumentStatus"`)
+    .where(() => sql`"Envelope"."status" = ${DocumentStatus.COMPLETED}::"DocumentStatus"`)
+    .where(() => sql`"Envelope"."type" = ${EnvelopeType.DOCUMENT}::"EnvelopeType"`)
     .groupBy('month')
     .orderBy('month', 'desc')
     .limit(12);

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

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document } from '@prisma/client';
 import { useNavigate } from 'react-router';
 
 import { trpc } from '@documenso/trpc/react';
@@ -22,10 +21,10 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminDocumentDeleteDialogProps = {
-  document: Document;
+  envelopeId: string;
 };
 
-export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialogProps) => {
+export const AdminDocumentDeleteDialog = ({ envelopeId }: AdminDocumentDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -34,7 +33,7 @@ export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialo
   const [reason, setReason] = useState('');
 
   const { mutateAsync: deleteDocument, isPending: isDeletingDocument } =
-    trpc.admin.deleteDocument.useMutation();
+    trpc.admin.document.delete.useMutation();
 
   const handleDeleteDocument = async () => {
     try {
@@ -42,7 +41,7 @@ export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialo
         return;
       }
 
-      await deleteDocument({ id: document.id, reason });
+      await deleteDocument({ id: envelopeId, reason });
 
       toast({
         title: _(msg`Document deleted`),

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -25,7 +25,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserDeleteDialogProps = {
   className?: string;
-  user: User;
+  user: TGetUserResponse;
 };
 
 export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
@@ -35,7 +35,7 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
   const [email, setEmail] = useState('');
 
   const { mutateAsync: deleteUser, isPending: isDeletingUser } =
-    trpc.admin.deleteUser.useMutation();
+    trpc.admin.user.delete.useMutation();
 
   const onDeleteAccount = async () => {
     try {

apps/remix/app/components/dialogs/admin-user-disable-dialog.tsx

@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +24,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserDisableDialogProps = {
   className?: string;
-  userToDisable: User;
+  userToDisable: TGetUserResponse;
 };
 
 export const AdminUserDisableDialog = ({
@@ -37,7 +37,7 @@ export const AdminUserDisableDialog = ({
   const [email, setEmail] = useState('');
 
   const { mutateAsync: disableUser, isPending: isDisablingUser } =
-    trpc.admin.disableUser.useMutation();
+    trpc.admin.user.disable.useMutation();
 
   const onDisableAccount = async () => {
     try {

apps/remix/app/components/dialogs/admin-user-enable-dialog.tsx

@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -24,7 +24,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type AdminUserEnableDialogProps = {
   className?: string;
-  userToEnable: User;
+  userToEnable: TGetUserResponse;
 };
 
 export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnableDialogProps) => {
@@ -34,7 +34,7 @@ export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnab
   const [email, setEmail] = useState('');
 
   const { mutateAsync: enableUser, isPending: isEnablingUser } =
-    trpc.admin.enableUser.useMutation();
+    trpc.admin.user.enable.useMutation();
 
   const onEnableAccount = async () => {
     try {

apps/remix/app/components/dialogs/admin-user-reset-two-factor-dialog.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useRevalidator } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminUserResetTwoFactorDialogProps = {
+  className?: string;
+  user: TGetUserResponse;
+};
+
+export const AdminUserResetTwoFactorDialog = ({
+  className,
+  user,
+}: AdminUserResetTwoFactorDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+  const [email, setEmail] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: resetTwoFactor, isPending: isResettingTwoFactor } =
+    trpc.admin.user.resetTwoFactor.useMutation();
+
+  const onResetTwoFactor = async () => {
+    try {
+      await resetTwoFactor({
+        userId: user.id,
+      });
+
+      toast({
+        title: _(msg`2FA Reset`),
+        description: _(msg`The user's two factor authentication has been reset successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.NOT_FOUND, () => msg`User not found.`)
+        .with(
+          AppErrorCode.UNAUTHORIZED,
+          () => msg`You are not authorized to reset two factor authentcation for this user.`,
+        )
+        .otherwise(
+          () => msg`An error occurred while resetting two factor authentication for the user.`,
+        );
+
+      toast({
+        title: _(msg`Error`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+
+    if (!newOpen) {
+      setEmail('');
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Reset Two Factor Authentication</AlertTitle>
+          <AlertDescription className="mr-2">
+            <Trans>
+              Reset the users two factor authentication. This action is irreversible and will
+              disable two factor authentication for the user.
+            </Trans>
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogTrigger asChild>
+              <Button variant="destructive">
+                <Trans>Reset 2FA</Trans>
+              </Button>
+            </DialogTrigger>
+
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>
+                  <Trans>Reset Two Factor Authentication</Trans>
+                </DialogTitle>
+              </DialogHeader>
+
+              <Alert variant="destructive">
+                <AlertDescription className="selection:bg-red-100">
+                  <Trans>
+                    This action is irreversible. Please ensure you have informed the user before
+                    proceeding.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              <div>
+                <DialogDescription>
+                  <Trans>
+                    To confirm, please enter the accounts email address <br />({user.email}).
+                  </Trans>
+                </DialogDescription>
+
+                <Input
+                  className="mt-2"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+
+              <DialogFooter>
+                <Button
+                  variant="destructive"
+                  disabled={email !== user.email}
+                  onClick={onResetTwoFactor}
+                  loading={isResettingTwoFactor}
+                >
+                  <Trans>Reset 2FA</Trans>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};

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

@@ -49,7 +49,7 @@ export const DocumentDeleteDialog = ({
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
-  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
+  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.delete.useMutation({
     onSuccess: async () => {
       void refreshLimits();
 

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

@@ -36,11 +36,12 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
+  const { data: document, isLoading } = trpcReact.document.get.useQuery(
     {
       documentId: id,
     },
     {
+      queryHash: `document-duplicate-dialog-${id}`,
       enabled: open === true,
     },
   );
@@ -55,15 +56,15 @@ export const DocumentDuplicateDialog = ({
   const documentsPath = formatDocumentsPath(team.url);
 
   const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
-    trpcReact.document.duplicateDocument.useMutation({
-      onSuccess: async ({ documentId }) => {
+    trpcReact.document.duplicate.useMutation({
+      onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
           description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
-        await navigate(`${documentsPath}/${documentId}/edit`);
+        await navigate(`${documentsPath}/${id}/edit`);
         onOpenChange(false);
       },
     });

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -81,7 +81,7 @@ export const DocumentMoveToFolderDialog = ({
     },
   );
 
-  const { mutateAsync: moveDocumentToFolder } = trpc.folder.moveDocumentToFolder.useMutation();
+  const { mutateAsync: updateDocument } = trpc.document.update.useMutation();
 
   useEffect(() => {
     if (!open) {
@@ -94,9 +94,11 @@ export const DocumentMoveToFolderDialog = ({
 
   const onSubmit = async (data: TMoveDocumentFormSchema) => {
     try {
-      await moveDocumentToFolder({
+      await updateDocument({
         documentId,
-        folderId: data.folderId ?? null,
+        data: {
+          folderId: data.folderId ?? null,
+        },
       });
 
       const documentsPath = formatDocumentsPath(team.url);

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

@@ -4,15 +4,15 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Recipient, SigningStatus } from '@prisma/client';
+import { type Recipient, SigningStatus, type Team, type User } from '@prisma/client';
 import { History } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import * as z from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
-import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import type { Document } from '@documenso/prisma/types/document-legacy-schema';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -43,7 +43,11 @@ import { StackAvatar } from '../general/stack-avatar';
 const FORM_ID = 'resend-email';
 
 export type DocumentResendDialogProps = {
-  document: TDocumentRow;
+  document: Pick<Document, 'id' | 'userId' | 'teamId' | 'status'> & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    recipients: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
   recipients: Recipient[];
 };
 
@@ -71,7 +75,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
     document.status !== 'PENDING' ||
     !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
 
-  const { mutateAsync: resendDocument } = trpcReact.document.resendDocument.useMutation();
+  const { mutateAsync: resendDocument } = trpcReact.document.redistribute.useMutation();
 
   const form = useForm<TResendDocumentFormSchema>({
     resolver: zodResolver(ZResendDocumentFormSchema),
@@ -85,6 +89,11 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
     formState: { isSubmitting },
   } = form;
 
+  const selectedRecipients = useWatch({
+    control: form.control,
+    name: 'recipients',
+  });
+
   const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
     try {
       await resendDocument({ documentId: document.id, recipients });
@@ -151,7 +160,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
 
                       <FormControl>
                         <Checkbox
-                          className="h-5 w-5 rounded-full"
+                          className="h-5 w-5 rounded-full border border-neutral-400"
                           value={recipient.id}
                           checked={value.includes(recipient.id)}
                           onCheckedChange={(checked: boolean) =>
@@ -182,7 +191,13 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
               </Button>
             </DialogClose>
 
-            <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
+            <Button
+              className="flex-1"
+              loading={isSubmitting}
+              type="submit"
+              form={FORM_ID}
+              disabled={isSubmitting || selectedRecipients.length === 0}
+            >
               <Trans>Send reminder</Trans>
             </Button>
           </div>

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -0,0 +1,449 @@
+import { useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  DocumentDistributionMethod,
+  DocumentStatus,
+  EnvelopeType,
+  type Field,
+  FieldType,
+  type Recipient,
+  RecipientRole,
+} from '@prisma/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { InfoIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
+import { formatSigningLink } from '@documenso/lib/utils/recipients';
+import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopeDistributeDialogProps = {
+  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
+    recipients: Recipient[];
+    fields: Field[];
+  };
+  trigger?: React.ReactNode;
+};
+
+export const ZEnvelopeDistributeFormSchema = z.object({
+  meta: z.object({
+    emailId: z.string().nullable(),
+    emailReplyTo: z.preprocess(
+      (val) => (val === '' ? undefined : val),
+      z.string().email().optional(),
+    ),
+    subject: z.string(),
+    message: z.string(),
+    distributionMethod: z
+      .nativeEnum(DocumentDistributionMethod)
+      .optional()
+      .default(DocumentDistributionMethod.EMAIL),
+  }),
+});
+
+export type TEnvelopeDistributeFormSchema = z.infer<typeof ZEnvelopeDistributeFormSchema>;
+
+export const EnvelopeDistributeDialog = ({ envelope, trigger }: EnvelopeDistributeDialogProps) => {
+  const organisation = useCurrentOrganisation();
+
+  const recipients = envelope.recipients;
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: distributeEnvelope } = trpcReact.envelope.distribute.useMutation();
+
+  const form = useForm<TEnvelopeDistributeFormSchema>({
+    defaultValues: {
+      meta: {
+        emailId: envelope.documentMeta?.emailId ?? null,
+        emailReplyTo: envelope.documentMeta?.emailReplyTo || undefined,
+        subject: envelope.documentMeta?.subject ?? '',
+        message: envelope.documentMeta?.message ?? '',
+        distributionMethod:
+          envelope.documentMeta?.distributionMethod || DocumentDistributionMethod.EMAIL,
+      },
+    },
+    resolver: zodResolver(ZEnvelopeDistributeFormSchema),
+  });
+
+  const {
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { isSubmitting },
+  } = form;
+
+  const { data: emailData, isLoading: isLoadingEmails } =
+    trpc.enterprise.organisation.email.find.useQuery({
+      organisationId: organisation.id,
+      perPage: 100,
+    });
+
+  const emails = emailData?.data || [];
+
+  const distributionMethod = watch('meta.distributionMethod');
+
+  const everySignerHasSignature = useMemo(
+    () =>
+      envelope.recipients
+        .filter((recipient) => recipient.role === RecipientRole.SIGNER)
+        .every((recipient) =>
+          envelope.fields.some(
+            (field) => field.type === FieldType.SIGNATURE && field.recipientId === recipient.id,
+          ),
+        ),
+    [envelope.recipients, envelope.fields],
+  );
+
+  const onFormSubmit = async ({ meta }: TEnvelopeDistributeFormSchema) => {
+    try {
+      await distributeEnvelope({ envelopeId: envelope.id, meta });
+
+      toast({
+        title: t`Envelope distributed`,
+        description: t`Your envelope has been distributed successfully.`,
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This envelope could not be distributed at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  if (envelope.status !== DocumentStatus.DRAFT || envelope.type !== EnvelopeType.DOCUMENT) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent className="max-w-md" hideClose>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Send Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Recipients will be able to sign the document once sent</Trans>
+          </DialogDescription>
+        </DialogHeader>
+        {everySignerHasSignature ? (
+          <Form {...form}>
+            <form onSubmit={handleSubmit(onFormSubmit)}>
+              <fieldset disabled={isSubmitting}>
+                <Tabs
+                  onValueChange={(value) =>
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    setValue('meta.distributionMethod', value as DocumentDistributionMethod)
+                  }
+                  value={distributionMethod}
+                  className="mb-2"
+                >
+                  <TabsList className="w-full">
+                    <TabsTrigger className="w-full" value={DocumentDistributionMethod.EMAIL}>
+                      Email
+                    </TabsTrigger>
+                    <TabsTrigger className="w-full" value={DocumentDistributionMethod.NONE}>
+                      None
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
+
+                <div className="min-h-72">
+                  <AnimatePresence initial={false} mode="wait">
+                    {distributionMethod === DocumentDistributionMethod.EMAIL && (
+                      <motion.div
+                        key={'Emails'}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                        exit={{ opacity: 0, transition: { duration: 0.15 } }}
+                      >
+                        <Form {...form}>
+                          <fieldset
+                            className="mt-2 flex flex-col gap-y-4 rounded-lg"
+                            disabled={form.formState.isSubmitting}
+                          >
+                            {organisation.organisationClaim.flags.emailDomains && (
+                              <FormField
+                                control={form.control}
+                                name="meta.emailId"
+                                render={({ field }) => (
+                                  <FormItem>
+                                    <FormLabel>
+                                      <Trans>Email Sender</Trans>
+                                    </FormLabel>
+                                    <FormControl>
+                                      <Select
+                                        {...field}
+                                        value={field.value === null ? '-1' : field.value}
+                                        onValueChange={(value) =>
+                                          field.onChange(value === '-1' ? null : value)
+                                        }
+                                      >
+                                        <SelectTrigger
+                                          loading={isLoadingEmails}
+                                          className="bg-background"
+                                        >
+                                          <SelectValue />
+                                        </SelectTrigger>
+
+                                        <SelectContent>
+                                          {emails.map((email) => (
+                                            <SelectItem key={email.id} value={email.id}>
+                                              {email.email}
+                                            </SelectItem>
+                                          ))}
+
+                                          <SelectItem value={'-1'}>Documenso</SelectItem>
+                                        </SelectContent>
+                                      </Select>
+                                    </FormControl>
+
+                                    <FormMessage />
+                                  </FormItem>
+                                )}
+                              />
+                            )}
+
+                            <FormField
+                              control={form.control}
+                              name="meta.emailReplyTo"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>
+                                    <Trans>Reply To Email</Trans>{' '}
+                                    <span className="text-muted-foreground">(Optional)</span>
+                                  </FormLabel>
+
+                                  <FormControl>
+                                    <Input {...field} maxLength={254} />
+                                  </FormControl>
+
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="meta.subject"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>
+                                    <Trans>Subject</Trans>{' '}
+                                    <span className="text-muted-foreground">(Optional)</span>
+                                  </FormLabel>
+
+                                  <FormControl>
+                                    <Input {...field} maxLength={255} />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="meta.message"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel className="flex flex-row items-center">
+                                    <Trans>Message</Trans>{' '}
+                                    <span className="text-muted-foreground">(Optional)</span>
+                                    <Tooltip>
+                                      <TooltipTrigger>
+                                        <InfoIcon className="mx-2 h-4 w-4" />
+                                      </TooltipTrigger>
+                                      <TooltipContent className="text-muted-foreground p-4">
+                                        <DocumentSendEmailMessageHelper />
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  </FormLabel>
+
+                                  <FormControl>
+                                    <Textarea
+                                      className="bg-background mt-2 h-16 resize-none"
+                                      {...field}
+                                      maxLength={5000}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          </fieldset>
+                        </Form>
+                      </motion.div>
+                    )}
+
+                    {distributionMethod === DocumentDistributionMethod.NONE && (
+                      <motion.div
+                        key={'Links'}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                        exit={{ opacity: 0, transition: { duration: 0.15 } }}
+                        className="min-h-60 rounded-lg border"
+                      >
+                        {envelope.status === DocumentStatus.DRAFT ? (
+                          <div className="text-muted-foreground py-24 text-center text-sm">
+                            <p>
+                              <Trans>We won't send anything to notify recipients.</Trans>
+                            </p>
+
+                            <p className="mt-2">
+                              <Trans>
+                                We will generate signing links for you, which you can send to the
+                                recipients through your method of choice.
+                              </Trans>
+                            </p>
+                          </div>
+                        ) : (
+                          <ul className="text-muted-foreground divide-y">
+                            {recipients.length === 0 && (
+                              <li className="flex flex-col items-center justify-center py-6 text-sm">
+                                <Trans>No recipients</Trans>
+                              </li>
+                            )}
+
+                            {recipients.map((recipient) => (
+                              <li
+                                key={recipient.id}
+                                className="flex items-center justify-between px-4 py-3 text-sm"
+                              >
+                                <AvatarWithText
+                                  avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
+                                  primaryText={
+                                    <p className="text-muted-foreground text-sm">
+                                      {recipient.email}
+                                    </p>
+                                  }
+                                  secondaryText={
+                                    <p className="text-muted-foreground/70 text-xs">
+                                      {t(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+                                    </p>
+                                  }
+                                />
+
+                                {recipient.role !== RecipientRole.CC && (
+                                  <CopyTextButton
+                                    value={formatSigningLink(recipient.token)}
+                                    onCopySuccess={() => {
+                                      toast({
+                                        title: t`Copied to clipboard`,
+                                        description: t`The signing link has been copied to your clipboard.`,
+                                      });
+                                    }}
+                                    badgeContentUncopied={
+                                      <p className="ml-1 text-xs">
+                                        <Trans>Copy</Trans>
+                                      </p>
+                                    }
+                                    badgeContentCopied={
+                                      <p className="ml-1 text-xs">
+                                        <Trans>Copied</Trans>
+                                      </p>
+                                    }
+                                  />
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary" disabled={isSubmitting}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+                  </DialogClose>
+
+                  <Button loading={isSubmitting} type="submit">
+                    {distributionMethod === DocumentDistributionMethod.EMAIL ? (
+                      <Trans>Send</Trans>
+                    ) : (
+                      <Trans>Generate Links</Trans>
+                    )}
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        ) : (
+          <>
+            <Alert variant="warning">
+              <AlertDescription>
+                <Trans>
+                  Some signers have not been assigned a signature field. Please assign at least 1
+                  signature field to each signer before proceeding.
+                </Trans>
+              </AlertDescription>
+            </Alert>
+
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  <Trans>Close</Trans>
+                </Button>
+              </DialogClose>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import { useNavigate } from 'react-router';
+
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type EnvelopeDuplicateDialogProps = {
+  envelopeId: string;
+  envelopeType: EnvelopeType;
+  trigger?: React.ReactNode;
+};
+
+export const EnvelopeDuplicateDialog = ({
+  envelopeId,
+  envelopeType,
+  trigger,
+}: EnvelopeDuplicateDialogProps) => {
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
+    trpc.envelope.duplicate.useMutation({
+      onSuccess: async ({ duplicatedEnvelopeId }) => {
+        toast({
+          title: t`Envelope Duplicated`,
+          description: t`Your envelope has been successfully duplicated.`,
+          duration: 5000,
+        });
+
+        const path =
+          envelopeType === EnvelopeType.DOCUMENT
+            ? formatDocumentsPath(team.url)
+            : formatTemplatesPath(team.url);
+
+        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
+        setOpen(false);
+      },
+    });
+
+  const onDuplicate = async () => {
+    try {
+      await duplicateEnvelope({ envelopeId });
+    } catch {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be duplicated at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDuplicating && setOpen(value)}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent>
+        {envelopeType === EnvelopeType.DOCUMENT ? (
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Duplicate Document</Trans>
+            </DialogTitle>
+            <DialogDescription>
+              <Trans>This document will be duplicated.</Trans>
+            </DialogDescription>
+          </DialogHeader>
+        ) : (
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Duplicate Template</Trans>
+            </DialogTitle>
+            <DialogDescription>
+              <Trans>This template will be duplicated.</Trans>
+            </DialogDescription>
+          </DialogHeader>
+        )}
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" disabled={isDuplicating}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button type="button" loading={isDuplicating} onClick={onDuplicate}>
+            <Trans>Duplicate</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-item-delete-dialog.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopeItemDeleteDialogProps = {
+  canItemBeDeleted: boolean;
+  envelopeId: string;
+  envelopeItemId: string;
+  envelopeItemTitle: string;
+  onDelete?: (envelopeItemId: string) => void;
+  trigger?: React.ReactNode;
+};
+
+export const EnvelopeItemDeleteDialog = ({
+  trigger,
+  canItemBeDeleted,
+  envelopeId,
+  envelopeItemId,
+  envelopeItemTitle,
+  onDelete,
+}: EnvelopeItemDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteEnvelopeItem, isPending: isDeleting } =
+    trpc.envelope.item.delete.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`You have successfully removed this envelope item.`,
+          duration: 5000,
+        });
+
+        onDelete?.(envelopeItemId);
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: t`An unknown error occurred`,
+          description: t`We encountered an unknown error while attempting to remove this envelope item. Please try again later.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      {canItemBeDeleted ? (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Are you sure?</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>
+                You are about to remove the following document and all associated fields
+              </Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Alert variant="neutral">
+            <AlertDescription className="text-center font-semibold">
+              {envelopeItemTitle}
+            </AlertDescription>
+          </Alert>
+
+          <fieldset disabled={isDeleting}>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDeleting}
+                onClick={async () =>
+                  deleteEnvelopeItem({
+                    envelopeId,
+                    envelopeItemId,
+                  })
+                }
+              >
+                <Trans>Delete</Trans>
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      ) : (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>This item cannot be deleted</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>
+                You cannot delete this item because the document has been sent to recipients
+              </Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Close</Trans>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, EnvelopeType, type Recipient, SigningStatus } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { StackAvatar } from '../general/stack-avatar';
+
+export type EnvelopeRedistributeDialogProps = {
+  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
+    recipients: Recipient[];
+  };
+  trigger?: React.ReactNode;
+};
+
+export const ZEnvelopeRedistributeFormSchema = z.object({
+  recipients: z.array(z.number()).min(1, {
+    message: msg`You must select at least one item`.id,
+  }),
+});
+
+export type TEnvelopeRedistributeFormSchema = z.infer<typeof ZEnvelopeRedistributeFormSchema>;
+
+export const EnvelopeRedistributeDialog = ({
+  envelope,
+  trigger,
+}: EnvelopeRedistributeDialogProps) => {
+  const recipients = envelope.recipients;
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: redistributeEnvelope } = trpcReact.envelope.redistribute.useMutation();
+
+  const form = useForm<TEnvelopeRedistributeFormSchema>({
+    defaultValues: {
+      recipients: [],
+    },
+    resolver: zodResolver(ZEnvelopeRedistributeFormSchema),
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = form;
+
+  const onFormSubmit = async ({ recipients }: TEnvelopeRedistributeFormSchema) => {
+    try {
+      await redistributeEnvelope({ envelopeId: envelope.id, recipients });
+
+      toast({
+        title: t`Envelope resent`,
+        description: t`Your envelope has been resent successfully.`,
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This envelope could not be resent at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  if (envelope.status !== DocumentStatus.PENDING || envelope.type !== EnvelopeType.DOCUMENT) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent className="max-w-md" hideClose>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Resend Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Send reminders to the following recipients</Trans>
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <fieldset disabled={isSubmitting}>
+              <FormField
+                control={form.control}
+                name="recipients"
+                render={({ field: { value, onChange } }) => (
+                  <>
+                    {recipients
+                      .filter((recipient) => recipient.signingStatus === SigningStatus.NOT_SIGNED)
+                      .map((recipient) => (
+                        <FormItem
+                          key={recipient.id}
+                          className="flex flex-row items-center justify-between gap-x-3 px-3"
+                        >
+                          <FormLabel
+                            className={cn('my-2 flex items-center gap-2 font-normal', {
+                              'opacity-50': !value.includes(recipient.id),
+                            })}
+                          >
+                            <StackAvatar
+                              key={recipient.id}
+                              type={getRecipientType(recipient)}
+                              fallbackText={recipientAbbreviation(recipient)}
+                            />
+                            {recipient.email}
+                          </FormLabel>
+
+                          <FormControl>
+                            <Checkbox
+                              className="h-5 w-5 rounded-full"
+                              value={recipient.id}
+                              checked={value.includes(recipient.id)}
+                              onCheckedChange={(checked: boolean) =>
+                                checked
+                                  ? onChange([...value, recipient.id])
+                                  : onChange(value.filter((v) => v !== recipient.id))
+                              }
+                            />
+                          </FormControl>
+                        </FormItem>
+                      ))}
+                  </>
+                )}
+              />
+
+              <DialogFooter className="mt-4">
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary" disabled={isSubmitting}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button loading={isSubmitting} type="submit">
+                  <Trans>Send reminder</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/passkey-create-dialog.tsx

@@ -65,9 +65,9 @@ export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCre
   });
 
   const { mutateAsync: createPasskeyRegistrationOptions, isPending } =
-    trpc.auth.createPasskeyRegistrationOptions.useMutation();
+    trpc.auth.passkey.createRegistrationOptions.useMutation();
 
-  const { mutateAsync: createPasskey } = trpc.auth.createPasskey.useMutation();
+  const { mutateAsync: createPasskey } = trpc.auth.passkey.create.useMutation();
 
   const onFormSubmit = async ({ passkeyName }: TCreatePasskeyFormSchema) => {
     setFormError(null);

apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx

@@ -4,14 +4,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
-import type { Template, TemplateDirectLink } from '@prisma/client';
-import { TemplateType } from '@prisma/client';
+import { type TemplateDirectLink, TemplateType } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { CheckCircle2Icon, CircleIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { P, match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { type Template } from '@documenso/prisma/types/template-legacy-schema';
 import { trpc } from '@documenso/trpc/react';
 import {
   MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH,
@@ -52,7 +52,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 export type ManagePublicTemplateDialogProps = {
-  directTemplates: (Template & {
+  directTemplates: (Omit<Template, 'templateDocumentDataId'> & {
     directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
   })[];
   initialTemplateId?: number | null;

apps/remix/app/components/dialogs/sign-field-dropdown-dialog.tsx

@@ -0,0 +1,117 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TDropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+const ZSignFieldDropdownFormSchema = z.object({
+  dropdown: z.string().min(1, { message: msg`Option is required`.id }),
+});
+
+type TSignFieldDropdownFormSchema = z.infer<typeof ZSignFieldDropdownFormSchema>;
+
+export type SignFieldDropdownDialogProps = {
+  fieldMeta: TDropdownFieldMeta;
+};
+
+export const SignFieldDropdownDialog = createCallable<SignFieldDropdownDialogProps, string | null>(
+  ({ call, fieldMeta }) => {
+    const { t } = useLingui();
+
+    const values = fieldMeta.values?.map((value) => value.value) ?? [];
+
+    const form = useForm<TSignFieldDropdownFormSchema>({
+      resolver: zodResolver(ZSignFieldDropdownFormSchema),
+      defaultValues: {
+        dropdown: fieldMeta.defaultValue,
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Dropdown Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Select a value to sign into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.dropdown))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="dropdown"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="bg-background">
+                            <SelectValue placeholder={t`Select an option`} />
+                          </SelectTrigger>
+
+                          <SelectContent>
+                            {values.map((value, i) => (
+                              <SelectItem key={i} value={value}>
+                                {value}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -0,0 +1,91 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const ZSignFieldEmailFormSchema = z.object({
+  email: z.string().min(1, { message: msg`Email is required`.id }),
+});
+
+type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;
+
+export type SignFieldEmailDialogProps = Record<string, never>;
+
+export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, string | null>(
+  ({ call }) => {
+    const form = useForm<TSignFieldEmailFormSchema>({
+      resolver: zodResolver(ZSignFieldEmailFormSchema),
+      defaultValues: {
+        email: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Email</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Sign your email into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.email))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx

@@ -0,0 +1,97 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  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';
+
+const ZSignFieldInitialsFormSchema = z.object({
+  initials: z.string().min(1, { message: msg`Initials are required`.id }),
+});
+
+type TSignFieldInitialsFormSchema = z.infer<typeof ZSignFieldInitialsFormSchema>;
+
+export type SignFieldInitialsDialogProps = {
+  //
+};
+
+export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogProps, string | null>(
+  ({ call }) => {
+    const form = useForm<TSignFieldInitialsFormSchema>({
+      resolver: zodResolver(ZSignFieldInitialsFormSchema),
+      defaultValues: {
+        initials: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Initials</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Sign your initials into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.initials))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="initials"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Initials</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-name-dialog.tsx

@@ -0,0 +1,93 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const ZSignFieldNameFormSchema = z.object({
+  name: z.string().min(1, { message: msg`Name is required`.id }),
+});
+
+type TSignFieldNameFormSchema = z.infer<typeof ZSignFieldNameFormSchema>;
+
+export type SignFieldNameDialogProps = {
+  //
+};
+
+export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, string | null>(
+  ({ call }) => {
+    const form = useForm<TSignFieldNameFormSchema>({
+      resolver: zodResolver(ZSignFieldNameFormSchema),
+      defaultValues: {
+        name: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Name</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Sign your full name into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.name))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-number-dialog.tsx

@@ -0,0 +1,144 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TNumberFieldMeta } from '@documenso/lib/types/field-meta';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { numberFormatValues } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const createNumberFieldSchema = (fieldMeta: TNumberFieldMeta) => {
+  let schema = z.coerce.number({
+    invalid_type_error: msg`Please enter a valid number`.id, // Todo: Envelopes - Check that this works
+  });
+
+  const { numberFormat, minValue, maxValue } = fieldMeta;
+
+  if (typeof minValue === 'number') {
+    schema = schema.min(minValue);
+  }
+
+  if (typeof maxValue === 'number') {
+    schema = schema.max(maxValue);
+  }
+
+  if (numberFormat) {
+    const foundRegex = numberFormatValues.find((item) => item.value === numberFormat)?.regex;
+
+    if (!foundRegex) {
+      return schema;
+    }
+
+    return schema.refine(
+      (value) => {
+        return foundRegex.test(value.toString());
+      },
+      {
+        message: `Number needs to be formatted as ${numberFormat}`,
+        // Todo: Envelopes
+        // message: msg`Number needs to be formatted as ${numberFormat}`.id,
+      },
+    );
+  }
+
+  return schema;
+};
+
+export type SignFieldNumberDialogProps = {
+  fieldMeta: TNumberFieldMeta;
+};
+
+export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps, number | null>(
+  ({ call, fieldMeta }) => {
+    const { t } = useLingui();
+
+    const ZSignFieldNumberFormSchema = z.object({
+      number: createNumberFieldSchema(fieldMeta),
+    });
+
+    const form = useForm<z.infer<typeof ZSignFieldNumberFormSchema>>({
+      resolver: zodResolver(ZSignFieldNumberFormSchema),
+      defaultValues: {
+        number: undefined,
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Number Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Insert a value into the number field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.number))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="number"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      {fieldMeta.label && <FormLabel>{fieldMeta.label}</FormLabel>}
+
+                      <FormControl>
+                        <Input
+                          placeholder={fieldMeta.placeholder ?? t`Enter your number here`}
+                          className={cn('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':
+                              fieldState.error,
+                          })}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-signature-dialog.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+
+import { DocumentSigningDisclosure } from '../general/document-signing/document-signing-disclosure';
+
+export type SignFieldSignatureDialogProps = {
+  initialSignature?: string;
+  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
+};
+
+export const SignFieldSignatureDialog = createCallable<
+  SignFieldSignatureDialogProps,
+  string | null
+>(
+  ({
+    call,
+    typedSignatureEnabled,
+    uploadSignatureEnabled,
+    drawSignatureEnabled,
+    initialSignature,
+  }) => {
+    const [localSignature, setLocalSignature] = useState(initialSignature);
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <div>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Sign Signature Field</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <SignaturePad
+              value={localSignature ?? ''}
+              onChange={({ value }) => setLocalSignature(value)}
+              typedSignatureEnabled={typedSignatureEnabled}
+              uploadSignatureEnabled={uploadSignatureEnabled}
+              drawSignatureEnabled={drawSignatureEnabled}
+            />
+          </div>
+
+          <DocumentSigningDisclosure />
+
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="button"
+              disabled={!localSignature}
+              onClick={() => call.end(localSignature || null)}
+            >
+              <Trans>Sign</Trans>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-text-dialog.tsx

@@ -0,0 +1,120 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TTextFieldMeta } from '@documenso/lib/types/field-meta';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+
+const ZSignFieldTextFormSchema = z.object({
+  text: z.string().min(1, { message: msg`Text is required`.id }),
+});
+
+type TSignFieldTextFormSchema = z.infer<typeof ZSignFieldTextFormSchema>;
+
+export type SignFieldTextDialogProps = {
+  fieldMeta?: TTextFieldMeta;
+};
+
+export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, string | null>(
+  ({ call, fieldMeta }) => {
+    const { t } = useLingui();
+
+    const form = useForm<TSignFieldTextFormSchema>({
+      resolver: zodResolver(ZSignFieldTextFormSchema),
+      defaultValues: {
+        text: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Text Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Insert a value into the text field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.text))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="text"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      {fieldMeta?.label && <FormLabel>{fieldMeta?.label}</FormLabel>}
+
+                      <FormControl>
+                        <Textarea
+                          id="custom-text"
+                          placeholder={fieldMeta?.placeholder ?? t`Enter your text here`}
+                          className={cn('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':
+                              fieldState.error,
+                          })}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      {fieldMeta?.characterLimit !== undefined &&
+                        fieldMeta?.characterLimit > 0 &&
+                        !fieldState.error && (
+                          <div className="text-muted-foreground text-sm">
+                            <Plural
+                              value={fieldMeta?.characterLimit - (field.value?.length ?? 0)}
+                              one="# character remaining"
+                              other="# characters remaining"
+                            />
+                          </div>
+                        )}
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/team-member-create-dialog.tsx

@@ -4,7 +4,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
@@ -39,6 +41,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -140,8 +143,28 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
         {match(step)
           .with('SELECT', () => (
             <DialogHeader>
-              <DialogTitle>
+              <DialogTitle className="flex flex-row items-center">
                 <Trans>Add members</Trans>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <InfoIcon className="mx-2 h-4 w-4" />
+                  </TooltipTrigger>
+                  <TooltipContent className="text-muted-foreground z-[99999] max-w-xs">
+                    <Trans>
+                      To be able to add members to a team, you must first add them to the
+                      organisation. For more information, please see the{' '}
+                      <Link
+                        to="https://docs.documenso.com/users/organisations/members"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-documenso-700 hover:text-documenso-600 hover:underline"
+                      >
+                        documentation
+                      </Link>
+                      .
+                    </Trans>
+                  </TooltipContent>
+                </Tooltip>
               </DialogTitle>
 
               <DialogDescription>

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -44,7 +44,9 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
   const [showTemplateCreateDialog, setShowTemplateCreateDialog] = useState(false);
   const [isUploadingFile, setIsUploadingFile] = useState(false);
 
-  const onFileDrop = async (file: File) => {
+  const onFileDrop = async (files: File[]) => {
+    const file = files[0];
+
     if (isUploadingFile) {
       return;
     }
@@ -54,7 +56,7 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
     try {
       const response = await putPdfFile(file);
 
-      const { id } = await createTemplate({
+      const { legacyTemplateId: id } = await createTemplate({
         title: file.name,
         templateDocumentDataId: response.id,
         folderId: folderId,

apps/remix/app/components/dialogs/template-direct-link-dialog-wrapper.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
-import { LinkIcon } from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
-
-export type TemplateDirectLinkDialogWrapperProps = {
-  template: Template & { directLink?: TemplateDirectLink | null; recipients: Recipient[] };
-};
-
-export const TemplateDirectLinkDialogWrapper = ({
-  template,
-}: TemplateDirectLinkDialogWrapperProps) => {
-  const [isTemplateDirectLinkOpen, setTemplateDirectLinkOpen] = useState(false);
-
-  return (
-    <div>
-      <Button
-        variant="outline"
-        className="px-3"
-        onClick={(e) => {
-          e.preventDefault();
-          setTemplateDirectLinkOpen(true);
-        }}
-      >
-        <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
-
-        {template.directLink ? (
-          <Trans>Manage Direct Link</Trans>
-        ) : (
-          <Trans>Create Direct Link</Trans>
-        )}
-      </Button>
-
-      <TemplateDirectLinkDialog
-        template={template}
-        open={isTemplateDirectLinkOpen}
-        onOpenChange={setTemplateDirectLinkOpen}
-      />
-    </div>
-  );
-};

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -3,13 +3,15 @@ import { useEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { type Recipient, RecipientRole, type TemplateDirectLink } from '@prisma/client';
 import {
-  type Recipient,
-  RecipientRole,
-  type Template,
-  type TemplateDirectLink,
-} from '@prisma/client';
-import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+  CircleDotIcon,
+  CircleIcon,
+  ClipboardCopyIcon,
+  InfoIcon,
+  LinkIcon,
+  LoaderIcon,
+} from 'lucide-react';
 import { Link, useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
@@ -31,6 +33,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@@ -47,20 +50,19 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type TemplateDirectLinkDialogProps = {
-  template: Template & {
-    directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-    recipients: Recipient[];
-  };
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
+  templateId: number;
+  directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
+  recipients: Recipient[];
+  trigger?: React.ReactNode;
 };
 
 type TemplateDirectLinkStep = 'ONBOARD' | 'SELECT_RECIPIENT' | 'MANAGE' | 'CONFIRM_DELETE';
 
 export const TemplateDirectLinkDialog = ({
-  template,
-  open,
-  onOpenChange,
+  templateId,
+  directLink,
+  recipients,
+  trigger,
 }: TemplateDirectLinkDialogProps) => {
   const { toast } = useToast();
   const { quota, remaining } = useLimits();
@@ -69,8 +71,9 @@ export const TemplateDirectLinkDialog = ({
 
   const [, copy] = useCopyToClipboard();
 
-  const [isEnabled, setIsEnabled] = useState(template.directLink?.enabled ?? false);
-  const [token, setToken] = useState(template.directLink?.token ?? null);
+  const [open, setOpen] = useState(false);
+  const [isEnabled, setIsEnabled] = useState(directLink?.enabled ?? false);
+  const [token, setToken] = useState(directLink?.token ?? null);
   const [selectedRecipientId, setSelectedRecipientId] = useState<number | null>(null);
   const [currentStep, setCurrentStep] = useState<TemplateDirectLinkStep>(
     token ? 'MANAGE' : 'ONBOARD',
@@ -80,11 +83,11 @@ export const TemplateDirectLinkDialog = ({
 
   const validDirectTemplateRecipients = useMemo(
     () =>
-      template.recipients.filter(
+      recipients.filter(
         (recipient) =>
           recipient.role !== RecipientRole.CC && recipient.role !== RecipientRole.ASSISTANT,
       ),
-    [template.recipients],
+    [recipients],
   );
 
   const {
@@ -140,7 +143,7 @@ export const TemplateDirectLinkDialog = ({
       onSuccess: async () => {
         await revalidate();
 
-        onOpenChange(false);
+        setOpen(false);
         setToken(null);
 
         toast({
@@ -178,7 +181,7 @@ export const TemplateDirectLinkDialog = ({
     setSelectedRecipientId(recipientId);
 
     await createTemplateDirectLink({
-      templateId: template.id,
+      templateId,
       directRecipientId: recipientId,
     });
   };
@@ -195,300 +198,311 @@ export const TemplateDirectLinkDialog = ({
   }, [open]);
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
-      <fieldset disabled={isLoading} className="relative">
-        <AnimateGenericFadeInOut motionKey={currentStep}>
-          {match({ token, currentStep })
-            .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Create Direct Signing Link</Trans>
-                  </DialogTitle>
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" className="px-3">
+            <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
 
-                  <DialogDescription>
-                    <Trans>Here's how it works:</Trans>
-                  </DialogDescription>
-                </DialogHeader>
+            {directLink ? <Trans>Manage Direct Link</Trans> : <Trans>Create Direct Link</Trans>}
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent hideClose>
+        <fieldset disabled={isLoading} className="relative">
+          <AnimateGenericFadeInOut motionKey={currentStep}>
+            {match({ token, currentStep })
+              .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Create Direct Signing Link</Trans>
+                    </DialogTitle>
 
-                <ul className="mt-4 space-y-4 pl-12">
-                  {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
-                    <li className="relative" key={index}>
-                      <div className="absolute -left-12">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
-                          {index + 1}
+                    <DialogDescription>
+                      <Trans>Here's how it works:</Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <ul className="mt-4 space-y-4 pl-12">
+                    {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
+                      <li className="relative" key={index}>
+                        <div className="absolute -left-12">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
+                            {index + 1}
+                          </div>
                         </div>
-                      </div>
 
-                      <h3 className="font-semibold">{_(step.title)}</h3>
-                      <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
-                    </li>
-                  ))}
-                </ul>
+                        <h3 className="font-semibold">{_(step.title)}</h3>
+                        <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
+                      </li>
+                    ))}
+                  </ul>
 
-                {remaining.directTemplates === 0 && (
-                  <Alert variant="warning">
-                    <AlertTitle>
-                      <Trans>
-                        Direct template link usage exceeded ({quota.directTemplates}/
-                        {quota.directTemplates})
-                      </Trans>
-                    </AlertTitle>
-                    <AlertDescription>
-                      <Trans>
-                        You have reached the maximum limit of {quota.directTemplates} direct
-                        templates.{' '}
-                        <Link
-                          className="mt-1 block underline underline-offset-4"
-                          to={`/o/${organisation.url}/settings/billing`}
-                        >
-                          Upgrade your account to continue!
-                        </Link>
-                      </Trans>
-                    </AlertDescription>
-                  </Alert>
-                )}
+                  {remaining.directTemplates === 0 && (
+                    <Alert variant="warning">
+                      <AlertTitle>
+                        <Trans>
+                          Direct template link usage exceeded ({quota.directTemplates}/
+                          {quota.directTemplates})
+                        </Trans>
+                      </AlertTitle>
+                      <AlertDescription>
+                        <Trans>
+                          You have reached the maximum limit of {quota.directTemplates} direct
+                          templates.{' '}
+                          <Link
+                            className="mt-1 block underline underline-offset-4"
+                            to={`/o/${organisation.url}/settings/billing`}
+                          >
+                            Upgrade your account to continue!
+                          </Link>
+                        </Trans>
+                      </AlertDescription>
+                    </Alert>
+                  )}
 
-                {remaining.directTemplates !== 0 && (
-                  <DialogFooter className="mx-auto mt-4">
-                    <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
-                      <Trans> Enable direct link signing</Trans>
-                    </Button>
-                  </DialogFooter>
-                )}
-              </DialogContent>
-            ))
-            .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
-              <DialogContent className="relative">
-                {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
-                  <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
-                    <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
-                  </div>
-                )}
-
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Choose Direct Link Recipient</Trans>
-                  </DialogTitle>
-
-                  <DialogDescription>
-                    <Trans>Choose an existing recipient from below to continue</Trans>
-                  </DialogDescription>
-                </DialogHeader>
-
-                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>
-                          <Trans>Recipient</Trans>
-                        </TableHead>
-                        <TableHead>
-                          <Trans>Role</Trans>
-                        </TableHead>
-                        <TableHead></TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {validDirectTemplateRecipients.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={3} className="h-16 text-center">
-                            <p className="text-muted-foreground">
-                              <Trans>No valid recipients found</Trans>
-                            </p>
-                          </TableCell>
-                        </TableRow>
-                      )}
-
-                      {validDirectTemplateRecipients.map((row) => (
-                        <TableRow
-                          className="cursor-pointer"
-                          key={row.id}
-                          onClick={async () => onRecipientTableRowClick(row.id)}
-                        >
-                          <TableCell>
-                            <div className="text-muted-foreground text-sm">
-                              <p>{row.name}</p>
-                              <p className="text-muted-foreground/70 text-xs">{row.email}</p>
-                            </div>
-                          </TableCell>
-
-                          <TableCell className="text-muted-foreground text-sm">
-                            {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
-                          </TableCell>
-
-                          <TableCell>
-                            {selectedRecipientId === row.id ? (
-                              <CircleDotIcon className="h-5 w-5 text-neutral-300" />
-                            ) : (
-                              <CircleIcon className="h-5 w-5 text-neutral-300" />
-                            )}
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-
-                {/* Prevent creating placeholder direct template recipient if the email already exists. */}
-                {!template.recipients.some(
-                  (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
-                ) && (
-                  <DialogFooter className="mx-auto">
-                    <div className="flex flex-col items-center justify-center">
-                      {validDirectTemplateRecipients.length !== 0 && (
-                        <p className="text-muted-foreground text-sm">
-                          <Trans>Or</Trans>
-                        </p>
-                      )}
-
-                      <Button
-                        type="button"
-                        className="mt-2"
-                        loading={isCreatingTemplateDirectLink && !selectedRecipientId}
-                        onClick={async () =>
-                          createTemplateDirectLink({
-                            templateId: template.id,
-                          })
-                        }
-                      >
-                        <Trans>Create one automatically</Trans>
+                  {remaining.directTemplates !== 0 && (
+                    <DialogFooter className="mx-auto mt-4">
+                      <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
+                        <Trans> Enable direct link signing</Trans>
                       </Button>
+                    </DialogFooter>
+                  )}
+                </DialogContent>
+              ))
+              .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
+                <DialogContent className="relative">
+                  {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
+                      <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
                     </div>
-                  </DialogFooter>
-                )}
-              </DialogContent>
-            ))
-            .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
-              <DialogContent className="relative">
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Direct Link Signing</Trans>
-                  </DialogTitle>
+                  )}
 
-                  <DialogDescription>
-                    <Trans>Manage the direct link signing for this template</Trans>
-                  </DialogDescription>
-                </DialogHeader>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Choose Direct Link Recipient</Trans>
+                    </DialogTitle>
 
-                <div>
-                  <div className="flex flex-row items-center justify-between">
-                    <Label className="flex flex-row">
-                      <Trans>Enable Direct Link Signing</Trans>
-                      <Tooltip>
-                        <TooltipTrigger tabIndex={-1} className="ml-2">
-                          <InfoIcon className="h-4 w-4" />
-                        </TooltipTrigger>
-                        <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                          <Trans>
-                            Disabling direct link signing will prevent anyone from accessing the
-                            link.
-                          </Trans>
-                        </TooltipContent>
-                      </Tooltip>
-                    </Label>
+                    <DialogDescription>
+                      <Trans>Choose an existing recipient from below to continue</Trans>
+                    </DialogDescription>
+                  </DialogHeader>
 
-                    <Switch
-                      className="mt-2"
-                      checked={isEnabled}
-                      onCheckedChange={(value) => setIsEnabled(value)}
-                    />
+                  <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>
+                            <Trans>Recipient</Trans>
+                          </TableHead>
+                          <TableHead>
+                            <Trans>Role</Trans>
+                          </TableHead>
+                          <TableHead></TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {validDirectTemplateRecipients.length === 0 && (
+                          <TableRow>
+                            <TableCell colSpan={3} className="h-16 text-center">
+                              <p className="text-muted-foreground">
+                                <Trans>No valid recipients found</Trans>
+                              </p>
+                            </TableCell>
+                          </TableRow>
+                        )}
+
+                        {validDirectTemplateRecipients.map((row) => (
+                          <TableRow
+                            className="cursor-pointer"
+                            key={row.id}
+                            onClick={async () => onRecipientTableRowClick(row.id)}
+                          >
+                            <TableCell>
+                              <div className="text-muted-foreground text-sm">
+                                <p>{row.name}</p>
+                                <p className="text-muted-foreground/70 text-xs">{row.email}</p>
+                              </div>
+                            </TableCell>
+
+                            <TableCell className="text-muted-foreground text-sm">
+                              {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
+                            </TableCell>
+
+                            <TableCell>
+                              {selectedRecipientId === row.id ? (
+                                <CircleDotIcon className="h-5 w-5 text-neutral-300" />
+                              ) : (
+                                <CircleIcon className="h-5 w-5 text-neutral-300" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
                   </div>
 
-                  <div className="mt-2">
-                    <Label htmlFor="copy-direct-link">
-                      <Trans>Copy Shareable Link</Trans>
-                    </Label>
+                  {/* Prevent creating placeholder direct template recipient if the email already exists. */}
+                  {!recipients.some(
+                    (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+                  ) && (
+                    <DialogFooter className="mx-auto">
+                      <div className="flex flex-col items-center justify-center">
+                        {validDirectTemplateRecipients.length !== 0 && (
+                          <p className="text-muted-foreground text-sm">
+                            <Trans>Or</Trans>
+                          </p>
+                        )}
 
-                    <div className="relative mt-1">
-                      <Input
-                        id="copy-direct-link"
-                        disabled
-                        value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
-                        readOnly
-                        className="pr-12"
-                      />
-
-                      <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
                         <Button
-                          variant="none"
                           type="button"
-                          className="h-8 w-8"
-                          onClick={() => void onCopyClick(token)}
+                          className="mt-2"
+                          loading={isCreatingTemplateDirectLink && !selectedRecipientId}
+                          onClick={async () =>
+                            createTemplateDirectLink({
+                              templateId,
+                            })
+                          }
                         >
-                          <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                          <Trans>Create one automatically</Trans>
                         </Button>
                       </div>
+                    </DialogFooter>
+                  )}
+                </DialogContent>
+              ))
+              .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
+                <DialogContent className="relative">
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Direct Link Signing</Trans>
+                    </DialogTitle>
+
+                    <DialogDescription>
+                      <Trans>Manage the direct link signing for this template</Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <div>
+                    <div className="flex flex-row items-center justify-between">
+                      <Label className="flex flex-row">
+                        <Trans>Enable Direct Link Signing</Trans>
+                        <Tooltip>
+                          <TooltipTrigger tabIndex={-1} className="ml-2">
+                            <InfoIcon className="h-4 w-4" />
+                          </TooltipTrigger>
+                          <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                            <Trans>
+                              Disabling direct link signing will prevent anyone from accessing the
+                              link.
+                            </Trans>
+                          </TooltipContent>
+                        </Tooltip>
+                      </Label>
+
+                      <Switch
+                        className="mt-2"
+                        checked={isEnabled}
+                        onCheckedChange={(value) => setIsEnabled(value)}
+                      />
+                    </div>
+
+                    <div className="mt-2">
+                      <Label htmlFor="copy-direct-link">
+                        <Trans>Copy Shareable Link</Trans>
+                      </Label>
+
+                      <div className="relative mt-1">
+                        <Input
+                          id="copy-direct-link"
+                          disabled
+                          value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
+                          readOnly
+                          className="pr-12"
+                        />
+
+                        <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
+                          <Button
+                            variant="none"
+                            type="button"
+                            className="h-8 w-8"
+                            onClick={() => void onCopyClick(token)}
+                          >
+                            <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                          </Button>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <DialogFooter className="mt-4">
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    className="mr-auto w-full sm:w-auto"
-                    loading={isDeletingTemplateDirectLink}
-                    onClick={() => setCurrentStep('CONFIRM_DELETE')}
-                  >
-                    <Trans>Remove</Trans>
-                  </Button>
+                  <DialogFooter className="mt-4">
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      className="mr-auto w-full sm:w-auto"
+                      loading={isDeletingTemplateDirectLink}
+                      onClick={() => setCurrentStep('CONFIRM_DELETE')}
+                    >
+                      <Trans>Remove</Trans>
+                    </Button>
 
-                  <Button
-                    type="button"
-                    loading={isTogglingTemplateAccess}
-                    onClick={async () => {
-                      await toggleTemplateDirectLink({
-                        templateId: template.id,
-                        enabled: isEnabled,
-                      }).catch(() => null);
+                    <Button
+                      type="button"
+                      loading={isTogglingTemplateAccess}
+                      onClick={async () => {
+                        await toggleTemplateDirectLink({
+                          templateId,
+                          enabled: isEnabled,
+                        }).catch(() => null);
 
-                      onOpenChange(false);
-                    }}
-                  >
-                    <Trans>Save</Trans>
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            ))
-            .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
-              <DialogContent className="relative">
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Are you sure?</Trans>
-                  </DialogTitle>
+                        setOpen(false);
+                      }}
+                    >
+                      <Trans>Save</Trans>
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              ))
+              .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
+                <DialogContent className="relative">
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Are you sure?</Trans>
+                    </DialogTitle>
 
-                  <DialogDescription>
-                    <Trans>
-                      Please note that proceeding will remove direct linking recipient and turn it
-                      into a placeholder.
-                    </Trans>
-                  </DialogDescription>
-                </DialogHeader>
+                    <DialogDescription>
+                      <Trans>
+                        Please note that proceeding will remove direct linking recipient and turn it
+                        into a placeholder.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
 
-                <DialogFooter>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={() => setCurrentStep('MANAGE')}
-                  >
-                    <Trans>Cancel</Trans>
-                  </Button>
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      onClick={() => setCurrentStep('MANAGE')}
+                    >
+                      <Trans>Cancel</Trans>
+                    </Button>
 
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    loading={isDeletingTemplateDirectLink}
-                    onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
-                  >
-                    <Trans>Confirm</Trans>
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            ))
-            .otherwise(() => null)}
-        </AnimateGenericFadeInOut>
-      </fieldset>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      loading={isDeletingTemplateDirectLink}
+                      onClick={() => void deleteTemplateDirectLink({ templateId })}
+                    >
+                      <Trans>Confirm</Trans>
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              ))
+              .otherwise(() => null)}
+          </AnimateGenericFadeInOut>
+        </fieldset>
+      </DialogContent>
     </Dialog>
   );
 };

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -83,7 +83,7 @@ export function TemplateMoveToFolderDialog({
     },
   );
 
-  const { mutateAsync: moveTemplateToFolder } = trpc.folder.moveTemplateToFolder.useMutation();
+  const { mutateAsync: updateTemplate } = trpc.template.updateTemplate.useMutation();
 
   useEffect(() => {
     if (!isOpen) {
@@ -96,9 +96,11 @@ export function TemplateMoveToFolderDialog({
 
   const onSubmit = async (data: TMoveTemplateFormSchema) => {
     try {
-      await moveTemplateToFolder({
+      await updateTemplate({
         templateId,
-        folderId: data.folderId ?? null,
+        data: {
+          folderId: data.folderId ?? null,
+        },
       });
 
       toast({

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -45,50 +45,22 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-const ZAddRecipientsForNewDocumentSchema = z
-  .object({
-    distributeDocument: z.boolean(),
-    useCustomDocument: z.boolean().default(false),
-    customDocumentData: z
-      .any()
-      .refine((data) => data instanceof File || data === undefined)
-      .optional(),
-    recipients: z.array(
-      z.object({
-        id: z.number(),
-        email: z.string().email(),
-        name: z.string(),
-        signingOrder: z.number().optional(),
-      }),
-    ),
-  })
-  // Display exactly which rows are duplicates.
-  .superRefine((items, ctx) => {
-    const uniqueEmails = new Map<string, number>();
-
-    for (const [index, recipients] of items.recipients.entries()) {
-      const email = recipients.email.toLowerCase();
-
-      const firstFoundIndex = uniqueEmails.get(email);
-
-      if (firstFoundIndex === undefined) {
-        uniqueEmails.set(email, index);
-        continue;
-      }
-
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: 'Emails must be unique',
-        path: ['recipients', index, 'email'],
-      });
-
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: 'Emails must be unique',
-        path: ['recipients', firstFoundIndex, 'email'],
-      });
-    }
-  });
+const ZAddRecipientsForNewDocumentSchema = z.object({
+  distributeDocument: z.boolean(),
+  useCustomDocument: z.boolean().default(false),
+  customDocumentData: z
+    .any()
+    .refine((data) => data instanceof File || data === undefined)
+    .optional(),
+  recipients: z.array(
+    z.object({
+      id: z.number(),
+      email: z.string().email(),
+      name: z.string(),
+      signingOrder: z.number().optional(),
+    }),
+  ),
+});
 
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
@@ -277,10 +249,7 @@ export function TemplateUseDialog({
                           )}
 
                           <FormControl>
-                            <Input
-                              {...field}
-                              placeholder={recipients[index].email || _(msg`Email`)}
-                            />
+                            <Input {...field} aria-label="Email" placeholder={_(msg`Email`)} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -301,6 +270,7 @@ export function TemplateUseDialog({
                           <FormControl>
                             <Input
                               {...field}
+                              aria-label="Name"
                               placeholder={recipients[index].name || _(msg`Name`)}
                             />
                           </FormControl>
@@ -414,6 +384,7 @@ export function TemplateUseDialog({
                           className="text-muted-foreground ml-2 flex items-center text-sm"
                           htmlFor="useCustomDocument"
                         >
+                          {/* Todo: Envelopes - How will this work? */}
                           <Trans>Upload custom document</Trans>
                           <Tooltip>
                             <TooltipTrigger type="button">
@@ -484,6 +455,7 @@ export function TemplateUseDialog({
 
                                 <input
                                   type="file"
+                                  data-testid="template-use-dialog-file-input"
                                   className="absolute h-full w-full opacity-0"
                                   accept=".pdf,application/pdf"
                                   onChange={(e) => {

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

@@ -56,7 +56,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
 
   type TDeleteTokenByIdMutationSchema = z.infer<typeof ZTokenDeleteDialogSchema>;
 
-  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.delete.useMutation({
     onSuccess() {
       onDelete?.();
     },

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

@@ -1,11 +1,11 @@
 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';
+} from '@documenso/lib/types/document-meta';
+import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
 
 // Define the schema for configuration
 export type TConfigureEmbedFormSchema = z.infer<typeof ZConfigureEmbedFormSchema>;

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

@@ -118,6 +118,7 @@ export const ConfigureFieldsView = ({
       sendStatus: signer.disabled ? SendStatus.SENT : SendStatus.NOT_SENT,
       readStatus: signer.disabled ? ReadStatus.OPENED : ReadStatus.NOT_OPENED,
       signingStatus: signer.disabled ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+      envelopeId: '',
     }));
   }, [configData.signers]);
 
@@ -172,6 +173,8 @@ export const ConfigureFieldsView = ({
     name: 'fields',
   });
 
+  const highestPageNumber = Math.max(...localFields.map((field) => field.pageNumber));
+
   const onFieldCopy = useCallback(
     (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
       const { duplicate = false, duplicateAll = false } = options ?? {};
@@ -540,7 +543,9 @@ export const ConfigureFieldsView = ({
                 <div>
                   <PDFViewer documentData={normalizedDocumentData} />
 
-                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                  <ElementVisible
+                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+                  >
                     {localFields.map((field, index) => {
                       const recipientIndex = recipients.findIndex(
                         (r) => r.id === field.recipientId,

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

@@ -3,7 +3,7 @@ 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 { DocumentMeta, Recipient, Signature } from '@prisma/client';
 import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
@@ -48,7 +48,7 @@ export type EmbedDirectTemplateClientPageProps = {
   documentData: DocumentData;
   recipient: Recipient;
   fields: Field[];
-  metadata?: DocumentMeta | TemplateMeta | null;
+  metadata?: DocumentMeta | null;
   hidePoweredBy?: boolean;
   allowWhiteLabelling?: boolean;
 };
@@ -57,7 +57,7 @@ export const EmbedDirectTemplateClientPage = ({
   token,
   updatedAt,
   documentData,
-  recipient,
+  recipient: _recipient,
   fields,
   metadata,
   hidePoweredBy = false,
@@ -91,8 +91,12 @@ export const EmbedDirectTemplateClientPage = ({
     localFields.filter((field) => field.inserted),
   ];
 
+  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
+
   const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
 
+  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
+
   const { mutateAsync: createDocumentFromDirectTemplate, isPending: isSubmitting } =
     trpc.template.createDocumentFromDirectTemplate.useMutation();
 
@@ -343,19 +347,34 @@ export const EmbedDirectTemplateClientPage = ({
                   <Trans>Sign document</Trans>
                 </h3>
 
-                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                  {isExpanded ? (
-                    <LucideChevronDown
-                      className="text-muted-foreground h-5 w-5"
-                      onClick={() => setIsExpanded(false)}
-                    />
-                  ) : (
-                    <LucideChevronUp
-                      className="text-muted-foreground h-5 w-5"
-                      onClick={() => setIsExpanded(true)}
-                    />
-                  )}
-                </Button>
+                {isExpanded ? (
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 md:hidden"
+                    onClick={() => setIsExpanded(false)}
+                  >
+                    <LucideChevronDown className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : pendingFields.length > 0 ? (
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 md:hidden"
+                    onClick={() => setIsExpanded(true)}
+                  >
+                    <LucideChevronUp className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="md:hidden"
+                    disabled={isThrottled || (hasSignatureField && !signatureValid)}
+                    loading={isSubmitting}
+                    onClick={() => throttledOnCompleteClick()}
+                  >
+                    <Trans>Complete</Trans>
+                  </Button>
+                )}
               </div>
             </div>
 
@@ -442,7 +461,9 @@ export const EmbedDirectTemplateClientPage = ({
           </div>
         </div>
 
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+        >
           {showPendingFieldTooltip && pendingFields.length > 0 && (
             <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
               <Trans>Click to insert field</Trans>

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

@@ -1,4 +1,4 @@
-import type { DocumentMeta, TemplateMeta } from '@prisma/client';
+import type { DocumentMeta } from '@prisma/client';
 import { type Field, FieldType } from '@prisma/client';
 import { match } from 'ts-pattern';
 
@@ -33,7 +33,7 @@ import { DocumentSigningTextField } from '~/components/general/document-signing/
 export type EmbedDocumentFieldsProps = {
   fields: Field[];
   metadata?: Pick<
-    DocumentMeta | TemplateMeta,
+    DocumentMeta,
     | 'timezone'
     | 'dateFormat'
     | 'typedSignatureEnabled'
@@ -50,8 +50,10 @@ export const EmbedDocumentFields = ({
   onSignField,
   onUnsignField,
 }: EmbedDocumentFieldsProps) => {
+  const highestPageNumber = Math.max(...fields.map((field) => field.page));
+
   return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+    <ElementVisible target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}>
       {fields.map((field) =>
         match(field.type)
           .with(FieldType.SIGNATURE, () => (

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

@@ -3,7 +3,7 @@ import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, TemplateMeta } from '@prisma/client';
+import type { DocumentMeta } from '@prisma/client';
 import {
   type DocumentData,
   type Field,
@@ -15,12 +15,14 @@ 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 {
+  type DocumentField,
+  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 { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -50,7 +52,7 @@ export type EmbedSignDocumentClientPageProps = {
   recipient: RecipientWithFields;
   fields: Field[];
   completedFields: DocumentField[];
-  metadata?: DocumentMeta | TemplateMeta | null;
+  metadata?: DocumentMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
   allowWhitelabelling?: boolean;
@@ -89,7 +91,7 @@ export const EmbedSignDocumentClientPage = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
-  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
+  const [_showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
     useState(false);
 
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
@@ -106,6 +108,8 @@ export const EmbedSignDocumentClientPage = ({
     fields.filter((field) => field.inserted),
   ];
 
+  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
+
   const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
@@ -116,6 +120,8 @@ export const EmbedSignDocumentClientPage = ({
 
   const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
 
+  const signatureValid = !hasSignatureField || (signature && signature.trim() !== '');
+
   const assistantSignersId = useId();
 
   const onNextFieldClick = () => {
@@ -271,7 +277,7 @@ export const EmbedSignDocumentClientPage = ({
         {allowDocumentRejection && (
           <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
             <DocumentSigningRejectDialog
-              document={{ id: documentId }}
+              documentId={documentId}
               token={token}
               onRejected={onDocumentRejected}
             />
@@ -305,19 +311,36 @@ export const EmbedSignDocumentClientPage = ({
                     )}
                   </h3>
 
-                  <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                    {isExpanded ? (
-                      <LucideChevronDown
-                        className="text-muted-foreground h-5 w-5"
-                        onClick={() => setIsExpanded(false)}
-                      />
-                    ) : (
-                      <LucideChevronUp
-                        className="text-muted-foreground h-5 w-5"
-                        onClick={() => setIsExpanded(true)}
-                      />
-                    )}
-                  </Button>
+                  {isExpanded ? (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(false)}
+                    >
+                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : pendingFields.length > 0 ? (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="md:hidden"
+                      disabled={
+                        isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
+                      }
+                      loading={isSubmitting}
+                      onClick={() => throttledOnCompleteClick()}
+                    >
+                      <Trans>Complete</Trans>
+                    </Button>
+                  )}
                 </div>
               </div>
 
@@ -465,7 +488,9 @@ export const EmbedSignDocumentClientPage = ({
             </div>
           </div>
 
-          <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          <ElementVisible
+            target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+          >
             {showPendingFieldTooltip && pendingFields.length > 0 && (
               <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
                 <Trans>Click to insert field</Trans>

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -92,6 +92,8 @@ export const MultiSignDocumentSigningView = ({
       [],
   ];
 
+  const highestPendingPageNumber = Math.max(...pendingFields.map((field) => field.page));
+
   const uninsertedFields = document?.fields.filter((field) => !field.inserted) ?? [];
 
   const onSignField = async (payload: TSignFieldWithTokenMutationSchema) => {
@@ -210,7 +212,7 @@ export const MultiSignDocumentSigningView = ({
               {allowDocumentRejection && (
                 <div className="embed--Actions mb-4 mt-8 flex w-full flex-row-reverse items-baseline justify-between">
                   <DocumentSigningRejectDialog
-                    document={document}
+                    documentId={document.id}
                     token={token}
                     onRejected={onRejected}
                   />
@@ -357,7 +359,9 @@ export const MultiSignDocumentSigningView = ({
               </div>
 
               {hasDocumentLoaded && (
-                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                <ElementVisible
+                  target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPendingPageNumber}"]`}
+                >
                   {showPendingFieldTooltip && pendingFields.length > 0 && (
                     <FieldToolTip
                       key={pendingFields[0].id}

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

@@ -3,10 +3,11 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
-import { DocumentVisibility } from '@prisma/client';
+import { DocumentVisibility, OrganisationType } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
@@ -16,12 +17,12 @@ import {
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
-import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import {
   type TDocumentMetaDateFormat,
   ZDocumentMetaTimezoneSchema,
-} from '@documenso/trpc/server/document-router/schema';
+} from '@documenso/lib/types/document-meta';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 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';
@@ -55,6 +56,7 @@ export type TDocumentPreferencesFormSchema = {
   documentDateFormat: TDocumentMetaDateFormat | null;
   includeSenderDetails: boolean | null;
   includeSigningCertificate: boolean | null;
+  includeAuditLog: boolean | null;
   signatureTypes: DocumentSignatureType[];
 };
 
@@ -66,6 +68,7 @@ type SettingsSubset = Pick<
   | 'documentDateFormat'
   | 'includeSenderDetails'
   | 'includeSigningCertificate'
+  | 'includeAuditLog'
   | 'typedSignatureEnabled'
   | 'uploadSignatureEnabled'
   | 'drawSignatureEnabled'
@@ -84,8 +87,10 @@ export const DocumentPreferencesForm = ({
 }: DocumentPreferencesFormProps) => {
   const { t } = useLingui();
   const { user, organisations } = useSession();
+  const currentOrganisation = useCurrentOrganisation();
 
   const isPersonalLayoutMode = isPersonalLayout(organisations);
+  const isPersonalOrganisation = currentOrganisation.type === OrganisationType.PERSONAL;
 
   const placeholderEmail = user.email ?? 'user@example.com';
 
@@ -96,6 +101,7 @@ export const DocumentPreferencesForm = ({
     documentDateFormat: ZDocumentMetaTimezoneSchema.nullable(),
     includeSenderDetails: z.boolean().nullable(),
     includeSigningCertificate: z.boolean().nullable(),
+    includeAuditLog: z.boolean().nullable(),
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
@@ -112,6 +118,7 @@ export const DocumentPreferencesForm = ({
       documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
       includeSenderDetails: settings.includeSenderDetails,
       includeSigningCertificate: settings.includeSigningCertificate,
+      includeAuditLog: settings.includeAuditLog,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
@@ -327,7 +334,7 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
-          {!isPersonalLayoutMode && (
+          {!isPersonalLayoutMode && !isPersonalOrganisation && (
             <FormField
               control={form.control}
               name="includeSenderDetails"
@@ -452,6 +459,56 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="includeAuditLog"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Include the Audit Logs in the Document</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value.toString()}
+                    onValueChange={(value) =>
+                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                    }
+                  >
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value="true">
+                        <Trans>Yes</Trans>
+                      </SelectItem>
+
+                      <SelectItem value="false">
+                        <Trans>No</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the audit logs will be included in the document when it is
+                    downloaded. The audit logs can still be downloaded from the logs page
+                    separately.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>

apps/remix/app/components/forms/editor/constants.ts

@@ -0,0 +1,31 @@
+// export const numberFormatValues = [
+//   {
+//     label: '123,456,789.00',
+//     value: '123,456,789.00',
+//   },
+//   {
+//     label: '123.456.789,00',
+//     value: '123.456.789,00',
+//   },
+//   {
+//     label: '123456,789.00',
+//     value: '123456,789.00',
+//   },
+// ];
+
+export const checkboxValidationRules = ['Select at least', 'Select exactly', 'Select at most'];
+export const checkboxValidationLength = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const checkboxValidationSigns = [
+  {
+    label: 'Select at least',
+    value: '>=',
+  },
+  {
+    label: 'Select exactly',
+    value: '=',
+  },
+  {
+    label: 'Select at most',
+    value: '<=',
+  },
+];

apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx

@@ -0,0 +1,293 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { PlusIcon, Trash } from 'lucide-react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  type TCheckboxFieldMeta as CheckboxFieldMeta,
+  ZCheckboxFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import { checkboxValidationLength, checkboxValidationRules } from './constants';
+import {
+  EditorGenericReadOnlyField,
+  EditorGenericRequiredField,
+} from './editor-field-generic-field-forms';
+
+const ZCheckboxFieldFormSchema = ZCheckboxFieldMeta.pick({
+  label: true,
+  direction: true,
+  validationRule: true,
+  validationLength: true,
+  required: true,
+  values: true,
+  readOnly: true,
+})
+  .extend({
+    validationLength: z.coerce.number().optional(),
+  })
+  .refine(
+    (data) => {
+      // You need to specify both validation rule and length together
+      if (data.validationRule && !data.validationLength) {
+        return false;
+      }
+      if (data.validationLength && !data.validationRule) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: 'You need to specify both the validation rule and the number of options',
+      path: ['validationRule'],
+    },
+  );
+
+type TCheckboxFieldFormSchema = z.infer<typeof ZCheckboxFieldFormSchema>;
+
+type EditorFieldCheckboxFormProps = {
+  value: CheckboxFieldMeta | undefined;
+  onValueChange: (value: CheckboxFieldMeta) => void;
+};
+
+export const EditorFieldCheckboxForm = ({
+  value = {
+    type: 'checkbox',
+    direction: 'vertical',
+  },
+  onValueChange,
+}: EditorFieldCheckboxFormProps) => {
+  const form = useForm<TCheckboxFieldFormSchema>({
+    resolver: zodResolver(ZCheckboxFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      label: value.label || '',
+      direction: value.direction || 'vertical',
+      validationRule: value.validationRule || '',
+      validationLength: value.validationLength || 0,
+      values: value.values || [{ id: 1, checked: false, value: '' }],
+      required: value.required || false,
+      readOnly: value.readOnly || false,
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  const addValue = () => {
+    const currentValues = form.getValues('values') || [];
+    const newId =
+      currentValues.length > 0 ? Math.max(...currentValues.map((val) => val.id)) + 1 : 1;
+
+    const newValues = [...currentValues, { id: newId, checked: false, value: '' }];
+    form.setValue('values', newValues);
+  };
+
+  const removeValue = (index: number) => {
+    const currentValues = form.getValues('values') || [];
+
+    if (currentValues.length === 1) {
+      return;
+    }
+
+    const newValues = [...currentValues];
+    newValues.splice(index, 1);
+
+    form.setValue('values', newValues);
+  };
+
+  useEffect(() => {
+    const validatedFormValues = ZCheckboxFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        ...value,
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <FormField
+            control={form.control}
+            name="direction"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Direction</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                      <SelectValue placeholder={t`Select direction`} />
+                    </SelectTrigger>
+                    <SelectContent position="popper">
+                      <SelectItem value="vertical">
+                        <Trans>Vertical</Trans>
+                      </SelectItem>
+                      <SelectItem value="horizontal">
+                        <Trans>Horizontal</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row items-center justify-start gap-x-4">
+            <div className="flex w-2/3 flex-col">
+              <FormField
+                control={form.control}
+                name="validationRule"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Validation</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground bg-background w-full">
+                          <SelectValue placeholder={t`Select at least`} />
+                        </SelectTrigger>
+                        <SelectContent position="popper">
+                          {checkboxValidationRules.map((item, index) => (
+                            <SelectItem key={index} value={item}>
+                              {item}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="mt-3 flex w-1/3 flex-col">
+              <FormField
+                control={form.control}
+                name="validationLength"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Select
+                        value={field.value ? String(field.value) : ''}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger className="text-muted-foreground bg-background mt-5 w-full">
+                          <SelectValue placeholder={t`Pick a number`} />
+                        </SelectTrigger>
+                        <SelectContent position="popper">
+                          {checkboxValidationLength.map((item, index) => (
+                            <SelectItem key={index} value={String(item)}>
+                              {item}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="mt-1">
+            <EditorGenericRequiredField formControl={form.control} />
+          </div>
+
+          <EditorGenericReadOnlyField formControl={form.control} />
+
+          <section className="space-y-2">
+            <div className="-mx-4 mb-4 mt-2">
+              <Separator />
+            </div>
+
+            <div className="flex flex-row items-center justify-between gap-2">
+              <p className="text-sm font-medium">
+                <Trans>Checkbox values</Trans>
+              </p>
+
+              <button type="button" onClick={addValue}>
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            </div>
+
+            <ul className="space-y-2">
+              {(formValues.values || []).map((value, index) => (
+                <li key={`checkbox-value-${index}`} className="flex flex-row items-center gap-2">
+                  <FormField
+                    control={form.control}
+                    name={`values.${index}.checked`}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Checkbox
+                            className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name={`values.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input className="w-full" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <button
+                    type="button"
+                    className="flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    onClick={() => removeValue(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-date-form.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import {
+  DEFAULT_FIELD_FONT_SIZE,
+  type TDateFieldMeta as DateFieldMeta,
+  ZDateFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { Form } from '@documenso/ui/primitives/form/form';
+
+import {
+  EditorGenericFontSizeField,
+  EditorGenericTextAlignField,
+} from './editor-field-generic-field-forms';
+
+const ZDateFieldFormSchema = ZDateFieldMeta.pick({
+  fontSize: true,
+  textAlign: true,
+});
+
+type TDateFieldFormSchema = z.infer<typeof ZDateFieldFormSchema>;
+
+type EditorFieldDateFormProps = {
+  value: DateFieldMeta | undefined;
+  onValueChange: (value: DateFieldMeta) => void;
+};
+
+export const EditorFieldDateForm = ({
+  value = {
+    type: 'date',
+  },
+  onValueChange,
+}: EditorFieldDateFormProps) => {
+  const form = useForm<TDateFieldFormSchema>({
+    resolver: zodResolver(ZDateFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      textAlign: value.textAlign || 'left',
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
+  useEffect(() => {
+    const validatedFormValues = ZDateFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'date',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <EditorGenericFontSizeField formControl={form.control} />
+
+          <EditorGenericTextAlignField formControl={form.control} />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx

@@ -0,0 +1,240 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { PlusIcon, Trash } from 'lucide-react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { type TDropdownFieldMeta as DropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import {
+  EditorGenericReadOnlyField,
+  EditorGenericRequiredField,
+} from './editor-field-generic-field-forms';
+
+const ZDropdownFieldFormSchema = z
+  .object({
+    defaultValue: z.string().optional(),
+    values: z
+      .object({
+        value: z.string().min(1, {
+          message: msg`Option value cannot be empty`.id,
+        }),
+      })
+      .array()
+      .min(1, {
+        message: msg`Dropdown must have at least one option`.id,
+      })
+      .refine(
+        (data) => {
+          // Todo: Envelopes - This doesn't work.
+          console.log({
+            data,
+          });
+
+          if (data) {
+            const values = data.map((item) => item.value);
+            return new Set(values).size === values.length;
+          }
+          return true;
+        },
+        {
+          message: 'Duplicate values are not allowed',
+        },
+      ),
+    required: z.boolean().optional(),
+    readOnly: z.boolean().optional(),
+  })
+  .refine(
+    (data) => {
+      // Default value must be one of the available options
+      if (data.defaultValue && data.values) {
+        return data.values.some((item) => item.value === data.defaultValue);
+      }
+      return true;
+    },
+    {
+      message: 'Default value must be one of the available options',
+      path: ['defaultValue'],
+    },
+  );
+
+type TDropdownFieldFormSchema = z.infer<typeof ZDropdownFieldFormSchema>;
+
+type EditorFieldDropdownFormProps = {
+  value: DropdownFieldMeta | undefined;
+  onValueChange: (value: DropdownFieldMeta) => void;
+};
+
+export const EditorFieldDropdownForm = ({
+  value = {
+    type: 'dropdown',
+  },
+  onValueChange,
+}: EditorFieldDropdownFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<TDropdownFieldFormSchema>({
+    resolver: zodResolver(ZDropdownFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      defaultValue: value.defaultValue,
+      values: value.values || [{ value: 'Option 1' }],
+      required: value.required || false,
+      readOnly: value.readOnly || false,
+    },
+  });
+
+  const formValues = useWatch({
+    control: form.control,
+  });
+
+  const addValue = () => {
+    const currentValues = form.getValues('values') || [];
+    const newValues = [...currentValues, { value: 'New option' }];
+
+    form.setValue('values', newValues);
+  };
+
+  const removeValue = (index: number) => {
+    const currentValues = form.getValues('values') || [];
+
+    if (currentValues.length === 1) {
+      return;
+    }
+
+    const newValues = [...currentValues];
+    newValues.splice(index, 1);
+
+    form.setValue('values', newValues);
+  };
+
+  useEffect(() => {
+    const validatedFormValues = ZDropdownFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'dropdown',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  const { formState } = form;
+
+  useEffect(() => {
+    console.log({
+      errors: formState.errors,
+      formValues,
+    });
+  }, [formState, formState.errors, formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <FormField
+            control={form.control}
+            name="defaultValue"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Select default option</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    // Todo: Envelopes - This is buggy, removing/adding should update the default value.
+                    {...field}
+                    value={field.value}
+                    onValueChange={(val) => field.onChange(val)}
+                  >
+                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                      <SelectValue placeholder={t`Default Value`} />
+                    </SelectTrigger>
+                    <SelectContent position="popper">
+                      {(formValues.values || []).map((item, index) => (
+                        <SelectItem key={index} value={item.value || ''}>
+                          {item.value}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="mt-1">
+            <EditorGenericRequiredField formControl={form.control} />
+          </div>
+
+          <EditorGenericReadOnlyField formControl={form.control} />
+
+          <section className="space-y-2">
+            <div className="-mx-4 mb-4 mt-2">
+              <Separator />
+            </div>
+
+            <div className="flex flex-row items-center justify-between gap-2">
+              <p className="text-sm font-medium">
+                <Trans>Dropdown values</Trans>
+              </p>
+
+              <button type="button" onClick={addValue}>
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            </div>
+
+            <ul className="space-y-2">
+              {(formValues.values || []).map((value, index) => (
+                <li key={`dropdown-value-${index}`} className="flex flex-row gap-2">
+                  <FormField
+                    control={form.control}
+                    name={`values.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        <FormControl>
+                          <Input {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <button
+                    type="button"
+                    className="flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    onClick={() => removeValue(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-email-form.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import {
+  DEFAULT_FIELD_FONT_SIZE,
+  type TEmailFieldMeta as EmailFieldMeta,
+  ZEmailFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { Form } from '@documenso/ui/primitives/form/form';
+
+import {
+  EditorGenericFontSizeField,
+  EditorGenericTextAlignField,
+} from './editor-field-generic-field-forms';
+
+const ZEmailFieldFormSchema = ZEmailFieldMeta.pick({
+  fontSize: true,
+  textAlign: true,
+});
+
+type TEmailFieldFormSchema = z.infer<typeof ZEmailFieldFormSchema>;
+
+type EditorFieldEmailFormProps = {
+  value: EmailFieldMeta | undefined;
+  onValueChange: (value: EmailFieldMeta) => void;
+};
+
+export const EditorFieldEmailForm = ({
+  value = {
+    type: 'email',
+  },
+  onValueChange,
+}: EditorFieldEmailFormProps) => {
+  const form = useForm<TEmailFieldFormSchema>({
+    resolver: zodResolver(ZEmailFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      textAlign: value.textAlign || 'left',
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
+  useEffect(() => {
+    const validatedFormValues = ZEmailFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'email',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <EditorGenericFontSizeField formControl={form.control} />
+
+          <EditorGenericTextAlignField formControl={form.control} />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx

@@ -0,0 +1,222 @@
+import { useEffect } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { type Control, useFormContext } from 'react-hook-form';
+
+import { cn } from '@documenso/ui/lib/utils';
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+// Can't seem to get the non-any type to work with correct types.
+// Eg Control<{ fontSize?: number } doesn't seem to work when there are required items.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type FormControlType = Control<any>;
+
+export const EditorGenericFontSizeField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <FormField
+      control={formControl}
+      name="fontSize"
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormLabel>
+            <Trans>Font Size</Trans>
+          </FormLabel>
+          <FormControl>
+            <Input
+              type="number"
+              min={8}
+              max={96}
+              className="bg-background"
+              placeholder={t`Field font size`}
+              {...field}
+              onChange={(e) => {
+                field.onChange(Number(e.target.value));
+              }}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const EditorGenericTextAlignField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <FormField
+      control={formControl}
+      name="textAlign"
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormLabel>
+            <Trans>Text Align</Trans>
+          </FormLabel>
+          <FormControl>
+            <Select {...field} onValueChange={field.onChange}>
+              <SelectTrigger>
+                <SelectValue placeholder={t`Select text align`} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="left">
+                  <Trans>Left</Trans>
+                </SelectItem>
+                <SelectItem value="center">
+                  <Trans>Center</Trans>
+                </SelectItem>
+                <SelectItem value="right">
+                  <Trans>Right</Trans>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const EditorGenericRequiredField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { watch, setValue } = useFormContext();
+
+  const readOnly = watch('readOnly');
+
+  useEffect(() => {
+    if (readOnly) {
+      setValue('required', false);
+    }
+  }, [readOnly]);
+
+  return (
+    <FormField
+      control={formControl}
+      name="required"
+      render={({ field }) => (
+        <FormItem className={cn('flex items-center space-x-2', className)}>
+          <FormControl>
+            <div className="flex items-center">
+              <Checkbox
+                id="field-required"
+                checked={field.value}
+                onCheckedChange={field.onChange}
+              />
+
+              <label className="text-muted-foreground ml-2 text-sm" htmlFor="field-required">
+                <Trans>Required Field</Trans>
+              </label>
+            </div>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const EditorGenericReadOnlyField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { watch, setValue } = useFormContext();
+
+  const required = watch('required');
+
+  useEffect(() => {
+    if (required) {
+      setValue('readOnly', false);
+    }
+  }, [required]);
+
+  return (
+    <FormField
+      control={formControl}
+      name="readOnly"
+      render={({ field }) => (
+        <FormItem className={cn('flex items-center space-x-2', className)}>
+          <FormControl>
+            <div className="flex items-center">
+              <Checkbox
+                id="field-read-only"
+                checked={field.value}
+                onCheckedChange={field.onChange}
+              />
+
+              <label className="text-muted-foreground ml-2 text-sm" htmlFor="field-read-only">
+                <Trans>Read Only</Trans>
+              </label>
+            </div>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const EditorGenericLabelField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <FormField
+      control={formControl}
+      name="label"
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormLabel>
+            <Trans>Label</Trans>
+          </FormLabel>
+          <FormControl>
+            <Input placeholder={t`Field label`} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

apps/remix/app/components/forms/editor/editor-field-initials-form.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import {
+  DEFAULT_FIELD_FONT_SIZE,
+  type TInitialsFieldMeta as InitialsFieldMeta,
+  ZInitialsFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { Form } from '@documenso/ui/primitives/form/form';
+
+import {
+  EditorGenericFontSizeField,
+  EditorGenericTextAlignField,
+} from './editor-field-generic-field-forms';
+
+const ZInitialsFieldFormSchema = ZInitialsFieldMeta.pick({
+  fontSize: true,
+  textAlign: true,
+});
+
+type TInitialsFieldFormSchema = z.infer<typeof ZInitialsFieldFormSchema>;
+
+type EditorFieldInitialsFormProps = {
+  value: InitialsFieldMeta | undefined;
+  onValueChange: (value: InitialsFieldMeta) => void;
+};
+
+export const EditorFieldInitialsForm = ({
+  value = {
+    type: 'initials',
+  },
+  onValueChange,
+}: EditorFieldInitialsFormProps) => {
+  const form = useForm<TInitialsFieldFormSchema>({
+    resolver: zodResolver(ZInitialsFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      textAlign: value.textAlign || 'left',
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
+  useEffect(() => {
+    const validatedFormValues = ZInitialsFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'initials',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <EditorGenericFontSizeField formControl={form.control} />
+
+          <EditorGenericTextAlignField formControl={form.control} />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-name-form.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import {
+  DEFAULT_FIELD_FONT_SIZE,
+  type TNameFieldMeta as NameFieldMeta,
+  ZNameFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { Form } from '@documenso/ui/primitives/form/form';
+
+import {
+  EditorGenericFontSizeField,
+  EditorGenericTextAlignField,
+} from './editor-field-generic-field-forms';
+
+const ZNameFieldFormSchema = ZNameFieldMeta.pick({
+  fontSize: true,
+  textAlign: true,
+});
+
+type TNameFieldFormSchema = z.infer<typeof ZNameFieldFormSchema>;
+
+type EditorFieldNameFormProps = {
+  value: NameFieldMeta | undefined;
+  onValueChange: (value: NameFieldMeta) => void;
+};
+
+export const EditorFieldNameForm = ({
+  value = {
+    type: 'name',
+  },
+  onValueChange,
+}: EditorFieldNameFormProps) => {
+  const form = useForm<TNameFieldFormSchema>({
+    resolver: zodResolver(ZNameFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      textAlign: value.textAlign || 'left',
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
+  useEffect(() => {
+    const validatedFormValues = ZNameFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'name',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <EditorGenericFontSizeField formControl={form.control} />
+
+          <EditorGenericTextAlignField formControl={form.control} />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-number-form.tsx

@@ -0,0 +1,277 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import {
+  type TNumberFieldMeta as NumberFieldMeta,
+  ZNumberFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { numberFormatValues } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import {
+  EditorGenericFontSizeField,
+  EditorGenericLabelField,
+  EditorGenericReadOnlyField,
+  EditorGenericRequiredField,
+  EditorGenericTextAlignField,
+} from './editor-field-generic-field-forms';
+
+const ZNumberFieldFormSchema = ZNumberFieldMeta.pick({
+  label: true,
+  placeholder: true,
+  value: true,
+  numberFormat: true,
+  fontSize: true,
+  textAlign: true,
+  required: true,
+  readOnly: true,
+  minValue: true,
+  maxValue: true,
+})
+  .refine(
+    (data) => {
+      // Minimum value cannot be greater than maximum value
+      if (typeof data.minValue === 'number' && typeof data.maxValue === 'number') {
+        return data.minValue <= data.maxValue;
+      }
+      return true;
+    },
+    {
+      message: 'Minimum value cannot be greater than maximum value',
+      path: ['minValue'],
+    },
+  )
+  .refine(
+    (data) => {
+      // A read-only field must have a value greater than 0
+      if (data.readOnly && data.value !== undefined && data.value !== '') {
+        const numberValue = parseFloat(data.value);
+        return !isNaN(numberValue) && numberValue > 0;
+      }
+      return !data.readOnly || (data.value !== undefined && data.value !== '');
+    },
+    {
+      message: 'A read-only field must have a value greater than 0',
+      path: ['value'],
+    },
+  );
+
+type TNumberFieldFormSchema = z.infer<typeof ZNumberFieldFormSchema>;
+
+type EditorFieldNumberFormProps = {
+  value: NumberFieldMeta | undefined;
+  onValueChange: (value: NumberFieldMeta) => void;
+};
+
+export const EditorFieldNumberForm = ({
+  value = {
+    type: 'number',
+  },
+  onValueChange,
+}: EditorFieldNumberFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<TNumberFieldFormSchema>({
+    resolver: zodResolver(ZNumberFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      label: value.label || '',
+      placeholder: value.placeholder || '',
+      value: value.value || '',
+      numberFormat: value.numberFormat || null,
+      fontSize: value.fontSize || 14,
+      textAlign: value.textAlign || 'left',
+      required: value.required || false,
+      readOnly: value.readOnly || false,
+      minValue: value.minValue,
+      maxValue: value.maxValue,
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
+  useEffect(() => {
+    const validatedFormValues = ZNumberFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'number',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <EditorGenericLabelField formControl={form.control} />
+
+          <FormField
+            control={form.control}
+            name="placeholder"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Placeholder</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" placeholder={t`Placeholder`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="value"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Value</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" placeholder={t`Value`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="numberFormat"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Number format</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    value={field.value === null ? '-1' : field.value}
+                    onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                  >
+                    <SelectTrigger className="text-muted-foreground bg-background w-full">
+                      <SelectValue placeholder={t`Field format`} />
+                    </SelectTrigger>
+                    <SelectContent position="popper">
+                      {numberFormatValues.map((item, index) => (
+                        <SelectItem key={index} value={item.value}>
+                          {item.label}
+                        </SelectItem>
+                      ))}
+
+                      <SelectItem value={'-1'}>
+                        <Trans>None</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex w-full flex-row gap-x-4">
+            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
+
+            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
+          </div>
+
+          <div className="mt-1">
+            <EditorGenericRequiredField formControl={form.control} />
+          </div>
+
+          <EditorGenericReadOnlyField formControl={form.control} />
+
+          {/* Validation section */}
+          <section className="space-y-2">
+            <div className="-mx-4 mb-4 mt-2">
+              <Separator />
+            </div>
+
+            <p className="text-sm font-medium">
+              <Trans>Validation</Trans>
+            </p>
+
+            <div className="flex flex-row gap-x-4">
+              <FormField
+                control={form.control}
+                name="minValue"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>
+                      <Trans>Min</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        placeholder="E.g. 0"
+                        {...field}
+                        value={field.value ?? ''}
+                        onChange={(e) =>
+                          field.onChange(e.target.value === '' ? null : e.target.value)
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="maxValue"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>
+                      <Trans>Max</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        placeholder="E.g. 100"
+                        {...field}
+                        value={field.value ?? ''}
+                        onChange={(e) =>
+                          field.onChange(e.target.value === '' ? null : e.target.value)
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </section>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-radio-form.tsx

@@ -0,0 +1,194 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { PlusIcon, Trash } from 'lucide-react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { type TRadioFieldMeta as RadioFieldMeta } from '@documenso/lib/types/field-meta';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import {
+  EditorGenericReadOnlyField,
+  EditorGenericRequiredField,
+} from './editor-field-generic-field-forms';
+
+const ZRadioFieldFormSchema = z
+  .object({
+    label: z.string().optional(),
+    values: z
+      .object({ id: z.number(), checked: z.boolean(), value: z.string() })
+      .array()
+      .min(1)
+      .optional(),
+    required: z.boolean().optional(),
+    readOnly: z.boolean().optional(),
+    direction: z.enum(['vertical', 'horizontal']).optional(),
+  })
+  .refine(
+    (data) => {
+      // There cannot be more than one checked option
+      if (data.values) {
+        const checkedValues = data.values.filter((option) => option.checked);
+        return checkedValues.length <= 1;
+      }
+      return true;
+    },
+    {
+      message: 'There cannot be more than one checked option',
+      path: ['values'],
+    },
+  );
+
+type TRadioFieldFormSchema = z.infer<typeof ZRadioFieldFormSchema>;
+
+export type EditorFieldRadioFormProps = {
+  value: RadioFieldMeta | undefined;
+  onValueChange: (value: RadioFieldMeta) => void;
+};
+
+export const EditorFieldRadioForm = ({
+  value = {
+    type: 'radio',
+    direction: 'vertical',
+  },
+  onValueChange,
+}: EditorFieldRadioFormProps) => {
+  const form = useForm<TRadioFieldFormSchema>({
+    resolver: zodResolver(ZRadioFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      label: value.label || '',
+      values: value.values || [{ id: 1, checked: false, value: 'Default value' }],
+      required: value.required || false,
+      readOnly: value.readOnly || false,
+      direction: value.direction || 'vertical',
+    },
+  });
+
+  const formValues = useWatch({
+    control: form.control,
+  });
+
+  const addValue = () => {
+    const currentValues = form.getValues('values') || [];
+    const newId =
+      currentValues.length > 0 ? Math.max(...currentValues.map((val) => val.id)) + 1 : 1;
+
+    const newValues = [...currentValues, { id: newId, checked: false, value: '' }];
+    form.setValue('values', newValues);
+  };
+
+  const removeValue = (index: number) => {
+    const currentValues = form.getValues('values') || [];
+
+    if (currentValues.length === 1) {
+      return;
+    }
+
+    const newValues = [...currentValues];
+    newValues.splice(index, 1);
+
+    form.setValue('values', newValues);
+  };
+
+  useEffect(() => {
+    const validatedFormValues = ZRadioFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'radio',
+        ...validatedFormValues.data,
+        direction: validatedFormValues.data.direction || 'vertical',
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2 pb-2">
+          <EditorGenericRequiredField formControl={form.control} />
+
+          <EditorGenericReadOnlyField formControl={form.control} />
+
+          <section className="space-y-2">
+            <div className="-mx-4 mb-4 mt-2">
+              <Separator />
+            </div>
+
+            <div className="flex flex-row items-center justify-between gap-2">
+              <p className="text-sm font-medium">
+                <Trans>Radio values</Trans>
+              </p>
+
+              <button type="button" onClick={addValue}>
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            </div>
+
+            <ul className="space-y-2">
+              {(formValues.values || []).map((value, index) => (
+                <li key={`radio-value-${index}`} className="flex flex-row items-center gap-2">
+                  <FormField
+                    control={form.control}
+                    name={`values.${index}.checked`}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Checkbox
+                            className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                            checked={field.value}
+                            onCheckedChange={(value) => {
+                              // Uncheck all other values.
+                              const currentValues = form.getValues('values') || [];
+
+                              if (value) {
+                                const newValues = currentValues.map((val) => ({
+                                  ...val,
+                                  checked: false,
+                                }));
+
+                                form.setValue('values', newValues);
+                              }
+
+                              field.onChange(value);
+                            }}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name={`values.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input className="w-full" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  <button
+                    type="button"
+                    className="flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    onClick={() => removeValue(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -0,0 +1,191 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+
+import {
+  EditorGenericFontSizeField,
+  EditorGenericReadOnlyField,
+  EditorGenericRequiredField,
+  EditorGenericTextAlignField,
+} from './editor-field-generic-field-forms';
+
+const ZTextFieldFormSchema = z
+  .object({
+    label: z.string().optional(),
+    placeholder: z.string().optional(),
+    text: z.string().optional(),
+    characterLimit: z.coerce.number().min(0).optional(),
+    fontSize: z.coerce.number().min(8).max(96).optional(),
+    textAlign: z.enum(['left', 'center', 'right']).optional(),
+    required: z.boolean().optional(),
+    readOnly: z.boolean().optional(),
+  })
+  .refine(
+    (data) => {
+      // A read-only field must have text
+      return !data.readOnly || (data.text && data.text.length > 0);
+    },
+    {
+      message: 'A read-only field must have text',
+      path: ['text'],
+    },
+  );
+
+type TTextFieldFormSchema = z.infer<typeof ZTextFieldFormSchema>;
+
+type EditorFieldTextFormProps = {
+  value: TextFieldMeta | undefined;
+  onValueChange: (value: TextFieldMeta) => void;
+};
+
+export const EditorFieldTextForm = ({
+  value = {
+    type: 'text',
+  },
+  onValueChange,
+}: EditorFieldTextFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<TTextFieldFormSchema>({
+    resolver: zodResolver(ZTextFieldFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      label: value.label || '',
+      placeholder: value.placeholder || '',
+      text: value.text || '',
+      characterLimit: value.characterLimit || 0,
+      fontSize: value.fontSize || 14,
+      textAlign: value.textAlign || 'left',
+      required: value.required || false,
+      readOnly: value.readOnly || false,
+    },
+  });
+
+  const { control } = form;
+
+  const formValues = useWatch({
+    control,
+  });
+
+  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
+  useEffect(() => {
+    const validatedFormValues = ZTextFieldFormSchema.safeParse(formValues);
+
+    if (validatedFormValues.success) {
+      onValueChange({
+        type: 'text',
+        ...validatedFormValues.data,
+      });
+    }
+  }, [formValues]);
+
+  return (
+    <Form {...form}>
+      <form>
+        <fieldset className="flex flex-col gap-2">
+          <FormField
+            control={form.control}
+            name="label"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Label</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input placeholder={t`Field label`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="placeholder"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Placeholder</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input placeholder={t`Field placeholder`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="text"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Add text</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Textarea
+                    className="h-auto"
+                    placeholder={t`Add text to the field`}
+                    {...field}
+                    rows={1}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="characterLimit"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Character Limit</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    min={0}
+                    className="bg-background"
+                    placeholder={t`Field character limit`}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex w-full flex-row gap-x-4">
+            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
+
+            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
+          </div>
+
+          <div className="mt-1">
+            <EditorGenericRequiredField formControl={form.control} />
+          </div>
+
+          <EditorGenericReadOnlyField formControl={form.control} />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

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

@@ -114,7 +114,7 @@ export const SignInForm = ({
   }, [returnTo]);
 
   const { mutateAsync: createPasskeySigninOptions } =
-    trpc.auth.createPasskeySigninOptions.useMutation();
+    trpc.auth.passkey.createSigninOptions.useMutation();
 
   const form = useForm<TSignInFormSchema>({
     values: {

apps/remix/app/components/forms/support-ticket-form.tsx

@@ -0,0 +1,138 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+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 { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZSupportTicketSchema = z.object({
+  subject: z.string().min(3, 'Subject is required'),
+  message: z.string().min(10, 'Message must be at least 10 characters'),
+});
+
+type TSupportTicket = z.infer<typeof ZSupportTicketSchema>;
+
+export type SupportTicketFormProps = {
+  organisationId: string;
+  teamId?: string | null;
+  onSuccess?: () => void;
+  onClose?: () => void;
+};
+
+export const SupportTicketForm = ({
+  organisationId,
+  teamId,
+  onSuccess,
+  onClose,
+}: SupportTicketFormProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: submitSupportTicket, isPending } =
+    trpc.profile.submitSupportTicket.useMutation();
+
+  const form = useForm<TSupportTicket>({
+    resolver: zodResolver(ZSupportTicketSchema),
+    defaultValues: {
+      subject: '',
+      message: '',
+    },
+  });
+
+  const isLoading = form.formState.isLoading || isPending;
+
+  const onSubmit = async (data: TSupportTicket) => {
+    const { subject, message } = data;
+
+    try {
+      await submitSupportTicket({
+        subject,
+        message,
+        organisationId,
+        teamId,
+      });
+
+      toast({
+        title: t`Support ticket created`,
+        description: t`Your support request has been submitted. We'll get back to you soon!`,
+      });
+
+      if (onSuccess) {
+        onSuccess();
+      }
+
+      form.reset();
+    } catch (err) {
+      toast({
+        title: t`Failed to create support ticket`,
+        description: t`An error occurred. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset disabled={isLoading} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Subject</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Message</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Textarea rows={5} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-2 flex flex-row gap-2">
+              <Button type="submit" size="sm" loading={isLoading}>
+                <Trans>Submit</Trans>
+              </Button>
+              {onClose && (
+                <Button variant="outline" size="sm" type="button" onClick={onClose}>
+                  <Trans>Close</Trans>
+                </Button>
+              )}
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </>
+  );
+};

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

@@ -13,7 +13,7 @@ import type { z } from 'zod';
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
-import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -47,7 +47,7 @@ export const EXPIRATION_DATES = {
   ONE_YEAR: msg`12 months`,
 } as const;
 
-const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.pick({
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
   tokenName: true,
   expirationDate: true,
 });
@@ -75,7 +75,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
   const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
   const [noExpirationDate, setNoExpirationDate] = useState(false);
 
-  const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.create.useMutation({
     onSuccess(data) {
       setNewlyCreatedToken(data);
     },

apps/remix/app/components/general/admin-monthly-active-user-charts.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { DateTime } from 'luxon';
 import type { TooltipProps } from 'recharts';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

apps/remix/app/components/general/app-command-menu.tsx

@@ -64,7 +64,7 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const [pages, setPages] = useState<string[]>([]);
 
   const { data: searchDocumentsData, isPending: isSearchingDocuments } =
-    trpcReact.document.searchDocuments.useQuery(
+    trpcReact.document.search.useQuery(
       {
         query: search,
       },

apps/remix/app/components/general/app-header.tsx

@@ -60,7 +60,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
-          to={`${getRootHref(params, { returnEmptyRootString: true })}`}
+          to={getRootHref(params)}
           className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
           <BrandingLogo className="h-6 w-auto" />

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

@@ -55,7 +55,7 @@ import { DocumentSigningRecipientProvider } from '../document-signing/document-s
 
 export type DirectTemplateSigningFormProps = {
   flowStep: DocumentFlowStep;
-  directRecipient: Recipient;
+  directRecipient: Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
   directRecipientFields: Field[];
   template: Omit<TTemplate, 'user'>;
   onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
@@ -79,6 +79,8 @@ export const DirectTemplateSigningForm = ({
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const highestPageNumber = Math.max(...localFields.map((field) => field.page));
+
   const fieldsRequiringValidation = useMemo(() => {
     return localFields.filter((field) => isFieldUnsignedAndRequired(field));
   }, [localFields]);
@@ -221,7 +223,9 @@ export const DirectTemplateSigningForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+        >
           {validateUninsertedFields && uninsertedFields[0] && (
             <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
               <Trans>Click to insert field</Trans>
@@ -413,11 +417,11 @@ export const DirectTemplateSigningForm = ({
 
           <DocumentSigningCompleteDialog
             isSubmitting={isSubmitting}
-            onSignatureComplete={handleSubmit}
+            onSignatureComplete={async () => handleSubmit()}
             documentTitle={template.title}
             fields={localFields}
             fieldsValidated={fieldsValidated}
-            role={directRecipient.role}
+            recipient={directRecipient}
           />
         </div>
       </DocumentFlowFormContainerFooter>

apps/remix/app/components/general/document-signing/access-auth-2fa-form.tsx

@@ -0,0 +1,312 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { ArrowLeftIcon, KeyIcon, MailIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { Form, FormField, FormItem } from '@documenso/ui/primitives/form/form';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+type FormStep = 'method-selection' | 'code-input';
+type TwoFactorMethod = 'email' | 'authenticator';
+
+const ZAccessAuth2FAFormSchema = z.object({
+  token: z.string().length(6, { message: 'Token must be 6 characters long' }),
+});
+
+type TAccessAuth2FAFormSchema = z.infer<typeof ZAccessAuth2FAFormSchema>;
+
+export type AccessAuth2FAFormProps = {
+  onSubmit: (accessAuthOptions: TRecipientAccessAuth) => void;
+  token: string;
+  error?: string | null;
+};
+
+export const AccessAuth2FAForm = ({ onSubmit, token, error }: AccessAuth2FAFormProps) => {
+  const [step, setStep] = useState<FormStep>('method-selection');
+  const [selectedMethod, setSelectedMethod] = useState<TwoFactorMethod | null>(null);
+
+  const [expiresAt, setExpiresAt] = useState<Date | null>(null);
+  const [millisecondsRemaining, setMillisecondsRemaining] = useState<number | null>(null);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { user } = useRequiredDocumentSigningAuthContext();
+
+  const { mutateAsync: request2FAEmail, isPending: isRequesting2FAEmail } =
+    trpc.document.accessAuth.request2FAEmail.useMutation();
+
+  const form = useForm({
+    resolver: zodResolver(ZAccessAuth2FAFormSchema),
+    defaultValues: {
+      token: '',
+    },
+  });
+
+  const hasAuthenticatorEnabled = user?.twoFactorEnabled === true;
+
+  const onMethodSelect = async (method: TwoFactorMethod) => {
+    setSelectedMethod(method);
+
+    if (method === 'email') {
+      try {
+        const result = await request2FAEmail({
+          token: token,
+        });
+
+        setExpiresAt(result.expiresAt);
+        setMillisecondsRemaining(result.expiresAt.valueOf() - Date.now());
+
+        setStep('code-input');
+      } catch (error) {
+        toast({
+          title: _(msg`An error occurred`),
+          description: _(
+            msg`We encountered an unknown error while attempting to request the two-factor authentication code. Please try again later.`,
+          ),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+    }
+
+    setStep('code-input');
+  };
+
+  const onFormSubmit = (data: TAccessAuth2FAFormSchema) => {
+    if (!selectedMethod) {
+      return;
+    }
+
+    // Prepare the auth options for the completion attempt
+    const accessAuthOptions: TRecipientAccessAuth = {
+      type: 'TWO_FACTOR_AUTH',
+      token: data.token, // Just the user's code - backend will validate using method type
+      method: selectedMethod,
+    };
+
+    onSubmit(accessAuthOptions);
+  };
+
+  const onGoBack = () => {
+    setStep('method-selection');
+    setSelectedMethod(null);
+    setExpiresAt(null);
+    setMillisecondsRemaining(null);
+  };
+
+  const onResendEmail = async () => {
+    if (selectedMethod !== 'email') {
+      return;
+    }
+
+    try {
+      const result = await request2FAEmail({
+        token: token,
+      });
+
+      setExpiresAt(result.expiresAt);
+      setMillisecondsRemaining(result.expiresAt.valueOf() - Date.now());
+    } catch (error) {
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to request the two-factor authentication code. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (expiresAt) {
+        setMillisecondsRemaining(expiresAt.valueOf() - Date.now());
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [expiresAt]);
+
+  return (
+    <div className="py-4">
+      {step === 'method-selection' && (
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">
+              <Trans>Choose verification method</Trans>
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              <Trans>Please select how you'd like to receive your verification code.</Trans>
+            </p>
+          </div>
+
+          {error && (
+            <Alert variant="destructive" padding="tight" className="text-sm">
+              {error}
+            </Alert>
+          )}
+
+          <div className="space-y-3">
+            <Button
+              type="button"
+              variant="outline"
+              className="flex h-auto w-full justify-start gap-3 p-4"
+              onClick={async () => onMethodSelect('email')}
+              disabled={isRequesting2FAEmail}
+            >
+              <MailIcon className="h-5 w-5" />
+              <div className="text-left">
+                <div className="font-medium">
+                  <Trans>Email verification</Trans>
+                </div>
+                <div className="text-muted-foreground text-sm">
+                  <Trans>We'll send a 6-digit code to your email</Trans>
+                </div>
+              </div>
+            </Button>
+
+            {hasAuthenticatorEnabled && (
+              <Button
+                type="button"
+                variant="outline"
+                className="flex h-auto w-full justify-start gap-3 p-4"
+                onClick={async () => onMethodSelect('authenticator')}
+                disabled={isRequesting2FAEmail}
+              >
+                <KeyIcon className="h-5 w-5" />
+                <div className="text-left">
+                  <div className="font-medium">
+                    <Trans>Authenticator app</Trans>
+                  </div>
+                  <div className="text-muted-foreground text-sm">
+                    <Trans>Use your authenticator app to generate a code</Trans>
+                  </div>
+                </div>
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {step === 'code-input' && (
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Button type="button" variant="ghost" size="sm" onClick={onGoBack}>
+              <ArrowLeftIcon className="h-4 w-4" />
+            </Button>
+
+            <h3 className="text-lg font-semibold">
+              <Trans>Enter verification code</Trans>
+            </h3>
+          </div>
+
+          <div className="text-muted-foreground text-sm">
+            {selectedMethod === 'email' ? (
+              <Trans>
+                We've sent a 6-digit verification code to your email. Please enter it below to
+                complete the document.
+              </Trans>
+            ) : (
+              <Trans>
+                Please open your authenticator app and enter the 6-digit code for this document.
+              </Trans>
+            )}
+          </div>
+
+          <Form {...form}>
+            <form
+              id="access-auth-2fa-form"
+              className="space-y-4"
+              onSubmit={form.handleSubmit(onFormSubmit)}
+            >
+              <fieldset disabled={isRequesting2FAEmail || form.formState.isSubmitting}>
+                <FormField
+                  control={form.control}
+                  name="token"
+                  render={({ field }) => (
+                    <FormItem className="flex-1 items-center justify-center">
+                      <PinInput
+                        {...field}
+                        maxLength={6}
+                        autoFocus
+                        inputMode="numeric"
+                        pattern="^\d+$"
+                        aria-label="2FA code"
+                        containerClassName="h-12 justify-center"
+                      >
+                        <PinInputGroup>
+                          <PinInputSlot className="h-12 w-12 text-lg" index={0} />
+                          <PinInputSlot className="h-12 w-12 text-lg" index={1} />
+                          <PinInputSlot className="h-12 w-12 text-lg" index={2} />
+                          <PinInputSlot className="h-12 w-12 text-lg" index={3} />
+                          <PinInputSlot className="h-12 w-12 text-lg" index={4} />
+                          <PinInputSlot className="h-12 w-12 text-lg" index={5} />
+                        </PinInputGroup>
+                      </PinInput>
+
+                      {expiresAt && millisecondsRemaining !== null && (
+                        <div
+                          className={cn('text-muted-foreground mt-2 text-center text-sm', {
+                            'text-destructive': millisecondsRemaining <= 0,
+                          })}
+                        >
+                          <Trans>
+                            Expires in{' '}
+                            {DateTime.fromMillis(Math.max(millisecondsRemaining, 0)).toFormat(
+                              'mm:ss',
+                            )}
+                          </Trans>
+                        </div>
+                      )}
+                    </FormItem>
+                  )}
+                />
+
+                <div className="mt-4 space-y-2">
+                  <Button
+                    type="submit"
+                    form="access-auth-2fa-form"
+                    className="w-full"
+                    disabled={!form.formState.isValid}
+                    loading={isRequesting2FAEmail || form.formState.isSubmitting}
+                  >
+                    <Trans>Verify & Complete</Trans>
+                  </Button>
+
+                  {selectedMethod === 'email' && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="w-full"
+                      onClick={onResendEmail}
+                      loading={isRequesting2FAEmail}
+                    >
+                      <Trans>Resend code</Trans>
+                    </Button>
+                  )}
+                </div>
+              </fieldset>
+            </form>
+          </Form>
+        </div>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx

@@ -77,7 +77,7 @@ export const DocumentSigningAuthPasskey = ({
   });
 
   const { mutateAsync: createPasskeyAuthenticationOptions } =
-    trpc.auth.createPasskeyAuthenticationOptions.useMutation();
+    trpc.auth.passkey.createAuthenticationOptions.useMutation();
 
   const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
 

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

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
-import { type Document, FieldType, type Passkey, type Recipient } from '@prisma/client';
+import { type Envelope, FieldType, type Passkey, type Recipient } from '@prisma/client';
 
 import type { SessionUser } from '@documenso/auth/server/lib/session/session';
 import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
@@ -24,14 +24,16 @@ type PasskeyData = {
   isError: boolean;
 };
 
+type SigningAuthRecipient = Pick<Recipient, 'authOptions' | 'email' | 'role' | 'name' | 'token'>;
+
 export type DocumentSigningAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;
-  documentAuthOptions: Document['authOptions'];
+  documentAuthOptions: Envelope['authOptions'];
   documentAuthOption: TDocumentAuthOptions;
-  setDocumentAuthOptions: (_value: Document['authOptions']) => void;
-  recipient: Recipient;
+  setDocumentAuthOptions: (_value: Envelope['authOptions']) => void;
+  recipient: SigningAuthRecipient;
   recipientAuthOption: TRecipientAuthOptions;
-  setRecipient: (_value: Recipient) => void;
+  setRecipient: (_value: SigningAuthRecipient) => void;
   derivedRecipientAccessAuth: TRecipientAccessAuthTypes[];
   derivedRecipientActionAuth: TRecipientActionAuthTypes[];
   isAuthRedirectRequired: boolean;
@@ -61,8 +63,8 @@ export const useRequiredDocumentSigningAuthContext = () => {
 };
 
 export interface DocumentSigningAuthProviderProps {
-  documentAuthOptions: Document['authOptions'];
-  recipient: Recipient;
+  documentAuthOptions: Envelope['authOptions'];
+  recipient: SigningAuthRecipient;
   user?: SessionUser | null;
   children: React.ReactNode;
 }
@@ -93,7 +95,7 @@ export const DocumentSigningAuthProvider = ({
     [documentAuthOptions, recipient],
   );
 
-  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
+  const passkeyQuery = trpc.auth.passkey.find.useQuery(
     {
       perPage: MAXIMUM_PASSKEYS,
     },

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

@@ -2,12 +2,17 @@ import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
-import type { Field } from '@prisma/client';
+import type { Field, Recipient } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import {
+  type TRecipientAccessAuth,
+  ZDocumentAccessAuthSchema,
+} from '@documenso/lib/types/document-auth';
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -27,15 +32,21 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 
+import { AccessAuth2FAForm } from '~/components/general/document-signing/access-auth-2fa-form';
 import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
 
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
 export type DocumentSigningCompleteDialogProps = {
   isSubmitting: boolean;
   documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
-  onSignatureComplete: (nextSigner?: { name: string; email: string }) => void | Promise<void>;
-  role: RecipientRole;
+  onSignatureComplete: (
+    nextSigner?: { name: string; email: string },
+    accessAuthOptions?: TRecipientAccessAuth,
+  ) => void | Promise<void>;
+  recipient: Pick<Recipient, 'name' | 'email' | 'role' | 'token'>;
   disabled?: boolean;
   allowDictateNextSigner?: boolean;
   defaultNextSigner?: {
@@ -47,6 +58,7 @@ export type DocumentSigningCompleteDialogProps = {
 const ZNextSignerFormSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   email: z.string().email('Invalid email address'),
+  accessAuthOptions: ZDocumentAccessAuthSchema.optional(),
 });
 
 type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
@@ -57,7 +69,7 @@ export const DocumentSigningCompleteDialog = ({
   fields,
   fieldsValidated,
   onSignatureComplete,
-  role,
+  recipient,
   disabled = false,
   allowDictateNextSigner = false,
   defaultNextSigner,
@@ -65,6 +77,11 @@ export const DocumentSigningCompleteDialog = ({
   const [showDialog, setShowDialog] = useState(false);
   const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
 
+  const [showTwoFactorForm, setShowTwoFactorForm] = useState(false);
+  const [twoFactorValidationError, setTwoFactorValidationError] = useState<string | null>(null);
+
+  const { derivedRecipientAccessAuth, user } = useRequiredDocumentSigningAuthContext();
+
   const form = useForm<TNextSignerFormSchema>({
     resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
     defaultValues: {
@@ -75,6 +92,11 @@ export const DocumentSigningCompleteDialog = ({
 
   const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
 
+  const completionRequires2FA = useMemo(
+    () => derivedRecipientAccessAuth.includes('TWO_FACTOR_AUTH'),
+    [derivedRecipientAccessAuth],
+  );
+
   const handleOpenChange = (open: boolean) => {
     if (form.formState.isSubmitting || !isComplete) {
       return;
@@ -93,16 +115,43 @@ export const DocumentSigningCompleteDialog = ({
 
   const onFormSubmit = async (data: TNextSignerFormSchema) => {
     try {
-      if (allowDictateNextSigner && data.name && data.email) {
-        await onSignatureComplete({ name: data.name, email: data.email });
-      } else {
-        await onSignatureComplete();
+      // Check if 2FA is required
+      if (completionRequires2FA && !data.accessAuthOptions) {
+        setShowTwoFactorForm(true);
+        return;
       }
+
+      const nextSigner =
+        allowDictateNextSigner && data.name && data.email
+          ? { name: data.name, email: data.email }
+          : undefined;
+
+      await onSignatureComplete(nextSigner, data.accessAuthOptions);
     } catch (error) {
-      console.error('Error completing signature:', error);
+      const err = AppError.parseError(error);
+
+      if (AppErrorCode.TWO_FACTOR_AUTH_FAILED === err.code) {
+        // This was a 2FA validation failure - show the 2FA dialog again with error
+        form.setValue('accessAuthOptions', undefined);
+
+        setTwoFactorValidationError('Invalid verification code. Please try again.');
+        setShowTwoFactorForm(true);
+
+        return;
+      }
     }
   };
 
+  const onTwoFactorFormSubmit = (validatedAuthOptions: TRecipientAccessAuth) => {
+    form.setValue('accessAuthOptions', validatedAuthOptions);
+
+    setShowTwoFactorForm(false);
+    setTwoFactorValidationError(null);
+
+    // Now trigger the form submission with auth options
+    void form.handleSubmit(onFormSubmit)();
+  };
+
   const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
 
   return (
@@ -116,7 +165,7 @@ export const DocumentSigningCompleteDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {match({ isComplete, role })
+          {match({ isComplete, role: recipient.role })
             .with({ isComplete: false }, () => <Trans>Next field</Trans>)
             .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
             .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
@@ -128,184 +177,194 @@ export const DocumentSigningCompleteDialog = ({
       </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>
-
-              <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>
-
-              {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>
-
-                      <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" />
-
-              <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>)
+        {!showTwoFactorForm && (
+          <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(recipient.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()}
-                  </Button>
+                  </div>
+                </DialogTitle>
+
+                <div className="text-muted-foreground max-w-[50ch]">
+                  {match(recipient.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>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
+
+                {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>
+
+                        <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" />
+
+                <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(recipient.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>
+        )}
+
+        {showTwoFactorForm && (
+          <AccessAuth2FAForm
+            token={recipient.token}
+            error={twoFactorValidationError}
+            onSubmit={onTwoFactorFormSubmit}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );

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

@@ -7,16 +7,12 @@ import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/cl
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
-import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { sortFieldsByPosition } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
-import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@@ -35,29 +31,33 @@ export type DocumentSigningFormProps = {
   document: DocumentAndSender;
   recipient: Recipient;
   fields: Field[];
-  redirectUrl?: string | null;
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
   setSelectedSignerId?: (id: number | null) => void;
+  completeDocument: (options: {
+    accessAuthOptions?: TRecipientAccessAuth;
+    nextSigner?: { email: string; name: string };
+  }) => Promise<void>;
+  isSubmitting: boolean;
+  fieldsValidated: () => void;
+  nextRecipient?: RecipientWithFields;
 };
 
 export const DocumentSigningForm = ({
   document,
   recipient,
   fields,
-  redirectUrl,
   isRecipientsTurn,
   allRecipients = [],
   setSelectedSignerId,
+  completeDocument,
+  isSubmitting,
+  fieldsValidated,
+  nextRecipient,
 }: DocumentSigningFormProps) => {
-  const { sessionData } = useOptionalSession();
-  const user = sessionData?.user;
-
   const { _ } = useLingui();
   const { toast } = useToast();
-
   const navigate = useNavigate();
-  const analytics = useAnalytics();
 
   const assistantSignersId = useId();
 
@@ -67,21 +67,12 @@ export const DocumentSigningForm = ({
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
   const [isAssistantSubmitting, setIsAssistantSubmitting] = useState(false);
 
-  const {
-    mutateAsync: completeDocumentWithToken,
-    isPending,
-    isSuccess,
-  } = trpc.recipient.completeDocumentWithToken.useMutation();
-
   const assistantForm = useForm<{ selectedSignerId: number | undefined }>({
     defaultValues: {
       selectedSignerId: undefined,
     },
   });
 
-  // Keep the loading state going if successful since the redirect may take some time.
-  const isSubmitting = isPending || isSuccess;
-
   const fieldsRequiringValidation = useMemo(
     () => fields.filter(isFieldUnsignedAndRequired),
     [fields],
@@ -97,9 +88,9 @@ export const DocumentSigningForm = ({
     return fieldsRequiringValidation.filter((field) => field.recipientId === recipient.id);
   }, [fieldsRequiringValidation, recipient]);
 
-  const fieldsValidated = () => {
+  const localFieldsValidated = () => {
     setValidateUninsertedFields(true);
-    validateFieldsInserted(fieldsRequiringValidation);
+    fieldsValidated();
   };
 
   const onAssistantFormSubmit = () => {
@@ -114,7 +105,7 @@ export const DocumentSigningForm = ({
     setIsAssistantSubmitting(true);
 
     try {
-      await completeDocument(undefined, nextSigner);
+      await completeDocument({ nextSigner });
     } catch (err) {
       toast({
         title: 'Error',
@@ -127,65 +118,8 @@ export const DocumentSigningForm = ({
     }
   };
 
-  const completeDocument = async (
-    authOptions?: TRecipientActionAuth,
-    nextSigner?: { email: string; name: string },
-  ) => {
-    const payload = {
-      token: recipient.token,
-      documentId: document.id,
-      authOptions,
-      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-    };
-
-    await completeDocumentWithToken(payload);
-
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
-    if (redirectUrl) {
-      window.location.href = redirectUrl;
-    } else {
-      await navigate(`/sign/${recipient.token}/complete`);
-    }
-  };
-
-  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(
-        'dark:bg-background border-border bg-widget sticky flex h-full flex-col rounded-xl border px-4 py-6',
-        {
-          'top-20 max-h-[min(68rem,calc(100vh-6rem))]': user,
-          'top-4 max-h-[min(68rem,calc(100vh-2rem))]': !user,
-        },
-      )}
-    >
+    <div className="flex h-full flex-col">
       {validateUninsertedFields && uninsertedFields[0] && (
         <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
           <Trans>Click to insert field</Trans>
@@ -194,21 +128,8 @@ export const DocumentSigningForm = ({
 
       <div className="custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2">
         <div className="flex flex-1 flex-col">
-          <h3 className="text-foreground text-2xl font-semibold">
-            {recipient.role === RecipientRole.VIEWER && <Trans>View Document</Trans>}
-            {recipient.role === RecipientRole.SIGNER && <Trans>Sign Document</Trans>}
-            {recipient.role === RecipientRole.APPROVER && <Trans>Approve Document</Trans>}
-            {recipient.role === RecipientRole.ASSISTANT && <Trans>Assist Document</Trans>}
-          </h3>
-
           {recipient.role === RecipientRole.VIEWER ? (
             <>
-              <p className="text-muted-foreground mt-2 text-sm">
-                <Trans>Please mark as viewed to complete</Trans>
-              </p>
-
-              <hr className="border-border mb-8 mt-4" />
-
               <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
                 <div className="flex flex-1 flex-col gap-y-4" />
                 <div className="flex flex-col gap-4 md:flex-row">
@@ -227,11 +148,11 @@ export const DocumentSigningForm = ({
                     isSubmitting={isSubmitting}
                     documentTitle={document.title}
                     fields={fields}
-                    fieldsValidated={fieldsValidated}
-                    onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
-                    }}
-                    role={recipient.role}
+                    fieldsValidated={localFieldsValidated}
+                    onSignatureComplete={async (nextSigner, accessAuthOptions) =>
+                      completeDocument({ nextSigner, accessAuthOptions })
+                    }
+                    recipient={recipient}
                     allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
                     defaultNextSigner={
                       nextRecipient
@@ -245,15 +166,6 @@ export const DocumentSigningForm = ({
           ) : recipient.role === RecipientRole.ASSISTANT ? (
             <>
               <form onSubmit={assistantForm.handleSubmit(onAssistantFormSubmit)}>
-                <p className="text-muted-foreground mt-2 text-sm">
-                  <Trans>
-                    Complete the fields for the following signers. Once reviewed, they will inform
-                    you if any modifications are needed.
-                  </Trans>
-                </p>
-
-                <hr className="border-border my-4" />
-
                 <fieldset className="dark:bg-background border-border rounded-2xl border bg-white p-3">
                   <Controller
                     name="selectedSignerId"
@@ -340,88 +252,79 @@ export const DocumentSigningForm = ({
             </>
           ) : (
             <>
-              <div>
-                <p className="text-muted-foreground mt-2 text-sm">
-                  {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
-                    <Trans>Please review the document before approving.</Trans>
-                  ) : (
-                    <Trans>Please review the document before signing.</Trans>
-                  )}
-                </p>
+              <fieldset
+                disabled={isSubmitting}
+                className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2"
+              >
+                <div className="flex flex-1 flex-col gap-y-4">
+                  <div>
+                    <Label htmlFor="full-name">
+                      <Trans>Full Name</Trans>
+                    </Label>
 
-                <hr className="border-border mb-8 mt-4" />
+                    <Input
+                      type="text"
+                      id="full-name"
+                      className="bg-background mt-2"
+                      value={fullName}
+                      onChange={(e) => setFullName(e.target.value.trimStart())}
+                    />
+                  </div>
 
-                <fieldset
-                  disabled={isSubmitting}
-                  className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2"
-                >
-                  <div className="flex flex-1 flex-col gap-y-4">
+                  {hasSignatureField && (
                     <div>
-                      <Label htmlFor="full-name">
-                        <Trans>Full Name</Trans>
+                      <Label htmlFor="Signature">
+                        <Trans>Signature</Trans>
                       </Label>
 
-                      <Input
-                        type="text"
-                        id="full-name"
-                        className="bg-background mt-2"
-                        value={fullName}
-                        onChange={(e) => setFullName(e.target.value.trimStart())}
+                      <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>
-
-                    {hasSignatureField && (
-                      <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>
-                    )}
-                  </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>
+              </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={localFieldsValidated}
+                  disabled={!isRecipientsTurn}
+                  onSignatureComplete={async (nextSigner, accessAuthOptions) =>
+                    completeDocument({
+                      accessAuthOptions,
+                      nextSigner,
+                    })
+                  }
+                  recipient={recipient}
+                  allowDictateNextSigner={
+                    nextRecipient && document.documentMeta?.allowDictateNextSigner
+                  }
+                  defaultNextSigner={
+                    nextRecipient
+                      ? { name: nextRecipient.name, email: nextRecipient.email }
+                      : undefined
+                  }
+                />
               </div>
             </>
           )}

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

@@ -0,0 +1,440 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import type { Field } from '@prisma/client';
+import { FieldType, RecipientRole } from '@prisma/client';
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+import { useNavigate } from 'react-router';
+import { P, match } from 'ts-pattern';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+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 type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { CompletedField } from '@documenso/lib/types/fields';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
+import { validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+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 { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+
+import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningForm } from '~/components/general/document-signing/document-signing-form';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+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 { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
+import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
+
+export type DocumentSigningPageViewV1Props = {
+  recipient: RecipientWithFields;
+  document: DocumentAndSender;
+  fields: Field[];
+  completedFields: CompletedField[];
+  isRecipientsTurn: boolean;
+  allRecipients?: RecipientWithFields[];
+  includeSenderDetails: boolean;
+};
+
+export const DocumentSigningPageViewV1 = ({
+  recipient,
+  document,
+  fields,
+  completedFields,
+  isRecipientsTurn,
+  allRecipients = [],
+  includeSenderDetails,
+}: DocumentSigningPageViewV1Props) => {
+  const { documentData, documentMeta } = document;
+
+  const { derivedRecipientAccessAuth, user: authUser } = useRequiredDocumentSigningAuthContext();
+
+  const hasAuthenticator = authUser?.twoFactorEnabled
+    ? authUser.twoFactorEnabled && authUser.email === recipient.email
+    : false;
+
+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+
+  const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const {
+    mutateAsync: completeDocumentWithToken,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
+
+  // Keep the loading state going if successful since the redirect may take some time.
+  const isSubmitting = isPending || isSuccess;
+
+  const fieldsRequiringValidation = useMemo(
+    () => fields.filter(isFieldUnsignedAndRequired),
+    [fields],
+  );
+
+  const fieldsValidated = () => {
+    validateFieldsInserted(fieldsRequiringValidation);
+  };
+
+  const completeDocument = async (options: {
+    accessAuthOptions?: TRecipientAccessAuth;
+    nextSigner?: { email: string; name: string };
+  }) => {
+    const { accessAuthOptions, nextSigner } = options;
+
+    const payload = {
+      token: recipient.token,
+      documentId: document.id,
+      accessAuthOptions,
+      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+    };
+
+    await completeDocumentWithToken(payload);
+
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
+    if (documentMeta?.redirectUrl) {
+      window.location.href = documentMeta.redirectUrl;
+    } else {
+      await navigate(`/sign/${recipient.token}/complete`);
+    }
+  };
+
+  let senderName = document.user.name ?? '';
+  let senderEmail = `(${document.user.email})`;
+
+  if (includeSenderDetails) {
+    senderName = document.team?.name ?? '';
+    senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
+  }
+
+  const selectedSigner = allRecipients?.find((r) => r.id === selectedSignerId);
+  const targetSigner =
+    recipient.role === RecipientRole.ASSISTANT && selectedSigner ? selectedSigner : null;
+
+  const nextRecipient = useMemo(() => {
+    if (!documentMeta?.signingOrder || 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]);
+
+  const highestPageNumber = Math.max(...fields.map((field) => field.page));
+
+  const pendingFields = fieldsRequiringValidation.filter((field) => !field.inserted);
+  const hasPendingFields = pendingFields.length > 0;
+
+  return (
+    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={targetSigner}>
+      <div className="mx-auto w-full max-w-screen-xl sm:px-6">
+        {document.team.teamGlobalSettings.brandingEnabled &&
+          document.team.teamGlobalSettings.brandingLogo && (
+            <img
+              src={`/api/branding/logo/team/${document.teamId}`}
+              alt={`${document.team.name}'s Logo`}
+              className="mb-4 h-12 w-12 md:mb-2"
+            />
+          )}
+        <h1
+          className="block max-w-[20rem] truncate text-2xl font-semibold sm:mt-4 md:max-w-[30rem] md:text-3xl"
+          title={document.title}
+        >
+          {document.title}
+        </h1>
+
+        <div className="mt-1.5 flex flex-wrap items-center justify-between gap-y-2 sm:mt-2.5 sm:gap-y-0">
+          <div className="max-w-[50ch]">
+            <span className="text-muted-foreground truncate" title={senderName}>
+              {senderName} {senderEmail}
+            </span>{' '}
+            <span className="text-muted-foreground">
+              {match(recipient.role)
+                .with(RecipientRole.VIEWER, () =>
+                  includeSenderDetails ? (
+                    <Trans>
+                      on behalf of "{document.team?.name}" has invited you to view this document
+                    </Trans>
+                  ) : (
+                    <Trans>has invited you to view this document</Trans>
+                  ),
+                )
+                .with(RecipientRole.SIGNER, () =>
+                  includeSenderDetails ? (
+                    <Trans>
+                      on behalf of "{document.team?.name}" has invited you to sign this document
+                    </Trans>
+                  ) : (
+                    <Trans>has invited you to sign this document</Trans>
+                  ),
+                )
+                .with(RecipientRole.APPROVER, () =>
+                  includeSenderDetails ? (
+                    <Trans>
+                      on behalf of "{document.team?.name}" has invited you to approve this document
+                    </Trans>
+                  ) : (
+                    <Trans>has invited you to approve this document</Trans>
+                  ),
+                )
+                .with(RecipientRole.ASSISTANT, () =>
+                  includeSenderDetails ? (
+                    <Trans>
+                      on behalf of "{document.team?.name}" has invited you to assist this document
+                    </Trans>
+                  ) : (
+                    <Trans>has invited you to assist this document</Trans>
+                  ),
+                )
+                .otherwise(() => null)}
+            </span>
+          </div>
+
+          <DocumentSigningRejectDialog documentId={document.id} token={recipient.token} />
+        </div>
+
+        <div className="relative mt-4 flex w-full flex-col gap-x-6 gap-y-8 sm:mt-8 md:flex-row lg:gap-x-8 lg:gap-y-0">
+          <div className="flex-1">
+            <Card className="rounded-xl before:rounded-xl" gradient>
+              <CardContent className="p-2">
+                <PDFViewer key={documentData.id} documentData={documentData} document={document} />
+              </CardContent>
+            </Card>
+          </div>
+
+          <div
+            key={isExpanded ? 'expanded' : 'collapsed'}
+            className="group/document-widget fixed bottom-6 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-4 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
+            data-expanded={isExpanded || undefined}
+          >
+            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+              <div className="flex items-center justify-between gap-x-2">
+                <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                  {match(recipient.role)
+                    .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
+                    .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
+                    .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
+                    .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
+                    .otherwise(() => null)}
+                </h3>
+
+                {match({ hasPendingFields, isExpanded, role: recipient.role })
+                  .with(
+                    {
+                      hasPendingFields: false,
+                      role: P.not(RecipientRole.ASSISTANT),
+                      isExpanded: false,
+                    },
+                    () => (
+                      <div className="md:hidden">
+                        <DocumentSigningCompleteDialog
+                          isSubmitting={isSubmitting}
+                          documentTitle={document.title}
+                          fields={fields}
+                          fieldsValidated={fieldsValidated}
+                          disabled={!isRecipientsTurn}
+                          onSignatureComplete={async (nextSigner) =>
+                            completeDocument({ nextSigner })
+                          }
+                          recipient={recipient}
+                          allowDictateNextSigner={
+                            nextRecipient && documentMeta?.allowDictateNextSigner
+                          }
+                          defaultNextSigner={
+                            nextRecipient
+                              ? { name: nextRecipient.name, email: nextRecipient.email }
+                              : undefined
+                          }
+                        />
+                      </div>
+                    ),
+                  )
+                  .with({ isExpanded: true }, () => (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(false)}
+                    >
+                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ))
+                  .otherwise(() => (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ))}
+              </div>
+
+              <div className="hidden group-data-[expanded]/document-widget:block md:block">
+                <p className="text-muted-foreground mt-2 text-sm">
+                  {match(recipient.role)
+                    .with(RecipientRole.VIEWER, () => (
+                      <Trans>Please mark as viewed to complete.</Trans>
+                    ))
+                    .with(RecipientRole.SIGNER, () => (
+                      <Trans>Please review the document before signing.</Trans>
+                    ))
+                    .with(RecipientRole.APPROVER, () => (
+                      <Trans>Please review the document before approving.</Trans>
+                    ))
+                    .with(RecipientRole.ASSISTANT, () => (
+                      <Trans>Complete the fields for the following signers.</Trans>
+                    ))
+                    .otherwise(() => null)}
+                </p>
+
+                <hr className="border-border mb-8 mt-4" />
+              </div>
+
+              <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+                <DocumentSigningForm
+                  document={document}
+                  recipient={recipient}
+                  fields={fields}
+                  isRecipientsTurn={isRecipientsTurn}
+                  allRecipients={allRecipients}
+                  setSelectedSignerId={setSelectedSignerId}
+                  completeDocument={completeDocument}
+                  isSubmitting={isSubmitting}
+                  fieldsValidated={fieldsValidated}
+                  nextRecipient={nextRecipient}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DocumentReadOnlyFields
+          documentMeta={documentMeta || undefined}
+          fields={completedFields}
+          showRecipientTooltip={true}
+        />
+
+        {recipient.role !== RecipientRole.ASSISTANT && (
+          <DocumentSigningAutoSign recipient={recipient} fields={fields} />
+        )}
+
+        <ElementVisible
+          target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
+        >
+          {fields
+            .filter(
+              (field) =>
+                recipient.role !== RecipientRole.ASSISTANT ||
+                field.recipientId === selectedSigner?.id,
+            )
+            .map((field) =>
+              match(field.type)
+                .with(FieldType.SIGNATURE, () => (
+                  <DocumentSigningSignatureField
+                    key={field.id}
+                    field={field}
+                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
+                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
+                  />
+                ))
+                .with(FieldType.INITIALS, () => (
+                  <DocumentSigningInitialsField key={field.id} field={field} />
+                ))
+                .with(FieldType.NAME, () => (
+                  <DocumentSigningNameField key={field.id} field={field} />
+                ))
+                .with(FieldType.DATE, () => (
+                  <DocumentSigningDateField
+                    key={field.id}
+                    field={field}
+                    dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                    timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                  />
+                ))
+                .with(FieldType.EMAIL, () => (
+                  <DocumentSigningEmailField key={field.id} field={field} />
+                ))
+                .with(FieldType.TEXT, () => {
+                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                    ...field,
+                    fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
+                  };
+                  return <DocumentSigningTextField key={field.id} field={fieldWithMeta} />;
+                })
+                .with(FieldType.NUMBER, () => {
+                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                    ...field,
+                    fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
+                  };
+                  return <DocumentSigningNumberField key={field.id} field={fieldWithMeta} />;
+                })
+                .with(FieldType.RADIO, () => {
+                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                    ...field,
+                    fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
+                  };
+                  return <DocumentSigningRadioField key={field.id} field={fieldWithMeta} />;
+                })
+                .with(FieldType.CHECKBOX, () => {
+                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                    ...field,
+                    fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
+                  };
+                  return <DocumentSigningCheckboxField key={field.id} field={fieldWithMeta} />;
+                })
+                .with(FieldType.DROPDOWN, () => {
+                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                    ...field,
+                    fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
+                  };
+                  return <DocumentSigningDropdownField key={field.id} field={fieldWithMeta} />;
+                })
+                .otherwise(() => null),
+            )}
+        </ElementVisible>
+      </div>
+    </DocumentSigningRecipientProvider>
+  );
+};

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

@@ -0,0 +1,174 @@
+import { lazy } from 'react';
+
+import { Plural, Trans } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { ArrowLeftIcon, BanIcon, DownloadCloudIcon } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { Button } from '@documenso/ui/primitives/button';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import { SignFieldDropdownDialog } from '~/components/dialogs/sign-field-dropdown-dialog';
+import { SignFieldEmailDialog } from '~/components/dialogs/sign-field-email-dialog';
+import { SignFieldInitialsDialog } from '~/components/dialogs/sign-field-initials-dialog';
+import { SignFieldNameDialog } from '~/components/dialogs/sign-field-name-dialog';
+import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-dialog';
+import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
+import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';
+
+import { EnvelopeItemSelector } from '../envelope-editor/envelope-file-selector';
+import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
+import { EnvelopeSignerHeader } from '../envelope-signing/envelope-signer-header';
+import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
+
+const EnvelopeSignerPageRenderer = lazy(
+  async () => import('../envelope-signing/envelope-signer-page-renderer'),
+);
+
+export const DocumentSigningPageViewV2 = () => {
+  const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const { envelope, recipientFields, recipientFieldsRemaining, showPendingFieldTooltip } =
+    useRequiredEnvelopeSigningContext();
+
+  return (
+    <div className="h-screen w-screen bg-gray-50">
+      <SignFieldEmailDialog.Root />
+      <SignFieldTextDialog.Root />
+      <SignFieldNumberDialog.Root />
+      <SignFieldNameDialog.Root />
+      <SignFieldInitialsDialog.Root />
+      <SignFieldDropdownDialog.Root />
+      <SignFieldSignatureDialog.Root />
+
+      <EnvelopeSignerHeader />
+
+      {/* Main Content Area */}
+      <div className="flex h-[calc(100vh-73px)] w-screen">
+        {/* Left Section - Step Navigation */}
+        <div className="hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white py-4 lg:flex">
+          <div className="px-4">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-gray-900">
+              <Trans>Sign Document</Trans>
+
+              <span className="text-muted-foreground ml-2 rounded border bg-gray-50 px-2 py-0.5 text-xs">
+                <Trans>{recipientFieldsRemaining.length} fields remaining</Trans>
+              </span>
+            </h3>
+
+            <div className="bg-muted relative my-4 h-[4px] rounded-md">
+              <motion.div
+                layout="size"
+                layoutId="document-flow-container-step"
+                className="bg-documenso absolute inset-y-0 left-0"
+                style={{
+                  width: `${(100 / recipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                }}
+              />
+            </div>
+
+            <div className="mt-6 space-y-3">
+              <EnvelopeSignerForm />
+            </div>
+          </div>
+
+          <Separator className="my-6" />
+
+          {/* Quick Actions. */}
+          <div className="space-y-3 px-4">
+            <h4 className="text-sm font-semibold text-gray-900">
+              <Trans>Actions</Trans>
+            </h4>
+
+            {/* Todo: Allow selecting which document to download and/or the original */}
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <DownloadCloudIcon className="mr-2 h-4 w-4" />
+              <Trans>Download Original</Trans>
+            </Button>
+
+            {/* Todo: Envelopes */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hover:text-destructive w-full justify-start"
+            >
+              <BanIcon className="mr-2 h-4 w-4" />
+              <Trans>Reject Document</Trans>
+            </Button>
+          </div>
+
+          {/* Footer of left sidebar. */}
+          <div className="mt-auto px-4">
+            <Button asChild variant="ghost" className="w-full justify-start">
+              <Link to="/">
+                <ArrowLeftIcon className="mr-2 h-4 w-4" />
+                <Trans>Return</Trans>
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        {/* Main Content - Changes based on current step */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="flex flex-col">
+            {/* Horizontal envelope item selector */}
+            <div className="flex h-fit space-x-2 overflow-x-auto p-4">
+              {envelopeItems.map((doc, i) => (
+                <EnvelopeItemSelector
+                  key={doc.id}
+                  number={i + 1}
+                  primaryText={doc.title}
+                  secondaryText={
+                    <Plural
+                      one="1 Field"
+                      other="# Fields"
+                      value={
+                        recipientFieldsRemaining.filter((field) => field.envelopeItemId === doc.id)
+                          .length
+                      }
+                    />
+                  }
+                  isSelected={currentEnvelopeItem?.id === doc.id}
+                  buttonProps={{ onClick: () => setCurrentEnvelopeItem(doc.id) }}
+                />
+              ))}
+            </div>
+
+            {/* Document View */}
+            <div className="mt-4 flex justify-center p-4">
+              {currentEnvelopeItem &&
+                showPendingFieldTooltip &&
+                recipientFieldsRemaining.length > 0 &&
+                recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id && (
+                  <FieldToolTip
+                    key={recipientFieldsRemaining[0].id}
+                    field={recipientFieldsRemaining[0]}
+                    color="warning"
+                  >
+                    <Trans>Click to insert field</Trans>
+                  </FieldToolTip>
+                )}
+
+              {currentEnvelopeItem ? (
+                <PDFViewerKonvaLazy
+                  key={currentEnvelopeItem.id}
+                  documentDataId={currentEnvelopeItem.documentDataId}
+                  customPageRenderer={EnvelopeSignerPageRenderer}
+                />
+              ) : (
+                <div className="flex flex-col items-center justify-center py-32">
+                  <p className="text-foreground text-sm">
+                    <Trans>No documents found</Trans>
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,247 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import type { Field } from '@prisma/client';
-import { FieldType, RecipientRole } from '@prisma/client';
-import { match } from 'ts-pattern';
-
-import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
-import {
-  ZCheckboxFieldMeta,
-  ZDropdownFieldMeta,
-  ZNumberFieldMeta,
-  ZRadioFieldMeta,
-  ZTextFieldMeta,
-} from '@documenso/lib/types/field-meta';
-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';
-
-import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
-import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
-import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
-import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
-import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
-import { DocumentSigningForm } from '~/components/general/document-signing/document-signing-form';
-import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
-import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
-import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
-import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
-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 { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
-
-export type DocumentSigningPageViewProps = {
-  recipient: RecipientWithFields;
-  document: DocumentAndSender;
-  fields: Field[];
-  completedFields: CompletedField[];
-  isRecipientsTurn: boolean;
-  allRecipients?: RecipientWithFields[];
-  includeSenderDetails: boolean;
-};
-
-export const DocumentSigningPageView = ({
-  recipient,
-  document,
-  fields,
-  completedFields,
-  isRecipientsTurn,
-  allRecipients = [],
-  includeSenderDetails,
-}: DocumentSigningPageViewProps) => {
-  const { documentData, documentMeta } = document;
-
-  const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
-
-  let senderName = document.user.name ?? '';
-  let senderEmail = `(${document.user.email})`;
-
-  if (includeSenderDetails) {
-    senderName = document.team?.name ?? '';
-    senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
-  }
-
-  const selectedSigner = allRecipients?.find((r) => r.id === selectedSignerId);
-  const targetSigner =
-    recipient.role === RecipientRole.ASSISTANT && selectedSigner ? selectedSigner : null;
-
-  return (
-    <DocumentSigningRecipientProvider recipient={recipient} targetSigner={targetSigner}>
-      <div className="mx-auto w-full max-w-screen-xl">
-        <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 flex-wrap items-center justify-between gap-x-6">
-          <div className="max-w-[50ch]">
-            <span className="text-muted-foreground truncate" title={senderName}>
-              {senderName} {senderEmail}
-            </span>{' '}
-            <span className="text-muted-foreground">
-              {match(recipient.role)
-                .with(RecipientRole.VIEWER, () =>
-                  includeSenderDetails ? (
-                    <Trans>
-                      on behalf of "{document.team?.name}" has invited you to view this document
-                    </Trans>
-                  ) : (
-                    <Trans>has invited you to view this document</Trans>
-                  ),
-                )
-                .with(RecipientRole.SIGNER, () =>
-                  includeSenderDetails ? (
-                    <Trans>
-                      on behalf of "{document.team?.name}" has invited you to sign this document
-                    </Trans>
-                  ) : (
-                    <Trans>has invited you to sign this document</Trans>
-                  ),
-                )
-                .with(RecipientRole.APPROVER, () =>
-                  includeSenderDetails ? (
-                    <Trans>
-                      on behalf of "{document.team?.name}" has invited you to approve this document
-                    </Trans>
-                  ) : (
-                    <Trans>has invited you to approve this document</Trans>
-                  ),
-                )
-                .with(RecipientRole.ASSISTANT, () =>
-                  includeSenderDetails ? (
-                    <Trans>
-                      on behalf of "{document.team?.name}" has invited you to assist this document
-                    </Trans>
-                  ) : (
-                    <Trans>has invited you to assist this document</Trans>
-                  ),
-                )
-                .otherwise(() => null)}
-            </span>
-          </div>
-
-          <DocumentSigningRejectDialog document={document} token={recipient.token} />
-        </div>
-
-        <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
-          <Card
-            className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
-            gradient
-          >
-            <CardContent className="p-2">
-              <PDFViewer key={documentData.id} documentData={documentData} document={document} />
-            </CardContent>
-          </Card>
-
-          <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <DocumentSigningForm
-              document={document}
-              recipient={recipient}
-              fields={fields}
-              redirectUrl={documentMeta?.redirectUrl}
-              isRecipientsTurn={isRecipientsTurn}
-              allRecipients={allRecipients}
-              setSelectedSignerId={setSelectedSignerId}
-            />
-          </div>
-        </div>
-
-        <DocumentReadOnlyFields
-          documentMeta={documentMeta || undefined}
-          fields={completedFields}
-          showRecipientTooltip={true}
-        />
-
-        {recipient.role !== RecipientRole.ASSISTANT && (
-          <DocumentSigningAutoSign recipient={recipient} fields={fields} />
-        )}
-
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-          {fields
-            .filter(
-              (field) =>
-                recipient.role !== RecipientRole.ASSISTANT ||
-                field.recipientId === selectedSigner?.id,
-            )
-            .map((field) =>
-              match(field.type)
-                .with(FieldType.SIGNATURE, () => (
-                  <DocumentSigningSignatureField
-                    key={field.id}
-                    field={field}
-                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
-                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
-                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
-                  />
-                ))
-                .with(FieldType.INITIALS, () => (
-                  <DocumentSigningInitialsField key={field.id} field={field} />
-                ))
-                .with(FieldType.NAME, () => (
-                  <DocumentSigningNameField key={field.id} field={field} />
-                ))
-                .with(FieldType.DATE, () => (
-                  <DocumentSigningDateField
-                    key={field.id}
-                    field={field}
-                    dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
-                    timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
-                  />
-                ))
-                .with(FieldType.EMAIL, () => (
-                  <DocumentSigningEmailField key={field.id} field={field} />
-                ))
-                .with(FieldType.TEXT, () => {
-                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
-                    ...field,
-                    fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
-                  };
-                  return <DocumentSigningTextField key={field.id} field={fieldWithMeta} />;
-                })
-                .with(FieldType.NUMBER, () => {
-                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
-                    ...field,
-                    fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
-                  };
-                  return <DocumentSigningNumberField key={field.id} field={fieldWithMeta} />;
-                })
-                .with(FieldType.RADIO, () => {
-                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
-                    ...field,
-                    fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
-                  };
-                  return <DocumentSigningRadioField key={field.id} field={fieldWithMeta} />;
-                })
-                .with(FieldType.CHECKBOX, () => {
-                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
-                    ...field,
-                    fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
-                  };
-                  return <DocumentSigningCheckboxField key={field.id} field={fieldWithMeta} />;
-                })
-                .with(FieldType.DROPDOWN, () => {
-                  const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
-                    ...field,
-                    fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
-                  };
-                  return <DocumentSigningDropdownField key={field.id} field={fieldWithMeta} />;
-                })
-                .otherwise(() => null),
-            )}
-        </ElementVisible>
-      </div>
-    </DocumentSigningRecipientProvider>
-  );
-};

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

@@ -14,6 +14,7 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -156,7 +157,12 @@ export const DocumentSigningRadioField = ({
       {!field.inserted && (
         <RadioGroup
           onValueChange={(value) => handleSelectItem(value)}
-          className="z-10 my-0.5 gap-y-1"
+          className={cn(
+            'z-10 my-0.5 gap-1',
+            parsedFieldMeta.direction === 'horizontal'
+              ? 'flex flex-row flex-wrap'
+              : 'flex flex-col gap-y-1',
+          )}
         >
           {values?.map((item, index) => (
             <div key={index} className="flex items-center">
@@ -181,7 +187,14 @@ export const DocumentSigningRadioField = ({
       )}
 
       {field.inserted && (
-        <RadioGroup className="my-0.5 gap-y-1">
+        <RadioGroup
+          className={cn(
+            'my-0.5 gap-1',
+            parsedFieldMeta.direction === 'horizontal'
+              ? 'flex flex-row flex-wrap'
+              : 'flex flex-col gap-y-1',
+          )}
+        >
           {values?.map((item, index) => (
             <div key={index} className="flex items-center">
               <RadioGroupItem

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

@@ -10,7 +10,10 @@ export interface DocumentSigningRecipientContextValue {
    * In regular mode, this is the actual signer.
    * In assistant mode, this is the recipient who is helping fill out the document.
    */
-  recipient: Recipient | RecipientWithFields;
+  recipient: Pick<
+    Recipient | RecipientWithFields,
+    'name' | 'email' | 'token' | 'role' | 'authOptions'
+  >;
 
   /**
    * Only present in assistant mode.
@@ -29,7 +32,10 @@ const DocumentSigningRecipientContext = createContext<DocumentSigningRecipientCo
 );
 
 export interface DocumentSigningRecipientProviderProps extends PropsWithChildren {
-  recipient: Recipient | RecipientWithFields;
+  recipient: Pick<
+    Recipient | RecipientWithFields,
+    'name' | 'email' | 'token' | 'role' | 'authOptions'
+  >;
   targetSigner?: RecipientWithFields | null;
 }
 

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

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import type { Document } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { useSearchParams } from 'react-router';
@@ -37,13 +36,13 @@ const ZRejectDocumentFormSchema = z.object({
 type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
 
 export interface DocumentSigningRejectDialogProps {
-  document: Pick<Document, 'id'>;
+  documentId: number;
   token: string;
   onRejected?: (reason: string) => void | Promise<void>;
 }
 
 export function DocumentSigningRejectDialog({
-  document,
+  documentId,
   token,
   onRejected,
 }: DocumentSigningRejectDialogProps) {
@@ -66,7 +65,7 @@ export function DocumentSigningRejectDialog({
   const onRejectDocument = async ({ reason }: TRejectDocumentFormSchema) => {
     try {
       await rejectDocumentWithToken({
-        documentId: document.id,
+        documentId,
         token,
         reason,
       });

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

@@ -227,19 +227,8 @@ export const DocumentSigningTextField = ({
 
   const parsedField = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : undefined;
 
-  const labelDisplay =
-    parsedField?.label && parsedField.label.length < 20
-      ? parsedField.label
-      : parsedField?.label
-        ? parsedField?.label.substring(0, 20) + '...'
-        : undefined;
-
-  const textDisplay =
-    parsedField?.text && parsedField.text.length < 20
-      ? parsedField.text
-      : parsedField?.text
-        ? parsedField?.text.substring(0, 20) + '...'
-        : undefined;
+  const labelDisplay = parsedField?.label;
+  const textDisplay = parsedField?.text;
 
   const fieldDisplayName = labelDisplay ? labelDisplay : textDisplay;
   const charactersRemaining = (parsedFieldMeta?.characterLimit ?? 0) - (localText.length ?? 0);

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

@@ -0,0 +1,290 @@
+import { createContext, useContext, useMemo, useState } from 'react';
+
+import {
+  type Field,
+  FieldType,
+  type Recipient,
+  RecipientRole,
+  SigningStatus,
+} from '@prisma/client';
+
+import { isBase64Image } from '@documenso/lib/constants/signatures';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
+import { trpc } from '@documenso/trpc/react';
+import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
+
+export type EnvelopeSigningContextValue = {
+  fullName: string;
+  setFullName: (_value: string) => void;
+  email: string;
+  setEmail: (_value: string) => void;
+  signature: string | null;
+  setSignature: (_value: string | null) => void;
+
+  showPendingFieldTooltip: boolean;
+  setShowPendingFieldTooltip: (_value: boolean) => void;
+
+  envelopeData: EnvelopeForSigningResponse;
+  envelope: EnvelopeForSigningResponse['envelope'];
+
+  recipient: EnvelopeForSigningResponse['recipient'];
+  recipientFieldsRemaining: Field[];
+  recipientFields: Field[];
+  selectedRecipientFields: Field[];
+  nextRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
+  otherRecipientCompletedFields: (Field & {
+    recipient: Pick<Recipient, 'name' | 'email' | 'signingStatus' | 'role'>;
+  })[];
+  assistantRecipients: EnvelopeForSigningResponse['envelope']['recipients'];
+  assistantFields: Field[];
+  setSelectedAssistantRecipientId: (_value: number | null) => void;
+  selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
+
+  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
+};
+
+const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
+
+export const useEnvelopeSigningContext = () => {
+  return useContext(EnvelopeSigningContext);
+};
+
+export const useRequiredEnvelopeSigningContext = () => {
+  const context = useEnvelopeSigningContext();
+
+  if (!context) {
+    throw new Error('Signing context is required');
+  }
+
+  return context;
+};
+
+export interface EnvelopeSigningProviderProps {
+  fullName?: string | null;
+  email?: string | null;
+  signature?: string | null;
+  envelopeData: EnvelopeForSigningResponse;
+  children: React.ReactNode;
+}
+
+export const EnvelopeSigningProvider = ({
+  fullName: initialFullName,
+  email: initialEmail,
+  signature: initialSignature,
+  envelopeData: initialEnvelopeData,
+  children,
+}: EnvelopeSigningProviderProps) => {
+  const [envelopeData, setEnvelopeData] = useState(initialEnvelopeData);
+
+  const { envelope, recipient } = envelopeData;
+
+  const [fullName, setFullName] = useState(initialFullName || '');
+  const [email, setEmail] = useState(initialEmail || '');
+
+  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+
+  const {
+    mutateAsync: completeDocument,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const { mutateAsync: signEnvelopeField } = trpc.envelope.field.sign.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (data) => {
+      console.log('signEnvelopeField', data);
+
+      const newRecipientFields = envelopeData.recipient.fields.map((field) =>
+        field.id === data.signedField.id ? data.signedField : field,
+      );
+
+      setEnvelopeData((prev) => ({
+        ...prev,
+        recipient: {
+          ...prev.recipient,
+          fields: newRecipientFields,
+        },
+      }));
+    },
+  });
+
+  // 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 (
+        !sig &&
+        (envelope.documentMeta.uploadSignatureEnabled ||
+          envelope.documentMeta.drawSignatureEnabled) &&
+        envelopeData.recipientSignature?.signatureImageAsBase64
+      ) {
+        return envelopeData.recipientSignature.signatureImageAsBase64;
+      }
+
+      if (
+        !sig &&
+        envelope.documentMeta.typedSignatureEnabled &&
+        envelopeData.recipientSignature?.typedSignature
+      ) {
+        return envelopeData.recipientSignature.typedSignature;
+      }
+
+      if (
+        isBase64 &&
+        (envelope.documentMeta.uploadSignatureEnabled || envelope.documentMeta.drawSignatureEnabled)
+      ) {
+        return sig;
+      }
+
+      if (!isBase64 && envelope.documentMeta.typedSignatureEnabled) {
+        return sig;
+      }
+
+      return null;
+    })(),
+  );
+
+  /**
+   * Assistant recipients are those that have a signing order after the assistant.
+   */
+  const assistantRecipients =
+    recipient.role === RecipientRole.ASSISTANT
+      ? envelope.recipients.filter((r) => (r.signingOrder ?? 0) > (recipient.signingOrder ?? 0))
+      : [];
+
+  /**
+   * Assistant fields are those fulfill all of the following:
+   * - From recipients that have not signed
+   * - After the assistant signing order
+   * - Are not signature fields
+   */
+  const assistantFields =
+    recipient.role === RecipientRole.ASSISTANT
+      ? assistantRecipients
+          .filter((r) => r.signingStatus !== SigningStatus.SIGNED)
+          .map((r) => r.fields.filter((field) => field.type !== FieldType.SIGNATURE))
+          .flat()
+      : [];
+
+  /**
+   * The recipient that the assistant has currently selected to sign on behalf of.
+   */
+  const [selectedAssistantRecipientId, setSelectedAssistantRecipientId] = useState<number | null>(
+    assistantRecipients[0]?.id || null,
+  );
+
+  const selectedAssistantRecipient = useMemo(() => {
+    return envelope.recipients.find((r) => r.id === selectedAssistantRecipientId) || null;
+  }, [envelope.recipients, selectedAssistantRecipientId]);
+
+  /**
+   * The fields that are still required to be signed by the current recipient.
+   */
+  const recipientFieldsRemaining = useMemo(() => {
+    return envelopeData.recipient.fields.filter((field) => isFieldUnsignedAndRequired(field));
+  }, [envelopeData.recipient.fields]);
+
+  /**
+   * All the fields for the current recipient.
+   */
+  const recipientFields = useMemo(() => {
+    return envelopeData.recipient.fields;
+  }, [envelopeData.recipient.fields]);
+
+  const selectedRecipientFields = useMemo(() => {
+    return recipientFields.filter((field) => field.recipientId === selectedAssistantRecipient?.id);
+  }, [recipientFields, selectedAssistantRecipient]);
+
+  /**
+   * Fields that have been completed by other recipients.
+   */
+  const otherRecipientCompletedFields = envelope.recipients
+    .filter(({ signingStatus }) => signingStatus === SigningStatus.SIGNED)
+    .flatMap((recipient) =>
+      recipient.fields.map((field) => ({
+        ...field,
+        recipient: {
+          name: recipient.name,
+          email: recipient.email,
+          signingStatus: recipient.signingStatus,
+          role: recipient.role,
+        },
+      })),
+    )
+    .filter((field) => field.inserted);
+
+  const nextRecipient = useMemo(() => {
+    if (
+      !envelope.documentMeta.signingOrder ||
+      envelope.documentMeta.signingOrder !== 'SEQUENTIAL'
+    ) {
+      return null;
+    }
+
+    const sortedRecipients = envelope.recipients.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]
+      : null;
+  }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
+
+  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
+    console.log('insertField', fieldId, fieldValue);
+
+    await signEnvelopeField({
+      token: envelopeData.recipient.token,
+      fieldId,
+      fieldValue,
+      authOptions: undefined,
+    });
+  };
+
+  return (
+    <EnvelopeSigningContext.Provider
+      value={{
+        fullName,
+        setFullName,
+        email,
+        setEmail,
+        signature,
+        setSignature,
+        envelopeData,
+        envelope,
+
+        showPendingFieldTooltip,
+        setShowPendingFieldTooltip,
+
+        recipient,
+        recipientFieldsRemaining,
+        recipientFields,
+        nextRecipient,
+
+        otherRecipientCompletedFields,
+        assistantRecipients,
+        assistantFields,
+        setSelectedAssistantRecipientId,
+        selectedAssistantRecipient,
+        selectedRecipientFields,
+
+        signField,
+      }}
+    >
+      {children}
+    </EnvelopeSigningContext.Provider>
+  );
+};
+
+EnvelopeSigningProvider.displayName = 'EnvelopeSigningProvider';

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

@@ -21,7 +21,7 @@ export const DocumentAuditLogDownloadButton = ({
   const { _ } = useLingui();
 
   const { mutateAsync: downloadAuditLogs, isPending } =
-    trpc.document.downloadAuditLogs.useMutation();
+    trpc.document.auditLog.download.useMutation();
 
   const onDownloadAuditLogsClick = async () => {
     try {

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import type { DocumentData } from '@prisma/client';
+import type { DocumentData, EnvelopeItem } from '@prisma/client';
 import { DateTime } from 'luxon';
 
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -16,13 +19,16 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 
+import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
+import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
 import { ShareDocumentDownloadButton } from '../share-document-download-button';
 
 export type DocumentCertificateQRViewProps = {
   documentId: number;
   title: string;
-  documentData: DocumentData;
-  password?: string | null;
+  internalVersion: number;
+  envelopeItems: (EnvelopeItem & { documentData: DocumentData })[];
+  documentTeamUrl: string;
   recipientCount?: number;
   completedDate?: Date;
 };
@@ -30,31 +36,32 @@ export type DocumentCertificateQRViewProps = {
 export const DocumentCertificateQRView = ({
   documentId,
   title,
-  documentData,
-  password,
+  internalVersion,
+  envelopeItems,
+  documentTeamUrl,
   recipientCount = 0,
   completedDate,
 }: DocumentCertificateQRViewProps) => {
-  const { data: documentUrl } = trpc.shareLink.getDocumentInternalUrlForQRCode.useQuery({
+  const { data: documentViaUser } = trpc.document.get.useQuery({
     documentId,
   });
 
-  const [isDialogOpen, setIsDialogOpen] = useState(() => !!documentUrl);
+  const [isDialogOpen, setIsDialogOpen] = useState(() => !!documentViaUser);
 
   const formattedDate = completedDate
     ? DateTime.fromJSDate(completedDate).toLocaleString(DateTime.DATETIME_MED)
     : '';
 
   useEffect(() => {
-    if (documentUrl) {
+    if (documentViaUser) {
       setIsDialogOpen(true);
     }
-  }, [documentUrl]);
+  }, [documentViaUser]);
 
   return (
     <div className="mx-auto w-full max-w-screen-md">
       {/* Dialog for internal document link */}
-      {documentUrl && (
+      {documentViaUser && (
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogContent>
             <DialogHeader>
@@ -72,7 +79,11 @@ export const DocumentCertificateQRView = ({
 
             <DialogFooter className="flex flex-row justify-end gap-2">
               <Button asChild>
-                <a href={documentUrl} target="_blank" rel="noopener noreferrer">
+                <a
+                  href={`${formatDocumentsPath(documentTeamUrl)}/${documentViaUser.envelopeId}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <Trans>Go to document</Trans>
                 </a>
               </Button>
@@ -95,11 +106,21 @@ export const DocumentCertificateQRView = ({
           </div>
         </div>
 
-        <ShareDocumentDownloadButton title={title} documentData={documentData} />
+        <ShareDocumentDownloadButton title={title} documentData={envelopeItems[0].documentData} />
       </div>
 
       <div className="mt-12 w-full">
-        <PDFViewer key={documentData.id} documentData={documentData} password={password} />
+        {internalVersion === 2 ? (
+          <EnvelopeRenderProvider envelope={{ envelopeItems }}>
+            <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
+
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+          </EnvelopeRenderProvider>
+        ) : (
+          <>
+            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
+          </>
+        )}
       </div>
     </div>
   );

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useDropzone } from 'react-dropzone';
+import { ErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 import { Link, useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -49,7 +49,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
 
   const { quota, remaining, refreshLimits } = useLimits();
 
-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.create.useMutation();
 
   const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
 
@@ -64,7 +64,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
 
       const response = await putPdfFile(file);
 
-      const { id } = await createDocument({
+      const { legacyDocumentId: id } = await createDocument({
         title: file.name,
         documentDataId: response.id,
         timezone: userTimezone, // Note: When migrating to v2 document upload remember to pass this through as a 'userTimezone' field.
@@ -108,15 +108,51 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
     }
   };
 
-  const onFileDropRejected = () => {
+  const onFileDropRejected = (fileRejections: FileRejection[]) => {
+    if (!fileRejections.length) {
+      return;
+    }
+
+    // Since users can only upload only one file (no multi-upload), we only handle the first file rejection
+    const { file, errors } = fileRejections[0];
+
+    if (!errors.length) {
+      return;
+    }
+
+    const errorNodes = errors.map((error, index) => (
+      <span key={index} className="block">
+        {match(error.code)
+          .with(ErrorCode.FileTooLarge, () => (
+            <Trans>File is larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB</Trans>
+          ))
+          .with(ErrorCode.FileInvalidType, () => <Trans>Only PDF files are allowed</Trans>)
+          .with(ErrorCode.FileTooSmall, () => <Trans>File is too small</Trans>)
+          .with(ErrorCode.TooManyFiles, () => (
+            <Trans>Only one file can be uploaded at a time</Trans>
+          ))
+          .otherwise(() => (
+            <Trans>Unknown error</Trans>
+          ))}
+      </span>
+    ));
+
+    const description = (
+      <>
+        <span className="font-medium">
+          {file.name} <Trans>couldn't be uploaded:</Trans>
+        </span>
+        {errorNodes}
+      </>
+    );
+
     toast({
-      title: _(msg`Your document failed to upload.`),
-      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      title: _(msg`Upload failed`),
+      description,
       duration: 5000,
       variant: 'destructive',
     });
   };
-
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
       'application/pdf': ['.pdf'],
@@ -129,8 +165,8 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
         void onFileDrop(acceptedFile);
       }
     },
-    onDropRejected: () => {
-      void onFileDropRejected();
+    onDropRejected: (fileRejections) => {
+      onFileDropRejected(fileRejections);
     },
     noClick: true,
     noDragEventsBubbling: true,

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

@@ -59,23 +59,22 @@ export const DocumentEditForm = ({
 
   const utils = trpc.useUtils();
 
-  const { data: document, refetch: refetchDocument } =
-    trpc.document.getDocumentWithDetailsById.useQuery(
-      {
-        documentId: initialDocument.id,
-      },
-      {
-        initialData: initialDocument,
-        ...SKIP_QUERY_BATCH_META,
-      },
-    );
+  const { data: document, refetch: refetchDocument } = trpc.document.get.useQuery(
+    {
+      documentId: initialDocument.id,
+    },
+    {
+      initialData: initialDocument,
+      ...SKIP_QUERY_BATCH_META,
+    },
+  );
 
   const { recipients, fields } = document;
 
-  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.update.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
         {
           documentId: initialDocument.id,
         },
@@ -84,23 +83,10 @@ export const DocumentEditForm = ({
     },
   });
 
-  const { mutateAsync: setSigningOrderForDocument } =
-    trpc.document.setSigningOrderForDocument.useMutation({
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-      onSuccess: (newData) => {
-        utils.document.getDocumentWithDetailsById.setData(
-          {
-            documentId: initialDocument.id,
-          },
-          (oldData) => ({ ...(oldData || initialDocument), ...newData, id: Number(newData.id) }),
-        );
-      },
-    });
-
-  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
+  const { mutateAsync: addFields } = trpc.field.setFieldsForDocument.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: ({ fields: newFields }) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
         {
           documentId: initialDocument.id,
         },
@@ -112,7 +98,7 @@ export const DocumentEditForm = ({
   const { mutateAsync: setRecipients } = trpc.recipient.setDocumentRecipients.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: ({ recipients: newRecipients }) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
         {
           documentId: initialDocument.id,
         },
@@ -121,10 +107,10 @@ export const DocumentEditForm = ({
     },
   });
 
-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
+  const { mutateAsync: sendDocument } = trpc.document.distribute.useMutation({
     ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
     onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
+      utils.document.get.setData(
         {
           documentId: initialDocument.id,
         },
@@ -173,34 +159,37 @@ export const DocumentEditForm = ({
     return initialStep;
   });
 
+  const saveSettingsData = async (data: TAddSettingsFormSchema) => {
+    const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
+
+    const parsedGlobalAccessAuth = z
+      .array(ZDocumentAccessAuthTypesSchema)
+      .safeParse(data.globalAccessAuth);
+
+    return updateDocument({
+      documentId: document.id,
+      data: {
+        title: data.title,
+        externalId: data.externalId || null,
+        visibility: data.visibility,
+        globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
+        globalActionAuth: data.globalActionAuth ?? [],
+      },
+      meta: {
+        timezone,
+        dateFormat,
+        redirectUrl,
+        language: isValidLanguageCode(language) ? language : undefined,
+        typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+        uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+        drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+      },
+    });
+  };
+
   const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
     try {
-      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;
-
-      const parsedGlobalAccessAuth = z
-        .array(ZDocumentAccessAuthTypesSchema)
-        .safeParse(data.globalAccessAuth);
-
-      await updateDocument({
-        documentId: document.id,
-        data: {
-          title: data.title,
-          externalId: data.externalId || null,
-          visibility: data.visibility,
-          globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
-          globalActionAuth: data.globalActionAuth ?? [],
-        },
-        meta: {
-          timezone,
-          dateFormat,
-          redirectUrl,
-          language: isValidLanguageCode(language) ? language : undefined,
-          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
-          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
-          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
-        },
-      });
-
+      await saveSettingsData(data);
       setStep('signers');
     } catch (err) {
       console.error(err);
@@ -213,18 +202,51 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
+  const onAddSettingsFormAutoSave = async (data: TAddSettingsFormSchema) => {
     try {
-      await Promise.all([
-        setSigningOrderForDocument({
-          documentId: document.id,
-          signingOrder: data.signingOrder,
-        }),
+      await saveSettingsData(data);
+    } catch (err) {
+      console.error(err);
 
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the document settings.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const saveSignersData = async (data: TAddSignersFormSchema) => {
+    return Promise.all([
+      updateDocument({
+        documentId: document.id,
+        meta: {
+          allowDictateNextSigner: data.allowDictateNextSigner,
+          signingOrder: data.signingOrder,
+        },
+      }),
+
+      setRecipients({
+        documentId: document.id,
+        recipients: data.signers.map((signer) => ({
+          ...signer,
+          id: signer.nativeId,
+          // Explicitly set to null to indicate we want to remove auth if required.
+          actionAuth: signer.actionAuth ?? [],
+        })),
+      }),
+    ]);
+  };
+
+  const onAddSignersFormAutoSave = async (data: TAddSignersFormSchema) => {
+    try {
+      // For autosave, we need to return the recipients response for form state sync
+      const [, recipientsResponse] = await Promise.all([
         updateDocument({
           documentId: document.id,
           meta: {
             allowDictateNextSigner: data.allowDictateNextSigner,
+            signingOrder: data.signingOrder,
           },
         }),
 
@@ -232,12 +254,31 @@ export const DocumentEditForm = ({
           documentId: document.id,
           recipients: data.signers.map((signer) => ({
             ...signer,
+            id: signer.nativeId,
             // Explicitly set to null to indicate we want to remove auth if required.
             actionAuth: signer.actionAuth ?? [],
           })),
         }),
       ]);
 
+      return recipientsResponse;
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while adding signers.`),
+        variant: 'destructive',
+      });
+
+      throw err; // Re-throw so the autosave hook can handle the error
+    }
+  };
+
+  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
+    try {
+      await saveSignersData(data);
+
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -250,12 +291,20 @@ export const DocumentEditForm = ({
     }
   };
 
+  const saveFieldsData = async (data: TAddFieldsFormSchema) => {
+    return addFields({
+      documentId: document.id,
+      fields: data.fields.map((field) => ({
+        ...field,
+        id: field.nativeId,
+        envelopeItemId: document.documentData.envelopeItemId,
+      })),
+    });
+  };
+
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
-      await addFields({
-        documentId: document.id,
-        fields: data.fields,
-      });
+      await saveFieldsData(data);
 
       // Clear all field data from localStorage
       for (let i = 0; i < localStorage.length; i++) {
@@ -277,24 +326,60 @@ export const DocumentEditForm = ({
     }
   };
 
-  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
+  const onAddFieldsFormAutoSave = async (data: TAddFieldsFormSchema) => {
+    try {
+      await saveFieldsData(data);
+      // Don't clear localStorage on auto-save, only on explicit submit
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the fields.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const saveSubjectData = async (data: TAddSubjectFormSchema) => {
     const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
       data.meta;
 
-    try {
-      await sendDocument({
-        documentId: document.id,
-        meta: {
-          subject,
-          message,
-          distributionMethod,
-          emailId,
-          emailReplyTo: emailReplyTo || null,
-          emailSettings: emailSettings,
-        },
-      });
+    return updateDocument({
+      documentId: document.id,
+      meta: {
+        subject,
+        message,
+        distributionMethod,
+        emailId,
+        emailReplyTo,
+        emailSettings: emailSettings,
+      },
+    });
+  };
 
-      if (distributionMethod === DocumentDistributionMethod.EMAIL) {
+  const sendDocumentWithSubject = async (data: TAddSubjectFormSchema) => {
+    const { subject, message, distributionMethod, emailId, emailReplyTo, emailSettings } =
+      data.meta;
+
+    return sendDocument({
+      documentId: document.id,
+      meta: {
+        subject,
+        message,
+        distributionMethod,
+        emailId,
+        emailReplyTo: emailReplyTo || null,
+        emailSettings,
+      },
+    });
+  };
+
+  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
+    try {
+      await sendDocumentWithSubject(data);
+
+      if (data.meta.distributionMethod === DocumentDistributionMethod.EMAIL) {
         toast({
           title: _(msg`Document sent`),
           description: _(msg`Your document has been sent successfully.`),
@@ -309,7 +394,7 @@ export const DocumentEditForm = ({
           duration: 5000,
         });
       } else {
-        await navigate(`${documentRootPath}/${document.id}`);
+        await navigate(`${documentRootPath}/${document.envelopeId}`);
       }
     } catch (err) {
       console.error(err);
@@ -322,6 +407,21 @@ export const DocumentEditForm = ({
     }
   };
 
+  const onAddSubjectFormAutoSave = async (data: TAddSubjectFormSchema) => {
+    try {
+      // Save form data without sending the document
+      await saveSubjectData(data);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while auto-saving the subject form.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const currentDocumentFlow = documentFlow[step];
 
   /**
@@ -367,25 +467,28 @@ export const DocumentEditForm = ({
               fields={fields}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
+              onAutoSave={onAddSettingsFormAutoSave}
             />
 
             <AddSignersFormPartial
-              key={recipients.length}
+              key={document.id}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               signingOrder={document.documentMeta?.signingOrder}
               allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
               onSubmit={onAddSignersFormSubmit}
+              onAutoSave={onAddSignersFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddFieldsFormPartial
-              key={fields.length}
+              key={document.id}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
+              onAutoSave={onAddFieldsFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               teamId={team.id}
             />
@@ -397,6 +500,7 @@ export const DocumentEditForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
+              onAutoSave={onAddSubjectFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>

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

@@ -1,7 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
@@ -9,57 +8,43 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
 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';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewButtonProps = {
-  document: Document & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
-    team: Pick<Team, 'id' | 'url'>;
-  };
+  envelope: TEnvelope;
 };
 
-export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps) => {
+export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps) => {
   const { user } = useSession();
 
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const recipient = document.recipients.find((recipient) => recipient.email === user.email);
+  const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);
 
   const isRecipient = !!recipient;
-  const isPending = document.status === DocumentStatus.PENDING;
-  const isComplete = isDocumentCompleted(document);
+  const isPending = envelope.status === DocumentStatus.PENDING;
+  const isComplete = isDocumentCompleted(envelope);
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 
-  const documentsPath = formatDocumentsPath(document.team.url);
-  const formatPath = `${documentsPath}/${document.id}/edit`;
+  const documentsPath = formatDocumentsPath(envelope.team.url);
+  const formatPath = `${documentsPath}/${envelope.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
-        {
-          documentId: document.id,
-        },
-        {
-          context: {
-            teamId: document.team?.id?.toString(),
-          },
-        },
-      );
+      // Todo; Envelopes - Support multiple items
+      const envelopeItem = envelope.envelopeItems[0];
 
-      const documentData = documentWithData?.documentData;
-
-      if (!documentData) {
+      if (!envelopeItem.documentData) {
         throw new Error('No document available');
       }
 
-      await downloadPDF({ documentData, fileName: documentWithData.title });
+      await downloadPDF({ documentData: envelopeItem.documentData, fileName: envelopeItem.title });
     } catch (err) {
       toast({
         title: _(msg`Something went wrong`),

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

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus } from '@prisma/client';
 import {
   Copy,
@@ -19,7 +18,9 @@ import { Link, useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 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';
@@ -39,14 +40,10 @@ import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/d
 import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentPageViewDropdownProps = {
-  document: Document & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
-    team: Pick<Team, 'id' | 'url'> | null;
-  };
+  envelope: TEnvelope;
 };
 
-export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownProps) => {
+export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownProps) => {
   const { user } = useSession();
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -57,23 +54,23 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
 
-  const recipient = document.recipients.find((recipient) => recipient.email === user.email);
+  const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);
 
-  const isOwner = document.user.id === user.id;
-  const isDraft = document.status === DocumentStatus.DRAFT;
-  const isPending = document.status === DocumentStatus.PENDING;
-  const isDeleted = document.deletedAt !== null;
-  const isComplete = isDocumentCompleted(document);
-  const isCurrentTeamDocument = team && document.team?.url === team.url;
+  const isOwner = envelope.userId === user.id;
+  const isDraft = envelope.status === DocumentStatus.DRAFT;
+  const isPending = envelope.status === DocumentStatus.PENDING;
+  const isDeleted = envelope.deletedAt !== null;
+  const isComplete = isDocumentCompleted(envelope);
+  const isCurrentTeamDocument = team && envelope.teamId === team.id;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team.url);
 
   const onDownloadClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
+      const documentWithData = await trpcClient.document.get.query(
         {
-          documentId: document.id,
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
         },
         {
           context: {
@@ -88,7 +85,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
         return;
       }
 
-      await downloadPDF({ documentData, fileName: document.title });
+      await downloadPDF({ documentData, fileName: envelope.title });
     } catch (err) {
       toast({
         title: _(msg`Something went wrong`),
@@ -100,9 +97,9 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
 
   const onDownloadOriginalClick = async () => {
     try {
-      const documentWithData = await trpcClient.document.getDocumentById.query(
+      const documentWithData = await trpcClient.document.get.query(
         {
-          documentId: document.id,
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
         },
         {
           context: {
@@ -117,7 +114,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
         return;
       }
 
-      await downloadPDF({ documentData, fileName: document.title, version: 'original' });
+      await downloadPDF({ documentData, fileName: envelope.title, version: 'original' });
     } catch (err) {
       toast({
         title: _(msg`Something went wrong`),
@@ -127,7 +124,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
     }
   };
 
-  const nonSignedRecipients = document.recipients.filter((item) => item.signingStatus !== 'SIGNED');
+  const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
     <DropdownMenu>
@@ -142,7 +139,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
 
         {(isOwner || isCurrentTeamDocument) && !isComplete && (
           <DropdownMenuItem asChild>
-            <Link to={`${documentsPath}/${document.id}/edit`}>
+            <Link to={`${documentsPath}/${envelope.id}/edit`}>
               <Edit className="mr-2 h-4 w-4" />
               <Trans>Edit</Trans>
             </Link>
@@ -162,9 +159,9 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
         </DropdownMenuItem>
 
         <DropdownMenuItem asChild>
-          <Link to={`${documentsPath}/${document.id}/logs`}>
+          <Link to={`${documentsPath}/${envelope.id}/logs`}>
             <ScrollTextIcon className="mr-2 h-4 w-4" />
-            <Trans>Audit Log</Trans>
+            <Trans>Audit Logs</Trans>
           </Link>
         </DropdownMenuItem>
 
@@ -184,7 +181,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
 
         {canManageDocument && (
           <DocumentRecipientLinkCopyDialog
-            recipients={document.recipients}
+            recipients={envelope.recipients}
             trigger={
               <DropdownMenuItem
                 disabled={!isPending || isDeleted}
@@ -197,10 +194,16 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
           />
         )}
 
-        <DocumentResendDialog document={document} recipients={nonSignedRecipients} />
+        <DocumentResendDialog
+          document={{
+            ...envelope,
+            id: mapSecondaryIdToDocumentId(envelope.secondaryId),
+          }}
+          recipients={nonSignedRecipients}
+        />
 
         <DocumentShareButton
-          documentId={document.id}
+          documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
           token={isOwner ? undefined : recipient?.token}
           trigger={({ loading, disabled }) => (
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
@@ -214,9 +217,9 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
       </DropdownMenuContent>
 
       <DocumentDeleteDialog
-        id={document.id}
-        status={document.status}
-        documentTitle={document.title}
+        id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
+        status={envelope.status}
+        documentTitle={envelope.title}
         open={isDeleteDialogOpen}
         canManageDocument={canManageDocument}
         onOpenChange={setDeleteDialogOpen}
@@ -227,7 +230,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
 
       {isDuplicateDialogOpen && (
         <DocumentDuplicateDialog
-          id={document.id}
+          id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
           open={isDuplicateDialogOpen}
           onOpenChange={setDuplicateDialogOpen}
         />

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

@@ -3,21 +3,18 @@ import { useMemo } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient, User } from '@prisma/client';
 import { DateTime } from 'luxon';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
 
 export type DocumentPageViewInformationProps = {
   userId: number;
-  document: Document & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
-  };
+  envelope: TEnvelope;
 };
 
 export const DocumentPageViewInformation = ({
-  document,
+  envelope,
   userId,
 }: DocumentPageViewInformationProps) => {
   const isMounted = useIsMounted();
@@ -29,23 +26,23 @@ export const DocumentPageViewInformation = ({
       {
         description: msg`Uploaded by`,
         value:
-          userId === document.userId ? _(msg`You`) : (document.user.name ?? document.user.email),
+          userId === envelope.userId ? _(msg`You`) : (envelope.user.name ?? envelope.user.email),
       },
       {
         description: msg`Created`,
-        value: DateTime.fromJSDate(document.createdAt)
+        value: DateTime.fromJSDate(envelope.createdAt)
           .setLocale(i18n.locales?.[0] || i18n.locale)
           .toFormat('MMMM d, yyyy'),
       },
       {
         description: msg`Last modified`,
-        value: DateTime.fromJSDate(document.updatedAt)
+        value: DateTime.fromJSDate(envelope.updatedAt)
           .setLocale(i18n.locales?.[0] || i18n.locale)
           .toRelative(),
       },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMounted, document, userId]);
+  }, [isMounted, envelope, userId]);
 
   return (
     <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">

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

@@ -32,7 +32,7 @@ export const DocumentPageViewRecentActivity = ({
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+  } = trpc.document.auditLog.find.useInfiniteQuery(
     {
       documentId,
       filterForRecentActivity: true,

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

@@ -2,7 +2,6 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
-import type { Document, Recipient } from '@prisma/client';
 import {
   AlertTriangle,
   CheckIcon,
@@ -17,6 +16,7 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
@@ -27,20 +27,18 @@ import { PopoverHover } from '@documenso/ui/primitives/popover';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewRecipientsProps = {
-  document: Document & {
-    recipients: Recipient[];
-  };
+  envelope: TEnvelope;
   documentRootPath: string;
 };
 
 export const DocumentPageViewRecipients = ({
-  document,
+  envelope,
   documentRootPath,
 }: DocumentPageViewRecipientsProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const recipients = document.recipients;
+  const recipients = envelope.recipients;
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
@@ -49,9 +47,9 @@ export const DocumentPageViewRecipients = ({
           <Trans>Recipients</Trans>
         </h1>
 
-        {!isDocumentCompleted(document.status) && (
+        {!isDocumentCompleted(envelope.status) && (
           <Link
-            to={`${documentRootPath}/${document.id}/edit?step=signers`}
+            to={`${documentRootPath}/${envelope.id}/edit?step=signers`}
             title={_(msg`Modify recipients`)}
             className="flex flex-row items-center justify-between"
           >
@@ -84,7 +82,7 @@ export const DocumentPageViewRecipients = ({
             />
 
             <div className="flex flex-row items-center">
-              {document.status !== DocumentStatus.DRAFT &&
+              {envelope.status !== DocumentStatus.DRAFT &&
                 recipient.signingStatus === SigningStatus.SIGNED && (
                   <Badge variant="default">
                     {match(recipient.role)
@@ -95,7 +93,7 @@ export const DocumentPageViewRecipients = ({
                         </>
                       ))
                       .with(RecipientRole.CC, () =>
-                        document.status === DocumentStatus.COMPLETED ? (
+                        envelope.status === DocumentStatus.COMPLETED ? (
                           <>
                             <MailIcon className="mr-1 h-3 w-3" />
                             <Trans>Sent</Trans>
@@ -130,7 +128,7 @@ export const DocumentPageViewRecipients = ({
                   </Badge>
                 )}
 
-              {document.status !== DocumentStatus.DRAFT &&
+              {envelope.status !== DocumentStatus.DRAFT &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED && (
                   <Badge variant="secondary">
                     <Clock className="mr-1 h-3 w-3" />
@@ -138,7 +136,7 @@ export const DocumentPageViewRecipients = ({
                   </Badge>
                 )}
 
-              {document.status !== DocumentStatus.DRAFT &&
+              {envelope.status !== DocumentStatus.DRAFT &&
                 recipient.signingStatus === SigningStatus.REJECTED && (
                   <PopoverHover
                     trigger={
@@ -158,7 +156,7 @@ export const DocumentPageViewRecipients = ({
                   </PopoverHover>
                 )}
 
-              {document.status === DocumentStatus.PENDING &&
+              {envelope.status === DocumentStatus.PENDING &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED &&
                 recipient.role !== RecipientRole.CC && (
                   <CopyTextButton

apps/remix/app/components/general/document/document-upload-button.tsx

@@ -28,11 +28,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
-export type DocumentUploadDropzoneProps = {
+export type DocumentUploadButtonProps = {
   className?: string;
 };
 
-export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProps) => {
+export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
@@ -52,7 +52,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
   const [isLoading, setIsLoading] = useState(false);
 
-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
+  const { mutateAsync: createDocument } = trpc.document.create.useMutation();
 
   const disabledMessage = useMemo(() => {
     if (organisation.subscription && remaining.documents === 0) {
@@ -75,10 +75,10 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
       const response = await putPdfFile(file);
 
-      const { id } = await createDocument({
+      const { legacyDocumentId: id } = await createDocument({
         title: file.name,
         documentDataId: response.id,
-        timezone: userTimezone, // Note: When migrating to v2 document upload remember to pass this through as a 'userTimezone' field.
+        timezone: userTimezone,
         folderId: folderId ?? undefined,
       });
 
@@ -140,7 +140,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
                 loading={isLoading}
                 disabled={remaining.documents === 0 || !user.emailVerified}
                 disabledMessage={disabledMessage}
-                onDrop={onFileDrop}
+                onDrop={async (files) => onFileDrop(files[0])}
                 onDropRejected={onFileDropRejected}
               />
             </div>

apps/remix/app/components/general/document/envelope-upload-button.tsx

@@ -0,0 +1,198 @@
+import { useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import { useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type EnvelopeUploadButtonProps = {
+  className?: string;
+  type: EnvelopeType;
+  folderId?: string;
+};
+
+/**
+ * Upload an envelope
+ */
+export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUploadButtonProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+
+  const team = useCurrentTeam();
+
+  const navigate = useNavigate();
+  const organisation = useCurrentOrganisation();
+
+  const userTimezone = TIME_ZONES.find(
+    (timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone,
+  );
+
+  const { quota, remaining, refreshLimits } = useLimits();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { mutateAsync: createEnvelope } = trpc.envelope.create.useMutation();
+
+  const disabledMessage = useMemo(() => {
+    if (organisation.subscription && remaining.documents === 0) {
+      return msg`Document upload disabled due to unpaid invoices`;
+    }
+
+    if (remaining.documents === 0) {
+      return msg`You have reached your document limit.`;
+    }
+
+    if (!user.emailVerified) {
+      return msg`Verify your email to upload documents.`;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [remaining.documents, user.emailVerified, team]);
+
+  const onFileDrop = async (files: File[]) => {
+    try {
+      setIsLoading(true);
+
+      const result = await Promise.all(
+        files.map(async (file) => {
+          try {
+            const response = await putPdfFile(file);
+
+            return {
+              title: file.name,
+              documentDataId: response.id,
+            };
+          } catch (err) {
+            console.error(err);
+            throw new Error('Failed to upload document');
+          }
+        }),
+      );
+
+      const envelopeItemsToCreate = result.filter(
+        (item): item is { title: string; documentDataId: string } => item !== undefined,
+      );
+
+      const { id } = await createEnvelope({
+        folderId,
+        type,
+        title: files[0].name,
+        items: envelopeItemsToCreate,
+        meta: {
+          timezone: userTimezone,
+        },
+      }).catch((error) => {
+        console.error(error);
+
+        throw error;
+      });
+
+      void refreshLimits();
+
+      const pathPrefix =
+        type === EnvelopeType.DOCUMENT
+          ? formatDocumentsPath(team.url)
+          : formatTemplatesPath(team.url);
+
+      await navigate(`${pathPrefix}/${id}/edit`);
+
+      toast({
+        title: type === EnvelopeType.DOCUMENT ? t`Document uploaded` : t`Template uploaded`,
+        description:
+          type === EnvelopeType.DOCUMENT
+            ? t`Your document has been uploaded successfully.`
+            : t`Your template has been uploaded successfully.`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(err);
+
+      const errorMessage = match(error.code)
+        .with('INVALID_DOCUMENT_FILE', () => t`You cannot upload encrypted PDFs`)
+        .with(
+          AppErrorCode.LIMIT_EXCEEDED,
+          () => t`You have reached your document limit for this month. Please upgrade your plan.`,
+        )
+        .otherwise(() => t`An error occurred while uploading your document.`);
+
+      toast({
+        title: t`Error`,
+        description: errorMessage,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onFileDropRejected = () => {
+    toast({
+      title:
+        type === EnvelopeType.DOCUMENT
+          ? t`Your document failed to upload.`
+          : t`Your template failed to upload.`,
+      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  return (
+    <div className={cn('relative', className)}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <DocumentDropzone
+                loading={isLoading}
+                disabled={remaining.documents === 0 || !user.emailVerified}
+                disabledMessage={disabledMessage}
+                onDrop={onFileDrop}
+                onDropRejected={onFileDropRejected}
+                type="envelope"
+              />
+            </div>
+          </TooltipTrigger>
+
+          {type === EnvelopeType.DOCUMENT &&
+            remaining.documents > 0 &&
+            Number.isFinite(remaining.documents) && (
+              <TooltipContent>
+                <p className="text-sm">
+                  <Trans>
+                    {remaining.documents} of {quota.documents} documents remaining this month.
+                  </Trans>
+                </p>
+              </TooltipContent>
+            )}
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx

@@ -0,0 +1,316 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { FieldType } from '@prisma/client';
+import {
+  CalendarIcon,
+  CheckSquareIcon,
+  ContactIcon,
+  DiscIcon,
+  HashIcon,
+  ListIcon,
+  MailIcon,
+  TextIcon,
+  UserIcon,
+} from 'lucide-react';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
+import { nanoid } from '@documenso/lib/universal/id';
+import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
+import { cn } from '@documenso/ui/lib/utils';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+
+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 fieldButtonList = [
+  {
+    type: FieldType.SIGNATURE,
+    icon: SignatureIcon,
+    name: msg`Signature`,
+    className: 'font-signature text-lg',
+  },
+  {
+    type: FieldType.EMAIL,
+    icon: MailIcon,
+    name: msg`Email`,
+  },
+  {
+    type: FieldType.NAME,
+    icon: UserIcon,
+    name: msg`Name`,
+  },
+  {
+    type: FieldType.INITIALS,
+    icon: ContactIcon,
+    name: msg`Initials`,
+  },
+  {
+    type: FieldType.DATE,
+    icon: CalendarIcon,
+    name: msg`Date`,
+  },
+  {
+    type: FieldType.TEXT,
+    icon: TextIcon,
+    name: msg`Text`,
+  },
+  {
+    type: FieldType.NUMBER,
+    icon: HashIcon,
+    name: msg`Number`,
+  },
+  {
+    type: FieldType.RADIO,
+    icon: DiscIcon,
+    name: msg`Radio`,
+  },
+  {
+    type: FieldType.CHECKBOX,
+    icon: CheckSquareIcon,
+    name: msg`Checkbox`,
+  },
+  {
+    type: FieldType.DROPDOWN,
+    icon: ListIcon,
+    name: msg`Dropdown`,
+  },
+];
+
+type EnvelopeEditorFieldDragDropProps = {
+  selectedRecipientId: number | null;
+  selectedEnvelopeItemId: string | null;
+};
+
+export const EnvelopeEditorFieldDragDrop = ({
+  selectedRecipientId,
+  selectedEnvelopeItemId,
+}: EnvelopeEditorFieldDragDropProps) => {
+  const { envelope, editorFields, isTemplate } = useCurrentEnvelopeEditor();
+
+  const { t } = useLingui();
+
+  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
+
+  const { isWithinPageBounds, getPage } = useDocumentElement();
+
+  const isFieldsDisabled = useMemo(() => {
+    const selectedSigner = envelope.recipients.find(
+      (recipient) => recipient.id === selectedRecipientId,
+    );
+    const fields = envelope.fields;
+
+    if (!selectedSigner) {
+      return true;
+    }
+
+    // Allow fields to be modified for templates regardless of anything.
+    if (isTemplate) {
+      return false;
+    }
+
+    return !canRecipientFieldsBeModified(selectedSigner, fields);
+  }, [selectedRecipientId, envelope.recipients, envelope.fields]);
+
+  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
+  const [coords, setCoords] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const fieldBounds = useRef({
+    height: 0,
+    width: 0,
+  });
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      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],
+  );
+
+  const onMouseClick = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField || !selectedRecipientId || !selectedEnvelopeItemId) {
+        return;
+      }
+
+      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+
+      if (
+        !$page ||
+        !isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        )
+      ) {
+        setSelectedField(null);
+        return;
+      }
+
+      const { top, left, height, width } = getBoundingClientRect($page);
+
+      console.log({
+        top,
+        left,
+        height,
+        width,
+        rawPageX: event.pageX,
+        rawPageY: event.pageY,
+      });
+
+      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 = {
+        formId: nanoid(12),
+        envelopeItemId: selectedEnvelopeItemId,
+        type: selectedField,
+        page: pageNumber,
+        positionX: pageX,
+        positionY: pageY,
+        width: fieldPageWidth,
+        height: fieldPageHeight,
+        recipientId: selectedRecipientId,
+        fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[selectedField]),
+      };
+
+      editorFields.addField(field);
+
+      setIsFieldWithinBounds(false);
+      setSelectedField(null);
+    },
+    [
+      isWithinPageBounds,
+      selectedField,
+      selectedRecipientId,
+      selectedEnvelopeItemId,
+      getPage,
+      editorFields,
+    ],
+  );
+
+  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();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (selectedField) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseClick);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseClick);
+    };
+  }, [onMouseClick, onMouseMove, selectedField]);
+
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-x-2 gap-y-2.5">
+        {fieldButtonList.map((field) => (
+          <button
+            disabled={isFieldsDisabled}
+            key={field.type}
+            type="button"
+            onClick={() => setSelectedField(field.type)}
+            onMouseDown={() => setSelectedField(field.type)}
+            data-selected={selectedField === field.type ? true : undefined}
+            className="group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-gray-200 px-4 transition-colors hover:border-blue-300 hover:bg-blue-50"
+          >
+            <p
+              className={cn(
+                'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                field.className,
+              )}
+            >
+              {field.type !== FieldType.SIGNATURE && <field.icon className="h-4 w-4" />}
+              {t(field.name)}
+            </p>
+          </button>
+        ))}
+      </div>
+
+      {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 rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
+            // selectedSignerStyles?.base,
+            RECIPIENT_COLOR_STYLES.yellow.base, // Todo: Envelopes
+            {
+              '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
+              'dark:text-black/60': isFieldWithinBounds,
+            },
+          )}
+          style={{
+            top: coords.y,
+            left: coords.x,
+            height: fieldBounds.current.height,
+            width: fieldBounds.current.width,
+          }}
+        >
+          <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+            {t(FRIENDLY_FIELD_TYPE[selectedField])}
+          </span>
+        </div>
+      )}
+    </>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -0,0 +1,686 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import type { FieldType } from '@prisma/client';
+import Konva from 'konva';
+import type { Layer } from 'konva/lib/Layer';
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { Transformer } from 'konva/lib/shapes/Transformer';
+import { CopyPlusIcon, SquareStackIcon, TrashIcon } from 'lucide-react';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
+import {
+  MIN_FIELD_HEIGHT_PX,
+  MIN_FIELD_WIDTH_PX,
+  convertPixelToPercentage,
+} from '@documenso/lib/universal/field-renderer/field-renderer';
+import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
+import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
+
+import { fieldButtonList } from './envelope-editor-fields-drag-drop';
+
+export default function EnvelopeEditorFieldsPageRenderer() {
+  const pageContext = usePageContext();
+
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
+
+  const { _className, page, rotate, scale } = pageContext;
+
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
+
+  const { t } = useLingui();
+  const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
+
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Layer | null>(null);
+  const interactiveTransformer = useRef<Transformer | null>(null);
+
+  const [selectedKonvaFieldGroups, setSelectedKonvaFieldGroups] = useState<Konva.Group[]>([]);
+
+  const [isFieldChanging, setIsFieldChanging] = useState(false);
+  const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);
+
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  const localPageFields = useMemo(
+    () =>
+      editorFields.localFields.filter(
+        (field) =>
+          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+      ),
+    [editorFields.localFields, pageContext.pageNumber],
+  );
+
+  // Custom renderer from Konva examples.
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
+
+      const { current: canvas } = canvasElement;
+      const { current: container } = konvaContainer;
+
+      if (!canvas || !container) {
+        return;
+      }
+
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        createPageCanvas(container);
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, viewport],
+  );
+
+  const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
+    console.log('Field resized or moved');
+
+    const { current: container } = canvasElement;
+
+    if (!container) {
+      return;
+    }
+
+    const isDragEvent = event.type === 'dragend';
+
+    const fieldGroup = event.target as Konva.Group;
+    const fieldFormId = fieldGroup.id();
+
+    const {
+      width: fieldPixelWidth,
+      height: fieldPixelHeight,
+      x: fieldX,
+      y: fieldY,
+    } = fieldGroup.getClientRect({
+      skipStroke: true,
+      skipShadow: true,
+    });
+
+    const { height: pageHeight, width: pageWidth } = getBoundingClientRect(container);
+
+    // Calculate x and y as a percentage of the page width and height
+    const positionPercentX = (fieldX / pageWidth) * 100;
+    const positionPercentY = (fieldY / pageHeight) * 100;
+
+    // Get the bounds as a percentage of the page width and height
+    const fieldPageWidth = (fieldPixelWidth / pageWidth) * 100;
+    const fieldPageHeight = (fieldPixelHeight / pageHeight) * 100;
+
+    const fieldUpdates: Partial<TLocalField> = {
+      positionX: positionPercentX,
+      positionY: positionPercentY,
+    };
+
+    // Do not update the width/height unless the field has actually been resized.
+    // This is because our calculations will shift the width/height slightly
+    // due to the way we convert between pixel and percentage.
+    if (!isDragEvent) {
+      fieldUpdates.width = fieldPageWidth;
+      fieldUpdates.height = fieldPageHeight;
+    }
+
+    // Todo: envelopes Use id
+    editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
+
+    // Select the field if it is not already selected.
+    if (isDragEvent && interactiveTransformer.current?.nodes().length === 0) {
+      setSelectedFields([fieldGroup]);
+    }
+
+    pageLayer.current?.batchDraw();
+  };
+
+  const renderFieldOnLayer = (field: TLocalField) => {
+    if (!pageLayer.current || !interactiveTransformer.current) {
+      console.error('Layer not loaded yet');
+      return;
+    }
+
+    const recipient = envelope.recipients.find((r) => r.id === field.recipientId);
+    const isFieldEditable =
+      recipient !== undefined && canRecipientFieldsBeModified(recipient, envelope.fields);
+
+    const { fieldGroup, isFirstRender } = renderField({
+      pageLayer: pageLayer.current,
+      field: {
+        renderId: field.formId,
+        ...field,
+        customText: '',
+        inserted: false,
+        fieldMeta: field.fieldMeta,
+      },
+      pageWidth: viewport.width,
+      pageHeight: viewport.height,
+      color: getRecipientColorKey(field.recipientId),
+      editable: isFieldEditable,
+      mode: 'edit',
+    });
+
+    if (!isFieldEditable) {
+      return;
+    }
+
+    fieldGroup.off('click');
+    fieldGroup.off('transformend');
+    fieldGroup.off('dragend');
+
+    // Set up field selection.
+    fieldGroup.on('click', () => {
+      removePendingField();
+      setSelectedFields([fieldGroup]);
+      pageLayer.current?.batchDraw();
+    });
+
+    fieldGroup.on('transformend', handleResizeOrMove);
+    fieldGroup.on('dragend', handleResizeOrMove);
+  };
+
+  /**
+   * Create the initial Konva page canvas and initialize all fields and interactions.
+   */
+  const createPageCanvas = (container: HTMLDivElement) => {
+    stage.current = new Konva.Stage({
+      container,
+      width: viewport.width,
+      height: viewport.height,
+    });
+
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
+    stage.current?.add(pageLayer.current);
+
+    // Initialize snap guides layer
+    // snapGuideLayer.current = initializeSnapGuides(stage.current);
+
+    // Add transformer for resizing and rotating.
+    interactiveTransformer.current = createInteractiveTransformer(stage.current, pageLayer.current);
+
+    // Render the fields.
+    for (const field of localPageFields) {
+      renderFieldOnLayer(field);
+    }
+
+    // Handle stage click to deselect.
+    stage.current?.on('click', (e) => {
+      removePendingField();
+
+      if (e.target === stage.current) {
+        setSelectedFields([]);
+        pageLayer.current?.batchDraw();
+      }
+    });
+
+    // When an item is dragged, select it automatically.
+    const onDragStartOrEnd = (e: KonvaEventObject<Event>) => {
+      removePendingField();
+
+      if (!e.target.hasName('field-group')) {
+        return;
+      }
+
+      setIsFieldChanging(e.type === 'dragstart');
+
+      const itemAlreadySelected = (interactiveTransformer.current?.nodes() || []).includes(
+        e.target,
+      );
+
+      // Do nothing and allow the transformer to handle it.
+      // Required so when multiple items are selected, this won't deselect them.
+      if (itemAlreadySelected) {
+        return;
+      }
+
+      setSelectedFields([e.target]);
+    };
+
+    stage.current?.on('dragstart', onDragStartOrEnd);
+    stage.current?.on('dragend', onDragStartOrEnd);
+    stage.current?.on('transformstart', () => setIsFieldChanging(true));
+    stage.current?.on('transformend', () => setIsFieldChanging(false));
+
+    pageLayer.current.batchDraw();
+  };
+
+  /**
+   * Creates an interactive transformer for the fields.
+   *
+   * Allows:
+   * - Resizing
+   * - Moving
+   * - Selecting multiple fields
+   * - Selecting empty area to create fields
+   */
+  const createInteractiveTransformer = (stage: Konva.Stage, layer: Konva.Layer) => {
+    const transformer = new Konva.Transformer({
+      rotateEnabled: false,
+      keepRatio: false,
+      shouldOverdrawWholeArea: true,
+      ignoreStroke: true,
+      flipEnabled: false,
+      boundBoxFunc: (oldBox, newBox) => {
+        // Enforce minimum size
+        if (newBox.width < 30 || newBox.height < 20) {
+          return oldBox;
+        }
+
+        return newBox;
+      },
+    });
+
+    layer.add(transformer);
+
+    // Add selection rectangle.
+    const selectionRectangle = new Konva.Rect({
+      fill: 'rgba(24, 160, 251, 0.3)',
+      visible: false,
+    });
+    layer.add(selectionRectangle);
+
+    let x1: number;
+    let y1: number;
+    let x2: number;
+    let y2: number;
+
+    stage.on('mousedown touchstart', (e) => {
+      // do nothing if we mousedown on any shape
+      if (e.target !== stage) {
+        return;
+      }
+
+      const pointerPosition = stage.getPointerPosition();
+
+      if (!pointerPosition) {
+        return;
+      }
+
+      x1 = pointerPosition.x;
+      y1 = pointerPosition.y;
+      x2 = pointerPosition.x;
+      y2 = pointerPosition.y;
+
+      selectionRectangle.setAttrs({
+        x: x1,
+        y: y1,
+        width: 0,
+        height: 0,
+        visible: true,
+      });
+    });
+
+    stage.on('mousemove touchmove', () => {
+      // do nothing if we didn't start selection
+      if (!selectionRectangle.visible()) {
+        return;
+      }
+
+      selectionRectangle.moveToTop();
+
+      const pointerPosition = stage.getPointerPosition();
+
+      if (!pointerPosition) {
+        return;
+      }
+
+      x2 = pointerPosition.x;
+      y2 = pointerPosition.y;
+
+      selectionRectangle.setAttrs({
+        x: Math.min(x1, x2),
+        y: Math.min(y1, y2),
+        width: Math.abs(x2 - x1),
+        height: Math.abs(y2 - y1),
+      });
+    });
+
+    stage.on('mouseup touchend', () => {
+      // do nothing if we didn't start selection
+      if (!selectionRectangle.visible()) {
+        return;
+      }
+
+      // Update visibility in timeout, so we can check it in click event
+      setTimeout(() => {
+        selectionRectangle.visible(false);
+      });
+
+      const stageFieldGroups = stage.find('.field-group') || [];
+      const box = selectionRectangle.getClientRect();
+      const selectedFieldGroups = stageFieldGroups.filter(
+        (shape) => Konva.Util.haveIntersection(box, shape.getClientRect()) && shape.draggable(),
+      );
+      setSelectedFields(selectedFieldGroups);
+
+      // Create a field if no items are selected or the size is too small.
+      if (
+        selectedFieldGroups.length === 0 &&
+        canvasElement.current &&
+        box.width > MIN_FIELD_WIDTH_PX &&
+        box.height > MIN_FIELD_HEIGHT_PX &&
+        editorFields.selectedRecipient &&
+        canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields)
+      ) {
+        const pendingFieldCreation = new Konva.Rect({
+          name: 'pending-field-creation',
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
+          fill: 'rgba(24, 160, 251, 0.3)',
+        });
+
+        layer.add(pendingFieldCreation);
+        setPendingFieldCreation(pendingFieldCreation);
+      }
+    });
+
+    // Clicks should select/deselect shapes
+    stage.on('click tap', function (e) {
+      // if we are selecting with rect, do nothing
+      if (
+        selectionRectangle.visible() &&
+        selectionRectangle.width() > 0 &&
+        selectionRectangle.height() > 0
+      ) {
+        return;
+      }
+
+      // If empty area clicked, remove all selections
+      if (e.target === stage) {
+        setSelectedFields([]);
+        return;
+      }
+
+      // Do nothing if field not clicked, or if field is not editable
+      if (!e.target.hasName('field-group') || e.target.draggable() === false) {
+        return;
+      }
+
+      // do we pressed shift or ctrl?
+      const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+      const isSelected = transformer.nodes().indexOf(e.target) >= 0;
+
+      if (!metaPressed && !isSelected) {
+        // if no key pressed and the node is not selected
+        // select just one
+        setSelectedFields([e.target]);
+      } else if (metaPressed && isSelected) {
+        // if we pressed keys and node was selected
+        // we need to remove it from selection:
+        const nodes = transformer.nodes().slice(); // use slice to have new copy of array
+        // remove node from array
+        nodes.splice(nodes.indexOf(e.target), 1);
+        setSelectedFields(nodes);
+      } else if (metaPressed && !isSelected) {
+        // add the node into selection
+        const nodes = transformer.nodes().concat([e.target]);
+        setSelectedFields(nodes);
+      }
+    });
+
+    return transformer;
+  };
+
+  /**
+   * Render fields when they are added or removed from the localFields.
+   */
+  useEffect(() => {
+    if (!pageLayer.current || !stage.current) {
+      return;
+    }
+
+    // If doesn't exist in localFields, destroy it since it's been deleted.
+    pageLayer.current.find('Group').forEach((group) => {
+      if (
+        group.name() === 'field-group' &&
+        !localPageFields.some((field) => field.formId === group.id())
+      ) {
+        console.log('Field removed, removing from canvas');
+        group.destroy();
+      }
+    });
+
+    // If it exists, rerender.
+    localPageFields.forEach((field) => {
+      console.log('Field created/updated, rendering on canvas');
+      renderFieldOnLayer(field);
+    });
+
+    // If it doesn't exist, render it.
+    //
+
+    // Rerender the transformer
+    interactiveTransformer.current?.forceUpdate();
+
+    pageLayer.current.batchDraw();
+  }, [localPageFields]);
+
+  const setSelectedFields = (nodes: Konva.Node[]) => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const fieldGroups = nodes.filter((node) => node.hasName('field-group')) as Konva.Group[];
+
+    interactiveTransformer.current?.nodes(fieldGroups);
+    setSelectedKonvaFieldGroups(fieldGroups);
+
+    if (fieldGroups.length === 0 || fieldGroups.length > 1) {
+      editorFields.setSelectedField(null);
+    }
+
+    // Handle single field selection.
+    if (fieldGroups.length === 1) {
+      const fieldGroup = fieldGroups[0];
+
+      editorFields.setSelectedField(fieldGroup.id());
+      fieldGroup.moveToTop();
+    }
+  };
+
+  const deletedSelectedFields = () => {
+    const fieldFormids = selectedKonvaFieldGroups
+      .map((field) => field.id())
+      .filter((field) => field !== undefined);
+
+    editorFields.removeFieldsByFormId(fieldFormids);
+
+    setSelectedFields([]);
+  };
+
+  const duplicatedSelectedFields = () => {
+    const fields = selectedKonvaFieldGroups
+      .map((field) => editorFields.getFieldByFormId(field.id()))
+      .filter((field) => field !== undefined);
+
+    for (const field of fields) {
+      editorFields.duplicateField(field);
+    }
+  };
+
+  const duplicatedSelectedFieldsOnAllPages = () => {
+    const fields = selectedKonvaFieldGroups
+      .map((field) => editorFields.getFieldByFormId(field.id()))
+      .filter((field) => field !== undefined);
+
+    for (const field of fields) {
+      editorFields.duplicateFieldToAllPages(field);
+    }
+
+    setSelectedFields([]);
+  };
+
+  /**
+   * Create a field from a pending field.
+   */
+  const createFieldFromPendingTemplate = (pendingFieldCreation: Konva.Rect, type: FieldType) => {
+    const pixelWidth = pendingFieldCreation.width();
+    const pixelHeight = pendingFieldCreation.height();
+    const pixelX = pendingFieldCreation.x();
+    const pixelY = pendingFieldCreation.y();
+
+    removePendingField();
+
+    if (!canvasElement.current || !currentEnvelopeItem || !editorFields.selectedRecipient) {
+      return;
+    }
+
+    const { height: pageHeight, width: pageWidth } = getBoundingClientRect(canvasElement.current);
+
+    const { fieldX, fieldY, fieldWidth, fieldHeight } = convertPixelToPercentage({
+      width: pixelWidth,
+      height: pixelHeight,
+      positionX: pixelX,
+      positionY: pixelY,
+      pageWidth,
+      pageHeight,
+    });
+
+    editorFields.addField({
+      envelopeItemId: currentEnvelopeItem.id,
+      page: pageContext.pageNumber,
+      type,
+      positionX: fieldX,
+      positionY: fieldY,
+      width: fieldWidth,
+      height: fieldHeight,
+      recipientId: editorFields.selectedRecipient.id,
+      fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[type]),
+    });
+  };
+
+  /**
+   * Remove any pending fields or rectangle on the canvas.
+   */
+  const removePendingField = () => {
+    setPendingFieldCreation(null);
+
+    const pendingFieldCreation = pageLayer.current?.find('.pending-field-creation') || [];
+
+    for (const field of pendingFieldCreation) {
+      field.destroy();
+    }
+  };
+
+  if (!currentEnvelopeItem) {
+    return null;
+  }
+
+  return (
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
+      {selectedKonvaFieldGroups.length > 0 &&
+        interactiveTransformer.current &&
+        !isFieldChanging && (
+          <div
+            style={{
+              position: 'absolute',
+              top:
+                interactiveTransformer.current.y() +
+                interactiveTransformer.current.getClientRect().height +
+                5 +
+                'px',
+              left:
+                interactiveTransformer.current.x() +
+                interactiveTransformer.current.getClientRect().width / 2 +
+                'px',
+              transform: 'translateX(-50%)',
+              gap: '8px',
+              pointerEvents: 'auto',
+              zIndex: 50,
+            }}
+            className="group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5"
+          >
+            <button
+              title={t`Duplicate`}
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              onClick={() => duplicatedSelectedFields()}
+              onTouchEnd={() => duplicatedSelectedFields()}
+            >
+              <CopyPlusIcon className="h-3 w-3" />
+            </button>
+
+            <button
+              title={t`Duplicate on all pages`}
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              onClick={() => duplicatedSelectedFieldsOnAllPages()}
+              onTouchEnd={() => duplicatedSelectedFieldsOnAllPages()}
+            >
+              <SquareStackIcon className="h-3 w-3" />
+            </button>
+
+            <button
+              title={t`Remove`}
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              onClick={() => deletedSelectedFields()}
+              onTouchEnd={() => deletedSelectedFields()}
+            >
+              <TrashIcon className="h-3 w-3" />
+            </button>
+          </div>
+        )}
+
+      {/* Todo: Envelopes - This will not overflow the page when close to edges */}
+      {pendingFieldCreation && (
+        <div
+          style={{
+            position: 'absolute',
+            top: pendingFieldCreation.y() + pendingFieldCreation.getClientRect().height + 5 + 'px',
+            left: pendingFieldCreation.x() + pendingFieldCreation.getClientRect().width / 2 + 'px',
+            transform: 'translateX(-50%)',
+            zIndex: 50,
+          }}
+          className="text-muted-foreground grid w-fit grid-cols-5 gap-x-1 gap-y-0.5 rounded-md border bg-white p-1 shadow-sm"
+        >
+          {fieldButtonList.map((field) => (
+            <button
+              key={field.type}
+              onClick={() => createFieldFromPendingTemplate(pendingFieldCreation, field.type)}
+              className="hover:text-foreground col-span-1 w-full flex-shrink-0 rounded-sm px-2 py-1 text-xs hover:bg-gray-100"
+            >
+              {t(field.name)}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
+
+      <canvas
+        className={`${_className}__canvas z-0`}
+        height={viewport.height}
+        ref={canvasElement}
+        width={viewport.width}
+      />
+    </div>
+  );
+}

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -0,0 +1,183 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { DocumentStatus, EnvelopeType } from '@prisma/client';
+import {
+  AlertTriangleIcon,
+  Globe2Icon,
+  LockIcon,
+  RefreshCwIcon,
+  SendIcon,
+  SettingsIcon,
+} from 'lucide-react';
+import { Link } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
+import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
+import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
+import { useCurrentTeam } from '~/providers/team';
+
+import { TemplateDirectLinkBadge } from '../template/template-direct-link-badge';
+import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
+
+export default function EnvelopeEditorHeader() {
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError } =
+    useCurrentEnvelopeEditor();
+
+  // Todo: Envelopes this probably won't work with embed? Maybe hide the back items when no team?
+
+  const rootPath = isDocument ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
+
+  return (
+    <nav className="w-full border-b border-gray-200 bg-white px-6 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <Link to="/">
+            <BrandingLogo className="h-6 w-auto" />
+          </Link>
+          <Separator orientation="vertical" className="h-6" />
+          <div className="flex items-center space-x-2">
+            <EnvelopeItemTitleInput
+              disabled={envelope.status !== DocumentStatus.DRAFT}
+              value={envelope.title}
+              onChange={(title) => {
+                updateEnvelope({
+                  title,
+                });
+              }}
+              placeholder={t`Envelope Title`}
+            />
+
+            {envelope.type === EnvelopeType.TEMPLATE && (
+              <>
+                {envelope.templateType === 'PRIVATE' ? (
+                  <Badge variant="secondary">
+                    <LockIcon className="mr-2 h-4 w-4 text-blue-600 dark:text-blue-300" />
+                    <Trans>Private Template</Trans>
+                  </Badge>
+                ) : (
+                  <Badge variant="default">
+                    <Globe2Icon className="mr-2 h-4 w-4 text-green-500 dark:text-green-300" />
+                    <Trans>Public Template</Trans>
+                  </Badge>
+                )}
+
+                {envelope.directLink?.token && (
+                  <TemplateDirectLinkBadge
+                    className="py-1"
+                    token={envelope.directLink.token}
+                    enabled={envelope.directLink.enabled}
+                  />
+                )}
+              </>
+            )}
+
+            {envelope.type === EnvelopeType.DOCUMENT &&
+              match(envelope.status)
+                .with(DocumentStatus.DRAFT, () => (
+                  <Badge variant="warning">
+                    <Trans>Draft</Trans>
+                  </Badge>
+                ))
+                .with(DocumentStatus.PENDING, () => (
+                  <Badge variant="secondary">
+                    <Trans>Pending</Trans>
+                  </Badge>
+                ))
+                .with(DocumentStatus.COMPLETED, () => (
+                  <Badge variant="default">
+                    <Trans>Completed</Trans>
+                  </Badge>
+                ))
+                .with(DocumentStatus.REJECTED, () => (
+                  <Badge variant="destructive">
+                    <Trans>Rejected</Trans>
+                  </Badge>
+                ))
+                .exhaustive()}
+
+            {autosaveError && (
+              <>
+                <Badge variant="destructive">
+                  <AlertTriangleIcon className="mr-2 h-4 w-4" />
+                  <Trans>Sync failed, changes not saved</Trans>
+                </Badge>
+
+                <button
+                  onClick={() => {
+                    window.location.reload();
+                  }}
+                >
+                  <Badge variant="destructive">
+                    <RefreshCwIcon className="mr-2 h-4 w-4" />
+                    <Trans>Reload</Trans>
+                  </Badge>
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <EnvelopeEditorSettingsDialog
+            trigger={
+              <Button variant="outline" size="sm">
+                <SettingsIcon className="h-4 w-4" />
+              </Button>
+            }
+          />
+
+          {isDocument && (
+            <>
+              <EnvelopeDistributeDialog
+                envelope={envelope}
+                trigger={
+                  <Button size="sm">
+                    <SendIcon className="mr-2 h-4 w-4" />
+                    <Trans>Send Document</Trans>
+                  </Button>
+                }
+              />
+
+              <EnvelopeRedistributeDialog
+                envelope={envelope}
+                trigger={
+                  <Button size="sm">
+                    <SendIcon className="mr-2 h-4 w-4" />
+                    <Trans>Resend Document</Trans>
+                  </Button>
+                }
+              />
+            </>
+          )}
+
+          {isTemplate && (
+            <TemplateUseDialog
+              templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
+              templateSigningOrder={envelope.documentMeta?.signingOrder}
+              recipients={envelope.recipients}
+              documentRootPath={rootPath}
+              trigger={
+                <Button size="sm">
+                  <Trans>Use Template</Trans>
+                </Button>
+              }
+            />
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}

apps/remix/app/components/general/envelope-editor/envelope-editor-page-fields.tsx

@@ -0,0 +1,258 @@
+import { lazy, useEffect, useMemo } from 'react';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { FieldType, RecipientRole } from '@prisma/client';
+import { FileTextIcon } from 'lucide-react';
+import { isDeepEqual } from 'remeda';
+import { match } from 'ts-pattern';
+
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import type {
+  TCheckboxFieldMeta,
+  TDateFieldMeta,
+  TDropdownFieldMeta,
+  TEmailFieldMeta,
+  TFieldMetaSchema,
+  TInitialsFieldMeta,
+  TNameFieldMeta,
+  TNumberFieldMeta,
+  TRadioFieldMeta,
+  TTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import { EditorFieldCheckboxForm } from '~/components/forms/editor/editor-field-checkbox-form';
+import { EditorFieldDateForm } from '~/components/forms/editor/editor-field-date-form';
+import { EditorFieldDropdownForm } from '~/components/forms/editor/editor-field-dropdown-form';
+import { EditorFieldEmailForm } from '~/components/forms/editor/editor-field-email-form';
+import { EditorFieldInitialsForm } from '~/components/forms/editor/editor-field-initials-form';
+import { EditorFieldNameForm } from '~/components/forms/editor/editor-field-name-form';
+import { EditorFieldNumberForm } from '~/components/forms/editor/editor-field-number-form';
+import { EditorFieldRadioForm } from '~/components/forms/editor/editor-field-radio-form';
+import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text-form';
+
+import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
+import { EnvelopeRendererFileSelector } from './envelope-file-selector';
+
+const EnvelopeEditorFieldsPageRenderer = lazy(
+  async () => import('./envelope-editor-fields-page-renderer'),
+);
+
+const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
+  [FieldType.SIGNATURE]: msg`Signature Settings`,
+  [FieldType.FREE_SIGNATURE]: msg`Free Signature Settings`,
+  [FieldType.TEXT]: msg`Text Settings`,
+  [FieldType.DATE]: msg`Date Settings`,
+  [FieldType.EMAIL]: msg`Email Settings`,
+  [FieldType.NAME]: msg`Name Settings`,
+  [FieldType.INITIALS]: msg`Initials Settings`,
+  [FieldType.NUMBER]: msg`Number Settings`,
+  [FieldType.RADIO]: msg`Radio Settings`,
+  [FieldType.CHECKBOX]: msg`Checkbox Settings`,
+  [FieldType.DROPDOWN]: msg`Dropdown Settings`,
+};
+
+export const EnvelopeEditorPageFields = () => {
+  const { envelope, editorFields } = useCurrentEnvelopeEditor();
+
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const { t } = useLingui();
+
+  const selectedField = useMemo(
+    () => structuredClone(editorFields.selectedField),
+    [editorFields.selectedField],
+  );
+
+  const updateSelectedFieldMeta = (fieldMeta: TFieldMetaSchema) => {
+    if (!selectedField) {
+      return;
+    }
+
+    const isMetaSame = isDeepEqual(selectedField.fieldMeta, fieldMeta);
+
+    // Todo: Envelopes - Clean up console logs.
+    if (!isMetaSame) {
+      console.log('TRIGGER UPDATE');
+      editorFields.updateFieldByFormId(selectedField.formId, {
+        fieldMeta,
+      });
+    } else {
+      console.log('DATA IS SAME, NO UPDATE');
+    }
+  };
+
+  /**
+   * Set the selected recipient to the first recipient in the envelope.
+   */
+  useEffect(() => {
+    const firstSelectableRecipient = envelope.recipients.find(
+      (recipient) =>
+        recipient.role === RecipientRole.SIGNER || recipient.role === RecipientRole.APPROVER,
+    );
+
+    editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null);
+  }, []);
+
+  return (
+    <div className="relative flex h-full">
+      <div className="flex w-full flex-col">
+        {/* Horizontal envelope item selector */}
+        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
+
+        {/* Document View */}
+        <div className="mt-4 flex justify-center">
+          {currentEnvelopeItem !== null ? (
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
+          ) : (
+            <div className="flex flex-col items-center justify-center py-32">
+              <FileTextIcon className="text-muted-foreground h-10 w-10" />
+              <p className="text-foreground mt-1 text-sm">
+                <Trans>No documents found</Trans>
+              </p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                <Trans>Please upload a document to continue</Trans>
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right Section - Form Fields Panel */}
+      {currentEnvelopeItem && (
+        <div className="sticky top-0 h-[calc(100vh-73px)] w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
+          {/* Recipient selector section. */}
+          <section className="px-4">
+            <h3 className="mb-2 text-sm font-semibold text-gray-900">
+              <Trans>Selected Recipient</Trans>
+            </h3>
+
+            {envelope.recipients.length === 0 ? (
+              <Alert variant="warning">
+                <AlertDescription>
+                  <Trans>You need at least one recipient to add fields</Trans>
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <RecipientSelector
+                selectedRecipient={editorFields.selectedRecipient}
+                onSelectedRecipientChange={(recipient) =>
+                  editorFields.setSelectedRecipient(recipient.id)
+                }
+                recipients={envelope.recipients}
+                className="w-full"
+                align="end"
+              />
+            )}
+
+            {editorFields.selectedRecipient &&
+              !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
+                <Alert className="mt-4" variant="warning">
+                  <AlertDescription>
+                    <Trans>
+                      This recipient can no longer be modified as they have signed a field, or
+                      completed the document.
+                    </Trans>
+                  </AlertDescription>
+                </Alert>
+              )}
+          </section>
+
+          <Separator className="my-4" />
+
+          {/* Add fields section. */}
+          <section className="px-4">
+            <h3 className="mb-2 text-sm font-semibold text-gray-900">
+              <Trans>Add Fields</Trans>
+            </h3>
+
+            <EnvelopeEditorFieldDragDrop
+              selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
+              selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
+            />
+          </section>
+
+          {/* Field details section. */}
+          <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>
+            {selectedField && selectedField.type !== FieldType.SIGNATURE && (
+              <section>
+                <Separator className="my-4" />
+
+                <div className="[&_label]:text-foreground/70 px-4 [&_label]:text-xs">
+                  <h3 className="text-sm font-semibold">
+                    {t(FieldSettingsTypeTranslations[selectedField.type])}
+                  </h3>
+
+                  {match(selectedField.type)
+                    .with(FieldType.CHECKBOX, () => (
+                      <EditorFieldCheckboxForm
+                        value={selectedField?.fieldMeta as TCheckboxFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.DATE, () => (
+                      <EditorFieldDateForm
+                        value={selectedField?.fieldMeta as TDateFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.DROPDOWN, () => (
+                      <EditorFieldDropdownForm
+                        value={selectedField?.fieldMeta as TDropdownFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.EMAIL, () => (
+                      <EditorFieldEmailForm
+                        value={selectedField?.fieldMeta as TEmailFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.INITIALS, () => (
+                      <EditorFieldInitialsForm
+                        value={selectedField?.fieldMeta as TInitialsFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.NAME, () => (
+                      <EditorFieldNameForm
+                        value={selectedField?.fieldMeta as TNameFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.NUMBER, () => (
+                      <EditorFieldNumberForm
+                        value={selectedField?.fieldMeta as TNumberFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.RADIO, () => (
+                      <EditorFieldRadioForm
+                        value={selectedField?.fieldMeta as TRadioFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .with(FieldType.TEXT, () => (
+                      <EditorFieldTextForm
+                        value={selectedField?.fieldMeta as TTextFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
+                    .otherwise(() => null)}
+                </div>
+              </section>
+            )}
+          </AnimateGenericFadeInOut>
+        </div>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview-renderer.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import Konva from 'konva';
+import type { Layer } from 'konva/lib/Layer';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
+
+import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
+
+export default function EnvelopeEditorPagePreviewRenderer() {
+  const pageContext = usePageContext();
+
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
+
+  const { _className, page, rotate, scale } = pageContext;
+
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
+
+  const { editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
+
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Layer | null>(null);
+
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  const localPageFields = useMemo(
+    () =>
+      editorFields.localFields.filter(
+        (field) =>
+          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+      ),
+    [editorFields.localFields, pageContext.pageNumber],
+  );
+
+  // Custom renderer from Konva examples.
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
+
+      const { current: canvas } = canvasElement;
+      const { current: container } = konvaContainer;
+
+      if (!canvas || !container) {
+        return;
+      }
+
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        createPageCanvas(container);
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, viewport],
+  );
+
+  const renderFieldOnLayer = (field: TLocalField) => {
+    if (!pageLayer.current) {
+      console.error('Layer not loaded yet');
+      return;
+    }
+
+    renderField({
+      pageLayer: pageLayer.current,
+      field: {
+        renderId: field.formId,
+        ...field,
+        customText: '',
+        inserted: false,
+        fieldMeta: field.fieldMeta,
+      },
+      pageWidth: viewport.width,
+      pageHeight: viewport.height,
+      color: getRecipientColorKey(field.recipientId),
+      editable: false,
+      mode: 'export',
+    });
+  };
+
+  /**
+   * Create the initial Konva page canvas and initialize all fields and interactions.
+   */
+  const createPageCanvas = (container: HTMLDivElement) => {
+    stage.current = new Konva.Stage({
+      container,
+      width: viewport.width,
+      height: viewport.height,
+    });
+
+    // Create the main layer for interactive elements.
+    pageLayer.current = new Konva.Layer();
+    stage.current?.add(pageLayer.current);
+
+    // Render the fields.
+    for (const field of localPageFields) {
+      renderFieldOnLayer(field);
+    }
+
+    pageLayer.current.batchDraw();
+  };
+
+  /**
+   * Render fields when they are added or removed from the localFields.
+   */
+  useEffect(() => {
+    if (!pageLayer.current || !stage.current) {
+      return;
+    }
+
+    // If doesn't exist in localFields, destroy it since it's been deleted.
+    pageLayer.current.find('Group').forEach((group) => {
+      if (
+        group.name() === 'field-group' &&
+        !localPageFields.some((field) => field.formId === group.id())
+      ) {
+        console.log('Field removed, removing from canvas');
+        group.destroy();
+      }
+    });
+
+    // If it exists, rerender.
+    localPageFields.forEach((field) => {
+      console.log('Field created/updated, rendering on canvas');
+      renderFieldOnLayer(field);
+    });
+
+    pageLayer.current.batchDraw();
+  }, [localPageFields]);
+
+  if (!currentEnvelopeItem) {
+    return null;
+  }
+
+  return (
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
+
+      <canvas
+        className={`${_className}__canvas z-0`}
+        height={viewport.height}
+        ref={canvasElement}
+        width={viewport.width}
+      />
+    </div>
+  );
+}