fix: test

.devcontainer/on-create.sh

@@ -1,10 +1,13 @@
 #!/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 dev setup
-npm run dx
+# Run the migrations
+npm run prisma:migrate-dev

.env.example

@@ -13,10 +13,6 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
-NEXT_PRIVATE_OIDC_WELL_KNOWN=""
-NEXT_PRIVATE_OIDC_CLIENT_ID=""
-NEXT_PRIVATE_OIDC_CLIENT_SECRET=""
-
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
@@ -26,32 +22,16 @@ 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"
 
-# [[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=
+# [[E2E Tests]]
+E2E_TEST_AUTHENTICATE_USERNAME="Test User"
+E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 
 # [[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.
@@ -79,7 +59,7 @@ NEXT_PRIVATE_SMTP_APIKEY=
 # OPTIONAL: Defines whether to force the use of TLS.
 NEXT_PRIVATE_SMTP_SECURE=
 # REQUIRED: Defines the sender name to use for the from address.
-NEXT_PRIVATE_SMTP_FROM_NAME="Documenso"
+NEXT_PRIVATE_SMTP_FROM_NAME="No Reply @ Documenso"
 # REQUIRED: Defines the email address to use as the from address.
 NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@documenso.com"
 # OPTIONAL: The API key to use for Resend.com
@@ -101,7 +81,6 @@ 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.
@@ -111,11 +90,6 @@ 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/workflows/ci.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Cache Docker layers
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}

.github/workflows/codeql-analysis.yml

@@ -33,9 +33,9 @@ jobs:
       - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2

.github/workflows/e2e-tests.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Run Playwright tests
         run: npm run ci
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: test-results

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

@@ -27,7 +27,7 @@ jobs:
 
       - name: Check Assigned User's Issue Count
         id: parse-comment
-        uses: actions/github-script@v6
+        uses: actions/github-script@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/issue-labeler.yml

@@ -1,25 +0,0 @@
-name: Auto Label Assigned Issues
-
-on:
-  issues:
-    types: [assigned]
-
-jobs:
-  label-when-assigned:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Label issue
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            const issue = context.issue;
-            // To run only on issues and not on PR
-            if (github.context.payload.issue.pull_request === undefined) {
-              const labelResponse = await github.rest.issues.addLabels({
-                owner: issue.owner,
-                repo: issue.repo,
-                issue_number: issue.number,
-                labels: ['status: assigned']
-              });
-            }

.github/workflows/issue-opened.yml

@@ -17,5 +17,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              labels: ["status: triage"]
+              labels: ["needs triage"]
             })

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

@@ -2,14 +2,14 @@ name: 'PR Review Reminder'
 
 on:
   pull_request:
-    types: ['opened', 'ready_for_review']
+    types: ['opened', 'reopened', 'ready_for_review', 'review_requested']
 
 permissions:
   pull-requests: write
 
 jobs:
   checkPRs:
-    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'ready_for_review')
+    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'reopened' || 'ready_for_review' || 'review_requested')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/publish.yml

@@ -1,133 +0,0 @@
-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

.github/workflows/stale.yml

@@ -12,7 +12,7 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/stale@v5
+      - uses: actions/stale@v4
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-pr-stale: 90

.gitpod.yml

@@ -29,6 +29,16 @@ ports:
     visibility: private 
     onOpen: ignore
 
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: true
+
 vscode:
   extensions:
     - aaron-bond.better-comments
@@ -37,5 +47,9 @@ vscode:
     - esbenp.prettier-vscode
     - mikestead.dotenv
     - unifiedjs.vscode-mdx
+    - GitHub.copilot-chat
+    - GitHub.copilot-labs
+    - GitHub.copilot
     - GitHub.vscode-pull-request-github
     - Prisma.prisma
+    - VisualStudioExptTeam.vscodeintellicode

.vscode/settings.json

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

README.md

@@ -1,3 +1,5 @@
+> 🚨 It is Launch Week #2 - Day 1: We launches teams 🎉 https://documen.so/day1
+
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">
@@ -27,11 +29,20 @@
    <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 align="center">
-  <img src="https://github.com/documenso/documenso/assets/13398220/d96ed533-6f34-4a97-be9b-442bdb189c69" style="width: 80%;" />
+<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>
 
 ## About this project
@@ -82,7 +93,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
-- [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
+- [Node SignPDF](https://github.com/vbuch/node-signpdf) - Digital Signature
 - [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
@@ -198,16 +209,7 @@ If you're a visual learner and prefer to watch a video walkthrough of setting up
 
 ## Docker
 
-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.
+🚧 Docker containers and images are current in progress. We are actively working on bringing a simple Docker build and publish pipeline for Documenso.
 
 ## Self Hosting
 

SIGNING.md

@@ -17,8 +17,7 @@ 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` (If the path does not exist, it needs to be created)
+5. Place the certificate `/apps/web/resources/certificate.p12`
 
 ## Docker
 

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

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

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

@@ -1,117 +0,0 @@
----
-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/public-api.mdx

@@ -1,292 +0,0 @@
----
-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

@@ -1,56 +0,0 @@
----
-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/sunsetting-early-adopters.mdx

@@ -1,49 +0,0 @@
----
-title: Sunsetting the Early Adopters Plan
-description: We reached or Early Adopter cap and not transition to our regular pricing 🎉
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-06-12
-tags:
-  - Early Adopters
-  - Pricing 
-  - Open Startup
----
-
-<figure>
-  <MdxNextImage
-    src="/blog/sunset.jpg"
-    width="1260"
-    height="630"
-    alt="A beautiful sunset as a metaphor for the Early Adopter phase ending"
-  />
-
-  <figcaption className="text-center">
-    "Being early is, uh, good." -Unknown
-  </figcaption>
-</figure>
-
-> TLDR; The Early Adopters Plan ended, and we have a new pricing. If you are an Early Adopter, reach out for a Discord community badge 🏅
-
-# The End of the Beginning
-12 months, 13 releases, and 344 merged pull requests after announcing the Early Adopter plan in our first-ever launch week, and we hit the cap of 100. Documenso has changed and grown a lot since then. For us, this is a great milestone towards our broader mission of bringing open signing to the world since now we are joined by a community consisting of contributors and early customers all around the world. 
-
-# The New Plans
-Starting today, we are sunsetting the Early Adopter Plan in favor of our new, more nuanced pricing model. The Early Adopter plan will succeeded by the **Individual plan**, which is still priced at $30/mo. The Individual plans will still include unlimited signatures and recipients since this aligns with our core belief of empowering our users wherever possible. If you managed to grab an Early Adopter plan, reach out on X or Discord to receive a special community badge. Early Adopters are meant to get preferential treatment where possible.
-
-Previously soft-launched as part of Early Adopters, we are officially introducing the **Team Plan** to our pricing for customers requiring multi-user accounts. Priced at $50/ mo. for 5 users, this plan offers unlimited signature volume as well. Additional users can be added for $10/mo. as needed. We have carefully crafted the billing of teams to ensure that dynamic changes are accurately reflected at the end of each billing cycle, providing you with a fair-value pricing structure.
-
-Our **Free Plan** stays unchanged, offering coverage to casual users and an easy way to try out Documenso or start developing.
-
-Check out our [new pricing page here](https://documen.so/pricing). We also updated our [open page](https://documen.so/open) to reflect the end of Early Adopters. The metric now counts active subscriptions from Individuals and Teams.
-
-# API Access
-All plans include access to the API as per our philosophy, making Documenso an open platform, and allowing everyone to build on it, no matter how big or small. Besides the Free Plan's 5 signatures per month limit, the API does not have access restrictions. Even the free plan can keep using the API after using its signature volume for non-signing operations like reading, editing, and even creating documents. Since the individual plan technically allows for running a Fortune 500 company for $30/ mo., plan we are adding a fair use clause here: You are free to use the API "a lot" if you are a big organization trying to stay on the Individual Plan we will ask to have a word about upgrading (which might make sense anyway considering your requirements). Fair use excludes Early Adopters, which we consider limitless by any measure. If you need clarification on whether your case is covered under fair use, you can contact us on Discord or support@documenso.com. It's probably fine, though.
-
-We also have a lot in the pipeline, and we are excited to share everything with you soon. A Big Shoutout to all Early Adopters. We salute you, and you will receive the preferred treatment where possible.
-
-If you have any questions or comments, please reach out on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord).
-
-Best from Hamburg\
-Timur

apps/marketing/contentlayer.config.ts

@@ -12,7 +12,6 @@ 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,7 +2,6 @@
 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'}`];
 
@@ -18,15 +17,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
   path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );
 
-const FONT_NOTO_SANS_BYTES = fs.readFileSync(
-  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
-);
-
 /** @type {import('next').NextConfig} */
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -42,7 +36,6 @@ const config = {
   env: {
     NEXT_PUBLIC_PROJECT: 'marketing',
     FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
-    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {
@@ -101,4 +94,4 @@ const config = {
   },
 };
 
-module.exports = withAxiom(withContentlayer(config));
+module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -19,18 +19,13 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
-    "embla-carousel": "^8.1.3",
-    "embla-carousel-autoplay": "^8.1.3",
-    "embla-carousel-react": "^8.1.3",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "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",
@@ -41,7 +36,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/src/api/claim-plan/fetcher.ts

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

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

@@ -1,21 +1,25 @@
 import { ImageResponse } from 'next/og';
-import { NextResponse } from 'next/server';
+
+import { allBlogPosts } from 'contentlayer/generated';
 
 export const runtime = 'edge';
 
-const IMAGE_SIZE = {
+export const contentType = 'image/png';
+
+export const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
 
-export async function GET(_request: Request) {
-  const url = new URL(_request.url);
+type BlogPostOpenGraphImageProps = {
+  params: { post: string };
+};
 
-  const title = url.searchParams.get('title');
-  const author = url.searchParams.get('author');
+export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) {
+  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
 
-  if (!title || !author) {
-    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  if (!blogPost) {
+    return null;
   }
 
   // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
@@ -45,10 +49,10 @@ export async function GET(_request: Request) {
         <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">
-          {title}
+          {blogPost.title}
         </h1>
 
-        <p tw="font-normal">Written by {author}</p>
+        <p tw="font-normal">Written by {blogPost.authorName}</p>
       </div>
     ),
     {

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

@@ -7,8 +7,6 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-import { CallToAction } from '~/components/(marketing)/call-to-action';
-
 export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
@@ -20,23 +18,11 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
     };
   }
 
-  // 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()}`],
-    },
   };
 };
 
@@ -56,7 +42,6 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
   const MDXContent = useMDXComponent(post.body.code);
 
   return (
-    <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">
@@ -105,8 +90,5 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
         Back to all posts
       </Link>
     </article>
-
-      {post.cta && <CallToAction className="mt-8" utmSource={`blog_${params.post}`} />}
-    </div>
   );
 }

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

@@ -2,8 +2,10 @@
 
 import React, { useEffect, useState } from 'react';
 
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
+import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
 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';
@@ -36,8 +38,7 @@ 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', '/pricing'].includes(pathname),
+        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
       })}
     >
       <div
