feat: add admin organisation creation with user

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

@@ -105,6 +105,12 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
 # OPTIONAL: Displays the maximum document upload limit to the user in MBs
 NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 
+# [[EE ONLY]]
+# OPTIONAL: The AWS SES API KEY to verify email domains with.
+NEXT_PRIVATE_SES_ACCESS_KEY_ID=
+NEXT_PRIVATE_SES_SECRET_ACCESS_KEY=
+NEXT_PRIVATE_SES_REGION=
+
 # [[STRIPE]]
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
@@ -130,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/PULL_REQUEST_TEMPLATE.md

@@ -1,8 +1,3 @@
----
-name: Pull Request
-about: Submit changes to the project for review and inclusion
----
-
 ## Description
 
 <!--- Describe the changes introduced by this pull request. -->

.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

@@ -52,4 +52,11 @@ yarn-error.log*
 !.vscode/extensions.json
 
 # logs
-logs.json
+logs.json
+
+# claude
+.claude
+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/public-api/_meta.json

@@ -1,5 +1,6 @@
 {
   "index": "Get Started",
   "authentication": "Authentication",
+  "rate-limits": "Rate Limits",
   "versioning": "Versioning"
 }

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

@@ -33,7 +33,7 @@ Our new API V2 supports the following typed SDKs:
 
 <Callout type="info">
   For the staging API, please use the following base URL:
