feat: doc comments

When the fields are not filled, the button will say "Next field". Clicking on the button takes you to
the unfilled field.

.env.example

@@ -2,6 +2,11 @@
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"
 
+# [[CRYPTO]]
+# Application Key for symmetric encryption and decryption
+# This should be a random string of at least 32 characters
+NEXT_PRIVATE_ENCRYPTION_KEY="CAFEBABE"
+
 # [[AUTH OPTIONAL]]
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
@@ -24,15 +29,15 @@ E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_password"
 # 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=
+NEXT_PRIVATE_UPLOAD_ENDPOINT="http://127.0.0.1:9002"
 # OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
-NEXT_PRIVATE_UPLOAD_REGION=
+NEXT_PRIVATE_UPLOAD_REGION="unknown"
 # REQUIRED: Defines the bucket to use for the S3 storage transport.
-NEXT_PRIVATE_UPLOAD_BUCKET=
+NEXT_PRIVATE_UPLOAD_BUCKET="documenso"
 # OPTIONAL: Defines the access key ID to use for the S3 storage transport.
-NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID=
+NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID="documenso"
 # OPTIONAL: Defines the secret access key to use for the S3 storage transport.
-NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY=
+NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY="password"
 
 # [[SMTP]]
 # OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
@@ -72,16 +77,14 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
-NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
-NEXT_PUBLIC_STRIPE_FREE_PLAN_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=
+# OPTIONAL: Leave blank to allow users to signup through /signup page.
+NEXT_PUBLIC_DISABLE_SIGNUP=
 
 # This is only required for the marketing site
 # [[REDIS]]

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,11 +1,10 @@
-name: "Bug Report"
-labels: ["bug"]
+name: 'Bug Report'
+labels: ['bug']
 description: Create a bug report to help us improve
 body:
   - type: markdown
     attributes:
-      value:
-        Thank you for reporting an issue.
+      value: Thank you for reporting an issue.
         Please fill in as much of the form below as you're able to.
   - type: textarea
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,4 +1,4 @@
-name: "Feature Request"
+name: 'Feature Request'
 description: Suggest a new idea or enhancement for this project
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/improvement.yml

@@ -1,4 +1,4 @@
-name: "General Improvement"
+name: 'General Improvement'
 description: Suggest a minor enhancement or improvement for this project
 body:
   - type: markdown

.github/dependabot.yml

@@ -4,29 +4,29 @@ updates:
   - package-ecosystem: 'github-actions'
     directory: '/'
     schedule:
-      interval: "weekly"
-    target-branch: "main"
+      interval: 'weekly'
+    target-branch: 'main'
     labels:
-      - "ci dependencies"
-      - "ci"
+      - 'ci dependencies'
+      - 'ci'
     open-pull-requests-limit: 0
 
-  - package-ecosystem: "npm"
-    directory: "/apps/marketing"
+  - package-ecosystem: 'npm'
+    directory: '/apps/marketing'
     schedule:
-      interval: "weekly"
-    target-branch: "main"
+      interval: 'weekly'
+    target-branch: 'main'
     labels:
-      - "npm dependencies"
-      - "frontend"
+      - 'npm dependencies'
+      - 'frontend'
     open-pull-requests-limit: 0
 
-  - package-ecosystem: "npm"
-    directory: "/apps/web"
+  - package-ecosystem: 'npm'
+    directory: '/apps/web'
     schedule:
-      interval: "weekly"
-    target-branch: "main"
+      interval: 'weekly'
+    target-branch: 'main'
     labels:
-      - "npm dependencies"
-      - "frontend"
+      - 'npm dependencies'
+      - 'frontend'
     open-pull-requests-limit: 0

.github/labeler.yml

@@ -0,0 +1,21 @@
+'apps: marketing':
+  - apps/marketing/**
+
+'apps: web':
+  - apps/web/**
+
+'version bump 👀':
+  - '**/package.json'
+  - '**/package-lock.json'
+
+'🚨 migrations 🚨':
+  - packages/prisma/migrations/**/migration.sql
+
+'🚨 e2e changes 🚨':
+  - packages/app-tests/e2e/**
+
+'🚨 .env changes 🚨':
+  - .env.example
+
+'pkg: ee changes':
+  - packages/ee/**

.github/workflows/ci.yml

@@ -1,10 +1,10 @@
-name: "Continuous Integration"
+name: 'Continuous Integration'
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
@@ -14,17 +14,17 @@ env:
   HUSKY: 0
 
 jobs:
-  build:
-    name: Build
+  build_app:
+    name: Build App
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: npm
@@ -37,3 +37,15 @@ jobs:
 
       - name: Build
         run: npm run build
+
+  build_docker:
+    name: Build Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Build Docker Image
+        run: ./docker/build.sh

.github/workflows/codeql-analysis.yml

@@ -1,11 +1,11 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   workflow_dispatch:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   analyze:
@@ -19,30 +19,30 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-        cache: npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
 
-    - name: Install Dependencies
-      run: npm ci
+      - name: Install Dependencies
+        run: npm ci
 
-    - name: Copy env
-      run: cp .env.example .env
+      - name: Copy env
+        run: cp .env.example .env
 
-    - name: Build Documenso
-      run: npm run build
+      - name: Build Documenso
+        run: npm run build
 
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/deploy.yml

@@ -0,0 +1,24 @@
+name: Deploy to Production
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          fetch-depth: 0
+          token: ${{ secrets.GH_TOKEN }}
+
+      - name: Push to release branch
+        run: |
+          git checkout release || git checkout -b release
+          git merge --ff-only main
+          git push origin release

.github/workflows/e2e-tests.yml

@@ -1,51 +1,50 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 jobs:
   e2e_tests:
+    name: "E2E Tests"
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: postgres
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-        ports:
-          - 5432:5432
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
+          cache: npm
       - name: Install dependencies
         run: npm ci
+
       - name: Copy env
         run: cp .env.example .env
+
+      - name: Start Services
+        run: npm run dx:up
+
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
+
       - name: Generate Prisma Client
         run: npm run prisma:generate -w @documenso/prisma
+
       - name: Create the database
         run: npm run prisma:migrate-dev
+
+      - name: Seed the database
+        run: npm run prisma:seed
+
       - name: Run Playwright tests
         run: npm run ci
+
       - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: playwright-report
-          path: playwright-report/
+          name: test-results
+          path: "packages/app-tests/**/test-results/*"
           retention-days: 30
     env:
-      NEXT_PRIVATE_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/documenso
-      NEXT_PRIVATE_DIRECT_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/documenso
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ vars.TURBO_TEAM }}

.github/workflows/first-interaction.yml

@@ -0,0 +1,29 @@
+name: 'Welcome New Contributors'
+
+on:
+  pull_request:
+    types: ['opened']
+  issues:
+    types: ['opened']
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  welcome-message:
+    name: Welcome Contributors
+    if: github.event.action == 'opened'
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: |
+            Thank you for creating your first Pull Request and for being a part of the open signing revolution! 💚🚀
+            <br /> Feel free to hop into our community in [Discord](https://documen.so/discord)
+          issue-message: |
+            Thank you for opening your first issue and for being a part of the open signing revolution!
+            <br /> One of our team members will review it and get back to you as soon as it possible 💚
+            <br /> Meanwhile, please feel free to hop into our community in [Discord](https://documen.so/discord)

.github/workflows/issue-assignee-check.yml

@@ -0,0 +1,63 @@
+name: 'Issue Assignee Check'
+
+on:
+  issues:
+    types: ['assigned']
+
+permissions:
+  issues: write
+
+jobs:
+  countIssues:
+    if: ${{ github.event.issue.assignee }} && github.event.action == 'assigned' && github.event.sender.type == 'User'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: npm
+
+      - name: Install Octokit
+        run: npm install @octokit/rest@18
+
+      - name: Check Assigned User's Issue Count
+        id: parse-comment
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { Octokit } = require("@octokit/rest");
+            const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+
+            const username = context.payload.issue.assignee.login;
+            console.log(`Username Extracted: ${username}`);
+
+            const { data: issues } = await octokit.issues.listForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              assignee: username,
+              state: 'open'
+            });
+
+            const issueCount = issues.length;
+            console.log(`Issue Count For ${username}: ${issueCount}`);
+
+            if (issueCount > 3) {
+              let issueCountMessage = `### 🚨 Documenso Police 🚨`;
+              issueCountMessage += `\n@${username} has ${issueCount} open issues assigned already. Consider whether this issue should be assigned to them or left open for another contributor.`;
+
+              await octokit.request('POST /repos/{owner}/{repo}/issues/{issue_number}/comments', {
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: issueCountMessage,
+                headers: {
+                  'Authorization': `token ${{ secrets.GITHUB_TOKEN }}`,
+                }
+              });
+            }

.github/workflows/issue-opened.yml

@@ -0,0 +1,21 @@
+name: 'Label Issues'
+
+on:
+  issues:
+    types: ['opened', 'reopened']
+
+jobs:
+  label_issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - uses: actions/github-script@v6
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ["needs triage"]
+            })

.github/workflows/pr-labeler.yml

@@ -0,0 +1,20 @@
+name: 'PR Labeler'
+
+on:
+  - pull_request_target
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v4
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          sync-labels: ''

.github/workflows/pr-review-reminder.yml

@@ -0,0 +1,64 @@
+name: 'PR Review Reminder'
+
+on:
+  pull_request:
+    types: ['opened', 'reopened', 'ready_for_review', 'review_requested']
+
+permissions:
+  pull-requests: write
+
+jobs:
+  checkPRs:
+    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'reopened' || 'ready_for_review' || 'review_requested')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: npm
+
+      - name: Install Octokit
+        run: npm install @octokit/rest@18
+
+      - name: Check user's PRs awaiting review
+        id: parse-prs
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { Octokit } = require("@octokit/rest");
+            const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+
+            const username = context.payload.pull_request.user.login;
+            console.log(`Username Extracted: ${username}`);
+
+            const { data: pullRequests } = await octokit.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              sort: 'created',
+              direction: 'asc',
+            });
+
+            const userPullRequests = pullRequests.filter(pr => pr.user.login === username && (pr.state === 'open' || pr.state === 'ready_for_review'));
+            const prCount = userPullRequests.length;
+            console.log(`PR Count for ${username}: ${prCount}`);
+
+            if (prCount > 3) {
+              let prReminderMessage = `🚨 @${username} has ${prCount} pull requests awaiting review. Please consider reviewing them when possible. 🚨`;
+
+              await octokit.request('POST /repos/{owner}/{repo}/issues/{issue_number}/comments', {
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.pull_request.number,
+                body: prReminderMessage,
+                headers: {
+                  'Authorization': `token ${{ secrets.GITHUB_TOKEN }}`,
+                }
+              });
+            }

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

@@ -1,4 +1,4 @@
-name: "Validate PR Name"
+name: 'Validate PR Name'
 
 on:
   pull_request_target:
@@ -9,13 +9,54 @@ on:
       - synchronize
 
 permissions:
-  pull-requests: read
+  pull-requests: write
 
 jobs:
   validate-pr:
     name: Validate PR title
     runs-on: ubuntu-latest
     steps:
+      - name: Check PR creator's previous activity
+        id: check_activity
+        run: |
+          CREATOR=$(curl -s "https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}" | jq -r '.user.login')
+          ACTIVITY=$(curl -s "https://api.github.com/search/commits?q=author:${CREATOR}+repo:${{ github.repository }}" | jq -r '.total_count')
+          if [ "$ACTIVITY" -eq 0 ]; then
+            echo "::set-output name=is_new::true"
+          else
+            echo "::set-output name=is_new::false"
+          fi
+
+      - name: Count PRs created by user
+        id: count_prs
+        run: |
+          CREATOR=$(curl -s "https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}" | jq -r '.user.login')
+          PR_COUNT=$(curl -s "https://api.github.com/search/issues?q=type:pr+is:open+author:${CREATOR}+repo:${{ github.repository }}" | jq -r '.total_count')
+          echo "::set-output name=pr_count::$PR_COUNT"
+
       - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Hey There! and thank you for opening this pull request! 📝👋🏼
+
+            We require pull request titles to follow the [Conventional Commits Spec](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null && steps.check_activity.outputs.is_new == 'false' && steps.count_prs.outputs.pr_count < 2}}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          message: |
+            Thank you for following the naming conventions for pull request titles! 💚🚀

.github/workflows/stale.yml

@@ -0,0 +1,24 @@
+name: 'Mark Stale Issues and PRs'
+
+on:
+  schedule:
+    - cron: '0 */8 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+      - uses: actions/stale@v4
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-pr-stale: 90
+          days-before-issue-stale: 90
+          days-before-issue-close: 180
+          stale-pr-message: 'This PR has not seen activitiy for a while. It will be closed in 30 days unless further activity is detected.'
+          close-pr-message: 'This PR has been closed because of inactivity.'
+          exempt-pr-labels: 'WIP,on-hold,needs review'
+          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned,needs triage'

.prettierignore

@@ -0,0 +1,16 @@
+node_modules
+.next
+public
+**/**/node_modules
+**/**/.next
+**/**/public
+
+*.lock
+*.log
+*.test.ts
+
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.eslintignore

.vscode/settings.json

