fix: custom email message for self-signers

## Description

Feature flags are broken on SSR due to this error

```
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11731:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (node:internal/deps/undici/undici:8590:41)
      at _resume (node:internal/deps/undici/undici:8563:33)
      at resume (node:internal/deps/undici/undici:8459:7)
      at [dispatch] (node:internal/deps/undici/undici:7704:11)
      at Client.Intercept (node:internal/deps/undici/undici:7377:20)
      at Client.dispatch (node:internal/deps/undici/undici:6023:44)
      at [dispatch] (node:internal/deps/undici/undici:6254:32)
      at Pool.dispatch (node:internal/deps/undici/undici:6023:44)
      at [dispatch] (node:internal/deps/undici/undici:9343:27)
      at Agent.Intercept (node:internal/deps/undici/undici:7377:20) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}
```

I've removed content-length header since it isn't mandatory to my
knowledge for get requests.

## Changes

- Add fallback local flags when individual flag request fails
- Add error logging
- Remove `content-length` from headers being passed to Posthog

SIGNING.md

@@ -17,7 +17,8 @@ For the digital signature of your documents you need a signing certificate in .p
    `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt`
 
 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**)
-5. Place the certificate `/apps/web/resources/certificate.p12`
+
+5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
 
 ## Docker
 

apps/documentation/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/documentation/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/documentation/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

apps/documentation/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

apps/documentation/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+});
+
+module.exports = withNextra(nextConfig);

apps/documentation/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@documenso/documentation",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3002",
+    "build": "next build",
+    "start": "next start -p 3002",
+    "lint:fix": "next lint --fix",
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+  },
+  "dependencies": {
+    "next": "14.0.3",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}

apps/documentation/pages/_app.mdx

@@ -0,0 +1,7 @@
+import '../styles.css'
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+
+
+}

apps/documentation/pages/_meta.json

@@ -0,0 +1,44 @@
+{
+  "index": {
+    "title": "Home",
+    "type": "page",
+    "theme": {
+      "layout": "full",
+      "sidebar": false
+    },
+    "display": "hidden"
+  },
+  "app": {
+    "title": "Getting Started",
+    "type": "page"
+  },
+  "faq": {
+    "title": "FAQ",
+    "type": "page"
+  },
+  "local-development": {
+    "title": "Local Development",
+    "type": "page"
+  },
+  "public-api": {
+    "title": "Public API",
+    "type": "page",
+    "href": "/fcc/"
+  },
+  "webhooks": {
+    "title": "Webhooks",
+    "type": "page"
+  },
+  "contributing": {
+    "title": "Contributing Guide",
+    "type": "page"
+  },
+  "---": {
+    "type": "separator"
+  },
+  "GitHub": {
+    "title": "View on GitHub",
+    "href": "https://documen.so/github",
+    "newWindow": true
+  }
+}

apps/documentation/pages/app/getting-started.mdx

@@ -0,0 +1 @@
+# Getting Started

apps/documentation/pages/contributing/_meta.json

@@ -0,0 +1,8 @@
+{
+  "index": {
+    "title": "Get started",
+    "theme": {
+      "sidebar": false
+    }
+  }
+}

apps/documentation/pages/contributing/index.mdx

