chore: add responsive container to pie chart

.devcontainer/devcontainer.json

@@ -1,32 +0,0 @@
-{
-  "name": "Documenso",
-  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
-  "features": {
-    "ghcr.io/devcontainers/features/docker-in-docker:2": {
-      "version": "latest",
-      "enableNonRootDocker": "true",
-      "moby": "true"
-    },
-    "ghcr.io/devcontainers/features/node:1": {}
-  },
-  "onCreateCommand": "./.devcontainer/on-create.sh",
-  "forwardPorts": [3000, 54320, 9000, 2500, 1100],
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "aaron-bond.better-comments",
-        "bradlc.vscode-tailwindcss",
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "mikestead.dotenv",
-        "unifiedjs.vscode-mdx",
-        "GitHub.copilot-chat",
-        "GitHub.copilot-labs",
-        "GitHub.copilot",
-        "GitHub.vscode-pull-request-github",
-        "Prisma.prisma",
-        "VisualStudioExptTeam.vscodeintellicode",
-      ]
-    }
-  }
-}

.devcontainer/on-create.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-
-# Start the database and mailserver
-docker compose -f ./docker/compose-without-app.yml up -d
-
-# Install dependencies
-npm install
-
-# Copy the env file
-cp .env.example .env
-
-# Source the env file, export the variables
-set -a
-source .env
-set +a
-
-# Run the migrations
-npm run -w @documenso/prisma prisma:migrate-dev

.devcontainer/post-start.sh

@@ -1,3 +0,0 @@
-#!/usr/bin/env bash
-
-npm run dev

.env.example

@@ -7,27 +7,11 @@ NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
 # [[APP]]
-NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
-NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
+NEXT_PUBLIC_SITE_URL="http://localhost:3000"
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
-# Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
-NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
-
-# [[STORAGE]]
-# OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
-NEXT_PUBLIC_UPLOAD_TRANSPORT="database"
-# OPTIONAL: Defines the endpoint to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
-NEXT_PRIVATE_UPLOAD_ENDPOINT=
-# OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
-NEXT_PRIVATE_UPLOAD_REGION=
-# REQUIRED: Defines the bucket to use for the S3 storage transport.
-NEXT_PRIVATE_UPLOAD_BUCKET=
-# OPTIONAL: Defines the access key ID to use for the S3 storage transport.
-NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID=
-# OPTIONAL: Defines the secret access key to use for the S3 storage transport.
-NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY=
 
 # [[SMTP]]
 # OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
@@ -68,12 +52,7 @@ NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
 
 # [[FEATURES]]
-# OPTIONAL: Leave blank to disable PostHog and feature flags.
-NEXT_PUBLIC_POSTHOG_KEY=""
-# OPTIONAL: Defines the host to use for PostHog.
-NEXT_PUBLIC_POSTHOG_HOST="https://eu.posthog.com"
-# OPTIONAL: Leave blank to disable billing.
-NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
+NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false
 
 # This is only required for the marketing site
 # [[REDIS]]

.eslintignore

