feat: add visible completed fields (#1109)

## Description

Added the ability for recipients to see fields from other recipients who
have completed the document when they are signing the document

Added the ability for the document owner to see fields from recipients
who have completed the field on the document page view (only visible
when the document is pending)


## 🚨🚨 Migrations🚨🚨

- Drop all `Fields` that do not have a `Recipient` set (not sure how it
was possible in the first place)
- Remove optional `Recipient` field on `Field` which doesn't make sense 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Enhanced document viewing by adding read-only fields based on document
status.
- Improved signing page by fetching and displaying completed fields for
tokens.
- Updated avatar component to show recipient status with tooltips for
better user interaction.

- **Bug Fixes**
- Made `recipientId` a required field in the database to ensure data
consistency.

- **Refactor**
- Optimized popover functionality in UI components for better
performance and user experience.

- **Documentation**
- Added detailed component and function descriptions for new features in
the system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.devcontainer/devcontainer.json

@@ -10,7 +10,13 @@
     "ghcr.io/devcontainers/features/node:1": {}
   },
   "onCreateCommand": "./.devcontainer/on-create.sh",
-  "forwardPorts": [3000, 54320, 9000, 2500, 1100],
+  "forwardPorts": [
+    3000,
+    54320,
+    9000,
+    2500,
+    1100
+  ],
   "customizations": {
     "vscode": {
       "extensions": [
@@ -25,8 +31,8 @@
         "GitHub.copilot",
         "GitHub.vscode-pull-request-github",
         "Prisma.prisma",
-        "VisualStudioExptTeam.vscodeintellicode",
+        "VisualStudioExptTeam.vscodeintellicode"
       ]
     }
   }
-}
+}

.devcontainer/on-create.sh

@@ -1,13 +1,10 @@
 #!/usr/bin/env bash
 
-# Start the database and mailserver
-docker compose -f ./docker/compose-without-app.yml up -d
-
 # Install dependencies
 npm install
 
 # Copy the env file
 cp .env.example .env
 
-# Run the migrations
-npm run prisma:migrate-dev
+# Run the dev setup
+npm run dx

.env.example

@@ -22,16 +22,32 @@ NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documen
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
 NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
-# [[E2E Tests]]
-E2E_TEST_AUTHENTICATE_USERNAME="Test User"
-E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
-E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+# [[SIGNING]]
+# The transport to use for document signing. Available options: local (default) | gcloud-hsm
+NEXT_PRIVATE_SIGNING_TRANSPORT="local"
+# OPTIONAL: The passphrase to use for the local file-based signing transport.
+NEXT_PRIVATE_SIGNING_PASSPHRASE=
+# OPTIONAL: The local file path to the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud HSM key to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH=
+# OPTIONAL: The path to the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud Credentials file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS=
 
 # [[STORAGE]]
 # OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
 NEXT_PUBLIC_UPLOAD_TRANSPORT="database"
 # OPTIONAL: Defines the endpoint to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
 NEXT_PRIVATE_UPLOAD_ENDPOINT="http://127.0.0.1:9002"
+# OPTIONAL: Defines the force path style to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
+# This will change it from using virtual hosts <bucket>.domain.com/<path> to fully qualified paths domain.com/<bucket>/<path>
+NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE="false"
 # OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
 NEXT_PRIVATE_UPLOAD_REGION="unknown"
 # REQUIRED: Defines the bucket to use for the S3 storage transport.
@@ -81,6 +97,7 @@ NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID=
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
@@ -90,6 +107,11 @@ NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
 
+# [[E2E Tests]]
+E2E_TEST_AUTHENTICATE_USERNAME="Test User"
+E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+
 # This is only required for the marketing site
 # [[REDIS]]
 NEXT_PRIVATE_REDIS_URL=

.github/actions/cache-build/action.yml