@@ -46,8 +47,16 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         })}
       >
         {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">
+          <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
+            <div className="absolute inset-0 -z-[1]">
+              <Image
+                src={launchWeekTwoImage}
+                className="h-full w-full object-cover"
+                alt="Launch Week 2"
+              />
+            </div>
+
+            <div className="text-background text-center text-sm text-white">
               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">

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

@@ -1,10 +1,11 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
+import { 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;
@@ -33,13 +34,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   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">
+    <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="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" />
@@ -55,7 +56,6 @@ 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,10 +1,11 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { HTMLAttributes, 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'];
@@ -47,12 +48,10 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   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">Cap Table</h3>
-        </div>
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
 
+      <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,10 +1,11 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
+import { 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>[];
@@ -13,17 +14,14 @@ 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={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={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
+      <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 type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 

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

@@ -1,56 +0,0 @@
-'use client';
-
-import { DateTime } from 'luxon';
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-import type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
-
-export type MonthlyCompletedDocumentsChartProps = {
-  className?: string;
-  data: GetCompletedDocumentsMonthlyResult;
-};
-
-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,6 +4,7 @@ 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;
@@ -13,27 +14,24 @@ export type MonthlyNewUsersChartProps = {
 export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartProps) => {
   const formattedData = [...data].reverse().map(({ month, count }) => {
     return {
-      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
       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">
+    <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="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,6 +4,7 @@ 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;
@@ -13,27 +14,24 @@ 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('LLLL'),
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
       count: Number(count),
     };
   });
 
   return (
-    <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">
+    <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="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,24 +2,19 @@ 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 { CallToAction } from '~/components/(marketing)/call-to-action';
+import { MetricCard } from '~/app/(marketing)/open/metric-card';
+import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
 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',
@@ -134,20 +129,17 @@ 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>
     <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>
@@ -166,7 +158,7 @@ export default async function OpenPage() {
         </p>
       </div>
 
-        <div className="my-12 grid grid-cols-12 gap-8">
+      <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"
@@ -193,21 +185,24 @@ export default async function OpenPage() {
         <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<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"
+          title="Github: Total Stars"
           label="Stars"
           className="col-span-12 lg:col-span-6"
         />
@@ -215,68 +210,42 @@ export default async function OpenPage() {
         <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="mergedPRs"
-            title="GitHub: Total Merged PRs"
+          title="Github: Total Merged PRs"
           label="Merged PRs"
-            chartHeight={400}
+          chartHeight={300}
           className="col-span-12 lg:col-span-6"
         />
 
         <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="forks"
-            title="GitHub: Total Forks"
+          title="Github: Total Forks"
           label="Forks"
-            chartHeight={400}
+          chartHeight={300}
           className="col-span-12 lg:col-span-6"
         />
 
         <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="openIssues"
-            title="GitHub: Total Open Issues"
+          title="Github: Total Open Issues"
           label="Open Issues"
-            chartHeight={400}
+          chartHeight={300}
           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="Total Customers"
-            label="Total Customers"
-            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>
+          <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">
-          This page is evolving as we learn what makes a great signing company. We'll update it when
-          we have more to share.
+            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>
-
-      <CallToAction className="mt-12" utmSource="open-page" />
+      </div>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { 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 type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

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

@@ -29,7 +29,7 @@ export function OpenPageTooltip() {
           </svg>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Customers with an Active Subscriptions.</p>
+          <p>Active Subscriptions.</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

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

@@ -1,56 +0,0 @@
-'use client';
-
-import { DateTime } from 'luxon';
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-import type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
-
-export type TotalSignedDocumentsChartProps = {
-  className?: string;
-  data: GetCompletedDocumentsMonthlyResult;
-};
-
-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

@@ -1,40 +0,0 @@
-'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,14 +2,13 @@
 
 import Link from 'next/link';
 
-import type { Variants } from 'framer-motion';
-import { motion } from 'framer-motion';
+import { Variants, 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 type { TOSSFriendsSchema } from './schema';
+import { TOSSFriendsSchema } from './schema';
 
 const ContainerVariants: Variants = {
   initial: {

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

@@ -9,7 +9,6 @@ import {
 } from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { Enterprise } from '~/components/(marketing)/enterprise';
 import { PricingTable } from '~/components/(marketing)/pricing-table';
 
 export const metadata: Metadata = {
@@ -43,10 +42,6 @@ export default function PricingPage() {
         <PricingTable />
       </div>
 
-      <div className="mt-12">
-        <Enterprise />
-      </div>
-
       <div className="mx-auto mt-36 max-w-2xl">
         <h2 className="text-center text-2xl font-semibold">
           None of these work for you? Try self-hosting!

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

@@ -8,7 +8,7 @@ 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 { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentDataType, Prisma } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -115,7 +115,7 @@ export const SinglePlayerClient = () => {
     }
 
     try {
-      const putFileData = await putPdfFile(uploadedFile.file);
+      const putFileData = await putFile(uploadedFile.file);
 
       const documentToken = await createSinglePlayerDocument({
         documentData: {
@@ -158,11 +158,9 @@ 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) => {
@@ -205,7 +203,7 @@ export const SinglePlayerClient = () => {
             target="_blank"
             className="hover:text-foreground/80 font-semibold transition-colors"
           >
-            early adopter plan
+            community plan
           </Link>{' '}
           for exclusive features, including the ability to collaborate with multiple signers.
         </p>
@@ -248,8 +246,6 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
-                  canGoBack={true}
-                  isDocumentPdfLoaded={true}
                 />
               </fieldset>
 

apps/marketing/src/app/layout.tsx

@@ -2,7 +2,6 @@ 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';
@@ -68,8 +67,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <PublicEnvScript />
       </head>
 
-      <AxiomWebVitals />
-
       <Suspense>
         <PostHogPageview />
       </Suspense>

apps/marketing/src/app/robots.ts

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

apps/marketing/src/app/sitemap.ts

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

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

@@ -1,31 +0,0 @@
-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

@@ -34,18 +34,17 @@ export const Callout = ({ starCount }: CalloutProps) => {
 
   return (
     <div className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-4">
-      <Link href="https://app.documenso.com/signup?utm_source=marketing-callout">
       <Button
         type="button"
         variant="outline"
         className="rounded-full bg-transparent backdrop-blur-sm"
+        onClick={onSignUpClick}
       >
-          Try our Free Plan
+        Claim Community 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">
-            No Credit Card required
+          $30/mo
         </span>
       </Button>
-      </Link>
 
       <Link
         href="https://github.com/documenso/documenso"
@@ -54,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)/carousel.tsx

@@ -1,261 +0,0 @@
-'use client';
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import Autoplay from 'embla-carousel-autoplay';
-import useEmblaCarousel from 'embla-carousel-react';
-import { useTheme } from 'next-themes';
-
-import { Card } from '@documenso/ui/primitives/card';
-import { Progress } from '@documenso/ui/primitives/progress';
-
-import { Slide } from './slide';
-
-const SLIDES = [
-  {
-    label: 'Signing Process',
-    type: 'video',
-    srcLight: 'https://github.com/documenso/design/raw/main/marketing/signing.webm',
-    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/signing.webm',
-  },
-  {
-    label: 'Teams',
-    type: 'video',
-    srcLight: 'https://github.com/documenso/design/raw/main/marketing/teams.webm',
-    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/teams.webm',
-  },
-  {
-    label: 'Zapier',
-    type: 'video',
-    srcLight: 'https://github.com/documenso/design/raw/main/marketing/zapier.webm',
-    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/zapier.webm',
-  },
-  {
-    label: 'Webhooks',
-    type: 'video',
-    srcLight: 'https://github.com/documenso/design/raw/main/marketing/webhooks.webm',
-    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/webhooks.webm',
-  },
-  {
-    label: 'API',
-    type: 'video',
-    srcLight: 'https://github.com/documenso/design/raw/main/marketing/api.webm',
-    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/api.webm',
-  },
-  {
-    label: 'Profile',
-    type: 'video',
-    srcLight: 'https://github.com/documenso/design/raw/main/marketing/profile_teaser.webm',
-    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/profile_teaser.webm',
-  },
-];
-
-export const Carousel = () => {
-  const slides = SLIDES;
-  const [_isPlaying, setIsPlaying] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [progress, setProgress] = useState(0);
-  const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
-  const [autoplayDelay, setAutoplayDelay] = useState<number[]>([]);
-  const { resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
-    Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 }),
-  ]);
-  const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel(
-    {
-      loop: true,
-      containScroll: 'keepSnaps',
-      dragFree: true,
-    },
-    [Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 })],
-  );
-
-  const onThumbClick = useCallback(
-    (index: number) => {
-      if (!emblaApi || !emblaThumbsApi) return;
-      emblaApi.scrollTo(index);
-    },
-    [emblaApi, emblaThumbsApi],
-  );
-
-  const onSelect = useCallback(() => {
-    if (!emblaApi || !emblaThumbsApi) return;
-    setSelectedIndex(emblaApi.selectedScrollSnap());
-    emblaThumbsApi.scrollTo(emblaApi.selectedScrollSnap());
-
-    resetProgress();
-    const autoplay = emblaApi.plugins()?.autoplay;
-
-    if (autoplay) {
-      autoplay.reset();
-    }
-  }, [emblaApi, emblaThumbsApi, setSelectedIndex]);
-
-  const resetProgress = useCallback(() => {
-    setProgress(0);
-  }, []);
-
-  useEffect(() => {
-    const setVideoDurations = async () => {
-      const durations = await Promise.all(
-        videoRefs.current.map(
-          async (video) =>
-            new Promise<number>((resolve) => {
-              if (video) {
-                video.onloadedmetadata = () => resolve(video.duration * 1000);
-              } else {
-                resolve(5000);
-              }
-            }),
-        ),
-      );
-
-      setAutoplayDelay(durations);
-    };
-
-    void setVideoDurations();
-  }, [slides, mounted, resolvedTheme]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const video = entry.target as HTMLVideoElement;
-            video
-              .play()
-              .catch((error) => console.log('Error attempting to play the video:', error));
-          } else {
-            const video = entry.target as HTMLVideoElement;
-            video.pause();
-          }
-        });
-      },
-      {
-        threshold: 0.5,
-      },
-    );
-
-    videoRefs.current.forEach((video) => {
-      if (video) {
-        observer.observe(video);
-      }
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [slides, mounted, resolvedTheme]);
-
-  useEffect(() => {
-    if (!emblaApi) return;
-    onSelect();
-
-    emblaApi.on('select', onSelect).on('reInit', onSelect);
-  }, [emblaApi, onSelect, mounted, resolvedTheme]);
-
-  useEffect(() => {
-    const autoplay = emblaApi?.plugins()?.autoplay;
-    if (!autoplay) return;
-
-    setIsPlaying(autoplay.isPlaying());
-    emblaApi
-      .on('autoplay:play', () => setIsPlaying(true))
-      .on('autoplay:stop', () => setIsPlaying(false))
-      .on('reInit', () => setIsPlaying(autoplay.isPlaying()));
-  }, [emblaApi, mounted, resolvedTheme]);
-
-  useEffect(() => {
-    if (autoplayDelay[selectedIndex] === undefined) return;
-
-    const updateInterval = 50;
-    const increment = 100 / (autoplayDelay[selectedIndex] / updateInterval);
-    let progressValue = 0;
-
-    const timer = setInterval(() => {
-      setProgress((prevProgress) => {
-        progressValue = prevProgress + increment;
-        if (progressValue >= 100) {
-          clearInterval(timer);
-          if (emblaApi) {
-            emblaApi.scrollNext();
-          }
-          return 100;
-        }
-        return progressValue;
-      });
-    }, updateInterval);
-
-    return () => clearInterval(timer);
-  }, [selectedIndex, autoplayDelay, emblaApi, mounted, resolvedTheme]);
-
-  useEffect(() => {
-    if (!emblaApi) return;
-
-    const resetCarousel = () => {
-      emblaApi.reInit();
-      emblaApi.scrollTo(0);
-    };
-
-    resetCarousel();
-  }, [emblaApi, autoplayDelay, mounted, resolvedTheme]);
-
-  // Ensure the component renders only after mounting to avoid theme issues
-  if (!mounted) return null;
-  return (
-    <>
-      <Card className="mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl" gradient>
-        <div className="overflow-hidden rounded-xl" ref={emblaRef}>
-          <div className="flex touch-pan-y rounded-xl">
-            {slides.map((slide, index) => (
-              <div className="min-w-[10rem] flex-none basis-full rounded-xl" key={index}>
-                {slide.type === 'video' && (
-                  <video
-                    key={`${resolvedTheme}-${index}`}
-                    ref={(el) => (videoRefs.current[index] = el)}
-                    muted
-                    loop
-                    className="h-auto w-full rounded-xl"
-                  >
-                    <source
-                      src={resolvedTheme === 'dark' ? slide.srcDark : slide.srcLight}
-                      type="video/webm"
-                    />
-                    Your browser does not support the video tag.
-                  </video>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="dark:bg-background absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white  p-1.5">
-          <span className="text-foreground dark:text-muted-foreground text-xs">
-            {selectedIndex + 1}/{slides.length}
-          </span>
-          <Progress value={progress} className="h-1" />
-        </div>
-      </Card>
-
-      <div className="mx-auto mt-12 max-w-4xl px-2">
-        <div className="mt-2 flex justify-between" ref={emblaThumbsRef}>
-          {slides.map((slide, index) => (
-            <Slide
-              key={index}
-              onClick={() => onThumbClick(index)}
-              selected={index === selectedIndex}
-              index={index}
-              label={slide.label}
-            />
-          ))}
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,36 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { usePlausible } from 'next-plausible';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export const Enterprise = () => {
-  const event = usePlausible();
-
-  return (
-    <div className="mx-auto mt-36 max-w-2xl">
-      <h2 className="text-center text-2xl font-semibold">
-        Enterprise Compliance, License or Technical Needs?
-      </h2>
-
-      <p className="text-muted-foreground mt-4 text-center leading-relaxed">
-        Our Enterprise License is great large organizations looking to switch to Documenso for all
-        their signing needs. It's availible for our cloud offering as well as self-hosted setups and
-        offer a wide range of compliance and Adminstration Features.
-      </p>
-
-      <div className="mt-4 flex justify-center">
-        <Link
-          href="https://dub.sh/enterprise"
-          target="_blank"
-          className="mt-6"
-          onClick={() => event('enterprise-contact')}
-        >
-          <Button className="rounded-full text-base">Contact Us</Button>
-        </Link>
-      </div>
-    </div>
-  );
-};

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

@@ -13,8 +13,6 @@ 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 = [
@@ -64,10 +62,6 @@ 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)/hero.tsx

@@ -14,7 +14,7 @@ import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-fl
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { Carousel } from './carousel';
+import { Widget } from './widget';
 
 export type HeroProps = {
   className?: string;
@@ -50,21 +50,6 @@ const HeroTitleVariants: Variants = {
   },
 };
 
-const HeroCarouselVariants: Variants = {
-  initial: {
-    opacity: 0,
-    y: 60,
-  },
-  animate: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      delay: 0.5,
-      duration: 0.8,
-    },
-  },
-};
-
 export const Hero = ({ className, ...props }: HeroProps) => {
   const event = usePlausible();
 
@@ -72,6 +57,23 @@ export const Hero = ({ className, ...props }: HeroProps) => {
 
   const heroMarketingCTA = getFlag('marketing_landing_hero_cta');
 
+  const onSignUpClick = () => {
+    const el = document.getElementById('email');
+
+    if (el) {
+      const { top } = el.getBoundingClientRect();
+
+      window.scrollTo({
+        top: top - 120,
+        behavior: 'smooth',
+      });
+
+      requestAnimationFrame(() => {
+        el.focus();
+      });
+    }
+  };
+
   return (
     <motion.div className={cn('relative', className)} {...props}>
       <div className="absolute -inset-24 -z-10">
@@ -94,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 md:text-[48px] lg:text-[64px]"
+          className="text-center text-4xl font-bold leading-tight tracking-tight lg:text-[64px]"
         >
           Document signing,
           <span className="block" /> finally open source.
@@ -106,22 +108,22 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           animate="animate"
           className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-4"
         >
-          <Link href="https://app.documenso.com/signup?utm_source=marketing-hero">
           <Button
             type="button"
             variant="outline"
             className="rounded-full bg-transparent backdrop-blur-sm"
+            onClick={onSignUpClick}
           >
-              Try our Free Plan
+            Claim Community 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">
-                No Credit Card required
+              $30/mo
             </span>
           </Button>
-          </Link>
+
           <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>
@@ -168,11 +170,73 @@ export const Hero = ({ className, ...props }: HeroProps) => {
 
         <motion.div
           className="mt-12"
-          variants={HeroCarouselVariants}
+          variants={{
+            initial: {
+              scale: 0.2,
+              opacity: 0,
+            },
+            animate: {
+              scale: 1,
+              opacity: 1,
+              transition: {
+                ease: 'easeInOut',
+                delay: 0.5,
+                duration: 0.8,
+              },
+            },
+          }}
           initial="initial"
           animate="animate"
         >
-          <Carousel />
+          <Widget className="mt-12">
+            <strong>Documenso Supporter Pledge</strong>
+            <p className="w-full max-w-[70ch]">
+              Our mission is to create an open signing infrastructure that empowers the world,
+              enabling businesses to embrace openness, cooperation, and transparency. We believe
+              that signing, as a fundamental act, should embody these values. By offering an
+              open-source signing solution, we aim to make document signing accessible, transparent,
+              and trustworthy.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              Through our platform, called Documenso, we strive to earn your trust by allowing
+              self-hosting and providing complete visibility into its inner workings. We value
+              inclusivity and foster an environment where diverse perspectives and contributions are
+              welcomed, even though we may not implement them all.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              At Documenso, we envision a web-enabled future for business and contracts, and we are
+              committed to being the leading provider of open signing infrastructure. By combining
+              exceptional product design with open-source principles, we aim to deliver a robust and
+              well-designed application that exceeds your expectations.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              We understand that exceptional products are born from exceptional communities, and we
+              invite you to join our open-source community. Your contributions, whether technical or
+              non-technical, will help shape the future of signing. Together, we can create a better
+              future for everyone.
+            </p>
+
+            <p className="w-full max-w-[70ch]">
+              Today we invite you to join us on this journey: By signing this mission statement you
+              signal your support of Documenso's mission{' '}
+              <span className="bg-primary text-black">
+                (in a non-legally binding, but heartfelt way)
+              </span>{' '}
+              and lock in the community plan for forever, including everything we build this year.
+            </p>
+
+            <div className="flex h-24 items-center">
+              <p className={cn('text-5xl [font-family:var(--font-caveat)]')}>Timur & Lucas</p>
+            </div>
+
+            <div>
+              <strong>Timur Ercan & Lucas Smith</strong>
+              <p className="mt-1">Co-Founders, Documenso</p>
+            </div>
+          </Widget>
         </motion.div>
       </div>
     </motion.div>

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

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

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

@@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <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">
+      <div className="flex items-center justify-center gap-x-6">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"
@@ -40,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'MONTHLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -58,12 +58,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           >
             Yearly
             <div className="bg-muted text-foreground block rounded-full px-2 py-0.5 text-xs">
-              Save $60 or $100
+              Save $60
             </div>
             {period === 'YEARLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -75,7 +75,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           data-plan="free"
           className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
         >
-          <p className="text-foreground text-4xl font-medium">Free</p>
+          <p className="text-foreground text-4xl font-medium">Free Plan</p>
           <p className="text-primary mt-2.5 text-xl font-medium">$0</p>
 
           <p className="text-foreground mt-4 max-w-[30ch] text-center">
@@ -102,10 +102,10 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
         </div>
 
         <div
-          data-plan="individual"
-          className="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]"
+          data-plan="community"
+          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">Individual</p>
+          <p className="text-foreground text-4xl font-medium">Early Adopters</p>
           <div className="text-primary mt-2.5 text-xl font-medium">
             <AnimatePresence mode="wait">
               {period === 'MONTHLY' && <motion.div layoutId="pricing">$30</motion.div>}
@@ -114,12 +114,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </div>
 
           <p className="text-foreground mt-4 max-w-[30ch] text-center">
-            Everything you need for a great signing experience.
+            For fast-growing companies that aim to scale across multiple teams.
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
             <Link
-              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-individual-plan`}
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-community`}
               target="_blank"
             >
               Signup Now
@@ -127,46 +127,51 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
-            <p className="text-foreground py-4">Unlimited Documents per Month</p>
-            <p className="text-foreground py-4">API Accesss</p>
-            <p className="text-foreground py-4">Email and Discord Support</p>
-            <p className="text-foreground py-4">Premium Profile Name</p>
+            <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-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>
           </div>
           <div className="flex-1" />
         </div>
 
         <div
-          data-plan="teams"
-          className="border-primary bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
+          data-plan="enterprise"
+          className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
         >
-          <p className="text-foreground text-4xl font-medium">Teams</p>
-          <div className="text-primary mt-2.5 text-xl font-medium">
-            <AnimatePresence mode="wait">
-              {period === 'MONTHLY' && <motion.div layoutId="pricingTeams">$50</motion.div>}
-              {period === 'YEARLY' && <motion.div layoutId="pricingTeams">$500</motion.div>}
-            </AnimatePresence>
-          </div>
+          <p className="text-foreground text-4xl font-medium">Enterprise</p>
+          <p className="text-primary mt-2.5 text-xl font-medium">Pricing on request</p>
 
           <p className="text-foreground mt-4 max-w-[30ch] text-center">
-            For companies looking to scale across multiple teams.
+            For large organizations that need extra flexibility and control.
           </p>
 
-          <Button className="mt-6 rounded-full text-base" asChild>
           <Link
-              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-teams-plan`}
+            href="https://dub.sh/enterprise"
             target="_blank"
+            className="mt-6"
+            onClick={() => event('enterprise-contact')}
           >
-              Signup Now
+            <Button className="rounded-full text-base">Contact Us</Button>
           </Link>
-          </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
-            <p className="text-foreground py-4">Unlimited Documents per Month</p>
-            <p className="text-foreground py-4">API Accesss</p>
-            <p className="text-foreground py-4">Email and Discord Support</p>
-            <p className="text-foreground py-4 font-medium">Team Inbox</p>
-            <p className="text-foreground py-4">5 Users Included</p>
-            <p className="text-foreground py-4">Add More Users for $10/ mo.</p>
+            <p className="text-foreground py-4 font-medium">Everything in Early Adopters, plus:</p>
+            <p className="text-foreground py-4">Custom Subdomain</p>
+            <p className="text-foreground py-4">Compliance Check</p>
+            <p className="text-foreground py-4">Guaranteed Uptime</p>
+            <p className="text-foreground py-4">Reporting & Analysis</p>
+            <p className="text-foreground py-4">24/7 Support</p>
           </div>
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { 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</strong>
+              <strong className="block">Connections (Soon).</strong>
               Create connections and automations with Zapier and more to integrate with your
               favorite tools.
             </p>
@@ -70,7 +70,7 @@ export const ShareConnectPaidWidgetBento = ({
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
               <strong className="block">Get paid (Soon).</strong>
-              Integrated payments with Stripe so you don’t have to worry about getting paid.
+              Integrated payments with stripe so you don’t have to worry about getting paid.
             </p>
 
             <div className="flex items-center justify-center p-8">

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

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { cn } from '@documenso/ui/lib/utils';
-
-type SlideProps = {
-  selected: boolean;
-  index: number;
-  onClick: () => void;
-  label: string;
-};
-
-export const Slide: React.FC<SlideProps> = (props) => {
-  const { selected, label, onClick } = props;
-
-  return (
-    <button
-      onClick={onClick}
-      type="button"
-      className={cn(
-        'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-4',
-        {
-          'border-primary text-foreground dark:text-muted-foreground border-b-2': selected,
-        },
-      )}
-    >
-      {label}
-    </button>
-  );
-};

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

@@ -1,21 +0,0 @@
-// 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

@@ -1,73 +0,0 @@
-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

@@ -0,0 +1,421 @@
+'use client';
+
+import type { HTMLAttributes, KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
+
+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';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { claimPlan } from '~/api/claim-plan/fetcher';
+
+import { STEP } from '../constants';
+import { FormErrorMessage } from '../form/form-error-message';
+
+const ZWidgetFormSchema = z
+  .object({
+    email: z.string().email({ message: 'Please enter a valid email address.' }),
+    name: z.string().trim().min(3, { message: 'Please enter a valid name.' }),
+  })
+  .and(
+    z.union([
+      z.object({
+        signatureDataUrl: z.string().min(1),
+        signatureText: z.null().or(z.string().max(0)),
+      }),
+      z.object({
+        signatureDataUrl: z.null().or(z.string().max(0)),
+        signatureText: z.string().trim().min(1),
+      }),
+    ]),
+  );
+
+export type TWidgetFormSchema = z.infer<typeof ZWidgetFormSchema>;
+
+type StepKeys = keyof typeof STEP;
+type StepValues = (typeof STEP)[StepKeys];
+
+export type WidgetProps = HTMLAttributes<HTMLDivElement>;
+
+export const Widget = ({ className, children, ...props }: WidgetProps) => {
+  const { toast } = useToast();
+  const event = usePlausible();
+
+  const [step, setStep] = useState<StepValues>(STEP.EMAIL);
+  const [showSigningDialog, setShowSigningDialog] = useState(false);
+  const [draftSignatureDataUrl, setDraftSignatureDataUrl] = useState<string | null>(null);
+
+  const {
+    control,
+    register,
+    handleSubmit,
+    setValue,
+    trigger,
+    watch,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TWidgetFormSchema>({
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+      name: '',
+      signatureDataUrl: null,
+      signatureText: '',
+    },
+    resolver: zodResolver(ZWidgetFormSchema),
+  });
+
+  const signatureDataUrl = watch('signatureDataUrl');
+  const signatureText = watch('signatureText');
+
+  const stepsRemaining = useMemo(() => {
+    if (step === STEP.NAME) {
+      return 2;
+    }
+
+    if (step === STEP.EMAIL) {
+      return 3;
+    }
+
+    return 1;
+  }, [step]);
+
+  const onNextStepClick = () => {
+    if (step === STEP.EMAIL) {
+      setStep(STEP.NAME);
+
+      setTimeout(() => {
+        document.querySelector<HTMLElement>('#name')?.focus();
+      }, 0);
+    }
+
+    if (step === STEP.NAME) {
+      setStep(STEP.SIGN);
+
+      setTimeout(() => {
+        document.querySelector<HTMLElement>('#signatureText')?.focus();
+      }, 0);
+    }
+  };
+
+  const onEnterPress = (callback: () => void) => {
+    return (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+
+        callback();
+      }
+    };
+  };
+
+  const onSignatureConfirmClick = () => {
+    setValue('signatureDataUrl', draftSignatureDataUrl);
+    setValue('signatureText', '');
+
+    void trigger('signatureDataUrl');
+    setShowSigningDialog(false);
+  };
+
+  const onFormSubmit = async ({
+    email,
+    name,
+    signatureDataUrl,
+    signatureText,
+  }: TWidgetFormSchema) => {
+    try {
+      const delay = new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
+
+      const planId = env('NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID');
+
+      if (!planId) {
+        throw new Error('No plan ID found.');
+      }
+
+      const claimPlanInput = signatureDataUrl
+        ? {
+            name,
+            email,
+            planId,
+            signatureDataUrl: signatureDataUrl,
+            signatureText: null,
+          }
+        : {
+            name,
+            email,
+            planId,
+            signatureDataUrl: null,
+            signatureText: signatureText ?? '',
+          };
+
+      const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);
+
+      event('claim-plan-widget');
+
+      window.location.href = result;
+    } catch (error) {
+      event('claim-plan-failed');
+
+      toast({
+        title: 'Something went wrong',
+        description: error instanceof Error ? error.message : 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <>
+      <Card
+        className={cn('mx-auto w-full max-w-4xl rounded-3xl before:rounded-3xl', className)}
+        gradient
+        {...props}
+      >
+        <div className="grid grid-cols-12 gap-y-8 overflow-hidden p-2 lg:gap-x-8">
+          <div className="text-muted-foreground col-span-12 flex flex-col gap-y-4 p-4 text-xs leading-relaxed lg:col-span-7">
+            {children}
+          </div>
+
+          <form
+            className="bg-foreground/5 col-span-12 flex flex-col rounded-2xl p-6 lg:col-span-5"
+            onSubmit={handleSubmit(onFormSubmit)}
+          >
+            <h3 className="text-xl font-semibold">Sign up to Community Plan</h3>
+            <p className="text-muted-foreground mt-2 text-xs">
+              with Timur Ercan & Lucas Smith from Documenso
+            </p>
+
+            <hr className="mb-6 mt-4" />
+
+            <AnimatePresence>
+              <motion.div key="email">
+                <label htmlFor="email" className="text-foreground font-medium ">
+                  What’s your email?
+                </label>
+
+                <Controller
+                  control={control}
+                  name="email"
+                  render={({ field }) => (
+                    <div className="relative mt-2">
+                      <Input
+                        id="email"
+                        type="email"
+                        placeholder="your@example.com"
+                        className="bg-background w-full pr-16"
+                        disabled={isSubmitting}
+                        onKeyDown={(e) =>
+                          field.value !== '' &&
+                          !errors.email?.message &&
+                          onEnterPress(onNextStepClick)(e)
+                        }
+                        {...field}
+                      />
+
+                      <div className="absolute inset-y-0 right-0 p-1.5">
+                        <Button
+                          type="button"
+                          className="bg-primary h-full w-14 rounded"
+                          disabled={!field.value || !!errors.email?.message}
+                          onClick={() => step === STEP.EMAIL && onNextStepClick()}
+                        >
+                          Next
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                />
+
+                <FormErrorMessage error={errors.email} className="mt-1" />
+              </motion.div>
+
+              {(step === STEP.NAME || step === STEP.SIGN) && (
+                <motion.div
+                  key="name"
+                  className="mt-4"
+                  animate={{
+                    opacity: 1,
+                    transform: 'translateX(0)',
+                  }}
+                  initial={{
+                    opacity: 0,
+                    transform: 'translateX(-25%)',
+                  }}
+                  exit={{
+                    opacity: 0,
+                    transform: 'translateX(25%)',
+                  }}
+                >
+                  <label htmlFor="name" className="text-foreground font-medium ">
+                    And your name?
+                  </label>
+
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <div className="relative mt-2">
+                        <Input
+                          id="name"
+                          type="text"
+                          placeholder=""
+                          className="bg-background w-full pr-16"
+                          disabled={isSubmitting}
+                          onKeyDown={(e) =>
+                            field.value !== '' &&
+                            !errors.name?.message &&
+                            onEnterPress(onNextStepClick)(e)
+                          }
+                          {...field}
+                        />
+
+                        <div className="absolute inset-y-0 right-0 p-1.5">
+                          <Button
+                            type="button"
+                            className="bg-primary h-full w-14 rounded"
+                            disabled={!field.value || !!errors.name?.message}
+                            onClick={() => onNextStepClick()}
+                          >
+                            Next
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  />
+
+                  <FormErrorMessage error={errors.name} className="mt-1" />
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <div className="mt-12 flex-1" />
+
+            <div className="flex items-center justify-between">
+              <p className="text-muted-foreground text-xs">
+                {isValid ? 'Ready for Signing' : `${stepsRemaining} step(s) until signed`}
+              </p>
+
+              <p className="text-muted-foreground block text-xs md:hidden">Minimise contract</p>
+            </div>
+
+            <div className="bg-background relative mt-2.5 h-[2px] w-full">
+              <div
+                className={cn('bg-primary/60 absolute inset-y-0 left-0 duration-200', {
+                  'w-1/3': stepsRemaining === 3,
+                  'w-2/3': stepsRemaining === 2,
+                  'w-11/12': stepsRemaining === 1,
+                  'w-full': isValid,
+                })}
+              />
+            </div>
+
+            <Card id="signature" className="mt-4" degrees={-140} gradient>
+              <CardContent
+                role="button"
+                className="relative cursor-pointer pt-6"
+                onClick={() => setShowSigningDialog(true)}
+              >
+                <div className="flex h-28 items-center justify-center pb-6">
+                  {!signatureText && signatureDataUrl && (
+                    <img
+                      src={signatureDataUrl}
+                      alt="user signature"
+                      className="h-full dark:invert"
+                    />
+                  )}
+
+                  {signatureText && (
+                    <p
+                      className={cn(
+                        'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
+                      )}
+                    >
+                      {signatureText}
+                    </p>
+                  )}
+                </div>
+
+                <div
+                  className="absolute inset-x-0 bottom-0 flex cursor-auto items-center justify-between px-4 pb-2"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Input
+                    id="signatureText"
+                    className="text-foreground placeholder:text-muted-foreground border-none p-0 text-sm focus-visible:ring-0"
+                    placeholder="Draw or type name here"
+                    disabled={isSubmitting}
+                    {...register('signatureText', {
+                      onChange: (e) => {
+                        if (e.target.value !== '') {
+                          setValue('signatureDataUrl', null);
+                        }
+                      },
+                    })}
+                  />
+
+                  <Button
+                    type="submit"
+                    className="disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted h-8"
+                    disabled={!isValid || isSubmitting}
+                  >
+                    {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                    Sign
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </form>
+        </div>
+      </Card>
+
+      <Dialog open={showSigningDialog} onOpenChange={setShowSigningDialog}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>Add your signature</DialogTitle>
+          </DialogHeader>
+
+          <DialogDescription>
+            By signing you signal your support of Documenso's mission in a <br></br>
+            <strong>non-legally binding, but heartfelt way</strong>. <br></br>
+            <br></br>You also unlock the option to purchase the early supporter plan including
+            everything we build this year for fixed price.
+          </DialogDescription>
+
+          <SignaturePad
+            disabled={isSubmitting}
+            className="aspect-video w-full rounded-md border"
+            defaultValue={signatureDataUrl || ''}
+            onChange={setDraftSignatureDataUrl}
+          />
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setShowSigningDialog(false)}>
+              Cancel
+            </Button>
+
+            <Button onClick={() => onSignatureConfirmClick()}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

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

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

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

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

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

@@ -13,7 +13,6 @@ import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentDataType,
-  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -105,7 +104,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const document = await prisma.document.create({
         data: {
-          source: DocumentSource.DOCUMENT,
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,

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

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

apps/web/next.config.js

@@ -2,7 +2,6 @@
 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'}`];
 
@@ -18,16 +17,11 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
   path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );
 
-const FONT_NOTO_SANS_BYTES = fs.readFileSync(
-  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
-);
-
 /** @type {import('next').NextConfig} */
 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',
     },
@@ -46,7 +40,6 @@ const config = {
     APP_VERSION: version,
     NEXT_PUBLIC_PROJECT: 'web',
     FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
-    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {
@@ -97,4 +90,4 @@ const config = {
   },
 };
 
-module.exports = withAxiom(config);
+module.exports = config;

apps/web/package.json

@@ -19,25 +19,20 @@
     "@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",
-    "input-otp": "^1.2.4",
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "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",
@@ -49,23 +44,20 @@
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
     "remeda": "^1.27.1",
-    "sharp": "^0.33.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",
-    "typescript": "5.2.2"
+    "@types/ua-parser-js": "^0.7.39"
   },
   "overrides": {
     "next-auth": {

apps/web/process-env.d.ts

@@ -12,9 +12,5 @@ declare namespace NodeJS {
 
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
-
-    NEXT_PRIVATE_OIDC_WELL_KNOWN: string;
-    NEXT_PRIVATE_OIDC_CLIENT_ID: string;
-    NEXT_PRIVATE_OIDC_CLIENT_SECRET: string;
   }
 }

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

@@ -2,8 +2,7 @@
 
 import Link from 'next/link';
 
-import type { Recipient } from '@documenso/prisma/client';
-import { type Document, SigningStatus } from '@documenso/prisma/client';
+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';
@@ -18,10 +17,9 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type AdminActionsProps = {
   className?: string;
   document: Document;
-  recipients: Recipient[];
 };
 
-export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
+export const AdminActions = ({ className, document }: AdminActionsProps) => {
   const { toast } = useToast();
 
   const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
@@ -49,9 +47,7 @@ export const AdminActions = ({ className, document, recipients }: AdminActionsPr
             <Button
               variant="outline"
               loading={isResealDocumentLoading}
-              disabled={recipients.some(
-                (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
-              )}
+              disabled={document.status !== DocumentStatus.COMPLETED}
               onClick={() => resealDocument({ id: document.id })}
             >
               Reseal document

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

@@ -14,7 +14,6 @@ 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: {
@@ -53,7 +52,7 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
       <h2 className="text-lg font-semibold">Admin Actions</h2>
 
-      <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
+      <AdminActions className="mt-2" document={document} />
 
       <hr className="my-4" />
       <h2 className="text-lg font-semibold">Recipients</h2>
@@ -82,10 +81,6 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
           ))}
         </Accordion>
       </div>
-
-      <hr className="my-4" />
-
-      {document && <SuperDeleteDocumentDialog document={document} />}
     </div>
   );
 }

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

@@ -1,130 +0,0 @@
-'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/users/data-table-users.tsx

@@ -58,7 +58,6 @@ export const UsersDataTable = ({
         perPage,
       });
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSearchString]);
 
   const onPaginationChange = (page: number, perPage: number) => {

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

@@ -19,7 +19,7 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
 
   const [{ users, totalPages }, individualPrices] = await Promise.all([
     search(searchString, page, perPage),
-    getPricesByPlan([STRIPE_PLAN_TYPE.REGULAR, STRIPE_PLAN_TYPE.COMMUNITY]).catch(() => []),
+    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY).catch(() => []),
   ]);
 
   const individualPriceIds = individualPrices.map((price) => price.id);

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

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

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

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

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

@@ -1,25 +1,29 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import {
-  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-  SKIP_QUERY_BATCH_META,
-} from '@documenso/lib/constants/trpc';
-import type { DocumentWithDetails } from '@documenso/prisma/types/document';
+  type DocumentData,
+  type DocumentMeta,
+  DocumentStatus,
+  type Field,
+  type Recipient,
+  type User,
+} from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
 import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
-import { AddSettingsFormPartial } from '@documenso/ui/primitives/document-flow/add-settings';
-import type { TAddSettingsFormSchema } from '@documenso/ui/primitives/document-flow/add-settings.types';
 import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/add-signers';
 import type { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
 import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/add-subject';
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
+import { AddTitleFormPartial } from '@documenso/ui/primitives/document-flow/add-title';
+import type { TAddTitleFormSchema } from '@documenso/ui/primitives/document-flow/add-title.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -30,19 +34,27 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditDocumentFormProps = {
   className?: string;
-  initialDocument: DocumentWithDetails;
+  user: User;
+  document: DocumentWithData;
+  recipients: Recipient[];
+  documentMeta: DocumentMeta | null;
+  fields: Field[];
+  documentData: DocumentData;
   documentRootPath: string;
-  isDocumentEnterprise: boolean;
 };
 
-type EditDocumentStep = 'settings' | 'signers' | 'fields' | 'subject';
-const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields', 'subject'];
+type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
+const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'subject'];
 
 export const EditDocumentForm = ({
   className,
-  initialDocument,
+  document,
+  recipients,
+  fields,
+  documentMeta,
+  user: _user,
+  documentData,
   documentRootPath,
-  isDocumentEnterprise,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
 
@@ -50,83 +62,17 @@ export const EditDocumentForm = ({
   const searchParams = useSearchParams();
   const team = useOptionalCurrentTeam();
 
-  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
-
-  const utils = trpc.useUtils();
-
-  const { data: document, refetch: refetchDocument } =
-    trpc.document.getDocumentWithDetailsById.useQuery(
-      {
-        id: initialDocument.id,
-        teamId: team?.id,
-      },
-      {
-        initialData: initialDocument,
-        ...SKIP_QUERY_BATCH_META,
-      },
-    );
-
-  const { Recipient: recipients, Field: fields } = document;
-
-  const { mutateAsync: setSettingsForDocument } = trpc.document.setSettingsForDocument.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
-      );
-    },
-  });
-
-  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newFields) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), Field: newFields }),
-      );
-    },
-  });
-
-  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newRecipients) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), Recipient: newRecipients }),
-      );
-    },
-  });
-
-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
-    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    onSuccess: (newData) => {
-      utils.document.getDocumentWithDetailsById.setData(
-        {
-          id: initialDocument.id,
-          teamId: team?.id,
-        },
-        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
-      );
-    },
-  });
-
+  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
+  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
+  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
   const { mutateAsync: setPasswordForDocument } =
     trpc.document.setPasswordForDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