@@ -0,0 +1,115 @@
+---
+title: Contributing Guide
+description: Learn how to contribute to Documenso and become part of our community.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Contributing to Documenso
+
+If you plan to contribute to Documenso, please take a moment to feel awesome ✨. People like you are what open source is about ♥. Any contributions, no matter how big or small, are highly appreciated 🙏. This guide will help you get started with contributing to Documenso 💻.
+
+## Before Getting Started
+
+<Steps>
+
+### Check the Existing Issues and Pull Requests
+
+Search the existing [issues](https://github.com/documenso/documenso/issues) to see if someone else reported the same issue. Or, check the [existing PRs](https://github.com/documenso/documenso/pulls) to see if someone else is already working on the same thing.
+
+### Creating a New Issue
+
+If there is no issue or PR for the problem you are facing, feel free to create a new issue. Make sure to provide as much detail as possible, including the steps to reproduce the issue.
+
+### Picking an Existing Issue
+
+If you pick an existing issue, take into consideration the discussion on the issue.
+
+### Contributor License Agreement
+
+Accept the [Contributor License Agreement](https://documen.so/cla) to ensure we can accept your contributions.
+
+</Steps>
+
+## Taking Issues
+
+Before taking an issue, ensure that:
+
+- The issue has been assigned the public label.
+- The issue is clearly defined and understood.
+- No one has been assigned to the issue.
+- No one has expressed the intention to work on it.
+
+After that:
+
+1. Comment on the issue with your intention to work on it.
+2. Start working on the issue.
+
+Feel free to ask for help, clarification or guidance if needed. We are here to help you.
+
+## Developing
+
+The development branch is `main`, and all pull requests should be made against this branch. Here's how you can get started with developing:
+
+<Steps>
+
+### Set Up Documenso Locally
+
+Check out the [local development](/local-development) guide to set up your local environment.
+
+### Pick a Task
+
+Find an issue to work on or create a new one.
+
+- Before starting to work on an issue, ensure that no one else is working on it. If no one is assigned to the issue, feel free to pick it up by leaving a comment on the issue and asking to get it assigned to you.
+
+Before creating a new issue, check the existing issues to see if someone else has already reported it.
+
+### Create a New Branch
+
+After you're assigned an issue, you can start working on it. Create a new branch for your feature or bug fix.
+
+When creating a branch, make sure that the branch name:
+
+- starts with the correct prefix: `feat/` for new features, `fix/` for bug fixes, etc.
+- includes the issue id you are working on (if applicable).
+- is descriptive.
+
+```sh
+git checkout -b feat/issue-id-your-branch-name
+
+## Example
+git checkout -b feat/1234-add-share-button-to-articles
+```
+
+In the pull request description, include `references #yyyy` or `fixes #yyyy` to link it to the issue you are working on.
+
+### Implement Your Changes
+
+Start working on the issue you picked up and implement the changes. Make sure to test your changes locally and ensure that they work as expected.
+
+### Open a Pull Request
+
+After implementing your changes, open a pull request against the `main` branch.
+
+</Steps>
+
+<Callout type="info">
+  If you need help getting started, [join us on Discord](https://documen.so/discord).
+</Callout>
+
+## Building
+
+Before pushing code or creating pull requests, please ensure you can successfully create a successful production build. You can build the project by running the following command in your terminal:
+
+```bash
+npm run build
+```
+
+Once the project builds successfully, you can push your code changes or create a pull request.
+
+<Callout type="info">
+  Remember to run tests and perform any necessary checks before finalizing your changes. As a
+  result, we can collaborate more effectively and maintain a high standard of code quality in our
+  project.
+</Callout>

apps/documentation/pages/faq/faq.mdx

@@ -0,0 +1 @@
+# FAQ

apps/documentation/pages/index.mdx

@@ -0,0 +1,78 @@
+export const Wrapper = ({ children }) => {
+  return <div className="p-24">{children}</div>;
+};
+
+<Wrapper>
+
+# Documentation
+
+Welcome to the official Documenso documentation! This documentation is designed to help you get started with Documenso.
+
+For users, we'll guide you through setting up your Documenso account, creating and organizing your documents, collaborating with team members, and leveraging our advanced features. You'll learn how to get the most out of Documenso.
+
+If you're a developer, you'll find detailed information on how to set up your local development environment, work with our API, and utilize webhooks for seamless integration. We'll provide code examples, best practices, and troubleshooting tips to help you effectively incorporate Documenso's features into your applications.
+
+We aim to make our documentation clear, concise, and easy to navigate. If you have any questions, feedback, or suggestions for improving our documentation, please don't hesitate to reach out to us. We want to make your experience with Documenso as smooth and enjoyable as possible.
+
+Let's get started!
+
+## About Documenso
+
+Signing documents digitally should be fast and easy and should be the best practice for every document signed worldwide.
+
+This is technically quite easy today, but it also introduces a new party to every signature: The signing tool providers. While this is not a problem in itself, it should make us think about how we want these providers of trust to work.
+
+Documenso aims to be the world's most trusted document-signing tool. This trust is built by empowering you to self-host Documenso and review how it works under the hood.
+
+Join us in creating the next generation of open trust infrastructure.
+
+## Our tech stack:
+
+- [Typescript](https://www.typescriptlang.org/) - Language
+- [Next.js](https://nextjs.org/) - Framework
+- [Prisma](https://www.prisma.io/) - ORM
+- [Tailwind](https://tailwindcss.com/) - CSS
+- [shadcn/ui](https://ui.shadcn.com/) - Component Library
+- [NextAuth.js](https://next-auth.js.org/) - Authentication
+- [react-email](https://react.email/) - Email Templates
+- [tRPC](https://trpc.io/) - API
+- [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
+- [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
+- [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
+- [Stripe](https://stripe.com/) - Payments
+- [Vercel](https://vercel.com) - Hosting
+
+<div className="mt-16 flex items-center justify-center gap-4">
+  <a href="https://documen.so/discord">
+    <img
+      src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2"
+      alt="Join Documenso on Discord"
+    />
+  </a>
+  <a href="https://github.com/documenso/documenso/stargazers">
+    <img src="https://img.shields.io/github/stars/documenso/documenso" alt="Github Stars" />
+  </a>
+  <a href="https://github.com/documenso/documenso/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License" />
+  </a>
+  <a href="https://github.com/documenso/documenso/pulse">
+    <img
+      src="https://img.shields.io/github/commit-activity/m/documenso/documenso"
+      alt="Commits-per-month"
+    />
+  </a>
+  <a href="https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso">
+    <img
+      alt="open in devcontainer"
+      src="https://img.shields.io/static/v1?label=Dev%20Containers&message=Enabled&color=blue&logo=visualstudiocode"
+    />
+  </a>
+  <a href="https://github.com/documenso/documenso/blob/main/CODE_OF_CONDUCT.md">
+    <img
+      src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg"
+      alt="Contributor Covenant"
+    />
+  </a>
+</div>
+
+</Wrapper>

apps/documentation/pages/local-development/_meta.json

@@ -0,0 +1,7 @@
+{
+  "index": "Home",
+  "quickstart": "Developer Quickstart",
+  "manual": "Manual Setup",
+  "docker": "Docker",
+  "gitpod": "Gitpod"
+}

apps/documentation/pages/local-development/docker.mdx

@@ -0,0 +1,177 @@
+---
+title: Docker Development
+description: Set up Documenso using Docker for local development.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Docker
+
+The following guide will walk you through setting up Documenso using Docker. You can choose between a Docker Compose production setup or a standalone container.
+
+We provide a Docker container for Documenso, which is published on both DockerHub and GitHub Container Registry.
+
+- DockerHub: [https://hub.docker.com/r/documenso/documenso](https://hub.docker.com/r/documenso/documenso)
+- GitHub Container Registry: [https://ghcr.io/documenso/documenso](https://ghcr.io/documenso/documenso)
+
+You can pull the Docker image from either of these registries and run it with your preferred container hosting provider.
+
+Please note that you will need to provide environment variables for connecting to the database, mail server, and other services.
+
+## Prerequisites
+
+Before you begin, ensure that you have the following installed:
+
+- Docker
+- Docker Compose (if using the Docker Compose setup)
+
+## Option 1: Production Docker Compose Setup
+
+This setup includes a PostgreSQL database and the Documenso application. You will need to provide your own SMTP details using environment variables.
+
+<Steps>
+
+### Download the Docker Compose File
+
+Download the Docker Compose file from the Documenso repository - [compose.yml](https://raw.githubusercontent.com/documenso/documenso/release/docker/production/compose.yml).
+
+### Navigate to the `compose.yml` File
+
+Once downloaded, navigate to the directory containing the `compose.yml` file.
+
+### Set Up Environment Variables
+
+Create a `.env` file in the same directory as the `compose.yml` file.
+
+Then add your SMTP details as well as the following environment variables:
+
+```bash
+NEXTAUTH_SECRET="<your-secret>"
+NEXT_PRIVATE_ENCRYPTION_KEY="<your-key>"
+NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-secondary-key>"
+NEXT_PUBLIC_WEBAPP_URL="<your-url>"
+NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth"
+NEXT_PRIVATE_SMTP_HOST="<your-host>"
+NEXT_PRIVATE_SMTP_PORT=<your-port>
+NEXT_PRIVATE_SMTP_USERNAME="<your-username>"
+NEXT_PRIVATE_SMTP_PASSWORD="<your-password>"
+```
+
+### Update the Volume Binding
+
+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:
+
+```yaml
+volumes:
+  - /path/to/your/keyfile.p12:/opt/documenso/cert.p12
+```
+
+After updating the volume binding, save the `compose.yml` file and run the following command to start the containers:
+
+```bash
+docker-compose --env-file ./.env -d up
+```
+
+The command will start the PostgreSQL database and the Documenso application containers.
+
+### Access the Application
+
+Access the Documenso application by visiting `http://localhost:3000` in your web browser.
+
+</Steps>
+
+## Option 2: Standalone Docker Container
+
+If you prefer to host the Documenso application on a specific container provider, you can use the pre-built Docker image from DockerHub or GitHub's Package Registry. Note that you will need to provide your own database and SMTP host.
+
+<Steps>
+
+### Pull the Docker Image
+
+Pull the Documenso Docker image from DockerHub:
+
+```bash
+docker pull documenso/documenso
+```
+
+Or, pull the image from GitHub Container Registry:
+
+```bash
+docker pull ghcr.io/documenso/documenso
+```
+
+### Run the Docker Container
+
+Run the Docker container with the required environment variables:
+
+```bash
+docker run -d \
+ -p 3000:3000 \
+ -e NEXTAUTH_URL="<your-nextauth-url>"
+ -e NEXTAUTH_SECRET="<your-nextauth-secret>"
+ -e NEXT_PRIVATE_ENCRYPTION_KEY="<your-next-private-encryption-key>"
+ -e NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-next-private-encryption-secondary-key>"
+ -e NEXT_PUBLIC_WEBAPP_URL="<your-next-public-webapp-url>"
+ -e NEXT_PRIVATE_DATABASE_URL="<your-next-private-database-url>"
+ -e NEXT_PRIVATE_DIRECT_DATABASE_URL="<your-next-private-database-url>"
+ -e NEXT_PRIVATE_SMTP_TRANSPORT="<your-next-private-smtp-transport>"
+ -e NEXT_PRIVATE_SMTP_FROM_NAME="<your-next-private-smtp-from-name>"
+ -e NEXT_PRIVATE_SMTP_FROM_ADDRESS="<your-next-private-smtp-from-address>"
+ -v /path/to/your/keyfile.p12:/opt/documenso/cert.p12
+ documenso/documenso
+```
+
+Replace the placeholders with the actual values.
+
+### Access the Application
+
+Access the Documenso application by visiting the URL you provided for the `NEXT_PUBLIC_WEBAPP_URL` environment variable in your web browser.
+
+</Steps>
+
+## Advanced Configuration
+
+The environment variables listed above are a subset of those available for configuring Documenso. The table below provides a complete list of environment variables and their descriptions.
+
+| Variable                                     | Description                                                                                         |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `PORT`                                       | The port on which the Documenso application runs. It defaults to `3000`.                            |
+| `NEXTAUTH_URL`                               | The URL for the NextAuth.js authentication service.                                                 |
+| `NEXTAUTH_SECRET`                            | The secret key used by NextAuth.js for encryption and signing.                                      |
+| `NEXT_PRIVATE_ENCRYPTION_KEY`                | The primary encryption key for symmetric encryption and decryption (at least 32 characters).        |
+| `NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY`      | The secondary encryption key for symmetric encryption and decryption (at least 32 characters).      |
+| `NEXT_PRIVATE_GOOGLE_CLIENT_ID`              | The Google client ID for Google authentication (optional).                                          |
+| `NEXT_PRIVATE_GOOGLE_CLIENT_SECRET`          | The Google client secret for Google authentication (optional).                                      |
+| `NEXT_PUBLIC_WEBAPP_URL`                     | The URL for the web application.                                                                    |
+| `NEXT_PRIVATE_DATABASE_URL`                  | The URL for the primary database connection (with connection pooling).                              |
+| `NEXT_PRIVATE_DIRECT_DATABASE_URL`           | The URL for the direct database connection (without connection pooling).                            |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default)                                    |
+| `NEXT_PRIVATE_SIGNING_PASSPHRASE`            | The passphrase for the key file.                                                                    |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`   | The base64-encoded contents of the key file will be used instead of the file path.                  |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`       | The path to the key file, default `/opt/documenso/cert.p12`.                                        |
+| `NEXT_PUBLIC_UPLOAD_TRANSPORT`               | The transport for file uploads (database or s3).                                                    |
+| `NEXT_PRIVATE_UPLOAD_ENDPOINT`               | The endpoint for the S3 storage transport (for third-party S3-compatible providers).                |
+| `NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE`       | Whether to force path-style URLs for the S3 storage transport.                                      |
+| `NEXT_PRIVATE_UPLOAD_REGION`                 | The region for the S3 storage transport (defaults to us-east-1).                                    |
+| `NEXT_PRIVATE_UPLOAD_BUCKET`                 | The bucket to use for the S3 storage transport.                                                     |
+| `NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID`          | The access key ID for the S3 storage transport.                                                     |
+| `NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY`      | The secret access key for the S3 storage transport.                                                 |
+| `NEXT_PRIVATE_SMTP_TRANSPORT`                | The transport to send emails (smtp-auth, smtp-api, resend, or mailchannels).                        |
+| `NEXT_PRIVATE_SMTP_HOST`                     | The host for the SMTP server for SMTP transports.                                                   |
+| `NEXT_PRIVATE_SMTP_PORT`                     | The port for the SMTP server for SMTP transports.                                                   |
+| `NEXT_PRIVATE_SMTP_USERNAME`                 | The username for the SMTP server for the `smtp-auth` transport.                                     |
+| `NEXT_PRIVATE_SMTP_PASSWORD`                 | The password for the SMTP server for the `smtp-auth` transport.                                     |
+| `NEXT_PRIVATE_SMTP_APIKEY_USER`              | The API key user for the SMTP server for the `smtp-api` transport.                                  |
+| `NEXT_PRIVATE_SMTP_APIKEY`                   | The API key for the SMTP server for the `smtp-api` transport.                                       |
+| `NEXT_PRIVATE_SMTP_SECURE`                   | Whether to force the use of TLS for the SMTP server for SMTP transports.                            |
+| `NEXT_PRIVATE_SMTP_FROM_ADDRESS`             | The email address for the "from" address.                                                           |
+| `NEXT_PRIVATE_SMTP_FROM_NAME`                | The sender name for the "from" address.                                                             |
+| `NEXT_PRIVATE_RESEND_API_KEY`                | The API key for Resend.com for the `resend` transport.                                              |
+| `NEXT_PRIVATE_MAILCHANNELS_API_KEY`          | The optional API key for MailChannels (if using a proxy) for the `mailchannels` transport.          |
+| `NEXT_PRIVATE_MAILCHANNELS_ENDPOINT`         | The optional endpoint for the MailChannels API (if using a proxy) for the `mailchannels` transport. |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN`      | The domain for DKIM signing with MailChannels for the `mailchannels` transport.                     |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR`    | The selector for DKIM signing with MailChannels for the `mailchannels` transport.                   |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY` | The private key for DKIM signing with MailChannels for the `mailchannels` transport.                |
+| `NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT`     | The maximum document upload limit displayed to the user (in MB).                                    |
+| `NEXT_PUBLIC_POSTHOG_KEY`                    | The optional PostHog key for analytics and feature flags.                                           |
+| `NEXT_PUBLIC_DISABLE_SIGNUP`                 | Whether to disable user signups through the /signup page.                                           |

apps/documentation/pages/local-development/gitpod.mdx

@@ -0,0 +1,10 @@
+---
+title: Run in Gitpod
+description: Get started with Documenso in a ready-to-use Gitpod workspace in your browser.
+---
+
+# Run in Gitpod
+
+Click below to launch a ready-to-use Gitpod workspace in your browser.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/documenso/documenso)

apps/documentation/pages/local-development/index.mdx

@@ -0,0 +1,15 @@
+---
+title: Local development
+description: Learn how to set up Documenso for local development.
+---
+
+# Local development
+
+There are multiple ways of setting up Documenso for local development. At the moment of writing this documentation, there are 4 ways of running Documenso locally:
+
+- [Using the developer quickstart](/local-development/quickstart)
+- [Manually setting up the development environment](/local-development/manual)
+- [Using the Docker image](/local-development/docker)
+- [Using Gitpod](/local-development/gitpod)
+
+Pick the one that fits your needs the best.

apps/documentation/pages/local-development/manual.mdx

@@ -0,0 +1,77 @@
+---
+title: Manual Setup
+description: Manually set up Documenso on your machine for local development.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Manual Setup
+
+Follow these steps to set up Documenso on your local machine:
+
+<Steps>
+
+### Fork Documenso
+
+Fork the [Documenso repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+### Clone Repository
+
+After forking the repository, clone it to your local device by using the following command:
+
+```bash
+git clone https://github.com/<your-username>/documenso
+```
+
+### Install Dependencies
+
+Run `npm i` in the root directory to install the dependencies required for the project.
+
+### Set Up Environment Variables
+
+Set up the following environment variables in the `.env` file:
+
+```bash
+NEXTAUTH_URL
+NEXTAUTH_SECRET
+NEXT_PUBLIC_WEBAPP_URL
+NEXT_PUBLIC_MARKETING_URL
+NEXT_PRIVATE_DATABASE_URL
+NEXT_PRIVATE_DIRECT_DATABASE_URL
+NEXT_PRIVATE_SMTP_FROM_NAME
+NEXT_PRIVATE_SMTP_FROM_ADDRESS
+```
+
+Alternatively, you can run `cp .env.example .env` to get started with our handpicked defaults.
+
+### Create Database Schema
+
+Create the database schema by running the following command:
+
+```bash
+npm run prisma:migrate-dev
+```
+
+### Optional: Seed the Database
+
+Seed the database with test data by running the following command:
+
+```bash
+npm run prisma:seed -w @documenso/prisma
+```
+
+### Start the Application
+
+Run `npm run dev` in the root directory to start the application.
+
+### Access the Application
+
+Access the Documenso application by visiting `http://localhost:3000` in your web browser.
+
+</Steps>
+
+<Callout type="info">
+  Optional: Create your signing certificate. To generate your own using these steps and a Linux
+  Terminal or Windows Subsystem for Linux (WSL), see **[Create your signing
+  certificate](./SIGNING.md)**.
+</Callout>

apps/documentation/pages/local-development/quickstart.mdx

@@ -0,0 +1,66 @@
+---
+title: Developer Quickstart
+description: Quickly set up Documenso on your machine for local development with Docker and Docker Compose.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Developer Quickstart
+
+<Callout type="info">
+  **Note**: This guide assumes that you have both [docker](https://docs.docker.com/get-docker/) and
+  [docker-compose](https://docs.docker.com/compose/) installed on your machine.
+</Callout>
+
+Want to get up and running quickly? Follow these steps:
+
+<Steps>
+
+### Fork Documenso
+
+Fork the [Documenso repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+### Clone Repository
+
+After forking the repository, clone it to your local device by using the following command:
+
+```bash
+git clone https://github.com/<your-username>/documenso
+```
+
+### Set Up Environment Variables
+
+Set up your environment variables in the `.env` file using the `.env.example` file as a reference.
+
+Alternatively, you can run `cp .env.example .env` to get started with our handpicked defaults.
+
+### Start Database and Mail Server
+
+Run `npm run dx` in the root directory.
+
+This will spin up a Postgres database and inbucket mailserver in a docker container.
+
+### Start the Application
+
+Run `npm run dev` in the root directory to start the application.
+
+### Optional: Fasten the Process
+
+Want it even faster? Just use:
+
+```sh
+npm run d
+```
+
+</Steps>
+
+### Access Points for the Project
+
+You can access the following services:
+
+- Main application - http://localhost:3000
+- Incoming Mail Access - http://localhost:9000
+- Database Connection Details:
+- Port: 54320
+- Connection: Use your favourite database client to connect to the database.
+- S3 Storage Dashboard - http://localhost:9001

apps/documentation/pages/public-api/_meta.json

@@ -0,0 +1,6 @@
+{
+  "intro": "Intro",
+  "authentication": "Authentication",
+  "versioning": "Versioning",
+  "api-reference": "API Reference"
+}

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

@@ -0,0 +1,6 @@
+---
+title: 'API Reference'
+description: 'Reference documentation for the Documenso public API.'
+---
+
+# API Reference

apps/documentation/pages/public-api/authentication.mdx

@@ -0,0 +1,67 @@
+---
+title: 'API Authentication'
+description: 'Learn how to create a Documenso API key and authenticate your API requests.'
+---
+
+# API Authentication
+
+Documenso uses API keys for authentication. An API key is a unique token that is generated for each client. The client must provide the key whenever it makes an API call. This way, Documenso can identify the clients making the requests and authorize their access to the API.
+
+## Creating an API Key
+
+To create an API key, navigate to the user settings page. Click on your avatar in the top right corner of the dashboard and select "**[User settings](https://app.documenso.com/settings)**" from the dropdown menu.
+
+![A screenshot of the Documenso's dashboard that shows the dropdown menu when you click on your user avatar](/public-api-images/documenso-user-dropdown-menu.webp)
+
+Once you're on the user settings page, navigate to the "**[API Tokens](https://app.documenso.com/settings/tokens)**" tab. The "API Token" page lists your existing keys and enables you to create new ones.
+
+![A screenshot of the Documenso's user settings page that shows the API Tokens page](/public-api-images/api-tokens-page-documenso.webp)
+
+To create a new API key, you must:
+
+- Choose a name (e.g. "zapier-key")
+- we recommend using a descriptive name that helps you quickly identify the key and its purpose
+- Choose an expiration date
+- you can set the key to never expire or choose when to become invalid: 7 days, 1 month, 3 months, 6 months, or 1 year
+
+After providing the required information, click the "Create token" button to generate the API key.
+
+![A screenshot of the newly created API token in the Documenso dashboard](/public-api-images/documenso-api-key-blurred.webp)
+
+Once you've created the token, Documenso will display the key on the screen. Make sure to copy the key and store it securely. You won't be able to see the key again once you refresh/leave the page.
+
+## Using the API Key
+
+To authenticate your API requests, you must include the API key in the `Authorization` request header. The format is `Authorization: api_xxxxxxxxxxxxxxxx`.
+
+Here's a sample API request using cURL:
+
+```bash
+curl --location 'https://app.documenso.com/api/v1/documents?page=1&perPage=1' \
+--header 'Authorization: api_xxxxxxxxxxxxxxxx'
+```
+
+Here's a sample response from the API based on the above cURL request:
+
+```json
+{
+  "documents": [
+    {
+      "id": 11,
+      "userId": 2,
+      "teamId": null,
+      "title": "documenso",
+      "status": "PENDING",
+      "documentDataId": "ab2ecm1npk11rt5sp398waf7h",
+      "createdAt": "2024-04-25T11:05:18.420Z",
+      "updatedAt": "2024-04-25T11:05:36.328Z",
+      "completedAt": null
+    }
+  ],
+  "totalPages": 1
+}
+```
+
+![A screenshot of a cURL request to the Documenso public API with the API key in the Authorization header](/public-api-images/documenso-api-authorization.webp)
+
+The API key has access to your account and all its resources. Please keep it secure and do not share it with others. If you suspect that your key has been compromised, you can revoke it from the API Tokens page in your user settings.

apps/documentation/pages/public-api/intro.mdx

@@ -0,0 +1,22 @@
+---
+title: 'Public API'
+description: 'Learn how to interact with your documents programmatically using the Documenso public API.'
+---
+
+# Public API
+
+Documenso provides a public REST API that enables you to interact with your documents programmatically. The API exposes various HTTP endpoints that allow you to perform operations such as:
+
+- retrieving, uploading, deleting, and sending documents for signing
+- creating, updating, and deleting recipients
+- creating, updating, and deleting document fields
+
+The documentation walks you through creating API keys and using them to authenticate your API requests. You'll also learn about the available endpoints, request and response formats, and how to use the API.
+
+## Swagger Documentation
+
+There is also the [Swagger documentation](https://app.documenso.com/api/v1/openapi) available, which provides information about the API endpoints, request parameters, response formats, and authentication methods.
+
+## Availability
+
+The API is available to individual users and teams.

apps/documentation/pages/public-api/versioning.mdx

@@ -0,0 +1,18 @@
+---
+title: 'API Versioning'
+description: 'Versioning information for the Documenso public API.'
+---
+
+import { Callout } from 'nextra/components';
+
+# API Versioning
+
+Documenso uses API versioning to manage changes to the public API. This allows us to introduce new features, fix bugs, and make other changes without breaking existing integrations.
+
+<Callout type="info">The current version of the API is `v1`.</Callout>
+
+The API version is specified in the URL. For example, the base URL for the `v1` API is `https://app.documenso.com/api/v1`.
+
+We may make changes to the API without incrementing the version number. We will always try to avoid breaking changes, but in some cases, it may be necessary to make changes that are not backward compatible. In these cases, we will increment the version number and provide information about the changes in the release notes.
+
+Also, we may deprecate certain features or endpoints in the API. When we deprecate a feature or endpoint, we will provide information about the deprecation in the release notes and give a timeline for when the feature or endpoint will be removed.

apps/documentation/pages/webhooks/_meta.json

@@ -0,0 +1,8 @@
+{
+  "intro": {
+    "title": "Get started",
+    "theme": {
+      "sidebar": false
+    }
+  }
+}

apps/documentation/pages/webhooks/intro.mdx

@@ -0,0 +1,350 @@
+---
+title: 'Webhooks'
+description: 'Learn how to use webhooks to receive real-time notifications about your documents.'
+---
+
+# Webhooks
+
+Webhooks are HTTP callbacks that are triggered by specific events. When the user subscribes to a specific event and that event occurs, the webhook makes an HTTP request to the URL provided by the user. The request can be a simple notification or can carry a payload with more information about the event.
+
+Some of the common use cases for webhooks include:
+
+1. **Real-time Data Syncing**: Webhooks provide a way to keep data in sync across different platforms. For example, you can keep your system up-to-date with your Documenso documents by subscribing to events like document creation or signing.
+2. **Automating Workflows**: They can trigger automated workflows that start when an event occurs. For example, the webhook could trigger an email when a document is signed.
+3. **Integrating Third-Party Services**: Webhooks can be used to integrate Documenso with third-party services. For example, you could use a webhook to send data to a CRM system when a document is signed.
+
+Documenso supports Webhooks and allows you to subscribe to the following events:
+
+- `document.created`
+- `document.sent`
+- `document.opened`
+- `document.signed`
+- `document.completed`
+
+## Create a webhook subscription
+
+You can create a webhook subscription from the user settings page. Click on your avatar in the top right corner of the dashboard and select "**[User settings](https://app.documenso.com/settings)**" from the dropdown menu.
+
+![A screenshot of the Documenso's dashboard that shows the dropdown menu when you click on your user avatar](/webhook-images/dashboard-user-dropdown-menu.webp)
+
+Then, navigate to the "**[Webhooks](https://app.documenso.com/settings/webhooks)**" tab, where you can see a list of your existing webhooks and create new ones.
+
+![A screenshot of the Documenso's user settings page that shows the Webhooks tab and the Create Webhook button](/webhook-images/webhooks-settings-page.webp)
+
+Clicking on the "**Create Webhook**" button opens a modal to create a new webhook subscription.
+
+To create a new webhook subscription, you need to provide the following information:
+
+- Enter the webhook URL that will receive the event payload.
+- Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`.
+- Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Signature` header of the request.
+
+![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/webhooks-page-create-webhook-modal.webp)
+
+After you have filled in the required information, click on the "**Create Webhook**" button to save your subscription.
+
+The screenshot below illustrates a newly created webhook subscription.
+
+![A screenshot of the Documenso's user settings page that shows the newly created webhook subscription](/webhook-images/webhooks-page.webp)
+
+You can edit or delete your webhook subscriptions by clicking the "**Edit**" or "**Delete**" buttons next to the webhook.
+
+## Webhook fields
+
+The payload sent to the webhook URL contains the following fields:
+
+| Field                                        | Type      | Description                                          |
+| -------------------------------------------- | --------- | ---------------------------------------------------- |
+| `event`                                      | string    | The type of event that triggered the webhook.        |
+| `payload.id`                                 | number    | The id of the document.                              |
+| `payload.userId`                             | number    | The id of the user who owns the document.            |
+| `payload.authOptions`                        | json?     | Authentication options for the document.             |
+| `payload.formValues`                         | json?     | Form values for the document.                        |
+| `payload.title`                              | string    | The name of the document.                            |
+| `payload.status`                             | string    | The current status of the document.                  |
+| `payload.documentDataId`                     | string    | The identifier for the document data.                |
+| `payload.createdAt`                          | datetime  | The creation date and time of the document.          |
+| `payload.updatedAt`                          | datetime  | The last update date and time of the document.       |
+| `payload.completedAt`                        | datetime? | The completion date and time of the document.        |
+| `payload.deletedAt`                          | datetime? | The deletion date and time of the document.          |
+| `payload.teamId`                             | number?   | The id of the team.                                  |
+| `payload.documentData.id`                    | string    | The id of the document data.                         |
+| `payload.documentData.type`                  | string    | The type of the document data.                       |
+| `payload.documentData.data`                  | string    | The data of the document.                            |
+| `payload.documentData.initialData`           | string    | The initial data of the document.                    |
+| `payload.Recipient[].id`                     | number    | The id of the recipient.                             |
+| `payload.Recipient[].documentId`             | number?   | The id the document associated with the recipient.   |
+| `payload.Recipient[].templateId`             | number?   | The template identifier for the recipient.           |
+| `payload.Recipient[].email`                  | string    | The email address of the recipient.                  |
+| `payload.Recipient[].name`                   | string    | The name of the recipient.                           |
+| `payload.Recipient[].token`                  | string    | The token associated with the recipient.             |
+| `payload.Recipient[].expired`                | datetime? | The expiration status of the recipient.              |
+| `payload.Recipient[].signedAt`               | datetime? | The date and time the recipient signed the document. |
+| `payload.Recipient[].authOptions.accessAuth` | json?     | Access authentication options.                       |
+| `payload.Recipient[].authOptions.actionAuth` | json?     | Action authentication options.                       |
+| `payload.Recipient[].role`                   | string    | The role of the recipient.                           |
+| `payload.Recipient[].readStatus`             | string    | The read status of the document by the recipient.    |
+| `payload.Recipient[].signingStatus`          | string    | The signing status of the recipient.                 |
+| `payload.Recipient[].sendStatus`             | string    | The send status of the document to the recipient.    |
+| `createdAt`                                  | datetime  | The creation date and time of the webhook event.     |
+| `webhookEndpoint`                            | string    | The endpoint URL where the webhook is sent.          |
+
+## Webhook event payload example
+
+When an event that you have subscribed to occurs, Documenso will send a POST request to the specified webhook URL with a payload containing information about the event.
+
+## Example payloads
+
+Below are examples of the payloads that are sent for each of the supported events. The payloads are sent as JSON data in the body of the POST request.
+
+Example payload for the `document.created` event:
+
+```json
+{
+  "event": "DOCUMENT_CREATED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "DRAFT",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:44:43.341Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null
+  },
+  "createdAt": "2024-04-22T11:44:44.779Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.sent` event:
+
+```json
+{
+  "event": "DOCUMENT_SENT",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "PENDING",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:48:07.569Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null,
+    "Recipient": [
+      {
+        "id": 52,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer2@documenso.com",
+        "name": "Signer 2",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "expired": null,
+        "signedAt": null,
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "VIEWER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      },
+      {
+        "id": 53,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer1@documenso.com",
+        "name": "Signer 1",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "expired": null,
+        "signedAt": null,
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:48:07.945Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.opened` event:
+
+```json
+{
+  "event": "DOCUMENT_OPENED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "PENDING",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:48:07.569Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null,
+    "Recipient": [
+      {
+        "id": 52,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer2@documenso.com",
+        "name": "Signer 2",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "expired": null,
+        "signedAt": null,
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "VIEWER",
+        "readStatus": "OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ],
+    "documentData": {
+      "id": "hs8qz1ktr9204jn7mg6c5dxy0",
+      "type": "S3_PATH",
+      "data": "9753/xzqrshtlpokm/documenso.pdf",
+      "initialData": "9753/xzqrshtlpokm/documenso.pdf"
+    }
+  },
+  "createdAt": "2024-04-22T11:50:26.174Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.signed` event:
+
+```json
+{
+  "event": "DOCUMENT_SIGNED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "COMPLETED",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:52:05.708Z",
+    "completedAt": "2024-04-22T11:52:05.707Z",
+    "deletedAt": null,
+    "teamId": null,
+    "Recipient": [
+      {
+        "id": 51,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer1@documenso.com",
+        "name": "Signer 1",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "expired": null,
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "SIGNER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:52:18.577Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.completed` event:
+
+```json
+{
+  "event": "DOCUMENT_COMPLETED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "COMPLETED",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:52:05.708Z",
+    "completedAt": "2024-04-22T11:52:05.707Z",
+    "deletedAt": null,
+    "teamId": null,
+    "documentData": {
+      "id": "hs8qz1ktr9204jn7mg6c5dxy0",
+      "type": "S3_PATH",
+      "data": "bk9p1h7x0s3m/documenso-signed.pdf",
+      "initialData": "9753/xzqrshtlpokm/documenso.pdf"
+    },
+    "Recipient": [
+      {
+        "id": 50,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer2@documenso.com",
+        "name": "Signer 2",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "expired": null,
+        "signedAt": "2024-04-22T11:51:10.055Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "VIEWER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      },
+      {
+        "id": 51,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer1@documenso.com",
+        "name": "Signer 1",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "expired": null,
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "SIGNER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:52:18.277Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+## Availability
+
+Webhooks are available to individual users and teams.

apps/documentation/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/documentation/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/documentation/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

apps/documentation/theme.config.tsx

@@ -0,0 +1,49 @@
+import { useConfig } from 'nextra-theme-docs';
+import type { DocsThemeConfig } from 'nextra-theme-docs';
+
+const themeConfig: DocsThemeConfig = {
+  logo: <span>Documenso Docs</span>,
+  head: function useHead() {
+    const config = useConfig<{ title?: string; description?: string }>();
+
+    const title = `${config.frontMatter.title} | Documenso Docs` || 'Documenso Docs';
+    const description = config.frontMatter.description || 'The official Documenso documentation';
+
+    return (
+      <>
+        <meta httpEquiv="Content-Language" content="en" />
+        <meta name="title" content={title} />
+        <meta name="og:title" content={title} />
+        <meta name="description" content={description} />
+        <meta name="og:description" content={description} />
+      </>
+    );
+  },
+  project: {
+    link: 'https://documen.so/github',
+  },
+  chat: {
+    link: 'https://documen.so/discord',
+  },
+  docsRepositoryBase: 'https://github.com/documenso/documenso/tree/main/apps/documentation',
+  footer: {
+    text: (
+      <span>
+        {new Date().getFullYear()} ©{' '}
+        <a href="https://documen.so" target="_blank">
+          Documenso
+        </a>
+        .
+      </span>
+    ),
+  },
+  primaryHue: 100,
+  primarySaturation: 48.47,
+  useNextSeoProps() {
+    return {
+      titleTemplate: '%s | Documenso Docs',
+    };
+  },
+};
+
+export default themeConfig;

apps/documentation/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/marketing/src/api/claim-plan/fetcher.ts

@@ -1,4 +1,5 @@
-import { TClaimPlanRequestSchema, ZClaimPlanResponseSchema } from './types';
+import type { TClaimPlanRequestSchema } from './types';
+import { ZClaimPlanResponseSchema } from './types';
 
 export const claimPlan = async ({
   name,

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -55,6 +55,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
             <Bar
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
               dataKey={metricKey as string}
               maxBarSize={60}
               fill="hsl(var(--primary))"

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -13,6 +13,7 @@ export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
 export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
   const formattedData = data.map((item) => ({
     amount: Number(item.amount),
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     date: formatMonth(item.date as string),
   }));
 

apps/marketing/src/app/(marketing)/open/metric-card.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 

apps/marketing/src/app/(marketing)/open/salary-bands.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

apps/marketing/src/app/(marketing)/oss-friends/container.tsx

@@ -2,13 +2,14 @@
 
 import Link from 'next/link';
 
-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
 
-import { TOSSFriendsSchema } from './schema';
+import type { TOSSFriendsSchema } from './schema';
 
 const ContainerVariants: Variants = {
   initial: {

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -158,6 +158,7 @@ export const SinglePlayerClient = () => {
     expired: null,
     signedAt: null,
     readStatus: 'OPENED',
+    documentDeletedAt: null,
     signingStatus: 'NOT_SIGNED',
     sendStatus: 'NOT_SENT',
     role: 'SIGNER',

apps/marketing/src/app/robots.ts

@@ -1,4 +1,4 @@
-import { MetadataRoute } from 'next';
+import type { MetadataRoute } from 'next';
 
 import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
 

apps/marketing/src/app/sitemap.ts

@@ -1,4 +1,4 @@
-import { MetadataRoute } from 'next';
+import type { MetadataRoute } from 'next';
 
 import { allBlogPosts, allGenericPages } from 'contentlayer/generated';
 

apps/marketing/src/components/(marketing)/footer.tsx

@@ -13,7 +13,7 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
-import { StatusWidgetContainer } from './status-widget-container';
+// import { StatusWidgetContainer } from './status-widget-container';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -65,9 +65,9 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             ))}
           </div>
 
-          <div className="mt-6">
+          {/* <div className="mt-6">
             <StatusWidgetContainer />
-          </div>
+          </div> */}
         </div>
 
         <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">

apps/marketing/src/components/(marketing)/hero.tsx

@@ -96,7 +96,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           variants={HeroTitleVariants}
           initial="initial"
           animate="animate"
-          className="text-center text-4xl font-bold leading-tight tracking-tight lg:text-[64px]"
+          className="text-center text-4xl font-bold leading-tight tracking-tight md:text-[48px] lg:text-[64px]"
         >
           Document signing,
           <span className="block" /> finally open source.

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 

apps/marketing/src/components/(marketing)/status-widget-container.tsx

@@ -6,7 +6,7 @@ import { StatusWidget } from './status-widget';
 export function StatusWidgetContainer() {
   return (
     <Suspense fallback={<StatusWidgetFallback />}>
-      <StatusWidget />
+      <StatusWidget slug="documenso-status" />
     </Suspense>
   );
 }

apps/marketing/src/components/(marketing)/status-widget.tsx

@@ -1,7 +1,6 @@
-import { use, useMemo } from 'react';
+import { memo, use } from 'react';
 
-import type { Status } from '@openstatus/react';
-import { getStatus } from '@openstatus/react';
+import { type Status, getStatus } from '@openstatus/react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -45,9 +44,8 @@ const getStatusLevel = (level: Status) => {
   }[level];
 };
 
-export function StatusWidget() {
-  const getStatusMemoized = useMemo(async () => getStatus('documenso-status'), []);
-  const { status } = use(getStatusMemoized);
+export const StatusWidget = memo(function StatusWidget({ slug }: { slug: string }) {
+  const { status } = use(getStatus(slug));
   const level = getStatusLevel(status);
 
   return (
@@ -72,4 +70,4 @@ export function StatusWidget() {
       </span>
     </a>
   );
-}
+});

apps/marketing/src/components/(marketing)/widget.tsx

@@ -346,7 +346,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                   {signatureText && (
                     <p
                       className={cn(
-                        'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
+                        'text-foreground truncate text-4xl font-semibold [font-family:var(--font-caveat)]',
                       )}
                     >
                       {signatureText}
@@ -360,7 +360,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                 >
                   <Input
                     id="signatureText"
-                    className="text-foreground placeholder:text-muted-foreground border-none p-0 text-sm focus-visible:ring-0"
+                    className="text-foreground placeholder:text-muted-foreground truncate border-none p-0 text-sm focus-visible:ring-0"
                     placeholder="Draw or type name here"
                     disabled={isSubmitting}
                     {...register('signatureText', {

apps/marketing/src/components/form/form-error-message.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { FieldError } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
 
 import { cn } from '@documenso/ui/lib/utils';
 

apps/marketing/src/components/ui/background.tsx

@@ -1,4 +1,4 @@
-import { SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
 
 export type BackgroundProps = Omit<SVGAttributes<SVGElement>, 'viewBox'>;
 

apps/marketing/src/providers/next-theme.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { ThemeProviderProps } from 'next-themes/dist/types';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx

@@ -4,13 +4,22 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { Copy, Download, Edit, Loader, MoreHorizontal, Share, Trash2 } from 'lucide-react';
+import {
+  Copy,
+  Download,
+  Edit,
+  Loader,
+  MoreHorizontal,
+  ScrollTextIcon,
+  Share,
+  Trash2,
+} from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, TeamEmail, User } from '@documenso/prisma/client';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@@ -32,7 +41,7 @@ export type DocumentPageViewDropdownProps = {
     Recipient: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail: TeamEmail | null };
 };
 
 export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
@@ -50,9 +59,10 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
 
   const isOwner = document.User.id === session.user.id;
   const isDraft = document.status === DocumentStatus.DRAFT;
+  const isDeleted = document.deletedAt !== null;
   const isComplete = document.status === DocumentStatus.COMPLETED;
-  const isDocumentDeletable = isOwner;
   const isCurrentTeamDocument = team && document.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
 
@@ -106,12 +116,22 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
           </DropdownMenuItem>
         )}
 
+        <DropdownMenuItem asChild>
+          <Link href={`${documentsPath}/${document.id}/logs`}>
+            <ScrollTextIcon className="mr-2 h-4 w-4" />
+            Audit Log
+          </Link>
+        </DropdownMenuItem>
+
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -138,15 +158,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
         />
       </DropdownMenuContent>
 
-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={document.id}
-          status={document.status}
-          documentTitle={document.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={document.id}
+        status={document.status}
+        documentTitle={document.title}
+        open={isDeleteDialogOpen}
+        canManageDocument={canManageDocument}
+        onOpenChange={setDeleteDialogOpen}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={document.id}

apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx

@@ -8,17 +8,20 @@ import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
+import { getCompletedFieldsForDocument } from '@documenso/lib/server-only/field/get-completed-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { Team } from '@documenso/prisma/client';
+import type { Team, TeamEmail } from '@documenso/prisma/client';
+import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentHistorySheet } from '~/components/document/document-history-sheet';
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import {
   DocumentStatus as DocumentStatusComponent,
   FRIENDLY_STATUS_MAP,
@@ -34,7 +37,7 @@ export type DocumentPageViewProps = {
   params: {
     id: string;
   };
-  team?: Team;
+  team?: Team & { teamEmail: TeamEmail | null };
 };
 
 export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
@@ -83,11 +86,16 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     documentMeta.password = securePassword;
   }
 
-  const recipients = await getRecipientsForDocument({
-    documentId,
-    teamId: team?.id,
-    userId: user.id,
-  });
+  const [recipients, completedFields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      teamId: team?.id,
+      userId: user.id,
+    }),
+    getCompletedFieldsForDocument({
+      documentId,
+    }),
+  ]);
 
   const documentWithRecipients = {
     ...document,
@@ -118,11 +126,17 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
               <div className="text-muted-foreground flex items-center">
                 <Users2 className="mr-2 h-5 w-5" />
 
-                <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
                   <span>{recipients.length} Recipient(s)</span>
                 </StackAvatarsWithTooltip>
               </div>
             )}
+
+            {document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
           </div>
         </div>
 
@@ -148,6 +162,13 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
           </CardContent>
         </Card>
 
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields
+            fields={completedFields}
+            documentMeta={document.documentMeta || undefined}
+          />
+        )}
+
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
           <div className="space-y-6">
             <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">

apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx

@@ -92,7 +92,11 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+            <StackAvatarsWithTooltip
+              recipients={recipients}
+              documentStatus={document.status}
+              position="bottom"
+            >
               <span>{recipients.length} Recipient(s)</span>
             </StackAvatarsWithTooltip>
           </div>

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx

@@ -133,7 +133,11 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         </div>
 
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-          <DownloadCertificateButton className="mr-2" documentId={document.id} />
+          <DownloadCertificateButton
+            className="mr-2"
+            documentId={document.id}
+            documentStatus={document.status}
+          />
 
           <DownloadAuditLogButton documentId={document.id} />
         </div>

apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx

@@ -2,6 +2,7 @@
 
 import { DownloadIcon } from 'lucide-react';
 
+import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -10,11 +11,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type DownloadCertificateButtonProps = {
   className?: string;
   documentId: number;
+  documentStatus: DocumentStatus;
 };
 
 export const DownloadCertificateButton = ({
   className,
   documentId,
+  documentStatus,
 }: DownloadCertificateButtonProps) => {
   const { toast } = useToast();
 
@@ -69,6 +72,7 @@ export const DownloadCertificateButton = ({
       className={cn('w-full sm:w-auto', className)}
       loading={isLoading}
       variant="outline"
+      disabled={documentStatus !== DocumentStatus.COMPLETED}
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -15,7 +15,6 @@ import {
   Pencil,
   Share,
   Trash2,
-  XCircle,
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -45,7 +44,7 @@ export type DataTableActionDropdownProps = {
     Recipient: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };
 
 export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
@@ -67,8 +66,8 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
   // const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner;
   const isCurrentTeamDocument = team && row.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
 
@@ -107,14 +106,14 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger data-testid="document-table-action-btn">
         <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        {recipient && recipient?.role !== RecipientRole.CC && (
+        {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
             <Link href={`/sign/${recipient?.token}`}>
               {recipient?.role === RecipientRole.VIEWER && (
@@ -141,7 +140,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+        <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
@@ -158,14 +157,18 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        {/* No point displaying this if there's no functionality. */}
+        {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />
           Void
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail)}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          {canManageDocument ? 'Delete' : 'Hide'}
         </DropdownMenuItem>
 
         <DropdownMenuLabel>Share</DropdownMenuLabel>
@@ -186,16 +189,16 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         />
       </DropdownMenuContent>
 
-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={row.id}
-          status={row.status}
-          documentTitle={row.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-          teamId={team?.id}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={row.id}
+        status={row.status}
+        documentTitle={row.title}
+        open={isDeleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        teamId={team?.id}
+        canManageDocument={canManageDocument}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={row.id}

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -29,7 +29,7 @@ export type DocumentsDataTableProps = {
     }
   >;
   showSenderColumn?: boolean;
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };
 
 export const DocumentsDataTable = ({
@@ -76,7 +76,12 @@ export const DocumentsDataTable = ({
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
+            cell: ({ row }) => (
+              <StackAvatarsWithTooltip
+                recipients={row.original.Recipient}
+                documentStatus={row.original.status}
+              />
+            ),
           },
           {
             header: 'Status',

apps/web/src/app/(dashboard)/documents/delete-document-dialog.tsx

@@ -2,8 +2,11 @@ import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { match } from 'ts-pattern';
+
 import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -23,6 +26,7 @@ type DeleteDocumentDialogProps = {
   status: DocumentStatus;
   documentTitle: string;
   teamId?: number;
+  canManageDocument: boolean;
 };
 
 export const DeleteDocumentDialog = ({
@@ -32,6 +36,7 @@ export const DeleteDocumentDialog = ({
   status,
   documentTitle,
   teamId,
+  canManageDocument,
 }: DeleteDocumentDialogProps) => {
   const router = useRouter();
 
@@ -83,47 +88,82 @@ export const DeleteDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you sure you want to delete "{documentTitle}"?</DialogTitle>
+          <DialogTitle>Are you sure?</DialogTitle>
 
           <DialogDescription>
-            Please note that this action is irreversible. Once confirmed, your document will be
-            permanently deleted.
+            You are about to {canManageDocument ? 'delete' : 'hide'}{' '}
+            <strong>"{documentTitle}"</strong>
           </DialogDescription>
         </DialogHeader>
 
-        {status !== DocumentStatus.DRAFT && (
-          <div className="mt-4">
-            <Input
-              type="text"
-              value={inputValue}
-              onChange={onInputChange}
-              placeholder="Type 'delete' to confirm"
-            />
-          </div>
+        {canManageDocument ? (
+          <Alert variant="warning" className="-mt-1">
+            {match(status)
+              .with(DocumentStatus.DRAFT, () => (
+                <AlertDescription>
+                  Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                  this document will be permanently deleted.
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.PENDING, () => (
+                <AlertDescription>
+                  <p>
+                    Please note that this action is <strong>irreversible</strong>.
+                  </p>
+
+                  <p className="mt-1">Once confirmed, the following will occur:</p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>Document will be permanently deleted</li>
+                    <li>Document signing process will be cancelled</li>
+                    <li>All inserted signatures will be voided</li>
+                    <li>All recipients will be notified</li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.COMPLETED, () => (
+                <AlertDescription>
+                  <p>By deleting this document, the following will occur:</p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>The document will be hidden from your account</li>
+                    <li>Recipients will still retain their copy of the document</li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .exhaustive()}
+          </Alert>
+        ) : (
+          <Alert variant="warning" className="-mt-1">
+            <AlertDescription>
+              Please contact support if you would like to revert this action.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {status !== DocumentStatus.DRAFT && canManageDocument && (
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={onInputChange}
+            placeholder="Type 'delete' to confirm"
+          />
         )}
 
         <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
 
-            <Button
-              type="button"
-              loading={isLoading}
-              onClick={onDelete}
-              disabled={!isDeleteEnabled}
-              variant="destructive"
-              className="flex-1"
-            >
-              Delete
-            </Button>
-          </div>
+          <Button
+            type="button"
+            loading={isLoading}
+            onClick={onDelete}
+            disabled={!isDeleteEnabled && canManageDocument}
+            variant="destructive"
+          >
+            {canManageDocument ? 'Delete' : 'Hide'}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/web/src/app/(dashboard)/documents/documents-page-view.tsx

@@ -41,7 +41,9 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
   const senderIds = parseToIntegerArray(searchParams.senderIds ?? '');
-  const currentTeam = team ? { id: team.id, url: team.url } : undefined;
+  const currentTeam = team
+    ? { id: team.id, url: team.url, teamEmail: team.teamEmail?.email }
+    : undefined;
 
   const getStatOptions: GetStatsInput = {
     user,

apps/web/src/app/(dashboard)/documents/empty-state.tsx

@@ -37,7 +37,10 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
     }));
 
   return (
-    <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+    <div
+      className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4"
+      data-testid="empty-document-state"
+    >
       <Icon className="h-12 w-12" strokeWidth={1.5} />
 
       <div className="text-center">

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -18,7 +18,10 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -34,7 +37,6 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZCreateTemplateFormSchema = z.object({
@@ -61,8 +63,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
     resolver: zodResolver(ZCreateTemplateFormSchema),
   });
 
-  const { mutateAsync: createTemplate, isLoading: isCreatingTemplate } =
-    trpc.template.createTemplate.useMutation();
+  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
   const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
   const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
@@ -140,6 +141,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
   useEffect(() => {
     if (!showNewTemplateDialog) {
       form.reset();
+      setUploadedFile(null);
     }
   }, [form, showNewTemplateDialog]);
 
@@ -154,20 +156,23 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
       <DialogContent className="w-full max-w-xl">
         <DialogHeader>
-          <DialogTitle className="mb-4">New Template</DialogTitle>
+          <DialogTitle>New Template</DialogTitle>
+          <DialogDescription>
+            Templates allow you to quickly generate documents with pre-filled recipients and fields.
+          </DialogDescription>
         </DialogHeader>
 
-        <div>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="flex flex-col gap-y-4">
               <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Name your template</FormLabel>
+                    <FormLabel>Template name</FormLabel>
                     <FormControl>
-                      <Input id="email" type="text" className="bg-background mt-1.5" {...field} />
+                      <Input {...field} />
                     </FormControl>
                     <FormDescription>
                       <span className="text-muted-foreground text-xs">
@@ -180,55 +185,57 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
                 )}
               />
 
-              <div>
-                <Label htmlFor="template">Upload a Document</Label>
+              <div className="mt-1.5">
+                {uploadedFile ? (
+                  <Card gradient className="h-[40vh]">
+                    <CardContent className="flex h-full flex-col items-center justify-center p-2">
+                      <button
+                        onClick={() => resetForm()}
+                        title="Remove Template"
+                        className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+                      >
+                        <X className="h-6 w-6" />
+                        <span className="sr-only">Remove Template</span>
+                      </button>
 
-                <div className="my-3">
-                  {uploadedFile ? (
-                    <Card gradient className="h-[40vh]">
-                      <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                        <button
-                          onClick={() => resetForm()}
-                          title="Remove Template"
-                          className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
-                        >
-                          <X className="h-6 w-6" />
-                          <span className="sr-only">Remove Template</span>
-                        </button>
+                      <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                      </div>
 
-                        <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                        </div>
+                      <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
+                        Uploaded Document
+                      </p>
 
-                        <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
-                          Uploaded Document
-                        </p>
-
-                        <span className="text-muted-foreground/80 mt-1 text-sm">
-                          {uploadedFile.file.name}
-                        </span>
-                      </CardContent>
-                    </Card>
-                  ) : (
-                    <DocumentDropzone
-                      className="mt-1.5 h-[40vh]"
-                      onDrop={onFileDrop}
-                      type="template"
-                    />
-                  )}
-                </div>
+                      <span className="text-muted-foreground/80 mt-1 text-sm">
+                        {uploadedFile.file.name}
+                      </span>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
+                )}
               </div>
 
-              <div className="flex w-full justify-end">
-                <Button loading={isCreatingTemplate} type="submit">
-                  Create Template
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Cancel
+                  </Button>
+                </DialogClose>
+
+                <Button
+                  loading={form.formState.isSubmitting}
+                  disabled={!uploadedFile}
+                  type="submit"
+                >
+                  Create template
                 </Button>
-              </div>
-            </form>
-          </Form>
-        </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type ClaimAccountProps = {
+  defaultName: string;
+  defaultEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const ZClaimAccountFormSchema = z
+  .object({
+    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: 'Password should not be common or based on personal information',
+      path: ['password'],
+    },
+  );
+
+export type TClaimAccountFormSchema = z.infer<typeof ZClaimAccountFormSchema>;
+
+export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) => {
+  const analytics = useAnalytics();
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { mutateAsync: signup } = trpc.auth.signup.useMutation();
+
+  const form = useForm<TClaimAccountFormSchema>({
+    values: {
+      name: defaultName ?? '',
+      email: defaultEmail,
+      password: '',
+    },
+    resolver: zodResolver(ZClaimAccountFormSchema),
+  });
+
+  const onFormSubmit = async ({ name, email, password }: TClaimAccountFormSchema) => {
+    try {
+      await signup({ name, email, password });
+
+      router.push(`/unverified-account`);
+
+      toast({
+        title: 'Registration Successful',
+        description:
+          'You have successfully registered. Please verify your account by clicking on the link you received in the email.',
+        duration: 5000,
+      });
+
+      analytics.capture('App: User Claim Account', {
+        email,
+        timestamp: new Date().toISOString(),
+      });
+    } catch (error) {
+      if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: error.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          description:
+            'We encountered an unknown error while attempting to sign you up. Please try again later.',
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className="mt-2 w-full">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <fieldset disabled={form.formState.isSubmitting} className="mt-4">
+            <FormField
+              name="name"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter your name" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="email"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className="mt-4">
+                  <FormLabel>Email address</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter your email" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="password"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className="mt-4">
+                  <FormLabel>Set a password</FormLabel>
+                  <FormControl>
+                    <PasswordInput {...field} placeholder="Pick a password" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button type="submit" className="mt-6 w-full" loading={form.formState.isSubmitting}>
+              Claim account
+            </Button>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
 
 import { CheckCircle2, Clock8 } from 'lucide-react';
 import { getServerSession } from 'next-auth';
+import { env } from 'next-runtime-env';
 import { match } from 'ts-pattern';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
@@ -16,10 +17,13 @@ import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/clie
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
 
 import { truncateTitle } from '~/helpers/truncate-title';
 
 import { SigningAuthPageView } from '../signing-auth-page';
+import { ClaimAccount } from './claim-account';
 import { DocumentPreviewButton } from './document-preview-button';
 
 export type CompletedSigningPageProps = {
@@ -31,6 +35,8 @@ export type CompletedSigningPageProps = {
 export default async function CompletedSigningPage({
   params: { token },
 }: CompletedSigningPageProps) {
+  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+
   if (!token) {
     return notFound();
   }
@@ -79,96 +85,120 @@ export default async function CompletedSigningPage({
 
   const sessionData = await getServerSession();
   const isLoggedIn = !!sessionData?.user;
+  const canSignUp = !isLoggedIn && NEXT_PUBLIC_DISABLE_SIGNUP !== 'true';
 
   return (
-    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44">
-      {/* Card with recipient */}
-      <SigningCard3D
-        name={recipientName}
-        signature={signatures.at(0)}
-        signingCelebrationImage={signingCelebration}
-      />
+    <div
+      className={cn(
+        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
+      )}
+    >
+      <div
+        className={cn('relative mt-6 flex w-full flex-col items-center justify-center', {
+          'mt-0 flex-col divide-y overflow-hidden pt-6 md:pt-16 lg:flex-row lg:divide-x lg:divide-y-0 lg:pt-20 xl:pt-24':
+            canSignUp,
+        })}
+      >
+        <div
+          className={cn('flex flex-col items-center', {
+            'mb-8 p-4 md:mb-0 md:p-12': canSignUp,
+          })}
+        >
+          <Badge variant="neutral" size="default" className="mb-6 rounded-xl border bg-transparent">
+            {truncatedTitle}
+          </Badge>
 
-      <div className="relative mt-6 flex w-full flex-col items-center">
-        {match({ status: document.status, deletedAt: document.deletedAt })
-          .with({ status: DocumentStatus.COMPLETED }, () => (
-            <div className="text-documenso-700 flex items-center text-center">
-              <CheckCircle2 className="mr-2 h-5 w-5" />
-              <span className="text-sm">Everyone has signed</span>
-            </div>
-          ))
-          .with({ deletedAt: null }, () => (
-            <div className="flex items-center text-center text-blue-600">
-              <Clock8 className="mr-2 h-5 w-5" />
-              <span className="text-sm">Waiting for others to sign</span>
-            </div>
-          ))
-          .otherwise(() => (
-            <div className="flex items-center text-center text-red-600">
-              <Clock8 className="mr-2 h-5 w-5" />
-              <span className="text-sm">Document no longer available to sign</span>
-            </div>
-          ))}
+          {/* Card with recipient */}
+          <SigningCard3D
+            name={recipientName}
+            signature={signatures.at(0)}
+            signingCelebrationImage={signingCelebration}
+          />
 
-        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-          You have
-          {recipient.role === RecipientRole.SIGNER && ' signed '}
-          {recipient.role === RecipientRole.VIEWER && ' viewed '}
-          {recipient.role === RecipientRole.APPROVER && ' approved '}
-          <span className="mt-1.5 block">"{truncatedTitle}"</span>
-        </h2>
+          <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            Document
+            {recipient.role === RecipientRole.SIGNER && ' Signed '}
+            {recipient.role === RecipientRole.VIEWER && ' Viewed '}
+            {recipient.role === RecipientRole.APPROVER && ' Approved '}
+          </h2>
 
-        {match({ status: document.status, deletedAt: document.deletedAt })
-          .with({ status: DocumentStatus.COMPLETED }, () => (
-            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-              Everyone has signed! You will receive an Email copy of the signed document.
-            </p>
-          ))
-          .with({ deletedAt: null }, () => (
-            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-              You will receive an Email copy of the signed document once everyone has signed.
-            </p>
-          ))
-          .otherwise(() => (
-            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-              This document has been cancelled by the owner and is no longer available for others to
-              sign.
-            </p>
-          ))}
+          {match({ status: document.status, deletedAt: document.deletedAt })
+            .with({ status: DocumentStatus.COMPLETED }, () => (
+              <div className="text-documenso-700 mt-4 flex items-center text-center">
+                <CheckCircle2 className="mr-2 h-5 w-5" />
+                <span className="text-sm">Everyone has signed</span>
+              </div>
+            ))
+            .with({ deletedAt: null }, () => (
+              <div className="flex items-center mt-4 text-center text-blue-600">
+                <Clock8 className="mr-2 h-5 w-5" />
+                <span className="text-sm">Waiting for others to sign</span>
+              </div>
+            ))
+            .otherwise(() => (
+              <div className="flex items-center text-center text-red-600">
+                <Clock8 className="mr-2 h-5 w-5" />
+                <span className="text-sm">Document no longer available to sign</span>
+              </div>
+            ))}
 
-        <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-          <DocumentShareButton documentId={document.id} token={recipient.token} />
+          {match({ status: document.status, deletedAt: document.deletedAt })
+            .with({ status: DocumentStatus.COMPLETED }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                Everyone has signed! You will receive an Email copy of the signed document.
+              </p>
+            ))
+            .with({ deletedAt: null }, () => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                You will receive an Email copy of the signed document once everyone has signed.
+              </p>
+            ))
+            .otherwise(() => (
+              <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+                This document has been cancelled by the owner and is no longer available for others
+                to sign.
+              </p>
+            ))}
 
-          {document.status === DocumentStatus.COMPLETED ? (
-            <DocumentDownloadButton
-              className="flex-1"
-              fileName={document.title}
-              documentData={documentData}
-              disabled={document.status !== DocumentStatus.COMPLETED}
-            />
-          ) : (
-            <DocumentPreviewButton
-              className="text-[11px]"
-              title="Signatures will appear once the document has been completed"
-              documentData={documentData}
-            />
-          )}
+          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+            <DocumentShareButton documentId={document.id} token={recipient.token} />
+
+            {document.status === DocumentStatus.COMPLETED ? (
+              <DocumentDownloadButton
+                className="flex-1"
+                fileName={document.title}
+                documentData={documentData}
+                disabled={document.status !== DocumentStatus.COMPLETED}
+              />
+            ) : (
+              <DocumentPreviewButton
+                className="text-[11px]"
+                title="Signatures will appear once the document has been completed"
+                documentData={documentData}
+              />
+            )}
+          </div>
         </div>
 
-        {isLoggedIn ? (
+        {canSignUp && (
+          <div className={`flex max-w-xl flex-col items-center justify-center p-4 md:p-12`}>
+            <h2 className="mt-8 text-center text-xl font-semibold md:mt-0">
+              Need to sign documents?
+            </h2>
+
+            <p className="text-muted-foreground/60 mt-4 max-w-[55ch] text-center leading-normal">
+              Create your account and start using state-of-the-art document signing.
+            </p>
+
+            <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
+          </div>
+        )}
+
+        {isLoggedIn && (
           <Link href="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
             Go Back Home
           </Link>
-        ) : (
-          <p className="text-muted-foreground/60 mt-36 text-sm">
-            Want to send slick signing links like this one?{' '}
-            <Link
-              href="https://documenso.com"
-              className="text-documenso-700 hover:text-documenso-600"
-            >
-              Check out Documenso.
-            </Link>
-          </p>
         )}
       </div>
     </div>

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -6,6 +6,7 @@ import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-c
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
+import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
@@ -37,7 +38,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
 
-  const [document, fields, recipient] = await Promise.all([
+  const [document, fields, recipient, completedFields] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
       userId: user?.id,
@@ -45,9 +46,15 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
+    getCompletedFieldsForToken({ token }),
   ]);
 
-  if (!document || !document.documentData || !recipient) {
+  if (
+    !document ||
+    !document.documentData ||
+    !recipient ||
+    document.status === DocumentStatus.DRAFT
+  ) {
     return notFound();
   }
 
@@ -120,7 +127,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       signature={user?.email === recipient.email ? user.signature : undefined}
     >
       <DocumentAuthProvider document={document} recipient={recipient} user={user}>
-        <SigningPageView recipient={recipient} document={document} fields={fields} />
+        <SigningPageView
+          recipient={recipient}
+          document={document}
+          fields={fields}
+          completedFields={completedFields}
+        />
       </DocumentAuthProvider>
     </SigningProvider>
   );

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -4,12 +4,14 @@ import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-form
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import type { CompletedField } from '@documenso/lib/types/fields';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { FieldType, RecipientRole } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { truncateTitle } from '~/helpers/truncate-title';
 
 import { DateField } from './date-field';
@@ -23,9 +25,15 @@ export type SigningPageViewProps = {
   document: DocumentAndSender;
   recipient: Recipient;
   fields: Field[];
+  completedFields: CompletedField[];
 };
 
-export const SigningPageView = ({ document, recipient, fields }: SigningPageViewProps) => {
+export const SigningPageView = ({
+  document,
+  recipient,
+  fields,
+  completedFields,
+}: SigningPageViewProps) => {
   const truncatedTitle = truncateTitle(document.title);
 
   const { documentData, documentMeta } = document;
@@ -70,6 +78,8 @@ export const SigningPageView = ({ document, recipient, fields }: SigningPageView
         </div>
       </div>
 
+      <DocumentReadOnlyFields fields={completedFields} />
+
       <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
         {fields.map((field) =>
           match(field.type)

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -8,6 +8,7 @@ import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -15,18 +16,21 @@ import { StackAvatar } from './stack-avatar';
 
 export type AvatarWithRecipientProps = {
   recipient: Recipient;
+  documentStatus: DocumentStatus;
 };
 
-export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
+export function AvatarWithRecipient({ recipient, documentStatus }: AvatarWithRecipientProps) {
   const [, copy] = useCopyToClipboard();
   const { toast } = useToast();
 
+  const signingToken = documentStatus === DocumentStatus.PENDING ? recipient.token : null;
+
   const onRecipientClick = () => {
-    if (!recipient.token) {
+    if (!signingToken) {
       return;
     }
 
-    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`).then(() => {
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${signingToken}`).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'The signing link has been copied to your clipboard.',
@@ -37,10 +41,10 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
   return (
     <div
       className={cn('my-1 flex items-center gap-2', {
-        'cursor-pointer hover:underline': recipient.token,
+        'cursor-pointer hover:underline': signingToken,
       })}
-      role={recipient.token ? 'button' : undefined}
-      title={recipient.token && 'Click to copy signing link for sending to recipient'}
+      role={signingToken ? 'button' : undefined}
+      title={signingToken ? 'Click to copy signing link for sending to recipient' : undefined}
       onClick={onRecipientClick}
     >
       <StackAvatar
@@ -49,16 +53,15 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
         type={getRecipientType(recipient)}
         fallbackText={recipientAbbreviation(recipient)}
       />
-      <div>
-        <div
-          className="text-muted-foreground text-sm"
-          title="Click to copy signing link for sending to recipient"
-        >
-          <p>{recipient.email} </p>
-          <p className="text-muted-foreground/70 text-xs">
-            {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-          </p>
-        </div>
+
+      <div
+        className="text-muted-foreground text-sm"
+        title={signingToken ? 'Click to copy signing link for sending to recipient' : undefined}
+      >
+        <p>{recipient.email}</p>
+        <p className="text-muted-foreground/70 text-xs">
+          {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+        </p>
       </div>
     </div>
   );

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -1,33 +1,28 @@
 'use client';
 
-import { useRef, useState } from 'react';
-
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import type { Recipient } from '@documenso/prisma/client';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import type { DocumentStatus, Recipient } from '@documenso/prisma/client';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
 import { StackAvatars } from './stack-avatars';
 
 export type StackAvatarsWithTooltipProps = {
+  documentStatus: DocumentStatus;
   recipients: Recipient[];
   position?: 'top' | 'bottom';
   children?: React.ReactNode;
 };
 
 export const StackAvatarsWithTooltip = ({
+  documentStatus,
   recipients,
   position,
   children,
 }: StackAvatarsWithTooltipProps) => {
-  const [open, setOpen] = useState(false);
-
-  const isControlled = useRef(false);
-  const isMouseOverTimeout = useRef<NodeJS.Timeout | null>(null);
-
   const waitingRecipients = recipients.filter(
     (recipient) => getRecipientType(recipient) === 'waiting',
   );
@@ -44,105 +39,74 @@ export const StackAvatarsWithTooltip = ({
     (recipient) => getRecipientType(recipient) === 'unsigned',
   );
 
-  const onMouseEnter = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    isMouseOverTimeout.current = setTimeout(() => {
-      setOpen((o) => (!o ? true : o));
-    }, 200);
-  };
-
-  const onMouseLeave = () => {
-    if (isMouseOverTimeout.current) {
-      clearTimeout(isMouseOverTimeout.current);
-    }
-
-    if (isControlled.current) {
-      return;
-    }
-
-    setTimeout(() => {
-      setOpen((o) => (o ? false : o));
-    }, 200);
-  };
-
-  const onOpenChange = (newOpen: boolean) => {
-    isControlled.current = newOpen;
-
-    setOpen(newOpen);
-  };
-
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
-      <PopoverTrigger
-        className="flex cursor-pointer"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {children || <StackAvatars recipients={recipients} />}
-      </PopoverTrigger>
-
-      <PopoverContent
-        side={position}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className="flex flex-col gap-y-5 py-2"
-      >
-        {completedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Completed</h1>
-            {completedRecipients.map((recipient: Recipient) => (
-              <div key={recipient.id} className="my-1 flex items-center gap-2">
-                <StackAvatar
-                  first={true}
-                  key={recipient.id}
-                  type={getRecipientType(recipient)}
-                  fallbackText={recipientAbbreviation(recipient)}
-                />
-                <div className="">
-                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
-                  <p className="text-muted-foreground/70 text-xs">
-                    {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
-                  </p>
-                </div>
+    <PopoverHover
+      trigger={children || <StackAvatars recipients={recipients} />}
+      contentProps={{
+        className: 'flex flex-col gap-y-5 py-2',
+        side: position,
+      }}
+    >
+      {completedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Completed</h1>
+          {completedRecipients.map((recipient: Recipient) => (
+            <div key={recipient.id} className="my-1 flex items-center gap-2">
+              <StackAvatar
+                first={true}
+                key={recipient.id}
+                type={getRecipientType(recipient)}
+                fallbackText={recipientAbbreviation(recipient)}
+              />
+              <div className="">
+                <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                <p className="text-muted-foreground/70 text-xs">
+                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                </p>
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          ))}
+        </div>
+      )}
 
-        {waitingRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Waiting</h1>
-            {waitingRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </div>
-        )}
+      {waitingRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Waiting</h1>
+          {waitingRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
 
-        {openedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Opened</h1>
-            {openedRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </div>
-        )}
+      {openedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Opened</h1>
+          {openedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
 
-        {uncompletedRecipients.length > 0 && (
-          <div>
-            <h1 className="text-base font-medium">Uncompleted</h1>
-            {uncompletedRecipients.map((recipient: Recipient) => (
-              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-            ))}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
+      {uncompletedRecipients.length > 0 && (
+        <div>
+          <h1 className="text-base font-medium">Uncompleted</h1>
+          {uncompletedRecipients.map((recipient: Recipient) => (
+            <AvatarWithRecipient
+              key={recipient.id}
+              recipient={recipient}
+              documentStatus={documentStatus}
+            />
+          ))}
+        </div>
+      )}
+    </PopoverHover>
   );
 };

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -5,7 +5,6 @@ import { useCallback, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { Loader, Monitor, Moon, Sun } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -18,7 +17,6 @@ import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
-import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   CommandDialog,
@@ -71,7 +69,6 @@ export type CommandMenuProps = {
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { setTheme } = useTheme();
-  const { data: session } = useSession();
 
   const router = useRouter();
 
@@ -93,17 +90,6 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       },
     );
 
-  const isOwner = useCallback(
-    (document: Document) => document.userId === session?.user.id,
-    [session?.user.id],
-  );
-
-  const getSigningLink = useCallback(
-    (recipients: Recipient[]) =>
-      `/sign/${recipients.find((r) => r.email === session?.user.email)?.token}`,
-    [session?.user.email],
-  );
-
   const searchResults = useMemo(() => {
     if (!searchDocumentsData) {
       return [];
@@ -111,10 +97,10 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
     return searchDocumentsData.map((document) => ({
       label: document.title,
-      path: isOwner(document) ? `/documents/${document.id}` : getSigningLink(document.Recipient),
-      value: [document.id, document.title, ...document.Recipient.map((r) => r.email)].join(' '),
+      path: document.path,
+      value: document.value,
     }));
-  }, [searchDocumentsData, isOwner, getSigningLink]);
+  }, [searchDocumentsData]);
 
   const currentPage = pages[pages.length - 1];
 

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 
@@ -12,8 +10,6 @@ import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { CommandMenu } from '../common/command-menu';
-
 const navigationLinks = [
   {
     href: '/documents',
@@ -25,13 +21,14 @@ const navigationLinks = [
   },
 ];
 
-export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+export type DesktopNavProps = HTMLAttributes<HTMLDivElement> & {
+  setIsCommandMenuOpen: (value: boolean) => void;
+};
 
-export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+export const DesktopNav = ({ className, setIsCommandMenuOpen, ...props }: DesktopNavProps) => {
   const pathname = usePathname();
   const params = useParams();
 
-  const [open, setOpen] = useState(false);
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
   const rootHref = getRootHref(params, { returnEmptyRootString: true });
@@ -70,12 +67,10 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         ))}
       </div>
 
-      <CommandMenu open={open} onOpenChange={setOpen} />
-
       <Button
         variant="outline"
         className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
-        onClick={() => setOpen((open) => !open)}
+        onClick={() => setIsCommandMenuOpen(true)}
       >
         <div className="flex items-center">
           <Search className="mr-2 h-5 w-5" />

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -58,7 +58,7 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
           <Logo className="h-6 w-auto" />
         </Link>
 
-        <DesktopNav />
+        <DesktopNav setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
         <div className="flex gap-x-4 md:ml-8">
           <MenuSwitcher user={user} teams={teams} />

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

@@ -93,7 +93,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
         <Button
           data-testid="menu-switcher"
           variant="none"
-          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent"
+          className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
         >
           <AvatarWithText
             avatarFallback={formatAvatarFallback(selectedTeam?.name)}
@@ -102,12 +102,13 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             rightSideComponent={
               <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
             }
+            textSectionClassName="hidden lg:flex"
           />
         </Button>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className={cn('z-[60] ml-2 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        className={cn('z-[60] ml-6 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
         align="end"
         forceMount
       >

apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx

@@ -46,7 +46,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
 
   return (
     <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
-      <SheetContent className="flex w-full max-w-[400px] flex-col">
+      <SheetContent className="flex w-full max-w-[350px] flex-col">
         <Link href="/" onClick={handleMenuItemClick}>
           <Image
             src={LogoImage}
@@ -87,7 +87,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
           </div>
 
           <p className="text-muted-foreground text-sm">
-            © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
+            © {new Date().getFullYear()} Documenso, Inc. <br /> All rights reserved.
           </p>
         </div>
       </SheetContent>

apps/web/src/components/document/document-read-only-fields.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from 'react';
+
+import { P, match } from 'ts-pattern';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { CompletedField } from '@documenso/lib/types/fields';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { DocumentMeta } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: CompletedField[];
+  documentMeta?: DocumentMeta;
+};
+
+export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnlyFieldsProps) => {
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              cardClassName="border-gray-100/50 !shadow-none backdrop-blur-[1px] bg-background/90"
+            >
+              <div className="absolute -right-3 -top-3">
+                <PopoverHover
+                  trigger={
+                    <Avatar className="dark:border-border h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                        {extractInitials(field.Recipient.name || field.Recipient.email)}
+                      </AvatarFallback>
+                    </Avatar>
+                  }
+                  contentProps={{
+                    className: 'flex w-fit flex-col py-2.5 text-sm',
+                  }}
+                >
+                  <p>
+                    <span className="font-semibold">
+                      {field.Recipient.name
+                        ? `${field.Recipient.name} (${field.Recipient.email})`
+                        : field.Recipient.email}{' '}
+                    </span>
+                    inserted a {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()}
+                  </p>
+
+                  <Button
+                    variant="outline"
+                    className="mt-2.5 h-6 text-xs focus:outline-none focus-visible:ring-0"
+                    onClick={() => handleHideField(field.secondaryId)}
+                  >
+                    Hide field
+                  </Button>
+                </PopoverHover>
+              </div>
+
+              <div className="text-muted-foreground break-all text-sm">
+                {match(field)
+                  .with({ type: FieldType.SIGNATURE }, (field) =>
+                    field.Signature?.signatureImageAsBase64 ? (
+                      <img
+                        src={field.Signature.signatureImageAsBase64}
+                        alt="Signature"
+                        className="h-full w-full object-contain dark:invert"
+                      />
+                    ) : (
+                      <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+                        {field.Signature?.typedSignature}
+                      </p>
+                    ),
+                  )
+                  .with(
+                    { type: P.union(FieldType.NAME, FieldType.TEXT, FieldType.EMAIL) },
+                    () => field.customText,
+                  )
+                  .with({ type: FieldType.DATE }, () =>
+                    convertToLocalSystemFormat(
+                      field.customText,
+                      documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+                      documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+                    ),
+                  )
+                  .with({ type: FieldType.FREE_SIGNATURE }, () => null)
+                  .exhaustive()}
+              </div>
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};

package.json

@@ -3,8 +3,8 @@
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",
-    "dev": "turbo run dev --filter=@documenso/web --filter=@documenso/marketing",
-    "start": "turbo run start --filter=@documenso/web --filter=@documenso/marketing",
+    "dev": "turbo run dev --filter=@documenso/web --filter=@documenso/marketing --filter=@documenso/documentation",
+    "start": "turbo run start --filter=@documenso/web --filter=@documenso/marketing --filter=@documenso/documentation",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
     "format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,mdx}\"",
@@ -38,7 +38,7 @@
     "eslint-config-custom": "*",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "playwright": "^1.43.0",
+    "playwright": "1.43.0",
     "prettier": "^2.5.1",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3"

packages/api/v1/contract.ts

@@ -11,6 +11,7 @@ import {
   ZDeleteDocumentMutationSchema,
   ZDeleteFieldMutationSchema,
   ZDeleteRecipientMutationSchema,
+  ZDownloadDocumentSuccessfulSchema,
   ZGetDocumentsQuerySchema,
   ZSendDocumentForSigningMutationSchema,
   ZSuccessfulDocumentResponseSchema,
@@ -51,6 +52,17 @@ export const ApiContractV1 = c.router(
       summary: 'Get a single document',
     },
 
+    downloadSignedDocument: {
+      method: 'GET',
+      path: '/api/v1/documents/:id/download',
+      responses: {
+        200: ZDownloadDocumentSuccessfulSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Download a signed document when the storage transport is S3',
+    },
+
     createDocument: {
       method: 'POST',
       path: '/api/v1/documents',

packages/api/v1/implementation.ts

@@ -23,7 +23,10 @@ import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
+import {
+  getPresignGetUrl,
+  getPresignPostUrl,
+} from '@documenso/lib/universal/upload/server-actions';
 import { DocumentDataType, DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
 import { ApiContractV1 } from './contract';
@@ -83,6 +86,68 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
     }
   }),
 
+  downloadSignedDocument: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId } = args.params;
+
+    try {
+      if (process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
+        return {
+          status: 500,
+          body: {
+            message: 'Please make sure the storage transport is set to S3.',
+          },
+        };
+      }
+
+      const document = await getDocumentById({
+        id: Number(documentId),
+        userId: user.id,
+        teamId: team?.id,
+      });
+
+      if (!document || !document.documentDataId) {
+        return {
+          status: 404,
+          body: {
+            message: 'Document not found',
+          },
+        };
+      }
+
+      if (DocumentDataType.S3_PATH !== document.documentData.type) {
+        return {
+          status: 400,
+          body: {
+            message: 'Invalid document data type',
+          },
+        };
+      }
+
+      if (document.status !== DocumentStatus.COMPLETED) {
+        return {
+          status: 400,
+          body: {
+            message: 'Document is not completed yet.',
+          },
+        };
+      }
+
+      const { url } = await getPresignGetUrl(document.documentData.data);
+
+      return {
+        status: 200,
+        body: { downloadUrl: url },
+      };
+    } catch (err) {
+      return {
+        status: 500,
+        body: {
+          message: 'Error downloading the document. Please try again.',
+        },
+      };
+    }
+  }),
+
   deleteDocument: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
 

packages/api/v1/openapi.ts

@@ -2,16 +2,34 @@ import { generateOpenApi } from '@ts-rest/open-api';
 
 import { ApiContractV1 } from './contract';
 
-export const OpenAPIV1 = generateOpenApi(
-  ApiContractV1,
-  {
-    info: {
-      title: 'Documenso API',
-      version: '1.0.0',
-      description: 'The Documenso API for retrieving, creating, updating and deleting documents.',
+export const OpenAPIV1 = Object.assign(
+  generateOpenApi(
+    ApiContractV1,
+    {
+      info: {
+        title: 'Documenso API',
+        version: '1.0.0',
+        description: 'The Documenso API for retrieving, creating, updating and deleting documents.',
+      },
     },
-  },
+    {
+      setOperationId: true,
+    },
+  ),
   {
-    setOperationId: true,
+    components: {
+      securitySchemes: {
+        authorization: {
+          type: 'apiKey',
+          in: 'header',
+          name: 'Authorization',
+        },
+      },
+    },
+    security: [
+      {
+        authorization: [],
+      },
+    ],
   },
 );

packages/api/v1/schema.ts

@@ -53,6 +53,10 @@ export const ZUploadDocumentSuccessfulSchema = z.object({
   key: z.string(),
 });
 
+export const ZDownloadDocumentSuccessfulSchema = z.object({
+  downloadUrl: z.string(),
+});
+
 export type TUploadDocumentSuccessfulSchema = z.infer<typeof ZUploadDocumentSuccessfulSchema>;
 
 export const ZCreateDocumentMutationSchema = z.object({

packages/app-tests/e2e/document-flow/signers-step.spec.ts

@@ -45,7 +45,7 @@ test.describe('[EE_ONLY]', () => {
     await page
       .getByRole('textbox', { name: 'Email', exact: true })
       .fill('recipient2@documenso.com');
-    await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Recipient 2');
+    await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('Recipient 2');
 
     // Display advanced settings.
     await page.getByLabel('Show advanced settings').click();
@@ -82,7 +82,7 @@ test('[DOCUMENT_FLOW]: add signers', async ({ page }) => {
   await page.getByPlaceholder('Name').fill('Recipient 1');
   await page.getByRole('button', { name: 'Add Signer' }).click();
   await page.getByRole('textbox', { name: 'Email', exact: true }).fill('recipient2@documenso.com');
-  await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Recipient 2');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('Recipient 2');
 
   // Advanced settings should not be visible for non EE users.
   await expect(page.getByLabel('Show advanced settings')).toBeHidden();

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -136,7 +136,7 @@ test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipie
   await page.getByPlaceholder('Name').fill('User 1');
   await page.getByRole('button', { name: 'Add Signer' }).click();
   await page.getByRole('textbox', { name: 'Email', exact: true }).fill('user2@example.com');
-  await page.getByRole('textbox', { name: 'Name', exact: true }).fill('User 2');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('User 2');
 
   await page.getByRole('button', { name: 'Continue' }).click();
 
@@ -254,7 +254,7 @@ test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', asyn
   await page.getByRole('button', { name: 'Sign' }).click();
 
   await page.waitForURL(`/sign/${token}/complete`);
-  await expect(page.getByText('You have signed')).toBeVisible();
+  await expect(page.getByText('Document Signed')).toBeVisible();
 
   // Check if document has been signed
   const { status: completedStatus } = await getDocumentByToken(token);

packages/app-tests/e2e/documents/delete-documents.spec.ts

@@ -8,6 +8,7 @@ import {
 import { seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin, apiSignout } from '../fixtures/authentication';
+import { checkDocumentTabCount } from '../fixtures/documents';
 
 test.describe.configure({ mode: 'serial' });
 
@@ -74,7 +75,7 @@ test('[DOCUMENTS]: deleting a completed document should not remove it from recip
     email: sender.email,
   });
 
-  // open actions menu
+  // Open document action menu.
   await page
     .locator('tr', { hasText: 'Document 1 - Completed' })
     .getByRole('cell', { name: 'Download' })
@@ -115,7 +116,7 @@ test('[DOCUMENTS]: deleting a pending document should remove it from recipients'
     email: sender.email,
   });
 
-  // open actions menu
+  // Open document action menu.
   await page.locator('tr', { hasText: 'Document 1 - Pending' }).getByRole('button').nth(1).click();
 
   // delete document
@@ -135,20 +136,11 @@ test('[DOCUMENTS]: deleting a pending document should remove it from recipients'
     });
 
     await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).not.toBeVisible();
-
-    await page.goto(`/sign/${recipient.token}`);
-    await expect(page.getByText(/document.*cancelled/i).nth(0)).toBeVisible();
-
-    await page.goto('/documents');
-    await page.waitForURL('/documents');
-
     await apiSignout({ page });
   }
 });
 
-test('[DOCUMENTS]: deleting a draft document should remove it without additional prompting', async ({
-  page,
-}) => {
+test('[DOCUMENTS]: deleting draft documents should permanently remove it', async ({ page }) => {
   const { sender } = await seedDeleteDocumentsTestRequirements();
 
   await apiSignin({
@@ -156,11 +148,10 @@ test('[DOCUMENTS]: deleting a draft document should remove it without additional
     email: sender.email,
   });
 
-  // open actions menu
+  // Open document action menu.
   await page
     .locator('tr', { hasText: 'Document 1 - Draft' })
-    .getByRole('cell', { name: 'Edit' })
-    .getByRole('button')
+    .getByTestId('document-table-action-btn')
     .click();
 
   // delete document
@@ -169,4 +160,155 @@ test('[DOCUMENTS]: deleting a draft document should remove it without additional
   await page.getByRole('button', { name: 'Delete' }).click();
 
   await expect(page.getByRole('row', { name: /Document 1 - Draft/ })).not.toBeVisible();
+
+  // Check document counts.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 1);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 2);
+});
+
+test('[DOCUMENTS]: deleting pending documents should permanently remove it', async ({ page }) => {
+  const { sender } = await seedDeleteDocumentsTestRequirements();
+
+  await apiSignin({
+    page,
+    email: sender.email,
+  });
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Pending' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
+
+  // Check document counts.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 2);
+});
+
+test('[DOCUMENTS]: deleting completed documents as an owner should hide it from only the owner', async ({
+  page,
+}) => {
+  const { sender, recipients } = await seedDeleteDocumentsTestRequirements();
+
+  await apiSignin({
+    page,
+    email: sender.email,
+  });
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Completed' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  // Check document counts.
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 1);
+  await checkDocumentTabCount(page, 'Completed', 0);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 2);
+
+  // Sign into the recipient account.
+  await apiSignout({ page });
+  await apiSignin({
+    page,
+    email: recipients[0].email,
+  });
+
+  // Check document counts.
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).toBeVisible();
+  await checkDocumentTabCount(page, 'Inbox', 1);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 2);
+});
+
+test('[DOCUMENTS]: deleting documents as a recipient should only hide it for them', async ({
+  page,
+}) => {
+  const { sender, recipients } = await seedDeleteDocumentsTestRequirements();
+  const recipientA = recipients[0];
+  const recipientB = recipients[1];
+
+  await apiSignin({
+    page,
+    email: recipientA.email,
+  });
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Completed' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Hide' }).click();
+  await page.getByRole('button', { name: 'Hide' }).click();
+
+  // Open document action menu.
+  await page
+    .locator('tr', { hasText: 'Document 1 - Pending' })
+    .getByTestId('document-table-action-btn')
+    .click();
+
+  // Delete document.
+  await page.getByRole('menuitem', { name: 'Hide' }).click();
+  await page.getByRole('button', { name: 'Hide' }).click();
+
+  // Check document counts.
+  await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
+  await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 0);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 0);
+
+  // Sign into the sender account.
+  await apiSignout({ page });
+  await apiSignin({
+    page,
+    email: sender.email,
+  });
+
+  // Check document counts for sender.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 1);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 3);
+
+  // Sign into the other recipient account.
+  await apiSignout({ page });
+  await apiSignin({
+    page,
+    email: recipientB.email,
+  });
+
+  // Check document counts for other recipient.
+  await checkDocumentTabCount(page, 'Inbox', 1);
+  await checkDocumentTabCount(page, 'Pending', 0);
+  await checkDocumentTabCount(page, 'Completed', 1);
+  await checkDocumentTabCount(page, 'Draft', 0);
+  await checkDocumentTabCount(page, 'All', 2);
 });

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

@@ -0,0 +1,17 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export const checkDocumentTabCount = async (page: Page, tabName: string, count: number) => {
+  await page.getByRole('tab', { name: tabName }).click();
+
+  if (tabName !== 'All') {
+    await expect(page.getByRole('tab', { name: tabName })).toContainText(count.toString());
+  }
+
+  if (count === 0) {
+    await expect(page.getByTestId('empty-document-state')).toBeVisible();
+    return;
+  }
+
+  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
+};

packages/app-tests/e2e/teams/team-documents.spec.ts

@@ -1,4 +1,3 @@
-import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
 import { DocumentStatus } from '@documenso/prisma/client';
@@ -7,24 +6,10 @@ import { seedTeamEmail, unseedTeam, unseedTeamEmail } from '@documenso/prisma/se
 import { seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin, apiSignout } from '../fixtures/authentication';
+import { checkDocumentTabCount } from '../fixtures/documents';
 
 test.describe.configure({ mode: 'parallel' });
 
-const checkDocumentTabCount = async (page: Page, tabName: string, count: number) => {
-  await page.getByRole('tab', { name: tabName }).click();
-
-  if (tabName !== 'All') {
-    await expect(page.getByRole('tab', { name: tabName })).toContainText(count.toString());
-  }
-
-  if (count === 0) {
-    await expect(page.getByRole('main')).toContainText(`Nothing to do`);
-    return;
-  }
-
-  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
-};
-
 test('[TEAMS]: check team documents count', async ({ page }) => {
   const { team, teamMember2 } = await seedTeamDocuments();
 
@@ -245,24 +230,6 @@ test('[TEAMS]: check team documents count with external team email', async ({ pa
   await unseedTeam(team.url);
 });
 
-test('[TEAMS]: delete pending team document', async ({ page }) => {
-  const { team, teamMember2: currentUser } = await seedTeamDocuments();
-
-  await apiSignin({
-    page,
-    email: currentUser.email,
-    redirectPath: `/t/${team.url}/documents?status=PENDING`,
-  });
-
-  await page.getByRole('row').getByRole('button').nth(1).click();
-
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
-  await page.getByRole('button', { name: 'Delete' }).click();
-
-  await checkDocumentTabCount(page, 'Pending', 1);
-});
-
 test('[TEAMS]: resend pending team document', async ({ page }) => {
   const { team, teamMember2: currentUser } = await seedTeamDocuments();
 
@@ -280,3 +247,125 @@ test('[TEAMS]: resend pending team document', async ({ page }) => {
 
   await expect(page.getByRole('status')).toContainText('Document re-sent');
 });
+
+test('[TEAMS]: delete draft team document', async ({ page }) => {
+  const { team, teamMember2: teamEmailMember, teamMember3 } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamMember3.email,
+    redirectPath: `/t/${team.url}/documents?status=DRAFT`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(1).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Draft', 1);
+
+  // Should be hidden for all team members.
+  await apiSignout({ page });
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 1);
+    await checkDocumentTabCount(page, 'Draft', 1);
+    await checkDocumentTabCount(page, 'All', 4);
+
+    await apiSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: delete pending team document', async ({ page }) => {
+  const { team, teamMember2: teamEmailMember, teamMember3 } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamMember3.email,
+    redirectPath: `/t/${team.url}/documents?status=PENDING`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(1).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Pending', 1);
+
+  // Should be hidden for all team members.
+  await apiSignout({ page });
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 1);
+    await checkDocumentTabCount(page, 'Completed', 1);
+    await checkDocumentTabCount(page, 'Draft', 2);
+    await checkDocumentTabCount(page, 'All', 4);
+
+    await apiSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: delete completed team document', async ({ page }) => {
+  const { team, teamMember2: teamEmailMember, teamMember3 } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamMember3.email,
+    redirectPath: `/t/${team.url}/documents?status=COMPLETED`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(2).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Completed', 0);
+
+  // Should be hidden for all team members.
+  await apiSignout({ page });
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await apiSignin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 0);
+    await checkDocumentTabCount(page, 'Draft', 2);
+    await checkDocumentTabCount(page, 'All', 4);
+
+    await apiSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});

packages/email/template-components/template-document-cancel.tsx

@@ -23,6 +23,10 @@ export const TemplateDocumentCancel = ({
           <br />"{documentName}"
         </Text>
 
+        <Text className="my-1 text-center text-base text-slate-400">
+          All signatures have been voided.
+        </Text>
+
         <Text className="my-1 text-center text-base text-slate-400">
           You don't need to sign it anymore.
         </Text>

packages/email/template-components/template-document-invite.tsx

@@ -11,6 +11,7 @@ export interface TemplateDocumentInviteProps {
   signDocumentLink: string;
   assetBaseUrl: string;
   role: RecipientRole;
+  selfSigner: boolean;
 }
 
 export const TemplateDocumentInvite = ({
@@ -19,6 +20,7 @@ export const TemplateDocumentInvite = ({
   signDocumentLink,
   assetBaseUrl,
   role,
+  selfSigner,
 }: TemplateDocumentInviteProps) => {
   const { actionVerb, progressiveVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
 
@@ -28,8 +30,19 @@ export const TemplateDocumentInvite = ({
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has invited you to {actionVerb.toLowerCase()}
-          <br />"{documentName}"
+          {selfSigner ? (
+            <>
+              {`Please ${actionVerb.toLowerCase()} your document`}
+              <br />
+              {`"${documentName}"`}
+            </>
+          ) : (
+            <>
+              {`${inviterName} has invited you to ${actionVerb.toLowerCase()}`}
+              <br />
+              {`"${documentName}"`}
+            </>
+          )}
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">

packages/email/templates/document-invite.tsx

@@ -22,6 +22,7 @@ import { TemplateFooter } from '../template-components/template-footer';
 export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
   customBody?: string;
   role: RecipientRole;
+  selfSigner?: boolean;
 };
 
 export const DocumentInviteEmailTemplate = ({
@@ -32,10 +33,13 @@ export const DocumentInviteEmailTemplate = ({
   assetBaseUrl = 'http://localhost:3002',
   customBody,
   role,
+  selfSigner = false,
 }: DocumentInviteEmailTemplateProps) => {
   const action = RECIPIENT_ROLES_DESCRIPTION[role].actionVerb.toLowerCase();
 
-  const previewText = `${inviterName} has invited you to ${action} ${documentName}`;
+  const previewText = selfSigner
+    ? `Please ${action} your document ${documentName}`
+    : `${inviterName} has invited you to ${action} ${documentName}`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -71,6 +75,7 @@ export const DocumentInviteEmailTemplate = ({
                   signDocumentLink={signDocumentLink}
                   assetBaseUrl={assetBaseUrl}
                   role={role}
+                  selfSigner={selfSigner}
                 />
               </Section>
             </Container>

packages/lib/package.json

@@ -39,7 +39,7 @@
     "next-auth": "4.24.5",
     "oslo": "^0.17.0",
     "pdf-lib": "^1.17.1",
-    "playwright": "^1.43.0",
+    "playwright": "1.43.0",
     "react": "18.2.0",
     "remeda": "^1.27.1",
     "stripe": "^12.7.0",
@@ -48,6 +48,6 @@
   },
   "devDependencies": {
     "@types/luxon": "^3.3.1",
-    "@playwright/browser-chromium": "^1.43.0"
+    "@playwright/browser-chromium": "1.43.0"
   }
 }

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

@@ -49,8 +49,8 @@ export const completeDocumentWithToken = async ({
 
   const document = await getDocument({ token, documentId });
 
-  if (document.status === DocumentStatus.COMPLETED) {
-    throw new Error(`Document ${document.id} has already been completed`);
+  if (document.status !== DocumentStatus.PENDING) {
+    throw new Error(`Document ${document.id} must be pending`);
   }
 
   if (document.Recipient.length === 0) {