@@ -1,8 +0,0 @@
-# Config files
-*.config.js
-*.config.cjs
-
-# Statically hosted javascript files
-apps/*/public/*.js
-apps/*/public/*.cjs
-scripts/

.github/dependabot.yml

@@ -1,32 +0,0 @@
-version: 2
-
-updates:
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: "weekly"
-    target-branch: "feat/refresh"
-    labels:
-      - "ci dependencies"
-      - "ci"
-    open-pull-requests-limit: 10
-
-  - package-ecosystem: "npm"
-    directory: "/apps/marketing"
-    schedule:
-      interval: "weekly"
-    target-branch: "feat/refresh"
-    labels:
-      - "npm dependencies"
-      - "frontend"
-    open-pull-requests-limit: 10
-
-  - package-ecosystem: "npm"
-    directory: "/apps/web"
-    schedule:
-      interval: "weekly"
-    target-branch: "feat/refresh"
-    labels:
-      - "npm dependencies"
-      - "frontend"
-    open-pull-requests-limit: 10

.github/workflows/ci.yml

@@ -1,39 +0,0 @@
-name: "Continuous Integration"
-
-on:
-  push:
-    branches: [ "feat/refresh" ]
-  pull_request:
-    branches: [ "feat/refresh" ]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-
-env:
-  HUSKY: 0
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Copy env
-        run: cp .env.example .env
-
-      - name: Build
-        run: npm run build

.github/workflows/codeql-analysis.yml

@@ -1,48 +0,0 @@
-name: "CodeQL"
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [ feat/refresh ]
-  pull_request:
-    branches: [ feat/refresh ]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: true
-      matrix:
-        language: [ 'javascript' ]
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-        cache: npm
-
-    - name: Install Dependencies
-      run: npm ci
-
-    - name: Copy env
-      run: cp .env.example .env
-
-    - name: Build Documenso
-      run: npm run build
-
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2

.github/workflows/semantic-pull-requests.yml

@@ -1,21 +0,0 @@
-name: "Validate PR Name"
-
-on:
-  pull_request_target:
-    types:
-      - opened
-      - reopened
-      - edited
-      - synchronize
-
-permissions:
-  pull-requests: read
-
-jobs:
-  validate-pr:
-    name: Validate PR title
-    runs-on: ubuntu-latest
-    steps:
-      - uses: amannn/action-semantic-pull-request@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -37,13 +37,3 @@ yarn-error.log*
 
 # contentlayer
 .contentlayer
-
-# intellij
-.idea
-
-# vscode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json

.husky/commit-msg

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

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged

README.md

@@ -1,11 +1,13 @@
 <p align="center" style="margin-top: 120px">
-  <a href="https://github.com/documenso/documenso">
+  <a href="https://github.com/documenso/documenso.com">
    <img width="250px" src="https://github.com/documenso/documenso/assets/1309312/cd7823ec-4baa-40b9-be78-4acb3b1c73cb" alt="Documenso Logo">
   </a>
 
+  <h3 align="center">Open Source Signing Infrastructure</h3>
+
   <p align="center">
-  The Open Source DocuSign Alternative.
-  <br>
+    The DocuSign Open Source Alternative.
+    <br />
     <a href="https://documenso.com"><strong>Learn more »</strong></a>
     <br />
     <br />
@@ -20,16 +22,12 @@
 </p>
 
 <p align="center">
-   <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://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>
 </p>
 
-> **🚧 We're currently working on a large scale refactor which can be found on the [feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh) branch.**
->
-> **[Read more on why 👀](https://documenso.com/blog/why-were-doing-a-rewrite)**
-
 # Documenso 0.9 - Developer Preview
 
 <div>
@@ -65,28 +63,18 @@ Signing documents digitally is fast, easy and should be best practice for every
 
 ## Community and Next Steps 🎯
 
-We're currently working on a redesign of the application including a revamp of the codebase so Documenso can be more intuitive to use and robust to develop upon.
+The current project goal is to <b>[release a production ready version](https://github.com/documenso/documenso/milestone/1)</b> for self-hosting as soon as possible. If you want to help making that happen you can:
 
 - Check out the first source code release in this repository and test it
 - Tell us what you think in the current [Discussions](https://github.com/documenso/documenso/discussions)
-- Join the [Discord server](https://documen.so/discord) for any questions and getting to know to other community members
+- Join the [Slack Channel](https://documen.so/slack) for any questions and getting to know to other community members
 - ⭐ the repository to help us raise awareness
 - Spread the word on Twitter, that Documenso is working towards a more open signing tool
 - Fix or create [issues](https://github.com/documenso/documenso/issues), that are needed for the first production release
 
 ## Contributing
 
-- To contribute, please see our [contribution guide](https://github.com/documenso/documenso/blob/main/CONTRIBUTING.md).
-
-## Contact us
-
-Contact us if you are interested in our Enterprise plan for large organizations that need extra flexibility and control.
-
-<a href="https://cal.com/timurercan/enterprise-customers?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
-
-## Activity
-
-![Repository Activity](https://repobeats.axiom.co/api/embed/622a2e9aa709696f7226304b5b7178a5741b3868.svg)
+- To contribute please see our [contribution guide](https://github.com/documenso/documenso/blob/main/CONTRIBUTING.md).
 
 # Tech
 
@@ -143,47 +131,37 @@ Your database will also be available on port `54320`. You can connect to it usin
 
 ## Developer Setup
 
-### Manual Setup
-
 Follow these steps to setup documenso on you local machine:
 
 - [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
   ```sh
   git clone https://github.com/documenso/documenso
   ```
-- Run `npm i` in root directory
-- Rename `.env.example` to `.env`
+- Run <code>npm i</code> in root directory
+- Rename <code>.env.example</code> to <code>.env</code>
 - Set DATABASE_URL value in .env file
   - You can use the provided test database url (may be wiped at any point)
   - Or setup a local postgres sql instance (recommended)
-- Create the database scheme by running `db-migrate:dev`
+- Create the database scheme by running <code>db-migrate:dev</code>
 - Setup your mail provider
-  - Set `SENDGRID_API_KEY` value in .env file
+  - Set <code>SENDGRID_API_KEY</code> value in .env file
   - You need a SendGrid account, which you can create [here](https://signup.sendgrid.com/).
-  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the `SMTP
-    \_
-  * variables` in your .env
-- Run `npm run dev` root directory to start
+  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the <code>SMTP\_\* variables</code> in your .env
+- Run <code>npm run dev</code> root directory to start
 - Register a new user at http://localhost:3000/signup
 
 ---
 
-- Optional: Seed the database using `npm run db-seed` to create a test user and document
-- Optional: Upload and sign `apps/web/resources/example.pdf` manually to test your setup
+- Optional: Seed the database using <code>npm run db-seed</code> to create a test user and document
+- Optional: Upload and sign <code>apps/web/resources/example.pdf</code> manually to test your setup
 
 - Optional: Create your own signing certificate
   - A demo certificate is provided in `/app/web/resources/certificate.p12`
   - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL) see **[Create your own signing certificate](#creating-your-own-signing-certificate)**.
 
-### 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)
-
 ## Updating
 
-- If you pull the newest version from main, using `git pull`, it may be necessary to regenerate your database client
+- If you pull the newest version from main, using <code>git pull</code>, it may be necessary to regenerate your database client
 - You can do this by running the generate command in `/packages/prisma`:
   ```sh
   npx prisma generate
@@ -194,22 +172,16 @@ Follow these steps to setup documenso on you local machine:
 
 For the digital signature of your documents you need a signing certificate in .p12 format (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
 
-1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:
-
-   `openssl genrsa -out private.key 2048`
-
-2. Generate a self-signed certificate using the private key. You can run the following command to generate a self-signed certificate:
-
-   `openssl req -new -x509 -key private.key -out certificate.crt -days 365`
+1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:\
+   <code>openssl genrsa -out private.key 2048</code>
 
+2. Generate a self-signed certificate using the private key. You can run the following command to generate a self-signed certificate:\
+   <code>openssl req -new -x509 -key private.key -out certificate.crt -days 365</code> \
    This will prompt you to enter some information, such as the Common Name (CN) for the certificate. Make sure you enter the correct information. The -days parameter sets the number of days for which the certificate is valid.
-
-3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following command to do this:
-
-   `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt`
-
+3. Combine the private key and the self-signed certificate to create the p12 certificate. You can run the following command to do this: \
+   <code>openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt</code>
 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 <code>/apps/web/resources/certificate.p12</code>
 
 # Docker
 
@@ -217,42 +189,16 @@ For the digital signature of your documents you need a signing certificate in .p
 
 Want to create a production ready docker image? Follow these steps:
 
-- cd into `docker` directory
-- Make `build.sh` executable by running `chmod +x build.sh`
-- Run `./build.sh` to start building the docker image.
-- Publish the image to your docker registry of choice (or) If you prefer running the image from local, run the below command
+- Run `./docker/build.sh` in the root directory.
+- Publish the image to your docker registry of choice.
 
-```
-docker run -d --restart=unless-stopped -p 3000:3000 -v documenso:/app/data --name documenso documenso:latest
-```
+# Deploying - Coming Soon™
 
-Command Breakdown:
-- `-d` - Let's you run the container in background
-- `-p` - Passes down which ports to use. First half is the host port, Second half is the app port. You can change the first half anything you want and reverse proxy to that port.
-- `-v` - Volume let's you persist the data
-- `--name` - Name of the container
-- `documenso:latest` -  Image you have built
-
-# Deployment
-
-We support a variety of deployment methods, and are actively working on adding more. Stay tuned for updates!
-
-## Railway
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
-
-## Render
-
-[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
+- Docker support
+- One-Click-Deploy on Render.com Deploy
 
 # Troubleshooting
 
-## I'm not receiving any emails when using the developer quickstart
-
-When using the developer quickstart an [Inbucket](https://inbucket.org/) server will be spun up in a docker container that will store all outgoing email locally for you to view.
-
-The Web UI can be found at http://localhost:9000 while the SMTP port will be on localhost:2500.
-
 ## Support IPv6
 
 In case you are deploying to a cluster that uses only IPv6. You can use a custom command to pass a parameter to the NextJS start command

apps/marketing/content/blog/building-documenso-pt1.mdx

@@ -1,98 +1,98 @@
----
-title: 'Building Documenso — Part 1: Certificates'
-description: This is the first part of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2023-06-23
-tags:
-  - Open Source
-  - Document Signature
-  - Certificates
-  - Signing
----
-
-<figure>
-  <MdxNextImage
-    src="/blog/blog-banner-building-documenso.webp"
-    width="1200"
-    height="675"
-    alt="Building Documenso blog banner"
-  />
-
-  <figcaption className="text-center">
-    What actually is a signature?
-  </figcaption>
-</figure>
-
-> Disclaimer: I’m not a lawyer and this isn’t legal advice. We plan to publish a much more specific framework on the topic of signature validity.
-
-This is the first installment of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
-
-As you may have heard, we launched the community-reviewed <a href="https://github.com/documenso/documenso" target="_blank">version 0.9 of Documenso on GitHub</a> recently and it’s now available through the early adopter’s plan. One of the most fundamental choices we had to make on this first release, was the choice of certificate. While it’s interesting to know what we opted for, this shall also serve as a guide for everyone facing the same choice for self-hosting Documenso.
-
-> Question: Why do I need a document signing certificate to self-host?
->
-> Short Answer: Inserting the images of a signature into the document is only part of the signing process.
-
-To have an actual digitally signed document you need a document signing certificate that is used to create the digital signature that is inserted into the document, alongside the visible one¹.
-
-When hosting a signature service yourself, as we do, there are four main choices for handling the certificate: Not using a certificate, creating your own, buying a trusted certificate, and becoming and trusted service provider to issue your own trusted certificate.
-
-## 1\. No Certificate
-
-A lot of signing services actually don’t employ actual digital signatures besides the inserted image. The only insert and image of the signatures into the document you sign. This can be done and is legally acceptable in many cases. This option isn’t directly supported by Documenso without changing the code.
-
-## 2\. Create your own
-
-Since the cryptography behind certificates is freely available as open source you could generate your own using OpenSSL for example. Since it’s hardly more work than option 1 (using Documenso at least), this would be my minimum effort recommendation. Having a self-created (“self-signed”) certificate doesn’t add much in terms of regulation but it guarantees the document’s integrity, meaning no changes have been made after signing². What this doesn’t give you, is the famous green checkmark in Adobe Acrobat. Why? Because you aren’t on the list of providers Adobe “trusts”.³
-
-## 3\. Buy a “trusted” certificate.
-
-There are Certificate Authorities (CAs) that can sell you a certificate⁴. The service they provide is, that they validate your name (personal certificates) or your organization’s name (corporate certificate) before creating your certificate for you, just like you did in option 2. The difference is, that they are listed on the previously mentioned trust lists (e.g. Adobe’s) and thus the resulting signatures get a nice, green checkmark in Adobe Reader⁵
-
-## 4\. Becoming a Trusted Certificate Authority (CA) yourself and create your own certificate
-
-This option is an incredibly complex endeavour, requiring a lot of effort and skill. It can be done, as there are multiple CAs around the world. Is it worth the effort? That depends a lot on what you’re trying to accomplish.
-
-<center>.&nbsp;&nbsp;.&nbsp;&nbsp;.</center>
-
-## What we did
-
-Having briefly introduced the options, here is what we did: Since we aim to raise the bar on digital signature proliferation and trust, we opted to buy an “Advanced Personal Certificates for Companies/Organisations” from WiseKey. Thus, documents signed with Documenso’s hosted version look like this:
-
-<figure>
-  <MdxNextImage
-    src="/blog/blog-fig-building-documenso.webp"
-    width="1262"
-    height="481"
-    alt="Figure 1"
-  />
-
-  <figcaption className="text-center">The famous green checkmark: Signed by hosted Documenso</figcaption>
-</figure>
-
-There weren’t any deeper reasons we choose WiseKey, other than they offered what we needed and there wasn’t any reason to look much further. While I didn’t map the entire certificate market offering (yet), I’m pretty sure something similar could be found elsewhere. While we opted for option 3, choosing option 2 might be perfectly reasonable considering your use case.⁶
-
-> While this is our setup, for now, we have a bigger plan for this topic. While globally trusted SSL Certificates have been available for free, courtesy of Let’s Encrypt, for a while now, there is no such thing as document signing. And there should be. Not having free and trusted infrastructure for signing is blocking a completely new generation of signing products from being created. This is why we’ll start working on option 4 when the time is right.
-
-Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
-or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>
-
-Join the self-hoster community here: <a href="https://documen.so/discord" target="_blank">https://documen.so/discord</a>
-
-Best from Hamburg
-
-Timur
-
-\[1\] There are different approaches to signing a document. For the sake of simplicity, here we talk about a document with X inserted signature images, that is afterward signed once the by signing service, i.e. Documenso. If each visual signature should have its own digital one (e.g. QES — eIDAS Level 3), the case is a bit more complex.
-
-\[2\] Of course, the signing service provider technically can change and resign the document, especially in the case mentioned in \[1\]. This can be countered by requiring actual digital signatures from each signer, that are bound to their identity/ account. Creating a completely trustless system in the context however is extremely hard to do and not the most pressing business need for the industry at this point, in my opinion. Though, this would be nice.
-
-\[3\] Adobe, like the EU, has a list of organizations they trust. The Adobe green checkmark is powered by the Adobe trust list, if you want to be trusted by EU standards here: <a href="https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation" target="_blank">https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation</a>, you need to be on the EU trust list. Getting on each list is possible, though the latter is much more work.
-
-\[4\] Technically, they sign your certificate creation request (created by you), containing your info with their certificate (which is trusted), making your certificate trusted. This way, everything you sign with your certificate is seen as trusted. They created their certificate just like you, the difference is they are on the lists, mentioned in \[3\]
-
-\[5\] Why does Adobe get to say, what is trusted? They simply happen to have the most used pdf viewer. And since everyone checks there, whom they consider trusted carries weight. If it should be like this, is a different matter.
-
-\[6\] Self-Signed signatures, even purely visual signatures, are fully legally binding. Why you use changes mainly your confidence in the signature and the burden of proof. Also, some industries require a certain level of signatures e.g. retail loans (QES/ eIDAS Level 3 in the EU).
+---
+title: 'Building Documenso — Part 1: Certificates'
+description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-06-23
+tags:
+  - Open Source
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-building-documenso.webp"
+    width="1200"
+    height="675"
+    alt="Building Documenso blog banner"
+  />
+
+  <figcaption className="text-center">
+    What actually is a signature?
+  </figcaption>
+</figure>
+
+> Disclaimer: I’m not a lawyer and this isn’t legal advice. We plan to publish a much more specific framework on the topic of signature validity.
+
+This is the first installment of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
+
+As you may have heard, we launched the community-reviewed <a href="https://github.com/documenso/documenso" target="_blank">version 0.9 of Documenso on GitHub</a> recently and it’s now available through the early adopter’s plan. One of the most fundamental choices we had to make on this first release, was the choice of certificate. While it’s interesting to know what we opted for, this shall also serve as a guide for everyone facing the same choice for self-hosting Documenso.
+
+> Question: Why do I need a document signing certificate to self-host?
+>
+> Short Answer: Inserting the images of a signature into the document is only part of the signing process.
+
+To have an actual digitally signed document you need a document signing certificate that is used to create the digital signature that is inserted into the document, alongside the visible one¹.
+
+When hosting a signature service yourself, as we do, there are four main choices for handling the certificate: Not using a certificate, creating your own, buying a trusted certificate, and becoming and trusted service provider to issue your own trusted certificate.
+
+## 1\. No Certificate
+
+A lot of signing services actually don’t employ actual digital signatures besides the inserted image. The only insert and image of the signatures into the document you sign. This can be done and is legally acceptable in many cases. This option isn’t directly supported by Documenso without changing the code.
+
+## 2\. Create your own
+
+Since the cryptography behind certificates is freely available as open source you could generate your own using OpenSSL for example. Since it’s hardly more work than option 1 (using Documenso at least), this would be my minimum effort recommendation. Having a self-created (“self-signed”) certificate doesn’t add much in terms of regulation but it guarantees the document’s integrity, meaning no changes have been made after signing². What this doesn’t give you, is the famous green checkmark in Adobe Acrobat. Why? Because you aren’t on the list of providers Adobe “trusts”.³
+
+## 3\. Buy a “trusted” certificate.
+
+There are Certificate Authorities (CAs) that can sell you a certificate⁴. The service they provide is, that they validate your name (personal certificates) or your organization’s name (corporate certificate) before creating your certificate for you, just like you did in option 2. The difference is, that they are listed on the previously mentioned trust lists (e.g. Adobe’s) and thus the resulting signatures get a nice, green checkmark in Adobe Reader⁵
+
+## 4\. Becoming a Trusted Certificate Authority (CA) yourself and create your own certificate
+
+This option is an incredibly complex endeavour, requiring a lot of effort and skill. It can be done, as there are multiple CAs around the world. Is it worth the effort? That depends a lot on what you’re trying to accomplish.
+
+<center>.&nbsp;&nbsp;.&nbsp;&nbsp;.</center>
+
+## What we did
+
+Having briefly introduced the options, here is what we did: Since we aim to raise the bar on digital signature proliferation and trust, we opted to buy an “Advanced Personal Certificates for Companies/Organisations” from WiseKey. Thus, documents signed with Documenso’s hosted version look like this:
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-fig-building-documenso.webp"
+    width="1262"
+    height="481"
+    alt="Figure 1"
+  />
+
+  <figcaption className="text-center">The famous green checkmark: Signed by hosted Documenso</figcaption>
+</figure>
+
+There weren’t any deeper reasons we choose WiseKey, other than they offered what we needed and there wasn’t any reason to look much further. While I didn’t map the entire certificate market offering (yet), I’m pretty sure something similar could be found elsewhere. While we opted for option 3, choosing option 2 might be perfectly reasonable considering your use case.⁶
+
+> While this is our setup, for now, we have a bigger plan for this topic. While globally trusted SSL Certificates have been available for free, courtesy of Let’s Encrypt, for a while now, there is no such thing as document signing. And there should be. Not having free and trusted infrastructure for signing is blocking a completely new generation of signing products from being created. This is why we’ll start working on option 4 when the time is right.
+
+Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
+or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>
+
+Join the self-hoster community here: <a href="https://documenso.slack.com/" target="_blank">https://documenso.slack.com/</a>
+
+Best from Hamburg
+
+Timur
+
+\[1\] There are different approaches to signing a document. For the sake of simplicity, here we talk about a document with X inserted signature images, that is afterward signed once the by signing service, i.e. Documenso. If each visual signature should have its own digital one (e.g. QES — eIDAS Level 3), the case is a bit more complex.
+
+\[2\] Of course, the signing service provider technically can change and resign the document, especially in the case mentioned in \[1\]. This can be countered by requiring actual digital signatures from each signer, that are bound to their identity/ account. Creating a completely trustless system in the context however is extremely hard to do and not the most pressing business need for the industry at this point, in my opinion. Though, this would be nice.
+
+\[3\] Adobe, like the EU, has a list of organizations they trust. The Adobe green checkmark is powered by the Adobe trust list, if you want to be trusted by EU standards here: <a href="https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation" target="_blank">https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation</a>, you need to be on the EU trust list. Getting on each list is possible, though the latter is much more work.
+
+\[4\] Technically, they sign your certificate creation request (created by you), containing your info with their certificate (which is trusted), making your certificate trusted. This way, everything you sign with your certificate is seen as trusted. They created their certificate just like you, the difference is they are on the lists, mentioned in \[3\]
+
+\[5\] Why does Adobe get to say, what is trusted? They simply happen to have the most used pdf viewer. And since everyone checks there, whom they consider trusted carries weight. If it should be like this, is a different matter.
+
+\[6\] Self-Signed signatures, even purely visual signatures, are fully legally binding. Why you use changes mainly your confidence in the signature and the burden of proof. Also, some industries require a certain level of signatures e.g. retail loans (QES/ eIDAS Level 3 in the EU).

apps/marketing/content/blog/deploy-with-vercel-supabase-resend.mdx

@@ -1,198 +0,0 @@
----
-title: 'Deploying Documenso with Vercel, Supabase and Resend'
-description: This is the first part of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
-authorName: 'Ephraim Atta-Duncan'
-authorImage: '/blog/blog-author-duncan.jpeg'
-authorRole: 'Software Engineer Intern'
-date: 2023-09-08
-tags:
-  - Open Source
-  - Self Hosting
-  - Tutorial
----
-
-In this article, we'll walk you through how to deploy and self-host Documenso using Vercel, Supabase, and Resend.
-
-You'll learn:
-
-- How to set up a Postgres database using Supabase,
-- How to install SMTP with Resend,
-- How to deploy your project with Vercel.
-
-If you don't know what [Documenso](https://documenso.com/) is, it's an open-source alternative to DocuSign, with the mission to create an open signing infrastructure while embracing openness, cooperation, and transparency.
-
-## Prerequisites
-
-Before we start, make sure you have a [GitHub](https://github.com/signup) account. You also need [Node.js](https://nodejs.org/en) and [npm](https://www.npmjs.com/) installed on your local machine (note: you also have the option to host it on a cloud environment using Gitpod for example; that would be another post). If you need accounts on Vercel, Supabase, and Resend, create them by visiting the [Vercel](https://vercel.com/), [Supabase](https://supabase.com/), and [Resend](https://resend.com/) websites.
-
-Checklist:
-
-- [ ] Have a GitHub account
-- [ ] Install Node.js
-- [ ] Install npm
-- [ ] Have a Vercel account
-- [ ] Have a Supabase account
-- [ ] Have a Resend account
-
-## Step-by-Step guide to deploying Documenso with Vercel, Supabase, and Resend
-
-To deploy Documenso, we'll take the following steps:
-
-1. Fork the Documenso repository
-2. Clone the forked repository and install dependencies
-3. Create a new project on Supabase
-4. Copy the Supabase Postgres database connection URL
-5. Create a `.env` file
-6. Run the migration on the Supabase Postgres Database
-7. Get your SMTP Keys on Resend
-8. Create a new project on Vercel
-9. Add Environment Variables to your Vercel project
-
-So, you're ready? Let’s dive in!
-
-### Step 1: Fork the Documenso repository
-
-Start by creating a fork of Documenso on GitHub. You can do this by visiting the [Documenso repository](https://github.com/documenso/documenso) and clicking on the 'Fork' button. (Also, star the repo!)
-
-![Documenso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkcujctpf86p56bju3mq.png)
-
-Choose your GitHub profile as the owner and click on 'Create fork' to create a fork of the repo.
-
-![Fork the Documenso repository on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf49r2byu9nnd1465niy.png)
-
-### Step 2: Clone the forked repository and install dependencies
-
-Clone the forked repository to your local machine in any directory of your choice. Open your terminal and enter the following commands:
-
-```bash
-# Clone the repo using Github CLI
-gh repo clone [your_github_username]/documenso
-
-# Clone the repo using Git
-git clone <https://github.com/[your_github_username]/documenso.git>
-```
-
-You can now navigate into the directory and install the project’s dependencies:
-
-```bash
-cd documenso
-npm install
-```
-
-### Step 3: Create a new project on Supabase
-
-Now, let's set up the database.
-
-If you haven't already, create a new project on Supabase. This will automatically create a new Postgres database for you.
-
-On your Supabase dashboard, click the '**New project**' button and choose your organization.
-
-On the '**Create a new project**' page, set a database name of **documenso** and a secure password for your database. Choose a region closer to you, a pricing plan, and click on '**Create new project**' to create your project.
-
-![Create a new project on Supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5lqz771iupjyi1ekfdz.png)
-
-### Step 4: Copy the Supabase Postgres database connection URL
-
-In your project, click the '**Settings**' icon at the bottom left.
-
-Under the '**Project Settings**' section, click '**Database**' and scroll down to the '**Connection string**' section. Copy the '**URI**' and update it with the password you chose in the previous step.
-
-![Copy the Supabase Postgres database connection URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1ldu3qrg9moednbzjij.png)
-
-### Step 5: Create a `.env` file
-
-Create a `.env` file in the root of your project by copying the contents of the `.env.example` file.
-
-Add the connection string you copied from your Supabase dashboard to the `DATABASE_URL` variable in the `.env` file.
-
-The `.env` should look like this:
-
-```bash
-DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
-```
-
-### Step 6: Run the migration on the Supabase Postgres Database
-
-Run the migration on the Supabase Postgres Database using the following command:
-
-```bash
-npx prisma migrate deploy
-```
-
-### Step 7: Get your SMTP Keys on Resend
-
-So, you've just cloned Documenso, installed dependencies on your local machine, and set your database using Supabase. Now, SMTP is missing. Emails won't go out! Let's fix it with Resend.
-
-In the **[Resend](https://resend.com/)** dashboard, click 'Add API Key' to create a key for Resend SMTP.
-
-![Create a key for Resend SMTP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh2rztgn09mlvecl34i5.png)
-
-Next, add and verify your domain in the '**Domains**' section on the sidebar. This will allow you to send emails from any address associated with your domain.
-
-![Verify your domain on Resend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxgie0esz530vq5a494o.png)
-
-You can update your `.env` file with the following:
-
-```jsx
-SMTP_MAIL_HOST = 'smtp.resend.com';
-SMTP_MAIL_PORT = '25';
-SMTP_MAIL_USER = 'resend';
-SMTP_MAIL_PASSWORD = 'YOUR_RESEND_API_KEY';
-MAIL_FROM = 'noreply@[YOUR_DOMAIN]';
-```
-
-### Step 8: Create a new project on Vercel
-
-You set the database with Supabase and are SMTP-ready with Resend. Almost there! The next step is to deploy the project — we'll use Vercel for that.
-
-On your Vercel dashboard, create a new project using the forked project from your GitHub repositories. Select the project among the options and click '**Import**' to start running Documenso.
-
-![Create a new project on Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdy97tltpnu7vf4fc11f.png)
-
-### Step 9: Add Environment Variables to your Vercel project
-
-In the '**Configure Project**' page, adding the required Environmental Variables is essential to ensure the application deploys without any errors.
-
-Specifically, for the `NEXT_PUBLIC_WEBAPP_URL` and `NEXTAUTH_URL` variables, you must add `.vercel.app` to your Project Name. This will form the deployment URL, which will be in the format: `https://[project_name].vercel.app`.
-
-For example, in my case, the deployment URL is `https://documenso-supabase-web.vercel.app`.
-
-![Add Environment Variables to your Vercel project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aru33fk1i19h0valffow.png)
-
-This is a sample `.env` to deploy. Copy and paste it to auto-populate the fields and click ‘**Deploy.’** Now, you only need to wait for your project to deploy. You’re going live — enjoy!
-
-```bash
-DATABASE_URL='postgresql://postgres:typeinastrongpassword@db.njuigobjlbteahssqbtw.supabase.co:5432/postgres'
-
-NEXT_PUBLIC_WEBAPP_URL='https://documenso-supabase-web.vercel.app'
-NEXTAUTH_SECRET='something gibrish to encrypt your jwt tokens'
-NEXTAUTH_URL='https://documenso-supabase-web.vercel.app'
-
-# Get a Sendgrid Api key here: <https://signup.sendgrid.com>
-SENDGRID_API_KEY=''
-
-# Set SMTP credentials to use SMTP instead of the Sendgrid API.
-SMTP_MAIL_HOST='smtp.resend.com'
-SMTP_MAIL_PORT='25'
-SMTP_MAIL_USER='resend'
-SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY'
-MAIL_FROM='noreply@[YOUR_DOMAIN]'
-
-NEXT_PUBLIC_ALLOW_SIGNUP=true
-```
-
-## Wrapping up
-
-![Deploying Documenso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/secg29j9j40o4u2oa8o8.png)
-
-Congratulations! 🎉 You've successfully deployed Documenso using Vercel, Supabase, and Resend. You're now ready to create and sign your own documents with your self-hosted Documenso!
-
-In this step-by-step guide, you learned how to:
-
-- set up a Postgres database using Supabase,
-- install SMTP with Resend,
-- deploy your project with Vercel.
-
-Over to you! How was the tutorial? If you enjoyed it, [please do share](https://twitter.com/documenso/status/1700141802693480482)! And if you have any questions or comments, please reach out to me on [Twitter / X](https://twitter.com/EphraimDuncan_) (DM open) or [Discord](https://documen.so/discord).
-
-We're building an open-source alternative to DocuSign and welcome every contribution. Head over to the GitHub repository and [leave us a Star](https://github.com/documenso/documenso)!

apps/marketing/content/blog/next.mdx

@@ -1,56 +0,0 @@
----
-title: Preview the next Documenso
-description: We're redesigning Documenso by making it more elegant and appropriately playful. Here's a sneak peek.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2023-08-21
-tags:
-  - Design
-  - Preview
----
-
-Since we launched [Documenso 0.9 on Product Hunt](https://producthunt.com/products/documenso#documenso) last May, the team's been hard at work behind the scenes to ramp up development and design to deliver an excellent next version.
-
-Last week, Lucas shared the reasoning on [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).
-
-Today, I'm pleased to share with you a preview of the next Documenso.
-
-## Preview the next Documenso
-
-We redesigned the whole signing flow to make it more appealing and more convenient.
-
-We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it. 
-
-**We call it happy minimalism.**
-
-We paid particular attention to the moment of signing, which should be celebrated. 
-
-The image below is the final bloom of the completion celebration we added:
-
-<figure>
-  <MdxNextImage
-    src="/blog/blog-fig-preview-documenso.webp"
-    width="2000"
-    height="1268"
-    alt="Figure 1"
-  />
-
-  <figcaption className="text-center">"You've signed a new document."</figcaption>
-</figure>
-
-## Kicking off a new phase of collaboration
-
-This preview also is the kickoff for a new phase of how we collaborate with the community.
-
-We recently [switched to Discord](https://documenso.com/blog/switching-from-slack-to-discord) to set up a more developer-friendly, community-driven environment, and we just released the [public roadmap](https://documen.so/launches).
-
-As always, if you have any questions or feedback, please reach out. We love to hear from you.
-
-Best from Hamburg,
-
-Timur
-
-Make sure to [star the GitHub repository](https://documen.so/github), [follow us on X](http://documen.so/twitter) and [join the Discord server](https://documen.so/discord) to keep up to date with all things Documenso.
-
-We're building a beautiful, open-source alternative to DocuSign.

apps/marketing/content/blog/pre-seed.mdx

@@ -1,36 +0,0 @@
----
-title: Announcing Pre-Seed and Open Metrics
-description: We are exicited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2023-08-17
-tags:
-  - Funding
-  - Metrics
-  - Open Startup
----
-
-Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it. 
-
-## Two more for the road (to open signing)
-We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso.
-
-## Open Source, Open Metrics
-If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com. 
-
-The two main takeaways are:
-
-- "Any Startup that shares its metrics as open as technically and operationally possible is an Open Startup."
-- "Why should I care? Frankly speaking, Open Startups have a tough time screwing you over."
-
-The more open the culture, the less shady stuff is going on. While this may sound trivial, the implications are profound. A new generation of organizations, operating more ethically and responsibly simply because everything is out in the open. 
-
-For us, there are two sides to being an Open Startup:
-
-- The company side: Sharing Financial KPIs like growth, funding, team structure, salary, internal processes, and tools.
-- The product side: Sharing insights and data like usage, reach, and GitHub activity.
-
-Both sides aim to contribute to the global knowledge base of how startups work, specifically COSS startups. As we see more and more COSS, best practices and business insights should be broadly available to let the space mature. As we contribute code to the global community, we also contribute our business knowledge to help bring about even more COSS. 
-
-Starting today, we're releasing a lot of our data as part of the Open Startup movement. You can find the juicy details on our funding and more here: [documen.so/open](https://documen.so/open)

apps/marketing/content/blog/why-were-doing-a-rewrite.mdx

@@ -1,113 +0,0 @@
----
-title: Why we're doing a rewrite
-description: As we move beyond MVP and onto creating the open signing infrastructure we all deserve we need to take a quick pit-stop.
-authorName: 'Lucas Smith'
-authorImage: '/blog/blog-author-lucas.png'
-authorRole: 'Co-Founder'
-date: 2023-08-05
-tags:
-  - Community
-  - Development
----
-
-<figure>
-  <MdxNextImage
-    src="/blog/blog-banner-rewrite.png"
-    width="1260"
-    height="630"
-    alt="Next generation documenso"
-  />
-
-  <figcaption className="text-center">
-    The next generation of Documenso and signing infrastructure.
-  </figcaption>
-</figure>
-
-> TLDR; We're rewriting Documenso to move on from our MVP foundations and create an even better base for the project. This rewrite will provide us the opportunity to fix a few things within the project while enabling a faster development process moving forward.
-
-# Introduction
-
-At Documenso, we're building the next generation of signing infrastructure with a focus on making it inclusive and accessible for all. To do this we need to ensure that the software we write is also inclusive and accessible and for this reason we’ve decided to take a step back and perform a _quick_ rewrite.
-
-Although we've achieved validated MVP status and gained paying customers, we're still quite far from our goal of creating a trusted, open signing experience. To move closer to that future, we need to step back and focus on the project's foundations to ensure we can solve all the items we set out to on our current homepage.
-
-Fortunately, this wasn't a case of someone joining the team and proposing a rewrite due to a lack of understanding of the codebase and context surrounding it. Prior to joining Documenso as a co-founder, I had spent an extensive amount of time within the Documenso codebase and had a fairly intimate understanding of what was happening for the most part. This knowledge allowed me to make the fair and simultaneously hard call to take a quick pause so we can rebuild our current foundations to enable accessibility and a faster delivery time in the future.
-
-# The Reasoning: TypeScript
-
-Our primary reason for the rewrite is to better leverage the tools and technologies we've already chosen, namely TypeScript. While Documenso currently uses TypeScript, it's not fully taking advantage of its safety features, such as generics and type guards.
-
-The codebase currently has several instances of `any` types, which is expected when working in an unknown domain where object models aren't fully understood before exploration and experimentation. These `any`s initially sped up development, but have since become a hindrance due to the lack of type information, combined with prop drilling. As a result, it's necessary to go through a lot of context to understand the root of any given issue.
-
-The rewrite is using TypeScript to its full potential, ensuring that every interaction is strongly typed, both through general TypeScript tooling and the introduction of [Zod](https://github.com/colinhacks/zod), a validation library with excellent TypeScript support. With these choices, we can ensure that the codebase is robust to various inputs and states, as most issues will be caught during compile time and flagged within a developer's IDE.
-
-# The Reasoning: Stronger API contracts
-
-In line with our pattern of creating strongly typed contracts, we've decided to use [tRPC](https://github.com/trpc/trpc) for our internal API. This enables us to share types between our frontend and backend and establish a solid contract for interactions between the two. This is in contrast to the currently untyped API endpoints in Documenso, which are accessed using the `fetch` API that is itself untyped.
-
-Using tRPC drastically reduces the chance of failures resulting from mundane things like argument or response shape changes during updates and upgrades. We made this decision easily because tRPC is a mature technology with no signs of losing momentum any time soon.
-
-Additionally, many of our open-source friends have made the same choice for similar reasons.
-
-# The Reasoning: Choosing exciting technologies
-
-Although we already work with what I consider to be a fun stack that includes Next.js, Prisma, Tailwind, and more, it's no secret that contributors enjoy working with new technologies that benefit them in their own careers and projects.
-
-To take advantage of this, we have decided to use Next.js 13 and React's new server component and actions architecture. Server components are currently popular among developers, with many loving and hating them at the same time.
-
-I have personally worked with server components and actions since they were first released in October 2022 and have dealt with most of the hiccups and limitations along the way. Now, in July 2023, I believe they are in a much more stable place and are ready to be adopted, with their benefits being recognised by many.
-
-By choosing to use server components and actions, we hope to encourage the community to participate more than they otherwise might. However, we are only choosing this because it has become more mature and stable. We will not choose things that are less likely to become the de-facto solution in the future, as we do not wish to inherit a pile of tech debt later on.
-
-# The Reasoning: Allowing concurrent work
-
-Another compelling reason for the rewrite was to effectively modularise code so we can work on features concurrently and without issue. This means extracting as much as possible out of components, API handlers and more and into a set of methods and functions that attempt to focus on just one thing.
-
-In performing this work we should be able to easily make refactors and other changes to various parts of the code without stepping on each others feet, this also grants us the ability to upgrade or deprecate items as required by sticking to the contract of the previous method.
-
-Additionally, this makes testing a much easier task as we can focus more on units of work rather than extensive end to end testing although we aim to have both, just not straight away.
-
-# The Reasoning: Licensing of work
-
-Another major reasoning for the rewrite is to ensure that all work performed on the project by both our internal team and external contributors is licensed in a way that benefits the project long-term. Prior to the rewrite contributors would create pull requests that would be merged in without any further process outside of the common code-review and testing cycles.
-
-This was fine for the most part since we were simply working on the MVP but now as we move towards an infrastructure focus we intend on taking on enterprise clients who will have a need for a non-GPLv3 license since interpretations of it can be quite harmful to private hosting, to facilitate this we will require contributors to sign a contributor license agreement (CLA) prior to their changes being merged which will assign a perpetual license for us to use their code and relicense it as required such as for the use-case above.
-
-While some might cringe at the idea of signing a CLA, we want to offer a compelling enterprise offering through means of dual-licensing. Great enterprise adoption is one of the cornerstones of our strategy and will be key to funding community and product development long-term.
-
-_Do note that the above does not mean that we will ever go closed-source, it’s a point in our investor agreements that [https://github.com/documenso/documenso](https://github.com/documenso/documenso) will always remain available and open-source._
-
-# Goals and Non-Goals
-
-Rewriting an application is a monumental task that I have taken on and rejected many times in my career. As I get older, I become more hesitant to perform these rewrites because I understand that systems carry a lot of context and history. This makes them better suited for piecemeal refactoring instead, which avoids learning the lessons of the past all over again during the launch of the rewrite.
-
-To ensure that we aren't just jumping off the deep end, I have set out a list of goals and non-goals to keep this rewrite lean and affordable.
-
-### Goals
-
-- Provide a clean design and interface for the newly rewritten application that creates a sense of trust and security at first glance.
-- Create a stable foundation and architecture that will allow for growth into our future roadmap items (teams, automation, workflows, etc.).
-- Create a robust system that requires minimal context through strong contracts and typing.
-
-### Non-Goals
-
-- Change the database schema (we don't want to make migration harder than it needs to be, thus all changes must be additive).
-- Add too many features that weren't in the system prior to the rewrite.
-- Remove any features that were in the older version of Documenso, such as free signatures (signatures that have no corresponding field).
-
-# Rollout Plan
-
-Thanks to the constraints listed above our rollout will hopefully be fairly painless, still to be safe we plan on doing the following.
-
-1.  In the current [testing environment](https://test.documenso.com), create and sign a number of documents leaving many in varying states of completion.
-2.  Deploy the rewrite to the testing environment and verify that all existing documents and information is retrievable and modifiable without any issue.
-3.  Create another set of documents using the new rewrite and verify that all interactions between authoring and signing work as expected.
-4.  Repeat this until we reach a general confidence level (expectation of two weeks).
-
-Once we’ve reached the desired confidence level with our testing environment we will look to deploy the rewrite to the production environment ensuring that we’ve performed all the required backups in the event of a catastrophic failure.
-
-# Want to help out?
-
-We’re currently working on the **[feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh)** branch on GitHub, we aim to have a CLA available to sign in the coming days so we can start accepting external contributions asap. While we’re nearing the end-stage of the rewrite we will be throwing up a couple of bounties shortly for things like [Husky](https://github.com/typicode/husky) and [Changesets](https://github.com/changesets/changesets).
-
-Keep an eye on our [GitHub issues](https://github.com/documenso/documenso/issues) to stay up to date!

apps/marketing/next.config.js

@@ -8,50 +8,9 @@ const { parsed: env } = require('dotenv').config({
 
 /** @type {import('next').NextConfig} */
 const config = {
-  experimental: {
-    serverActions: true,
-  },
   reactStrictMode: true,
   transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
-  modularizeImports: {
-    'lucide-react': {
-      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
-    },
-  },
-  async headers() {
-    return [
-      {
-        source: '/:path*',
-        headers: [
-          {
-            key: 'x-dns-prefetch-control',
-            value: 'on',
-          },
-          {
-            key: 'strict-transport-security',
-            value: 'max-age=31536000; includeSubDomains; preload',
-          },
-          {
-            key: 'x-frame-options',
-            value: 'SAMEORIGIN',
-          },
-          {
-            key: 'x-content-type-options',
-            value: 'nosniff',
-          },
-          {
-            key: 'referrer-policy',
-            value: 'strict-origin-when-cross-origin',
-          },
-          {
-            key: 'permissions-policy',
-            value:
-              'accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()',
-          },
-        ],
-      },
-    ];
-  },
+  env,
 };
 
 module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -4,11 +4,10 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "PORT=3001 next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "lint": "next lint"
   },
   "dependencies": {
     "@documenso/lib": "*",
@@ -30,7 +29,6 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "recharts": "^2.7.2",
-    "sharp": "0.32.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },

apps/marketing/process-env.d.ts

@@ -1,7 +1,6 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    NEXT_PUBLIC_WEBAPP_URL?: string;
-    NEXT_PUBLIC_MARKETING_URL?: string;
+    NEXT_PUBLIC_SITE_URL?: string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

apps/marketing/src/app/(marketing)/[content]/page.tsx

@@ -5,7 +5,7 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = () =>
+export const generateStaticParams = async () =>
   allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {

apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx

@@ -1,76 +0,0 @@
-import { ImageResponse } from 'next/server';
-
-import { allBlogPosts } from 'contentlayer/generated';
-
-export const runtime = 'edge';
-
-export const size = {
-  width: 1200,
-  height: 630,
-};
-
-export const contentType = 'image/png';
-
-type BlogPostOpenGraphImageProps = {
-  params: { post: string };
-};
-
-export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) {
-  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
-
-  if (!blogPost) {
-    return null;
-  }
-
-  // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
-  // to a constant will break og image generation.
-  const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([
-    fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) =>
-      res.arrayBuffer(),
-    ),
-    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
-      res.arrayBuffer(),
-    ),
-    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
-      async (res) => res.arrayBuffer(),
-    ),
-    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
-      res.arrayBuffer(),
-    ),
-  ]);
-
-  return new ImageResponse(
-    (
-      <div tw="relative h-full w-full flex flex-col items-center justify-center text-center">
-        {/* @ts-expect-error Lack of typing from ImageResponse */}
-        <img src={backgroundImage} alt="og-background" tw="absolute inset-0 w-full h-full" />
-
-        {/* @ts-expect-error Lack of typing from ImageResponse */}
-        <img src={logoImage} alt="logo" tw="h-8" />
-
-        <h1 tw="mt-8 text-6xl text-center flex items-center justify-center w-full max-w-[800px] font-bold text-center mx-auto">
-          {blogPost.title}
-        </h1>
-
-        <p tw="font-normal">Written by {blogPost.authorName}</p>
-      </div>
-    ),
-    {
-      ...size,
-      fonts: [
-        {
-          name: 'Inter',
-          data: interRegular,
-          style: 'normal',
-          weight: 400,
-        },
-        {
-          name: 'Inter',
-          data: interBold,
-          style: 'normal',
-          weight: 700,
-        },
-      ],
-    },
-  );
-}

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -7,7 +7,7 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = () =>
+export const generateStaticParams = async () =>
   allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