-    settings: {
-      title: 'General',
-      description: 'Configure general settings for the document.',
+    title: {
+      title: 'Add Title',
+      description: 'Add the title to the document.',
       stepIndex: 1,
     },
     signers: {
@@ -150,7 +96,8 @@ export const EditDocumentForm = ({
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const searchParamStep = searchParams?.get('step') as EditDocumentStep | undefined;
 
-    let initialStep: EditDocumentStep = 'settings';
+    let initialStep: EditDocumentStep =
+      document.status === DocumentStatus.DRAFT ? 'title' : 'signers';
 
     if (
       searchParamStep &&
@@ -163,26 +110,15 @@ export const EditDocumentForm = ({
     return initialStep;
   });
 
-  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
+  const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
     try {
-      const { timezone, dateFormat, redirectUrl } = data.meta;
-
-      await setSettingsForDocument({
+      // Custom invocation server action
+      await addTitle({
         documentId: document.id,
         teamId: team?.id,
-        data: {
         title: data.title,
-          globalAccessAuth: data.globalAccessAuth ?? null,
-          globalActionAuth: data.globalActionAuth ?? null,
-        },
-        meta: {
-          timezone,
-          dateFormat,
-          redirectUrl,
-        },
       });
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
 
       setStep('signers');
@@ -191,7 +127,7 @@ export const EditDocumentForm = ({
 
       toast({
         title: 'Error',
-        description: 'An error occurred while updating the document settings.',
+        description: 'An error occurred while updating title.',
         variant: 'destructive',
       });
     }
@@ -199,19 +135,14 @@ export const EditDocumentForm = ({
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
+      // Custom invocation server action
       await addSigners({
         documentId: document.id,
         teamId: team?.id,
-        signers: data.signers.map((signer) => ({
-          ...signer,
-          // Explicitly set to null to indicate we want to remove auth if required.
-          actionAuth: signer.actionAuth || null,
-        })),
+        signers: data.signers,
       });
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
-
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -226,14 +157,13 @@ export const EditDocumentForm = ({
 
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
+      // Custom invocation server action
       await addFields({
         documentId: document.id,
         fields: data.fields,
       });
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
-
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -247,7 +177,7 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message } = data.meta;
+    const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
 
     try {
       await sendDocument({
@@ -256,6 +186,9 @@ export const EditDocumentForm = ({
         meta: {
           subject,
           message,
+          dateFormat,
+          timezone,
+          redirectUrl,
         },
       });
 
@@ -286,15 +219,6 @@ export const EditDocumentForm = ({
 
   const currentDocumentFlow = documentFlow[step];
 
-  /**
-   * Refresh the data in the background when steps change.
-   */
-  useEffect(() => {
-    void refetchDocument();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [step]);
-
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -303,12 +227,11 @@ export const EditDocumentForm = ({
       >
         <CardContent className="p-2">
           <LazyPDFViewer
-            key={document.documentData.id}
-            documentData={document.documentData}
+            key={documentData.id}
+            documentData={documentData}
             document={document}
-            password={document.documentMeta?.password}
+            password={documentMeta?.password}
             onPasswordSubmit={onPasswordSubmit}
-            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>
       </Card>
@@ -322,36 +245,30 @@ export const EditDocumentForm = ({
             currentStep={currentDocumentFlow.stepIndex}
             setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
           >
-            <AddSettingsFormPartial
+            <AddTitleFormPartial
               key={recipients.length}
-              documentFlow={documentFlow.settings}
+              documentFlow={documentFlow.title}
               document={document}
               recipients={recipients}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
-              onSubmit={onAddSettingsFormSubmit}
+              onSubmit={onAddTitleFormSubmit}
             />
 
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
+              document={document}
               recipients={recipients}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
-
             <AddFieldsFormPartial
               key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
-
             <AddSubjectFormPartial
               key={recipients.length}
               documentFlow={documentFlow.subject}
@@ -359,7 +276,6 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
-              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>
         </DocumentFlowFormContainer>

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

@@ -3,10 +3,11 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
-import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
@@ -36,13 +37,13 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
   const { user } = await getRequiredServerComponentSession();
 
-  const document = await getDocumentWithDetailsById({
+  const document = await getDocumentById({
     id: documentId,
     userId: user.id,
     teamId: team?.id,
   }).catch(() => null);
 
-  if (!document) {
+  if (!document || !document.documentData) {
     redirect(documentRootPath);
   }
 
@@ -50,7 +51,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     redirect(`${documentRootPath}/${documentId}`);
   }
 
-  const { documentMeta, Recipient: recipients } = document;
+  const { documentData, documentMeta } = document;
 
   if (documentMeta?.password) {
     const key = DOCUMENSO_ENCRYPTION_KEY;
@@ -69,10 +70,17 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     documentMeta.password = securePassword;
   }
 
-  const isDocumentEnterprise = await isUserEnterprise({
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
       userId: user.id,
       teamId: team?.id,
-  });
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+  ]);
 
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
@@ -92,11 +100,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip
-              recipients={recipients}
-              documentStatus={document.status}
-              position="bottom"
-            >
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
               <span>{recipients.length} Recipient(s)</span>
             </StackAvatarsWithTooltip>
           </div>
@@ -104,10 +108,14 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
       </div>
 
       <EditDocumentForm
-        className="mt-6"
-        initialDocument={document}
+        className="mt-8"
+        document={document}
+        user={user}
+        documentMeta={documentMeta}
+        recipients={recipients}
+        fields={fields}
+        documentData={documentData}
         documentRootPath={documentRootPath}
-        isDocumentEnterprise={isDocumentEnterprise}
       />
     </div>
   );

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

@@ -2,8 +2,6 @@ import Link from 'next/link';
 
 import { ChevronLeft, Loader } from 'lucide-react';
 
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-
 export default function Loading() {
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
@@ -15,12 +13,7 @@ export default function Loading() {
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
-
-      <div className="flex h-10 items-center">
-        <Skeleton className="my-6 h-4 w-24 rounded-2xl" />
-      </div>
-
-      <div className="mt-4 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
+      <div className="mt-8 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
         <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
           <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />

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

@@ -1,25 +1,19 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft } from 'lucide-react';
-import { DateTime } from 'luxon';
+import { ChevronLeft, DownloadIcon } from 'lucide-react';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Recipient, Team } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
 import { Card } from '@documenso/ui/primitives/card';
 
-import {
-  DocumentStatus as DocumentStatusComponent,
-  FRIENDLY_STATUS_MAP,
-} from '~/components/formatter/document-status';
+import { FRIENDLY_STATUS_MAP } from '~/components/formatter/document-status';
 
 import { DocumentLogsDataTable } from './document-logs-data-table';
-import { DownloadAuditLogButton } from './download-audit-log-button';
-import { DownloadCertificateButton } from './download-certificate-button';
 
 export type DocumentLogsPageViewProps = {
   params: {
@@ -29,8 +23,6 @@ export type DocumentLogsPageViewProps = {
 };
 
 export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
-  const locale = getLocale();
-
   const { id } = params;
 
   const documentId = Number(id);
@@ -75,21 +67,15 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     },
     {
       description: 'Created by',
-      value: document.User.name
-        ? `${document.User.name} (${document.User.email})`
-        : document.User.email,
+      value: document.User.name ?? document.User.email,
     },
     {
       description: 'Date created',
-      value: DateTime.fromJSDate(document.createdAt)
-        .setLocale(locale)
-        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+      value: document.createdAt.toISOString(),
     },
     {
       description: 'Last updated',
-      value: DateTime.fromJSDate(document.updatedAt)
-        .setLocale(locale)
-        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+      value: document.updatedAt.toISOString(),
     },
     {
       description: 'Time zone',
@@ -104,7 +90,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
       text = `${recipient.name} (${recipient.email})`;
     }
 
-    return `[${recipient.role}] ${text}`;
+    return `${text} - ${recipient.role}`;
   };
 
   return (
@@ -118,28 +104,20 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
       </Link>
 
       <div className="flex flex-col justify-between sm:flex-row">
-        <div>
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
           {document.title}
         </h1>
 
-          <div className="mt-2.5 flex items-center gap-x-6">
-            <DocumentStatusComponent
-              inheritColor
-              status={document.status}
-              className="text-muted-foreground"
-            />
-          </div>
-        </div>
-
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-          <DownloadCertificateButton
-            className="mr-2"
-            documentId={document.id}
-            documentStatus={document.status}
-          />
+          <Button variant="outline" className="mr-2 w-full sm:w-auto">
+            <DownloadIcon className="mr-1.5 h-4 w-4" />
+            Download certificate
+          </Button>
 
-          <DownloadAuditLogButton documentId={document.id} />
+          <Button className="w-full sm:w-auto">
+            <DownloadIcon className="mr-1.5 h-4 w-4" />
+            Download PDF
+          </Button>
         </div>
       </div>
 

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

@@ -1,74 +0,0 @@
-'use client';
-
-import { DownloadIcon } from 'lucide-react';
-
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type DownloadAuditLogButtonProps = {
-  className?: string;
-  documentId: number;
-};
-
-export const DownloadAuditLogButton = ({ className, documentId }: DownloadAuditLogButtonProps) => {
-  const { toast } = useToast();
-
-  const { mutateAsync: downloadAuditLogs, isLoading } =
-    trpc.document.downloadAuditLogs.useMutation();
-
-  const onDownloadAuditLogsClick = async () => {
-    try {
-      const { url } = await downloadAuditLogs({ documentId });
-
-      const iframe = Object.assign(document.createElement('iframe'), {
-        src: url,
-      });
-
-      Object.assign(iframe.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '0',
-        height: '0',
-      });
-
-      const onLoaded = () => {
-        if (iframe.contentDocument?.readyState === 'complete') {
-          iframe.contentWindow?.print();
-
-          iframe.contentWindow?.addEventListener('afterprint', () => {
-            document.body.removeChild(iframe);
-          });
-        }
-      };
-
-      // When the iframe has loaded, print the iframe and remove it from the dom
-      iframe.addEventListener('load', onLoaded);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
-    } catch (error) {
-      console.error(error);
-
-      toast({
-        title: 'Something went wrong',
-        description: 'Sorry, we were unable to download the audit logs. Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Button
-      className={cn('w-full sm:w-auto', className)}
-      loading={isLoading}
-      onClick={() => void onDownloadAuditLogsClick()}
-    >
-      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Audit Logs
-    </Button>
-  );
-};

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

@@ -1,82 +0,0 @@
-'use client';
-
-import { DownloadIcon } from 'lucide-react';
-
-import { DocumentStatus } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type DownloadCertificateButtonProps = {
-  className?: string;
-  documentId: number;
-  documentStatus: DocumentStatus;
-};
-
-export const DownloadCertificateButton = ({
-  className,
-  documentId,
-  documentStatus,
-}: DownloadCertificateButtonProps) => {
-  const { toast } = useToast();
-
-  const { mutateAsync: downloadCertificate, isLoading } =
-    trpc.document.downloadCertificate.useMutation();
-
-  const onDownloadCertificatesClick = async () => {
-    try {
-      const { url } = await downloadCertificate({ documentId });
-
-      const iframe = Object.assign(document.createElement('iframe'), {
-        src: url,
-      });
-
-      Object.assign(iframe.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '0',
-        height: '0',
-      });
-
-      const onLoaded = () => {
-        if (iframe.contentDocument?.readyState === 'complete') {
-          iframe.contentWindow?.print();
-
-          iframe.contentWindow?.addEventListener('afterprint', () => {
-            document.body.removeChild(iframe);
-          });
-        }
-      };
-
-      // When the iframe has loaded, print the iframe and remove it from the dom
-      iframe.addEventListener('load', onLoaded);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
-    } catch (error) {
-      console.error(error);
-
-      toast({
-        title: 'Something went wrong',
-        description: 'Sorry, we were unable to download the certificate. Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Button
-      className={cn('w-full sm:w-auto', className)}
-      loading={isLoading}
-      variant="outline"
-      disabled={documentStatus !== DocumentStatus.COMPLETED}
-      onClick={() => void onDownloadCertificatesClick()}
-    >
-      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Certificate
-    </Button>
-  );
-};

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

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

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

@@ -3,7 +3,6 @@
 import { useTransition } from 'react';
 
 import { Loader } from 'lucide-react';
-import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
@@ -30,7 +29,7 @@ export type DocumentsDataTableProps = {
     }
   >;
   showSenderColumn?: boolean;
-  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
+  team?: Pick<Team, 'id' | 'url'>;
 };
 
 export const DocumentsDataTable = ({
@@ -63,12 +62,7 @@ export const DocumentsDataTable = ({
           {
             header: 'Created',
             accessorKey: 'createdAt',
-            cell: ({ row }) => (
-              <LocaleDate
-                date={row.original.createdAt}
-                format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
-              />
-            ),
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
           },
           {
             header: 'Title',
@@ -82,18 +76,14 @@ export const DocumentsDataTable = ({
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => (
-              <StackAvatarsWithTooltip
-                recipients={row.original.Recipient}
-                documentStatus={row.original.status}
-              />
-            ),
+            cell: ({ row }) => {
+              return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
+            },
           },
           {
             header: 'Status',
             accessorKey: 'status',
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
-            size: 140,
           },
           {
             header: 'Actions',

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from 'react';
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
@@ -10,9 +11,8 @@ import { useSession } from 'next-auth/react';
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
-import { AppError } from '@documenso/lib/errors/app-error';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@@ -58,7 +58,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
     try {
       setIsLoading(true);
 
-      const { type, data } = await putPdfFile(file);
+      const { type, data } = await putFile(file);
 
       const { id: documentDataId } = await createDocumentData({
         type,
@@ -84,21 +84,13 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
       });
 
       router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
-    } catch (err) {
-      const error = AppError.parseError(err);
+    } catch (error) {
+      console.error(error);
 
-      console.error(err);
-
-      if (error.code === 'INVALID_DOCUMENT_FILE') {
-        toast({
-          title: 'Invalid file',
-          description: 'You cannot upload encrypted PDFs',
-          variant: 'destructive',
-        });
-      } else if (err instanceof TRPCClientError) {
+      if (error instanceof TRPCClientError) {
         toast({
           title: 'Error',
-          description: err.message,
+          description: error.message,
           variant: 'destructive',
         });
       } else {
@@ -147,6 +139,27 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
           <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
         </div>
       )}
+
+      {team?.id === undefined && remaining.documents === 0 && (
+        <div className="bg-background/60 absolute inset-0 flex items-center justify-center rounded-lg backdrop-blur-sm">
+          <div className="text-center">
+            <h2 className="text-muted-foreground/80 text-xl font-semibold">
+              You have reached your document limit.
+            </h2>
+
+            <p className="text-muted-foreground/60 mt-2 text-sm">
+              You can upload up to {quota.documents} documents per month on your current plan.
+            </p>
+
+            <Link
+              className="text-primary hover:text-primary/80 mt-6 block font-medium"
+              href="/settings/billing"
+            >
+              Upgrade your account to upload more documents.
+            </Link>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -39,7 +39,7 @@ export default async function BillingSettingsPage() {
 
   const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
     getSubscriptionsByUserId({ userId: user.id }),
-    getPricesByInterval({ plan: STRIPE_PLAN_TYPE.REGULAR }),
+    getPricesByInterval({ plan: STRIPE_PLAN_TYPE.COMMUNITY }),
     getPrimaryAccountPlanPrices(),
   ]);
 

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useState } from 'react';
-
 import { signOut } from 'next-auth/react';
 
 import type { User } from '@documenso/prisma/client';
@@ -18,8 +16,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DeleteAccountDialogProps = {
@@ -32,8 +28,6 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
 
   const hasTwoFactorAuthentication = user.twoFactorEnabled;
 
-  const [enteredEmail, setEnteredEmail] = useState<string>('');
-
   const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
     trpc.profile.deleteAccount.useMutation();
 
@@ -82,11 +76,10 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
         </div>
 
         <div className="flex-shrink-0">
-          <Dialog onOpenChange={() => setEnteredEmail('')}>
+          <Dialog>
             <DialogTrigger asChild>
               <Button variant="destructive">Delete Account</Button>
             </DialogTrigger>
-
             <DialogContent>
               <DialogHeader className="space-y-4">
                 <DialogTitle>Delete Account</DialogTitle>
@@ -112,31 +105,14 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
                 </DialogDescription>
               </DialogHeader>
 
-              {!hasTwoFactorAuthentication && (
-                <div className="mt-4">
-                  <Label>
-                    Please type{' '}
-                    <span className="text-muted-foreground font-semibold">{user.email}</span> to
-                    confirm.
-                  </Label>
-
-                  <Input
-                    type="text"
-                    className="mt-2"
-                    aria-label="Confirm Email"
-                    value={enteredEmail}
-                    onChange={(e) => setEnteredEmail(e.target.value)}
-                  />
-                </div>
-              )}
               <DialogFooter>
                 <Button
                   onClick={onDeleteAccount}
                   loading={isDeletingAccount}
                   variant="destructive"
-                  disabled={hasTwoFactorAuthentication || enteredEmail !== user.email}
+                  disabled={hasTwoFactorAuthentication}
                 >
-                  {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'}
+                  {isDeletingAccount ? 'Deleting account...' : 'Delete Account'}
                 </Button>
               </DialogFooter>
             </DialogContent>

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

@@ -15,14 +15,15 @@ export default function SettingsSecurityActivityPage() {
       <SettingsHeader
         title="Security activity"
         subtitle="View all recent security activity related to your account."
-        hideDivider={true}
       >
+        <div>
           <ActivityPageBackButton />
+        </div>
       </SettingsHeader>
 
-      <div className="mt-4">
+      <hr className="my-4" />
+
       <UserSecurityActivityDataTable />
     </div>
-    </div>
   );
 }

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

@@ -1,15 +1,14 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
+import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-authenticator-app-dialog';
-import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
-import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
+import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
+import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
 import { PasswordForm } from '~/components/forms/password';
 
 export const metadata: Metadata = {
@@ -19,8 +18,6 @@ export const metadata: Metadata = {
 export default async function SecuritySettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
-  const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
-
   return (
     <div>
       <SettingsHeader
@@ -28,13 +25,11 @@ export default async function SecuritySettingsPage() {
         subtitle="Here you can manage your password and security settings."
       />
 
-      {user.identityProvider === 'DOCUMENSO' && (
-        <>
+      {user.identityProvider === 'DOCUMENSO' ? (
+        <div>
           <PasswordForm user={user} />
 
           <hr className="border-border/50 mt-6" />
-        </>
-      )}
 
           <Alert
             className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
@@ -44,18 +39,12 @@ export default async function SecuritySettingsPage() {
               <AlertTitle>Two factor authentication</AlertTitle>
 
               <AlertDescription className="mr-4">
-            Add an authenticator to serve as a secondary authentication method{' '}
-            {user.identityProvider === 'DOCUMENSO'
-              ? 'when signing in, or when signing documents.'
-              : 'for signing documents.'}
+                Create one-time passwords that serve as a secondary authentication method for
+                confirming your identity when requested during the sign-in process.
               </AlertDescription>
             </div>
 
-        {user.twoFactorEnabled ? (
-          <DisableAuthenticatorAppDialog />
-        ) : (
-          <EnableAuthenticatorAppDialog />
-        )}
+            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
           </Alert>
 
           {user.twoFactorEnabled && (
@@ -67,31 +56,26 @@ export default async function SecuritySettingsPage() {
                 <AlertTitle>Recovery codes</AlertTitle>
 
                 <AlertDescription className="mr-4">
-              Two factor authentication recovery codes are used to access your account in the event
-              that you lose access to your authenticator app.
+                  Two factor authentication recovery codes are used to access your account in the
+                  event that you lose access to your authenticator app.
                 </AlertDescription>
               </div>
 
-          <ViewRecoveryCodesDialog />
+              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
             </Alert>
           )}
-
-      {isPasskeyEnabled && (
-        <Alert
-          className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-          variant="neutral"
-        >
-          <div className="mb-4 sm:mb-0">
-            <AlertTitle>Passkeys</AlertTitle>
-
-            <AlertDescription className="mr-4">
-              Allows authenticating using biometrics, password managers, hardware keys, etc.
-            </AlertDescription>
         </div>
+      ) : (
+        <Alert className="p-6" variant="neutral">
+          <AlertTitle>
+            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
+          </AlertTitle>
 
-          <Button asChild variant="outline" className="bg-background">
-            <Link href="/settings/security/passkeys">Manage passkeys</Link>
-          </Button>
+          <AlertDescription>
+            To update your password, enable two-factor authentication, and manage other security
+            settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
+            settings.
+          </AlertDescription>
         </Alert>
       )}
 
@@ -107,7 +91,7 @@ export default async function SecuritySettingsPage() {
           </AlertDescription>
         </div>
 
-        <Button asChild variant="outline" className="bg-background">
+        <Button asChild>
           <Link href="/settings/security/activity">View activity</Link>
         </Button>
       </Alert>