@@ -1,10 +1,13 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "javascript.preferences.useAliasesForRenames": false,
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "files.eol": "\n",
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true
 }

README.md

@@ -13,9 +13,9 @@
     ·
     <a href="https://github.com/documenso/documenso/issues">Issues</a>
     ·
-    <a href="https://github.com/documenso/documenso/milestones">Roadmap</a>
+    <a href="https://documen.so/live">Upcoming Releases</a>
     ·
-    <a href="https://documen.so/launches">Upcoming Launches</a>
+    <a href="https://documen.so/roadmap">Roadmap</a>
   </p>
 </p>
 
@@ -115,10 +115,12 @@ To run Documenso locally, you will need
 
 Want to get up and running quickly? Follow these steps:
 
-1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+After forking the repository, clone it to your local device by using the following command:
 
 ```sh
-git clone https://github.com/documenso/documenso
+git clone https://github.com/<your-username>/documenso
 ```
 
 2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively, just run `cp .env.example .env` to get started with our handpicked defaults.
@@ -139,21 +141,25 @@ npm run d
 
 1. **App** - http://localhost:3000
 2. **Incoming Mail Access** - http://localhost:9000
-
 3. **Database Connection Details**
+
    - **Port**: 54320
    - **Connection**: Use your favorite database client to connect using the provided port.
 
+4. **S3 Storage Dashboard** - http://localhost:9001
+
 ## Developer Setup
 
 ### Manual Setup
 
 Follow these steps to setup Documenso on your local machine:
 
-1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+After forking the repository, clone it to your local device by using the following command:
 
 ```sh
-git clone https://github.com/documenso/documenso
+git clone https://github.com/<your-username>/documenso
 ```
 
 2. Run `npm i` in the root directory
@@ -193,6 +199,12 @@ git clone https://github.com/documenso/documenso
 
 We support DevContainers for VSCode. [Click here to get started.](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso)
 
+### Video walkthrough
+
+If you're a visual learner and prefer to watch a video walkthrough of setting up Documenso locally, check out this video:
+
+[![Watch the video](https://img.youtube.com/vi/Y0ppIQrEnZs/hqdefault.jpg)](https://youtu.be/Y0ppIQrEnZs)
+
 ## Docker
 
 🚧 Docker containers and images are current in progress. We are actively working on bringing a simple Docker build and publish pipeline for Documenso.
@@ -234,7 +246,7 @@ Now you can install the dependencies and build it:
 
 ```
 npm i
-npm run:build:web
+npm run build:web
 npm run prisma:migrate-deploy
 ```
 
@@ -272,12 +284,16 @@ WantedBy=multi-user.target
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/bG6D4p)
 
 ### Render
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
 
+### Koyeb
+
+[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
+
 ## Troubleshooting
 
 ### I'm not receiving any emails when using the developer quickstart.

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

@@ -14,9 +14,11 @@ tags:
 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:

apps/marketing/content/blog/switching-from-slack-to-discord.mdx

@@ -24,9 +24,9 @@ We’re an open-source project and focus on building a great developer experienc
 
 So, we’re switching all conversations, team and community-wide, to Discord.
 
-In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
+In this post, we won’t debate _why_ we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
 
-Instead, we’ll focus on *how* we plan to make the switch.
+Instead, we’ll focus on _how_ we plan to make the switch.
 
 ## Who is this story for?
 
@@ -46,90 +46,91 @@ The detailed plan goes like this:
 - 2023-07-26 `t+1`: The team switches to Discord. The objective is to get used to the product and to customize it to feel at home and, when we’re ready to welcome the community, to make new members feel at home, too.
 - 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack.
 
-    - **GitHub**
-        - Create new Pull Request
-            - Add story to the blog
-            - Update link to the community
+  - **GitHub**
 
-            ```
-            https://documen.so/discord
-            ```
+    - Create new Pull Request
+      - Add story to the blog
+      - Update link to the community
+      ```
+      https://documen.so/discord
+      ```
+    - Start a new Discussion
 
-        - Start a new Discussion
+      ```markdown
+      Happy Wednesday!
 
-            ```markdown
-            Happy Wednesday!
+      TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
 
-            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+      We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
 
-            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+      Make sure to join the server to keep up to date on all things Documenso.
 
-            Make sure to join the server to keep up to date on all things Documenso. 
+      Oh and, spoiler alert, there may be some swag there 👀
 
-            Oh and, spoiler alert, there may be some swag there 👀
+      See you there!
+      Flo
+      ```
 
-            See you there!
-            Flo
-            ```
+  - **Twitter**
 
-    - **Twitter**
-        - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
-        - Pin Tweet
-        - Update link in bio
+    - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
+    - Pin Tweet
+    - Update link in bio
 
-            ```
-            The Open Source DocuSign Alternative.
+      ```
+      The Open Source DocuSign Alternative.
 
-            http://documen.so/github
-            http://documen.so/discord
-            http://documen.so/manifest
-            ㅤ
-            ```
+      http://documen.so/github
+      http://documen.so/discord
+      http://documen.so/manifest
+      ㅤ
+      ```
 
-    - **Slack**
-        - Post message in `#general`
+  - **Slack**
 
-            ```markdown
-            Happy Wednesday!
+    - Post message in `#general`
 
-            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+      ```markdown
+      Happy Wednesday!
 
-            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+      TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
 
-            Make sure to [join the server](https://documen.so/discord) to keep up to date on all things Documenso. 
+      We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
 
-            Oh and, spoiler alert, there may be some swag there 👀
+      Make sure to [join the server](https://documen.so/discord) to keep up to date on all things Documenso.
 
-            See you there!
-            Flo
-            ```
+      Oh and, spoiler alert, there may be some swag there 👀
 
-        - Pin post
-        - Set topic and description
+      See you there!
+      Flo
+      ```
 
-            ```
-            We're switching to Discord. Join the fun: https://documen.so/discord
-            ```
-            
-        - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
+    - Pin post
+    - Set topic and description
+      ```
+      We're switching to Discord. Join the fun: https://documen.so/discord
+      ```
+    - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
 
 - 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack.
-    - **Slack**
-        - Schedule reminder in `#general`
 
-            ```
-            Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace.
+  - **Slack**
 
-            Join the fun! https://documen.so/discord
-            ```
+    - Schedule reminder in `#general`
+
+      ```
+      Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace.
+
+      Join the fun! https://documen.so/discord
+      ```
 
 - 2023-08-16 `t+22`: 15 days later, we’re making the final edits to the Slack workspace.
-    - **Slack**
-        - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general`
-        - Disconnect Slack
+  - **Slack**
+    - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general`
+    - Disconnect Slack
 
 ## Final thoughts
 
 - We’re at the very, early stage on our journey to building a beautiful, open-source DocuSign alternative. We want to build a great developer experience with the open-source community and, switching to Discord, we want to set up the foundations of an open, safe place for community members to get in touch, brainstorm ideas, and have fun.
-- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an *au revoir?*
+- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an _au revoir?_
 - For now, we’re pushing forward and are eager to welcome you on Discord. Make sure to [join the server](https://documen.so/discord) in order to keep up to date on all things Documenso. See you there!

apps/marketing/content/careers.mdx

@@ -0,0 +1,13 @@
+---
+title: Careers at Documenso
+---
+
+# Careers at Documenso
+
+So you love Documenso and all the things that we do and now you want to work with us to unlock the future of open signing?
+
+---
+
+## Open Positions
+
+Unfortunately we have no open positions available at the moment. Our team has grown and so we must grow with it, please check back from time to time as now is not forever and we may be hiring again in the future.

apps/marketing/next.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');
 
@@ -10,15 +11,31 @@ ENV_FILES.forEach((file) => {
   });
 });
 
+// !: This is a temp hack to get caveat working without placing it back in the public directory.
+// !: By inlining this at build time we should be able to sign faster.
+const FONT_CAVEAT_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
   experimental: {
-    serverActionsBodySizeLimit: '10mb',
+    outputFileTracingRoot: path.join(__dirname, '../../'),
+    serverActions: {
+      bodySizeLimit: '50mb',
+    },
   },
   reactStrictMode: true,
-  transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
+  transpilePackages: [
+    '@documenso/assets',
+    '@documenso/lib',
+    '@documenso/tailwind-config',
+    '@documenso/trpc',
+    '@documenso/ui',
+  ],
   env: {
     NEXT_PUBLIC_PROJECT: 'marketing',
+    FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {

apps/marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "0.1.0",
+  "version": "1.2.3",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -8,10 +8,12 @@
     "build": "next build",
     "start": "next start -p 3001",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules",
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/assets": "*",
     "@documenso/lib": "*",
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
@@ -22,8 +24,8 @@
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "next": "14.0.0",
-    "next-auth": "4.24.3",
+    "next": "14.0.3",
+    "next-auth": "4.24.5",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",
@@ -34,7 +36,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "0.32.5",
+    "sharp": "0.33.1",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },
@@ -42,5 +44,13 @@
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7"
+  },
+  "overrides": {
+    "next-auth": {
+      "next": "$next"
+    },
+    "next-contentlayer": {
+      "next": "$next"
+    }
   }
 }

apps/marketing/process-env.d.ts

@@ -6,8 +6,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_FREE_PLAN_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

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

@@ -4,13 +4,13 @@ import { allBlogPosts } from 'contentlayer/generated';
 
 export const runtime = 'edge';
 