@@ -17,10 +17,7 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
     notFound();
   }
 
-  return {
-    title: `Documenso - ${blogPost.title}`,
-    description: blogPost.description,
-  };
+  return { title: `Documenso - ${blogPost.title}` };
 };
 
 const mdxComponents: MDXComponents = {

apps/marketing/src/app/(marketing)/claimed/page.tsx

@@ -27,11 +27,7 @@ export type ClaimedPlanPageProps = {
 export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlanPageProps) {
   const { sessionId } = searchParams;
 
-  if (typeof sessionId !== 'string') {
-    redirect('/');
-  }
-
-  const session = await stripe.checkout.sessions.retrieve(sessionId);
+  const session = await stripe.checkout.sessions.retrieve(sessionId as string);
 
   const user = await prisma.user.findFirst({
     where: {
@@ -161,7 +157,8 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
         </p>
 
         <Link
-          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`}
+          // eslint-disable-next-line turbo/no-undeclared-env-vars
+          href={`${process.env.NEXT_PUBLIC_APP_URL}/login`}
           target="_blank"
           className="mt-4 block"
         >

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -2,7 +2,7 @@
 
 import { HTMLAttributes, useEffect, useState } from 'react';
 
-import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -53,33 +53,30 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
-          <PieChart width={400} height={400}>
-            <Pie
-              data={CAP_TABLE}
-              cx="50%"
-              cy="50%"
-              labelLine={false}
-              label={renderCustomizedLabel}
-              outerRadius={160}
-              innerRadius={80}
-              fill="#8884d8"
-              dataKey="percentage"
-            >
-              {CAP_TABLE.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-              ))}
-            </Pie>
-            <Legend
-              formatter={(value) => {
-                return <span className="text-sm text-black">{value}</span>;
-              }}
-            />
-            <Tooltip
-              formatter={(percent: number, name, props) => {
-                return [`${percent}%`, name || props['name'] || props['payload']['name']];
-              }}
-            />
-          </PieChart>
+          <ResponsiveContainer width="100%" height={400}>
+            <PieChart>
+              <Pie
+                data={CAP_TABLE}
+                cx="50%"
+                cy="50%"
+                labelLine={false}
+                label={renderCustomizedLabel}
+                outerRadius={160}
+                innerRadius={80}
+                fill="#8884d8"
+                dataKey="percentage"
+              >
+                {CAP_TABLE.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip
+                formatter={(percent: number, name, props) => {
+                  return [`${percent}%`, name || props['name'] || props['payload']['name']];
+                }}
+              />
+            </PieChart>
+          </ResponsiveContainer>
         )}
       </div>
     </div>

apps/marketing/src/app/(marketing)/open/data.ts

@@ -56,11 +56,11 @@ export const FUNDING_RAISED = [
   },
   {
     date: '2023-05',
-    amount: 290_000,
+    amount: 300_000,
   },
   {
     date: '2023-07',
-    amount: 1_540_000,
+    amount: 1_550_000,
   },
 ];
 

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -8,7 +8,7 @@ import { FundingRaised } from './funding-raised';
 import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
 
-export const revalidate = 3600;
+export const revalidate = 86400;
 
 const ZGithubStatsResponse = z.object({
   stargazers_count: z.number(),
@@ -43,7 +43,7 @@ export default async function OpenPage() {
       accept: 'application/vnd.github.v3+json',
     },
   })
-    .then(async (res) => res.json())
+    .then((res) => res.json())
     .then((res) => ZGithubStatsResponse.parse(res));
 
   const { total_count: mergedPullRequests } = await fetch(
@@ -54,7 +54,7 @@ export default async function OpenPage() {
       },
     },
   )
-    .then(async (res) => res.json())
+    .then((res) => res.json())
     .then((res) => ZMergedPullRequestsResponse.parse(res));
 
   const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
@@ -62,7 +62,7 @@ export default async function OpenPage() {
       accept: 'application/json',
     },
   })
-    .then(async (res) => res.json())
+    .then((res) => res.json())
     .then((res) => ZStargazersLiveResponse.parse(res));
 
   return (
@@ -70,12 +70,9 @@ export default async function OpenPage() {
       <div className="flex flex-col items-center justify-center">
         <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
 
-        <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
           All our metrics, finances, and learnings are public. We believe in transparency and want
-          to share our journey with you. You can read more about why here:{' '}
-          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
-            Announcing Open Metrics
-          </a>
+          to share our journey with you.
         </p>
       </div>
 

apps/marketing/src/app/(marketing)/page.tsx

@@ -24,7 +24,7 @@ export default async function IndexPage() {
       accept: 'application/vnd.github.v3+json',
     },
   })
-    .then(async (res) => res.json())
+    .then((res) => res.json())
     .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined))
     .catch(() => undefined);
 

apps/marketing/src/app/layout.tsx

@@ -21,12 +21,12 @@ export const metadata = {
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
     type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
   },
   twitter: {
     site: '@documenso',
     card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
   },

apps/marketing/src/app/not-found.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-
-import { motion } from 'framer-motion';
-import { ChevronLeft } from 'lucide-react';
-
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-
-import backgroundPattern from '~/assets/background-pattern.png';
-
-export default function NotFound() {
-  const router = useRouter();
-
-  return (
-    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
-      <div className="absolute -inset-24 -z-10">
-        <motion.div
-          className="flex h-full w-full items-center justify-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
-        >
-          <Image
-            src={backgroundPattern}
-            alt="background pattern"
-            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
-            priority
-          />
-        </motion.div>
-      </div>
-
-      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
-        <div>
-          <p className="text-muted-foreground font-semibold">404 Page not found</p>
-
-          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
-
-          <p className="text-muted-foreground mt-4 text-sm">
-            The page you are looking for was moved, removed, renamed or might never have existed.
-          </p>
-
-          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
-            <Button
-              variant="ghost"
-              className="w-32"
-              onClick={() => {
-                void router.back();
-              }}
-            >
-              <ChevronLeft className="mr-2 h-4 w-4" />
-              Go Back
-            </Button>
-
-            <Button className="w-32" asChild>
-              <Link href="/">Home</Link>
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/marketing/src/app/robots.ts

@@ -1,14 +0,0 @@
-import { MetadataRoute } from 'next';
-
-import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
-
-export default function robots(): MetadataRoute.Robots {
-  return {
-    rules: [
-      {
-        userAgent: '*',
-      },
-    ],
-    sitemap: `${getBaseUrl()}/sitemap.xml`,
-  };
-}

apps/marketing/src/app/sitemap.ts

@@ -1,41 +0,0 @@
-import { MetadataRoute } from 'next';
-
-import { allBlogPosts, allGenericPages } from 'contentlayer/generated';
-
-import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
-
-export default function sitemap(): MetadataRoute.Sitemap {
-  const baseUrl = getBaseUrl();
-  const lastModified = new Date();
-
-  return [
-    {
-      url: baseUrl,
-      lastModified,
-    },
-    ...allGenericPages.map((doc) => ({
-      url: `${baseUrl}/${doc._raw.flattenedPath}`,
-      lastModified,
-    })),
-    {
-      url: `${baseUrl}/blog`,
-      lastModified,
-    },
-    ...allBlogPosts.map((doc) => ({
-      url: `${baseUrl}/${doc._raw.flattenedPath}`,
-      lastModified,
-    })),
-    {
-      url: `${baseUrl}/open`,
-      lastModified,
-    },
-    {
-      url: `${baseUrl}/oss-friends`,
-      lastModified,
-    },
-    {
-      url: `${baseUrl}/pricing`,
-      lastModified,
-    },
-  ];
-}

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Info } from 'lucide-react';
+import { Info, Loader } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -63,9 +63,7 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
 
   const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => {
-        setTimeout(resolve, 1000);
-      });
+      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
 
       const [redirectUrl] = await Promise.all([
         claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),
@@ -87,7 +85,7 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isSubmitting && setOpen(value)}>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
 
       <DialogContent>
@@ -99,49 +97,50 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
           </DialogDescription>
         </DialogHeader>
 
-        <form onSubmit={handleSubmit(onFormSubmit)}>
-          <fieldset disabled={isSubmitting} className={cn('flex flex-col gap-y-4', className)}>
-            {params?.get('cancelled') === 'true' && (
-              <div className="rounded-lg border border-yellow-400 bg-yellow-50 p-4">
-                <div className="flex">
-                  <div className="flex-shrink-0">
-                    <Info className="h-5 w-5 text-yellow-400" />
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm leading-5 text-yellow-700">
-                      You have cancelled the payment process. If you didn't mean to do this, please
-                      try again.
-                    </p>
-                  </div>
+        <form
+          className={cn('flex flex-col gap-y-4', className)}
+          onSubmit={handleSubmit(onFormSubmit)}
+        >
+          {params?.get('cancelled') === 'true' && (
+            <div className="rounded-lg border border-yellow-400 bg-yellow-50 p-4">
+              <div className="flex">
+                <div className="flex-shrink-0">
+                  <Info className="h-5 w-5 text-yellow-400" />
+                </div>
+                <div className="ml-3">
+                  <p className="text-sm leading-5 text-yellow-700">
+                    You have cancelled the payment process. If you didn't mean to do this, please
+                    try again.
+                  </p>
                 </div>
               </div>
-            )}
-
-            <div>
-              <Label className="text-slate-500">Name</Label>
-
-              <Input type="text" className="mt-2" {...register('name')} autoFocus />
-
-              <FormErrorMessage className="mt-1" error={errors.name} />
             </div>
+          )}
 
-            <div>
-              <Label className="text-slate-500">Email</Label>
+          <div>
+            <Label className="text-slate-500">Name</Label>
 
-              <Input type="email" className="mt-2" {...register('email')} />
+            <Input type="text" className="mt-2" {...register('name')} autoFocus />
 
-              <FormErrorMessage className="mt-1" error={errors.email} />
-            </div>
+            <FormErrorMessage className="mt-1" error={errors.name} />
+          </div>
 
-            <Button type="submit" size="lg" loading={isSubmitting}>
-              Claim the Community Plan (
-              {/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
-              {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
-                ? 'Monthly'
-                : 'Yearly'}
-              )
-            </Button>
-          </fieldset>
+          <div>
+            <Label className="text-slate-500">Email</Label>
+
+            <Input type="email" className="mt-2" {...register('email')} />
+
+            <FormErrorMessage className="mt-1" error={errors.email} />
+          </div>
+
+          <Button type="submit" size="lg" disabled={isSubmitting}>
+            {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+            Claim the Community Plan ({/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
+            {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
+              ? 'Monthly'
+              : 'Yearly'}
+            )
+          </Button>
         </form>
       </DialogContent>
     </Dialog>

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

@@ -3,28 +3,12 @@ import { HTMLAttributes } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Github, MessagesSquare, Twitter } from 'lucide-react';
+import { Github, Slack, Twitter } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
-const SOCIAL_LINKS = [
-  { href: 'https://twitter.com/documenso', icon: <Twitter className="h-6 w-6" /> },
-  { href: 'https://github.com/documenso/documenso', icon: <Github className="h-6 w-6" /> },
-  { href: 'https://documen.so/discord', icon: <MessagesSquare className="h-6 w-6" /> },
-];
-
-const FOOTER_LINKS = [
-  { href: '/pricing', text: 'Pricing' },
-  { href: '/blog', text: 'Blog' },
-  { href: '/open', text: 'Open' },
-  { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
-  { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
-  { href: 'mailto:support@documenso.com', text: 'Support' },
-  { href: '/privacy', text: 'Privacy' },
-];
-
 export const Footer = ({ className, ...props }: FooterProps) => {
   return (
     <div className={cn('border-t py-12', className)} {...props}>
@@ -35,25 +19,65 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </Link>
 
           <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-4 text-[#8D8D8D]">
-            {SOCIAL_LINKS.map((link, index) => (
-              <Link key={index} href={link.href} target="_blank" className="hover:text-[#6D6D6D]">
-                {link.icon}
-              </Link>
-            ))}
+            <Link
+              href="https://twitter.com/documenso"
+              target="_blank"
+              className="hover:text-[#6D6D6D]"
+            >
+              <Twitter className="h-6 w-6" />
+            </Link>
+
+            <Link
+              href="https://github.com/documenso/documenso"
+              target="_blank"
+              className="hover:text-[#6D6D6D]"
+            >
+              <Github className="h-6 w-6" />
+            </Link>
+
+            <Link
+              href="https://documenso.slack.com"
+              target="_blank"
+              className="hover:text-[#6D6D6D]"
+            >
+              <Slack className="h-6 w-6" />
+            </Link>
           </div>
         </div>
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
-          {FOOTER_LINKS.map((link, index) => (
-            <Link
-              key={index}
-              href={link.href}
-              target={link.target}
-              className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
-            >
-              {link.text}
-            </Link>
-          ))}
+          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
+            Blog
+          </Link>
+
+          <Link
+            href="/pricing"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Pricing
+          </Link>
+
+          <Link
+            href="https://status.documenso.com"
+            target="_blank"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Status
+          </Link>
+
+          <Link
+            href="mailto:support@documenso.com"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Support
+          </Link>
+
+          <Link
+            href="/privacy"
+            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
+          >
+            Privacy
+          </Link>
         </div>
       </div>
       <div className="mx-auto mt-4 w-full max-w-screen-xl px-8 md:mt-12 lg:mt-24">

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

@@ -1,37 +1,26 @@
-'use client';
-
-import { HTMLAttributes, useState } from 'react';
+import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
 import { cn } from '@documenso/ui/lib/utils';
 
-import { HamburgerMenu } from './mobile-hamburger';
-import { MobileNavigation } from './mobile-navigation';
-
 export type HeaderProps = HTMLAttributes<HTMLElement>;
 
 export const Header = ({ className, ...props }: HeaderProps) => {
-  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
-
   return (
     <header className={cn('flex items-center justify-between', className)} {...props}>
-      <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
-        <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
+      <Link href="/">
+        <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
       </Link>
 
-      <div className="hidden items-center gap-x-6 md:flex">
-        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
-          Pricing
-        </Link>
-
+      <div className="flex items-center gap-x-6">
         <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
           Blog
         </Link>
 
-        <Link href="/open" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
-          Open
+        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Pricing
         </Link>
 
         <Link
@@ -42,15 +31,6 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           Sign in
         </Link>
       </div>
-
-      <HamburgerMenu
-        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
-        isMenuOpen={isHamburgerMenuOpen}
-      />
-      <MobileNavigation
-        isMenuOpen={isHamburgerMenuOpen}
-        onMenuOpenChange={setIsHamburgerMenuOpen}
-      />
     </header>
   );
 };

apps/marketing/src/components/(marketing)/mobile-hamburger.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { Menu, X } from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export interface HamburgerMenuProps {
-  isMenuOpen: boolean;
-  onToggleMenuOpen?: () => void;
-}
-
-export const HamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
-  return (
-    <div className="flex md:hidden">
-      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
-        {isMenuOpen ? <X /> : <Menu />}
-      </Button>
-    </div>
-  );
-};

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -1,126 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { motion, useReducedMotion } from 'framer-motion';
-import { Github, MessagesSquare, Twitter } from 'lucide-react';
-
-import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
-
-export type MobileNavigationProps = {
-  isMenuOpen: boolean;
-  onMenuOpenChange?: (_value: boolean) => void;
-};
-
-export const MENU_NAVIGATION_LINKS = [
-  {
-    href: '/blog',
-    text: 'Blog',
-  },
-  {
-    href: '/pricing',
-    text: 'Pricing',
-  },
-  {
-    href: '/open',
-    text: 'Open',
-  },
-  {
-    href: 'https://status.documenso.com',
-    text: 'Status',
-  },
-  {
-    href: 'mailto:support@documenso.com',
-    text: 'Support',
-  },
-  {
-    href: '/privacy',
-    text: 'Privacy',
-  },
-  {
-    href: 'https://app.documenso.com/login',
-    text: 'Sign in',
-  },
-];
-
-export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
-  const shouldReduceMotion = useReducedMotion();
-
-  const handleMenuItemClick = () => {
-    onMenuOpenChange?.(false);
-  };
-
-  return (
-    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
-      <SheetContent className="w-full max-w-[400px]">
-        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
-          <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
-        </Link>
-
-        <motion.div
-          className="mt-12 flex w-full flex-col items-start gap-y-4"
-          initial="initial"
-          animate="animate"
-          transition={{
-            staggerChildren: 0.03,
-          }}
-        >
-          {MENU_NAVIGATION_LINKS.map(({ href, text }) => (
-            <motion.div
-              key={href}
-              variants={{
-                initial: {
-                  opacity: 0,
-                  x: shouldReduceMotion ? 0 : 100,
-                },
-                animate: {
-                  opacity: 1,
-                  x: 0,
-                  transition: {
-                    duration: 0.5,
-                    ease: 'backInOut',
-                  },
-                },
-              }}
-            >
-              <Link
-                className="text-2xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
-                href={href}
-                onClick={() => handleMenuItemClick()}
-              >
-                {text}
-              </Link>
-            </motion.div>
-          ))}
-        </motion.div>
-
-        <div className="mx-auto mt-8 flex w-full flex-wrap items-center gap-x-4 gap-y-4 ">
-          <Link
-            href="https://twitter.com/documenso"
-            target="_blank"
-            className="text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            <Twitter className="h-6 w-6" />
-          </Link>
-
-          <Link
-            href="https://github.com/documenso/documenso"
-            target="_blank"
-            className="text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            <Github className="h-6 w-6" />
-          </Link>
-
-          <Link
-            href="https://documen.so/discord"
-            target="_blank"
-            className="text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            <MessagesSquare className="h-6 w-6" />
-          </Link>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-};

apps/marketing/src/components/(marketing)/password-reveal.tsx

@@ -13,7 +13,7 @@ export const PasswordReveal = ({ password }: PasswordRevealProps) => {
   const [, copy] = useCopyToClipboard();
 
   const onCopyClick = () => {
-    void copy(password).then(() => {
+    copy(password).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'Your password has been copied to your clipboard.',

apps/marketing/src/components/(marketing)/pricing-table.tsx

@@ -22,6 +22,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
   const event = usePlausible();
 
   const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>(() =>
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     params?.get('planId') === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID
       ? 'YEARLY'
       : 'MONTHLY',
@@ -29,9 +30,11 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   const planId = useMemo(() => {
     if (period === 'MONTHLY') {
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
       return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
     }
 
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID;
   }, [period]);
 

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

@@ -21,12 +21,12 @@ import {
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { claimPlan } from '~/api/claim-plan/fetcher';
 
 import { FormErrorMessage } from '../form/form-error-message';
+import { SignaturePad } from '../signature-pad';
 
 const ZWidgetFormSchema = z
   .object({
@@ -124,7 +124,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     setValue('signatureDataUrl', draftSignatureDataUrl);
     setValue('signatureText', '');
 
-    void trigger('signatureDataUrl');
+    trigger('signatureDataUrl');
     setShowSigningDialog(false);
   };
 
@@ -135,10 +135,9 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     signatureText,
   }: TWidgetFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => {
-        setTimeout(resolve, 1000);
-      });
+      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
 
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
       const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
 
       const claimPlanInput = signatureDataUrl
@@ -146,7 +145,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             name,
             email,
             planId,
-            signatureDataUrl: signatureDataUrl,
+            signatureDataUrl: signatureDataUrl!,
             signatureText: null,
           }
         : {
@@ -154,7 +153,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             email,
             planId,
             signatureDataUrl: null,
-            signatureText: signatureText ?? '',
+            signatureText: signatureText!,
           };
 
       const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);

apps/marketing/src/components/signature-pad/canvas.ts

@@ -302,8 +302,8 @@ export class Canvas {
   /**
    * Retrieves the signature as an image blob.
    */
-  public async toBlob(type?: string, quality?: number): Promise<Blob> {
-    const promise = new Promise<Blob>((resolve, reject) => {
+  public toBlob(type?: string, quality?: number): Promise<Blob> {
+    return new Promise((resolve, reject) => {
       this.$canvas.toBlob(
         (blob) => {
           if (!blob) {
@@ -317,7 +317,5 @@ export class Canvas {
         quality,
       );
     });
-
-    return await promise;
   }
 }

apps/marketing/src/components/signature-pad/signature-pad.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import {
+  HTMLAttributes,
+  MouseEvent,
+  PointerEvent,
+  TouchEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { StrokeOptions, getStroke } from 'perfect-freehand';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { getSvgPathFromStroke } from './helper';
+import { Point } from './point';
+
+const DPI = 2;
+
+export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
+  onChange?: (_signatureDataUrl: string | null) => void;
+};
+
+export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProps) => {
+  const $el = useRef<HTMLCanvasElement>(null);
+
+  const [isPressed, setIsPressed] = useState(false);
+  const [points, setPoints] = useState<Point[]>([]);
+
+  const perfectFreehandOptions = useMemo(() => {
+    const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
+
+    return {
+      size,
+      thinning: 0.25,
+      streamline: 0.5,
+      smoothing: 0.5,
+      end: {
+        taper: size * 2,
+      },
+    } satisfies StrokeOptions;
+  }, []);
+
+  const onMouseDown = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    setIsPressed(true);
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    const newPoints = [...points, point];
+
+    setPoints(newPoints);
+
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      if (ctx) {
+        ctx.save();
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const pathData = new Path2D(
+          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
+        );
+
+        ctx.fill(pathData);
+      }
+    }
+  };
+
+  const onMouseMove = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if (!isPressed) {
+      return;
+    }
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    if (point.distanceTo(points[points.length - 1]) > 5) {
+      const newPoints = [...points, point];
+
+      setPoints(newPoints);
+
+      if ($el.current) {
+        const ctx = $el.current.getContext('2d');
+
+        if (ctx) {
+          ctx.restore();
+
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = 'high';
+
+          const pathData = new Path2D(
+            getSvgPathFromStroke(getStroke(points, perfectFreehandOptions)),
+          );
+
+          ctx.fill(pathData);
+        }
+      }
+    }
+  };
+
+  const onMouseUp = (event: MouseEvent | PointerEvent | TouchEvent, addPoint = true) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    setIsPressed(false);
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    const newPoints = [...points];
+
+    if (addPoint) {
+      newPoints.push(point);
+
+      setPoints(newPoints);
+    }
+
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      if (ctx) {
+        ctx.restore();
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const pathData = new Path2D(
+          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
+        );
+
+        ctx.fill(pathData);
+
+        ctx.save();
+      }
+
+      onChange?.($el.current.toDataURL());
+    }
+
+    setPoints([]);
+  };
+
+  const onMouseEnter = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if ('buttons' in event && event.buttons === 1) {
+      onMouseDown(event);
+    }
+  };
+
+  const onMouseLeave = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    onMouseUp(event, false);
+  };
+
+  const onClearClick = () => {
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+    }
+
+    onChange?.(null);
+
+    setPoints([]);
+  };
+
+  useEffect(() => {
+    if ($el.current) {
+      $el.current.width = $el.current.clientWidth * DPI;
+      $el.current.height = $el.current.clientHeight * DPI;
+    }
+  }, []);
+
+  return (
+    <div className="relative block">
+      <canvas
+        ref={$el}
+        className={cn('relative block', className)}
+        style={{ touchAction: 'none' }}
+        onPointerMove={(event) => onMouseMove(event)}
+        onPointerDown={(event) => onMouseDown(event)}
+        onPointerUp={(event) => onMouseUp(event)}
+        onPointerLeave={(event) => onMouseLeave(event)}
+        onPointerEnter={(event) => onMouseEnter(event)}
+        {...props}
+      />
+
+      <div className="absolute bottom-2 right-2">
+        <button className="rounded-full p-2 text-xs text-slate-500" onClick={() => onClearClick()}>
+          Clear Signature
+        </button>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/hooks/use-window-size.ts

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useWindowSize() {
-  const [size, setSize] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  const onResize = () => {
-    setSize({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-  };
-
-  useEffect(() => {
-    onResize();
-
-    window.addEventListener('resize', onResize);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
-
-  return size;
-}

apps/marketing/src/pages/api/claim-plan/index.ts

@@ -43,7 +43,8 @@ export default async function handler(
 
     if (user && user.Subscription.length > 0) {
       return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        redirectUrl: `${process.env.NEXT_PUBLIC_APP_URL}/login`,
       });
     }
 
@@ -103,8 +104,9 @@ export default async function handler(
       mode: 'subscription',
       metadata,
       allow_promotion_codes: true,
-      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/pricing?email=${encodeURIComponent(
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      success_url: `${process.env.NEXT_PUBLIC_SITE_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.NEXT_PUBLIC_SITE_URL}/pricing?email=${encodeURIComponent(
         email,
       )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
     });

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -8,11 +8,8 @@ import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in
 import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
 import { redis } from '@documenso/lib/server-only/redis';
 import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
-  DocumentDataType,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -20,13 +17,14 @@ import {
   SigningStatus,
 } from '@documenso/prisma/client';
 
-const log = (...args: unknown[]) => console.log('[stripe]', ...args);
+const log = (...args: any[]) => console.log('[stripe]', ...args);
 
 export const config = {
   api: { bodyParser: false },
 };
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
   // if (!process.env.NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS) {
   //   return res.status(500).json({
   //     success: false,
@@ -57,8 +55,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   log('event-type:', event.type);
 
   if (event.type === 'checkout.session.completed') {
-    // This typecast is required since we don't want to create a guard for every event type
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const session = event.data.object as Stripe.Checkout.Session;
 
     if (session.metadata?.source === 'landing') {
@@ -88,34 +84,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
-      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
-
-      const { id: documentDataId } = await prisma.documentData.create({
-        data: {
-          type: DocumentDataType.BYTES_64,
-          data: bytes64,
-          initialData: bytes64,
-        },
-      });
-
       const document = await prisma.document.create({
         data: {
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,
-          documentDataId,
-        },
-        include: {
-          documentData: true,
+          document: readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64'),
+          created: now,
         },
       });
 
-      const { documentData } = document;
-
-      if (!documentData) {
-        throw new Error(`Document ${document.id} has no document data`);
-      }
-
       const recipient = await prisma.recipient.create({
         data: {
           name: user.name ?? '',
@@ -142,21 +120,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         },
       });
 
-      let pdfData = await getFile(documentData).then((data) =>
-        Buffer.from(data).toString('base64'),
-      );
-
       if (signatureDataUrl) {
-        pdfData = await insertImageInPDF(
-          pdfData,
+        document.document = await insertImageInPDF(
+          document.document,
           signatureDataUrl,
           Number(field.positionX),
           Number(field.positionY),
           field.page,
         );
       } else {
-        pdfData = await insertTextInPDF(
-          pdfData,
+        document.document = await insertTextInPDF(
+          document.document,
           signatureText ?? '',
           Number(field.positionX),
           Number(field.positionY),
@@ -164,12 +138,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         );
       }
 
-      const { data: newData } = await updateFile({
-        type: documentData.type,
-        oldData: documentData.initialData,
-        newData: Buffer.from(pdfData, 'base64').toString('binary'),
-      });
-
       await Promise.all([
         prisma.signature.create({
           data: {
@@ -179,12 +147,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             typedSignature: signatureDataUrl ? '' : signatureText,
           },
         }),
-        prisma.documentData.update({
+        prisma.document.update({
           where: {
-            id: documentData.id,
+            id: document.id,
           },
           data: {
-            data: newData,
+            document: document.document,
           },
         }),
       ]);

apps/marketing/tsconfig.json

@@ -9,10 +9,16 @@
       }
     ],
     "paths": {
-      "~/*": ["./src/*"],
-      "contentlayer/generated": ["./.contentlayer/generated"]
+      "~/*": [
+        "./src/*"
+      ],
+      "contentlayer/generated": [
+        "./.contentlayer/generated"
+      ]
     },
-    "types": ["@documenso/lib/types/next-auth.d.ts"],
+    "types": [
+      "@documenso/lib/types/next-auth.d.ts"
+    ],
     "strictNullChecks": true,
     "incremental": false
   },
@@ -23,5 +29,7 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/web/next.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
-const { version } = require('./package.json');
 
 const { parsed: env } = require('dotenv').config({
   path: path.join(__dirname, '../../.env.local'),
@@ -10,7 +9,6 @@ const { parsed: env } = require('dotenv').config({
 const config = {
   experimental: {
     serverActions: true,
-    serverActionsBodySizeLimit: '50mb',
   },
   reactStrictMode: true,
   transpilePackages: [
@@ -20,9 +18,7 @@ const config = {
     '@documenso/ui',
     '@documenso/email',
   ],
-  env: {
-    APP_VERSION: version,
-  },
+  env,
   modularizeImports: {
     'lucide-react': {
       transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',

apps/web/package.json

@@ -4,14 +4,12 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "next dev -p 3000",
+    "dev": "PORT=3000 next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "lint": "next lint"
   },
   "dependencies": {
-    "@documenso/ee": "*",
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
     "@documenso/tailwind-config": "*",
@@ -22,29 +20,25 @@
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.214.0",
-    "luxon": "^3.4.0",
     "micro": "^10.0.1",
+    "nanoid": "^4.0.2",
     "next": "13.4.12",
     "next-auth": "4.22.3",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
     "perfect-freehand": "^1.2.0",
-    "posthog-js": "^1.75.3",
-    "posthog-node": "^3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
+    "react-pdf": "^7.1.1",
     "react-rnd": "^10.4.1",
-    "sharp": "0.32.5",
-    "ts-pattern": "^5.0.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/formidable": "^2.0.6",
-    "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7"

apps/web/process-env.d.ts

@@ -1,7 +1,6 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    NEXT_PUBLIC_WEBAPP_URL?: string;
-    NEXT_PUBLIC_MARKETING_URL?: string;
+    NEXT_PUBLIC_SITE_URL?: string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 
@@ -11,6 +10,8 @@ declare namespace NodeJS {
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
 
+    NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
+
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
   }

apps/web/src/api/document/create/fetcher.ts

@@ -0,0 +1,34 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { TCreateDocumentRequestSchema, ZCreateDocumentResponseSchema } from './types';
+
+export const useCreateDocument = () => {
+  return useMutation(async ({ file }: TCreateDocumentRequestSchema) => {
+    const formData = new FormData();
+
+    formData.set('file', file);
+
+    const response = await fetch('/api/document/create', {
+      method: 'POST',
+      body: formData,
+    });
+
+    const body = await response.json();
+
+    if (response.status !== 200) {
+      throw new Error('Failed to create document');
+    }
+
+    const safeBody = ZCreateDocumentResponseSchema.safeParse(body);
+
+    if (!safeBody.success) {
+      throw new Error('Failed to create document');
+    }
+
+    if ('error' in safeBody.data) {
+      throw new Error(safeBody.data.error);
+    }
+
+    return safeBody.data;
+  });
+};

apps/web/src/api/document/create/types.ts

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+
+export const ZCreateDocumentRequestSchema = z.object({
+  file: z.instanceof(File),
+});
+
+export type TCreateDocumentRequestSchema = z.infer<typeof ZCreateDocumentRequestSchema>;
+
+export const ZCreateDocumentResponseSchema = z
+  .object({
+    id: z.number(),
+  })
+  .or(
+    z.object({
+      error: z.string(),
+    }),
+  );
+
+export type TCreateDocumentResponseSchema = z.infer<typeof ZCreateDocumentResponseSchema>;

apps/web/src/app/(dashboard)/admin/layout.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-import { redirect } from 'next/navigation';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
-
-import { AdminNav } from './nav';
-
-export type AdminSectionLayoutProps = {
-  children: React.ReactNode;
-};
-
-export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
-  const user = await getRequiredServerComponentSession();
-
-  if (!isAdmin(user)) {
-    redirect('/documents');
-  }
-
-  return (
-    <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
-      <div className="grid grid-cols-12 gap-x-8 md:mt-8">
-        <AdminNav className="col-span-12 md:col-span-3 md:flex" />
-
-        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">{children}</div>
-      </div>
-    </div>
-  );
-}

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { HTMLAttributes } from 'react';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-import { BarChart3, User2 } from 'lucide-react';
-
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-
-export type AdminNavProps = HTMLAttributes<HTMLDivElement>;
-
-export const AdminNav = ({ className, ...props }: AdminNavProps) => {
-  const pathname = usePathname();
-
-  return (
-    <div className={cn('flex gap-x-2.5 gap-y-2 md:flex-col', className)} {...props}>
-      <Button
-        variant="ghost"
-        className={cn(
-          'justify-start md:w-full',
-          pathname?.startsWith('/admin/stats') && 'bg-secondary',
-        )}
-        asChild
-      >
-        <Link href="/admin/stats">
-          <BarChart3 className="mr-2 h-5 w-5" />
-          Stats
-        </Link>
-      </Button>
-
-      <Button
-        variant="ghost"
-        className={cn(
-          'justify-start md:w-full',
-          pathname?.startsWith('/admin/users') && 'bg-secondary',
-        )}
-        disabled
-      >
-        <User2 className="mr-2 h-5 w-5" />
-        Users (Coming Soon)
-      </Button>
-    </div>
-  );
-};

apps/web/src/app/(dashboard)/admin/page.tsx

@@ -1,5 +0,0 @@
-import { redirect } from 'next/navigation';
-
-export default function Admin() {
-  redirect('/admin/stats');
-}

apps/web/src/app/(dashboard)/admin/stats/page.tsx

@@ -1,75 +0,0 @@
-import {
-  File,
-  FileCheck,
-  FileClock,
-  FileEdit,
-  Mail,
-  MailOpen,
-  PenTool,
-  User as UserIcon,
-  UserPlus2,
-  UserSquare2,
-} from 'lucide-react';
-
-import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
-import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
-import {
-  getUsersCount,
-  getUsersWithSubscriptionsCount,
-} from '@documenso/lib/server-only/admin/get-users-stats';
-
-import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
-
-export default async function AdminStatsPage() {
-  const [usersCount, usersWithSubscriptionsCount, docStats, recipientStats] = await Promise.all([
-    getUsersCount(),
-    getUsersWithSubscriptionsCount(),
-    getDocumentStats(),
-    getRecipientsStats(),
-  ]);
-
-  return (
-    <div>
-      <h2 className="text-4xl font-semibold">Instance Stats</h2>
-
-      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-4">
-        <CardMetric icon={UserIcon} title="Total Users" value={usersCount} />
-        <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
-        <CardMetric
-          icon={UserPlus2}
-          title="Active Subscriptions"
-          value={usersWithSubscriptionsCount}
-        />
-        <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
-      </div>
-
-      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
-        <div>
-          <h3 className="text-3xl font-semibold">Document metrics</h3>
-
-          <div className="mt-8 grid flex-1 grid-cols-2 gap-4">
-            <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
-            <CardMetric icon={FileEdit} title="Drafted Documents" value={docStats.DRAFT} />
-            <CardMetric icon={FileClock} title="Pending Documents" value={docStats.PENDING} />
-            <CardMetric icon={FileCheck} title="Completed Documents" value={docStats.COMPLETED} />
-          </div>
-        </div>
-
-        <div>
-          <h3 className="text-3xl font-semibold">Recipients metrics</h3>
-
-          <div className="mt-8 grid flex-1 grid-cols-2 gap-4">
-            <CardMetric
-              icon={UserSquare2}
-              title="Total Recipients"
-              value={recipientStats.TOTAL_RECIPIENTS}
-            />
-            <CardMetric icon={Mail} title="Documents Received" value={recipientStats.SENT} />
-            <CardMetric icon={MailOpen} title="Documents Viewed" value={recipientStats.OPENED} />
-            <CardMetric icon={PenTool} title="Signatures Collected" value={recipientStats.SIGNED} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,109 @@
+import Link from 'next/link';
+
+import { Clock, File, FileCheck } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { UploadDocument } from './upload-document';
+
+export default async function DashboardPage() {
+  const session = await getRequiredServerComponentSession();
+
+  const [stats, results] = await Promise.all([
+    getStats({
+      userId: session.id,
+    }),
+    findDocuments({
+      userId: session.id,
+      perPage: 10,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Dashboard</h1>
+
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Link href={'/documents?status=COMPLETED'} passHref>
+          <CardMetric icon={FileCheck} title="Completed" value={stats.COMPLETED} />
+        </Link>
+        <Link href={'/documents?status=DRAFT'} passHref>
+          <CardMetric icon={File} title="Drafts" value={stats.DRAFT} />
+        </Link>
+        <Link href={'/documents?status=PENDING'} passHref>
+          <CardMetric icon={Clock} title="Pending" value={stats.PENDING} />
+        </Link>
+      </div>
+
+      <div className="mt-12">
+        <UploadDocument />
+
+        <h2 className="mt-8 text-2xl font-semibold">Recent Documents</h2>
+
+        <div className="border-border mt-8 overflow-x-auto rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[100px]">ID</TableHead>
+                <TableHead>Title</TableHead>
+                <TableHead>Reciepient</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Created</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {results.data.map((document) => {
+                return (
+                  <TableRow key={document.id}>
+                    <TableCell className="font-medium">{document.id}</TableCell>
+                    <TableCell>
+                      <Link
+                        href={`/documents/${document.id}`}
+                        className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                      >
+                        {document.title}
+                      </Link>
+                    </TableCell>
+
+                    <TableCell>
+                      <StackAvatarsWithTooltip recipients={document.Recipient} />
+                    </TableCell>
+
+                    <TableCell>
+                      <DocumentStatus status={document.status} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <LocaleDate date={document.created} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+              {results.data.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} className="h-24 text-center">
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/dashboard/upload-document.tsx

@@ -1,45 +1,29 @@
 'use client';
 
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useCreateDocument } from '~/api/document/create/fetcher';
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
+
 export type UploadDocumentProps = {
   className?: string;
 };
 
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
+  const { toast } = useToast();
   const router = useRouter();
 
-  const { toast } = useToast();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
+  const { isLoading, mutateAsync: createDocument } = useCreateDocument();
 
   const onFileDrop = async (file: File) => {
     try {
-      setIsLoading(true);
-
-      const { type, data } = await putFile(file);
-
-      const { id: documentDataId } = await createDocumentData({
-        type,
-        data,
-      });
-
       const { id } = await createDocument({
-        title: file.name,
-        documentDataId,
+        file: file,
       });
 
       toast({
@@ -57,8 +41,6 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         description: 'An error occurred while uploading your document.',
         variant: 'destructive',
       });
-    } finally {
-      setIsLoading(false);
     }
   };
 
@@ -68,7 +50,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
+          <Loader className="h-12 w-12 animate-spin text-slate-500" />
         </div>
       )}
     </div>

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

@@ -2,202 +2,109 @@
 
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
 
-import { Field, Recipient, User } from '@documenso/prisma/client';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { Loader } from 'lucide-react';
+
+import { Document, Field, Recipient, User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
-import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
-import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/add-signers';
-import { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
-import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/add-subject';
-import { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { addFields } from '~/components/forms/edit-document/add-fields.action';
-import { addSigners } from '~/components/forms/edit-document/add-signers.action';
-import { completeDocument } from '~/components/forms/edit-document/add-subject.action';
+import { AddFieldsFormPartial } from '~/components/forms/edit-document/add-fields';
+import { AddSignersFormPartial } from '~/components/forms/edit-document/add-signers';
+import { AddSubjectFormPartial } from '~/components/forms/edit-document/add-subject';
+
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+      <p className="text-muted-foreground mt-4">Loading document...</p>
+    </div>
+  ),
+});
 
 export type EditDocumentFormProps = {
   className?: string;
   user: User;
-  document: DocumentWithData;
+  document: Document;
   recipients: Recipient[];
   fields: Field[];
-  dataUrl: string;
 };
 
-type EditDocumentStep = 'signers' | 'fields' | 'subject';
-
 export const EditDocumentForm = ({
   className,
   document,
   recipients,
   fields,
   user: _user,
-  dataUrl,
 }: EditDocumentFormProps) => {
-  const { toast } = useToast();
-  const router = useRouter();
+  const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
 
-  const [step, setStep] = useState<EditDocumentStep>('signers');
-
-  const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
-    signers: {
-      title: 'Add Signers',
-      description: 'Add the people who will sign the document.',
-      stepIndex: 1,
-      onSubmit: () => onAddSignersFormSubmit,
-    },
-    fields: {
-      title: 'Add Fields',
-      description: 'Add all relevant fields for each recipient.',
-      stepIndex: 2,
-      onBackStep: () => setStep('signers'),
-      onSubmit: () => onAddFieldsFormSubmit,
-    },
-    subject: {
-      title: 'Add Subject',
-      description: 'Add the subject and message you wish to send to signers.',
-      stepIndex: 3,
-      onBackStep: () => setStep('fields'),
-      onSubmit: () => onAddSubjectFormSubmit,
-    },
-  };
-
-  const currentDocumentFlow = documentFlow[step];
-
-  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
-    try {
-      // Custom invocation server action
-      await addSigners({
-        documentId: document.id,
-        signers: data.signers,
-      });
-
-      router.refresh();
+  const documentUrl = `data:application/pdf;base64,${document.document}`;
 
+  const onNextStep = () => {
+    if (step === 'signers') {
       setStep('fields');
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while adding signers.',
-        variant: 'destructive',
-      });
     }
-  };
-
-  const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
-    try {
-      // Custom invocation server action
-      await addFields({
-        documentId: document.id,
-        fields: data.fields,
-      });
-
-      router.refresh();
 
+    if (step === 'fields') {
       setStep('subject');
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while adding signers.',
-        variant: 'destructive',
-      });
     }
   };
 
-  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message } = data.email;
+  const onPreviousStep = () => {
+    if (step === 'fields') {
+      setStep('signers');
+    }
 
-    try {
-      await completeDocument({
-        documentId: document.id,
-        email: {
-          subject,
-          message,
-        },
-      });
-
-      toast({
-        title: 'Document sent',
-        description: 'Your document has been sent successfully.',
-        duration: 5000,
-      });
-
-      router.push('/documents');
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while sending the document.',
-        variant: 'destructive',
-      });
+    if (step === 'subject') {
+      setStep('fields');
     }
   };
 
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
-        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer document={dataUrl} />
+          <PDFViewer document={documentUrl} />
         </CardContent>
       </Card>
 
       <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-        <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
-          <DocumentFlowFormContainerHeader
-            title={currentDocumentFlow.title}
-            description={currentDocumentFlow.description}
+        {step === 'signers' && (
+          <AddSignersFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
           />
+        )}
 
-          {step === 'signers' && (
-            <AddSignersFormPartial
-              documentFlow={documentFlow.signers}
-              recipients={recipients}
-              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
-              onSubmit={onAddSignersFormSubmit}
-            />
-          )}
+        {step === 'fields' && (
+          <AddFieldsFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
 
-          {step === 'fields' && (
-            <AddFieldsFormPartial
-              documentFlow={documentFlow.fields}
-              recipients={recipients}
-              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
-              onSubmit={onAddFieldsFormSubmit}
-            />
-          )}
-
-          {step === 'subject' && (
-            <AddSubjectFormPartial
-              documentFlow={documentFlow.subject}
-              document={document}
-              recipients={recipients}
-              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
-              onSubmit={onAddSubjectFormSubmit}
-            />
-          )}
-        </DocumentFlowFormContainer>
+        {step === 'subject' && (
+          <AddSubjectFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
       </div>
     </div>
   );

apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { PDFViewerProps } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
+
+export type LoadablePDFCard = PDFViewerProps & {
+  className?: string;
+  pdfClassName?: string;
+};
+
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="h-12 w-12 animate-spin text-slate-500" />
+
+      <p className="mt-4 text-slate-500">Loading document...</p>
+    </div>
+  ),
+});
+
+export const LoadablePDFCard = ({ className, pdfClassName, ...props }: LoadablePDFCard) => {
+  return (
+    <Card className={className} gradient {...props}>
+      <CardContent className="p-2">
+        <PDFViewer className={pdfClassName} {...props} />
+      </CardContent>
+    </Card>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/loading.tsx

@@ -9,13 +9,12 @@ export default function Loading() {
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Documents
       </Link>
-
       <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
-      <div className="mt-8 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
+      <div className="mt-8 grid min-h-[80vh] w-full grid-cols-12 gap-x-8">
         <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
-          <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
+          <div className="flex min-h-[80vh] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />
 
             <p className="text-muted-foreground mt-4">Loading document...</p>

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

@@ -7,12 +7,8 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 export type DocumentPageProps = {
@@ -37,16 +33,10 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     userId: session.id,
   }).catch(() => null);
 
-  if (!document || !document.documentData) {
+  if (!document) {
     redirect('/documents');
   }
 
-  const { documentData } = document;
-
-  const documentDataUrl = await getFile(documentData)
-    .then((buffer) => Buffer.from(buffer).toString('base64'))
-    .then((data) => `data:application/pdf;base64,${data}`);
-
   const [recipients, fields] = await Promise.all([
     await getRecipientsForDocument({
       documentId,
@@ -79,29 +69,18 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
-              <span>{recipients.length} Recipient(s)</span>
-            </StackAvatarsWithTooltip>
+            <span>{recipients.length} Recipient(s)</span>
           </div>
         )}
       </div>
 
-      {document.status !== InternalDocumentStatus.COMPLETED && (
-        <EditDocumentForm
-          className="mt-8"
-          document={document}
-          user={session}
-          recipients={recipients}
-          fields={fields}
-          dataUrl={documentDataUrl}
-        />
-      )}
-
-      {document.status === InternalDocumentStatus.COMPLETED && (
-        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer document={documentDataUrl} />
-        </div>
-      )}
+      <EditDocumentForm
+        className="mt-8"
+        document={document}
+        user={session}
+        recipients={recipients}
+        fields={fields}
+      />
     </div>
   );
 }

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

@@ -1,65 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { Edit, Pencil, Share } from 'lucide-react';
-import { useSession } from 'next-auth/react';
-import { match } from 'ts-pattern';
-
-import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-
-export type DataTableActionButtonProps = {
-  row: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
-  };
-};
-
-export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
-  const { data: session } = useSession();
-
-  if (!session) {
-    return null;
-  }
-
-  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
-
-  const isOwner = row.User.id === session.user.id;
-  const isRecipient = !!recipient;
-  const isDraft = row.status === DocumentStatus.DRAFT;
-  const isPending = row.status === DocumentStatus.PENDING;
-  const isComplete = row.status === DocumentStatus.COMPLETED;
-  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-
-  return match({
-    isOwner,
-    isRecipient,
-    isDraft,
-    isPending,
-    isComplete,
-    isSigned,
-  })
-    .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-24" asChild>
-        <Link href={`/documents/${row.id}`}>
-          <Edit className="-ml-1 mr-2 h-4 w-4" />
-          Edit
-        </Link>
-      </Button>
-    ))
-    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
-      <Button className="w-24" asChild>
-        <Link href={`/sign/${recipient?.token}`}>
-          <Pencil className="-ml-1 mr-2 h-4 w-4" />
-          Sign
-        </Link>
-      </Button>
-    ))
-    .otherwise(() => (
-      <Button className="w-24" disabled>
-        <Share className="-ml-1 mr-2 h-4 w-4" />
-        Share
-      </Button>
-    ));
-};

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

@@ -1,145 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import {
-  Copy,
-  Download,
-  Edit,
-  History,
-  MoreHorizontal,
-  Pencil,
-  Share,
-  Trash2,
-  XCircle,
-} from 'lucide-react';
-import { useSession } from 'next-auth/react';
-
-import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import { trpc } from '@documenso/trpc/client';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-
-export type DataTableActionDropdownProps = {
-  row: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
-  };
-};
-
-export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
-  const { data: session } = useSession();
-
-  if (!session) {
-    return null;
-  }
-
-  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
-
-  const isOwner = row.User.id === session.user.id;
-  // const isRecipient = !!recipient;
-  // const isDraft = row.status === DocumentStatus.DRAFT;
-  // const isPending = row.status === DocumentStatus.PENDING;
-  const isComplete = row.status === DocumentStatus.COMPLETED;
-  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-
-  const onDownloadClick = async () => {
-    let document: DocumentWithData | null = null;
-
-    if (!recipient) {
-      document = await trpc.document.getDocumentById.query({
-        id: row.id,
-      });
-    } else {
-      document = await trpc.document.getDocumentByToken.query({
-        token: recipient.token,
-      });
-    }
-
-    const documentData = document?.documentData;
-
-    if (!documentData) {
-      return;
-    }
-
-    const documentBytes = await getFile(documentData);
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = row.title || 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <MoreHorizontal className="h-5 w-5 text-gray-500" />
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="w-52" align="start" forceMount>
-        <DropdownMenuLabel>Action</DropdownMenuLabel>
-
-        <DropdownMenuItem disabled={!recipient || isComplete} asChild>
-          <Link href={`/sign/${recipient?.token}`}>
-            <Pencil className="mr-2 h-4 w-4" />
-            Sign
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
-          <Link href={`/documents/${row.id}`}>
-            <Edit className="mr-2 h-4 w-4" />
-            Edit
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
-          <Download className="mr-2 h-4 w-4" />
-          Download
-        </DropdownMenuItem>
-
-        <DropdownMenuItem disabled>
-          <Copy className="mr-2 h-4 w-4" />
-          Duplicate
-        </DropdownMenuItem>
-
-        <DropdownMenuItem disabled>
-          <XCircle className="mr-2 h-4 w-4" />
-          Void
-        </DropdownMenuItem>
-
-        <DropdownMenuItem disabled>
-          <Trash2 className="mr-2 h-4 w-4" />
-          Delete
-        </DropdownMenuItem>
-
-        <DropdownMenuLabel>Share</DropdownMenuLabel>
-
-        <DropdownMenuItem disabled>
-          <History className="mr-2 h-4 w-4" />
-          Resend
-        </DropdownMenuItem>
-
-        <DropdownMenuItem disabled>
-          <Share className="mr-2 h-4 w-4" />
-          Share
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

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

@@ -1,56 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { useSession } from 'next-auth/react';
-import { match } from 'ts-pattern';
-
-import { Document, Recipient, User } from '@documenso/prisma/client';
-
-export type DataTableTitleProps = {
-  row: Document & {
-    User: Pick<User, 'id' | 'name' | 'email'>;
-    Recipient: Recipient[];
-  };
-};
-
-export const DataTableTitle = ({ row }: DataTableTitleProps) => {
-  const { data: session } = useSession();
-
-  if (!session) {
-    return null;
-  }
-
-  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
-
-  const isOwner = row.User.id === session.user.id;
-  const isRecipient = !!recipient;
-
-  return match({
-    isOwner,
-    isRecipient,
-  })
-    .with({ isOwner: true }, () => (
-      <Link
-        href={`/documents/${row.id}`}
-        title={row.title}
-        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
-      >
-        {row.title}
-      </Link>
-    ))
-    .with({ isRecipient: true }, () => (
-      <Link
-        href={`/sign/${recipient?.token}`}
-        title={row.title}
-        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
-      >
-        {row.title}
-      </Link>
-    ))
-    .otherwise(() => (
-      <span className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]">
-        {row.title}
-      </span>
-    ));
-};

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

@@ -2,12 +2,13 @@
 
 import { useTransition } from 'react';
 
+import Link from 'next/link';
+
 import { Loader } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
@@ -15,21 +16,11 @@ import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-a
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
-import { DataTableActionButton } from './data-table-action-button';
-import { DataTableActionDropdown } from './data-table-action-dropdown';
-import { DataTableTitle } from './data-table-title';
-
 export type DocumentsDataTableProps = {
-  results: FindResultSet<
-    Document & {
-      Recipient: Recipient[];
-      User: Pick<User, 'id' | 'name' | 'email'>;
-    }
-  >;
+  results: FindResultSet<DocumentWithReciepient>;
 };
 
 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
-  const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
 
   const updateSearchParams = useUpdateSearchParams();
@@ -43,22 +34,21 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
     });
   };
 
-  if (!session) {
-    return null;
-  }
-
   return (
     <div className="relative">
       <DataTable
         columns={[
           {
-            header: 'Created',
-            accessorKey: 'createdAt',
-            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+            header: 'ID',
+            accessorKey: 'id',
           },
           {
             header: 'Title',
-            cell: ({ row }) => <DataTableTitle row={row.original} />,
+            cell: ({ row }) => (
+              <Link href={`/documents/${row.original.id}`} className="font-medium hover:underline">
+                {row.original.title}
+              </Link>
+            ),
           },
           {
             header: 'Recipient',
@@ -73,13 +63,9 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
           },
           {
-            header: 'Actions',
-            cell: ({ row }) => (
-              <div className="flex items-center gap-x-4">
-                <DataTableActionButton row={row.original} />
-                <DataTableActionDropdown row={row.original} />
-              </div>
-            ),
+            header: 'Created',
+            accessorKey: 'created',
+            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
           },
         ]}
         data={results.data}
@@ -88,7 +74,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
       >
-        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+        {(table) => <DataTablePagination table={table} />}
       </DataTable>
 
       {isPending && (

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

@@ -1,22 +1,28 @@
 import Link from 'next/link';
 
+import { Plus } from 'lucide-react';
+
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
 import { getStats } from '@documenso/lib/server-only/document/get-stats';
-import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { isDocumentStatus } from '@documenso/lib/types/is-document-status';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import {
+  PeriodSelectorValue,
+  isPeriodSelectorValue,
+} from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
-import { UploadDocument } from './upload-document';
 
 export type DocumentsPageProps = {
   searchParams?: {
-    status?: ExtendedDocumentStatus;
+    status?: InternalDocumentStatus | 'ALL';
     period?: PeriodSelectorValue;
     page?: string;
     perPage?: string;
@@ -24,28 +30,30 @@ export type DocumentsPageProps = {
 };
 
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const user = await getRequiredServerComponentSession();
+  const session = await getRequiredServerComponentSession();
 
   const stats = await getStats({
-    user,
+    userId: session.id,
   });
 
-  const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
-  // const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const status = isDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
+  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
 
   const results = await findDocuments({
-    userId: user.id,
-    status,
+    userId: session.id,
+    status: status === 'ALL' ? undefined : status,
     orderBy: {
-      column: 'createdAt',
+      column: 'created',
       direction: 'desc',
     },
     page,
     perPage,
   });
 
+  const isNoResults = status === 'ALL' && period === '' && results.data.length === 0;
+
   const getTabHref = (value: typeof status) => {
     const params = new URLSearchParams(searchParams);
 
@@ -55,48 +63,73 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
       params.delete('page');
     }
 
+    if (value === 'ALL') {
+      params.delete('status');
+    }
+
     return `/documents?${params.toString()}`;
   };
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <UploadDocument />
-
-      <h1 className="mt-12 text-4xl font-semibold">Documents</h1>
+      <h1 className="text-4xl font-semibold">All Documents</h1>
 
       <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
-        <Tabs defaultValue={status} className="overflow-x-auto">
+        <Tabs defaultValue={status}>
           <TabsList>
-            {[
-              ExtendedDocumentStatus.INBOX,
-              ExtendedDocumentStatus.PENDING,
-              ExtendedDocumentStatus.COMPLETED,
-              ExtendedDocumentStatus.DRAFT,
-              ExtendedDocumentStatus.ALL,
-            ].map((value) => (
-              <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
-                <Link href={getTabHref(value)} scroll={false}>
-                  <DocumentStatus status={value} />
+            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
+              <Link href={getTabHref('ALL')}>All</Link>
+            </TabsTrigger>
 
-                  {value !== ExtendedDocumentStatus.ALL && (
-                    <span className="ml-1 hidden opacity-50 md:inline-block">
-                      {Math.min(stats[value], 99)}
-                      {stats[value] > 99 && '+'}
-                    </span>
-                  )}
-                </Link>
-              </TabsTrigger>
-            ))}
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.DRAFT)}>
+                <DocumentStatus status={InternalDocumentStatus.DRAFT} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.DRAFT, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.PENDING)}>
+                <DocumentStatus status={InternalDocumentStatus.PENDING} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.PENDING, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.COMPLETED)}>
+                <DocumentStatus status={InternalDocumentStatus.COMPLETED} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.COMPLETED, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
           </TabsList>
         </Tabs>
 
         <div className="flex flex-1 flex-wrap items-center justify-between gap-x-2 gap-y-4">
           <PeriodSelector />
+
+          <Button>
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Document
+          </Button>
         </div>
       </div>
 
       <div className="mt-8">
-        <DocumentsDataTable results={results} />
+        {/* If we're viewing all documents for all time and there's nuffin we should should an add document component instead */}
+        {isNoResults ? (
+          <DocumentDropzone className="min-h-[60vh] md:min-h-[40vh]" />
+        ) : (
+          <DocumentsDataTable results={results} />
+        )}
       </div>
     </div>
   );

apps/web/src/app/(dashboard)/layout.tsx

@@ -8,7 +8,6 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
-import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
 
 export type AuthenticatedDashboardLayoutProps = {
@@ -31,8 +30,6 @@ export default async function AuthenticatedDashboardLayout({
       <Header user={user} />
 
       <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
-
-      <RefreshOnFocus />
     </NextAuthProvider>
   );
 }

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -1,77 +1,29 @@
-import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
-import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
-import { SubscriptionStatus } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
 
-import { LocaleDate } from '~/components/formatter/locale-date';
-import { getServerComponentFlag } from '~/helpers/get-server-component-feature-flag';
+import { PasswordForm } from '~/components/forms/password';
 
 export default async function BillingSettingsPage() {
   const user = await getRequiredServerComponentSession();
 
-  const isBillingEnabled = await getServerComponentFlag('app_billing');
-
   // Redirect if subscriptions are not enabled.
-  if (!isBillingEnabled) {
+  if (!IS_SUBSCRIPTIONS_ENABLED) {
     redirect('/settings/profile');
   }
 
-  const subscription = await getSubscriptionByUserId({ userId: user.id }).then(async (sub) => {
-    if (sub) {
-      return sub;
-    }
-
-    // If we don't have a customer record, create one as well as an empty subscription.
-    return createCustomer({ user });
-  });
-
-  let billingPortalUrl = '';
-
-  if (subscription.customerId) {
-    billingPortalUrl = await getPortalSession({
-      customerId: subscription.customerId,
-      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
-    });
-  }
-
   return (
     <div>
       <h3 className="text-lg font-medium">Billing</h3>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        Your subscription is{' '}
-        {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
-        {subscription?.periodEnd && (
-          <>
-            {' '}
-            Your next payment is due on{' '}
-            <span className="font-semibold">
-              <LocaleDate date={subscription.periodEnd} />
-            </span>
-            .
-          </>
-        )}
+      <p className="mt-2 text-sm text-slate-500">
+        Here you can update and manage your subscription.
       </p>
 
       <hr className="my-4" />
 
-      {billingPortalUrl && (
-        <Button asChild>
-          <Link href={billingPortalUrl}>Manage Subscription</Link>
-        </Button>
-      )}
-
-      {!billingPortalUrl && (
-        <p className="text-muted-foreground max-w-[60ch] text-base">
-          You do not currently have a customer record, this should not happen. Please contact
-          support for assistance.
-        </p>
-      )}
+      <PasswordForm user={user} className="max-w-xl" />
     </div>
   );
 }

apps/web/src/app/(dashboard)/settings/password/page.tsx

@@ -9,7 +9,7 @@ export default async function PasswordSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Password</h3>
 
-      <p className="text-muted-foreground mt-2 text-sm">Here you can update your password.</p>
+      <p className="mt-2 text-sm text-slate-500">Here you can update your password.</p>
 
       <hr className="my-4" />
 

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -9,7 +9,7 @@ export default async function ProfileSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Profile</h3>
 
-      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
+      <p className="mt-2 text-sm text-slate-500">Here you can edit your personal details.</p>
 
       <hr className="my-4" />
 

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

@@ -1,78 +0,0 @@
-'use client';
-
-import { HTMLAttributes, useState } from 'react';
-
-import { Download } from 'lucide-react';
-
-import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { DocumentData } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
-  disabled?: boolean;
-  fileName?: string;
-  documentData?: DocumentData;
-};
-
-export const DownloadButton = ({
-  className,
-  fileName,
-  documentData,
-  disabled,
-  ...props
-}: DownloadButtonProps) => {
-  const { toast } = useToast();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const onDownloadClick = async () => {
-    try {
-      setIsLoading(true);
-
-      if (!documentData) {
-        return;
-      }
-
-      const bytes = await getFile(documentData);
-
-      const blob = new Blob([bytes], {
-        type: 'application/pdf',
-      });
-
-      const link = window.document.createElement('a');
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = fileName || 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while downloading your document.',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      className={className}
-      disabled={disabled || !documentData}
-      onClick={onDownloadClick}
-      loading={isLoading}
-      {...props}
-    >
-      <Download className="mr-2 h-5 w-5" />
-      Download
-    </Button>
-  );
-};

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

@@ -1,113 +0,0 @@
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-
-import { CheckCircle2, Clock8, Share } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-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 { DocumentStatus, FieldType } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { DownloadButton } from './download-button';
-import { SigningCard } from './signing-card';
-
-export type CompletedSigningPageProps = {
-  params: {
-    token?: string;
-  };
-};
-
-export default async function CompletedSigningPage({
-  params: { token },
-}: CompletedSigningPageProps) {
-  if (!token) {
-    return notFound();
-  }
-
-  const document = await getDocumentAndSenderByToken({
-    token,
-  }).catch(() => null);
-
-  if (!document || !document.documentData) {
-    return notFound();
-  }
-
-  const { documentData } = document;
-
-  const [fields, recipient] = await Promise.all([
-    getFieldsForToken({ token }),
-    getRecipientByToken({ token }).catch(() => null),
-  ]);
-
-  if (!recipient) {
-    return notFound();
-  }
-
-  const recipientName =
-    recipient.name ||
-    fields.find((field) => field.type === FieldType.NAME)?.customText ||
-    recipient.email;
-
-  return (
-    <div className="flex flex-col items-center pt-24">
-      {/* Card with recipient */}
-      <SigningCard name={recipientName} />
-
-      <div className="mt-6">
-        {match(document.status)
-          .with(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>
-          ))
-          .otherwise(() => (
-            <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>
-          ))}
-      </div>
-
-      <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-        You have signed "{document.title}"
-      </h2>
-
-      {match(document.status)
-        .with(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>
-        ))
-        .otherwise(() => (
-          <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>
-        ))}
-
-      <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        {/* TODO: Hook this up */}
-        <Button variant="outline" className="flex-1">
-          <Share className="mr-2 h-5 w-5" />
-          Share
-        </Button>
-
-        <DownloadButton
-          className="flex-1"
-          fileName={document.title}
-          documentData={documentData}
-          disabled={document.status !== DocumentStatus.COMPLETED}
-        />
-      </div>
-
-      <p className="text-muted-foreground/60 mt-36 text-sm">
-        Want so 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>
-  );
-}

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

@@ -1,67 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-
-import { motion } from 'framer-motion';
-
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import signingCelebration from '~/assets/signing-celebration.png';
-
-export type SigningCardProps = {
-  name: string;
-};
-
-export const SigningCard = ({ name }: SigningCardProps) => {
-  return (
-    <div className="relative w-full max-w-xs md:max-w-sm">
-      <Card
-        className="group mx-auto flex aspect-[21/9] w-full items-center justify-center"
-        degrees={-145}
-        gradient
-      >
-        <CardContent
-          className="font-signature p-6 text-center"
-          style={{
-            container: 'main',
-          }}
-        >
-          <span
-            className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
-            style={{
-              fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
-            }}
-          >
-            {name}
-          </span>
-        </CardContent>
-      </Card>
-
-      <motion.div
-        className="absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
-        initial={{
-          opacity: 0,
-          scale: 0.8,
-        }}
-        animate={{
-          scale: 1,
-          opacity: 0.5,
-        }}
-        transition={{
-          delay: 0.5,
-          duration: 0.5,
-        }}
-      >
-        <Image
-          src={signingCelebration}
-          alt="background pattern"
-          className="w-full"
-          style={{
-            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
-            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
-          }}
-        />
-      </motion.div>
-    </div>
-  );
-};

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { SigningFieldContainer } from './signing-field-container';
-
-export type DateFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const DateField = ({ field, recipient }: DateFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const onSign = async () => {
-    try {
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: '',
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Date</p>
-      )}
-
-      {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
-      )}
-    </SigningFieldContainer>
-  );
-};

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -1,96 +0,0 @@
-'use client';
-
-import { useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useRequiredSigningContext } from './provider';
-import { SigningFieldContainer } from './signing-field-container';
-
-export type EmailFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const EmailField = ({ field, recipient }: EmailFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const { email: providedEmail } = useRequiredSigningContext();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const onSign = async () => {
-    try {
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: providedEmail ?? '',
-        isBase64: false,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Email</p>
-      )}
-
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
-    </SigningFieldContainer>
-  );
-};

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

@@ -1,123 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-
-import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
-import { Document, Field, Recipient } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-
-import { useRequiredSigningContext } from './provider';
-
-export type SigningFormProps = {
-  document: Document;
-  recipient: Recipient;
-  fields: Field[];
-};
-
-export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
-  const router = useRouter();
-
-  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
-
-  const {
-    handleSubmit,
-    formState: { isSubmitting },
-  } = useForm();
-
-  const isComplete = fields.every((f) => f.inserted);
-
-  const onFormSubmit = async () => {
-    if (!isComplete) {
-      return;
-    }
-
-    await completeDocumentWithToken({
-      token: recipient.token,
-      documentId: document.id,
-    });
-
-    router.push(`/sign/${recipient.token}/complete`);
-  };
-
-  return (
-    <form
-      className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[80rem] flex-col rounded-xl border px-4 py-6',
-      )}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}>
-        <div className={cn('flex flex-1 flex-col')}>
-          <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
-
-          <p className="text-muted-foreground mt-2 text-sm">
-            Please review the document before signing.
-          </p>
-
-          <hr className="border-border mb-8 mt-4" />
-
-          <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
-            <div className="flex flex-1 flex-col gap-y-4">
-              <div>
-                <Label htmlFor="full-name">Full Name</Label>
-
-                <Input
-                  type="text"
-                  id="full-name"
-                  className="bg-background mt-2"
-                  value={fullName}
-                  onChange={(e) => setFullName(e.target.value)}
-                />
-              </div>
-
-              <div>
-                <Label htmlFor="Signature">Signature</Label>
-
-                <Card className="mt-2" gradient degrees={-120}>
-                  <CardContent className="p-0">
-                    <SignaturePad
-                      className="h-44 w-full"
-                      defaultValue={signature ?? undefined}
-                      onChange={(value) => {
-                        setSignature(value);
-                      }}
-                    />
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-4 md:flex-row">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                size="lg"
-              >
-                Cancel
-              </Button>
-
-              <Button
-                className="w-full"
-                type="submit"
-                size="lg"
-                disabled={!isComplete || isSubmitting}
-              >
-                {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-                Complete
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-};

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

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-
-import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
-import { NextAuthProvider } from '~/providers/next-auth';
-
-export type SigningLayoutProps = {
-  children: React.ReactNode;
-};
-
-export default async function SigningLayout({ children }: SigningLayoutProps) {
-  const user = await getServerComponentSession();
-
-  return (
-    <NextAuthProvider>
-      <div className="min-h-screen overflow-hidden">
-        {user && <AuthenticatedHeader user={user} />}
-
-        <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
-      </div>
-    </NextAuthProvider>
-  );
-}

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -1,163 +0,0 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useRequiredSigningContext } from './provider';
-import { SigningFieldContainer } from './signing-field-container';
-
-export type NameFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const NameField = ({ field, recipient }: NameFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const { fullName: providedFullName, setFullName: setProvidedFullName } =
-    useRequiredSigningContext();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const [showFullNameModal, setShowFullNameModal] = useState(false);
-  const [localFullName, setLocalFullName] = useState('');
-
-  const onSign = async (source: 'local' | 'provider' = 'provider') => {
-    try {
-      if (!providedFullName && !localFullName) {
-        setShowFullNameModal(true);
-        return;
-      }
-
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: source === 'local' && localFullName ? localFullName : providedFullName ?? '',
-        isBase64: false,
-      });
-
-      if (source === 'local' && !providedFullName) {
-        setProvidedFullName(localFullName);
-      }
-
-      setLocalFullName('');
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Name</p>
-      )}
-
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
-
-      <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
-        <DialogContent>
-          <DialogTitle>
-            Sign as {recipient.name}{' '}
-            <span className="text-muted-foreground">({recipient.email})</span>
-          </DialogTitle>
-
-          <div className="py-4">
-            <Label htmlFor="signature">Full Name</Label>
-
-            <Input
-              type="text"
-              className="mt-2"
-              value={localFullName}
-              onChange={(e) => setLocalFullName(e.target.value)}
-            />
-          </div>
-
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                onClick={() => {
-                  setShowFullNameModal(false);
-                  setLocalFullName('');
-                }}
-              >
-                Cancel
-              </Button>
-
-              <Button
-                type="button"
-                className="flex-1"
-                disabled={!localFullName}
-                onClick={() => {
-                  setShowFullNameModal(false);
-                  void onSign('local');
-                }}
-              >
-                Sign
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </SigningFieldContainer>
-  );
-};

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

