v1.13.2

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.

.cursorrules

@@ -1,4 +1,7 @@
+You are an expert in TypeScript, Node.js, Remix, React, Shadcn UI and Tailwind.
+
 Code Style and Structure:
+
 - Write concise, technical TypeScript code with accurate examples
 - Use functional and declarative programming patterns; avoid classes
 - Prefer iteration and modularization over code duplication
@@ -6,20 +9,25 @@ Code Style and Structure:
 - Structure files: exported component, subcomponents, helpers, static content, types
 
 Naming Conventions:
+
 - Use lowercase with dashes for directories (e.g., components/auth-wizard)
 - Favor named exports for components
 
 TypeScript Usage:
-- Use TypeScript for all code; prefer interfaces over types
-- Avoid enums; use maps instead
+
+- Use TypeScript for all code; prefer types over interfaces
 - Use functional components with TypeScript interfaces
 
 Syntax and Formatting:
-- Use the "function" keyword for pure functions
+
+- Create functions using `const fn = () => {}`
 - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
 - Use declarative JSX
+- Never use 'use client'
+- Never use 1 line if statements
 
 Error Handling and Validation:
+
 - Prioritize error handling: handle errors and edge cases early
 - Use early returns and guard clauses
 - Implement proper error logging and user-friendly messages
@@ -28,21 +36,40 @@ Error Handling and Validation:
 - Use error boundaries for unexpected errors
 
 UI and Styling:
+
 - Use Shadcn UI, Radix, and Tailwind Aria for components and styling
 - Implement responsive design with Tailwind CSS; use a mobile-first approach
+- When using Lucide icons, prefer the longhand names, for example HomeIcon instead of Home
 
-Performance Optimization:
-- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
-- Wrap client components in Suspense with fallback
-- Use dynamic loading for non-critical components
-- Optimize images: use WebP format, include size data, implement lazy loading
+React forms
 
-Key Conventions:
-- Use 'nuqs' for URL search parameter state management
-- Optimize Web Vitals (LCP, CLS, FID)
-- Limit 'use client':
-  - Favor server components and Next.js SSR
-  - Use only for Web API access in small components
-  - Avoid for data fetching or state management
+- Use zod for form validation react-hook-form for forms
+- Look at TeamCreateDialog.tsx as an example of form usage
+- Use <Form> <FormItem> elements, and also wrap the contents of form in a fieldset which should have the :disabled attribute when the form is loading
 
-Follow Next.js docs for Data Fetching, Rendering, and Routing
+TRPC Specifics
+
+- Every route should be in it's own file, example routers/teams/create-team.ts
+- Every route should have a types file associated with it, example routers/teams/create-team.types.ts. These files should have the OpenAPI meta, and request/response zod schemas
+- The request/response schemas should be named like Z[RouteName]RequestSchema and Z[RouteName]ResponseSchema
+- Use create-team.ts and create-team.types.ts as an example when creating new routes.
+- When creating the OpenAPI meta, only use GET and POST requests, do not use any other REST methods
+- Deconstruct the input argument on it's one line of code.
+
+Toast usage
+
+- Use the t`string` macro from @lingui/react/macro to display toast messages
+
+Remix/ReactRouter Usage
+
+- Use (params: Route.Params) to get the params from the route
+- Use (loaderData: Route.LoaderData) to get the loader data from the route
+- When using loaderdata, deconstruct the data you need from the loader data inside the function body
+- Do not use json() to return data, directly return the data
+
+Translations
+
+- Use <Trans>string</Trans> to display translations in jsx code, this should be imported from @lingui/react/macro
+- Use the t`string` macro from @lingui/react/macro to display translations in typescript code
+- t should be imported as const { t } = useLingui() where useLingui is imported from @lingui/react/macro
+- String in constants should be using the t`string` macro

.env.example

@@ -13,6 +13,10 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 # https://docs.documenso.com/developers/self-hosting/setting-up-oauth-providers#google-oauth-gmail
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
+# Find documentation on setting up Microsoft OAuth here:
+# https://docs.documenso.com/developers/self-hosting/setting-up-oauth-providers#microsoft-oauth-azure-ad
+NEXT_PRIVATE_MICROSOFT_CLIENT_ID=""
+NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET=""
 
 NEXT_PRIVATE_OIDC_WELL_KNOWN=""
 NEXT_PRIVATE_OIDC_CLIENT_ID=""
@@ -105,6 +109,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=
@@ -127,4 +137,8 @@ E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
 E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 
 # [[LOGGER]]
-NEXT_PRIVATE_LOGGER_HONEY_BADGER_API_KEY=
+# 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

@@ -50,3 +50,13 @@ yarn-error.log*
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+
+# logs
+logs.json
+
+# claude
+.claude
+CLAUDE.md
+
+# agents
+.specs

.npmrc

@@ -1 +1,3 @@
 auto-install-peers = true
+legacy-peer-deps = true
+prefer-dedupe = true

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

@@ -49,8 +49,6 @@ Join us in creating the next generation of open trust infrastructure.
 
 ## Community and Next Steps 🎯
 