-export const size = {
+export const contentType = 'image/png';
+
+export const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
 
-export const contentType = 'image/png';
-
 type BlogPostOpenGraphImageProps = {
   params: { post: string };
 };
@@ -25,16 +25,16 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
   // 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) =>
+    fetch(new URL('@documenso/assets/fonts/inter-bold.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
+    fetch(new URL('@documenso/assets/images/background-blog-og.png', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/logo.png', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
   ]);
@@ -56,7 +56,7 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
       </div>
     ),
     {
-      ...size,
+      ...IMAGE_SIZE,
       fonts: [
         {
           name: 'Inter',

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

@@ -29,7 +29,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
 
   return (
     <div
-      className={cn('relative max-w-[100vw] pt-20 md:pt-28', {
+      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
         'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
       })}
     >
@@ -41,7 +41,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 
-      <div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
+      <div className="relative mx-auto max-w-screen-xl flex-1 px-4 lg:px-8">{children}</div>
 
       <Footer className="bg-background border-muted mt-24 border-t" />
     </div>

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
@@ -22,7 +22,7 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   return (
     <div className={cn('flex flex-col', className)}>
       <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Monthly New Users</h3>
+        <h3 className="text-lg font-semibold">New Users</h3>
       </div>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
@@ -22,7 +22,7 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   return (
     <div className={cn('flex flex-col', className)}>
       <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Monthly Total Users</h3>
+        <h3 className="text-lg font-semibold">Total Users</h3>
       </div>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">

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

@@ -18,6 +18,14 @@ export const revalidate = 3600;
 
 export const dynamic = 'force-dynamic';
 
+const GITHUB_HEADERS: Record<string, string> = {
+  accept: 'application/vnd.github.v3+json',
+};
+
+if (process.env.NEXT_PRIVATE_GITHUB_TOKEN) {
+  GITHUB_HEADERS.authorization = `Bearer ${process.env.NEXT_PRIVATE_GITHUB_TOKEN}`;
+}
+
 const ZGithubStatsResponse = z.object({
   stargazers_count: z.number(),
   forks_count: z.number(),
@@ -28,6 +36,10 @@ const ZMergedPullRequestsResponse = z.object({
   total_count: z.number(),
 });
 
+const ZOpenIssuesResponse = z.object({
+  total_count: z.number(),
+});
+
 const ZStargazersLiveResponse = z.record(
   z.object({
     stars: z.number(),
@@ -48,49 +60,76 @@ const ZEarlyAdoptersResponse = z.record(
 export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
 export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
-export default async function OpenPage() {
-  const GITHUB_HEADERS: Record<string, string> = {
-    accept: 'application/vnd.github.v3+json',
-  };
-
-  if (process.env.NEXT_PRIVATE_GITHUB_TOKEN) {
-    GITHUB_HEADERS.authorization = `Bearer ${process.env.NEXT_PRIVATE_GITHUB_TOKEN}`;
-  }
-
-  const {
-    forks_count: forksCount,
-    open_issues: openIssues,
-    stargazers_count: stargazersCount,
-  } = await fetch('https://api.github.com/repos/documenso/documenso', {
-    headers: GITHUB_HEADERS,
+const fetchGithubStats = async () => {
+  return await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      ...GITHUB_HEADERS,
+    },
   })
     .then(async (res) => res.json())
     .then((res) => ZGithubStatsResponse.parse(res));
+};
 
-  const { total_count: mergedPullRequests } = await fetch(
+const fetchOpenIssues = async () => {
+  return await fetch(
+    'https://api.github.com/search/issues?q=repo:documenso/documenso+type:issue+state:open&page=0&per_page=1',
+    {
+      headers: {
+        ...GITHUB_HEADERS,
+      },
+    },
+  )
+    .then(async (res) => res.json())
+    .then((res) => ZOpenIssuesResponse.parse(res));
+};
+
+const fetchMergedPullRequests = async () => {
+  return await fetch(
     'https://api.github.com/search/issues?q=repo:documenso/documenso/+is:pr+merged:>=2010-01-01&page=0&per_page=1',
     {
-      headers: GITHUB_HEADERS,
+      headers: {
+        ...GITHUB_HEADERS,
+      },
     },
   )
     .then(async (res) => res.json())
     .then((res) => ZMergedPullRequestsResponse.parse(res));
+};
 
-  const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
+const fetchStargazers = async () => {
+  return await fetch('https://stargrazer-live.onrender.com/api/stats', {
     headers: {
       accept: 'application/json',
     },
   })
     .then(async (res) => res.json())
     .then((res) => ZStargazersLiveResponse.parse(res));
+};
 
-  const EARLY_ADOPTERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats/stripe', {
+const fetchEarlyAdopters = async () => {
+  return await fetch('https://stargrazer-live.onrender.com/api/stats/stripe', {
     headers: {
       accept: 'application/json',
     },
   })
     .then(async (res) => res.json())
     .then((res) => ZEarlyAdoptersResponse.parse(res));
+};
+
+export default async function OpenPage() {
+  const [
+    { forks_count: forksCount, stargazers_count: stargazersCount },
+    { total_count: openIssues },
+    { total_count: mergedPullRequests },
+    STARGAZERS_DATA,
+    EARLY_ADOPTERS_DATA,
+  ] = await Promise.all([
+    fetchGithubStats(),
+    fetchOpenIssues(),
+    fetchMergedPullRequests(),
+    fetchStargazers(),
+    fetchEarlyAdopters(),
+  ]);
 
   const MONTHLY_USERS = await getUserMonthlyGrowth();
 

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

@@ -29,10 +29,7 @@ export function OpenPageTooltip() {
           </svg>
         </TooltipTrigger>
         <TooltipContent>
-          <p>
-            August and earlier: Active subscribers. September and beyond: Numbers of active
-            subscriptions.
-          </p>
+          <p>Active Subscriptions.</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

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

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 import { z } from 'zod';
 
-import backgroundPattern from '~/assets/background-pattern.png';
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 import { OSSFriendsContainer } from './container';
 import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link';
 
 import {

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

@@ -8,24 +8,23 @@ import { useRouter } from 'next/navigation';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { base64 } from '@documenso/lib/universal/base64';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { DocumentDataType, Field, Prisma, Recipient } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { DocumentDataType, Prisma } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
-import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
 import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
-import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import type { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { createSinglePlayerDocument } from '~/components/(marketing)/single-player-mode/create-single-player-document.action';
-
-type SinglePlayerModeStep = 'fields' | 'sign';
+const SinglePlayerModeSteps = ['fields', 'sign'] as const;
+type SinglePlayerModeStep = (typeof SinglePlayerModeSteps)[number];
 
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during
@@ -41,6 +40,9 @@ export const SinglePlayerClient = () => {
   const [step, setStep] = useState<SinglePlayerModeStep>('fields');
   const [fields, setFields] = useState<Field[]>([]);
 
+  const { mutateAsync: createSinglePlayerDocument } =
+    trpc.singleplayer.createSinglePlayerDocument.useMutation();
+
   const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
     fields: {
       title: 'Add document',
@@ -84,6 +86,7 @@ export const SinglePlayerClient = () => {
       data.fields.map((field, i) => ({
         id: i,
         documentId: -1,
+        templateId: null,
         recipientId: -1,
         type: field.type,
         page: field.pageNumber,
@@ -146,6 +149,7 @@ export const SinglePlayerClient = () => {
   const placeholderRecipient: Recipient = {
     id: -1,
     documentId: -1,
+    templateId: null,
     email: '',
     name: '',
     token: '',
@@ -223,37 +227,35 @@ export const SinglePlayerClient = () => {
         </div>
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
-            <DocumentFlowFormContainerHeader
-              title={currentDocumentFlow.title}
-              description={currentDocumentFlow.description}
-            />
-
-            {/* Add fields to PDF page. */}
-            {step === 'fields' && (
+          <DocumentFlowFormContainer
+            className="top-24 lg:h-[calc(100vh-7rem)]"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Stepper
+              currentStep={currentDocumentFlow.stepIndex}
+              setCurrentStep={(step) => setStep(SinglePlayerModeSteps[step - 1])}
+            >
+              {/* Add fields to PDF page. */}
               <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
                 <AddFieldsFormPartial
                   documentFlow={documentFlow.fields}
                   hideRecipients={true}
                   recipients={uploadedFile ? [placeholderRecipient] : []}
-                  numberOfSteps={Object.keys(documentFlow).length}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
                 />
               </fieldset>
-            )}
 
-            {/* Enter user details and signature. */}
-            {step === 'sign' && (
+              {/* Enter user details and signature. */}
+
               <AddSignatureFormPartial
                 documentFlow={documentFlow.sign}
-                numberOfSteps={Object.keys(documentFlow).length}
                 fields={fields}
                 onSubmit={onSignSubmit}
                 requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
                 requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
               />
-            )}
+            </Stepper>
           </DocumentFlowFormContainer>
         </div>
       </div>

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

@@ -7,11 +7,10 @@ import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { ChevronLeft } from 'lucide-react';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 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();
 

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

@@ -1,160 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import { useSearchParams } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Info } from 'lucide-react';
-import { usePlausible } from 'next-plausible';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { claimPlan } from '~/api/claim-plan/fetcher';
-
-import { FormErrorMessage } from '../form/form-error-message';
-
-export const ZClaimPlanDialogFormSchema = z.object({
-  name: z.string().trim().min(3, { message: 'Please enter a valid name.' }),
-  email: z.string().email(),
-});
-
-export type TClaimPlanDialogFormSchema = z.infer<typeof ZClaimPlanDialogFormSchema>;
-
-export type ClaimPlanDialogProps = {
-  className?: string;
-  planId: string;
-  children: React.ReactNode;
-};
-
-export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
-  const params = useSearchParams();
-  const analytics = useAnalytics();
-  const event = usePlausible();
-
-  const { toast } = useToast();
-
-  const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    reset,
-  } = useForm<TClaimPlanDialogFormSchema>({
-    defaultValues: {
-      name: params?.get('name') ?? '',
-      email: params?.get('email') ?? '',
-    },
-    resolver: zodResolver(ZClaimPlanDialogFormSchema),
-  });
-
-  const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
-    try {
-      const delay = new Promise<void>((resolve) => {
-        setTimeout(resolve, 1000);
-      });
-
-      const [redirectUrl] = await Promise.all([
-        claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),
-        delay,
-      ]);
-
-      event('claim-plan-pricing');
-      analytics.capture('Marketing: Claim plan', { planId, email });
-
-      window.location.href = redirectUrl;
-    } catch (error) {
-      event('claim-plan-failed');
-      analytics.capture('Marketing: Claim plan failure', { planId, email });
-
-      toast({
-        title: 'Something went wrong',
-        description: error instanceof Error ? error.message : 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isSubmitting && !open) {
-      reset();
-    }
-  }, [open]);
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isSubmitting && setOpen(value)}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Claim your plan</DialogTitle>
-
-          <DialogDescription className="mt-4">
-            We're almost there! Please enter your email address and name to claim your plan.
-          </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>
-                </div>
-              </div>
-            )}
-
-            <div>
-              <Label className="text-muted-foreground">Name</Label>
-
-              <Input type="text" className="mt-2" {...register('name')} autoFocus />
-
-              <FormErrorMessage className="mt-1" error={errors.name} />
-            </div>
-
-            <div>
-              <Label className="text-muted-foreground">Email</Label>
-
-              <Input type="email" className="mt-2" {...register('email')} />
-
-              <FormErrorMessage className="mt-1" error={errors.email} />
-            </div>
-
-            <Button type="submit" size="lg" loading={isSubmitting}>
-              Claim the early adopters 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>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx

@@ -2,14 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardBeautifulFigure from '@documenso/assets/images/card-beautiful-figure.png';
+import cardFastFigure from '@documenso/assets/images/card-fast-figure.png';
+import cardSmartFigure from '@documenso/assets/images/card-smart-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardBeautifulFigure from '~/assets/card-beautiful-figure.png';
-import cardFastFigure from '~/assets/card-fast-figure.png';
-import cardSmartFigure from '~/assets/card-smart-figure.png';
-
 export type FasterSmarterBeautifulBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const FasterSmarterBeautifulBento = ({

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

@@ -1,17 +1,17 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
+import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -26,23 +26,23 @@ const FOOTER_LINKS = [
   { href: '/singleplayer', text: 'Singleplayer' },
   { href: '/blog', text: 'Blog' },
   { href: '/design-system', text: 'Design' },
-  { href: '/open', text: 'Open' },
+  { href: '/open', text: 'Open Startup' },
   { 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', target: '_blank' },
+  { href: '/oss-friends', text: 'OSS Friends' },
+  { href: '/careers', text: 'Careers' },
   { href: '/privacy', text: 'Privacy' },
 ];
 
 export const Footer = ({ className, ...props }: FooterProps) => {
-  const { setTheme } = useTheme();
-
   return (
     <div className={cn('border-t py-12', className)} {...props}>
       <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
-        <div>
+        <div className="flex-shrink-0">
           <Link href="/">
             <Image
-              src="/logo.png"
+              src={LogoImage}
               alt="Documenso Logo"
               className="dark:invert"
               width={170}
@@ -64,34 +64,26 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
+        <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">
           {FOOTER_LINKS.map((link, index) => (
             <Link
               key={index}
               href={link.href}
               target={link.target}
-              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 text-sm"
+              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 break-words text-sm"
             >
               {link.text}
             </Link>
           ))}
         </div>
       </div>
-      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap justify-between gap-4 px-8 md:mt-12 lg:mt-24">
+      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap items-center justify-between gap-4 px-8 md:mt-12 lg:mt-24">
         <p className="text-muted-foreground text-sm">
           © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
         </p>
 
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
-          <button type="button" className="text-muted-foreground" onClick={() => setTheme('light')}>
-            <Sun className="h-5 w-5" />
-            <span className="sr-only">Light</span>
-          </button>
-
-          <button type="button" className="text-muted-foreground" onClick={() => setTheme('dark')}>
-            <Moon className="h-5 w-5" />
-            <span className="sr-only">Dark</span>
-          </button>
+        <div className="flex flex-wrap">
+          <ThemeSwitcher />
         </div>
       </div>
     </div>

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

@@ -1,10 +1,12 @@
 'use client';
 
-import { HTMLAttributes, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -25,7 +27,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
       <div className="flex items-center space-x-4">
         <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
           <Image
-            src="/logo.png"
+            src={LogoImage}
             alt="Documenso Logo"
             className="dark:invert"
             width={170}
@@ -62,7 +64,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           href="/open"
           className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
         >
-          Open
+          Open Startup
         </Link>
 
         <Link

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

@@ -8,12 +8,11 @@ import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-
 import { Widget } from './widget';
 
 export type HeroProps = {

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

@@ -8,6 +8,7 @@ import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 
 export type MobileNavigationProps = {
@@ -30,7 +31,7 @@ export const MENU_NAVIGATION_LINKS = [
   },
   {
     href: '/open',
-    text: 'Open',
+    text: 'Open Startup',
   },
   {
     href: 'https://status.documenso.com',
@@ -63,7 +64,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
       <SheetContent className="w-full max-w-[400px]">
         <Link href="/" className="z-10" onClick={handleMenuItemClick}>
           <Image
-            src="/logo.png"
+            src={LogoImage}
             alt="Documenso Logo"
             className="dark:invert"
             width={170}

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

@@ -2,14 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardBuildFigure from '@documenso/assets/images/card-build-figure.png';
+import cardOpenFigure from '@documenso/assets/images/card-open-figure.png';
+import cardTemplateFigure from '@documenso/assets/images/card-template-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardBuildFigure from '~/assets/card-build-figure.png';
-import cardOpenFigure from '~/assets/card-open-figure.png';
-import cardTemplateFigure from '~/assets/card-template-figure.png';
-
 export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { HTMLAttributes, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
 
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
 
 import { AnimatePresence, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
@@ -16,14 +16,9 @@ export type PricingTableProps = HTMLAttributes<HTMLDivElement>;
 const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar';
 
 export const PricingTable = ({ className, ...props }: PricingTableProps) => {
-  const params = useSearchParams();
   const event = usePlausible();
 
-  const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>(() =>
-    params?.get('planId') === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID
-      ? 'YEARLY'
-      : 'MONTHLY',
-  );
+  const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>('MONTHLY');
 
   return (
     <div className={cn('', className)} {...props}>

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -2,15 +2,14 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardConnectionsFigure from '@documenso/assets/images/card-connections-figure.png';
+import cardPaidFigure from '@documenso/assets/images/card-paid-figure.png';
+import cardSharingFigure from '@documenso/assets/images/card-sharing-figure.png';
+import cardWidgetFigure from '@documenso/assets/images/card-widget-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardConnectionsFigure from '~/assets/card-connections-figure.png';
-import cardPaidFigure from '~/assets/card-paid-figure.png';
-import cardSharingFigure from '~/assets/card-sharing-figure.png';
-import cardWidgetFigure from '~/assets/card-widget-figure.png';
-
 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const ShareConnectPaidWidgetBento = ({

apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -1,233 +0,0 @@
-'use server';
-
-import { createElement } from 'react';
-
-import { DateTime } from 'luxon';
-import { PDFDocument } from 'pdf-lib';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
-import { mailer } from '@documenso/email/mailer';
-import { render } from '@documenso/email/render';
-import { DocumentSelfSignedEmailTemplate } from '@documenso/email/templates/document-self-signed';
-import { FROM_ADDRESS, FROM_NAME, SERVICE_USER_EMAIL } from '@documenso/lib/constants/email';
-import { insertFieldInPDF } from '@documenso/lib/server-only/pdf/insert-field-in-pdf';
-import { alphaid } from '@documenso/lib/universal/id';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { prisma } from '@documenso/prisma';
-import {
-  DocumentDataType,
-  DocumentStatus,
-  FieldType,
-  Prisma,
-  ReadStatus,
-  SendStatus,
-  SigningStatus,
-} from '@documenso/prisma/client';
-import { signPdf } from '@documenso/signing';
-
-const ZCreateSinglePlayerDocumentSchema = z.object({
-  documentData: z.object({
-    data: z.string(),
-    type: z.nativeEnum(DocumentDataType),
-  }),
-  documentName: z.string(),
-  signer: z.object({
-    email: z.string().email().min(1),
-    name: z.string(),
-    signature: z.string(),
-  }),
-  fields: z.array(
-    z.object({
-      page: z.number(),
-      type: z.nativeEnum(FieldType),
-      positionX: z.number(),
-      positionY: z.number(),
-      width: z.number(),
-      height: z.number(),
-    }),
-  ),
-});
-
-export type TCreateSinglePlayerDocumentSchema = z.infer<typeof ZCreateSinglePlayerDocumentSchema>;
-
-/**
- * Create and self signs a document.
- *
- * Returns the document token.
- */
-export const createSinglePlayerDocument = async (
-  value: TCreateSinglePlayerDocumentSchema,
-): Promise<string> => {
-  const { signer, fields, documentData, documentName } =
-    ZCreateSinglePlayerDocumentSchema.parse(value);
-
-  const document = await getFile({
-    data: documentData.data,
-    type: documentData.type,
-  });
-
-  const doc = await PDFDocument.load(document);
-  const createdAt = new Date();
-
-  const isBase64 = signer.signature.startsWith('data:image/png;base64,');
-  const signatureImageAsBase64 = isBase64 ? signer.signature : null;
-  const typedSignature = !isBase64 ? signer.signature : null;
-
-  // Update the document with the fields inserted.
-  for (const field of fields) {
-    const isSignatureField = field.type === FieldType.SIGNATURE;
-
-    await insertFieldInPDF(doc, {
-      ...mapField(field, signer),
-      Signature: isSignatureField
-        ? {
-            created: createdAt,
-            signatureImageAsBase64,
-            typedSignature,
-            // Dummy data.
-            id: -1,
-            recipientId: -1,
-            fieldId: -1,
-          }
-        : null,
-      // Dummy data.
-      id: -1,
-      documentId: -1,
-      recipientId: -1,
-    });
-  }
-
-  const unsignedPdfBytes = await doc.save();
-
-  const signedPdfBuffer = await signPdf({ pdf: Buffer.from(unsignedPdfBytes) });
-
-  const { token } = await prisma.$transaction(
-    async (tx) => {
-      const token = alphaid();
-
-      // Fetch service user who will be the owner of the document.
-      const serviceUser = await tx.user.findFirstOrThrow({
-        where: {
-          email: SERVICE_USER_EMAIL,
-        },
-      });
-
-      const { id: documentDataId } = await putFile({
-        name: `${documentName}.pdf`,
-        type: 'application/pdf',
-        arrayBuffer: async () => Promise.resolve(signedPdfBuffer),
-      });
-
-      // Create document.
-      const document = await tx.document.create({
-        data: {
-          title: documentName,
-          status: DocumentStatus.COMPLETED,
-          documentDataId,
-          userId: serviceUser.id,
-          createdAt,
-        },
-      });
-
-      // Create recipient.
-      const recipient = await tx.recipient.create({
-        data: {
-          documentId: document.id,
-          name: signer.name,
-          email: signer.email,
-          token,
-          signedAt: createdAt,
-          readStatus: ReadStatus.OPENED,
-          signingStatus: SigningStatus.SIGNED,
-          sendStatus: SendStatus.SENT,
-        },
-      });
-
-      // Create fields and signatures.
-      await Promise.all(
-        fields.map(async (field) => {
-          const insertedField = await tx.field.create({
-            data: {
-              documentId: document.id,
-              recipientId: recipient.id,
-              ...mapField(field, signer),
-            },
-          });
-
-          if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
-            await tx.signature.create({
-              data: {
-                fieldId: insertedField.id,
-                signatureImageAsBase64,
-                typedSignature,
-                recipientId: recipient.id,
-              },
-            });
-          }
-        }),
-      );
-
-      return { document, token };
-    },
-    {
-      maxWait: 5000,
-      timeout: 30000,
-    },
-  );
-
-  const template = createElement(DocumentSelfSignedEmailTemplate, {
-    documentName: documentName,
-    assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
-  });
-
-  // Send email to signer.
-  await mailer.sendMail({
-    to: {
-      address: signer.email,
-      name: signer.name,
-    },
-    from: {
-      name: FROM_NAME,
-      address: FROM_ADDRESS,
-    },
-    subject: 'Document signed',
-    html: render(template),
-    text: render(template, { plainText: true }),
-    attachments: [{ content: signedPdfBuffer, filename: documentName }],
-  });
-
-  return token;
-};
-
-/**
- * Map the fields provided by the user to fields compatible with Prisma.
- *
- * Signature fields are handled separately.
- *
- * @param field The field passed in by the user.
- * @param signer The details of the person who is signing this document.
- * @returns A field compatible with Prisma.
- */
-const mapField = (
-  field: TCreateSinglePlayerDocumentSchema['fields'][number],
-  signer: TCreateSinglePlayerDocumentSchema['signer'],
-) => {
-  const customText = match(field.type)
-    .with(FieldType.DATE, () => DateTime.now().toFormat('yyyy-MM-dd hh:mm a'))
-    .with(FieldType.EMAIL, () => signer.email)
-    .with(FieldType.NAME, () => signer.name)
-    .otherwise(() => '');
-
-  return {
-    type: field.type,
-    page: field.page,
-    positionX: new Prisma.Decimal(field.positionX),
-    positionY: new Prisma.Decimal(field.positionY),
-    width: new Prisma.Decimal(field.width),
-    height: new Prisma.Decimal(field.height),
-    customText,
-    inserted: true,
-  };
-};

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -4,9 +4,11 @@ import { useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { DocumentStatus, Signature } from '@documenso/prisma/client';
-import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
+import type { Signature } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -14,7 +16,6 @@ import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import signingCelebration from '~/assets/signing-celebration.png';
 import { ConfettiScreen } from '~/components/(marketing)/confetti-screen';
 
 interface SinglePlayerModeSuccessProps {

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { HTMLAttributes, KeyboardEvent, useMemo, useState } from 'react';
+import type { HTMLAttributes, KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -26,6 +27,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { claimPlan } from '~/api/claim-plan/fetcher';
 
+import { STEP } from '../constants';
 import { FormErrorMessage } from '../form/form-error-message';
 
 const ZWidgetFormSchema = z
@@ -48,13 +50,16 @@ const ZWidgetFormSchema = z
 
 export type TWidgetFormSchema = z.infer<typeof ZWidgetFormSchema>;
 
+type StepKeys = keyof typeof STEP;
+type StepValues = (typeof STEP)[StepKeys];
+
 export type WidgetProps = HTMLAttributes<HTMLDivElement>;
 
 export const Widget = ({ className, children, ...props }: WidgetProps) => {
   const { toast } = useToast();
   const event = usePlausible();
 
-  const [step, setStep] = useState<'EMAIL' | 'NAME' | 'SIGN'>('EMAIL');
+  const [step, setStep] = useState<StepValues>(STEP.EMAIL);
   const [showSigningDialog, setShowSigningDialog] = useState(false);
   const [draftSignatureDataUrl, setDraftSignatureDataUrl] = useState<string | null>(null);
 
@@ -81,28 +86,28 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
   const signatureText = watch('signatureText');
 
   const stepsRemaining = useMemo(() => {
-    if (step === 'NAME') {
+    if (step === STEP.NAME) {
       return 2;
     }
 
-    if (step === 'SIGN') {
-      return 1;
+    if (step === STEP.EMAIL) {
+      return 3;
     }
 
-    return 3;
+    return 1;
   }, [step]);
 
   const onNextStepClick = () => {
-    if (step === 'EMAIL') {
-      setStep('NAME');
+    if (step === STEP.EMAIL) {
+      setStep(STEP.NAME);
 
       setTimeout(() => {
         document.querySelector<HTMLElement>('#name')?.focus();
       }, 0);
     }
 
-    if (step === 'NAME') {
-      setStep('SIGN');
+    if (step === STEP.NAME) {
+      setStep(STEP.SIGN);
 
       setTimeout(() => {
         document.querySelector<HTMLElement>('#signatureText')?.focus();
@@ -226,7 +231,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                           type="button"
                           className="bg-primary h-full w-14 rounded"
                           disabled={!field.value || !!errors.email?.message}
-                          onClick={() => step === 'EMAIL' && onNextStepClick()}
+                          onClick={() => step === STEP.EMAIL && onNextStepClick()}
                         >
                           Next
                         </Button>
@@ -238,7 +243,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                 <FormErrorMessage error={errors.email} className="mt-1" />
               </motion.div>
 
-              {(step === 'NAME' || step === 'SIGN') && (
+              {(step === STEP.NAME || step === STEP.SIGN) && (
                 <motion.div
                   key="name"
                   className="mt-4"

apps/marketing/src/components/constants.ts

@@ -0,0 +1,5 @@
+export const STEP = {
+  EMAIL: 'EMAIL',
+  NAME: 'NAME',
+  SIGN: 'SIGN',
+} as const;

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

@@ -1,13 +1,13 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomBytes } from 'crypto';
-import { readFileSync } from 'fs';
 import { buffer } from 'micro';
 
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
 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 type { Stripe } from '@documenso/lib/server-only/stripe';
+import { 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';
@@ -88,7 +88,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
-      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
+      const bytes64 = await fetch(
+        new URL('@documenso/assets/documenso-supporter-pledge.pdf', import.meta.url),
+      )
+        .then(async (res) => res.arrayBuffer())
+        .then((buffer) => Buffer.from(buffer).toString('base64'));
 
       const { id: documentDataId } = await prisma.documentData.create({
         data: {

apps/marketing/src/pages/api/trpc/[trpc].ts

@@ -2,6 +2,15 @@ import * as trpcNext from '@documenso/trpc/server/adapters/next';
 import { createTrpcContext } from '@documenso/trpc/server/context';
 import { appRouter } from '@documenso/trpc/server/router';
 
+export const config = {
+  maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
+};
+
 export default trpcNext.createNextApiHandler({
   router: appRouter,
   createContext: async ({ req, res }) => createTrpcContext({ req, res }),

apps/web/next.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
 const path = require('path');
 const { version } = require('./package.json');
 
@@ -10,22 +11,35 @@ ENV_FILES.forEach((file) => {
   });
 });
 
+// !: This is a temp hack to get caveat working without placing it back in the public directory.
+// !: By inlining this at build time we should be able to sign faster.
+const FONT_CAVEAT_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
+  output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
-    serverActionsBodySizeLimit: '50mb',
+    outputFileTracingRoot: path.join(__dirname, '../../'),
+    serverActions: {
+      bodySizeLimit: '50mb',
+    },
   },
   reactStrictMode: true,
   transpilePackages: [
+    '@documenso/assets',
+    '@documenso/ee',
     '@documenso/lib',
     '@documenso/prisma',
+    '@documenso/tailwind-config',
     '@documenso/trpc',
     '@documenso/ui',
-    '@documenso/email',
   ],
   env: {
     APP_VERSION: version,
     NEXT_PUBLIC_PROJECT: 'web',
+    FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "0.1.0",
+  "version": "1.2.3",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -8,10 +8,13 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "e2e:prepare": "next build && next start",
+    "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules",
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/assets": "*",
     "@documenso/ee": "*",
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
@@ -25,8 +28,8 @@
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "next": "14.0.0",
-    "next-auth": "4.24.3",
+    "next": "14.0.3",
+    "next-auth": "4.24.5",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
     "perfect-freehand": "^1.2.0",
@@ -39,9 +42,10 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
-    "sharp": "0.32.5",
+    "sharp": "0.33.1",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",
+    "uqr": "^0.1.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -50,5 +54,13 @@
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7"
+  },
+  "overrides": {
+    "next-auth": {
+      "next": "$next"
+    },
+    "next-contentlayer": {
+      "next": "$next"
+    }
   }
 }

apps/web/process-env.d.ts

@@ -6,8 +6,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_FREE_PLAN_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 
 import { AdminNav } from './nav';

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

@@ -4,12 +4,11 @@ import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
   FormControl,
@@ -19,6 +18,7 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multiselect-combobox';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
@@ -117,7 +117,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
                   <fieldset className="flex flex-col gap-2">
                     <FormLabel className="text-muted-foreground">Roles</FormLabel>
                     <FormControl>
-                      <Combobox
+                      <MultiSelectCombobox
                         listValues={roles}
                         onChange={(values: string[]) => onChange(values)}
                       />

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

@@ -8,7 +8,7 @@ import { Edit, Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { Document, Role, Subscription } from '@documenso/prisma/client';
+import type { Document, Role, Subscription } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -19,7 +19,7 @@ type UserData = {
   name: string | null;
   email: string;
   roles: Role[];
-  Subscription?: SubscriptionLite | null;
+  Subscription?: SubscriptionLite[] | null;
   Document: DocumentLite[];
 };
 
@@ -35,9 +35,16 @@ type UsersDataTableProps = {
   totalPages: number;
   perPage: number;
   page: number;
+  individualPriceIds: string[];
 };
 
-export const UsersDataTable = ({ users, totalPages, perPage, page }: UsersDataTableProps) => {
+export const UsersDataTable = ({
+  users,
+  totalPages,
+  perPage,
+  page,
+  individualPriceIds,
+}: UsersDataTableProps) => {
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
   const [searchString, setSearchString] = useState('');
@@ -100,7 +107,13 @@ export const UsersDataTable = ({ users, totalPages, perPage, page }: UsersDataTa
           {
             header: 'Subscription',
             accessorKey: 'subscription',
-            cell: ({ row }) => row.original.Subscription?.status ?? 'NONE',
+            cell: ({ row }) => {
+              const foundIndividualSubscription = (row.original.Subscription ?? []).find((sub) =>
+                individualPriceIds.includes(sub.priceId),
+              );
+
+              return foundIndividualSubscription?.status ?? 'NONE';
+            },
           },
           {
             header: 'Documents',

apps/web/src/app/(dashboard)/admin/users/fetch-users.actions.ts

@@ -1,8 +1,16 @@
 'use server';
 
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
 
 export async function search(search: string, page: number, perPage: number) {
+  const { user } = await getRequiredServerComponentSession();
+
+  if (!isAdmin(user)) {
+    throw new Error('Unauthorized');
+  }
+
   const results = await findUsers({ username: search, email: search, page, perPage });
 
   return results;

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

@@ -1,3 +1,5 @@
+import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
+
 import { UsersDataTable } from './data-table-users';
 import { search } from './fetch-users.actions';
 
@@ -14,12 +16,23 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
   const perPage = Number(searchParams.perPage) || 10;
   const searchString = searchParams.search || '';
 
-  const { users, totalPages } = await search(searchString, page, perPage);
+  const [{ users, totalPages }, individualPrices] = await Promise.all([
+    search(searchString, page, perPage),
+    getPricesByType('individual'),
+  ]);
+
+  const individualPriceIds = individualPrices.map((price) => price.id);
 
   return (
     <div>
       <h2 className="text-4xl font-semibold">Manage users</h2>
-      <UsersDataTable users={users} totalPages={totalPages} page={page} perPage={perPage} />
+      <UsersDataTable
+        users={users}
+        individualPriceIds={individualPriceIds}
+        totalPages={totalPages}
+        page={page}
+        perPage={perPage}
+      />
     </div>
   );
 }

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

@@ -4,27 +4,27 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc } from '@documenso/trpc/react';
 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 type { 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 type { 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 type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
+import { AddTitleFormPartial } from '@documenso/ui/primitives/document-flow/add-title';
+import type { TAddTitleFormSchema } from '@documenso/ui/primitives/document-flow/add-title.types';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 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 { Comments } from '~/components/forms/comments';
 
 export type EditDocumentFormProps = {
   className?: string;
@@ -35,7 +35,8 @@ export type EditDocumentFormProps = {
   documentData: DocumentData;
 };
 
-type EditDocumentStep = 'signers' | 'fields' | 'subject';
+type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
+const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'subject'];
 
 export const EditDocumentForm = ({
   className,
@@ -48,29 +49,60 @@ export const EditDocumentForm = ({
   const { toast } = useToast();
   const router = useRouter();
 
-  const [step, setStep] = useState<EditDocumentStep>('signers');
+  // controlled stepper state
+  const [step, setStep] = useState<EditDocumentStep>(
+    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
+  );
+
+  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
+  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
+  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
+    title: {
+      title: 'Add Title',
+      description: 'Add the title to the document.',
+      stepIndex: 1,
+    },
     signers: {
       title: 'Add Signers',
       description: 'Add the people who will sign the document.',
-      stepIndex: 1,
+      stepIndex: 2,
     },
     fields: {
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
-      stepIndex: 2,
-      onBackStep: () => setStep('signers'),
+      stepIndex: 3,
     },
     subject: {
       title: 'Add Subject',
       description: 'Add the subject and message you wish to send to signers.',
-      stepIndex: 3,
-      onBackStep: () => setStep('fields'),
+      stepIndex: 4,
     },
   };
 
-  const currentDocumentFlow = documentFlow[step];
+  const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addTitle({
+        documentId: document.id,
+        title: data.title,
+      });
+
+      router.refresh();
+
+      setStep('signers');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating title.',
+        variant: 'destructive',
+      });
+    }
+  };
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
@@ -81,7 +113,6 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -103,7 +134,6 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -117,14 +147,16 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message } = data.email;
+    const { subject, message, timezone, dateFormat } = data.meta;
 
     try {
-      await completeDocument({
+      await sendDocument({
         documentId: document.id,
-        email: {
+        meta: {
           subject,
           message,
+          timezone,
+          dateFormat,
         },
       });
 
@@ -146,58 +178,73 @@ export const EditDocumentForm = ({
     }
   };
 
+  const currentDocumentFlow = documentFlow[step];
+
   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"
-        gradient
-      >
-        <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+    <div>
+      <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"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <DocumentFlowFormContainer
+            className="lg:h-[calc(100vh-6rem)]"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Stepper
+              currentStep={currentDocumentFlow.stepIndex}
+              setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
+            >
+              <AddTitleFormPartial
+                key={recipients.length}
+                documentFlow={documentFlow.title}
+                recipients={recipients}
+                fields={fields}
+                document={document}
+                onSubmit={onAddTitleFormSubmit}
+              />
+
+              <AddSignersFormPartial
+                key={recipients.length}
+                documentFlow={documentFlow.signers}
+                document={document}
+                recipients={recipients}
+                fields={fields}
+                onSubmit={onAddSignersFormSubmit}
+              />
+              <AddFieldsFormPartial
+                key={fields.length}
+                documentFlow={documentFlow.fields}
+                recipients={recipients}
+                fields={fields}
+                onSubmit={onAddFieldsFormSubmit}
+              />
+              <AddSubjectFormPartial
+                key={recipients.length}
+                documentFlow={documentFlow.subject}
+                document={document}
+                recipients={recipients}
+                fields={fields}
+                onSubmit={onAddSubjectFormSubmit}
+              />
+            </Stepper>
+          </DocumentFlowFormContainer>
+        </div>
+      </div>
+      <Card className="my-8" gradient={true} degrees={200}>
+        <CardContent className="mt-8 flex flex-col">
+          <h2 className="text-foreground text-2xl font-semibold">Comments</h2>
+          <hr className="border-border mb-4 mt-4" />
+          <Comments />
+          <hr className="border-border -mt-4 mb-4" />
         </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
-              key={recipients.length}
-              documentFlow={documentFlow.signers}
-              recipients={recipients}
-              fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
-              onSubmit={onAddSignersFormSubmit}
-            />
-          )}
-
-          {step === 'fields' && (
-            <AddFieldsFormPartial
-              key={fields.length}
-              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>
-      </div>
     </div>
   );
 };

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

@@ -3,7 +3,7 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 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';
@@ -43,11 +43,11 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
   const { documentData } = document;
 
   const [recipients, fields] = await Promise.all([
-    await getRecipientsForDocument({
+    getRecipientsForDocument({
       documentId,
       userId: user.id,
     }),
-    await getFieldsForDocument({
+    getFieldsForDocument({
       documentId,
       userId: user.id,
     }),

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { History } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { type Document, type Recipient, SigningStatus } from '@documenso/prisma/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { DropdownMenuItem } from '@documenso/ui/primitives/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
+
+const FORM_ID = 'resend-email';
+
+export type ResendDocumentActionItemProps = {
+  document: Document;
+  recipients: Recipient[];
+};
+
+export const ZResendDocumentFormSchema = z.object({
+  recipients: z.array(z.number()).min(1, {
+    message: 'You must select at least one item.',
+  }),
+});
+
+export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema>;
+
+export const ResendDocumentActionItem = ({
+  document,
+  recipients,
+}: ResendDocumentActionItemProps) => {
+  const { data: session } = useSession();
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const isOwner = document.userId === session?.user?.id;
+
+  const isDisabled =
+    !isOwner ||
+    document.status !== 'PENDING' ||
+    !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
+
+  const { mutateAsync: resendDocument } = trpcReact.document.resendDocument.useMutation();
+
+  const form = useForm<TResendDocumentFormSchema>({
+    resolver: zodResolver(ZResendDocumentFormSchema),
+    defaultValues: {
+      recipients: [],
+    },
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = form;
+
+  const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
+    try {
+      await resendDocument({ documentId: document.id, recipients });
+
+      toast({
+        title: 'Document re-sent',
+        description: 'Your document has been re-sent successfully.',
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'This document could not be re-sent at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
+            <History className="mr-2 h-4 w-4" />
+            Resend
+          </DropdownMenuItem>
+        </DialogTrigger>
+
+        <DialogContent className="sm:max-w-sm" hideClose>
+          <DialogHeader>
+            <DialogTitle>
+              <h1 className="text-center text-xl">Who do you want to remind?</h1>
+            </DialogTitle>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
+              <FormField
+                control={form.control}
+                name="recipients"
+                render={({ field: { value, onChange } }) => (
+                  <>
+                    {recipients.map((recipient) => (
+                      <FormItem
+                        key={recipient.id}
+                        className="flex flex-row items-center justify-between gap-x-3"
+                      >
+                        <FormLabel
+                          className={cn('my-2 flex items-center gap-2 font-normal', {
+                            'opacity-50': !value.includes(recipient.id),
+                          })}
+                        >
+                          <StackAvatar
+                            key={recipient.id}
+                            type={getRecipientType(recipient)}
+                            fallbackText={recipientAbbreviation(recipient)}
+                          />
+                          {recipient.email}
+                        </FormLabel>
+
+                        <FormControl>
+                          <Checkbox
+                            className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black "
+                            checkClassName="text-white"
+                            value={recipient.id}
+                            checked={value.includes(recipient.id)}
+                            onCheckedChange={(checked: boolean) =>
+                              checked
+                                ? onChange([...value, recipient.id])
+                                : onChange(value.filter((v) => v !== recipient.id))
+                            }
+                          />
+                        </FormControl>
+                      </FormItem>
+                    ))}
+                  </>
+                )}
+              />
+            </form>
+          </Form>
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <DialogClose asChild>
+                <Button
+                  type="button"
+                  className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                  variant="secondary"
+                  disabled={isSubmitting}
+                >
+                  Cancel
+                </Button>
+              </DialogClose>
+
+              <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
+                Send reminder
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

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

@@ -2,13 +2,17 @@
 
 import Link from 'next/link';
 
-import { Edit, Pencil, Share } from 'lucide-react';
+import { Download, Edit, Pencil } 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 { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DataTableActionButtonProps = {
   row: Document & {
@@ -19,6 +23,7 @@ export type DataTableActionButtonProps = {
 
 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
 
   if (!session) {
     return null;
@@ -33,6 +38,50 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onDownloadClick = async () => {
+    try {
+      let document: DocumentWithData | null = null;
+
+      if (!recipient) {
+        document = await trpcClient.document.getDocumentById.query({
+          id: row.id,
+        });
+      } else {
+        document = await trpcClient.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');
+      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
+
+      link.href = window.URL.createObjectURL(blob);
+      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
+    } catch (error) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while trying to download file.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return match({
     isOwner,
     isRecipient,
@@ -42,7 +91,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     isSigned,
   })
     .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/documents/${row.id}`}>
           <Edit className="-ml-1 mr-2 h-4 w-4" />
           Edit
@@ -50,23 +99,24 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
           <Pencil className="-ml-1 mr-2 h-4 w-4" />
           Sign
         </Link>
       </Button>
     ))
-    .otherwise(() => (
-      <DocumentShareButton
-        documentId={row.id}
-        token={recipient?.token}
-        trigger={({ loading }) => (
-          <Button className="w-24" loading={loading}>
-            {!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
-            Share
-          </Button>
-        )}
-      />
-    ));
+    .with({ isPending: true, isSigned: true }, () => (
+      <Button className="w-32" disabled={true}>
+        <Pencil className="-ml-1 mr-2 inline h-4 w-4" />
+        Sign
+      </Button>
+    ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-32" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        Download
+      </Button>
+    ))
+    .otherwise(() => <div></div>);
 };

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

@@ -8,7 +8,6 @@ import {
   Copy,
   Download,
   Edit,
-  History,
   Loader,
   MoreHorizontal,
   Pencil,
@@ -19,8 +18,9 @@ import {
 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 type { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@@ -31,7 +31,8 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';
+import { ResendDocumentActionItem } from './_action-items/resend-document';
+import { DeleteDocumentDialog } from './delete-document-dialog';
 import { DuplicateDocumentDialog } from './duplicate-document-dialog';
 
 export type DataTableActionDropdownProps = {
@@ -59,7 +60,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   // const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner && row.status === DocumentStatus.DRAFT;
+  const isDocumentDeletable = isOwner;
 
   const onDownloadClick = async () => {
     let document: DocumentWithData | null = null;
@@ -87,15 +88,18 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
     });
 
     const link = window.document.createElement('a');
+    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
 
     link.href = window.URL.createObjectURL(blob);
-    link.download = row.title || 'document.pdf';
+    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
 
     link.click();
 
     window.URL.revokeObjectURL(link.href);
   };
 
+  const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -141,19 +145,16 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
         <DropdownMenuLabel>Share</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled>
-          <History className="mr-2 h-4 w-4" />
-          Resend
-        </DropdownMenuItem>
+        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} />
 
         <DocumentShareButton
           documentId={row.id}
-          token={recipient?.token}
+          token={isOwner ? undefined : recipient?.token}
           trigger={({ loading, disabled }) => (
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share
+                Share Signing Card
               </div>
             </DropdownMenuItem>
           )}
@@ -161,8 +162,10 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       </DropdownMenuContent>
 
       {isDocumentDeletable && (
-        <DeleteDraftDocumentDialog
+        <DeleteDocumentDialog
           id={row.id}
+          status={row.status}
+          documentTitle={row.title}
           open={isDeleteDialogOpen}
           onOpenChange={setDeleteDialogOpen}
         />

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

@@ -6,8 +6,9 @@ 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 type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
@@ -74,12 +75,14 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           },
           {
             header: 'Actions',
-            cell: ({ row }) => (
-              <div className="flex items-center gap-x-4">
-                <DataTableActionButton row={row.original} />
-                <DataTableActionDropdown row={row.original} />
-              </div>
-            ),
+            cell: ({ row }) =>
+              (!row.original.deletedAt ||
+                row.original.status === ExtendedDocumentStatus.COMPLETED) && (
+                <div className="flex items-center gap-x-4">
+                  <DataTableActionButton row={row.original} />
+                  <DataTableActionDropdown row={row.original} />
+                </div>
+              ),
           },
         ]}
         data={results.data}

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

@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { DocumentStatus } from '@documenso/prisma/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DeleteDraftDocumentDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  status: DocumentStatus;
+  documentTitle: string;
+};
+
+export const DeleteDocumentDialog = ({
+  id,
+  open,
+  onOpenChange,
+  status,
+  documentTitle,
+}: DeleteDraftDocumentDialogProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [inputValue, setInputValue] = useState('');
+  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
+
+  const { mutateAsync: deleteDocument, isLoading } = trpcReact.document.deleteDocument.useMutation({
+    onSuccess: () => {
+      router.refresh();
+
+      toast({
+        title: 'Document deleted',
+        description: `"${documentTitle}" has been successfully deleted`,
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      setInputValue('');
+      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
+    }
+  }, [open, status]);
+
+  const onDelete = async () => {
+    try {
+      await deleteDocument({ id, status });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'This document could not be deleted at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    setIsDeleteEnabled(event.target.value === 'delete');
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure you want to delete "{documentTitle}"?</DialogTitle>
+
+          <DialogDescription>
+            Please note that this action is irreversible. Once confirmed, your document will be
+            permanently deleted.
+          </DialogDescription>
+        </DialogHeader>
+
+        {status !== DocumentStatus.DRAFT && (
+          <div className="mt-4">
+            <Input
+              type="text"
+              value={inputValue}
+              onChange={onInputChange}
+              placeholder="Type 'delete' to confirm"
+            />
+          </div>
+        )}
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+
+            <Button
+              type="button"
+              loading={isLoading}
+              onClick={onDelete}
+              disabled={!isDeleteEnabled}
+              variant="destructive"
+              className="flex-1"
+            >
+              Delete
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -26,14 +26,14 @@ export const DuplicateDocumentDialog = ({
   const router = useRouter();
   const { toast } = useToast();
 
-  const { data, isLoading } = trpcReact.document.getDocumentById.useQuery({
+  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
     id,
   });
 
-  const documentData = data?.documentData
+  const documentData = document?.documentData
     ? {
-        ...data.documentData,
-        data: data.documentData.initialData,
+        ...document.documentData,
+        data: document.documentData.initialData,
       }
     : undefined;
 
@@ -41,6 +41,7 @@ export const DuplicateDocumentDialog = ({
     trpcReact.document.duplicateDocument.useMutation({
       onSuccess: (newId) => {
         router.push(`/documents/${newId}`);
+
         toast({
           title: 'Document Duplicated',
           description: 'Your document has been successfully duplicated.',
@@ -78,7 +79,7 @@ export const DuplicateDocumentDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll  ">
-            <LazyPDFViewer key={data?.id} documentData={documentData} />
+            <LazyPDFViewer key={document?.id} documentData={documentData} />
           </div>
         )}
 

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

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-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';
@@ -8,10 +8,8 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import {
-  PeriodSelectorValue,
-  isPeriodSelectorValue,
-} from '~/components/(dashboard)/period-selector/types';
+import type { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
@@ -80,7 +78,12 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                 ExtendedDocumentStatus.DRAFT,
                 ExtendedDocumentStatus.ALL,
               ].map((value) => (
-                <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
+                <TabsTrigger
+                  key={value}
+                  className="hover:text-foreground min-w-[60px]"
+                  value={value}
+                  asChild
+                >
                   <Link href={getTabHref(value)} scroll={false}>
                     <DocumentStatus status={value} />
 

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

@@ -1,13 +1,15 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -22,6 +24,9 @@ export type UploadDocumentProps = {
 
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
   const router = useRouter();
+  const analytics = useAnalytics();
+
+  const { data: session } = useSession();
 
   const { toast } = useToast();
 
@@ -31,6 +36,16 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
+  const disabledMessage = useMemo(() => {
+    if (remaining.documents === 0) {
+      return 'You have reached your document limit.';
+    }
+
+    if (!session?.user.emailVerified) {
+      return 'Verify your email to upload documents.';
+    }
+  }, [remaining.documents, session?.user.emailVerified]);
+
   const onFileDrop = async (file: File) => {
     try {
       setIsLoading(true);
@@ -53,6 +68,12 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         duration: 5000,
       });
 
+      analytics.capture('App: Document Uploaded', {
+        userId: session?.user.id,
+        documentId: id,
+        timestamp: new Date().toISOString(),
+      });
+
       router.push(`/documents/${id}`);
     } catch (error) {
       console.error(error);
@@ -79,7 +100,8 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
     <div className={cn('relative', className)}>
       <DocumentDropzone
         className="min-h-[40vh]"
-        disabled={remaining.documents === 0}
+        disabled={remaining.documents === 0 || !session?.user.emailVerified}
+        disabledMessage={disabledMessage}
         onDrop={onFileDrop}
       />
 

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

@@ -6,9 +6,10 @@ import { getServerSession } from 'next-auth';
 
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
+import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
 
@@ -30,6 +31,7 @@ export default async function AuthenticatedDashboardLayout({
   return (
     <NextAuthProvider session={session}>
       <LimitsProvider>
+        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
         <Header user={user} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
 import { Button } from '@documenso/ui/primitives/button';

apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts

@@ -1,45 +1,13 @@
 'use server';
 
-import {
-  getStripeCustomerByEmail,
-  getStripeCustomerById,
-} from '@documenso/ee/server-only/stripe/get-customer';
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 export const createBillingPortal = async () => {
   const { user } = await getRequiredServerComponentSession();
 
-  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
-
-  let stripeCustomer: Stripe.Customer | null = null;
-
-  // Find the Stripe customer for the current user subscription.
-  if (existingSubscription) {
-    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
-
-    if (!stripeCustomer) {
-      throw new Error('Missing Stripe customer for subscription');
-    }
-  }
-
-  // Fallback to check if a Stripe customer already exists for the current user email.
-  if (!stripeCustomer) {
-    stripeCustomer = await getStripeCustomerByEmail(user.email);
-  }
-
-  // Create a Stripe customer if it does not exist for the current user.
-  if (!stripeCustomer) {
-    stripeCustomer = await stripe.customers.create({
-      name: user.name ?? undefined,
-      email: user.email,
-      metadata: {
-        userId: user.id,
-      },
-    });
-  }
+  const { stripeCustomer } = await getStripeCustomerByUser(user);
 
   return getPortalSession({
     customerId: stripeCustomer.id,

apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts

@@ -1,55 +1,36 @@
 'use server';
 
-import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
 import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
-import {
-  getStripeCustomerByEmail,
-  getStripeCustomerById,
-} from '@documenso/ee/server-only/stripe/get-customer';
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { Stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
 
 export type CreateCheckoutOptions = {
   priceId: string;
 };
 
 export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
-  const { user } = await getRequiredServerComponentSession();
+  const session = await getRequiredServerComponentSession();
 
-  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
+  const { user, stripeCustomer } = await getStripeCustomerByUser(session.user);
 
-  let stripeCustomer: Stripe.Customer | null = null;
+  const existingSubscriptions = await getSubscriptionsByUserId({ userId: user.id });
 
-  // Find the Stripe customer for the current user subscription.
-  if (existingSubscription) {
-    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
-
-    if (!stripeCustomer) {
-      throw new Error('Missing Stripe customer for subscription');
-    }
+  const foundSubscription = existingSubscriptions.find(
+    (subscription) =>
+      subscription.priceId === priceId &&
+      subscription.periodEnd &&
+      subscription.periodEnd >= new Date(),
+  );
 
+  if (foundSubscription) {
     return getPortalSession({
       customerId: stripeCustomer.id,
       returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
     });
   }
 
-  // Fallback to check if a Stripe customer already exists for the current user email.
-  if (!stripeCustomer) {
-    stripeCustomer = await getStripeCustomerByEmail(user.email);
-  }
-
-  // Create a Stripe customer if it does not exist for the current user.
-  if (!stripeCustomer) {
-    await createCustomer({
-      user,
-    });
-
-    stripeCustomer = await getStripeCustomerByEmail(user.email);
-  }
-
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,

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

@@ -2,12 +2,15 @@ import { redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
-import { Stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { type Stripe } from '@documenso/lib/server-only/stripe';
+import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
+import { SubscriptionStatus } from '@documenso/prisma/client';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 
@@ -15,7 +18,7 @@ import { BillingPlans } from './billing-plans';
 import { BillingPortalButton } from './billing-portal-button';
 
 export default async function BillingSettingsPage() {
-  const { user } = await getRequiredServerComponentSession();
+  let { user } = await getRequiredServerComponentSession();
 
   const isBillingEnabled = await getServerComponentFlag('app_billing');
 
@@ -24,24 +27,40 @@ export default async function BillingSettingsPage() {
     redirect('/settings/profile');
   }
 
-  const [subscription, prices] = await Promise.all([
-    getSubscriptionByUserId({ userId: user.id }),
-    getPricesByInterval(),
+  if (!user.customerId) {
+    user = await getStripeCustomerByUser(user).then((result) => result.user);
+  }
+
+  const [subscriptions, prices, individualPrices] = await Promise.all([
+    getSubscriptionsByUserId({ userId: user.id }),
+    getPricesByInterval({ type: 'individual' }),
+    getPricesByType('individual'),
   ]);
 
+  const individualPriceIds = individualPrices.map(({ id }) => id);
+
   let subscriptionProduct: Stripe.Product | null = null;
 
+  const individualUserSubscriptions = subscriptions.filter(({ priceId }) =>
+    individualPriceIds.includes(priceId),
+  );
+
+  const subscription =
+    individualUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
+    individualUserSubscriptions[0];
+
   if (subscription?.priceId) {
     subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(
       () => null,
     );
   }
 
-  const isMissingOrInactiveOrFreePlan = !subscription || subscription.status === 'INACTIVE';
+  const isMissingOrInactiveOrFreePlan =
+    !subscription || subscription.status === SubscriptionStatus.INACTIVE;
 
   return (
     <div>
-      <h3 className="text-lg font-medium">Billing</h3>
+      <h3 className="text-2xl font-semibold">Billing</h3>
 
       <div className="text-muted-foreground mt-2 text-sm">
         {isMissingOrInactiveOrFreePlan && (

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

@@ -1,19 +1,5 @@
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { redirect } from 'next/navigation';
 
-import { PasswordForm } from '~/components/forms/password';
-
-export default async function PasswordSettingsPage() {
-  const { user } = await getRequiredServerComponentSession();
-
-  return (
-    <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>
-
-      <hr className="my-4" />
-
-      <PasswordForm user={user} className="max-w-xl" />
-    </div>
-  );
+export default function PasswordSettingsPage() {
+  redirect('/settings/security');
 }

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

@@ -1,4 +1,4 @@
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { ProfileForm } from '~/components/forms/profile';
 
@@ -7,7 +7,7 @@ export default async function ProfileSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-lg font-medium">Profile</h3>
+      <h3 className="text-2xl font-semibold">Profile</h3>
 
       <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
 

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

@@ -0,0 +1,46 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+
+import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
+import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function SecuritySettingsPage() {
+  const { user } = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">Security</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        Here you can manage your password and security settings.
+      </p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-lg font-medium">Two Factor Authentication</h4>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        Add and manage your two factor security settings to add an extra layer of security to your
+        account!
+      </p>
+
+      <div className="mt-4 max-w-xl">
+        <h5 className="font-medium">Two-factor methods</h5>
+
+        <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
+      </div>
+
+      {user.twoFactorEnabled && (
+        <div className="mt-4 max-w-xl">
+          <h5 className="font-medium">Recovery methods</h5>
+
+          <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
+import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
+import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients';
+import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EditTemplateFormProps = {
+  className?: string;
+  user: User;
+  template: Template;
+  recipients: Recipient[];
+  fields: Field[];
+  documentData: DocumentData;
+};
+
+type EditTemplateStep = 'signers' | 'fields';
+const EditTemplateSteps: EditTemplateStep[] = ['signers', 'fields'];
+
+export const EditTemplateForm = ({
+  className,
+  template,
+  recipients,
+  fields,
+  user: _user,
+  documentData,
+}: EditTemplateFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const [step, setStep] = useState<EditTemplateStep>('signers');
+
+  const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
+    signers: {
+      title: 'Add Placeholders',
+      description: 'Add all relevant placeholders for each recipient.',
+      stepIndex: 1,
+    },
+    fields: {
+      title: 'Add Fields',
+      description: 'Add all relevant fields for each recipient.',
+      stepIndex: 2,
+    },
+  };
+
+  const currentDocumentFlow = documentFlow[step];
+
+  const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation();
+  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation();
+
+  const onAddTemplatePlaceholderFormSubmit = async (
+    data: TAddTemplatePlacholderRecipientsFormSchema,
+  ) => {
+    try {
+      await addTemplateSigners({
+        templateId: template.id,
+        signers: data.signers,
+      });
+
+      router.refresh();
+
+      setStep('fields');
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onAddFieldsFormSubmit = async (data: TAddTemplateFieldsFormSchema) => {
+    try {
+      await addTemplateFields({
+        templateId: template.id,
+        fields: data.fields,
+      });
+
+      toast({
+        title: 'Template saved',
+        description: 'Your templates has been saved successfully.',
+        duration: 5000,
+      });
+
+      router.push('/templates');
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <DocumentFlowFormContainerHeader
+            title={currentDocumentFlow.title}
+            description={currentDocumentFlow.description}
+          />
+
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
+          >
+            <AddTemplatePlaceholderRecipientsFormPartial
+              key={recipients.length}
+              documentFlow={documentFlow.signers}
+              recipients={recipients}
+              fields={fields}
+              onSubmit={onAddTemplatePlaceholderFormSubmit}
+            />
+
+            <AddTemplateFieldsFormPartial
+              key={fields.length}
+              documentFlow={documentFlow.fields}
+              recipients={recipients}
+              fields={fields}
+              onSubmit={onAddFieldsFormSubmit}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
+import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+
+import { TemplateType } from '~/components/formatter/template-type';
+
+import { EditTemplateForm } from './edit-template';
+
+export type TemplatePageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default async function TemplatePage({ params }: TemplatePageProps) {
+  const { id } = params;
+
+  const templateId = Number(id);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    redirect('/documents');
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    redirect('/documents');
+  }
+
+  const { templateDocumentData } = template;
+
+  const [templateRecipients, templateFields] = await Promise.all([
+    getRecipientsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+    getFieldsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Templates
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+        {template.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+      </div>
+
+      <EditTemplateForm
+        className="mt-8"
+        template={template}
+        user={user}
+        recipients={templateRecipients}
+        fields={templateFields}
+        documentData={templateDocumentData}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState } from 'react';
+
+import Link from 'next/link';
+
+import { Copy, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import type { Template } from '@documenso/prisma/client';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+import { DeleteTemplateDialog } from './delete-template-dialog';
+import { DuplicateTemplateDialog } from './duplicate-template-dialog';
+
+export type DataTableActionDropdownProps = {
+  row: Template;
+};
+
+export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+  const { data: session } = useSession();
+
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+
+  if (!session) {
+    return null;
+  }
+
+  const isOwner = row.userId === session.user.id;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled={!isOwner} asChild>
+          <Link href={`/templates/${row.id}`}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Link>
+        </DropdownMenuItem>
+
+        {/* <DropdownMenuItem disabled={!isOwner} onClick={async () => onDuplicateButtonClick(row.id)}> */}
+        <DropdownMenuItem disabled={!isOwner} onClick={() => setDuplicateDialogOpen(true)}>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isOwner} onClick={() => setDeleteDialogOpen(true)}>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+
+      <DuplicateTemplateDialog
+        id={row.id}
+        open={isDuplicateDialogOpen}
+        onOpenChange={setDuplicateDialogOpen}
+      />
+
+      <DeleteTemplateDialog
+        id={row.id}
+        open={isDeleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+      />
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader, Plus } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import type { Template } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+import { TemplateType } from '~/components/formatter/template-type';
+
+import { DataTableActionDropdown } from './data-table-action-dropdown';
+import { DataTableTitle } from './data-table-title';
+
+type TemplatesDataTableProps = {
+  templates: Template[];
+  perPage: number;
+  page: number;
+  totalPages: number;
+};
+
+export const TemplatesDataTable = ({
+  templates,
+  perPage,
+  page,
+  totalPages,
+}: TemplatesDataTableProps) => {
+  const [isPending, startTransition] = useTransition();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const router = useRouter();
+
+  const { toast } = useToast();
+  const [loadingStates, setLoadingStates] = useState<{ [key: string]: boolean }>({});
+
+  const { mutateAsync: createDocumentFromTemplate } =
+    trpc.template.createDocumentFromTemplate.useMutation();
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  const onUseButtonClick = async (templateId: number) => {
+    try {
+      const { id } = await createDocumentFromTemplate({
+        templateId,
+      });
+
+      toast({
+        title: 'Document created',
+        description: 'Your document has been created from the template successfully.',
+        duration: 5000,
+      });
+
+      router.push(`/documents/${id}`);
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while creating document from template.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={[
+          {
+            header: 'Created',
+            accessorKey: 'createdAt',
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+          },
+          {
+            header: 'Title',
+            cell: ({ row }) => <DataTableTitle row={row.original} />,
+          },
+          {
+            header: 'Type',
+            accessorKey: 'type',
+            cell: ({ row }) => <TemplateType type={row.original.type} />,
+          },
+          {
+            header: 'Actions',
+            accessorKey: 'actions',
+            cell: ({ row }) => {
+              const isRowLoading = loadingStates[row.original.id];
+
+              return (
+                <div className="flex items-center gap-x-4">
+                  <Button
+                    disabled={isRowLoading}
+                    loading={isRowLoading}
+                    onClick={async () => {
+                      setLoadingStates((prev) => ({ ...prev, [row.original.id]: true }));
+                      await onUseButtonClick(row.original.id);
+                      setLoadingStates((prev) => ({ ...prev, [row.original.id]: false }));
+                    }}
+                  >
+                    {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
+                    Use Template
+                  </Button>
+                  <DataTableActionDropdown row={row.original} />
+                </div>
+              );
+            },
+          },
+        ]}
+        data={templates}
+        perPage={perPage}
+        currentPage={page}
+        totalPages={totalPages}
+        onPaginationChange={onPaginationChange}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      {isPending && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+import { useSession } from 'next-auth/react';
+
+import { Template } from '@documenso/prisma/client';
+
+export type DataTableTitleProps = {
+  row: Template;
+};
+
+export const DataTableTitle = ({ row }: DataTableTitleProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  return (
+    <Link
+      href={`/templates/${row.id}`}
+      className="block max-w-[10rem] cursor-pointer truncate font-medium hover:underline md:max-w-[20rem]"
+    >
+      {row.title}
+    </Link>
+  );
+};

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

@@ -12,43 +12,38 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type DeleteDraftDocumentDialogProps = {
+type DeleteTemplateDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
-export const DeleteDraftDocumentDialog = ({
-  id,
-  open,
-  onOpenChange,
-}: DeleteDraftDocumentDialogProps) => {
+export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateDialogProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
 
-  const { mutateAsync: deleteDocument, isLoading } =
-    trpcReact.document.deleteDraftDocument.useMutation({
-      onSuccess: () => {
-        router.refresh();
+  const { mutateAsync: deleteTemplate, isLoading } = trpcReact.template.deleteTemplate.useMutation({
+    onSuccess: () => {
+      router.refresh();
 
-        toast({
-          title: 'Document deleted',
-          description: 'Your document has been successfully deleted.',
-          duration: 5000,
-        });
+      toast({
+        title: 'Template deleted',
+        description: 'Your template has been successfully deleted.',
+        duration: 5000,
+      });
 
-        onOpenChange(false);
-      },
-    });
+      onOpenChange(false);
+    },
+  });
 
-  const onDraftDelete = async () => {
+  const onDeleteTemplate = async () => {
     try {
-      await deleteDocument({ id });
+      await deleteTemplate({ id });
     } catch {
       toast({
         title: 'Something went wrong',
-        description: 'This document could not be deleted at this time. Please try again.',
+        description: 'This template could not be deleted at this time. Please try again.',
         variant: 'destructive',
         duration: 7500,
       });
@@ -59,10 +54,10 @@ export const DeleteDraftDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Do you want to delete this document?</DialogTitle>
+          <DialogTitle>Do you want to delete this template?</DialogTitle>
 
           <DialogDescription>
-            Please note that this action is irreversible. Once confirmed, your document will be
+            Please note that this action is irreversible. Once confirmed, your template will be
             permanently deleted.
           </DialogDescription>
         </DialogHeader>
@@ -78,7 +73,7 @@ export const DeleteDraftDocumentDialog = ({
               Cancel
             </Button>
 
-            <Button type="button" loading={isLoading} onClick={onDraftDelete} className="flex-1">
+            <Button type="button" loading={isLoading} onClick={onDeleteTemplate} className="flex-1">
               Delete
             </Button>
           </div>

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

@@ -0,0 +1,87 @@
+import { useRouter } from 'next/navigation';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DuplicateTemplateDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DuplicateTemplateDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: DuplicateTemplateDialogProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { mutateAsync: duplicateTemplate, isLoading } =
+    trpcReact.template.duplicateTemplate.useMutation({
+      onSuccess: () => {
+        router.refresh();
+
+        toast({
+          title: 'Template duplicated',
+          description: 'Your template has been duplicated successfully.',
+          duration: 5000,
+        });
+
+        onOpenChange(false);
+      },
+    });
+
+  const onDuplicate = async () => {
+    try {
+      await duplicateTemplate({
+        templateId: id,
+      });
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while duplicating template.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Do you want to duplicate this template?</DialogTitle>
+
+          <DialogDescription className="pt-2">Your template will be duplicated.</DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+
+            <Button type="button" loading={isLoading} onClick={onDuplicate} className="flex-1">
+              Duplicate
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { Bird } from 'lucide-react';
+
+export const EmptyTemplateState = () => {
+  return (
+    <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+      <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+      <div className="text-center">
+        <h3 className="text-lg font-semibold">We're all empty</h3>
+
+        <p className="mt-2 max-w-[50ch]">
+          You have not yet created any templates. To create a template please upload one.
+        </p>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,228 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FilePlus, X } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
+import { base64 } from '@documenso/lib/universal/base64';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZCreateTemplateFormSchema = z.object({
+  name: z.string(),
+});
+
+type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
+
+export const NewTemplateDialog = () => {
+  const router = useRouter();
+  const { data: session } = useSession();
+  const { toast } = useToast();
+
+  const form = useForm<TCreateTemplateFormSchema>({
+    defaultValues: {
+      name: '',
+    },
+    resolver: zodResolver(ZCreateTemplateFormSchema),
+  });
+
+  const { mutateAsync: createTemplate, isLoading: isCreatingTemplate } =
+    trpc.template.createTemplate.useMutation();
+
+  const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
+  const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const base64String = base64.encode(new Uint8Array(arrayBuffer));
+
+      setUploadedFile({
+        file,
+        fileBase64: `data:application/pdf;base64,${base64String}`,
+      });
+
+      if (!form.getValues('name')) {
+        form.setValue('name', file.name);
+      }
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async (values: TCreateTemplateFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    const file: File = uploadedFile.file;
+
+    try {
+      const { type, data } = await putFile(file);
+
+      const { id: templateDocumentDataId } = await createDocumentData({
+        type,
+        data,
+      });
+
+      const { id } = await createTemplate({
+        title: values.name ? values.name : file.name,
+        templateDocumentDataId,
+      });
+
+      toast({
+        title: 'Template document uploaded',
+        description:
+          'Your document has been uploaded successfully. You will be redirected to the template page.',
+        duration: 5000,
+      });
+
+      setShowNewTemplateDialog(false);
+
+      void router.push(`/templates/${id}`);
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const resetForm = () => {
+    if (form.getValues('name') === uploadedFile?.file.name) {
+      form.reset();
+    }
+
+    setUploadedFile(null);
+  };
+
+  useEffect(() => {
+    if (!showNewTemplateDialog) {
+      form.reset();
+    }
+  }, [form, showNewTemplateDialog]);
+
+  return (
+    <Dialog open={showNewTemplateDialog} onOpenChange={setShowNewTemplateDialog}>
+      <DialogTrigger asChild>
+        <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
+          <FilePlus className="-ml-1 mr-2 h-4 w-4" />
+          New Template
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="w-full max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="mb-4">New Template</DialogTitle>
+        </DialogHeader>
+
+        <div>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name your template</FormLabel>
+                    <FormControl>
+                      <Input id="email" type="text" className="bg-background mt-1.5" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      <span className="text-muted-foreground text-xs">
+                        Leave this empty if you would like to use your document's name for the
+                        template
+                      </span>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <Label htmlFor="template">Upload a Document</Label>
+
+                <div className="my-3">
+                  {uploadedFile ? (
+                    <Card gradient className="h-[40vh]">
+                      <CardContent className="flex h-full flex-col items-center justify-center p-2">
+                        <button
+                          onClick={() => resetForm()}
+                          title="Remove Template"
+                          className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+                        >
+                          <X className="h-6 w-6" />
+                          <span className="sr-only">Remove Template</span>
+                        </button>
+
+                        <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
+                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
+                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                        </div>
+
+                        <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
+                          Uploaded Document
+                        </p>
+
+                        <span className="text-muted-foreground/80 mt-1 text-sm">
+                          {uploadedFile.file.name}
+                        </span>
+                      </CardContent>
+                    </Card>
+                  ) : (
+                    <DocumentDropzone
+                      className="mt-1.5 h-[40vh]"
+                      onDrop={onFileDrop}
+                      type="template"
+                    />
+                  )}
+                </div>
+              </div>
+
+              <div className="flex w-full justify-end">
+                <Button loading={isCreatingTemplate} type="submit">
+                  Create Template
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTemplates } from '@documenso/lib/server-only/template/get-templates';
+
+import { TemplatesDataTable } from './data-table-templates';
+import { EmptyTemplateState } from './empty-state';
+import { NewTemplateDialog } from './new-template-dialog';
+
+type TemplatesPageProps = {
+  searchParams?: {
+    page?: number;
+    perPage?: number;
+  };
+};
+
+export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  const { user } = await getRequiredServerComponentSession();
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+
+  const { templates, totalPages } = await getTemplates({
+    userId: user.id,
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <h1 className="mb-5 mt-2 truncate text-2xl font-semibold md:text-3xl">Templates</h1>
+
+        <div>
+          <NewTemplateDialog />
+        </div>
+      </div>
+
+      <div className="relative">
+        {templates.length > 0 ? (
+          <TemplatesDataTable
+            templates={templates}
+            page={page}
+            perPage={perPage}
+            totalPages={totalPages}
+          />
+        ) : (
+          <EmptyTemplateState />
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -3,17 +3,16 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
-import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+import type { ShareHandlerAPIResponse } from '~/pages/api/share';
 
-import { Logo } from '~/components/branding/logo';
-import { getAssetBuffer } from '~/helpers/get-asset-buffer';
+export const runtime = 'edge';
 
-const CARD_OFFSET_TOP = 152;
-const CARD_OFFSET_LEFT = 350;
-const CARD_WIDTH = 500;
-const CARD_HEIGHT = 250;
+const CARD_OFFSET_TOP = 173;
+const CARD_OFFSET_LEFT = 307;
+const CARD_WIDTH = 590;
+const CARD_HEIGHT = 337;
 
-const size = {
+const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
@@ -24,15 +23,27 @@ type SharePageOpenGraphImageProps = {
 
 export async function GET(_request: Request, { params: { slug } }: SharePageOpenGraphImageProps) {
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
-    getAssetBuffer('/fonts/inter-semibold.ttf'),
-    getAssetBuffer('/fonts/inter-regular.ttf'),
-    getAssetBuffer('/fonts/caveat-regular.ttf'),
-    getAssetBuffer('/static/og-share-frame.png'),
+    fetch(new URL('@documenso/assets/fonts/inter-semibold.ttf', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/fonts/caveat-regular.ttf', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/static/og-share-frame2.png', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
   ]);
 
-  const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
+  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
-  if (!recipientOrSender) {
+  const recipientOrSender: ShareHandlerAPIResponse = await fetch(
+    new URL(`/api/share?slug=${slug}`, baseUrl),
+  ).then(async (res) => res.json());
+
+  if ('error' in recipientOrSender) {
     return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
@@ -60,11 +71,6 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
 
-        <div tw="absolute top-20 flex w-full items-center justify-center">
-          {/* @ts-expect-error Lack of typing from ImageResponse */}
-          <Logo tw="h-8 w-60" />
-        </div>
-
         {signatureImage ? (
           <div
             tw="absolute py-6 px-12 flex items-center justify-center text-center"
@@ -96,40 +102,28 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
           </p>
         )}
 
-        {/* <div
-          tw="absolute flex items-center justify-center text-slate-500"
-          style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT - 45}px`,
-            left: `${CARD_OFFSET_LEFT}`,
-            width: `${CARD_WIDTH}px`,
-            fontSize: '30px',
-          }}
-        >
-          {signatureName}
-        </div> */}
-
         <div
-          tw="absolute flex flex-col items-center justify-center pt-12 w-full"
+          tw="absolute flex w-full"
           style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
+            top: `${CARD_OFFSET_TOP - 78}px`,
+            left: `${CARD_OFFSET_LEFT}px`,
           }}
         >
           <h2
-            tw="text-3xl text-slate-500"
+            tw="text-xl"
             style={{
+              color: '#828282',
               fontFamily: 'Inter',
-              fontWeight: 600,
+              fontWeight: 700,
             }}
           >
-            {isRecipient
-              ? 'I just signed with Documenso and you can too!'
-              : 'I just sent a document with Documenso and you can too!'}
+            {isRecipient ? 'Document Signed!' : 'Document Sent!'}
           </h2>
         </div>
       </div>
     ),
     {
-      ...size,
+      ...IMAGE_SIZE,
       fonts: [
         {
           name: 'Caveat',

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -11,7 +11,7 @@ type SharePageProps = {
 export function generateMetadata({ params: { slug } }: SharePageProps) {
   return {
     title: 'Documenso - Share',
-    description: 'I just signed a document with Documenso!',
+    description: 'I just signed a document in style with Documenso!',
     openGraph: {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',

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

@@ -2,8 +2,10 @@ import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
 import { CheckCircle2, Clock8 } from 'lucide-react';
+import { getServerSession } from 'next-auth';
 import { match } from 'ts-pattern';
 
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 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';
@@ -13,7 +15,7 @@ import { DocumentDownloadButton } from '@documenso/ui/components/document/docume
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
-import signingCelebration from '~/assets/signing-celebration.png';
+import { truncateTitle } from '~/helpers/truncate-title';
 
 export type CompletedSigningPageProps = {
   params: {
@@ -36,6 +38,8 @@ export default async function CompletedSigningPage({
     return notFound();
   }
 
+  const truncatedTitle = truncateTitle(document.title);
+
   const { documentData } = document;
 
   const [fields, recipient] = await Promise.all([
@@ -54,6 +58,9 @@ export default async function CompletedSigningPage({
     fields.find((field) => field.type === FieldType.NAME)?.customText ||
     recipient.email;
 
+  const sessionData = await getServerSession();
+  const isLoggedIn = !!sessionData?.user;
+
   return (
     <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44">
       {/* Card with recipient */}
@@ -64,35 +71,47 @@ export default async function CompletedSigningPage({
       />
 
       <div className="relative mt-6 flex w-full flex-col items-center">
-        {match(document.status)
-          .with(DocumentStatus.COMPLETED, () => (
+        {match({ status: document.status, deletedAt: document.deletedAt })
+          .with({ status: DocumentStatus.COMPLETED }, () => (
             <div className="text-documenso-700 flex items-center text-center">
               <CheckCircle2 className="mr-2 h-5 w-5" />
               <span className="text-sm">Everyone has signed</span>
             </div>
           ))
-          .otherwise(() => (
+          .with({ deletedAt: null }, () => (
             <div className="flex items-center text-center text-blue-600">
               <Clock8 className="mr-2 h-5 w-5" />
               <span className="text-sm">Waiting for others to sign</span>
             </div>
+          ))
+          .otherwise(() => (
+            <div className="flex items-center text-center text-red-600">
+              <Clock8 className="mr-2 h-5 w-5" />
+              <span className="text-sm">Document no longer available to sign</span>
+            </div>
           ))}
 
         <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
           You have signed
-          <span className="mt-1.5 block">"{document.title}"</span>
+          <span className="mt-1.5 block">"{truncatedTitle}"</span>
         </h2>
 
-        {match(document.status)
-          .with(DocumentStatus.COMPLETED, () => (
+        {match({ status: document.status, deletedAt: document.deletedAt })
+          .with({ status: DocumentStatus.COMPLETED }, () => (
             <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
               Everyone has signed! You will receive an Email copy of the signed document.
             </p>
           ))
-          .otherwise(() => (
+          .with({ deletedAt: null }, () => (
             <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
               You will receive an Email copy of the signed document once everyone has signed.
             </p>
+          ))
+          .otherwise(() => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              This document has been cancelled by the owner and is no longer available for others to
+              sign.
+            </p>
           ))}
 
         <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
@@ -106,15 +125,21 @@ export default async function CompletedSigningPage({
           />
         </div>
 
-        <p className="text-muted-foreground/60 mt-36 text-sm">
-          Want to send slick signing links like this one?{' '}
-          <Link
-            href="https://documenso.com"
-            className="text-documenso-700 hover:text-documenso-600"
-          >
-            Check out Documenso.
+        {isLoggedIn ? (
+          <Link href="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
+            Go Back Home
           </Link>
-        </p>
+        ) : (
+          <p className="text-muted-foreground/60 mt-36 text-sm">
+            Want to send slick signing links like this one?{' '}
+            <Link
+              href="https://documenso.com"
+              className="text-documenso-700 hover:text-documenso-600"
+            >
+              Check out Documenso.
+            </Link>
+          </p>
+        )}
       </div>
     </div>
   );

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

@@ -6,8 +6,13 @@ 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 {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -16,9 +21,16 @@ import { SigningFieldContainer } from './signing-field-container';
 export type DateFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  dateFormat?: string | null;
+  timezone?: string | null;
 };
 
-export const DateField = ({ field, recipient }: DateFieldProps) => {
+export const DateField = ({
+  field,
+  recipient,
+  dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
+  timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+}: DateFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -35,12 +47,18 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
+  const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
+
+  const isDifferentTime = field.inserted && localDateString !== field.customText;
+
+  const tooltipText = `"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`;
+
   const onSign = async () => {
     try {
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: '',
+        value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
       });
 
       startTransition(() => router.refresh());
@@ -75,7 +93,13 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Date"
+      tooltipText={isDifferentTime ? tooltipText : undefined}
+    >
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
@@ -87,7 +111,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
+        <p className="text-muted-foreground text-sm duration-200">{localDateString}</p>
       )}
     </SigningFieldContainer>
   );

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

@@ -6,8 +6,8 @@ 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 type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -79,7 +79,7 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

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

@@ -7,9 +7,10 @@ import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 
-import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { Document, Field, Recipient } from '@documenso/prisma/client';
+import type { Document, Field, Recipient } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -19,6 +20,7 @@ import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 
 import { useRequiredSigningContext } from './provider';
+import { SignDialog } from './sign-dialog';
 
 export type SigningFormProps = {
   document: Document;
@@ -28,12 +30,16 @@ export type SigningFormProps = {
 
 export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
   const router = useRouter();
+  const analytics = useAnalytics();
   const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
+  const { mutateAsync: completeDocumentWithToken } =
+    trpc.recipient.completeDocumentWithToken.useMutation();
+
   const {
     handleSubmit,
     formState: { isSubmitting },
@@ -43,8 +49,14 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
     return sortFieldsByPosition(fields.filter((field) => !field.inserted));
   }, [fields]);
 
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(fields);
+  };
+
   const onFormSubmit = async () => {
     setValidateUninsertedFields(true);
+
     const isFieldsValid = validateFieldsInserted(fields);
 
     if (!isFieldsValid) {
@@ -56,6 +68,12 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
       documentId: document.id,
     });
 
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
     router.push(`/sign/${recipient.token}/complete`);
   };
 
@@ -80,7 +98,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
         disabled={isSubmitting}
         className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}
       >
-        <div className={cn('flex flex-1 flex-col')}>
+        <div
+          className={cn(
+            'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+          )}
+        >
           <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
 
           <p className="text-muted-foreground mt-2 text-sm">
@@ -132,9 +154,13 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 Cancel
               </Button>
 
-              <Button className="w-full" type="submit" size="lg" loading={isSubmitting}>
-                Complete
-              </Button>
+              <SignDialog
+                isSubmitting={isSubmitting}
+                onSignatureComplete={handleSubmit(onFormSubmit)}
+                document={document}
+                fields={fields}
+                fieldsValidated={fieldsValidated}
+              />
             </div>
           </div>
         </div>