@@ -1,105 +0,0 @@
-import { notFound } from 'next/navigation';
-
-import { match } from 'ts-pattern';
-
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
-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 { getFile } from '@documenso/lib/universal/upload/get-file';
-import { FieldType } 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 { DateField } from './date-field';
-import { EmailField } from './email-field';
-import { SigningForm } from './form';
-import { NameField } from './name-field';
-import { SigningProvider } from './provider';
-import { SignatureField } from './signature-field';
-
-export type SigningPageProps = {
-  params: {
-    token?: string;
-  };
-};
-
-export default async function SigningPage({ params: { token } }: SigningPageProps) {
-  if (!token) {
-    return notFound();
-  }
-
-  const [document, fields, recipient] = await Promise.all([
-    getDocumentAndSenderByToken({
-      token,
-    }).catch(() => null),
-    getFieldsForToken({ token }),
-    getRecipientByToken({ token }).catch(() => null),
-    viewedDocument({ token }),
-  ]);
-
-  if (!document || !document.documentData || !recipient) {
-    return notFound();
-  }
-
-  const { documentData } = document;
-
-  const documentDataUrl = await getFile(documentData)
-    .then((buffer) => Buffer.from(buffer).toString('base64'))
-    .then((data) => `data:application/pdf;base64,${data}`);
-
-  const user = await getServerComponentSession();
-
-  return (
-    <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {document.title}
-        </h1>
-
-        <div className="mt-2.5 flex items-center gap-x-6">
-          <p className="text-muted-foreground">
-            {document.User.name} ({document.User.email}) has invited you to sign this document.
-          </p>
-        </div>
-
-        <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
-          <Card
-            className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
-            gradient
-          >
-            <CardContent className="p-2">
-              <LazyPDFViewer document={documentDataUrl} />
-            </CardContent>
-          </Card>
-
-          <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <SigningForm document={document} recipient={recipient} fields={fields} />
-          </div>
-        </div>
-
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-          {fields.map((field) =>
-            match(field.type)
-              .with(FieldType.SIGNATURE, () => (
-                <SignatureField key={field.id} field={field} recipient={recipient} />
-              ))
-              .with(FieldType.NAME, () => (
-                <NameField key={field.id} field={field} recipient={recipient} />
-              ))
-              .with(FieldType.DATE, () => (
-                <DateField key={field.id} field={field} recipient={recipient} />
-              ))
-              .with(FieldType.EMAIL, () => (
-                <EmailField key={field.id} field={field} recipient={recipient} />
-              ))
-              .otherwise(() => null),
-          )}
-        </ElementVisible>
-      </div>
-    </SigningProvider>
-  );
-}

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