-  `https://stg-app.documenso.dev/api/v2-beta/`
+  `https://stg-app.documenso.com/api/v2-beta/`
 </Callout>
 
 🚀 [V2 Announcement](https://documen.so/sdk-blog)

apps/documentation/pages/developers/public-api/rate-limits.mdx

@@ -0,0 +1,54 @@
+import { Callout } from 'nextra/components';
+
+# Rate Limits
+
+Documenso enforces rate limits on all API endpoints to ensure service stability.
+
+## HTTP Rate Limits
+
+**Limit:** 100 requests per minute per IP address  
+**Response:** 429 Too Many Requests
+
+### Rate Limit Response
+
+```json
+{
+  "error": "Too many requests, please try again later."
+}
+```
+
+<Callout type="warning">
+  No rate limit headers are currently provided. When you receive a 429 response, wait at least 60
+  seconds before retrying.
+</Callout>
+
+## Resource Limits
+
+Beyond HTTP rate limits, your account has usage limits based on your subscription plan.
+
+### Plan Limits
+
+| Resource         | Free | Paid      | Self-hosted | Enterprise |
+| ---------------- | ---- | --------- | ----------- | ---------- |
+| Documents/month  | 5    | Unlimited | Unlimited   | Unlimited  |
+| Total Recipients | 10   | Unlimited | Unlimited   | Unlimited  |
+| Direct Templates | 3    | Unlimited | Unlimited   | Unlimited  |
+
+### Error Response
+
+When you exceed a resource limit:
+
+```json
+{
+  "error": "You have reached your document limit for this month. Please upgrade your plan.",
+  "code": "LIMIT_EXCEEDED",
+  "statusCode": 400
+}
+```
+
+## Error Codes
+
+| Code                | Status | Description                   |
+| ------------------- | ------ | ----------------------------- |
+| `TOO_MANY_REQUESTS` | 429    | HTTP rate limit exceeded      |
+| `LIMIT_EXCEEDED`    | 400    | Resource usage limit exceeded |

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/developers/webhooks.mdx

@@ -619,6 +619,18 @@ Example payload for the `document.rejected` event:
 }
 ```
 
+## Webhook Events Testing
+
+You can trigger test webhook events to test the webhook functionality. To trigger a test webhook, navigate to the [Webhooks page](/developers/webhooks) and click on the "Test Webhook" button.
+
+![Documenso's Webhooks Page](/webhook-images/test-webhooks-page.webp)
+
+This opens a dialog where you can select the event type to test.
+
+![Documenso's individual webhook page](/webhook-images/test-webhook-dialog.webp)
+
+Choose the appropriate event and click "Send Test Webhook." You’ll shortly receive a test payload from Documenso with sample data.
+
 ## Availability
 
 Webhooks are available to individual users and teams.

apps/documentation/pages/users/_meta.json

@@ -11,6 +11,7 @@
   "documents": "Documents",
   "templates": "Templates",
   "branding": "Branding",
+  "email-domains": "Email Domains",
   "direct-links": "Direct Signing Links",
   "-- Legal Overview": {
     "type": "separator",

apps/documentation/pages/users/branding.mdx

@@ -17,7 +17,7 @@ Branding preferences can be set on either the organisation or team level.
 
 By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
 
-To access the preferences, navigate to either the organisation or teams settings page and click the **Preferences** tab. This page contains both the preferences for documents and branding, the branding section is located at the bottom of the page.
+To access the preferences, navigate to either the organisation or teams settings page and click the **Branding** tab under the **Preferences** section.
 
 ![A screenshot of the organisation's document preferences page](/organisations/organisation-branding.webp)
 

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/_meta.json

@@ -1,5 +1,7 @@
 {
   "sending-documents": "Sending Documents",
   "document-preferences": "Document Preferences",
-  "document-visibility": "Document Visibility"
+  "document-visibility": "Document Visibility",
+  "fields": "Document Fields",
+  "email-preferences": "Email Preferences"
 }

apps/documentation/pages/users/documents/document-preferences.mdx

@@ -19,12 +19,14 @@ Document preferences can be set on either the organisation or team level.
 
 By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
 
-To access the preferences, navigate to either the organisation or teams settings page and click the **Preferences** tab.
+To access the preferences, navigate to either the organisation or teams settings page and click the **Document** tab under the **Preferences** section.
 
 ![A screenshot of the organisation's document preferences page](/organisations/organisation-document-preferences.webp)
 
 - **Document Visibility** - Set the default visibility of the documents created by team members. Learn more about [document visibility](/users/documents/document-visibility).
 - **Default Document Language** - This setting allows you to set the default language for the documents uploaded in the organisation. The default language is used as the default language in the email communications with the document recipients.
+- **Default Time Zone** - The timezone to use for date fields and signing the document.
+- **Default Date Format** - The date format to use for date fields and signing the document.
 - **Signature Settings** - Controls what signatures are allowed to be used when signing the documents.
 - **Sender Details** - Set whether the sender's name should be included in the emails sent by the team. See more below [sender details](/users/documents/document-preferences#sender-details).
 - **Include the Signing Certificate** - This setting controls whether the signing certificate should be included in the signed documents. If enabled, the signing certificate is included in the signed documents. If disabled, the signing certificate is not included in the signed documents. Regardless of this setting, the signing certificate is always available in the document's audit log page.

apps/documentation/pages/users/documents/email-preferences.mdx

@@ -0,0 +1,26 @@
+---
+title: Email Preferences
+description: Learn how to set the email preferences for your team account.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Email Preferences
+
+Email preferences allow you to set the default settings when emailing documents to your recipients.
+
+## Preferences
+
+Email preferences can be set on either the organisation or team level.
+
+By default, teams inherit the preferences from the organisation. You can override these preferences on the team level at any time.
+
+To access the preferences, navigate to either the organisation or teams settings page and click the **Email** tab under the **Preferences** section.
+
+![A screenshot of the organisation's email preferences page](/organisations/organisation-email-preferences.webp)
+
+- **Default Email** - Use a custom email address when sending documents to your recipients. See [email domains](/users/email-domains) for more information.
+- **Reply To** - The email address that will be used in the "Reply To" field in emails
+- **Email Settings** - Which emails to send to recipients during document signing

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

@@ -0,0 +1,111 @@
+import { Callout, Steps } from 'nextra/components';
+
+# Email Domains
+
+Email Domains allow you to send emails to recipients from your own domain instead of the default Documenso email address.
+
+<Callout type="info">
+  **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:
+
+- An Enterprise subscription
+- Access to your domain's DNS settings
+- Access to your Documenso organisation as an admin or manager
+
+<Steps>
+
+### Access Email Domains Settings
+
+Navigate to your Organisation email domains settings page and click the "Add Email Domain" button.
+
+![Email Domains settings page](/email-domains/email-domains-settings-page.webp)
+
+### Configure DNS Records
+
+After adding your domain, Documenso will provide you with the following required DNS records that need to be configured on your domain:
+
+- **SPF Record**: Specifies which servers are authorized to send emails from your domain
+- **DKIM Record**: Provides email authentication and prevents tampering
+
+![DNS configuration instructions](/email-domains/email-domains-record.webp)
+
+<Callout type="info">
+  If you already have an SPF record configured, you will need to update it to include Amazon SES as
+  an authorized server instead of creating a new record.
+</Callout>
+
+Configure these records in your domain's DNS settings according to their specific instructions.
+
+### Verify Domain Configuration
+
+Once you've added the DNS records, return to the Documenso email domains settings page and click the "Verify" button.
+This will trigger a verification process which will check if the DNS records are properly configured. If successful, the domain will be marked as "Active".
+
+![Domain verification process](/email-domains/email-domain-sync.webp)
+
+<Callout type="info">
+  Please note that it may take up to 48 hours for the DNS records to propagate.
+</Callout>
+
+</Steps>
+
+## Creating Emails
+
+Once your email domain has been configured, you can create multiple email addresses which your members can use when sending documents to recipients.
+
+<Steps>
+
+### Select the Email Domain You Want to Use
+
+Navigate to the email domains settings page and click "Manage" on the domain you want to use.
+
+![Email Domains settings page](/email-domains/email-domains-manage.webp)
+
+### Add a New Email
+
+Click on the "Add Email" button to begin the setup process.
+
+![Create email](/email-domains/email-domains-manage-create-email.webp)
+
+### Use Email
+
+Once you have added an email, you can configure it to be the default email on either the:
+
+- Organisation email preferences page
+- Team email preferences page
+
+When a draft document is created, it will inherit the email configured on the team if set, otherwise it will inherit the email configured in the organisation.
+
+You can also configure the email address directly on the document to override the default email if required.
+
+</Steps>
+
+## Notes
+
+- If you change the default email, it will not retroactively update any existing documents with the old default email.
+- If the email domain becomes invalid, all emails using that domain will fail to send.
+
+## Troubleshooting
+
+### Common Issues
+
+**DNS Verification Fails**
+
+- Double-check all DNS record values
+- Ensure records are added to the correct domain
+- Wait for DNS propagation (up to 48 hours)
+
+**Emails Not Delivering**
+
+- Check domain reputation and blacklist status
+- Verify SPF, DKIM, and DMARC records
+- Review bounce and spam reports
+
+<Callout type="info">
+  For additional support with Email Domains configuration, contact our support team at
+  support@documenso.com.
+</Callout>

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-organisation-with-user-create-dialog.tsx

@@ -0,0 +1,255 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateOrganisationWithUserRequestSchema } from '@documenso/trpc/server/admin-router/create-organisation-with-user.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminOrganisationWithUserCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZFormSchema = ZCreateOrganisationWithUserRequestSchema.shape.data;
+
+type TFormSchema = z.infer<typeof ZFormSchema>;
+
+const CLAIM_OPTIONS = [
+  { value: INTERNAL_CLAIM_ID.FREE, label: 'Free' },
+  { value: INTERNAL_CLAIM_ID.TEAM, label: 'Team' },
+  { value: INTERNAL_CLAIM_ID.ENTERPRISE, label: 'Enterprise' },
+];
+
+export const AdminOrganisationWithUserCreateDialog = ({
+  trigger,
+  ...props
+}: AdminOrganisationWithUserCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const navigate = useNavigate();
+
+  const form = useForm<TFormSchema>({
+    resolver: zodResolver(ZFormSchema),
+    defaultValues: {
+      organisationName: '',
+      userEmail: '',
+      userName: '',
+      subscriptionClaimId: INTERNAL_CLAIM_ID.FREE,
+    },
+  });
+
+  const { mutateAsync: createOrganisationWithUser } =
+    trpc.admin.organisation.createWithUser.useMutation();
+
+  const onFormSubmit = async (data: TFormSchema) => {
+    try {
+      const result = await createOrganisationWithUser({
+        data,
+      });
+
+      await navigate(`/admin/organisations/${result.organisationId}`);
+
+      setOpen(false);
+
+      toast({
+        title: t`Success`,
+        description: result.isNewUser
+          ? t`Organisation created and welcome email sent to new user`
+          : t`Organisation created and existing user added`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: t`An error occurred`,
+        description:
+          error.message ||
+          t`We encountered an error while creating the organisation. Please try again later.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create Organisation + User</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create Organisation + User</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Create an organisation and add a user as the owner. If the email exists, the existing
+              user will be linked to the new organisation.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="organisationName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Organisation Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="userEmail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>User Email</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} type="email" />
+                    </FormControl>
+                    <FormDescription>
+                      <Trans>
+                        If this email exists, the user will be added to the organisation. Otherwise,
+                        a new user will be created.
+                      </Trans>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="userName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>User Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      <Trans>Used only if creating a new user</Trans>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="subscriptionClaimId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Subscription Plan</Trans>
+                    </FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t`Select a plan`} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {CLAIM_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-organisation-with-user-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Create</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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);
@@ -127,6 +129,16 @@ export const DocumentMoveToFolderDialog = ({
         return;
       }
 
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`You are not allowed to move this document.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while moving the document.`),

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/folder-delete-dialog.tsx