-We're currently working on a redesign of the application, including a revamp of the codebase, so Documenso can be more intuitive to use and robust to develop upon.
-
 - Check out the first source code release in this repository and test it.
 - Tell us what you think in the [Discussions](https://github.com/documenso/documenso/discussions).
 - Join the [Discord server](https://documen.so/discord) for any questions and getting to know to other community members.
@@ -216,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:
@@ -247,20 +243,20 @@ Now you can install the dependencies and build it:
 
 ```
 npm i
-npm run build:web
+npm run build
 npm run prisma:migrate-deploy
 ```
 
 Finally, you can start it with:
 
 ```
-cd apps/web
+cd apps/remix
 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
 
@@ -275,7 +271,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
@@ -310,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
    
-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**)
+   # 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
+   ```
 
-5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
+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/remix/resources/certificate.p12` (If the path does not exist, it needs to be created)
 
 ## Docker
 

apps/documentation/.gitignore

@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# next-sitemap output
+/public/sitemap.xml
+/public/robots.txt
+/public/sitemap-*.xml

apps/documentation/next-sitemap.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: 'https://docs.documenso.com', // Replace with your actual site URL
+  generateRobotsTxt: true, // Generates robots.txt
+};

apps/documentation/next.config.js

@@ -1,3 +1,5 @@
+import nextra from 'nextra';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: [
@@ -9,9 +11,10 @@ const nextConfig = {
   ],
 };
 
-const withNextra = require('nextra')({
+const withNextra = nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
+  codeHighlight: true,
 });
 
-module.exports = withNextra(nextConfig);
+export default withNextra(nextConfig);

apps/documentation/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
-    "build": "next build",
+    "build": "next build && next-sitemap",
     "start": "next start -p 3002",
     "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules"
@@ -15,7 +15,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "14.2.6",
+    "next": "14.2.28",
     "next-plausible": "^3.12.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
@@ -26,6 +26,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "next-sitemap": "^4.2.3",
     "typescript": "5.6.2"
   }
 }

apps/documentation/pages/developers/_meta.json

@@ -5,6 +5,7 @@
     "title": "Development & Deployment"
   },
   "local-development": "Local Development",
+  "developer-mode": "Developer Mode",
   "self-hosting": "Self Hosting",
   "contributing": "Contributing",
   "-- API & Integration Guides": {

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/developer-mode/field-coordinates.mdx

@@ -0,0 +1,18 @@
+---
+title: Field Coordinates
+description: Learn how to get the coordinates of a field in a document.
+---
+
+## Field Coordinates
+
+Field coordinates represent the position of a field in a document. They are returned in the `pageX` and `pageY` properties of the field.
+
+To enable field coordinates, you can use the `devmode` query parameter.
+
+```bash
+https://app.documenso.com/documents/<document-id>/edit?devmode=true
+```
+
+You should then see the coordinates on top of each field.
+
+![Field Coordinates](/developer-mode/field-coordinates.webp)

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/self-hosting/setting-up-oauth-providers.mdx

@@ -27,3 +27,33 @@ NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=<your-client-secret>
 ```
 
 Finally verify the signing in with Google works by signing in with your Google account and checking the email address in your profile.
+
+## Microsoft OAuth (Azure AD)
+
+To use Microsoft OAuth, you will need to create an Azure AD application registration in the Microsoft Azure portal. This will allow users to sign in with their Microsoft accounts.
+
+### Create and configure a new Azure AD application
+
+1. Go to the [Azure Portal](https://portal.azure.com/)
+2. Navigate to **Azure Active Directory** (or **Microsoft Entra ID** in newer Azure portals)
+3. In the left sidebar, click **App registrations**
+4. Click **New registration**
+5. Enter a name for your application (e.g., "Documenso")
+6. Under **Supported account types**, select **Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)** to allow any Microsoft account to sign in
+7. Under **Redirect URI**, select **Web** and enter: `https://<documenso-domain>/api/auth/callback/microsoft`
+8. Click **Register**
+
+### Configure the application
+
+1. After registration, you'll be taken to the app's overview page
+2. Copy the **Application (client) ID** - this will be your `NEXT_PRIVATE_MICROSOFT_CLIENT_ID`
+3. In the left sidebar, click **Certificates & secrets**
+4. Under **Client secrets**, click **New client secret**
+5. Add a description and select an expiration period
+6. Click **Add** and copy the **Value** (not the Secret ID) - this will be your `NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET`
+7. In the Documenso environment variables, set the following:
+
+```
+NEXT_PRIVATE_MICROSOFT_CLIENT_ID=<your-application-client-id>
+NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET=<your-client-secret-value>
+```

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

@@ -6,11 +6,13 @@
     "title": "How To Use"
   },
   "get-started": "Get Started",
-  "profile": "User Profile",
-  "signing-documents": "Signing Documents",
+  "profile": "Public Profile",
+  "organisations": "Organisations",
+  "documents": "Documents",
   "templates": "Templates",
+  "branding": "Branding",
+  "email-domains": "Email Domains",
   "direct-links": "Direct Signing Links",
-  "teams": "Teams",
   "-- Legal Overview": {
     "type": "separator",
     "title": "Legal Overview"

apps/documentation/pages/users/branding.mdx

@@ -0,0 +1,28 @@
+---
+title: Branding Preferences
+description: Learn how to set the branding preferences for your team account.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Branding Preferences
+
+Branding preferences allow you to set the default settings when emailing documents to your recipients.
+
+## Preferences
+
+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 **Branding** tab under the **Preferences** section.
+
+![A screenshot of the organisation's document preferences page](/organisations/organisation-branding.webp)
+
+On this page, you can:
+
+- **Upload a Logo** - Upload your team's logo to be displayed instead of the default Documenso logo.
+- **Set the Brand Website** - Enter the URL of your team's website to be displayed in the email communications sent by the team.
+- **Add Additional Brand Details** - You can add additional information to display at the bottom of the emails sent by the team. This can include contact information, social media links, and other relevant details.

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

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

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

@@ -0,0 +1,44 @@
+---
+title: Preferences
+description: Learn how to manage your team's global preferences.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Document Preferences
+
+Document preferences allow you to set the default settings when creating new documents and templates.
+
+For example, you can set the default language for documents sent by the team, or set the allowed signatures types.
+
+## Preferences
+
+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 **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.
+
+Document visibility, language and signature settings can be overriden on a per document basis.
+
+### Sender Details
+
+If the **Sender Details** setting is enabled, the emails sent by the team will include the sender's name. The email will say:
+
+> "Example User" on behalf of "Example Team" has invited you to sign "document.pdf"
+
+If the **Sender Details** setting is disabled, the emails sent by the team will not include the sender's name. The email will say:
+
+> "Example Team" has invited you to sign "document.pdf"

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

@@ -5,19 +5,25 @@ description: Learn how to control the visibility of your team documents.
 
 import { Callout } from 'nextra/components';
 
-# Team's Document Visibility
+# Document Visibility
 
-The default document visibility option allows you to control who can view and access the documents uploaded to your team account. The document visibility can be set to one of the following options:
+The default document visibility option allows you to control who can view and access the documents uploaded within a team.
+
+This value can either be set in the [document preferences](/users/documents/document-preferences), or when you [create the document](/users/documents/send-document)
+
+## Document Visibility Options
+
+The document visibility can be set to one of the following options:
 
 - **Everyone** - The document is visible to all team members.
 - **Managers and above** - The document is visible to team members with the role of _Manager or above_ and _Admin_.
 - **Admin only** - The document is only visible to the team's admins.
 
-![A screenshot of the document visibility selector from the team's global preferences page](/teams/team-preferences-document-visibility.webp)
+The default document visibility is set to "_EVERYONE_" by default. You can change this setting by going to the [document preferences page](/users/documents/document-preferences) and selecting a different visibility option.
 
-The default document visibility is set to "_EVERYONE_" by default. You can change this setting by going to the [team's general preferences page](/users/teams/preferences) and selecting a different visibility option.
+![Document visibility preference](/organisations/organisation-document-visibility.webp)
 
-Here's how it works:
+## How it works
 
 - If a user with the "_Member_" role creates a document and the default document visibility is set to "_Everyone_", the document's visibility is set to "_EVERYONE_".
   - The user can't change the visibility of the document in the document editor.

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.
@@ -115,7 +120,7 @@ All fields can be placed anywhere on the document and resized as needed.
 
 <Callout type="info">
   Learn more about the available field types and how to use them on the [Fields
-  page](signing-documents/fields).
+  page](/users/documents/fields).
 </Callout>
 
 #### Signature Required

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/get-started/account-creation.mdx

@@ -10,7 +10,7 @@ import { Callout, Steps } from 'nextra/components';
 <Steps>
 ### Pick a Plan
 
-The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, and Teams.
+The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, Teams and Platform.
 
 Explore each plan's features and choose the one that best suits your needs. The [pricing page](https://documen.so/pricing) has more information about the plans.
 
@@ -28,6 +28,6 @@ You can claim a premium username by upgrading to a paid plan. After upgrading to
 
 ### Optional: Create a Team
 
-If you are working with others, you can create a team and invite your team members to collaborate on your documents. More information about teams is available in the [Teams section](/users/get-started/teams).
+If you are working with others, you can create a team and invite your team members to collaborate on your documents. More information about teams is available in the [Teams section](/users/organisations/teams).
 
 </Steps>

apps/documentation/pages/users/get-started/teams.mdx

@@ -1,99 +0,0 @@
----
-title: Teams
-description: Learn how to create and manage teams in Documenso.
----
-
-import Image from 'next/image';
-
-import { Callout, Steps } from 'nextra/components';
-
-# Teams
-
-Documenso allows you to create teams to collaborate with others on creating and signing documents.
-
-<Steps>
-
-### Create a New Team
-
-Anyone can create a team from their account by clicking on the "+" (plus) button in the "Teams" section from the account dropdown.
-
-![Documenso account dropdown menu](/get-started-images/add-team.webp)
-
-Each team is a separate entity with its members, documents, and templates. You can create as many teams as you like but remember that each team is billed separately.
-
-<Callout type="info">You can transfer the ownership of the team at any time.</Callout>
-
-### Name and URL
-
-Clicking the "+" button will open a modal where you must pick your team's name and URL. The URL is the team's identifier and will link to the team's page and settings. An example URL would be:
-
-```bash
-https://app.documenso.com/t/<your-team-name>
-```
-
-![Documenso create team modal](/get-started-images/add-team-2.webp)
-
-You can select a different name and URL for your team, but we recommend using the same or similar name.
-
-### Invite Team Members
-
-After creating the team, you can invite team members by navigating to the "Members" tab in the team settings and clicking the "Invite member" button.
-
-To access the team settings, click on the team's name in the account dropdown and select the appropriate team. Lastly, click again on the avatar and then "Team Settings".
-
-Or you can copy this URL:
-
-```bash
-https://app.documenso.com/t/<your-team-name>/settings/members
-```
-
-Once you click on the "Invite member" button, you will be prompted to enter the email address of the person you want to invite. You can also select the role of the person you are inviting.
-
-![Invite team members in Documenso dashboard](/get-started-images/add-team-members-documenso.webp)
-
-You can also bulk-invite members by uploading a CSV file with the email addresses and roles of the people you want to invite.
-
-The table below shows how the CSV file should be structured:
-
-| Email address              | Role    |
-| -------------------------- | ------- |
-| team-admin@documenso.com   | Admin   |
-| team-manager@documenso.com | Manager |
-| team-member@documenso.com  | Member  |
-
-<Callout type="info">
-  The basic team plan includes 5 members. You can invite as many members as you like by upgrading
-  your team's seats on the team's billing page.
-</Callout>
-
-#### Roles
-
-You can assign different permissions to team members based on their roles. The roles available are:
-
-|  Role   | Create, Edit, Send Documents | Manage Users | Manage Admins | Settings | Billing | Delete/ Transfer |
-| :-----: | :--------------------------: | :----------: | :-----------: | :------: | :-----: | :--------------: |
-| Member  |              ✅              |      ❌      |      ❌       |    ❌    |   ❌    |        ❌        |
-| Manager |              ✅              |      ✅      |      ❌       |    ✅    |   ✅    |        ❌        |
-|  Admin  |              ✅              |      ✅      |      ✅       |    ✅    |   ✅    |        ❌        |
-|  Owner  |              ✅              |      ✅      |      ✅       |    ✅    |   ✅    |        ✅        |
-
-### Set a Team Email
-
-You can add a team email to make signing and sending documents easier. Adding a team email allows you to:
-
-- See a signing request sent to this email (Team Inbox)
-- See all documents sent on behalf of the team
-
-### (Optional) Transfer Team Ownership
-
-You can transfer the team's ownership at any time. To do this, navigate to the "General" tab in the team settings and click the "Transfer team" button.
-
-Use this URL to get to the team settings:
-
-```bash
-https://app.documenso.com/t/<your-team-name>/settings
-```
-
-### [Send your First Document](https://app.documenso.com/)
-
-</Steps>

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

@@ -0,0 +1,8 @@
+{
+  "index": "Introduction",
+  "members": "Members",
+  "groups": "Groups",
+  "teams": "Teams",
+  "sso": "SSO",
+  "billing": "Billing"
+}

apps/documentation/pages/users/organisations/billing.mdx

@@ -0,0 +1,19 @@
+---
+title: Billing
+description: Learn how to manage your organisation's billing and subscription.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+### Billing and Subscription Management
+
+Organisations handle billing centrally, making it easier to manage:
+
+- **Unified Billing**: One subscription covers all teams in the organisation
+- **Seat Management**: Add or remove seats across all teams automatically (Teams plan)
+
+You can change plans, view invoices and manage your subscription from the billing page which is accessible from the organisation settings.
+
+![A screenshot of the organisation's billing page](/organisations/organisations-billing.webp)

apps/documentation/pages/users/organisations/groups.mdx

@@ -0,0 +1,75 @@
+---
+title: Preferences
+description: Learn how to manage your team's global preferences.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisation Groups
+
+Organisation groups are a powerful administrative tool that streamlines user management across your entire organisation. Instead of manually assigning individual users to multiple teams, groups allow you to manage access at scale.
+
+This automated approach ensures consistent permissions while reducing administrative overhead for tasks like onboarding employees or managing contractor access.
+
+## Understanding groups
+
+### Key Benefits
+
+- **Instant Access Management**: New hires get immediate, appropriate access across all relevant teams
+- **Bulk Operations**: Remove an entire group (like a departing contractor team) and all members lose access simultaneously
+- **Role Consistency**: Ensure the same role is applied consistently across teams—no more accidentally giving admin access when member access was intended
+- **Audit Trail**: Easily track which groups have access to which teams
+
+### Example use case: Legal Compliance Team
+
+Imagine you have a legal compliance team that needs access to review documents across all departments. Instead of manually adding each legal team member to every departmental team (Sales, Marketing, HR, Operations), you can:
+
+1. Create a "Legal Compliance" group with the "Member" Organisation Role
+2. Add legal team members to this group
+3. Assign the "Legal Compliance" group to the required teams
+
+Now, when Sarah from Legal joins the company, you can simply add her to the "Legal Compliance" group. Once added, she automatically gains access to all teams the "Legal Compliance" group is assigned to.
+
+When John from Legal leaves the company, you remove him from the group and his access is instantly revoked across all teams.
+
+## Getting started with groups
+
+Navigate to the "Groups" section in your organisation settings to create and manage groups.
+
+There are two types of roles when using groups:
+
+- **Organisation Role**: A global organisation role given to all members of the group
+- **Team Role**: A team role you select when assigning the group to a team
+
+You should generally have the "Organisation Role" set to "Organisation Member", otherwise these members would by default have access to all teams anyway due to the high organisation role.
+
+### Creating Custom Groups
+
+When creating a custom group, you can:
+
+1. **Name the Group**: Give it a descriptive name that reflects its purpose
+2. **Set Organisation Role**: Define the default **organisation role** for group members
+3. **Add Members**: Include organisation members in the group
+
+![Organisation group creation](/organisations/organisation-group-create.webp)
+
+### Manage Custom Groups
+
+By clicking the "Manage" button on a custom group, you can view all teams it is assigned to and modify the group's settings.
+
+![Organisation group management](/organisations/organisation-group-manage.webp)
+
+### Assigning a group to a team
+
+To assign a group to a team, you need to navigate to the team settings and click the "Groups" tab.
+
+![Organisation group assignment](/organisations/organisation-group-assignment.webp)
+
+From here, click the "Add groups" button to begin the process of assigning a group to a team. Once you have added the group you can see that the members have been automatically added to the team in the members tab.
+
+## What's next?
+
+- [Create Your First Team](/users/organisations/teams)
+- [Manage Default Settings](/users/documents/document-preferences)

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

@@ -0,0 +1,65 @@
+---
+title: Organisations
+description: Learn how to create and manage organisations in Documenso.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisations
+
+Organisations allow you to manage multiple teams and users under a single managed entity. This powerful feature enables enterprise-level collaboration and streamlined management across your entire organisation.
+
+## What are Organisations?
+
+Organisations are the top-level entity in Documenso's hierarchy structure:
+
+![Organisations diagram](/organisations/organisations-basic-diagram.webp)
+
+Each organisation can contain multiple teams, and each team can have multiple members. This structure provides:
+
+- **Centralized Management**: Control multiple teams from a single organisational dashboard
+- **Unified Billing**: Manage billing and subscriptions at the organisation level
+- **Access Control**: Define roles and groups across the entire organisation
+- **Group Management**: Create custom groups to organise members and control team access
+- **Global Settings**: Apply consistent settings across all teams in your organisation
+
+## Create a new organisation
+
+You can create multiple organisations, but each organisation will be billed separately.
+
+<Steps>
+
+### Creating Organisations
+
+To create a new organisation, navigate to the organisation section in your account settings and click the "Create Organisation" button.
+
+![Create organisation in Documenso dashboard](/organisations/organisations-create.webp)
+
+### Select your plan
+
+Choose from our range of plans for your new organisation. If you want to instead upgrade your current organisation, you can do so by going into your settings billing page and upgrade it there.
+
+### Name setup
+
+When creating an organisation, you'll need to provide:
+
+- **Organisation Name**: The display name for your organisation
+
+</Steps>
+
+Once your organisation is established, you can create teams to organise your work and collaborate effectively. Each team operates independently but inherits organisation-level settings and branding.
+
+## Best Practices for Organisation Management
+
+1. **Use groups effectively**: Leverage groups to simplify permission management
+2. **Set default settings**: Configure organisation-wide settings for consistency
+
+## What's next?
+
+- [Create Your First Team](/users/organisations/teams)
+- [Invite Organisation Members](/users/organisations/members)
+- [Create Organisation Groups](/users/organisations/groups)
+- [Manage Default Settings](/users/documents/document-preferences)
+- [Manage Default Branding](/users/branding)

apps/documentation/pages/users/organisations/members.mdx

@@ -0,0 +1,65 @@
+---
+title: Members
+description: Learn how to invite and manage your organisation's members.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Organisation Members
+
+Organisation members are the core users of your organisation. They are the ones who can access the team resources and collaborate with other members.
+
+## Organisation Roles
+
+You can assign different permissions to organisation members by using roles. The roles available are:
+
+|         Role         | Manage Settings/Teams/Members | Billing | Delete Organisation |
+| :------------------: | :---------------------------: | :-----: | ------------------- |
+|  Organisation Owner  |              ✅               |   ✅    | ✅                  |
+|  Organisation Admin  |              ✅               |   ✅    | ✅                  |
+| Organisation Manager |              ✅               |   ❌    | ❌                  |
+| Organisation Member  |              ❌               |   ❌    | ❌                  |
+
+<Callout type="info">
+  Organisation admins and managers will automatically have access to all teams as the "Team Admin"
+  role. When creating a team you can also decide whether to automatically allow normal members to
+  access it by default as well.
+</Callout>
+
+## Invite Organisation Members
+
+To invite organisation members, you need to be an organisation owner, admin or manager.
+
+1. Open the menu switcher top right
+2. Hover over your new organisation and click the settings icon
+3. Navigate to the "Members" tab
+4. Click "Invite Member"
+
+Once you click on the "Invite member" button, you will be prompted to enter the email address of the person you want to invite. You can also select the role of the person you are inviting.
+
+![Invite organisation members](/organisations/organisations-member-invite.webp)
+
+You can also bulk-invite members by uploading a CSV file with the email addresses and roles of the people you want to invite.
+
+The table below shows how the CSV file should be structured:
+
+| Email address             | Role    |
+| ------------------------- | ------- |
+| org-admin@documenso.com   | Admin   |
+| org-manager@documenso.com | Manager |
+| org-member@documenso.com  | Member  |
+
+<Callout type="info">
+  The basic team plan includes 5 organisation members. Going over the 5 members will charge your
+  organisation according to the seat plan pricing.
+</Callout>
+
+## Manage Organisation Members
+
+On the same page, you can change the organisation member's roles or remove them from the organisation.
+
+## What's next?
+
+- [Use groups to organise your members](/users/organisations/groups)

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/documentation/pages/users/organisations/teams.mdx

@@ -0,0 +1,121 @@
+---
+title: Teams
+description: Learn how to create and manage teams in Documenso.
+---
+
+import Image from 'next/image';
+
+import { Callout, Steps } from 'nextra/components';
+
+# Teams
+
+Documenso teams allow you to collaborate with others on creating, sending and receiving documents within your organisation. Teams operate within the organisational structure and inherit settings and branding from their parent organisation.
+
+## Team Structure
+
+Teams provide focused collaboration spaces while benefiting from organisation-level management and settings.
+
+Each team within an organisation has its own:
+
+- Team members and roles
+- Documents and templates
+- Team-specific settings (that can override organisation defaults)
+- Team email and branding (if enabled)
+
+## Creating a Team
+
+Only members with the "Organisation Admin" or "Organisation Manager" role can create teams.
+
+<Steps>
+
+### Create Team
+
+To create a team, navigate to the organisation settings page and click the "Teams" tab. Then you can click the "Create Team" button.
+
+![Create Team Dialog](/teams/team-create.webp)
+
+### Name and URL
+
+When creating a team, you'll need to provide:
+
+- **Team Name**: The display name for your team
+- **Team URL**: A unique identifier for your team
+
+The team URL will follow this format:
+
+```bash
+https://app.documenso.com/t/<team-url>
+```
+
+You can select different names and URLs for your team, but we recommend using the same or similar names for consistency.
+
+![Documenso create team modal](/teams/team-create-dialog.webp)
+
+You can also decide whether to automatically inherit members from the organisation into the team. This means that all members of the organisation will have access to this team.
+
+Members with the "Organisation Admin" or "Organisation Manager" role will be assigned as "Team Admin" regardless of this setting. This will only affect members with the "Organisation Member" role, who will be added to the team as a "Team Member".
+
+Disabling this setting will remove all these members automatically. This can always be turned on or off later in the teams member settings page.
+
+</Steps>
+
+## Team Members
+
+After creating the team, you can add organisation members into your team using two methods:
+
+- Directly adding members to the team
+- Add members using groups
+
+### Directly adding members
+
+1. Navigate to the team settings member page
+2. Click the "Add Members" button
+3. Choose which members you want to add
+4. Assign the team roles for each team member
+
+If you want to add people outside of the organisation, you will need to invite them to the organisation first.
+
+See the [organisation members](/users/organisations/members#invite-organisation-members) page for more information.
+
+### Adding members using groups
+
+1. Navigate to the teams settings groups page
+2. Click the "Add groups" button
+3. Choose which groups you want to add
+4. Assign the team roles for each group
+
+See the [organisation groups](/users/organisations/groups) page for more information.
+
+### Team Member Roles
+
+You can assign different permissions to team members based on their roles. The roles available are:
+
+|     Role     | Manage Documents | Manage Team | Delete Team |
+| :----------: | :--------------: | :---------: | :---------: |
+|  Team Admin  |        ✅        |     ✅      |     ✅      |
+| Team Manager |        ✅        |     ✅      |     ❌      |
+| Team Member  |        ✅        |     ❌      |     ❌      |
+
+These roles can be used for document visibility and management as well.
+
+## Set a Team Email
+
+You can add a team email which allows you to:
+
+- See signing requests sent to this email (Team Inbox)
+- See documents sent from this email
+- Send documents on behalf of the team
+- Maintain consistent team branding in communications
+
+## Team Settings and Branding
+
+You can override preferences and settings from the Organisation on the Team level. See the following pages for more information:
+
+- [Document preferences](/users/documents/document-preferences)
+- [Branding preferences](/users/branding/branding-preferences)
+
+## What's next?
+
+- [Send your first document](/users/documents/sending-documents)
+- [Setup your default document preferences](/users/documents/document-preferences)
+- [Setup your default branding preferences](/users/branding)

apps/documentation/pages/users/profile.mdx

@@ -1,5 +1,5 @@
 ---
-title: User Profile
+title: Public Profile
 description: Learn how to set up your public profile on Documenso.
 ---
 
@@ -15,7 +15,7 @@ Documenso allows you to create a public profile to share your templates for anyo
 
 ### Navigate to Your Profile Settings
 
-Click on your profile picture in the top right corner and select "User settings". Then, navigate to the "Public Profile" tab to configure your profile.
+Click on your profile picture in the top right corner and select "Settings" or "Team Settings". Then, navigate to the "Public Profile" tab to configure your profile.
 
 ![The profile settings page](/public-profile/documenso-public-profile-settings.webp)
 
@@ -45,6 +45,8 @@ You can choose to make your profile public or private. Only you can access it if
 
 To make your profile public, toggle the switch to the right ("Show") at the top right-hand side of the page.
 
+![An example of a enabling a public profile on Documenso](/public-profile/documenso-enable-public-profile-settings.webp)
+
 ### (Optional) Link Templates
 
 Linking templates to your profile is optional, but it's what makes your profile helpful. Linking templates allow people to sign documents directly from your profile. As a result, we recommend linking at least one template you want to share with others.

apps/documentation/pages/users/signing-documents/_meta.json

@@ -1,4 +0,0 @@
-{
-  "index": "Send Documents",
-  "fields": "Document Fields"
-}

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

@@ -1,6 +0,0 @@
-{
-  "preferences": "Preferences",
-  "document-visibility": "Document Visibility",
-  "sender-details": "Email Sender Details",
-  "branding-preferences": "Branding Preferences"
-}

apps/documentation/pages/users/teams/branding-preferences.mdx

@@ -1,16 +0,0 @@
----
-title: Branding Preferences
-description: Learn how to set the branding preferences for your team account.
----
-
-# Branding Preferences
-
-You can set the branding preferences for your team account by going to the **Branding Preferences** tab in the team's settings dashboard.
-
-![A screenshot of the team's branding preferences page](/teams/team-branding-preferences.webp)
-
-On this page, you can:
-
-- **Upload a Logo** - Upload your team's logo to be displayed instead of the default Documenso logo.
-- **Set the Brand Website** - Enter the URL of your team's website to be displayed in the email communications sent by the team.
-- **Add Additional Brand Details** - You can add additional information to display at the bottom of the emails sent by the team. This can include contact information, social media links, and other relevant details.

apps/documentation/pages/users/teams/preferences.mdx

@@ -1,19 +0,0 @@
----
-title: Preferences
-description: Learn how to manage your team's global preferences.
----
-
-# Preferences
-
-You can manage your team's global preferences by clicking on the **Preferences** tab in the team's settings dashboard.
-
-![A screenshot of the team's global preferences page](/teams/team-preferences.webp)
-
-The preferences page allows you to update the following settings:
-
-- **Document Visibility** - Set the default visibility of the documents created by team members. Learn more about [document visibility](/users/teams/document-visibility).
-- **Default Document Language** - This setting allows you to set the default language for the documents uploaded in the team account. The default language is used as the default language in the email communications with the document recipients. You can change the language for individual documents when uploading them.
-- **Sender Details** - Set whether the sender's name should be included in the emails sent by the team. Learn more about [sender details](/users/teams/sender-details).
-- **Typed Signature** - It controls whether the document recipients can sign the documents with a typed signature or not. If enabled, the recipients can sign the document using either a drawn or a typed signature. If disabled, the recipients can only sign the documents usign a drawn signature. This setting can also be changed for individual documents when uploading them.
-- **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.
-- **Branding Preferences** - Set the branding preferences and defaults for the team account. Learn more about [branding preferences](/users/teams/branding-preferences).

apps/documentation/pages/users/teams/sender-details.mdx

@@ -1,14 +0,0 @@
----
-title: Email Sender Details
-description: Learn how to update the sender details for your team's email notifications.
----
-
-## Sender Details
-
-If the **Sender Details** setting is enabled, the emails sent by the team will include the sender's name. The email will say:
-
-> "Example User" on behalf of "Example Team" has invited you to sign "document.pdf"
-
-If the **Sender Details** setting is disabled, the emails sent by the team will not include the sender's name. The email will say:
-
-> "Example Team" has invited you to sign "document.pdf"

apps/documentation/theme.config.tsx

@@ -19,6 +19,22 @@ const themeConfig: DocsThemeConfig = {
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            !function(){
+             if (location.hostname === 'localhost') return;
+              var e="6c236490c9a68c1",
+                  t=function(){Reo.init({ clientID: e })},
+                  n=document.createElement("script");
+              n.src="https://static.reo.dev/"+e+"/reo.js";
+              n.defer=true;
+              n.onload=t;
+              document.head.appendChild(n);
+            }();
+          `,
+          }}
+        />
       </>
     );
   },

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/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.5.0",
-    "next": "14.2.6"
+    "next": "14.2.28"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/app/app.css

@@ -1,19 +1,30 @@
 @import '@documenso/ui/styles/theme.css';
 
+/* Inter Variable Fonts */
 @font-face {
   font-family: 'Inter';
-  src: url('/public/fonts/inter-regular.ttf') format('ttf');
-  /* font-weight: 400;
+  src: url('/fonts/inter-variablefont_opsz,wght.ttf') format('truetype-variations');
+  font-weight: 100 900;
   font-style: normal;
-  font-display: swap; */
+  font-display: swap;
 }
 
+/* Inter Italic Variable Fonts */
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-italic-variablefont_opsz,wght.ttf') format('truetype-variations');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Caveat Variable Font */
 @font-face {
   font-family: 'Caveat';
-  src: url('/public/fonts/caveat.ttf') format('ttf');
-  /* font-weight: 400;
+  src: url('/fonts/caveat-variablefont_wght.ttf') format('truetype-variations');
+  font-weight: 400 600;
   font-style: normal;
-  font-display: swap; */
+  font-display: swap;
 }
 
 @layer base {

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

@@ -0,0 +1,197 @@
+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 { trpc } from '@documenso/trpc/react';
+import { ZCreateAdminOrganisationRequestSchema } from '@documenso/trpc/server/admin-router/create-admin-organisation.types';
+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 {
+  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 OrganisationCreateDialogProps = {
+  trigger?: React.ReactNode;
+  ownerUserId: number;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateAdminOrganisationFormSchema = ZCreateAdminOrganisationRequestSchema.shape.data.pick({
+  name: true,
+});
+
+type TCreateOrganisationFormSchema = z.infer<typeof ZCreateAdminOrganisationFormSchema>;
+
+export const AdminOrganisationCreateDialog = ({
+  trigger,
+  ownerUserId,
+  ...props
+}: OrganisationCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const navigate = useNavigate();
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateAdminOrganisationFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const { mutateAsync: createOrganisation } = trpc.admin.organisation.create.useMutation();
+
+  const onFormSubmit = async ({ name }: TCreateOrganisationFormSchema) => {
+    try {
+      const { organisationId } = await createOrganisation({
+        ownerUserId,
+        data: {
+          name,
+        },
+      });
+
+      await navigate(`/admin/organisations/${organisationId}`);
+
+      setOpen(false);
+
+      toast({
+        title: t`Success`,
+        description: t`Organisation created`,
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      console.error(error);
+
+      toast({
+        title: t`An unknown error occurred`,
+        description: t`We encountered an unknown error while attempting to create a 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</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create organisation</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Create an organisation for this user</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="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Organisation Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Alert variant="neutral">
+                <AlertDescription className="mt-0">
+                  <Trans>
+                    You will need to configure any claims or subscription after creating this
+                    organisation
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              {/* <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Default claim ID</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      <Trans>Leave blank to use the default free claim</Trans>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              /> */}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-organisation-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/claim-create-dialog.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { z } from 'zod';
+
+import { generateDefaultSubscriptionClaim } from '@documenso/lib/utils/organisations-claims';
+import { trpc } from '@documenso/trpc/react';
+import type { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
+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 { SubscriptionClaimForm } from '../forms/subscription-claim-form';
+
+export type CreateClaimFormValues = z.infer<typeof ZCreateSubscriptionClaimRequestSchema>;
+
+export const ClaimCreateDialog = () => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: createClaim, isPending } = trpc.admin.claims.create.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Subscription claim created successfully.`,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Failed to create subscription claim.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        <Button className="flex-shrink-0" variant="secondary">
+          <Trans>Create claim</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create Subscription Claim</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Fill in the details to create a new subscription claim.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <SubscriptionClaimForm
+          subscriptionClaim={{
+            ...generateDefaultSubscriptionClaim(),
+          }}
+          onFormSubmit={createClaim}
+          formSubmitTrigger={
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isPending}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isPending}>
+                <Trans>Create Claim</Trans>
+              </Button>
+            </DialogFooter>
+          }
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } 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 ClaimDeleteDialogProps = {
+  claimId: string;
+  claimName: string;
+  claimLocked: boolean;
+  trigger: React.ReactNode;
+};
+
+export const ClaimDeleteDialog = ({
+  claimId,
+  claimName,
+  claimLocked,
+  trigger,
+}: ClaimDeleteDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: deleteClaim, isPending } = trpc.admin.claims.delete.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Subscription claim deleted successfully.`,
+      });
+
+      setOpen(false);
+    },
+    onError: (err) => {
+      console.error(err);
+
+      toast({
+        title: t`Failed to delete subscription claim.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Delete Subscription Claim</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Are you sure you want to delete the following claim?</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral">
+          <AlertDescription className="text-center font-semibold">
+            {claimLocked ? <Trans>This claim is locked and cannot be deleted.</Trans> : claimName}
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          {!claimLocked && (
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isPending}
+              onClick={async () => deleteClaim({ id: claimId })}
+            >
+              <Trans>Delete</Trans>
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import type { TFindSubscriptionClaimsResponse } from '@documenso/trpc/server/admin-router/find-subscription-claims.types';
+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 { SubscriptionClaimForm } from '../forms/subscription-claim-form';
+
+export type ClaimUpdateDialogProps = {
+  claim: TFindSubscriptionClaimsResponse['data'][number];
+  trigger: React.ReactNode;
+};
+
+export const ClaimUpdateDialog = ({ claim, trigger }: ClaimUpdateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: updateClaim, isPending } = trpc.admin.claims.update.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Subscription claim updated successfully.`,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Failed to update subscription claim.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update Subscription Claim</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Modify the details of the subscription claim.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <SubscriptionClaimForm
+          subscriptionClaim={claim}
+          onFormSubmit={async (data) =>
+            await updateClaim({
+              id: claim.id,
+              data,
+            })
+          }
+          formSubmitTrigger={
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isPending}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isPending}>
+                <Trans>Update Claim</Trans>
+              </Button>
+            </DialogFooter>
+          }
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -28,7 +28,6 @@ type DocumentDeleteDialogProps = {
   onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
-  teamId?: number;
   canManageDocument: boolean;
 };
 
@@ -50,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

@@ -16,7 +16,7 @@ import {
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
   id: number;
@@ -34,13 +34,14 @@ export const DocumentDuplicateDialog = ({
   const { toast } = useToast();
   const { _ } = useLingui();
 
-  const team = useOptionalCurrentTeam();
+  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,
     },
   );
@@ -52,18 +53,18 @@ export const DocumentDuplicateDialog = ({
       }
     : undefined;
 
-  const documentsPath = formatDocumentsPath(team?.url);
+  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-dialog.tsx

@@ -1,124 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { trpc } from '@documenso/trpc/react';
-import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type DocumentMoveDialogProps = {
-  documentId: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentMoveDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
-
-  const { data: teams, isPending: isLoadingTeams } = trpc.team.getTeams.useQuery();
-
-  const { mutateAsync: moveDocument, isPending } = trpc.document.moveDocumentToTeam.useMutation({
-    onSuccess: () => {
-      toast({
-        title: _(msg`Document moved`),
-        description: _(msg`The document has been successfully moved to the selected team.`),
-        duration: 5000,
-      });
-
-      onOpenChange(false);
-    },
-    onError: (error) => {
-      toast({
-        title: _(msg`Error`),
-        description: error.message || _(msg`An error occurred while moving the document.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    },
-  });
-
-  const onMove = async () => {
-    if (!selectedTeamId) {
-      return;
-    }
-
-    await moveDocument({ documentId, teamId: selectedTeamId });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Move Document to Team</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>Select a team to move this document to. This action cannot be undone.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
-          <SelectTrigger>
-            <SelectValue placeholder={_(msg`Select a team`)} />
-          </SelectTrigger>
-          <SelectContent>
-            {isLoadingTeams ? (
-              <SelectItem value="loading" disabled>
-                <Trans>Loading teams...</Trans>
-              </SelectItem>
-            ) : (
-              teams?.map((team) => (
-                <SelectItem key={team.id} value={team.id.toString()}>
-                  <div className="flex items-center gap-4">
-                    <Avatar className="h-8 w-8">
-                      {team.avatarImageId && (
-                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
-                      )}
-
-                      <AvatarFallback className="text-sm text-gray-400">
-                        {team.name.slice(0, 1).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
-
-                    <span>{team.name}</span>
-                  </div>
-                </SelectItem>
-              ))
-            )}
-          </SelectContent>
-        </Select>
-
-        <DialogFooter>
-          <Button variant="secondary" onClick={() => onOpenChange(false)}>
-            <Trans>Cancel</Trans>
-          </Button>
-          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
-            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { FolderIcon, HomeIcon, Loader2, Search } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
@@ -31,9 +31,10 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentMoveToFolderDialogProps = {
   documentId: number;
@@ -57,8 +58,11 @@ export const DocumentMoveToFolderDialog = ({
 }: DocumentMoveToFolderDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
+
+  const [searchTerm, setSearchTerm] = useState('');
 
   const form = useForm<TMoveDocumentFormSchema>({
     resolver: zodResolver(ZMoveDocumentFormSchema),
@@ -67,7 +71,7 @@ export const DocumentMoveToFolderDialog = ({
     },
   });
 
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
     {
       parentId: currentFolderId,
       type: FolderType.DOCUMENT,
@@ -77,11 +81,12 @@ export const DocumentMoveToFolderDialog = ({
     },
   );
 
-  const { mutateAsync: moveDocumentToFolder } = trpc.folder.moveDocumentToFolder.useMutation();
+  const { mutateAsync: updateDocument } = trpc.document.update.useMutation();
 
   useEffect(() => {
     if (!open) {
       form.reset();
+      setSearchTerm('');
     } else {
       form.reset({ folderId: currentFolderId });
     }
@@ -89,11 +94,21 @@ export const DocumentMoveToFolderDialog = ({
 
   const onSubmit = async (data: TMoveDocumentFormSchema) => {
     try {
-      await moveDocumentToFolder({
+      await updateDocument({
         documentId,
+        data: {
           folderId: data.folderId ?? null,
+        },
       });
 
+      const documentsPath = formatDocumentsPath(team.url);
+
+      if (data.folderId) {
+        await navigate(`${documentsPath}/f/${data.folderId}`);
+      } else {
+        await navigate(documentsPath);
+      }
+
       toast({
         title: _(msg`Document moved`),
         description: _(msg`The document has been moved successfully.`),
@@ -101,14 +116,6 @@ export const DocumentMoveToFolderDialog = ({
       });
 
       onOpenChange(false);
-
-      const documentsPath = formatDocumentsPath(team?.url);
-
-      if (data.folderId) {
-        void navigate(`${documentsPath}/f/${data.folderId}`);
-      } else {
-        void navigate(documentsPath);
-      }
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -122,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.`),
@@ -130,6 +147,10 @@ export const DocumentMoveToFolderDialog = ({
     }
   };
 
+  const filteredFolders = folders?.data.filter((folder) =>
+    folder.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <Dialog {...props} open={open} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -143,8 +164,18 @@ export const DocumentMoveToFolderDialog = ({
           </DialogDescription>
         </DialogHeader>
 
+        <div className="relative">
+          <Search className="text-muted-foreground absolute left-2 top-3 h-4 w-4" />
+          <Input
+            placeholder={_(msg`Search folders...`)}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
             <FormField
               control={form.control}
               name="folderId"
@@ -153,8 +184,9 @@ export const DocumentMoveToFolderDialog = ({
                   <FormLabel>
                     <Trans>Folder</Trans>
                   </FormLabel>
+
                   <FormControl>
-                    <div className="space-y-2">
+                    <div className="max-h-96 space-y-2 overflow-y-auto">
                       {isFoldersLoading ? (
                         <div className="flex h-10 items-center justify-center">
                           <Loader2 className="h-4 w-4 animate-spin" />
@@ -169,10 +201,10 @@ export const DocumentMoveToFolderDialog = ({
                             disabled={currentFolderId === null}
                           >
                             <HomeIcon className="mr-2 h-4 w-4" />
-                            <Trans>Root (No Folder)</Trans>
+                            <Trans>Home (No Folder)</Trans>
                           </Button>
 
-                          {folders?.data.map((folder) => (
+                          {filteredFolders?.map((folder) => (
                             <Button
                               key={folder.id}
                               type="button"
@@ -185,6 +217,12 @@ export const DocumentMoveToFolderDialog = ({
                               {folder.name}
                             </Button>
                           ))}
+
+                          {searchTerm && filteredFolders?.length === 0 && (
+                            <div className="text-muted-foreground px-2 py-2 text-center text-sm">
+                              <Trans>No folders found</Trans>
+                            </div>
+                          )}
                         </>
                       )}
                     </div>

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';
@@ -36,14 +36,18 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 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[];
 };
 
@@ -57,7 +61,7 @@ export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema
 
 export const DocumentResendDialog = ({ document, recipients }: DocumentResendDialogProps) => {
   const { user } = useSession();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -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>
+  );
+};