@@ -1,63 +0,0 @@
-'use client';
-
-import { createContext, useContext, useState } from 'react';
-
-export type SigningContextValue = {
-  fullName: string;
-  setFullName: (_value: string) => void;
-  email: string;
-  setEmail: (_value: string) => void;
-  signature: string | null;
-  setSignature: (_value: string | null) => void;
-};
-
-const SigningContext = createContext<SigningContextValue | null>(null);
-
-export const useSigningContext = () => {
-  return useContext(SigningContext);
-};
-
-export const useRequiredSigningContext = () => {
-  const context = useSigningContext();
-
-  if (!context) {
-    throw new Error('Signing context is required');
-  }
-
-  return context;
-};
-
-export interface SigningProviderProps {
-  fullName?: string | null;
-  email?: string | null;
-  signature?: string | null;
-  children: React.ReactNode;
-}
-
-export const SigningProvider = ({
-  fullName: initialFullName,
-  email: initialEmail,
-  signature: initialSignature,
-  children,
-}: SigningProviderProps) => {
-  const [fullName, setFullName] = useState(initialFullName || '');
-  const [email, setEmail] = useState(initialEmail || '');
-  const [signature, setSignature] = useState(initialSignature || null);
-
-  return (
-    <SigningContext.Provider
-      value={{
-        fullName,
-        setFullName,
-        email,
-        setEmail,
-        signature,
-        setSignature,
-      }}
-    >
-      {children}
-    </SigningContext.Provider>
-  );
-};
-
-SigningProvider.displayName = 'SigningProvider';

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -1,192 +0,0 @@
-'use client';
-
-import { useMemo, useState, useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useRequiredSigningContext } from './provider';
-import { SigningFieldContainer } from './signing-field-container';
-
-type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
-
-export type SignatureFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-  const { signature: providedSignature, setSignature: setProvidedSignature } =
-    useRequiredSigningContext();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const { Signature: signature } = field;
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const [showSignatureModal, setShowSignatureModal] = useState(false);
-  const [localSignature, setLocalSignature] = useState<string | null>(null);
-
-  const state = useMemo<SignatureFieldState>(() => {
-    if (!field.inserted) {
-      return 'empty';
-    }
-
-    if (signature?.signatureImageAsBase64) {
-      return 'signed-image';
-    }
-
-    return 'signed-text';
-  }, [field.inserted, signature?.signatureImageAsBase64]);
-
-  const onSign = async (source: 'local' | 'provider' = 'provider') => {
-    try {
-      if (!providedSignature && !localSignature) {
-        setShowSignatureModal(true);
-        return;
-      }
-
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: source === 'local' && localSignature ? localSignature : providedSignature ?? '',
-        isBase64: true,
-      });
-
-      if (source === 'local' && !providedSignature) {
-        setProvidedSignature(localSignature);
-      }
-
-      setLocalSignature(null);
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-          Signature
-        </p>
-      )}
-
-      {state === 'signed-image' && signature?.signatureImageAsBase64 && (
-        <img
-          src={signature.signatureImageAsBase64}
-          alt={`Signature for ${recipient.name}`}
-          className="h-full w-full object-contain"
-        />
-      )}
-
-      {state === 'signed-text' && (
-        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-          {/* This optional chaining is intentional, we don't want to move the check into the condition above */}
-          {signature?.typedSignature}
-        </p>
-      )}
-
-      <Dialog open={showSignatureModal} onOpenChange={setShowSignatureModal}>
-        <DialogContent>
-          <DialogTitle>
-            Sign as {recipient.name}{' '}
-            <span className="text-muted-foreground">({recipient.email})</span>
-          </DialogTitle>
-
-          <div className="">
-            <Label htmlFor="signature">Signature</Label>
-
-            <SignaturePad
-              id="signature"
-              className="border-border mt-2 h-44 w-full rounded-md border"
-              onChange={(value) => setLocalSignature(value)}
-            />
-          </div>
-
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                onClick={() => {
-                  setShowSignatureModal(false);
-                  setLocalSignature(null);
-                }}
-              >
-                Cancel
-              </Button>
-
-              <Button
-                type="button"
-                className="flex-1"
-                disabled={!localSignature}
-                onClick={() => {
-                  setShowSignatureModal(false);
-                  void onSign('local');
-                }}
-              >
-                Sign
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </SigningFieldContainer>
-  );
-};

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import { useFieldPageCoords } from '~/hooks/use-field-page-coords';
-
-export type SignatureFieldProps = {
-  field: FieldWithSignature;
-  loading?: boolean;
-  children: React.ReactNode;
-  onSign?: () => Promise<void> | void;
-  onRemove?: () => Promise<void> | void;
-};
-
-export const SigningFieldContainer = ({
-  field,
-  loading,
-  onSign,
-  onRemove,
-  children,
-}: SignatureFieldProps) => {
-  const coords = useFieldPageCoords(field);
-
-  const onSignFieldClick = async () => {
-    if (field.inserted) {
-      return;
-    }
-
-    await onSign?.();
-  };
-
-  const onRemoveSignedFieldClick = async () => {
-    if (!field.inserted) {
-      return;
-    }
-
-    await onRemove?.();
-  };
-
-  return (
-    <div
-      className="absolute"
-      style={{
-        top: `${coords.y}px`,
-        left: `${coords.x}px`,
-        height: `${coords.height}px`,
-        width: `${coords.width}px`,
-      }}
-    >
-      <Card
-        className="bg-background relative h-full w-full"
-        data-inserted={field.inserted ? 'true' : 'false'}
-      >
-        <CardContent
-          className={cn(
-            'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2',
-          )}
-        >
-          {!field.inserted && !loading && (
-            <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
-          )}
-
-          {field.inserted && !loading && (
-            <button
-              className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
-              onClick={onRemoveSignedFieldClick}
-            >
-              Remove
-            </button>
-          )}
-
-          {children}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};

apps/web/src/app/(unauthenticated)/check-email/page.tsx

@@ -1,20 +0,0 @@
-import Link from 'next/link';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export default function ForgotPasswordPage() {
-  return (
-    <div>
-      <h1 className="text-4xl font-semibold">Email sent!</h1>
-
-      <p className="text-muted-foreground mb-4 mt-2 text-sm">
-        A password reset email has been sent, if you have an account you should see it in your inbox
-        shortly.
-      </p>
-
-      <Button asChild>
-        <Link href="/signin">Return to sign in</Link>
-      </Button>
-    </div>
-  );
-}

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -1,25 +0,0 @@
-import Link from 'next/link';
-
-import { ForgotPasswordForm } from '~/components/forms/forgot-password';
-
-export default function ForgotPasswordPage() {
-  return (
-    <div>
-      <h1 className="text-4xl font-semibold">Forgotten your password?</h1>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        No worries, it happens! Enter your email and we'll email you a special link to reset your
-        password.
-      </p>
-
-      <ForgotPasswordForm className="mt-4" />
-
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Remembered your password?{' '}
-        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
-          Sign In
-        </Link>
-      </p>
-    </div>
-  );
-}

apps/web/src/app/(unauthenticated)/layout.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import Image from 'next/image';
-
-import backgroundPattern from '~/assets/background-pattern.png';
-
-type UnauthenticatedLayoutProps = {
-  children: React.ReactNode;
-};
-
-export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
-  return (
-    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-24">
-      <div className="relative flex w-full max-w-md items-center gap-x-24">
-        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
-          <Image
-            src={backgroundPattern}
-            alt="background pattern"
-            className="dark:brightness-95 dark:invert dark:sepia"
-          />
-        </div>
-
-        <div className="w-full">{children}</div>
-      </div>
-    </main>
-  );
-}

apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx

@@ -1,37 +0,0 @@
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
-
-import { getResetTokenValidity } from '@documenso/lib/server-only/user/get-reset-token-validity';
-
-import { ResetPasswordForm } from '~/components/forms/reset-password';
-
-type ResetPasswordPageProps = {
-  params: {
-    token: string;
-  };
-};
-
-export default async function ResetPasswordPage({ params: { token } }: ResetPasswordPageProps) {
-  const isValid = await getResetTokenValidity({ token });
-
-  if (!isValid) {
-    redirect('/reset-password');
-  }
-
-  return (
-    <div className="w-full">
-      <h1 className="text-4xl font-semibold">Reset Password</h1>
-
-      <p className="text-muted-foreground mt-2 text-sm">Please choose your new password </p>
-
-      <ResetPasswordForm token={token} className="mt-4" />
-
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Don't have an account?{' '}
-        <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
-          Sign up
-        </Link>
-      </p>
-    </div>
-  );
-}

apps/web/src/app/(unauthenticated)/reset-password/page.tsx

@@ -1,20 +0,0 @@
-import Link from 'next/link';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export default function ResetPasswordPage() {
-  return (
-    <div>
-      <h1 className="text-4xl font-semibold">Unable to reset password</h1>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        The token you have used to reset your password is either expired or it never existed. If you
-        have still forgotten your password, please request a new reset link.
-      </p>
-
-      <Button className="mt-4" asChild>
-        <Link href="/signin">Return to sign in</Link>
-      </Button>
-    </div>
-  );
-}

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -1,33 +1,43 @@
+import Image from 'next/image';
 import Link from 'next/link';
 