@@ -116,8 +116,8 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
           <Alert variant="destructive">
             <AlertDescription>
               <Trans>
-                This folder contains multiple items. Deleting it will also delete all items in the
-                folder, including nested folders and their contents.
+                This folder contains multiple items. Deleting it will remove all subfolders and move
+                all nested documents and templates to the root folder.
               </Trans>
             </AlertDescription>
           </Alert>

apps/remix/app/components/dialogs/folder-update-dialog.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -14,6 +14,7 @@ import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -40,7 +41,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-export type FolderSettingsDialogProps = {
+export type FolderUpdateDialogProps = {
   folder: TFolderWithSubfolders | null;
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
@@ -53,12 +54,8 @@ export const ZUpdateFolderFormSchema = z.object({
 
 export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
 
-export const FolderSettingsDialog = ({
-  folder,
-  isOpen,
-  onOpenChange,
-}: FolderSettingsDialogProps) => {
-  const { _ } = useLingui();
+export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdateDialogProps) => {
+  const { t } = useLingui();
   const team = useOptionalCurrentTeam();
 
   const { toast } = useToast();
@@ -84,7 +81,9 @@ export const FolderSettingsDialog = ({
   }, [folder, form]);
 
   const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
-    if (!folder) return;
+    if (!folder) {
+      return;
+    }
 
     try {
       await updateFolder({
@@ -96,7 +95,7 @@ export const FolderSettingsDialog = ({
       });
 
       toast({
-        title: _(msg`Folder updated successfully`),
+        title: t`Folder updated successfully`,
       });
 
       onOpenChange(false);
@@ -105,7 +104,7 @@ export const FolderSettingsDialog = ({
 
       if (error.code === AppErrorCode.NOT_FOUND) {
         toast({
-          title: _(msg`Folder not found`),
+          title: t`Folder not found`,
         });
       }
     }
@@ -115,8 +114,12 @@ export const FolderSettingsDialog = ({
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Folder Settings</DialogTitle>
-          <DialogDescription>Manage the settings for this folder.</DialogDescription>
+          <DialogTitle>
+            <Trans>Folder Settings</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Manage the settings for this folder.</Trans>
+          </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
@@ -126,7 +129,9 @@ export const FolderSettingsDialog = ({
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>
+                    <Trans>Name</Trans>
+                  </FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -141,19 +146,25 @@ export const FolderSettingsDialog = ({
                 name="visibility"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Visibility</FormLabel>
+                    <FormLabel>
+                      <Trans>Visibility</Trans>
+                    </FormLabel>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select visibility" />
+                          <SelectValue placeholder={t`Select visibility`} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
-                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                          Managers and above
+                        <SelectItem value={DocumentVisibility.EVERYONE}>
+                          <Trans>Everyone</Trans>
+                        </SelectItem>
+                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                          <Trans>Managers and above</Trans>
+                        </SelectItem>
+                        <SelectItem value={DocumentVisibility.ADMIN}>
+                          <Trans>Admins only</Trans>
                         </SelectItem>
-                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -163,7 +174,15 @@ export const FolderSettingsDialog = ({
             )}
 
             <DialogFooter>
-              <Button type="submit">Save Changes</Button>
+              <DialogClose asChild>
+                <Button variant="secondary">
+                  <Trans>Cancel</Trans>
+                </Button>
+              </DialogClose>
+
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                <Trans>Update</Trans>
+              </Button>
             </DialogFooter>
           </form>
         </Form>

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

@@ -19,6 +19,7 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { parseMessageDescriptorMacro } from '@documenso/lib/utils/i18n';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation.types';
 import { cn } from '@documenso/ui/lib/utils';
@@ -46,6 +47,8 @@ import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { IndividualPersonalLayoutCheckoutButton } from '../general/billing-plans';
+
 export type OrganisationCreateDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -59,10 +62,11 @@ export type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFo
 export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
-  const { refreshSession } = useSession();
+  const { refreshSession, organisations } = useSession();
 
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   const actionSearchParam = searchParams?.get('action');
 
@@ -83,7 +87,7 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
 
   const { mutateAsync: createOrganisation } = trpc.organisation.create.useMutation();
 
-  const { data: plansData } = trpc.billing.plans.get.useQuery(undefined, {
+  const { data: plansData } = trpc.enterprise.billing.plans.get.useQuery(undefined, {
     enabled: IS_BILLING_ENABLED(),
   });
 
@@ -133,6 +137,13 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
     form.reset();
   }, [open, form]);
 
+  const isIndividualPlan = (priceId: string) => {
+    return (
+      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.monthlyPrice?.id === priceId ||
+      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.yearlyPrice?.id === priceId
+    );
+  };
+
   return (
     <Dialog
       {...props}
@@ -177,9 +188,15 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
                     <Trans>Cancel</Trans>
                   </Button>
 
-                  <Button type="submit" onClick={() => setStep('create')}>
-                    <Trans>Continue</Trans>
-                  </Button>
+                  {isIndividualPlan(selectedPriceId) && isPersonalLayoutMode ? (
+                    <IndividualPersonalLayoutCheckoutButton priceId={selectedPriceId}>
+                      <Trans>Checkout</Trans>
+                    </IndividualPersonalLayoutCheckoutButton>
+                  ) : (
+                    <Button type="submit" onClick={() => setStep('create')}>
+                      <Trans>Continue</Trans>
+                    </Button>
+                  )}
                 </DialogFooter>
               </fieldset>
             </>
@@ -306,7 +323,11 @@ const BillingPlanForm = ({
   }, [value]);
 
   const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
-    const plan = dynamicPlans.find((plan) => plan[billingPeriod]?.id === value);
+    const plan = dynamicPlans.find(
+      (plan) =>
+        // Purposely using the opposite billing period to get the correct plan.
+        plan[billingPeriod === 'monthlyPrice' ? 'yearlyPrice' : 'monthlyPrice']?.id === value,
+    );
 
     setBillingPeriod(billingPeriod);
 

apps/remix/app/components/dialogs/organisation-email-create-dialog.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateOrganisationEmailRequestSchema } from '@documenso/trpc/server/enterprise-router/create-organisation-email.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type EmailDomain = {
+  id: string;
+  domain: string;
+  status: string;
+};
+
+export type OrganisationEmailCreateDialogProps = {
+  trigger?: React.ReactNode;
+  emailDomain: EmailDomain;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateOrganisationEmailFormSchema = ZCreateOrganisationEmailRequestSchema.pick({
+  emailName: true,
+  email: true,
+  // replyTo: true,
+});
+
+type TCreateOrganisationEmailFormSchema = z.infer<typeof ZCreateOrganisationEmailFormSchema>;
+
+export const OrganisationEmailCreateDialog = ({
+  trigger,
+  emailDomain,
+  ...props
+}: OrganisationEmailCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateOrganisationEmailFormSchema),
+    defaultValues: {
+      emailName: '',
+      email: '',
+      // replyTo: '',
+    },
+  });
+
+  const { mutateAsync: createOrganisationEmail, isPending } =
+    trpc.enterprise.organisation.email.create.useMutation();
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  const onFormSubmit = async (data: TCreateOrganisationEmailFormSchema) => {
+    try {
+      await createOrganisationEmail({
+        emailDomainId: emailDomain.id,
+        ...data,
+      });
+
+      toast({
+        title: t`Email Created`,
+        description: t`The organisation email has been created successfully.`,
+      });
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        toast({
+          title: t`Email already exists`,
+          description: t`An email with this address already exists.`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t`An error occurred`,
+          description: t`We encountered an error while creating the email. Please try again later.`,
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Add Email</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center" className="max-h-[90vh] overflow-y-auto sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Add Organisation Email</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>
+              Create a new email address for your organisation using the domain{' '}
+              <span className="font-bold">{emailDomain.domain}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col space-y-4" disabled={isPending}>
+              <FormField
+                control={form.control}
+                name="emailName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Display Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="Support" />
+                    </FormControl>
+                    <FormMessage />
+                    <FormDescription>
+                      <Trans>The display name for this email address</Trans>
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Email Address</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <div className="relative flex items-center gap-2">
+                        <Input
+                          {...field}
+                          value={field.value.split('@')[0]}
+                          onChange={(e) => {
+                            field.onChange(e.target.value + '@' + emailDomain.domain);
+                          }}
+                          placeholder="support"
+                        />
+                        <div className="bg-muted text-muted-foreground absolute bottom-0 right-0 top-0 flex items-center rounded-r-md border px-3 py-2 text-sm">
+                          @{emailDomain.domain}
+                        </div>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                    {!form.formState.errors.email && (
+                      <span className="text-foreground/50 text-xs font-normal">
+                        {field.value ? (
+                          field.value
+                        ) : (
+                          <Trans>
+                            The part before the @ symbol (e.g., "support" for support@
+                            {emailDomain.domain})
+                          </Trans>
+                        )}
+                      </span>
+                    )}
+                  </FormItem>
+                )}
+              />
+
+              {/* <FormField
+                control={form.control}
+                name="replyTo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Reply-To Email</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="noreply@example.com" />
+                    </FormControl>
+                    <FormMessage />
+                    <FormDescription>
+                      <Trans>
+                        Optional no-reply email address attached to emails. Leave blank to default
+                        to the organisation settings reply-to email.
+                      </Trans>
+                    </FormDescription>
+                  </FormItem>
+                )}
+              /> */}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-organisation-email-button"
+                  loading={isPending}
+                >
+                  <Trans>Create Email</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/organisation-email-delete-dialog.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+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 OrganisationEmailDeleteDialogProps = {
+  emailId: string;
+  email: string;
+  trigger?: React.ReactNode;
+};
+
+export const OrganisationEmailDeleteDialog = ({
+  trigger,
+  emailId,
+  email,
+}: OrganisationEmailDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const { mutateAsync: deleteEmail, isPending: isDeleting } =
+    trpc.enterprise.organisation.email.delete.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`You have successfully removed this email from the organisation.`,
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: t`An unknown error occurred`,
+          description: t`We encountered an unknown error while attempting to remove this email. Please try again later.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete email</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove the following email from{' '}
+              <span className="font-semibold">{organisation.name}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral">
+          <AlertDescription className="text-center font-semibold">{email}</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 () =>
+                deleteEmail({
+                  emailId,
+                })
+              }
+            >
+              <Trans>Delete</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/organisation-email-domain-create-dialog.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateOrganisationEmailDomainRequestSchema } from '@documenso/trpc/server/enterprise-router/create-organisation-email-domain.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { OrganisationEmailDomainRecordContent } from './organisation-email-domain-records-dialog';
+
+export type OrganisationEmailCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateOrganisationEmailDomainFormSchema = ZCreateOrganisationEmailDomainRequestSchema.pick({
+  domain: true,
+});
+
+type TCreateOrganisationEmailDomainFormSchema = z.infer<
+  typeof ZCreateOrganisationEmailDomainFormSchema
+>;
+
+type DomainRecord = {
+  name: string;
+  value: string;
+  type: string;
+};
+
+export const OrganisationEmailDomainCreateDialog = ({
+  trigger,
+  ...props
+}: OrganisationEmailCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const organisation = useCurrentOrganisation();
+
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState<'domain' | 'verification'>('domain');
+  const [recordsToAdd, setRecordsToAdd] = useState<DomainRecord[]>([]);
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateOrganisationEmailDomainFormSchema),
+    defaultValues: {
+      domain: '',
+    },
+  });
+
+  const { mutateAsync: createOrganisationEmail } =
+    trpc.enterprise.organisation.emailDomain.create.useMutation();
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setStep('domain');
+    }
+  }, [open, form]);
+
+  const onFormSubmit = async ({ domain }: TCreateOrganisationEmailDomainFormSchema) => {
+    try {
+      const { records } = await createOrganisationEmail({
+        domain,
+        organisationId: organisation.id,
+      });
+
+      setRecordsToAdd(records);
+      setStep('verification');
+
+      toast({
+        title: t`Domain Added`,
+        description: t`DKIM records generated. Please add the DNS records to verify your domain.`,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+      console.error(error);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        toast({
+          title: t`Domain already in use`,
+          description: t`Please try a different domain.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      } else {
+        toast({
+          title: t`An unknown error occurred`,
+          description: t`We encountered an unknown error while attempting to add your domain. Please try again later.`,
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Add Email Domain</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      {step === 'domain' ? (
+        <DialogContent position="center" className="max-h-[90vh] overflow-y-auto sm:max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Add Custom Email Domain</Trans>
+            </DialogTitle>
+            <DialogDescription>
+              <Trans>
+                Add a custom domain to send emails on behalf of your organisation. We'll generate
+                DKIM records that you need to add to your DNS provider.
+              </Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="domain"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Domain Name</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="example.com" className="bg-background" />
+                      </FormControl>
+                      <FormMessage />
+                      <FormDescription>
+                        <Trans>
+                          Enter the domain you want to use for sending emails (without http:// or
+                          www)
+                        </Trans>
+                      </FormDescription>
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    data-testid="dialog-create-organisation-email-button"
+                    loading={form.formState.isSubmitting}
+                  >
+                    <Trans>Generate DKIM Records</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      ) : (
+        <OrganisationEmailDomainRecordContent records={recordsToAdd} />
+      )}
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/organisation-email-domain-delete-dialog.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationEmailDomainDeleteDialogProps = {
+  emailDomainId: string;
+  emailDomain: string;
+  trigger?: React.ReactNode;
+};
+
+export const OrganisationEmailDomainDeleteDialog = ({
+  trigger,
+  emailDomainId,
+  emailDomain,
+}: OrganisationEmailDomainDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const deleteMessage = t`delete ${emailDomain}`;
+
+  const ZDeleteEmailDomainFormSchema = z.object({
+    confirmText: z.literal(deleteMessage, {
+      errorMap: () => ({ message: t`You must type '${deleteMessage}' to confirm` }),
+    }),
+  });
+
+  const form = useForm<z.infer<typeof ZDeleteEmailDomainFormSchema>>({
+    resolver: zodResolver(ZDeleteEmailDomainFormSchema),
+    defaultValues: {
+      confirmText: '',
+    },
+  });
+
+  const { mutateAsync: deleteEmailDomain, isPending: isDeleting } =
+    trpc.enterprise.organisation.emailDomain.delete.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`You have successfully removed this email domain from the organisation.`,
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: t`An unknown error occurred`,
+          description: t`We encountered an unknown error while attempting to remove this email domain. Please try again later.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  const onFormSubmit = async () => {
+    await deleteEmailDomain({
+      emailDomainId,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete email domain</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove the email domain{' '}
+              <span className="font-semibold">{emailDomain}</span> from{' '}
+              <span className="font-semibold">{organisation.name}</span>. All emails associated with
+              this domain will be deleted.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="confirmText"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>
+                        Confirm by typing{' '}
+                        <span className="font-sm text-destructive font-semibold">
+                          {deleteMessage}
+                        </span>
+                      </Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input placeholder={deleteMessage} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+                <Button
+                  variant="destructive"
+                  type="submit"
+                  disabled={!form.formState.isValid}
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Delete</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx

@@ -0,0 +1,139 @@
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationEmailDomainRecordsDialogProps = {
+  trigger: React.ReactNode;
+  records: DomainRecord[];
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+type DomainRecord = {
+  name: string;
+  value: string;
+  type: string;
+};
+
+export const OrganisationEmailDomainRecordsDialog = ({
+  trigger,
+  records,
+  ...props
+}: OrganisationEmailDomainRecordsDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger}
+      </DialogTrigger>
+
+      <OrganisationEmailDomainRecordContent records={records} />
+    </Dialog>
+  );
+};
+
+export const OrganisationEmailDomainRecordContent = ({ records }: { records: DomainRecord[] }) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  return (
+    <DialogContent position="center" className="max-h-[90vh] overflow-y-auto sm:max-w-xl">
+      <DialogHeader>
+        <DialogTitle>
+          <Trans>Verify Domain</Trans>
+        </DialogTitle>
+        <DialogDescription>
+          <Trans>Add these DNS records to verify your domain ownership</Trans>
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="space-y-6">
+        <div className="space-y-4">
+          {records.map((record) => (
+            <div className="space-y-4 rounded-md border p-4" key={record.name}>
+              <div className="space-y-2">
+                <Label>
+                  <Trans>Record Type</Trans>
+                </Label>
+
+                <div className="relative">
+                  <Input className="pr-12" disabled value={record.type} />
+                  <div className="absolute bottom-0 right-2 top-0 flex items-center justify-center">
+                    <CopyTextButton
+                      value={record.type}
+                      onCopySuccess={() => toast({ title: t`Copied to clipboard` })}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>
+                  <Trans>Record Name</Trans>
+                </Label>
+
+                <div className="relative">
+                  <Input className="pr-12" disabled value={record.name} />
+                  <div className="absolute bottom-0 right-2 top-0 flex items-center justify-center">
+                    <CopyTextButton
+                      value={record.name}
+                      onCopySuccess={() => toast({ title: t`Copied to clipboard` })}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>
+                  <Trans>Record Value</Trans>
+                </Label>
+
+                <div className="relative">
+                  <Input className="pr-12" disabled value={record.value} />
+                  <div className="absolute bottom-0 right-2 top-0 flex items-center justify-center">
+                    <CopyTextButton
+                      value={record.value}
+                      onCopySuccess={() => toast({ title: t`Copied to clipboard` })}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Alert variant="neutral">
+          <AlertDescription>
+            <Trans>
+              Once you update your DNS records, it may take up to 48 hours for it to be propogated.
+              Once the DNS propagation is complete you will need to come back and press the "Sync"
+              domains button
+            </Trans>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">
+              <Trans>Close</Trans>
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </div>
+    </DialogContent>
+  );
+};

apps/remix/app/components/dialogs/organisation-email-update-dialog.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import type { TGetOrganisationEmailDomainResponse } from '@documenso/trpc/server/enterprise-router/get-organisation-email-domain.types';
+import { ZUpdateOrganisationEmailRequestSchema } from '@documenso/trpc/server/enterprise-router/update-organisation-email.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationEmailUpdateDialogProps = {
+  trigger: React.ReactNode;
+  organisationEmail: TGetOrganisationEmailDomainResponse['emails'][number];
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateOrganisationEmailFormSchema = ZUpdateOrganisationEmailRequestSchema.pick({
+  emailName: true,
+  // replyTo: true,
+});
+
+type ZUpdateOrganisationEmailSchema = z.infer<typeof ZUpdateOrganisationEmailFormSchema>;
+
+export const OrganisationEmailUpdateDialog = ({
+  trigger,
+  organisationEmail,
+  ...props
+}: OrganisationEmailUpdateDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm<ZUpdateOrganisationEmailSchema>({
+    resolver: zodResolver(ZUpdateOrganisationEmailFormSchema),
+    defaultValues: {
+      emailName: organisationEmail.emailName,
+      // replyTo: organisationEmail.replyTo ?? undefined,
+    },
+  });
+
+  const { mutateAsync: updateOrganisationEmail, isPending } =
+    trpc.enterprise.organisation.email.update.useMutation();
+
+  const onFormSubmit = async ({ emailName }: ZUpdateOrganisationEmailSchema) => {
+    try {
+      await updateOrganisationEmail({
+        emailId: organisationEmail.id,
+        emailName,
+        // replyTo,
+      });
+
+      toast({
+        title: t`Success`,
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: t`An unknown error occurred`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset({
+      emailName: organisationEmail.emailName,
+      // replyTo: organisationEmail.replyTo ?? undefined,
+    });
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update email</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              You are currently updating{' '}
+              <span className="font-bold">{organisationEmail.email}</span>
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col space-y-4" disabled={isPending}>
+              <FormField
+                control={form.control}
+                name="emailName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Display Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="Support" />
+                    </FormControl>
+                    <FormMessage />
+                    <FormDescription>
+                      <Trans>The display name for this email address</Trans>
+                    </FormDescription>
+                  </FormItem>
+                )}
+              />
+
+              {/* <FormField
+                control={form.control}
+                name="replyTo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Reply-To Email</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="noreply@example.com" />
+                    </FormControl>
+                    <FormMessage />
+                    <FormDescription>
+                      <Trans>
+                        Optional no-reply email address attached to emails. Leave blank to default
+                        to the organisation settings reply-to email.
+                      </Trans>
+                    </FormDescription>
+                  </FormItem>
+                )}
+              /> */}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={isPending}>
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -13,7 +13,7 @@ import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { IS_BILLING_ENABLED, SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
@@ -303,8 +303,8 @@ export const OrganisationMemberInviteDialog = ({
               <AlertDescription>
                 <Trans>
                   Your plan does not support inviting members. Please upgrade or your plan or
-                  contact sales at <a href="mailto:support@documenso.com">support@documenso.com</a>{' '}
-                  if you would like to discuss your options.
+                  contact sales at <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> if you
+                  would like to discuss your options.
                 </Trans>
               </AlertDescription>
             </Alert>

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-create-dialog.tsx

@@ -12,7 +12,11 @@ import type { z } from 'zod';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import {
+  IS_BILLING_ENABLED,
+  NEXT_PUBLIC_WEBAPP_URL,
+  SUPPORT_EMAIL,
+} from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
@@ -193,8 +197,8 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
               <AlertDescription className="mt-0">
                 <Trans>
                   You have reached the maximum number of teams for your plan. Please contact sales
-                  at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would
-                  like to adjust your plan.
+                  at <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> if you would like to
+                  adjust your plan.
                 </Trans>
               </AlertDescription>
             </Alert>

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/dialogs/webhook-test-dialog.tsx

@@ -0,0 +1,170 @@
+import { 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 type { Webhook } from '@prisma/client';
+import { WebhookTriggerEvents } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type WebhookTestDialogProps = {
+  webhook: Pick<Webhook, 'id' | 'webhookUrl' | 'eventTriggers'>;
+  children: React.ReactNode;
+};
+
+const ZTestWebhookFormSchema = z.object({
+  event: z.nativeEnum(WebhookTriggerEvents),
+});
+
+type TTestWebhookFormSchema = z.infer<typeof ZTestWebhookFormSchema>;
+
+export const WebhookTestDialog = ({ webhook, children }: WebhookTestDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: testWebhook } = trpc.webhook.testWebhook.useMutation();
+
+  const form = useForm<TTestWebhookFormSchema>({
+    resolver: zodResolver(ZTestWebhookFormSchema),
+    defaultValues: {
+      event: webhook.eventTriggers[0],
+    },
+  });
+
+  const onSubmit = async ({ event }: TTestWebhookFormSchema) => {
+    try {
+      await testWebhook({
+        id: webhook.id,
+        event,
+        teamId: team.id,
+      });
+
+      toast({
+        title: _(msg`Test webhook sent`),
+        description: _(msg`The test webhook has been successfully sent to your endpoint.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (error) {
+      toast({
+        title: _(msg`Test webhook failed`),
+        description: _(
+          msg`We encountered an error while sending the test webhook. Please check your endpoint and try again.`,
+        ),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Test Webhook</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Send a test webhook with sample data to verify your integration is working correctly.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="event"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Event Type</Trans>
+                    </FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select an event type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {webhook.eventTriggers.map((event) => (
+                          <SelectItem key={event} value={event}>
+                            {toFriendlyWebhookEventName(event)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="rounded-md border p-4">
+                <h4 className="mb-2 text-sm font-medium">
+                  <Trans>Webhook URL</Trans>
+                </h4>
+                <p className="text-muted-foreground break-all text-sm">{webhook.webhookUrl}</p>
+              </div>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Send Test Webhook</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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';
 
@@ -32,7 +32,14 @@ import { DocumentSigningTextField } from '~/components/general/document-signing/
 
 export type EmbedDocumentFieldsProps = {
   fields: Field[];
-  metadata?: DocumentMeta | TemplateMeta | null;
+  metadata?: Pick<
+    DocumentMeta,
+    | 'timezone'
+    | 'dateFormat'
+    | 'typedSignatureEnabled'
+    | 'uploadSignatureEnabled'
+    | 'drawSignatureEnabled'
+  > | null;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
@@ -43,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,22 +3,30 @@ 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';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
+import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import {
+  type TDocumentMetaDateFormat,
+  ZDocumentMetaTimezoneSchema,
+} 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';
+import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
   FormControl,
@@ -44,8 +52,11 @@ import {
 export type TDocumentPreferencesFormSchema = {
   documentVisibility: DocumentVisibility | null;
   documentLanguage: (typeof SUPPORTED_LANGUAGE_CODES)[number] | null;
+  documentTimezone: string | null;
+  documentDateFormat: TDocumentMetaDateFormat | null;
   includeSenderDetails: boolean | null;
   includeSigningCertificate: boolean | null;
+  includeAuditLog: boolean | null;
   signatureTypes: DocumentSignatureType[];
 };
 
@@ -53,8 +64,11 @@ type SettingsSubset = Pick<
   TeamGlobalSettings,
   | 'documentVisibility'
   | 'documentLanguage'
+  | 'documentTimezone'
+  | 'documentDateFormat'
   | 'includeSenderDetails'
   | 'includeSigningCertificate'
+  | 'includeAuditLog'
   | 'typedSignatureEnabled'
   | 'uploadSignatureEnabled'
   | 'drawSignatureEnabled'
@@ -73,16 +87,21 @@ 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';
 
   const ZDocumentPreferencesFormSchema = z.object({
     documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
+    documentTimezone: z.string().nullable(),
+    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,
     }),
@@ -94,8 +113,12 @@ export const DocumentPreferencesForm = ({
       documentLanguage: isValidLanguageCode(settings.documentLanguage)
         ? settings.documentLanguage
         : null,
+      documentTimezone: settings.documentTimezone,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
       includeSenderDetails: settings.includeSenderDetails,
       includeSigningCertificate: settings.includeSigningCertificate,
+      includeAuditLog: settings.includeAuditLog,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
@@ -124,7 +147,10 @@ export const DocumentPreferencesForm = ({
                       value={field.value === null ? '-1' : field.value}
                       onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
                     >
-                      <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectTrigger
+                        className="bg-background text-muted-foreground"
+                        data-testid="document-visibility-trigger"
+                      >
                         <SelectValue />
                       </SelectTrigger>
 
@@ -171,7 +197,10 @@ export const DocumentPreferencesForm = ({
                     value={field.value === null ? '-1' : field.value}
                     onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
                   >
-                    <SelectTrigger className="bg-background text-muted-foreground">
+                    <SelectTrigger
+                      className="bg-background text-muted-foreground"
+                      data-testid="document-language-trigger"
+                    >
                       <SelectValue />
                     </SelectTrigger>
 
@@ -199,6 +228,72 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="documentDateFormat"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Default Date Format</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    value={field.value === null ? '-1' : field.value}
+                    onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                  >
+                    <SelectTrigger data-testid="document-date-format-trigger">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      {DATE_FORMATS.map((format) => (
+                        <SelectItem key={format.key} value={format.value}>
+                          {format.label}
+                        </SelectItem>
+                      ))}
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="documentTimezone"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Default Time Zone</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Combobox
+                    triggerPlaceholder={
+                      canInherit ? t`Inherit from organisation` : t`Local timezone`
+                    }
+                    placeholder={t`Select a time zone`}
+                    options={TIME_ZONES}
+                    value={field.value}
+                    onChange={(value) => field.onChange(value)}
+                    testId="document-timezone-trigger"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="signatureTypes"
@@ -222,7 +317,7 @@ export const DocumentPreferencesForm = ({
                     emptySelectionPlaceholder={
                       canInherit ? t`Inherit from organisation` : t`Select signature types`
                     }
-                    testId="signature-types-combobox"
+                    testId="signature-types-trigger"
                   />
                 </FormControl>
 
@@ -239,7 +334,7 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
-          {!isPersonalLayoutMode && (
+          {!isPersonalLayoutMode && !isPersonalOrganisation && (
             <FormField
               control={form.control}
               name="includeSenderDetails"
@@ -257,7 +352,10 @@ export const DocumentPreferencesForm = ({
                         field.onChange(value === 'true' ? true : value === 'false' ? false : null)
                       }
                     >
-                      <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectTrigger
+                        className="bg-background text-muted-foreground"
+                        data-testid="include-sender-details-trigger"
+                      >
                         <SelectValue />
                       </SelectTrigger>
 
@@ -325,7 +423,10 @@ export const DocumentPreferencesForm = ({
                       field.onChange(value === 'true' ? true : value === 'false' ? false : null)
                     }
                   >
-                    <SelectTrigger className="bg-background text-muted-foreground">
+                    <SelectTrigger
+                      className="bg-background text-muted-foreground"
+                      data-testid="include-signing-certificate-trigger"
+                    >
                       <SelectValue />
                     </SelectTrigger>
 
@@ -358,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,190 @@
+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(),
+  })
+  .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',
+  },
+  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,
+    },
+  });
+
+  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,
+      });
+    }
+  }, [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/email-preferences-form.tsx

@@ -0,0 +1,238 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { FROM_ADDRESS } from '@documenso/lib/constants/email';
+import {
+  DEFAULT_DOCUMENT_EMAIL_SETTINGS,
+  ZDocumentEmailSettingsSchema,
+} from '@documenso/lib/types/document-email';
+import { trpc } from '@documenso/trpc/react';
+import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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';
+
+const ZEmailPreferencesFormSchema = z.object({
+  emailId: z.string().nullable(),
+  emailReplyTo: z.string().email().nullable(),
+  // emailReplyToName: z.string(),
+  emailDocumentSettings: ZDocumentEmailSettingsSchema.nullable(),
+});
+
+export type TEmailPreferencesFormSchema = z.infer<typeof ZEmailPreferencesFormSchema>;
+
+type SettingsSubset = Pick<
+  TeamGlobalSettings,
+  'emailId' | 'emailReplyTo' | 'emailDocumentSettings'
+>;
+
+export type EmailPreferencesFormProps = {
+  settings: SettingsSubset;
+  canInherit: boolean;
+  onFormSubmit: (data: TEmailPreferencesFormSchema) => Promise<void>;
+};
+
+export const EmailPreferencesForm = ({
+  settings,
+  onFormSubmit,
+  canInherit,
+}: EmailPreferencesFormProps) => {
+  const organisation = useCurrentOrganisation();
+
+  const form = useForm<TEmailPreferencesFormSchema>({
+    defaultValues: {
+      emailId: settings.emailId,
+      emailReplyTo: settings.emailReplyTo,
+      // emailReplyToName: settings.emailReplyToName,
+      emailDocumentSettings: settings.emailDocumentSettings,
+    },
+    resolver: zodResolver(ZEmailPreferencesFormSchema),
+  });
+
+  const { data: emailData, isLoading: isLoadingEmails } =
+    trpc.enterprise.organisation.email.find.useQuery({
+      organisationId: organisation.id,
+      perPage: 100,
+    });
+
+  const emails = emailData?.data || [];
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset
+          className="flex h-full max-w-2xl flex-col gap-y-6"
+          disabled={form.formState.isSubmitting}
+        >
+          {organisation.organisationClaim.flags.emailDomains && (
+            <FormField
+              control={form.control}
+              name="emailId"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>
+                    <Trans>Default Email</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Select
+                      {...field}
+                      value={field.value === null ? '-1' : field.value}
+                      onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                    >
+                      <SelectTrigger loading={isLoadingEmails}>
+                        <SelectValue />
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        {emails.map((email) => (
+                          <SelectItem key={email.id} value={email.id}>
+                            {email.email}
+                          </SelectItem>
+                        ))}
+
+                        <SelectItem value={'-1'}>
+                          {canInherit ? <Trans>Inherit from organisation</Trans> : FROM_ADDRESS}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>The default email to use when sending emails to recipients</Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          )}
+
+          <FormField
+            control={form.control}
+            name="emailReplyTo"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Reply to email</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    value={field.value ?? ''}
+                    onChange={(value) => field.onChange(value.target.value || null)}
+                    placeholder="noreply@example.com"
+                    type="email"
+                  />
+                </FormControl>
+                <FormMessage />
+                <FormDescription>
+                  <Trans>
+                    The email address which will show up in the "Reply To" field in emails
+                  </Trans>
+
+                  {canInherit && (
+                    <span>
+                      {'. '}
+                      <Trans>Leave blank to inherit from the organisation.</Trans>
+                    </span>
+                  )}
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          {/* <FormField
+            control={form.control}
+            name="emailReplyToName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Reply to name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input {...field} value={field.value ?? ''} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+
+          <FormField
+            control={form.control}
+            name="emailDocumentSettings"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Email Settings</Trans>
+                </FormLabel>
+                {canInherit && (
+                  <Select
+                    value={field.value === null ? 'INHERIT' : 'CONTROLLED'}
+                    onValueChange={(value) =>
+                      field.onChange(
+                        value === 'CONTROLLED' ? DEFAULT_DOCUMENT_EMAIL_SETTINGS : null,
+                      )
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value={'INHERIT'}>
+                        <Trans>Inherit from organisation</Trans>
+                      </SelectItem>
+
+                      <SelectItem value={'CONTROLLED'}>
+                        <Trans>Override organisation settings</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+
+                {field.value && (
+                  <div className="space-y-2 rounded-md border p-4">
+                    <DocumentEmailCheckboxes
+                      value={field.value ?? DEFAULT_DOCUMENT_EMAIL_SETTINGS}
+                      onChange={(value) => field.onChange(value)}
+                    />
+                  </div>
+                )}
+
+                <FormDescription>
+                  <Trans>
+                    Controls the default email settings when new documents or templates are created
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Update</Trans>
+            </Button>
+          </div>
+        </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: {