@@ -0,0 +1,24 @@
+name: Cache production build binaries
+description: 'Cache or restore if necessary'
+inputs:
+  node_version:
+    required: false
+    default: v18.x
+runs:
+  using: 'composite'
+  steps:
+    - name: Cache production build
+      uses: actions/cache@v3
+      id: production-build-cache
+      with:
+        path: |
+          ${{ github.workspace }}/apps/web/.next
+          ${{ github.workspace }}/apps/marketing/.next
+          **/.turbo/**
+          **/dist/**
+
+        key: prod-build-${{ github.run_id }}
+        restore-keys: prod-build-
+
+    - run: npm run build
+      shell: bash

.github/actions/node-install/action.yml

@@ -0,0 +1,39 @@
+name: 'Setup node and cache node_modules'
+inputs:
+  node_version:
+    required: false
+    default: v18.x
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Set up Node ${{ inputs.node_version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node_version }}
+
+    - name: Cache npm
+      uses: actions/cache@v3
+      with:
+        path: ~/.npm
+        key: npm-${{ hashFiles('package-lock.json') }}
+        restore-keys: npm-
+
+    - name: Cache node_modules
+      uses: actions/cache@v3
+      id: cache-node-modules
+      with:
+        path: |
+          node_modules
+          packages/*/node_modules
+          apps/*/node_modules
+        key: modules-${{ hashFiles('package-lock.json') }}
+
+    - name: Install dependencies
+      if: steps.cache-node-modules.outputs.cache-hit != 'true'
+      shell: bash
+      run: |
+        npm ci --no-audit
+        npm run prisma:generate
+      env:
+        HUSKY: '0'

.github/actions/playwright-install/action.yml

@@ -0,0 +1,19 @@
+name: Install playwright binaries
+description: 'Install playwright, cache and restore if necessary'
+runs:
+  using: 'composite'
+  steps:
+    - name: Cache playwright
+      id: cache-playwright
+      uses: actions/cache@v3
+      with:
+        path: |
+          ~/.cache/ms-playwright
+          ${{ github.workspace }}/node_modules/playwright
+        key: playwright-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: playwright-
+
+    - name: Install playwright
+      if: steps.cache-playwright.outputs.cache-hit != 'true'
+      run: npx playwright install --with-deps
+      shell: bash

.github/workflows/ci.yml

@@ -1,6 +1,7 @@
 name: 'Continuous Integration'
 
 on:
+  workflow_call:
   push:
     branches: ['main']
   pull_request:
@@ -10,9 +11,6 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
 
-env:
-  HUSKY: 0
-
 jobs:
   build_app:
     name: Build App
@@ -23,20 +21,12 @@ jobs:
         with:
           fetch-depth: 2
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
+      - uses: ./.github/actions/node-install
 
       - name: Copy env
         run: cp .env.example .env
 
-      - name: Build
-        run: npm run build
+      - uses: ./.github/actions/cache-build
 
   build_docker:
     name: Build Docker Image
@@ -47,5 +37,31 @@ jobs:
         with:
           fetch-depth: 2
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
       - name: Build Docker Image
-        run: ./docker/build.sh
+        uses: docker/build-push-action@v5
+        with:
+          push: false
+          context: .
+          file: ./docker/Dockerfile
+          tags: documenso-${{ github.sha }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
+
+      - # Temp fix
+        # https://github.com/docker/build-push-action/issues/252
+        # https://github.com/moby/buildkit/issues/1896
+        name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.github/workflows/clean-cache.yml

@@ -0,0 +1,29 @@
+name: cleanup caches by a branch
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys. 
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPO: ${{ github.repository }}
+          BRANCH: refs/pull/${{ github.event.pull_request.number }}/merge

.github/workflows/codeql-analysis.yml

@@ -25,19 +25,12 @@ jobs:
       - name: Checkout repository
         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: Build Documenso
-        run: npm run build
+      - uses: ./.github/actions/node-install
+
+      - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2

.github/workflows/e2e-tests.yml

@@ -6,29 +6,21 @@ on:
     branches: ['main']
 jobs:
   e2e_tests:
-    name: "E2E Tests"
+    name: 'E2E Tests'
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - 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
 
+      - uses: ./.github/actions/node-install
+
       - 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
+      - uses: ./.github/actions/playwright-install
 
       - name: Create the database
         run: npm run prisma:migrate-dev
@@ -36,6 +28,8 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
+      - uses: ./.github/actions/cache-build
+
       - name: Run Playwright tests
         run: npm run ci
 
@@ -43,7 +37,7 @@ jobs:
         if: always()
         with:
           name: test-results
-          path: "packages/app-tests/**/test-results/*"
+          path: 'packages/app-tests/**/test-results/*'
           retention-days: 30
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

.github/workflows/publish.yml

@@ -0,0 +1,133 @@
+name: Publish Docker
+
+on:
+  push:
+    branches: ['release']
+
+jobs:
+  build_and_publish_platform_containers:
+    name: Build and publish platform containers
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - warp-ubuntu-latest-x64-4x
+          - warp-ubuntu-latest-arm64-4x
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-tags: true
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GH_TOKEN }}
+
+      - name: Build the docker image
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker build \
+            -f ./docker/Dockerfile \
+            --progress=plain \
+            -t "documenso/documenso-$BUILD_PLATFORM:latest" \
+            -t "documenso/documenso-$BUILD_PLATFORM:$GIT_SHA" \
+            -t "documenso/documenso-$BUILD_PLATFORM:$APP_VERSION" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:latest" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$GIT_SHA" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$APP_VERSION" \
+            .
+
+      - name: Push the docker image to DockerHub
+        run: docker push --all-tags "documenso/documenso-$BUILD_PLATFORM"
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+
+      - name: Push the docker image to GitHub Container Registry
+        run: docker push --all-tags "ghcr.io/documenso/documenso-$BUILD_PLATFORM"
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+
+  create_and_publish_manifest:
+    name: Create and publish manifest
+    runs-on: ubuntu-latest
+    needs: build_and_publish_platform_containers
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-tags: true
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GH_TOKEN }}
+
+      - name: Create and push DockerHub manifest
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker manifest create \
+            documenso/documenso:latest \
+            --amend documenso/documenso-amd64:latest \
+            --amend documenso/documenso-arm64:latest \
+
+          docker manifest create \
+            documenso/documenso:$GIT_SHA \
+            --amend documenso/documenso-amd64:$GIT_SHA \
+            --amend documenso/documenso-arm64:$GIT_SHA \
+
+          docker manifest create \
+            documenso/documenso:$APP_VERSION \
+            --amend documenso/documenso-amd64:$APP_VERSION \
+            --amend documenso/documenso-arm64:$APP_VERSION \
+
+          docker manifest push documenso/documenso:latest
+          docker manifest push documenso/documenso:$GIT_SHA
+          docker manifest push documenso/documenso:$APP_VERSION
+
+      - name: Create and push Github Container Registry manifest
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:latest \
+            --amend ghcr.io/documenso/documenso-amd64:latest \
+            --amend ghcr.io/documenso/documenso-arm64:latest \
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:$GIT_SHA \
+            --amend ghcr.io/documenso/documenso-amd64:$GIT_SHA \
+            --amend ghcr.io/documenso/documenso-arm64:$GIT_SHA \
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:$APP_VERSION \
+            --amend ghcr.io/documenso/documenso-amd64:$APP_VERSION \
+            --amend ghcr.io/documenso/documenso-arm64:$APP_VERSION \
+
+          docker manifest push ghcr.io/documenso/documenso:latest
+          docker manifest push ghcr.io/documenso/documenso:$GIT_SHA
+          docker manifest push ghcr.io/documenso/documenso:$APP_VERSION

.husky/pre-commit

@@ -1,4 +1,16 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
+MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
+
+echo "Copying pdf.js"
+npm run copy:pdfjs --workspace apps/**
+
+echo "Copying .well-known/ contents"
+node "$MONOREPO_ROOT/scripts/copy-wellknown.cjs"
+
+git add "$MONOREPO_ROOT/apps/web/public/"
+git add "$MONOREPO_ROOT/apps/marketing/public/"
+
 npx lint-staged

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

.well-known/security.txt

@@ -0,0 +1,7 @@
+# General Issues
+Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
+
+# Report critical issues privately to let us take appropriate action before publishing.
+Contact: mailto:security@documenso.com
+Preferred-Languages: en
+Canonical: https://documenso.com/.well-known/security.txt

README.md

@@ -1,5 +1,3 @@
->We are nominated for a Product Hunt Gold Kitty 😺✨ and appreciate any support: https://documen.so/kitty
-
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">
@@ -29,20 +27,11 @@
    <a href="https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso">
    <img alt="open in devcontainer" src="https://img.shields.io/static/v1?label=Dev%20Containers&message=Enabled&color=blue&logo=visualstudiocode" />
    </a>
-   <a href="code_of_conduct.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg" alt="Contributor Covenant"></a>
+   <a href="CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg" alt="Contributor Covenant"></a>
 </p>
 
-<div>
-  <img style="display: block; height: 120px; width: 24%"
-    src="https://github.com/documenso/documenso/assets/1309312/67e08c98-c153-4115-aa2d-77979bb12c94)">
-  <img style="display: block; height: 120px; width: 24%"
-    src="https://github.com/documenso/documenso/assets/1309312/040cfbae-3438-4ca3-87f2-ce52c793dcaf">
-  <img style="display: block; height: 120px; width: 24%"
-    src="https://github.com/documenso/documenso/assets/1309312/72d445be-41e5-4936-bdba-87ef8e70fa09">
-  <img style="display: block; height: 120px; width: 24%"
-    src="https://github.com/documenso/documenso/assets/1309312/d7b86c0f-a755-4476-a022-a608db2c4633">
-  <img style="display: block; height: 120px; width: 24%"
-    src=https://github.com/documenso/documenso/assets/1309312/c0f55116-ab82-433f-a266-f3fc8571d69f">
+<div align="center">
+  <img src="https://github.com/documenso/documenso/assets/13398220/d96ed533-6f34-4a97-be9b-442bdb189c69" style="width: 80%;" />
 </div>
 
 ## About this project
@@ -93,7 +82,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 - [NextAuth.js](https://next-auth.js.org/) - Authentication
 - [react-email](https://react.email/) - Email Templates
 - [tRPC](https://trpc.io/) - API
-- [Node SignPDF](https://github.com/vbuch/node-signpdf) - Digital Signature
+- [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
 - [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
 - [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
 - [Stripe](https://stripe.com/) - Payments
@@ -107,7 +96,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 
 To run Documenso locally, you will need
 
-- Node.js
+- Node.js (v18 or above)
 - Postgres SQL Database
 - Docker (optional)
 
@@ -209,7 +198,16 @@ If you're a visual learner and prefer to watch a video walkthrough of setting up
 
 ## Docker
 
-🚧 Docker containers and images are current in progress. We are actively working on bringing a simple Docker build and publish pipeline for Documenso.
+We provide a Docker container for Documenso, which is published on both DockerHub and GitHub Container Registry.
+
+- DockerHub: [https://hub.docker.com/r/documenso/documenso](https://hub.docker.com/r/documenso/documenso)
+- GitHub Container Registry: [https://ghcr.io/documenso/documenso](https://ghcr.io/documenso/documenso)
+
+You can pull the Docker image from either of these registries and run it with your preferred container hosting provider.
+
+Please note that you will need to provide environment variables for connecting to the database, mailserver, and so forth.
+
+For detailed instructions on how to configure and run the Docker container, please refer to the [Docker README](./docker/README.md) in the `docker` directory.
 
 ## Self Hosting
 

SIGNING.md

@@ -17,7 +17,8 @@ For the digital signature of your documents you need a signing certificate in .p
    `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt`
 
 4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
-5. Place the certificate `/apps/web/resources/certificate.p12`
+
+5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
 
 ## Docker
 

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

@@ -1,6 +1,6 @@
 ---
 title: 'Building Documenso — Part 1: Certificates'
-description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+description: Let's take a look why you need a signing certificate and how Documenso does it.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'

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

@@ -0,0 +1,117 @@
+---
+title: 'Building Documenso — Part 2: Signature Validity'
+description: Is a signature valid? And what does that mean? It's a surprisingly complex question; let's take a look.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-04-05
+tags:
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/eu-validate-1.png"
+    width= "650"
+    height= "650"
+    alt= "A report card for signature validity."
+  />
+
+  <figcaption className="text-center">
+    If a tree does not comply with the EU trust list, does it make a sound when validating?r
+  </figcaption>
+</figure>
+
+> TLDR; Signatures can be valid and compliant for different signature levels, even if some validators show higher-level errors. Not all helpful security measures are mandated by law.
+
+# A valid question
+
+A few days ago, an early adopter brought up this question in our [Discord](https://documen.so/discord):
+
+<figure>
+  <MdxNextImage
+    src="/blog/eu-validate-2.png"
+    width= "650"
+    height= "650"
+    alt= "A report card for signature validity."
+  />
+
+  <figcaption className="text-center">
+    You can check out the validator here: [https://documen.so/eu-validator](https://documen.so/eu-validator)
+  </figcaption>
+</figure>
+
+For those unfamiliar with the tool, he used the validator tool of the EU's Digital Signature Service (DSS) Framework to check the signature of a document signed with Documenso. The EU provides this tool to help users and providers check the validity level of their signatures.
+
+A short refresher from [Building Documenso — Part 1: Certificates](https://documen.so/certs):
+
+> Documenso inserts all visual signatures into the document and then seals it using the "Documenso Inc." corporate certificate. This makes the resulting PDF document tamper-proof and guarantees it hasn't changed since signing.
+
+Before we answer if the document was signed correctly, we need to understand what the goal was.
+
+There are three signature levels in the European eIDAS regulation:
+
+1. **Simple Electronic Signatures (Level 1/ SES):** This is just a visual signature or even a checkbox on a document.
+
+2. **Advanded Electronic Signatures (Level 2/ AES)**: An actual crypographic signature (not just a seal on the whole document, but a specific signature), using a certificate linked to the identification data of the signer.
+
+3. **Qualified Electronic Signatures (Level 3/ QES):** Same as 2. but done by a government-certified entity on certified hardware and after identifying the signer with an official ID document (e.g., passport)
+
+> 💡 Side Note: Number 2 (AES) is how most people imagine digital signatures. But most of the market uses 1. plus a seal on the whole document under the name of the signing provider (e.g., Documenso). The signer's data is only inserted visually, not in the actual signature. Why? One of the reasons is that it's much easier, and without a readily available open source framework to draw from, it is quite tricky to build. This is something we aim to build (which many have done) and open source (which no one has done).
+
+From the perspective of eIDAS, Documenso offers Level 1/ SES signatures since it does not adhere to all of the requirements of Level 2/ AES. This means that, technically, there is no legal need to seal the document to achieve this level of validity (at least within eIDAS). We do it anyway since it improves the level of confidence users can have in the signed document. Sealing the document, even though not legally required, is a great example of Documenso's approach to signatures. First, we aim to provide all legal requirements for a given use case. Then, we add any protection that can be added without unwarranted friction to the creation of the signature.
+
+## Not if valid, but how valid
+
+**Q: So, is the signature in the image valid?**
+
+A: Yes, as an eidas Level 1 SES.
+
+**Q: Then why does it say "Unable to build a certificate chain up to a trusted list"**
+
+A: The certificate we use to seal the document after inserting the signatures is not on the EU Trust list.
+
+**Q: Does that mean it is less secure?**
+
+A: No, it means the provider (Wisekey) is not on a list maintained by the EU. The cryptographic signature is just as strong as any other
+
+For someone who does not deal with this stuff daily, this can be hard to comprehend. Whether you use a certificate you generated yourself, one generated by a certificate authority (CA) like Wisekey, or one by another on the EU trust list (e.g., Bundesdruckerei), the cryptographic security guaranteeing that the document has not been tampered with is always the same. Many providers like Documenso, DocuSign, PandaDoc, and Digisigner all use this method for their regular plans. That means if you were to run a document signed by them through the validator above, the result would be the same[1]. The interesting question is why? Why do it like this?
+
+## Certificate Infrastructure is broken
+
+While there are some actual expenses involved in providing AES and QES, the blunt reality is that it's just good business to charge for them per signature, making it unsuitable for the "standard offerings"; almost no one has the resources to set this up themselves. While this initial process of becoming a QES-certified entity is really expensive, selling the certificates afterward is very lucrative. This leads to less innovation in the space and only big players providing these high-compliance services. Even certificates only used to seal documents without being QES certified are sold for a large range of prices, and they cost almost nothing to produce.
+
+## Why Though?
+
+**Q: Why do people buy a certificate for money and not just generate one themselves? Isn't the cryptographic security the same?**
+
+A: Self-generated certificates are not recognized for higher-level compliance signatures like QES
+
+**Q: So if you don't need higher-level signatures, you could just generate one yourself?**
+
+A: Yes, you could. Since eIDAS Level 1 does not require a cert, you could use your own.
+
+**Q: Why don't more people?**
+
+A: One reason is that apart from the EU trust list, there are others, like the Adobe trust list. While not legally required, being on that one (like Wisekey) gives you a green checkmark in Adobe PDF, which is how most people check signature validity.
+
+**Q: Not a question, but all of this sounds weird**
+
+A: It is. This is one of the reasons why Documenso exists. We plan to make this easier.
+
+**Q: How?**
+
+A: By explaining and providing easy-to-use tools and eventually free, highly compliant signature certificates for everyone.
+
+Eventually, we plan to start a free certificate authority called Let's Sign, named after another instituion that broke the paid certificate paradigm to the benefit of the internet: [Let's Encrypt](https://letsencrypt.org/).
+
+As always, feel free to connect on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments.
+
+Best from Hamburg\
+Timur
+\
+\
+\
+[1] The signature format (e.g. PKCS7-B) will vary. It's the format what the signature inserted into the document looks like. eIDAS itself does not specifically require any given format, but the PAdES defined by the EU is mostly used by european providers.

apps/marketing/content/blog/commodifying-signing.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-01-25
-Tags:
+tags:
   - Vision
   - Mission
   - Open Source

apps/marketing/content/blog/early-adopters.mdx

@@ -24,6 +24,8 @@ tags:
   </figcaption>
 </figure>
 
+> 🔔 UPDATE: We launched <a href="https://documen.so/day1" target="_blank">teams</a> and the early adopters plan will be replaced by the new teams pricing as soon as all availible early adopters seats are filled.
+
 ## Community-Driven Development
 
 As we ramp up hiring and development speed for Documenso, I want to discuss how we plan to build its core version.

apps/marketing/content/blog/launch-week-2-day-1.mdx

@@ -0,0 +1,64 @@
+---
+title: Launch Week II - Day 1 - Teams
+description: Teams for Documenso are here. And they come free for early adopters!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-26
+tags:
+  - Launch Week
+  - Teams
+  - Early Adopter Perks
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/12a85ec7-20bb-4813-9714-e4da42c9cfba"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; Docucmenso now supports teams that share documents, templates and a team mail address. Early Adopter get UNLIMITED<sup>1</sup> Users.
+
+## Kicking off Launch Week II - "Connected"
+
+The day has come! Roughly 5 months after kicked off our first launch week with open sourcing our design and Malfunction Mania, Launch Week #2 is here 🎉 This Launch Week's theme is "connected", since this is all about connecting humans, machines and documents.
+
+Working with documents and getting that signature is a team sport. This is why we are kicking it off today with a very long-awaited feature: Documenso now supports teams!
+
+## Introducing Teams for Documenso
+
+You can now create teams next to your personal account: Simply invite your colleagues, and you can include everyone you like in working with your documents. With teams, you can:
+
+- Send unlimited signature requests with unlimited recipients
+- Create, view, edit and sign documents owned by the team
+- Define a dedicated team email, to receive signing requests into a team inbox for the owner to sign
+- Manage team roles: Member (Create+Edit), Managers (+Manage Team Members), Owner (+Transfer Team +Delete Team + Sign Documents sent to team email)
+
+## Pricing
+
+Together with Teams, we are announcing the new teams pricing:
+
+- $10 per seat per month
+- 5 seats minimum
+- You can add seats dynamically as needed
+
+This pricing will take effect, as soon as the early adopter seats run out. Want to check out teams: [https://documen.so/teams](https://documen.so/teams).
+
+## Early Adopter Perks
+
+There is one more point on pricing I have been looking forward to for a long time:
+
+All early adopter plans now include **UNLIMITED teams and users**<sup>1</sup> . We appreciate your support so far very much, and I'm happy to announce this first of more early adopter perks to come. We have roughly 48 early adopter plans left, so if you plan to onboard your team, now is a great time to [grab your early adopter seat.](https://documen.so/claim-early-adopters-plan)
+
+We are eager to hear from all teams users how you like this addition and what we can add to make it even better. Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here, and we would love to hear from you :)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 1! Teams just dropped. Check it out https://documen.so/day1 🚀"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur
+
+\
+[1] Within reason. If you are unsure what that means, feel free to contact hi@documenso.com and ask for clarification if it's more than 100.

apps/marketing/content/blog/launch-week-2-day-2.mdx

@@ -0,0 +1,76 @@
+---
+title: Launch Week II - Day 2 - Templates
+description: Templates help you prepare regular documents faster. And you can share them with your team!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-27
+tags:
+  - Launch Week
+  - Templates
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/c9504db1-26b7-4033-88ed-a95cabd02e92"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; You can now reuse documents via templates. More field types coming soon as well.
+
+## Introducing Templates
+
+It's day 2 of Launch Week, everybody 🙌 After introducing [Teams](https://documenso.com/blog/launch-week-2-day-1) yesterday, today we are looking at making Documenso faster for daily use:
+We are launching templates for Documenso! Templates are an easy way to reuse documents you send out often with just a few clicks. With templates, you can:
+
+<figure>
+  <MdxNextImage
+    src="/blog/quickfill.png"
+    width="1260"
+    height="630"
+    alt="Template recipients quick fill view"
+  />
+
+  <figcaption className="text-center">
+    Quickly fill out recipients, when creating from a template
+  </figcaption>
+</figure>
+
+- Save often-uploaded documents for reuse
+- Pre-define fields, so you just have to send the document
+- Quickly fill out recipients and roles for new documents
+- Share templates with your team to make working together even easier
+
+<figure>
+  <MdxNextImage
+    src="/blog/template.png"
+    width="1260"
+    height="630"
+    alt="Create from template view"
+  />
+
+  <figcaption className="text-center">
+  POV: You are a diligent german and create custom receipts with Documenso
+  </figcaption>
+</figure>
+
+## Pricing
+
+Templates are **included in all Documenso Plans!** That includes our free tier: The limit of 5 documents per month still applies, but you are free to reach it with less friction using templates. Sharing templates with other users is only possible with the teams plan. If you want to share templates with people not in your team, we might have something coming up later this week 👀
+
+## What's Next for Templates
+
+We have a lot of great stuff coming up for templates as well:
+
+- More Field Types are in the pipeline
+- Sharing Templates Externally 👀
+
+Check out templates [here](https://documen.so/templates) and let us know what you think and what we can improve. Which field types are you missing? Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 2! They just launched templates, and I'm pumped 🎉🚀🚀🚀. Check it out https://documen.so/day2"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/launch-week-2-day-3.mdx

@@ -0,0 +1,53 @@
+---
+title: Launch Week II - Day 3 - API
+description: Documenso's mission is to create a plattform developers all around the world can build upon. Today we are releasing the first version of our public API, included in all plans!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-28
+tags:
+  - Launch Week
+  - API
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/cb74d6cb-a127-4cac-a166-ad6b56c6140d"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; The public API is now availible for all plans.
+
+## Introducing the public Documenso API
+
+Launch. Week. Day. 3 🎉 Documenso's mission is to create a platform that developers all around the world can build upon. Today we are releasing the first version of our public API, and we are pumped. Since this is the first version, we focused on the basics. With the new API you can:
+
+- Get Documents (Individual or all Accessible)
+- Upload Documents
+- Delete Documents
+- Create Documents from Templates
+- Trigger Sending Documents for Singing
+
+You can check out the detailed API documentation here:
+
+> API DOCUMENTATION: [https://app.documenso.com/api/v1/openapi](https://app.documenso.com/api/v1/openapi)
+
+## Pricing
+
+We are building Documenso to be an open and extendable platform; therefore the API is included in all current plans. The API is authenticated via auth tokens, which every user can create at no extra cost, as can teams. Existing limits still apply (i.e., the number of included documents for the free plan). While we don't have all the details yet, we don't intend to price the API usage in itself (rather the accounts using it) since we want you to build on Documenso without being smothered by API costs.
+
+> Try the API here for free: [https://documen.so/api](https://documen.so/api)
+
+## What's next for the API
+
+You tell us. This is by far the most requested feature, so we would like to hear from you. What should we add? How can we integrate even better?
+
+Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 3! The public API is here 👀 Check it out https://documen.so/day3"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/launch-week-2-day-4.mdx

@@ -0,0 +1,63 @@
+---
+title: Launch Week II - Day 4 - Webhooks and Zapier
+description: If you want to integrate Documenso without fiddling with the API, we got you as well. You can now integrate Documenso via Zapier, included in all plans!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-29
+tags:
+  - Launch Week
+  - Zapier
+  - Webhooks
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/3b60789d-8d27-4c66-ae5c-179e33c2e3e6"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; Zapier Integration is now available for all plans.
+
+## Introducing Zapier for Documenso
+
+Day 4 🥳 Yesterday we introduced our [public API](https://documen.so/day3) for developers to build on Documenso. If you are not a developer or simple want a quicker integration this is for you: Documenso now support Zapier Integrations! Just connect your Documenso account via a simple login flow with Zapier and you will have access to Zapier's universe of integrations 💫 The integration currently supports:
+
+- Document Created ([https://documen.so/zapier-created](https://documen.so/zapier-created))
+- Document Sent ([Chttps://documen.so/zapier-sent](https://documen.so/zapier-sent))
+- Document Opened ([https://documen.so/zapier-opened](https://documen.so/zapier-opened))
+- Document Signed ([https://documen.so/zapier-signed](https://documen.so/zapier-signed))
+- Document Completed ([https://documen.so/zapier-completed](https://documen.so/zapier-completed))
+
+> ⚡️ You can create your own Zaps here: https://zapier.com/apps/documenso/integrations
+
+Each event comes with extensive meta-data for you to use in Zapier. Missing something? Reach out on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord). We're always here and would love to hear from you :)
+
+## Also Introducing for Documenso: Webhooks
+
+To build the Zapier Integration, we needed a good webhooks concept, so we added that as well. Together with your Zaps, you can also now create customer webhooks in Documenso. You can try webhooks here for free: [https://documen.so/webhooks](https://documen.so/webhooks)
+
+<figure>
+  <MdxNextImage
+    src="/blog/hooks.png"
+    width="1260"
+    height="630"
+    alt="Webhooks UI"
+  />
+
+  <figcaption className="text-center">
+    Create unlimited custom webhooks with each plan.
+  </figcaption>
+</figure>
+
+## Pricing
+
+Just like the API, we consider the Zapier integration and webhooks part of the open Documenso platform. Zapier is **available for all Documenso plans**, including free! [Login now](https://documen.so/login) to check it out.
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 4! Documenso now supports @Zapier 🤯 https://documen.so/day4"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/launch-week-2-day-5.mdx

@@ -0,0 +1,61 @@
+---
+title: Launch Week II - Day 5 - Documenso Profiles
+description: Documenso profiles allow you to send signing links to people so they can sign anytime and see who you are. Documenso Profile Usernames can be claimed starting today. Long ones free, short ones paid. Profiles will launch as soon as they are shiny.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-03-01
+tags:
+  - Launch Week
+  - Profiles
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/89643ae2-2aa9-484c-a522-a0e35097c469"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; Documenso profiles allow you to send signing links to people so they can sign anytime and see who you are. Documenso Profile Usernames can be claimed starting today. Long ones free, short ones paid. Profiles launch as soon as they are shiny.
+
+## Introducing Documenso Profile Links
+
+Day 5 - The Finale 🔥
+
+Signing documents has always been between humans, and signing something together should be as frictionless as possible. It should also be async, so you don't force your counterpart to jog to their device to send something when you are ready. Today we are announcing the new Documenso Profiles:
+
+<figure>
+  <MdxNextImage
+    src="/blog/profile.png"
+    width="1260"
+    height="813"
+    alt="Timur's Documenso Profile"
+  />
+
+  <figcaption className="text-center">
+   Async > Sync: Add public templates to your Documenso Link and let people sign whenever they are ready.
+  </figcaption>
+</figure>
+
+Documenso profiles work with your existing templates. You can just add them to your public profile to let everyone with your link sign them. With profiles, we want to bring back the human aspect of signing.
+
+By making profiles public, you can always access what your counterparty offers and make them more visible in the process. Long-term, we plan to add more to profiles to help you ensure the person you are dealing with is who they claim to be. Documenso wants to be the trust layer of the internet, and we want to start at the very fundamental level: The individual transaction.
+
+Profiles are our first step towards bringing more trust into everything, simply by making the use of signing more frictionless. As there is more and more content of questionable origin out there, we want to support you in making it clear what you send out and what not.
+
+## Pricing and Claiming
+
+Documenso profile username can be claimed starting today. Documenso profiles will launch as soon as we are happy with the details ✨
+
+- Long usernames (6 characters or more) come free with every account, e.g. **documenso.com/u/timurercan**
+- Short usernames (5 characters or fewer) or less require any paid account ([Early Adopter](https://documen.so/claim-early-adopters-plan), [Teams](https://documen.so/teams) or Enterprise): **e.g., documenso.com/u/timur**
+
+You can claim your username here: [https://documen.so/claim](https://documen.so/claim)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 5! You can now claim your username for the upcoming profile links 😮 https://documen.so/day5"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/linear-gh.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-01-10
-Tags:
+tags:
   - GitHub
   - Backlog
   - Roadmap

apps/marketing/content/blog/public-api.mdx

@@ -0,0 +1,292 @@
+---
+title: 'Building the Documenso Public API - The Why and How'
+description: 'This article talks about the need for the public API and the process of building it. It also discusses the requirements we had to meet and the constraints we had to work within.'
+authorName: 'Catalin'
+authorImage: '/blog/blog-author-catalin.webp'
+authorRole: 'I like to code and write'
+date: 2024-03-08
+tags:
+  - Development
+  - API
+---
+
+This article covers the process of building the public API for Documenso. It starts by explaining why the API was needed for a digital document signing company in the first place. Then, it'll dive into the steps we took to build it. Lastly, it'll present the requirements we had to meet and the constraints we had to work within.
+
+## Why the public API
+
+We decided to build the public API to open a new way of interacting with Documenso. While the web app does the job well, there are use cases where it's not enough. In those cases, the users might want to interact with the platform programmatically. Usually, that's for integrating Documenso with other applications.
+
+With the new public API that's now possible. You can integrate Documenso's functionalities within other applications to automate tasks, create custom solutions, and build custom workflows, to name just a few.
+
+The API provides 12 endpoints at the time of writing this article:
+
+- (GET) `/api/v1/documents` - retrieve all the documents
+- (POST) `/api/v1/documents` - upload a new document and getting a presigned URL
+- (GET) `/api/v1/documents/{id}` - fetch a specific document
+- (DELETE) `/api/v1/documents/{id}` - delete a specific document
+- (POST) `/api/v1/templates/{templateId}/create-document` - create a new document from an existing template
+- (POST) `/api/v1/documents/{id}/send` - send a document for signing
+- (POST) `/api/v1/documents/{id}/recipients` - create a document recipient
+- (PATCH) `/api/v1/documents/{id}/recipients/{recipientId}` - update the details of a document recipient
+- (DELETE) `/api/v1/documents/{id}/recipients/{recipientId}` - delete a specific recipient from a document
+- (POST) `/api/v1/documents/{id}/fields` - create a field for a document
+- (PATCH) `/api/v1/documents/{id}/fields` - update the details of a document field
+- (DELETE) `/api/v1/documents/{id}/fields` - delete a field from a document
+
+> Check out the [API documentation](https://app.documenso.com/api/v1/openapi).
+
+Moreover, it also enables us to enhance the platform by bringing other integrations to Documenso, such as Zapier.
+
+In conclusion, the new public API extends Documenso's capabilities, provides more flexibility for users, and opens up a broader world of possibilities.
+
+## Picking the right approach & tech
+
+Once we decided to build the API, we had to choose the approach and technologies to use. There were 2 options:
+
+1. Build an additional application
+2. Launch the API in the existing codebase
+
+### 1. Build an additional application
+
+That would mean creating a new codebase and building the API from scratch. Having a separate app for the API would result in benefits such as:
+
+- lower latency responses
+- supporting larger field uploads
+- separation between the apps (Documenso and the API)
+- customizability and flexibility
+- easier testing and debugging
+
+This approach has significant benefits. However, one major drawback is that it requires additional resources.
+
+We'd have to spend a lot of time just on the core stuff, such as building and configuring the basic server. After that, we'd spend time implementing the endpoints and authorization, among other things. When the building is done, there will be another application to deploy and manage. All of this would stretch our already limited resources.
+
+So, we asked ourselves if there is another way of doing it without sacrificing the API quality and the developer experience.
+
+### 2. Launch the API in the existing codebase
+
+The other option was to launch the API in the existing codebase. Rather than writing everything from scratch, we could use most of our existing code.
+
+Since we're using tRPC for our internal API (backend), we looked for solutions that work well with tRPC. We narrowed down the choices to:
+
+- [trpc-openapi](https://github.com/jlalmes/trpc-openapi)
+- [ts-rest](https://ts-rest.com/)
+
+Both technologies allow you to build public APIs. The `trpc-openapi` technology allows you to easily turn tRPC procedures into REST endpoints. It's more like a plugin for tRPC.
+
+On the other hand, `ts-rest` is more of a standalone solution. `ts-rest` enables you to create a contract for the API, which can be used both on the client and server. You can consume and implement the contract in your application, thus providing end-to-end type safety and RPC-like client.
+
+> You can see a [comparison between trpc-openapi and ts-rest](https://catalins.tech/public-api-trpc/) here.
+
+So, the main difference between the 2 is that `trpc-openapi` is like a plugin that extends tRPC's capabilities, whereas `ts-rest` provides the tools for building a standalone API.
+
+### Our choice
+
+After analyzing and comparing the 2 options, we decided to go with `ts-rest` because of its benefits. Here's a paragraph from the `ts-rest` documentation that hits the nail on the head:
+
+> tRPC has many plugins to solve this issue by mapping the API implementation to a REST-like API, however, these approaches are often a bit clunky and reduce the safety of the system overall, ts-rest does this heavy lifting in the client and server implementations rather than requiring a second layer of abstraction and API endpoint(s) to be defined.
+
+## API Requirements
+
+We defined the following requirements for the API:
+
+- The API should use path-based versioning (e.g. `/v1`)
+- The system should use bearer tokens for API authentication
+  - The API token should be a random string of 32 to 40 characters
+- The system should hash the token and store the hashed value
+- The system should only display the API token when it's created
+- The API should have self-generated documentation like Swagger
+- Users should be able to create an API key
+  - Users should be able to choose a token name
+  - Users should be able to choose an expiration date for the token
+    - User should be able to choose between 7 days, 1 month, 3 months, 6 months, 12 months, never
+- System should display all the user's tokens in the settings page
+  - System should display the token name, creation date, expiration date and a delete button
+- Users should be able to delete an API key
+- Users should be able to retrieve all the documents from their account
+- Users should be able to upload a new document
+  - Users should receive an S3 pre-signed URL after a successful upload
+- Users should be able to retrieve a specific document from their account by its id
+- Users should be able to delete a specific document from their account by its id
+- Users should be able to create a new document from an existing document template
+- Users should be able to send a document for signing to 1 or more recipients
+- Users should be able to create a recipient for a document
+- Users should be able to update the details of a recipient
+- Users should be able to delete a recipient from a document
+- Users should be able to create a field (e.g. signature, email, name, date) for a document
+- Users should be able to update a field for a document
+- Users should be able to delete a field from a document
+
+## Constraints
+
+We also faced the following constraints while developing the API:
+
+**1. Resources**
+
+Limited resources were one of the main constraints. We're a new startup with a relatively small team. Building and maintaining an additional application would strain our limited resources.
+
+**2. Technology stack**
+
+Another constraint was the technology stack. Our tech stack includes TypeScript, Prisma, and tRPC, among others. We also use Vercel for hosting.
+
+As a result, we wanted to use technologies we are comfortable with. This allowed us to leverage our existing knowledge and ensured consistency across our applications.
+
+Using familiar technologies also meant we could develop the API faster, as we didn't have to spend time learning new technologies. We could also leverage existing code and tools used in our main application.
+
+It's worth mentioning that this is not a permanent decision. We're open to moving the API to another codebase/tech stack when it makes sense (e.g. API is heavily used and needs better performance).
+
+**3. File uploads**
+
+Due to our current architecture, we support file uploads with a maximum size of 50 MB. To circumvent this, we created an additional step for uploading documents.
+
+Users make a POST request to the `/api/v1/documents` endpoint and the API responds with an S3 pre-signed URL. The users then make a 2nd request to the pre-signed URL with their document.
+
+## How we built the API
+
+![API package diagram](api-package.webp)
+
+Our codebase is a monorepo, so we created a new API package in the `packages` directory. It contains both the API implementation and its documentation. The main 2 blocks of the implementation consist of the API contract and the code for the API endpoints.
+
+![API implementation diagram](api-implementation.webp)
+
+In a few words, the API contract defines the API structure, the format of the requests and responses, how to authenticate API calls, the available endpoints and their associated HTTP verbs. You can explore the [API contract](https://github.com/documenso/documenso/blob/main/packages/api/v1/contract.ts) on GitHub.
+
+Then, there's the implementation part, which is the actual code for each endpoint defined in the API contract. The implementation is where the API contract is brought to life and made functional.
+
+Let's take the endpoint `/api/v1/documents` as an example.
+
+```ts
+export const ApiContractV1 = c.router(
+  {
+    getDocuments: {
+      method: 'GET',
+      path: '/api/v1/documents',
+      query: ZGetDocumentsQuerySchema,
+      responses: {
+        200: ZSuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Get all documents',
+    },
+    ...
+  }
+);
+```
+
+The API contract specifies the following things for `getDocuments`:
+
+- the allowed HTTP request method is GET, so trying to make a POST request, for example, results in an error
+- the path is `/api/v1/documents`
+- the query parameters the user can pass with the request
+  - in this case - `page` and `perPage`
+- the allowed responses and their schema
+  - `200` returns an object containing an array of all documents and a field `totalPages`, which is self-explanatory
+  - `401` returns an object with a message such as "Unauthorized"
+  - `404` returns an object with a message such as "Not found"
+
+The implementation of this endpoint needs to match the contract completely; otherwise, `ts-rest` will complain, and your API might not work as intended.
+
+The `getDocuments` function from the `implementation.ts` file runs when the user hits the endpoint.
+
+```ts
+export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
+  getDocuments: authenticatedMiddleware(async (args, user, team) => {
+    const page = Number(args.query.page) || 1;
+    const perPage = Number(args.query.perPage) || 10;
+
+    const { data: documents, totalPages } = await findDocuments({
+      page,
+      perPage,
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    return {
+      status: 200,
+      body: {
+        documents,
+        totalPages,
+      },
+    };
+  }),
+  ...
+});
+```
+
+There is a middleware, too, `authenticatedMiddleware`, that handles the authentication for API requests. It ensures that the API token exists and the token used has the appropriate privileges for the resource it accesses.
+
+That's how the other endpoints work as well. The code differs, but the principles are the same. You can explore the [API implementation](https://github.com/documenso/documenso/blob/main/packages/api/v1/implementation.ts) and the [middleware code](https://github.com/documenso/documenso/blob/main/packages/api/v1/middleware/authenticated.ts) on GitHub.
+
+### Documentation
+
+For the documentation, we decided to use Swagger UI, which automatically generates the documentation from the OpenAPI specification.
+
+The OpenAPI specification describes an API containing the available endpoints and their HTTP request methods, authentication methods, and so on. Its purpose is to help both machines and humans understand the API without having to look at the code.
+The Documenso OpenAPI specification is live [here](https://documenso.com/api/v1/openapi.json).
+
+Thankfully, `ts-rest` makes it seamless to generate the OpenAPI specification.
+
+```ts
+import { generateOpenApi } from '@ts-rest/open-api';
+
+import { ApiContractV1 } from './contract';
+
+export const OpenAPIV1 = generateOpenApi(
+  ApiContractV1,
+  {
+    info: {
+      title: 'Documenso API',
+      version: '1.0.0',
+      description: 'The Documenso API for retrieving, creating, updating and deleting documents.',
+    },
+  },
+  {
+    setOperationId: true,
+  },
+);
+```
+
+Then, the Swagger UI takes the OpenAPI specification as a prop and generates the documentation. The code below shows the component responsible for generating the documentation.
+
+```ts
+'use client';
+
+import SwaggerUI from 'swagger-ui-react';
+import 'swagger-ui-react/swagger-ui.css';
+
+import { OpenAPIV1 } from '@documenso/api/v1/openapi';
+
+export const OpenApiDocsPage = () => {
+  return <SwaggerUI spec={OpenAPIV1} displayOperationId={true} />;
+};
+
+export default OpenApiDocsPage;
+```
+
+Lastly, we create an API endpoint to display the Swagger documentation. The code below dynamically imports the `OpenApiDocsPage` component and displays it.
+
+```ts
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Docs = dynamic(async () => import('@documenso/api/v1/api-documentation'), {
+  ssr: false,
+});
+
+export default function OpenApiDocsPage() {
+  return <Docs />;
+}
+```
+
+You can access and play around with the documentation at [documenso.com/api/v1/openapi](https://documenso.com/api/v1/openapi). You should see a page like the one shown in the screenshot below.
+
+![The documentation for the Documenso API](docs.webp)
+
+> This article shows how to [generate Swagger documentation for a Next.js API](https://catalins.tech/generate-swagger-documentation-next-js-api/).
+
+So, that's how we went about building the first iteration of the public API after taking into consideration all the constraints and the current needs. The [GitHub pull request for the API](https://github.com/documenso/documenso/pull/674) is publicly available on GitHub. You can go through it at your own pace.
+
+## Conclusion
+
+The current architecture and approach work well for our current stage and needs. However, as we continue to grow and evolve, our architecture and approach will likely need to adapt. We monitor API usage and performance regularly and collect feedback from users. This enables us to find areas for improvement, understand our users' needs, and make informed decisions about the next steps.

apps/marketing/content/blog/removing-server-actions.mdx

@@ -0,0 +1,56 @@
+---
+title: 'Embracing the Future and Moving Back Again: From Server Actions to tRPC'
+description: 'This article talks about the need for the public API and the process of building it. It also talks about the requirements, constraints, challenges and lessons learnt from building it.'
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2024-03-07
+tags:
+  - Development
+---
+
+On October 26, 2022, during the Next.js Conf, Vercel unveiled Next.js 13, introducing a bunch of new features and a whole new paradigm shift for creating Next.js apps.
+
+React Server Components (RSCs) have been known for some time but haven't yet been implemented in a React meta-framework. With Next.js now adding them, the world of server-side rendering React applications was about to change.
+
+## The promise of React Server Components
+
+Described by Vercel as a tool for writing UIs rendered or optionally cached on the server, RSC promised direct integration with databases and server-specific capabilities, a departure from the typical React and SSR models.
+
+This feature initially appeared as a game-changer, promising simpler data fetching and routing, thanks to async server components and additional nested layout support.
+
+After experimenting with it for about six months on other projects, I came to the conclusion that while it was a little rough at the edges, it was indeed a game changer and something that should be adopted in Next.js projects moving forward.
+
+## A new new paradigm: Server Actions
+
+Vercel didn't stop at adding Server Components. A short while after the initial Next.js 13 release, they introduced "Server Actions." Server Actions allow for the calling of server-side functions without API routes, reducing the amount of ceremony required for adding a new mutation or event to your application.
+
+## Betting on new technology
+
+Following the release of both Server Actions and Server Components, we at Documenso embarked on a rewrite of the application. We had accumulated a bit of technical debt from the initial MVP, which was best shed as we also improved the design with help from our new designer.
+
+Having had much success with Server Components on other projects, I opted to go all in on both Server Components and Server Actions for the new version of the application. I was excited to see how much simpler and more efficient the application would be with these new technologies.
+
+Following our relaunch, we felt quite happy with our choices of server actions, which even let us cocktail certain client—and server-side logic into a single component without needing a bunch of effort on our end.
+
+## Navigating challenges with Server Actions
+
+While initially successful, we soon encountered issues with Server Actions, particularly when monitoring the application. Unfortunately, server actions make it much harder to monitor network requests and identify failed server actions since they use the route that they are currently on.
+
+Despite this issue, things were manageable; however, a critical issue arose when the usage of server actions caused bundle corruption, resulting in a top-level await insertion that would cause builds and tests to fail.
+
+This last issue was a deal breaker since it highlighted how much magic we were relying on with server actions. I like to avoid adding more magic where possible since, with bundlers and meta-frameworks, we are already handing off a lot of heavy lifting and getting a lot of magic in return.
+
+## Going all in on tRPC
+
+My quick and final solution to the issues we were facing was to fully embrace [tRPC](https://trpc.io/), which we already used in other app areas. The migration took less than a day and resolved all our issues while adding a lot more visibility to failing actions since they now had a dedicated API route.
+
+For those unfamiliar with tRPC, it is a framework for building end-to-end typesafe APIs with TypeScript and Next.js. It's an awesome library that lets you call your defined API safely within the client, causing build time errors when things inevitably drift.
+
+I've been a big fan of tRPC for some time now, so the decision to drop server actions and instead use more of tRPC was easy for me.
+
+## Lessons learned and the future
+
+While I believe server actions are a great idea, and I'm sure they will be improved in the future, I've relearned the lesson that it's best to avoid magic where possible.
+
+This doesn't mean we won't consider moving certain things back to server actions in the future. But for now, we will wait and watch how others use them and how they evolve.

apps/marketing/content/blog/why-i-started-documenso.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-02-06
-Tags:
+tags:
   - Founders
   - Mission
   - Open Source

apps/marketing/contentlayer.config.ts

@@ -12,6 +12,7 @@ export const BlogPost = defineDocumentType(() => ({
     authorName: { type: 'string', required: true },
     authorImage: { type: 'string', required: false },
     authorRole: { type: 'string', required: true },
+    cta: { type: 'boolean', required: false, default: true },
   },
   computedFields: {
     href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },

apps/marketing/next.config.js

@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');
+const { withAxiom } = require('next-axiom');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
@@ -21,6 +22,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -94,4 +96,4 @@ const config = {
   },
 };
 
-module.exports = withContentlayer(config);
+module.exports = withAxiom(withContentlayer(config));

apps/marketing/package.json

@@ -19,6 +19,7 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
@@ -26,6 +27,7 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
+    "next-axiom": "^1.1.1",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",
@@ -36,7 +38,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "0.33.1",
+    "sharp": "^0.33.1",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },

apps/marketing/public/.well-known/security.txt

@@ -0,0 +1,7 @@
+# General Issues
+Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
+
+# Report critical issues privately to let us take appropriate action before publishing.
+Contact: mailto:security@documenso.com
+Preferred-Languages: en
+Canonical: https://documenso.com/.well-known/security.txt

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

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

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

@@ -5,14 +5,13 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = () =>
-  allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
+export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {
-  const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+  const document = allDocuments.find((doc) => doc._raw.flattenedPath === params.content);
 
   if (!document) {
-    notFound();
+    return { title: 'Not Found' };
   }
 
   return { title: document.title };

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

@@ -1,25 +1,21 @@
 import { ImageResponse } from 'next/og';
-
-import { allBlogPosts } from 'contentlayer/generated';
+import { NextResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-export const contentType = 'image/png';
-
-export const IMAGE_SIZE = {
+const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
 
-type BlogPostOpenGraphImageProps = {
-  params: { post: string };
-};
+export async function GET(_request: Request) {
+  const url = new URL(_request.url);
 
-export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) {
-  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+  const title = url.searchParams.get('title');
+  const author = url.searchParams.get('author');
 
-  if (!blogPost) {
-    return null;
+  if (!title || !author) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
   // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
@@ -49,10 +45,10 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
         <img src={logoImage} alt="logo" tw="h-8" />
 
         <h1 tw="mt-8 text-6xl text-center flex items-center justify-center w-full max-w-[800px] font-bold text-center mx-auto">
-          {blogPost.title}
+          {title}
         </h1>
 
-        <p tw="font-normal">Written by {blogPost.authorName}</p>
+        <p tw="font-normal">Written by {author}</p>
       </div>
     ),
     {

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

@@ -7,21 +7,36 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = () =>
-  allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
+import { CallToAction } from '~/components/(marketing)/call-to-action';
+
+export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
   const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
 
   if (!blogPost) {
-    notFound();
+    return {
+      title: 'Not Found',
+    };
   }
 
+  // Use the url constructor to ensure that things are escaped as they should be
+  const searchParams = new URLSearchParams({
+    title: blogPost.title,
+    author: blogPost.authorName,
+  });
+
   return {
     title: {
       absolute: `${blogPost.title} - Documenso Blog`,
     },
     description: blogPost.description,
+    openGraph: {
+      images: [`${blogPost.href}/opengraph?${searchParams.toString()}`],
+    },
+    twitter: {
+      images: [`${blogPost.href}/opengraph?${searchParams.toString()}`],
+    },
   };
 };
 
@@ -41,53 +56,57 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
   const MDXContent = useMDXComponent(post.body.code);
 
   return (
-    <article className="prose dark:prose-invert mx-auto py-8">
-      <div className="mb-6 text-center">
-        <time dateTime={post.date} className="text-muted-foreground mb-1 text-xs">
-          {new Date(post.date).toLocaleDateString()}
-        </time>
+    <div>
+      <article className="prose dark:prose-invert mx-auto py-8">
+        <div className="mb-6 text-center">
+          <time dateTime={post.date} className="text-muted-foreground mb-1 text-xs">
+            {new Date(post.date).toLocaleDateString()}
+          </time>
 
-        <h1 className="text-3xl font-bold">{post.title}</h1>
+          <h1 className="text-3xl font-bold">{post.title}</h1>
 
-        <div className="not-prose relative -mt-2 flex items-center gap-x-4 border-b border-t py-4">
-          <div className="bg-foreground h-10 w-10 rounded-full">
-            {post.authorImage && (
-              <img
-                src={post.authorImage}
-                alt={`Image of ${post.authorName}`}
-                className="bg-foreground/10 h-10 w-10 rounded-full"
-              />
-            )}
-          </div>
+          <div className="not-prose relative -mt-2 flex items-center gap-x-4 border-b border-t py-4">
+            <div className="bg-foreground h-10 w-10 rounded-full">
+              {post.authorImage && (
+                <img
+                  src={post.authorImage}
+                  alt={`Image of ${post.authorName}`}
+                  className="bg-foreground/10 h-10 w-10 rounded-full"
+                />
+              )}
+            </div>
 
-          <div className="text-sm leading-6">
-            <p className="text-foreground text-left font-semibold">{post.authorName}</p>
-            <p className="text-muted-foreground">{post.authorRole}</p>
+            <div className="text-sm leading-6">
+              <p className="text-foreground text-left font-semibold">{post.authorName}</p>
+              <p className="text-muted-foreground">{post.authorRole}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <MDXContent components={mdxComponents} />
+        <MDXContent components={mdxComponents} />
 
-      {post.tags.length > 0 && (
-        <ul className="not-prose flex list-none flex-row space-x-2 px-0">
-          {post.tags.map((tag, i) => (
-            <li
-              key={`tag-${i}`}
-              className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
-            >
-              {tag}
-            </li>
-          ))}
-        </ul>
-      )}
+        {post.tags.length > 0 && (
+          <ul className="not-prose flex list-none flex-row space-x-2 px-0">
+            {post.tags.map((tag, i) => (
+              <li
+                key={`tag-${i}`}
+                className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
+              >
+                {tag}
+              </li>
+            ))}
+          </ul>
+        )}
 
-      <hr />
+        <hr />
 
-      <Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
-        <ChevronLeft className="mr-2 h-6 w-6" />
-        Back to all posts
-      </Link>
-    </article>
+        <Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
+          <ChevronLeft className="mr-2 h-6 w-6" />
+          Back to all posts
+        </Link>
+      </article>
+
+      {post.cta && <CallToAction className="mt-8" utmSource={`blog_${params.post}`} />}
+    </div>
   );
 }

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

@@ -5,6 +5,7 @@ import { allBlogPosts } from 'contentlayer/generated';
 export const metadata: Metadata = {
   title: 'Blog',
 };
+
 export default function BlogPage() {
   const blogPosts = allBlogPosts.sort((a, b) => {
     const dateA = new Date(a.date);

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

@@ -4,6 +4,7 @@ import { redirect } from 'next/navigation';
 
 import { ArrowRight } from 'lucide-react';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
@@ -12,6 +13,8 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { PasswordReveal } from '~/components/(marketing)/password-reveal';
 
+export const dynamic = 'force-dynamic';
+
 const fontCaveat = Caveat({
   weight: ['500'],
   subsets: ['latin'],
@@ -175,11 +178,7 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
           This is a temporary password. Please change it as soon as possible.
         </p>
 
-        <Link
-          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`}
-          target="_blank"
-          className="mt-4 block"
-        >
+        <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signin`} target="_blank" className="mt-4 block">
           <Button size="lg" className="text-base">
             Let's get started!
             <ArrowRight className="ml-2 h-5 w-5" />

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

@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 
 import { usePathname } from 'next/navigation';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Footer } from '~/components/(marketing)/footer';
@@ -17,6 +19,10 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   const [scrollY, setScrollY] = useState(0);
   const pathname = usePathname();
 
+  const { getFlag } = useFeatureFlags();
+
+  const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar');
+
   useEffect(() => {
     const onScroll = () => {
       setScrollY(window.scrollY);
@@ -30,7 +36,8 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
     <div
       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',
+        'overflow-y-auto overflow-x-hidden':
+          pathname && !['/singleplayer', '/pricing'].includes(pathname),
       })}
     >
       <div
@@ -38,6 +45,23 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
           'bg-background/50 backdrop-blur-md': scrollY > 5,
         })}
       >
+        {showProfilesAnnouncementBar && (
+          <div className="relative inline-flex w-full items-center justify-center overflow-hidden bg-[#e7f3df] px-4 py-2.5">
+            <div className="text-black text-center text-sm font-medium">
+              Claim your documenso public profile username now!{' '}
+              <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
+              <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">
+                <a
+                  href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=marketing-announcement-bar`}
+                  className="bg-background text-foreground rounded-md px-2.5 py-1 text-xs font-medium duration-300"
+                >
+                  Claim Now
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
+
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 

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

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
   data: T;
@@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <span>{extraInfo}</span>
-      </div>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          <span>{extraInfo}</span>
+        </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">
         <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
@@ -56,6 +55,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
             <Bar
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
               dataKey={metricKey as string}
               maxBarSize={60}
               fill="hsl(var(--primary))"

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

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes, useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@@ -48,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
           <PieChart width={400} height={400}>
             <Pie

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

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
@@ -14,14 +13,17 @@ export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
 export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
   const formattedData = data.map((item) => ({
     amount: Number(item.amount),
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     date: formatMonth(item.date as string),
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />

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

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

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type MonthlyCompletedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyCompletedDocumentsChart = ({
+  className,
+  data,
+}: MonthlyCompletedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

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

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
   className?: string;
@@ -14,24 +13,27 @@ export type MonthlyNewUsersChartProps = {
 export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartProps) => {
   const formattedData = [...data].reverse().map(({ month, count }) => {
     return {
-      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
       count: Number(count),
     };
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">New Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <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">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
             <YAxis />
 
             <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
               formatter={(value) => [Number(value).toLocaleString('en-US'), 'New Users']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />

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

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
   className?: string;
@@ -14,24 +13,27 @@ export type MonthlyTotalUsersChartProps = {
 export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersChartProps) => {
   const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
     return {
-      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
       count: Number(count),
     };
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <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">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
             <YAxis />
 
             <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
               formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />

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

@@ -2,19 +2,24 @@ import type { Metadata } from 'next';
 
 import { z } from 'zod';
 
+import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
-import { MetricCard } from '~/app/(marketing)/open/metric-card';
-import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
+import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MetricCard } from './metric-card';
+import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
+import { Typefully } from './typefully';
 
 export const metadata: Metadata = {
   title: 'Open Startup',
@@ -129,118 +134,149 @@ export default async function OpenPage() {
     { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
+    MONTHLY_USERS,
+    MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
     fetchGithubStats(),
     fetchOpenIssues(),
     fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
+    getUserMonthlyGrowth(),
+    getCompletedDocumentsMonthly(),
   ]);
 
-  const MONTHLY_USERS = await getUserMonthlyGrowth();
-
   return (
-    <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
-      <div className="flex flex-col items-center justify-center">
-        <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
+    <div>
+      <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
+        <div className="flex flex-col items-center justify-center">
+          <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
 
-        <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
-          All our metrics, finances, and learnings are public. We believe in transparency and want
-          to share our journey with you. You can read more about why here:{' '}
-          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
-            Announcing Open Metrics
-          </a>
+          <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
+            All our metrics, finances, and learnings are public. We believe in transparency and want
+            to share our journey with you. You can read more about why here:{' '}
+            <a
+              className="font-bold"
+              href="https://documenso.com/blog/pre-seed"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Announcing Open Metrics
+            </a>
+          </p>
+        </div>
+
+        <div className="my-12 grid grid-cols-12 gap-8">
+          <div className="col-span-12 grid grid-cols-4 gap-4">
+            <MetricCard
+              className="col-span-2 lg:col-span-1"
+              title="Stargazers"
+              value={stargazersCount.toLocaleString('en-US')}
+            />
+            <MetricCard
+              className="col-span-2 lg:col-span-1"
+              title="Forks"
+              value={forksCount.toLocaleString('en-US')}
+            />
+            <MetricCard
+              className="col-span-2 lg:col-span-1"
+              title="Open Issues"
+              value={openIssues.toLocaleString('en-US')}
+            />
+            <MetricCard
+              className="col-span-2 lg:col-span-1"
+              title="Merged PR's"
+              value={mergedPullRequests.toLocaleString('en-US')}
+            />
+          </div>
+
+          <TeamMembers className="col-span-12" />
+
+          <SalaryBands className="col-span-12" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Finances</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
+
+          <CapTable className="col-span-12 lg:col-span-6" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Community</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="stars"
+            title="GitHub: Total Stars"
+            label="Stars"
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="mergedPRs"
+            title="GitHub: Total Merged PRs"
+            label="Merged PRs"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="forks"
+            title="GitHub: Total Forks"
+            label="Forks"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="openIssues"
+            title="GitHub: Total Open Issues"
+            label="Open Issues"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <Typefully className="col-span-12 lg:col-span-6" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Growth</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <BarMetric<EarlyAdoptersType>
+            data={EARLY_ADOPTERS_DATA}
+            metricKey="earlyAdopters"
+            title="Early Adopters"
+            label="Early Adopters"
+            className="col-span-12 lg:col-span-6"
+            extraInfo={<OpenPageTooltip />}
+          />
+
+          <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
+          <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
+
+          <MonthlyCompletedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
+        </div>
+      </div>
+
+      <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+        <h2 className="text-2xl font-bold">Is there more?</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          This page is evolving as we learn what makes a great signing company. We'll update it when
+          we have more to share.
         </p>
       </div>
 
-      <div className="mt-12 grid grid-cols-12 gap-8">
-        <div className="col-span-12 grid grid-cols-4 gap-4">
-          <MetricCard
-            className="col-span-2 lg:col-span-1"
-            title="Stargazers"
-            value={stargazersCount.toLocaleString('en-US')}
-          />
-          <MetricCard
-            className="col-span-2 lg:col-span-1"
-            title="Forks"
-            value={forksCount.toLocaleString('en-US')}
-          />
-          <MetricCard
-            className="col-span-2 lg:col-span-1"
-            title="Open Issues"
-            value={openIssues.toLocaleString('en-US')}
-          />
-          <MetricCard
-            className="col-span-2 lg:col-span-1"
-            title="Merged PR's"
-            value={mergedPullRequests.toLocaleString('en-US')}
-          />
-        </div>
-
-        <TeamMembers className="col-span-12" />
-
-        <SalaryBands className="col-span-12" />
-
-        <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
-
-        <CapTable className="col-span-12 lg:col-span-6" />
-
-        <BarMetric<EarlyAdoptersType>
-          data={EARLY_ADOPTERS_DATA}
-          metricKey="earlyAdopters"
-          title="Early Adopters"
-          label="Early Adopters"
-          className="col-span-12 lg:col-span-6"
-          extraInfo={<OpenPageTooltip />}
-        />
-
-        <BarMetric<StargazersType>
-          data={STARGAZERS_DATA}
-          metricKey="stars"
-          title="Github: Total Stars"
-          label="Stars"
-          className="col-span-12 lg:col-span-6"
-        />
-
-        <BarMetric<StargazersType>
-          data={STARGAZERS_DATA}
-          metricKey="mergedPRs"
-          title="Github: Total Merged PRs"
-          label="Merged PRs"
-          chartHeight={300}
-          className="col-span-12 lg:col-span-6"
-        />
-
-        <BarMetric<StargazersType>
-          data={STARGAZERS_DATA}
-          metricKey="forks"
-          title="Github: Total Forks"
-          label="Forks"
-          chartHeight={300}
-          className="col-span-12 lg:col-span-6"
-        />
-
-        <BarMetric<StargazersType>
-          data={STARGAZERS_DATA}
-          metricKey="openIssues"
-          title="Github: Total Open Issues"
-          label="Open Issues"
-          chartHeight={300}
-          className="col-span-12 lg:col-span-6"
-        />
-
-        <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
-        <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
-
-        <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
-          <h2 className="text-2xl font-bold">Where's the rest?</h2>
-
-          <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
-            We're still working on getting all our metrics together. We'll update this page as soon
-            as we have more to share.
-          </p>
-        </div>
-      </div>
+      <CallToAction className="mt-12" utmSource="open-page" />
     </div>
   );
 }

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

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

apps/marketing/src/app/(marketing)/open/team-members.tsx

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

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Completed Documents</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US'),
+                'Total Completed Documents',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+
+import { FaXTwitter } from 'react-icons/fa6';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export type TypefullyProps = HTMLAttributes<HTMLDivElement>;
+
+export const Typefully = ({ className, ...props }: TypefullyProps) => {
+  return (
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>
+
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
+          <FaXTwitter className="h-12 w-12" />
+          <Link href="https://typefully.com/documenso/stats" target="_blank">
+            <h1>Documenso on X</h1>
+          </Link>
+          <Button className="rounded-full" size="sm" asChild>
+            <Link href="https://typefully.com/documenso/stats" target="_blank">
+              View all stats
+            </Link>
+          </Button>
+          <Button className="rounded-full bg-white" size="sm" asChild>
+            <Link href="https://twitter.com/documenso" target="_blank">
+              Follow us on X
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -15,6 +15,8 @@ export const metadata: Metadata = {
   title: 'Pricing',
 };
 
+export const dynamic = 'force-dynamic';
+
 export type PricingPageProps = {
   searchParams?: {
     planId?: string;
@@ -53,7 +55,7 @@ export default function PricingPage() {
 
         <div className="mt-4 flex justify-center">
           <Button variant="outline" size="lg" className="rounded-full hover:cursor-pointer" asChild>
-            <Link href="https://github.com/documenso/documenso" target="_blank">
+            <Link href="https://github.com/documenso/documenso" target="_blank" rel="noreferrer">
               Get Started
             </Link>
           </Button>
@@ -166,6 +168,7 @@ export default function PricingPage() {
               <Link
                 className="text-documenso-700 font-bold"
                 target="_blank"
+                rel="noreferrer"
                 href="mailto:support@documenso.com"
               >
                 support@documenso.com
@@ -175,6 +178,7 @@ export default function PricingPage() {
                 className="text-documenso-700 font-bold"
                 href="https://documen.so/discord"
                 target="_blank"
+                rel="noreferrer"
               >
                 in our Discord-Support-Channel
               </a>{' '}

apps/marketing/src/app/(marketing)/singleplayer/[token]/success/page.tsx

@@ -27,7 +27,7 @@ export default async function SinglePlayerModeSuccessPage({
     return notFound();
   }
 
-  const signatures = await getRecipientSignatures({ recipientId: document.Recipient.id });
+  const signatures = await getRecipientSignatures({ recipientId: document.Recipient[0].id });
 
   return <SinglePlayerModeSuccess document={document} signatures={signatures} />;
 }

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

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import type { Field, Recipient } from '@documenso/prisma/client';
@@ -157,9 +158,11 @@ export const SinglePlayerClient = () => {
     expired: null,
     signedAt: null,
     readStatus: 'OPENED',
+    documentDeletedAt: null,
     signingStatus: 'NOT_SIGNED',
     sendStatus: 'NOT_SENT',
     role: 'SIGNER',
+    authOptions: null,
   };
 
   const onFileDrop = async (file: File) => {
@@ -190,7 +193,7 @@ export const SinglePlayerClient = () => {
         <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
           Create a{' '}
           <Link
-            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+            href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=singleplayer`}
             target="_blank"
             className="hover:text-foreground/80 font-semibold transition-colors"
           >
@@ -202,7 +205,7 @@ export const SinglePlayerClient = () => {
             target="_blank"
             className="hover:text-foreground/80 font-semibold transition-colors"
           >
-            community plan
+            early adopter plan
           </Link>{' '}
           for exclusive features, including the ability to collaborate with multiple signers.
         </p>
@@ -245,6 +248,7 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
+                  isDocumentPdfLoaded={true}
                 />
               </fieldset>
 
@@ -255,6 +259,7 @@ export const SinglePlayerClient = () => {
                 fields={fields}
                 onSubmit={onSignSubmit}
                 requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))}
                 requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
               />
             </Stepper>

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

@@ -7,6 +7,7 @@ export const metadata: Metadata = {
 };
 
 export const revalidate = 0;
+export const dynamic = 'force-dynamic';
 
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during

apps/marketing/src/app/layout.tsx

@@ -2,7 +2,11 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { AxiomWebVitals } from 'next-axiom';
+import { PublicEnvScript } from 'next-runtime-env';
+
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -17,32 +21,35 @@ import './globals.css';
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export const metadata = {
-  title: {
-    template: '%s - Documenso',
-    default: 'Documenso',
-  },
-  description:
-    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  keywords:
-    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
-  authors: { name: 'Documenso, Inc.' },
-  robots: 'index, follow',
-  openGraph: {
-    title: 'Documenso - The Open Source DocuSign Alternative',
+export function generateMetadata() {
+  return {
+    title: {
+      template: '%s - Documenso',
+      default: 'Documenso',
+    },
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-    type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
-  },
-  twitter: {
-    site: '@documenso',
-    card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
-    description:
-      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  },
-};
+    keywords:
+      'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+    authors: { name: 'Documenso, Inc.' },
+    robots: 'index, follow',
+    metadataBase: new URL(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3000'),
+    openGraph: {
+      title: 'Documenso - The Open Source DocuSign Alternative',
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+      type: 'website',
+      images: ['/opengraph-image.jpg'],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: ['/opengraph-image.jpg'],
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    },
+  };
+}
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getAllAnonymousFlags();
@@ -58,8 +65,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
+        <PublicEnvScript />
       </head>
 
+      <AxiomWebVitals />
+
       <Suspense>
         <PostHogPageview />
       </Suspense>

apps/marketing/src/app/robots.ts

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

apps/marketing/src/app/sitemap.ts

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

apps/marketing/src/components/(marketing)/call-to-action.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+type CallToActionProps = {
+  className?: string;
+  utmSource?: string;
+};
+
+export const CallToAction = ({ className, utmSource = 'generic-cta' }: CallToActionProps) => {
+  return (
+    <Card spotlight className={className}>
+      <CardContent className="flex flex-col items-center justify-center p-12">
+        <h2 className="text-center text-2xl font-bold">Join the Open Signing Movement</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center leading-normal">
+          Create your account and start using state-of-the-art document signing. Open and beautiful
+          signing is within your grasp.
+        </p>
+
+        <Button className="mt-8 rounded-full no-underline" size="lg" asChild>
+          <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=${utmSource}`} target="_blank">
+            Get started
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -40,9 +40,9 @@ export const Callout = ({ starCount }: CalloutProps) => {
         className="rounded-full bg-transparent backdrop-blur-sm"
         onClick={onSignUpClick}
       >
-        Get the Early Adopters Plan
-        <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
-          $30/mo. forever!
+        Claim Early Adopter Plan
+        <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+          $30/mo
         </span>
       </Button>
 
@@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}

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

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

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

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

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

@@ -9,6 +9,7 @@ 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';
+import { Button } from '@documenso/ui/primitives/button';
 
 import { HamburgerMenu } from './mobile-hamburger';
 import { MobileNavigation } from './mobile-navigation';
@@ -68,12 +69,18 @@ export const Header = ({ className, ...props }: HeaderProps) => {
         </Link>
 
         <Link
-          href="https://app.documenso.com/signin"
+          href="https://app.documenso.com/signin?utm_source=marketing-header"
           target="_blank"
           className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
         >
           Sign in
         </Link>
+
+        <Button className="rounded-full" size="sm" asChild>
+          <Link href="https://app.documenso.com/signup?utm_source=marketing-header" target="_blank">
+            Sign up
+          </Link>
+        </Button>
       </div>
 
       <HamburgerMenu

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

@@ -3,7 +3,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
@@ -95,7 +96,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           variants={HeroTitleVariants}
           initial="initial"
           animate="animate"
-          className="text-center text-4xl font-bold leading-tight tracking-tight lg:text-[64px]"
+          className="text-center text-4xl font-bold leading-tight tracking-tight md:text-[48px] lg:text-[64px]"
         >
           Document signing,
           <span className="block" /> finally open source.
@@ -113,16 +114,16 @@ export const Hero = ({ className, ...props }: HeroProps) => {
             className="rounded-full bg-transparent backdrop-blur-sm"
             onClick={onSignUpClick}
           >
-            Get the Early Adopters Plan
-            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
-              $30/mo. forever!
+            Claim Early Adopter Plan
+            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+              $30/mo
             </span>
           </Button>
 
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
             </Button>
           </Link>
         </motion.div>
@@ -224,7 +225,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
               <span className="bg-primary text-black">
                 (in a non-legally binding, but heartfelt way)
               </span>{' '}
-              and lock in the early supporter plan for forever, including everything we build this
+              and lock in the early adopter plan for forever, including everything we build this
               year.
             </p>
 

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

@@ -47,9 +47,13 @@ export const MENU_NAVIGATION_LINKS = [
     text: 'Privacy',
   },
   {
-    href: 'https://app.documenso.com/signin',
+    href: 'https://app.documenso.com/signin?utm_source=marketing-header',
     text: 'Sign in',
   },
+  {
+    href: 'https://app.documenso.com/signup?utm_source=marketing-header',
+    text: 'Sign up',
+  },
 ];
 
 export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {

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

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

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

@@ -8,6 +8,7 @@ import Link from 'next/link';
 import { AnimatePresence, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -22,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <div className="flex items-center justify-center gap-x-6">
+      <div className="bg-background sticky top-32 flex items-center justify-end gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static lg:justify-center">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"
@@ -39,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'MONTHLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -62,7 +63,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'YEARLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -83,7 +84,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
           <Button className="rounded-full text-base" asChild>
             <Link
-              href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-free-plan`}
               target="_blank"
               className="mt-6"
             >
@@ -101,7 +102,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
         </div>
 
         <div
-          data-plan="community"
+          data-plan="early-adopter"
           className="border-primary bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border-2 px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380]"
         >
           <p className="text-foreground text-4xl font-medium">Early Adopters</p>
@@ -117,29 +118,31 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
-            <Link href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}>Signup Now</Link>
+            <Link
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-early-adopter`}
+              target="_blank"
+            >
+              Signup Now
+            </Link>
           </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
-            <p className="text-foreground py-4 font-medium">
-              {' '}
-              <a href="https://documenso.com/blog/early-adopters" target="_blank">
-                The Early Adopter Deal:
+            <p className="text-foreground py-4">
+              <a
+                href="https://documen.so/early-adopters-pricing-page"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Limited Time Offer: <span className="text-documenso-700">Read More</span>
               </a>
             </p>
-            <p className="text-foreground py-4">Join the movement</p>
-            <p className="text-foreground py-4">Simple signing solution</p>
+            <p className="text-foregro‚und py-4">Unlimited Teams</p>
+            <p className="text-foregro‚und py-4">Unlimited Users</p>
+            <p className="text-foregro‚und py-4">Unlimited Documents per month</p>
+            <p className="text-foreground py-4">Includes all upcoming features</p>
             <p className="text-foreground py-4">Email, Discord and Slack assistance</p>
-            <p className="text-foreground py-4">
-              <strong>
-                {' '}
-                <a href="https://documenso.com/blog/early-adopters" target="_blank">
-                  Includes all upcoming features
-                </a>
-              </strong>
-            </p>
-            <p className="text-foreground py-4">Fixed, straightforward pricing</p>
           </div>
+          <div className="flex-1" />
         </div>
 
         <div

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
@@ -51,7 +51,7 @@ export const ShareConnectPaidWidgetBento = ({
         <Card className="col-span-2 lg:col-span-1" spotlight>
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
-              <strong className="block">Connections (Soon).</strong>
+              <strong className="block">Connections</strong>
               Create connections and automations with Zapier and more to integrate with your
               favorite tools.
             </p>

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

@@ -6,6 +6,7 @@ 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 { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import type { Signature } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
@@ -54,7 +55,7 @@ export const SinglePlayerModeSuccess = ({
 
       <SigningCard3D
         className="mt-8"
-        name={document.Recipient.name || document.Recipient.email}
+        name={document.Recipient[0].name || document.Recipient[0].email}
         signature={signatures.at(0)}
         signingCelebrationImage={signingCelebration}
       />
@@ -64,7 +65,7 @@ export const SinglePlayerModeSuccess = ({
           <div className="grid w-full max-w-sm grid-cols-2 gap-4">
             <DocumentShareButton
               documentId={document.id}
-              token={document.Recipient.token}
+              token={document.Recipient[0].token}
               className="flex-1 bg-transparent backdrop-blur-sm"
             />
 
@@ -85,7 +86,7 @@ export const SinglePlayerModeSuccess = ({
       <p className="text-muted-foreground/60 mt-16 text-center text-sm">
         Create a{' '}
         <Link
-          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+          href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=singleplayer`}
           target="_blank"
           className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
         >

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

@@ -0,0 +1,21 @@
+// https://github.com/documenso/documenso/pull/1044/files#r1538258462
+import { Suspense } from 'react';
+
+import { StatusWidget } from './status-widget';
+
+export function StatusWidgetContainer() {
+  return (
+    <Suspense fallback={<StatusWidgetFallback />}>
+      <StatusWidget slug="documenso-status" />
+    </Suspense>
+  );
+}
+
+function StatusWidgetFallback() {
+  return (
+    <div className="border-border inline-flex max-w-fit  items-center justify-between space-x-2 rounded-md border border-gray-200 px-2 py-2 pr-3 text-sm">
+      <span className="bg-muted h-2 w-36 animate-pulse rounded-md" />
+      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { memo, use } from 'react';
+
+import { type Status, getStatus } from '@openstatus/react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+const getStatusLevel = (level: Status) => {
+  return {
+    operational: {
+      label: 'Operational',
+      color: 'bg-green-500',
+      color2: 'bg-green-400',
+    },
+    degraded_performance: {
+      label: 'Degraded Performance',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    partial_outage: {
+      label: 'Partial Outage',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    major_outage: {
+      label: 'Major Outage',
+      color: 'bg-red-500',
+      color2: 'bg-red-400',
+    },
+    unknown: {
+      label: 'Unknown',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+    incident: {
+      label: 'Incident',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    under_maintenance: {
+      label: 'Under Maintenance',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+  }[level];
+};
+
+export const StatusWidget = memo(function StatusWidget({ slug }: { slug: string }) {
+  const { status } = use(getStatus(slug));
+  const level = getStatusLevel(status);
+
+  return (
+    <a
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
+      href="https://status.documenso.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">{level.label}</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span
+          className={cn(
+            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+            level.color2,
+          )}
+        />
+        <span className={cn('relative inline-flex h-1.5 w-1.5 rounded-full', level.color)} />
+      </span>
+    </a>
+  );
+});

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

@@ -7,6 +7,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { env } from 'next-runtime-env';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -144,7 +145,11 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
         setTimeout(resolve, 1000);
       });
 
-      const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
+      const planId = env('NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID');
+
+      if (!planId) {
+        throw new Error('No plan ID found.');
+      }
 
       const claimPlanInput = signatureDataUrl
         ? {
@@ -194,7 +199,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             className="bg-foreground/5 col-span-12 flex flex-col rounded-2xl p-6 lg:col-span-5"
             onSubmit={handleSubmit(onFormSubmit)}
           >
-            <h3 className="text-2xl font-semibold">Sign up for the early adopters plan</h3>
+            <h3 className="text-xl font-semibold">Sign up to Early Adopter Plan</h3>
             <p className="text-muted-foreground mt-2 text-xs">
               with Timur Ercan & Lucas Smith from Documenso
             </p>
@@ -203,7 +208,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
 
             <AnimatePresence>
               <motion.div key="email">
-                <label htmlFor="email" className="text-foreground text-lg font-semibold lg:text-xl">
+                <label htmlFor="email" className="text-foreground font-medium ">
                   What’s your email?
                 </label>
 
@@ -215,7 +220,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                       <Input
                         id="email"
                         type="email"
-                        placeholder=""
+                        placeholder="your@example.com"
                         className="bg-background w-full pr-16"
                         disabled={isSubmitting}
                         onKeyDown={(e) =>
@@ -260,11 +265,8 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                     transform: 'translateX(25%)',
                   }}
                 >
-                  <label
-                    htmlFor="name"
-                    className="text-foreground text-lg font-semibold lg:text-xl"
-                  >
-                    and your name?
+                  <label htmlFor="name" className="text-foreground font-medium ">
+                    And your name?
                   </label>
 
                   <Controller
@@ -344,7 +346,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                   {signatureText && (
                     <p
                       className={cn(
-                        'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
+                        'text-foreground truncate text-4xl font-semibold [font-family:var(--font-caveat)]',
                       )}
                     >
                       {signatureText}
@@ -358,7 +360,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                 >
                   <Input
                     id="signatureText"
-                    className="text-foreground placeholder:text-muted-foreground border-none p-0 text-sm focus-visible:ring-0"
+                    className="text-foreground placeholder:text-muted-foreground truncate border-none p-0 text-sm focus-visible:ring-0"
                     placeholder="Draw or type name here"
                     disabled={isSubmitting}
                     {...register('signatureText', {

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

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

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

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

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

@@ -1,13 +1,15 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomUUID } from 'crypto';
 
-import { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
+import type { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
 
-import { TClaimPlanResponseSchema, ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
+import type { TClaimPlanResponseSchema } from '~/api/claim-plan/types';
+import { ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
 
 export default async function handler(
   req: NextApiRequest,
@@ -40,7 +42,7 @@ export default async function handler(
 
     if (user) {
       return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`,
+        redirectUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/signin`,
       });
     }
 
@@ -77,8 +79,8 @@ export default async function handler(
       mode: 'subscription',
       metadata,
       allow_promotion_codes: true,
-      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}`,
+      success_url: `${NEXT_PUBLIC_MARKETING_URL()}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${NEXT_PUBLIC_MARKETING_URL()}`,
     });
 
     if (!checkout.url) {

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

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

apps/web/next.config.js

@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const { version } = require('./package.json');
+const { withAxiom } = require('next-axiom');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
@@ -22,6 +23,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -90,4 +92,4 @@ const config = {
   },
 };
 
-module.exports = config;
+module.exports = withAxiom(config);

apps/web/package.json

@@ -14,15 +14,18 @@
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/api": "*",
     "@documenso/assets": "*",
     "@documenso/ee": "*",
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
-    "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@simplewebauthn/browser": "^9.0.1",
+    "@simplewebauthn/server": "^9.0.3",
     "@tanstack/react-query": "^4.29.5",
+    "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
@@ -30,8 +33,10 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
+    "next-axiom": "^1.1.1",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
+    "papaparse": "^5.4.1",
     "perfect-freehand": "^1.2.0",
     "posthog-js": "^1.75.3",
     "posthog-node": "^3.1.1",
@@ -42,20 +47,24 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
-    "sharp": "0.33.1",
+    "remeda": "^1.27.1",
+    "sharp": "^0.33.1",
     "ts-pattern": "^5.0.5",
-    "typescript": "5.2.2",
     "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@documenso/tailwind-config": "*",
+    "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
+    "@types/papaparse": "^5.3.14",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
-    "@types/ua-parser-js": "^0.7.39"
+    "@types/ua-parser-js": "^0.7.39",
+    "typescript": "5.2.2"
   },
   "overrides": {
     "next-auth": {

apps/web/public/.well-known/security.txt

@@ -0,0 +1,7 @@
+# General Issues
+Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
+
+# Report critical issues privately to let us take appropriate action before publishing.
+Contact: mailto:security@documenso.com
+Preferred-Languages: en
+Canonical: https://documenso.com/.well-known/security.txt

apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+
+import { type Document, DocumentStatus } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminActionsProps = {
+  className?: string;
+  document: Document;
+};
+
+export const AdminActions = ({ className, document }: AdminActionsProps) => {
+  const { toast } = useToast();
+
+  const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
+    trpc.admin.resealDocument.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Document resealed',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Error',
+          description: 'Failed to reseal document',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <div className={cn('flex gap-x-4', className)}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              loading={isResealDocumentLoading}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+              onClick={() => resealDocument({ id: document.id })}
+            >
+              Reseal document
+            </Button>
+          </TooltipTrigger>
+
+          <TooltipContent className="max-w-[40ch]">
+            Attempts sealing the document again, useful for after a code change has occurred to
+            resolve an erroneous document.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <Button variant="outline" asChild>
+        <Link href={`/admin/users/${document.userId}`}>Go to owner</Link>
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,91 @@
+import { DateTime } from 'luxon';
+
+import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import { Badge } from '@documenso/ui/primitives/badge';
+
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { AdminActions } from './admin-actions';
+import { RecipientItem } from './recipient-item';
+import { SuperDeleteDocumentDialog } from './super-delete-document-dialog';
+
+type AdminDocumentDetailsPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default async function AdminDocumentDetailsPage({ params }: AdminDocumentDetailsPageProps) {
+  const document = await getEntireDocument({ id: Number(params.id) });
+
+  return (
+    <div>
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-x-4">
+          <h1 className="text-2xl font-semibold">{document.title}</h1>
+          <DocumentStatus status={document.status} />
+        </div>
+
+        {document.deletedAt && (
+          <Badge size="large" variant="destructive">
+            Deleted
+          </Badge>
+        )}
+      </div>
+
+      <div className="text-muted-foreground mt-4 text-sm">
+        <div>
+          Created on: <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
+        </div>
+        <div>
+          Last updated at: <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
+        </div>
+      </div>
+
+      <hr className="my-4" />
+
+      <h2 className="text-lg font-semibold">Admin Actions</h2>
+
+      <AdminActions className="mt-2" document={document} />
+
+      <hr className="my-4" />
+      <h2 className="text-lg font-semibold">Recipients</h2>
+
+      <div className="mt-4">
+        <Accordion type="multiple" className="space-y-4">
+          {document.Recipient.map((recipient) => (
+            <AccordionItem
+              key={recipient.id}
+              value={recipient.id.toString()}
+              className="rounded-lg border"
+            >
+              <AccordionTrigger className="px-4">
+                <div className="flex items-center gap-x-4">
+                  <h4 className="font-semibold">{recipient.name}</h4>
+                  <Badge size="small" variant="neutral">
+                    {recipient.email}
+                  </Badge>
+                </div>
+              </AccordionTrigger>
+
+              <AccordionContent className="border-t px-4 pt-4">
+                <RecipientItem recipient={recipient} />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+
+      <hr className="my-4" />
+
+      {document && <SuperDeleteDocumentDialog document={document} />}
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  type Field,
+  type Recipient,
+  type Signature,
+  SigningStatus,
+} 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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZAdminUpdateRecipientFormSchema = z.object({
+  name: z.string().min(1),
+  email: z.string().email(),
+});
+
+type TAdminUpdateRecipientFormSchema = z.infer<typeof ZAdminUpdateRecipientFormSchema>;
+
+export type RecipientItemProps = {
+  recipient: Recipient & {
+    Field: Array<
+      Field & {
+        Signature: Signature | null;
+      }
+    >;
+  };
+};
+
+export const RecipientItem = ({ recipient }: RecipientItemProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const form = useForm<TAdminUpdateRecipientFormSchema>({
+    defaultValues: {
+      name: recipient.name,
+      email: recipient.email,
+    },
+  });
+
+  const { mutateAsync: updateRecipient } = trpc.admin.updateRecipient.useMutation();
+
+  const onUpdateRecipientFormSubmit = async ({ name, email }: TAdminUpdateRecipientFormSchema) => {
+    try {
+      await updateRecipient({
+        id: recipient.id,
+        name,
+        email,
+      });
+
+      toast({
+        title: 'Recipient updated',
+        description: 'The recipient has been updated successfully',
+      });
+
+      router.refresh();
+    } catch (error) {
+      toast({
+        title: 'Failed to update recipient',
+        description: error.message,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onUpdateRecipientFormSubmit)}>
+          <fieldset
+            className="flex h-full max-w-xl flex-col gap-y-4"
+            disabled={
+              form.formState.isSubmitting || recipient.signingStatus === SigningStatus.SIGNED
+            }
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel required>Name</FormLabel>
+
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel required>Email</FormLabel>
+
+                  <FormControl>
+                    <Input type="email" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div>
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                Update Recipient
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+
+      <hr className="my-4" />
+
+      <h2 className="mb-4 text-lg font-semibold">Fields</h2>
+
+      <DataTable
+        data={recipient.Field}
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+            cell: ({ row }) => <div>{row.original.id}</div>,
+          },
+          {
+            header: 'Type',
+            accessorKey: 'type',
+            cell: ({ row }) => <div>{row.original.type}</div>,
+          },
+          {
+            header: 'Inserted',
+            accessorKey: 'inserted',
+            cell: ({ row }) => <div>{row.original.inserted ? 'True' : 'False'}</div>,
+          },
+          {
+            header: 'Value',
+            accessorKey: 'customText',
+            cell: ({ row }) => <div>{row.original.customText}</div>,
+          },
+          {
+            header: 'Signature',
+            accessorKey: 'signature',
+            cell: ({ row }) => (
+              <div>
+                {row.original.Signature?.typedSignature && (
+                  <span>{row.original.Signature.typedSignature}</span>
+                )}
+
+                {row.original.Signature?.signatureImageAsBase64 && (
+                  <img
+                    src={row.original.Signature.signatureImageAsBase64}
+                    alt="Signature"
+                    className="h-12 w-full dark:invert"
+                  />
+                )}
+              </div>
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/admin/documents/[id]/super-delete-document-dialog.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import type { Document } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type SuperDeleteDocumentDialogProps = {
+  document: Document;
+};
+
+export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialogProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const [reason, setReason] = useState('');
+
+  const { mutateAsync: deleteDocument, isLoading: isDeletingDocument } =
+    trpc.admin.deleteDocument.useMutation();
+
+  const handleDeleteDocument = async () => {
+    try {
+      if (!reason) {
+        return;
+      }
+
+      await deleteDocument({ id: document.id, reason });
+
+      toast({
+        title: 'Document deleted',
+        description: 'The Document has been deleted successfully.',
+        duration: 5000,
+      });
+
+      router.push('/admin/documents');
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            err.message ??
+            'We encountered an unknown error while attempting to delete your document. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <Alert
+          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
+          variant="neutral"
+        >
+          <div>
+            <AlertTitle>Delete Document</AlertTitle>
+            <AlertDescription className="mr-2">
+              Delete the document. This action is irreversible so proceed with caution.
+            </AlertDescription>
+          </div>
+
+          <div className="flex-shrink-0">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="destructive">Delete Document</Button>
+              </DialogTrigger>
+
+              <DialogContent>
+                <DialogHeader className="space-y-4">
+                  <DialogTitle>Delete Document</DialogTitle>
+
+                  <Alert variant="destructive">
+                    <AlertDescription className="selection:bg-red-100">
+                      This action is not reversible. Please be certain.
+                    </AlertDescription>
+                  </Alert>
+                </DialogHeader>
+
+                <div>
+                  <DialogDescription>To confirm, please enter the reason</DialogDescription>
+
+                  <Input
+                    className="mt-2"
+                    type="text"
+                    value={reason}
+                    onChange={(e) => setReason(e.target.value)}
+                  />
+                </div>
+
+                <DialogFooter>
+                  <Button
+                    onClick={handleDeleteDocument}
+                    loading={isDeletingDocument}
+                    variant="destructive"
+                    disabled={!reason}
+                  >
+                    {isDeletingDocument ? 'Deleting document...' : 'Delete Document'}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </Alert>
+      </div>
+    </div>
+  );
+};

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

@@ -1,125 +0,0 @@
-'use client';
-
-import { useTransition } from 'react';
-
-import Link from 'next/link';
-
-import { Loader } from 'lucide-react';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { Document, User } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { DataTable } from '@documenso/ui/primitives/data-table';
-import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-
-import { DocumentStatus } from '~/components/formatter/document-status';
-import { LocaleDate } from '~/components/formatter/locale-date';
-
-export type DocumentsDataTableProps = {
-  results: FindResultSet<
-    Document & {
-      User: Pick<User, 'id' | 'name' | 'email'>;
-    }
-  >;
-};
-
-export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
-  const [isPending, startTransition] = useTransition();
-
-  const updateSearchParams = useUpdateSearchParams();
-
-  const onPaginationChange = (page: number, perPage: number) => {
-    startTransition(() => {
-      updateSearchParams({
-        page,
-        perPage,
-      });
-    });
-  };
-
-  return (
-    <div className="relative">
-      <DataTable
-        columns={[
-          {
-            header: 'Created',
-            accessorKey: 'createdAt',
-            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
-          },
-          {
-            header: 'Title',
-            accessorKey: 'title',
-            cell: ({ row }) => {
-              return (
-                <div className="block max-w-[5rem] truncate font-medium md:max-w-[10rem]">
-                  {row.original.title}
-                </div>
-              );
-            },
-          },
-          {
-            header: 'Owner',
-            accessorKey: 'owner',
-            cell: ({ row }) => {
-              const avatarFallbackText = row.original.User.name
-                ? extractInitials(row.original.User.name)
-                : row.original.User.email.slice(0, 1).toUpperCase();
-
-              return (
-                <Tooltip delayDuration={200}>
-                  <TooltipTrigger>
-                    <Link href={`/admin/users/${row.original.User.id}`}>
-                      <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                        <AvatarFallback className="text-xs text-gray-400">
-                          {avatarFallbackText}
-                        </AvatarFallback>
-                      </Avatar>
-                    </Link>
-                  </TooltipTrigger>
-                  <TooltipContent className="flex max-w-xs items-center gap-2">
-                    <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                      <AvatarFallback className="text-xs text-gray-400">
-                        {avatarFallbackText}
-                      </AvatarFallback>
-                    </Avatar>
-
-                    <div className="text-muted-foreground flex flex-col text-sm">
-                      <span>{row.original.User.name}</span>
-                      <span>{row.original.User.email}</span>
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            },
-          },
-          {
-            header: 'Last updated',
-            accessorKey: 'updatedAt',
-            cell: ({ row }) => <LocaleDate date={row.original.updatedAt} />,
-          },
-          {
-            header: 'Status',
-            accessorKey: 'status',
-            cell: ({ row }) => <DocumentStatus status={row.original.status} />,
-          },
-        ]}
-        data={results.data}
-        perPage={results.perPage}
-        currentPage={results.currentPage}
-        totalPages={results.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)/admin/documents/document-results.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useState } from 'react';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+import { 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 { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+// export type AdminDocumentResultsProps = {};
+
+export const AdminDocumentResults = () => {
+  const searchParams = useSearchParams();
+
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [term, setTerm] = useState(() => searchParams?.get?.('term') ?? '');
+  const debouncedTerm = useDebouncedValue(term, 500);
+
+  const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
+  const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
+
+  const { data: findDocumentsData, isLoading: isFindDocumentsLoading } =
+    trpc.admin.findDocuments.useQuery(
+      {
+        term: debouncedTerm,
+        page: page || 1,
+        perPage: perPage || 20,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const onPaginationChange = (newPage: number, newPerPage: number) => {
+    updateSearchParams({
+      page: newPage,
+      perPage: newPerPage,
+    });
+  };
+
+  return (
+    <div>
+      <Input
+        type="search"
+        placeholder="Search by document title"
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+      />
+
+      <div className="relative mt-4">
+        <DataTable
+          columns={[
+            {
+              header: 'Created',
+              accessorKey: 'createdAt',
+              cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+            },
+            {
+              header: 'Title',
+              accessorKey: 'title',
+              cell: ({ row }) => {
+                return (
+                  <Link
+                    href={`/admin/documents/${row.original.id}`}
+                    className="block max-w-[5rem] truncate font-medium hover:underline md:max-w-[10rem]"
+                  >
+                    {row.original.title}
+                  </Link>
+                );
+              },
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell: ({ row }) => <DocumentStatus status={row.original.status} />,
+            },
+            {
+              header: 'Owner',
+              accessorKey: 'owner',
+              cell: ({ row }) => {
+                const avatarFallbackText = row.original.User.name
+                  ? extractInitials(row.original.User.name)
+                  : row.original.User.email.slice(0, 1).toUpperCase();
+
+                return (
+                  <Tooltip delayDuration={200}>
+                    <TooltipTrigger>
+                      <Link href={`/admin/users/${row.original.User.id}`}>
+                        <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                          <AvatarFallback className="text-xs text-gray-400">
+                            {avatarFallbackText}
+                          </AvatarFallback>
+                        </Avatar>
+                      </Link>
+                    </TooltipTrigger>
+
+                    <TooltipContent className="flex max-w-xs items-center gap-2">
+                      <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                        <AvatarFallback className="text-xs text-gray-400">
+                          {avatarFallbackText}
+                        </AvatarFallback>
+                      </Avatar>
+
+                      <div className="text-muted-foreground flex flex-col text-sm">
+                        <span>{row.original.User.name}</span>
+                        <span>{row.original.User.email}</span>
+                      </div>
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              },
+            },
+            {
+              header: 'Last updated',
+              accessorKey: 'updatedAt',
+              cell: ({ row }) => <LocaleDate date={row.original.updatedAt} />,
+            },
+          ]}
+          data={findDocumentsData?.data ?? []}
+          perPage={findDocumentsData?.perPage ?? 20}
+          currentPage={findDocumentsData?.currentPage ?? 1}
+          totalPages={findDocumentsData?.totalPages ?? 1}
+          onPaginationChange={onPaginationChange}
+        >
+          {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+        </DataTable>
+
+        {isFindDocumentsLoading && (
+          <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>
+    </div>
+  );
+};

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

@@ -1,28 +1,12 @@
-import { findDocuments } from '@documenso/lib/server-only/admin/get-all-documents';
-
-import { DocumentsDataTable } from './data-table';
-
-export type DocumentsPageProps = {
-  searchParams?: {
-    page?: string;
-    perPage?: string;
-  };
-};
-
-export default async function Documents({ searchParams = {} }: DocumentsPageProps) {
-  const page = Number(searchParams.page) || 1;
-  const perPage = Number(searchParams.perPage) || 20;
-
-  const results = await findDocuments({
-    page,
-    perPage,
-  });
+import { AdminDocumentResults } from './document-results';
 
+export default function AdminDocumentsPage() {
   return (
     <div>
       <h2 className="text-4xl font-semibold">Manage documents</h2>
+
       <div className="mt-8">
-        <DocumentsDataTable results={results} />
+        <AdminDocumentResults />
       </div>
     </div>
   );