+import backgroundPattern from '~/assets/background-pattern.png';
+import connections from '~/assets/card-sharing-figure.png';
 import { SignInForm } from '~/components/forms/signin';
 
 export default function SignInPage() {
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative flex max-w-4xl items-center gap-x-24">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:invert dark:sepia"
+          />
+        </div>
 
-      <p className="text-muted-foreground/60 mt-2 text-sm">
-        Welcome back, we are lucky to have you.
-      </p>
+        <div className="max-w-md">
+          <h1 className="text-4xl font-semibold">Sign in to your account</h1>
 
-      <SignInForm className="mt-4" />
+          <p className="text-muted-foreground/60 mt-2 text-sm">
+            Welcome back, we are lucky to have you.
+          </p>
 
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Don't have an account?{' '}
-        <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
-          Sign up
-        </Link>
-      </p>
+          <SignInForm className="mt-4" />
 
-      <p className="mt-2.5 text-center">
-        <Link
-          href="/forgot-password"
-          className="text-muted-foreground text-sm duration-200 hover:opacity-70"
-        >
-          Forgotten your password?
-        </Link>
-      </p>
-    </div>
+          <p className="text-muted-foreground mt-6 text-center text-sm">
+            Don't have an account?{' '}
+            <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+              Sign up
+            </Link>
+          </p>
+        </div>
+
+        <div className="hidden flex-1 lg:block">
+          <Image src={connections} alt="documenso connections" />
+        </div>
+      </div>
+    </main>
   );
 }