feat: runtime env

Support runtime environment variables using server components.

This will mean docker images can change env vars for runtime as required.

.env.example

@@ -2,11 +2,6 @@
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"
 
-# [[CRYPTO]]
-# Application Key for symmetric encryption and decryption
-# This should be a random string of at least 32 characters
-NEXT_PRIVATE_ENCRYPTION_KEY="CAFEBABE"
-
 # [[AUTH OPTIONAL]]
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ env:
   HUSKY: 0
 
 jobs:
-  build_app:
-    name: Build App
+  build:
+    name: Build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -37,16 +37,3 @@ jobs:
 
       - name: Build
         run: npm run build
-
-  build_docker:
-    name: Build Docker Image
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 2
-
-      - name: Build Docker Image
-        run: ./docker/build.sh
-

.github/workflows/deploy.yml

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

.github/workflows/e2e-tests.yml

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

.prettierignore

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

.vscode/settings.json

@@ -6,8 +6,5 @@
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "javascript.preferences.useAliasesForRenames": false,
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "files.eol": "\n",
-  "editor.tabSize": 2,
-  "editor.insertSpaces": true
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }

README.md

@@ -193,12 +193,6 @@ git clone https://github.com/documenso/documenso
 
 We support DevContainers for VSCode. [Click here to get started.](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso)
 
-### Video walkthrough
-
-If you're a visual learner and prefer to watch a video walkthrough of setting up Documenso locally, check out this video:
-
-[![Watch the video](https://img.youtube.com/vi/Y0ppIQrEnZs/hqdefault.jpg)](https://youtu.be/Y0ppIQrEnZs)
-
 ## Docker
 
 🚧 Docker containers and images are current in progress. We are actively working on bringing a simple Docker build and publish pipeline for Documenso.
@@ -240,7 +234,7 @@ Now you can install the dependencies and build it:
 
 ```
 npm i
-npm run build:web
+npm run:build:web
 npm run prisma:migrate-deploy
 ```
 

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

@@ -14,11 +14,9 @@ tags:
 Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it. 
 
 ## Two more for the road (to open signing)
-
 We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso.
 
 ## Open Source, Open Metrics
-
 If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com. 
 
 The two main takeaways are:

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

@@ -24,9 +24,9 @@ We’re an open-source project and focus on building a great developer experienc
 
 So, we’re switching all conversations, team and community-wide, to Discord.
 
-In this post, we won’t debate _why_ we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
+In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
 
-Instead, we’ll focus on _how_ we plan to make the switch.
+Instead, we’ll focus on *how* we plan to make the switch.
 
 ## Who is this story for?
 
@@ -47,13 +47,14 @@ The detailed plan goes like this:
 - 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack.
 
     - **GitHub**
-
         - Create new Pull Request
             - Add story to the blog
             - Update link to the community
+                
             ```
             https://documen.so/discord
             ```
+                
         - Start a new Discussion
             
             ```markdown
@@ -72,7 +73,6 @@ The detailed plan goes like this:
             ```
             
     - **Twitter**
-
         - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
         - Pin Tweet
         - Update link in bio
@@ -87,7 +87,6 @@ The detailed plan goes like this:
             ```
             
     - **Slack**
-
         - Post message in `#general`
             
             ```markdown
@@ -107,15 +106,15 @@ The detailed plan goes like this:
             
         - Pin post
         - Set topic and description
+            
             ```
             We're switching to Discord. Join the fun: https://documen.so/discord
             ```
+            
         - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
         
 - 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack.
-
     - **Slack**
-
         - Schedule reminder in `#general`
             
             ```
@@ -132,5 +131,5 @@ The detailed plan goes like this:
 ## Final thoughts
 
 - We’re at the very, early stage on our journey to building a beautiful, open-source DocuSign alternative. We want to build a great developer experience with the open-source community and, switching to Discord, we want to set up the foundations of an open, safe place for community members to get in touch, brainstorm ideas, and have fun.
-- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an _au revoir?_
+- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an *au revoir?*
 - For now, we’re pushing forward and are eager to welcome you on Discord. Make sure to [join the server](https://documen.so/discord) in order to keep up to date on all things Documenso. See you there!

apps/marketing/content/careers.mdx

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

apps/marketing/next.config.js

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

apps/marketing/package.json

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

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

@@ -4,13 +4,13 @@ import { allBlogPosts } from 'contentlayer/generated';
 
 export const runtime = 'edge';
 
-export const contentType = 'image/png';
-
-export const IMAGE_SIZE = {
+export const size = {
   width: 1200,
   height: 630,
 };
 
+export const contentType = 'image/png';
+
 type BlogPostOpenGraphImageProps = {
   params: { post: string };
 };
@@ -25,16 +25,16 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
   // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
   // to a constant will break og image generation.
   const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([
-    fetch(new URL('@documenso/assets/fonts/inter-bold.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('@documenso/assets/images/background-blog-og.png', import.meta.url)).then(
+    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
-    fetch(new URL('@documenso/assets/logo.png', import.meta.url)).then(async (res) =>
+    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
   ]);
@@ -56,7 +56,7 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
       </div>
     ),
     {
-      ...IMAGE_SIZE,
+      ...size,
       fonts: [
         {
           name: 'Inter',

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

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

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

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

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

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

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

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

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

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

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

@@ -7,10 +7,11 @@ import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { ChevronLeft } from 'lucide-react';
 
-import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
+import backgroundPattern from '~/assets/background-pattern.png';
+
 export default function NotFound() {
   const router = useRouter();
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/web/next.config.js

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

apps/web/package.json

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

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

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

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

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import type { z } from 'zod';
+import { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';

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

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

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

@@ -4,26 +4,28 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { DocumentStatus } from '@documenso/prisma/client';
-import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
-import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import { trpc } from '@documenso/trpc/react';
+import { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 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 { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
 import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/add-signers';
-import type { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
+import { 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 { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
+import {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { addFields } from '~/components/forms/edit-document/add-fields.action';
+import { addSigners } from '~/components/forms/edit-document/add-signers.action';
+import { completeDocument } from '~/components/forms/edit-document/add-subject.action';
+
 export type EditDocumentFormProps = {
   className?: string;
   user: User;
@@ -33,8 +35,7 @@ export type EditDocumentFormProps = {
   documentData: DocumentData;
 };
 
-type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
-const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'subject'];
+type EditDocumentStep = 'signers' | 'fields' | 'subject';
 
 export const EditDocumentForm = ({
   className,
@@ -47,60 +48,29 @@ export const EditDocumentForm = ({
   const { toast } = useToast();
   const router = useRouter();
 
-  // controlled stepper state
-  const [step, setStep] = useState<EditDocumentStep>(
-    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
-  );
-
-  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
-  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
-  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
+  const [step, setStep] = useState<EditDocumentStep>('signers');
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
-    title: {
-      title: 'Add Title',
-      description: 'Add the title to the document.',
-      stepIndex: 1,
-    },
     signers: {
       title: 'Add Signers',
       description: 'Add the people who will sign the document.',
-      stepIndex: 2,
+      stepIndex: 1,
     },
     fields: {
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
-      stepIndex: 3,
+      stepIndex: 2,
+      onBackStep: () => setStep('signers'),
     },
     subject: {
       title: 'Add Subject',
       description: 'Add the subject and message you wish to send to signers.',
-      stepIndex: 4,
+      stepIndex: 3,
+      onBackStep: () => setStep('fields'),
     },
   };
 
-  const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
-    try {
-      // Custom invocation server action
-      await addTitle({
-        documentId: document.id,
-        title: data.title,
-      });
-
-      router.refresh();
-
-      setStep('signers');
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while updating title.',
-        variant: 'destructive',
-      });
-    }
-  };
+  const currentDocumentFlow = documentFlow[step];
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
@@ -111,6 +81,7 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
+
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -132,6 +103,7 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
+
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -148,7 +120,7 @@ export const EditDocumentForm = ({
     const { subject, message } = data.email;
 
     try {
-      await sendDocument({
+      await completeDocument({
         documentId: document.id,
         email: {
           subject,
@@ -174,8 +146,6 @@ export const EditDocumentForm = ({
     }
   };
 
-  const currentDocumentFlow = documentFlow[step];
-
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -188,47 +158,44 @@ export const EditDocumentForm = ({
       </Card>
 
       <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-        <DocumentFlowFormContainer
-          className="lg:h-[calc(100vh-6rem)]"
-          onSubmit={(e) => e.preventDefault()}
-        >
-          <Stepper
-            currentStep={currentDocumentFlow.stepIndex}
-            setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
-          >
-            <AddTitleFormPartial
-              key={recipients.length}
-              documentFlow={documentFlow.title}
-              recipients={recipients}
-              fields={fields}
-              document={document}
-              onSubmit={onAddTitleFormSubmit}
+        <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+          <DocumentFlowFormContainerHeader
+            title={currentDocumentFlow.title}
+            description={currentDocumentFlow.description}
           />
 
+          {step === 'signers' && (
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
-              document={document}
               recipients={recipients}
               fields={fields}
+              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSignersFormSubmit}
             />
+          )}
+
+          {step === 'fields' && (
             <AddFieldsFormPartial
               key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
+              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddFieldsFormSubmit}
             />
+          )}
+
+          {step === 'subject' && (
             <AddSubjectFormPartial
-              key={recipients.length}
               documentFlow={documentFlow.subject}
               document={document}
               recipients={recipients}
               fields={fields}
+              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSubjectFormSubmit}
             />
-          </Stepper>
+          )}
         </DocumentFlowFormContainer>
       </div>
     </div>

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

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

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

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

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

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

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

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

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

@@ -6,9 +6,8 @@ import { Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { FindResultSet } from '@documenso/lib/types/find-result-set';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { Document, Recipient, User } from '@documenso/prisma/client';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
@@ -75,9 +74,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           },
           {
             header: 'Actions',
-            cell: ({ row }) =>
-              (!row.original.deletedAt ||
-                row.original.status === ExtendedDocumentStatus.COMPLETED) && (
+            cell: ({ row }) => (
               <div className="flex items-center gap-x-4">
                 <DataTableActionButton row={row.original} />
                 <DataTableActionDropdown row={row.original} />

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

@@ -1,8 +1,5 @@
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
-import { DocumentStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -13,30 +10,25 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DeleteDraftDocumentDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
-  status: DocumentStatus;
 };
 
-export const DeleteDocumentDialog = ({
+export const DeleteDraftDocumentDialog = ({
   id,
   open,
   onOpenChange,
-  status,
 }: DeleteDraftDocumentDialogProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
 
-  const [inputValue, setInputValue] = useState('');
-  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
-
-  const { mutateAsync: deleteDocument, isLoading } = trpcReact.document.deleteDocument.useMutation({
+  const { mutateAsync: deleteDocument, isLoading } =
+    trpcReact.document.deleteDraftDocument.useMutation({
       onSuccess: () => {
         router.refresh();
 
@@ -50,9 +42,9 @@ export const DeleteDocumentDialog = ({
       },
     });
 
-  const onDelete = async () => {
+  const onDraftDelete = async () => {
     try {
-      await deleteDocument({ id, status });
+      await deleteDocument({ id });
     } catch {
       toast({
         title: 'Something went wrong',
@@ -63,11 +55,6 @@ export const DeleteDocumentDialog = ({
     }
   };
 
-  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
-    setIsDeleteEnabled(event.target.value === 'delete');
-  };
-
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
@@ -80,17 +67,6 @@ export const DeleteDocumentDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        {status !== DocumentStatus.DRAFT && (
-          <div className="mt-8">
-            <Input
-              type="text"
-              value={inputValue}
-              onChange={onInputChange}
-              placeholder="Type 'delete' to confirm"
-            />
-          </div>
-        )}
-
         <DialogFooter>
           <div className="flex w-full flex-1 flex-nowrap gap-4">
             <Button
@@ -102,14 +78,7 @@ export const DeleteDocumentDialog = ({
               Cancel
             </Button>
 
-            <Button
-              type="button"
-              loading={isLoading}
-              onClick={onDelete}
-              disabled={!isDeleteEnabled}
-              variant="destructive"
-              className="flex-1"
-            >
+            <Button type="button" loading={isLoading} onClick={onDraftDelete} className="flex-1">
               Delete
             </Button>
           </div>

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

@@ -26,14 +26,14 @@ export const DuplicateDocumentDialog = ({
   const router = useRouter();
   const { toast } = useToast();
 
-  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
+  const { data, isLoading } = trpcReact.document.getDocumentById.useQuery({
     id,
   });
 
-  const documentData = document?.documentData
+  const documentData = data?.documentData
     ? {
-        ...document.documentData,
-        data: document.documentData.initialData,
+        ...data.documentData,
+        data: data.documentData.initialData,
       }
     : undefined;
 
@@ -78,7 +78,7 @@ export const DuplicateDocumentDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll  ">
-            <LazyPDFViewer key={document?.id} documentData={documentData} />
+            <LazyPDFViewer key={data?.id} documentData={documentData} />
           </div>
         )}
 

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

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

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

@@ -6,10 +6,8 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -24,8 +22,6 @@ export type UploadDocumentProps = {
 
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
   const router = useRouter();
-  const analytics = useAnalytics();
-  const { data: session } = useSession();
 
   const { toast } = useToast();
 
@@ -57,12 +53,6 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         duration: 5000,
       });
 
-      analytics.capture('App: Document Uploaded', {
-        userId: session?.user.id,
-        documentId: id,
-        timestamp: new Date().toISOString(),
-      });
-
       router.push(`/documents/${id}`);
     } catch (error) {
       console.error(error);
@@ -89,7 +79,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
     <div className={cn('relative', className)}>
       <DocumentDropzone
         className="min-h-[40vh]"
-        disabled={remaining.documents === 0 || !session?.user.emailVerified}
+        disabled={remaining.documents === 0}
         onDrop={onFileDrop}
       />
 

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

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

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

@@ -5,14 +5,16 @@ import {
   getStripeCustomerById,
 } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
-import { stripe } from '@documenso/lib/server-only/stripe';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 
 export const createBillingPortal = async () => {
   const { user } = await getRequiredServerComponentSession();
 
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
 
   let stripeCustomer: Stripe.Customer | null = null;
@@ -44,6 +46,6 @@ export const createBillingPortal = async () => {
 
   return getPortalSession({
     customerId: stripeCustomer.id,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
   });
 };

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

@@ -7,9 +7,10 @@ import {
   getStripeCustomerById,
 } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { Stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 
 export type CreateCheckoutOptions = {
   priceId: string;
@@ -18,12 +19,14 @@ export type CreateCheckoutOptions = {
 export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   const { user } = await getRequiredServerComponentSession();
 
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
   const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
 
   let stripeCustomer: Stripe.Customer | null = null;
 
   // Find the Stripe customer for the current user subscription.
-  if (existingSubscription?.periodEnd && existingSubscription.periodEnd >= new Date()) {
+  if (existingSubscription) {
     stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
 
     if (!stripeCustomer) {
@@ -32,7 +35,7 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
 
     return getPortalSession({
       customerId: stripeCustomer.id,
-      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+      returnUrl: `${NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
     });
   }
 
@@ -53,6 +56,6 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
   });
 };

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

@@ -4,9 +4,9 @@ import { match } from 'ts-pattern';
 
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
+import { Stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
@@ -41,7 +41,7 @@ export default async function BillingSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Billing</h3>
+      <h3 className="text-lg font-medium">Billing</h3>
 
       <div className="text-muted-foreground mt-2 text-sm">
         {isMissingOrInactiveOrFreePlan && (

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

@@ -1,5 +1,19 @@
-import { redirect } from 'next/navigation';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
-export default function PasswordSettingsPage() {
-  redirect('/settings/security');
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function PasswordSettingsPage() {
+  const { user } = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Password</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">Here you can update your password.</p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+    </div>
+  );
 }

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

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

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

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

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

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

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

@@ -2,7 +2,8 @@ import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-import { APP_BASE_URL } from '@documenso/lib/constants/app';
+import { appBaseUrl } from '@documenso/lib/constants/app';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 
 type SharePageProps = {
   params: { slug: string };
@@ -11,17 +12,17 @@ type SharePageProps = {
 export function generateMetadata({ params: { slug } }: SharePageProps) {
   return {
     title: 'Documenso - Share',
-    description: 'I just signed a document in style with Documenso!',
+    description: 'I just signed a document with Documenso!',
     openGraph: {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',
       type: 'website',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`${appBaseUrl()}/share/${slug}/opengraph`],
     },
     twitter: {
       site: '@documenso',
       card: 'summary_large_image',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`${appBaseUrl()}/share/${slug}/opengraph`],
       description: 'I just signed with Documenso!',
     },
   } satisfies Metadata;
@@ -30,10 +31,12 @@ export function generateMetadata({ params: { slug } }: SharePageProps) {
 export default function SharePage() {
   const userAgent = headers().get('User-Agent') ?? '';
 
+  const { NEXT_PUBLIC_MARKETING_URL } = getRuntimeEnv();
+
   // https://stackoverflow.com/questions/47026171/how-to-detect-bots-for-open-graph-with-user-agent
   if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
     return null;
   }
 
-  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
+  redirect(NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
 }

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

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

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

@@ -7,10 +7,9 @@ import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import type { Document, Field, Recipient } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
+import { Document, Field, Recipient } from '@documenso/prisma/client';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -20,7 +19,6 @@ import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 
 import { useRequiredSigningContext } from './provider';
-import { SignDialog } from './sign-dialog';
 
 export type SigningFormProps = {
   document: Document;
@@ -30,14 +28,11 @@ export type SigningFormProps = {
 
 export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
   const router = useRouter();
-  const analytics = useAnalytics();
   const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
-  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
-  const { mutateAsync: completeDocumentWithToken } =
-    trpc.recipient.completeDocumentWithToken.useMutation();
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   const {
     handleSubmit,
@@ -50,7 +45,6 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
 
   const onFormSubmit = async () => {
     setValidateUninsertedFields(true);
-
     const isFieldsValid = validateFieldsInserted(fields);
 
     if (!isFieldsValid) {
@@ -62,12 +56,6 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
       documentId: document.id,
     });
 
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
     router.push(`/sign/${recipient.token}/complete`);
   };
 
@@ -144,12 +132,9 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 Cancel
               </Button>
 
-              <SignDialog
-                isSubmitting={isSubmitting}
-                onSignatureComplete={handleSubmit(onFormSubmit)}
-                document={document}
-                fields={fields}
-              />
+              <Button className="w-full" type="submit" size="lg" loading={isSubmitting}>
+                Complete
+              </Button>
             </div>
           </div>
         </div>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
 import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
 import { NextAuthProvider } from '~/providers/next-auth';

apps/web/src/app/(signing)/sign/[token]/no-longer-available.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import Link from 'next/link';
-
-import { Clock8 } from 'lucide-react';
-import { useSession } from 'next-auth/react';
-
-import signingCelebration from '@documenso/assets/images/signing-celebration.png';
-import type { Document, Signature } from '@documenso/prisma/client';
-import { SigningCard3D } from '@documenso/ui/components/signing-card';
-
-type NoLongerAvailableProps = {
-  document: Document;
-  recipientName: string;
-  recipientSignature: Signature;
-};
-
-export const NoLongerAvailable = ({
-  document,
-  recipientName,
-  recipientSignature,
-}: NoLongerAvailableProps) => {
-  const { data: session } = useSession();
-
-  return (
-    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-16 xl:pt-24">
-      <SigningCard3D
-        name={recipientName}
-        signature={recipientSignature}
-        signingCelebrationImage={signingCelebration}
-      />
-
-      <div className="relative mt-2 flex w-full flex-col items-center">
-        <div className="mt-8 flex items-center text-center text-red-600">
-          <Clock8 className="mr-2 h-5 w-5" />
-          <span className="text-sm">Document Cancelled</span>
-        </div>
-
-        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-          <span className="mt-1.5 block">"{document.title}"</span>
-          is no longer available to sign
-        </h2>
-
-        <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-          This document has been cancelled by the owner.
-        </p>
-
-        {session?.user ? (
-          <Link href="/documents" className="text-documenso-700 hover:text-documenso-600 mt-36">
-            Go Back Home
-          </Link>
-        ) : (
-          <p className="text-muted-foreground/60 mt-36 text-sm">
-            Want to send slick signing links like this one?{' '}
-            <Link
-              href="https://documenso.com"
-              className="text-documenso-700 hover:text-documenso-600"
-            >
-              Check out Documenso.
-            </Link>
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -3,12 +3,11 @@ import { notFound, redirect } from 'next/navigation';
 import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -18,7 +17,6 @@ import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
 import { NameField } from './name-field';
-import { NoLongerAvailable } from './no-longer-available';
 import { SigningProvider } from './provider';
 import { SignatureField } from './signature-field';
 
@@ -57,18 +55,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     redirect(`/sign/${token}/complete`);
   }
 
-  const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
-
-  if (document.deletedAt) {
-    return (
-      <NoLongerAvailable
-        document={document}
-        recipientName={recipient.name}
-        recipientSignature={recipientSignature}
-      />
-    );
-  }
-
   return (
     <SigningProvider
       email={recipient.email}

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

@@ -1,77 +0,0 @@
-import { useState } from 'react';
-
-import { Document, Field } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-
-export type SignDialogProps = {
-  isSubmitting: boolean;
-  document: Document;
-  fields: Field[];
-  onSignatureComplete: () => void | Promise<void>;
-};
-
-export const SignDialog = ({
-  isSubmitting,
-  document,
-  fields,
-  onSignatureComplete,
-}: SignDialogProps) => {
-  const [showDialog, setShowDialog] = useState(false);
-
-  const isComplete = fields.every((field) => field.inserted);
-
-  return (
-    <Dialog open={showDialog} onOpenChange={setShowDialog}>
-      <DialogTrigger asChild>
-        <Button
-          className="w-full"
-          type="button"
-          size="lg"
-          disabled={!isComplete}
-          loading={isSubmitting}
-        >
-          Complete
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <div className="text-center">
-          <div className="text-xl font-semibold text-neutral-800">Sign Document</div>
-          <div className="text-muted-foreground mx-auto w-4/5 py-2 text-center">
-            You are about to finish signing "{document.title}". Are you sure?
-          </div>
-        </div>
-
-        <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-              variant="secondary"
-              onClick={() => {
-                setShowDialog(false);
-              }}
-            >
-              Cancel
-            </Button>
-
-            <Button
-              type="button"
-              className="flex-1"
-              disabled={!isComplete}
-              loading={isSubmitting}
-              onClick={onSignatureComplete}
-            >
-              Sign
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import type { Recipient } from '@documenso/prisma/client';
-import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
@@ -76,16 +76,10 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         return;
       }
 
-      const value = source === 'local' && localSignature ? localSignature : providedSignature ?? '';
-
-      if (!value) {
-        return;
-      }
-
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value,
+        value: source === 'local' && localSignature ? localSignature : providedSignature ?? '',
         isBase64: true,
       });
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Image from 'next/image';
 
-import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import backgroundPattern from '~/assets/background-pattern.png';
 
 type UnauthenticatedLayoutProps = {
   children: React.ReactNode;

apps/web/src/app/(unauthenticated)/verify-email/[token]/page.tsx

@@ -1,97 +0,0 @@
-import Link from 'next/link';
-
-import { AlertTriangle, CheckCircle2, XCircle, XOctagon } from 'lucide-react';
-
-import { verifyEmail } from '@documenso/lib/server-only/user/verify-email';
-import { Button } from '@documenso/ui/primitives/button';
-
-export type PageProps = {
-  params: {
-    token: string;
-  };
-};
-
-export default async function VerifyEmailPage({ params: { token } }: PageProps) {
-  if (!token) {
-    return (
-      <div className="w-full">
-        <div className="mb-4 text-red-300">
-          <XOctagon />
-        </div>
-
-        <h2 className="text-4xl font-semibold">No token provided</h2>
-        <p className="text-muted-foreground mt-2 text-base">
-          It seems that there is no token provided. Please check your email and try again.
-        </p>
-      </div>
-    );
-  }
-
-  const verified = await verifyEmail({ token });
-
-  if (verified === null) {
-    return (
-      <div className="flex w-full items-start">
-        <div className="mr-4 mt-1 hidden md:block">
-          <AlertTriangle className="h-10 w-10 text-yellow-500" strokeWidth={2} />
-        </div>
-
-        <div>
-          <h2 className="text-2xl font-bold md:text-4xl">Something went wrong</h2>
-
-          <p className="text-muted-foreground mt-4">
-            We were unable to verify your email. If your email is not verified already, please try
-            again.
-          </p>
-
-          <Button className="mt-4" asChild>
-            <Link href="/">Go back home</Link>
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  if (!verified) {
-    return (
-      <div className="flex w-full items-start">
-        <div className="mr-4 mt-1 hidden md:block">
-          <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
-        </div>
-
-        <div>
-          <h2 className="text-2xl font-bold md:text-4xl">Your token has expired!</h2>
-
-          <p className="text-muted-foreground mt-4">
-            It seems that the provided token has expired. We've just sent you another token, please
-            check your email and try again.
-          </p>
-
-          <Button className="mt-4" asChild>
-            <Link href="/">Go back home</Link>
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex w-full items-start">
-      <div className="mr-4 mt-1 hidden md:block">
-        <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
-      </div>
-
-      <div>
-        <h2 className="text-2xl font-bold md:text-4xl">Email Confirmed!</h2>
-
-        <p className="text-muted-foreground mt-4">
-          Your email has been successfully confirmed! You can now use all features of Documenso.
-        </p>
-
-        <Button className="mt-4" asChild>
-          <Link href="/">Go back home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,28 +0,0 @@
-import Link from 'next/link';
-
-import { XCircle } from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export default function EmailVerificationWithoutTokenPage() {
-  return (
-    <div className="flex w-full items-start">
-      <div className="mr-4 mt-1 hidden md:block">
-        <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
-      </div>
-
-      <div>
-        <h2 className="text-2xl font-bold md:text-4xl">Uh oh! Looks like you're missing a token</h2>
-
-        <p className="text-muted-foreground mt-4">
-          It seems that there is no token provided, if you are trying to verify your email please
-          follow the link in your email.
-        </p>
-
-        <Button className="mt-4" asChild>
-          <Link href="/">Go back home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

apps/web/src/app/layout.tsx

@@ -6,20 +6,30 @@ import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/featur
 import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
 import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
+import { RuntimeEnvProvider } from '@documenso/lib/universal/runtime-env';
+import { getRuntimeEnv } from '@documenso/lib/universal/runtime-env/get-runtime-env';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 
 import { ThemeProvider } from '~/providers/next-theme';
+import { PlausibleProvider } from '~/providers/plausible';
 import { PostHogPageview } from '~/providers/posthog';
 
 import './globals.css';
 
+export const dynamic = 'force-dynamic';
+
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export const metadata = {
+// We do this so NEXT_PUBLIC variables will be evaluated at runtime.
+// eslint-disable-next-line @typescript-eslint/require-await
+export const generateMetadata = async () => {
+  const { NEXT_PUBLIC_WEBAPP_URL } = getRuntimeEnv();
+
+  return {
     title: 'Documenso - The Open Source DocuSign Alternative',
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
@@ -32,16 +42,17 @@ export const metadata = {
       description:
         'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
       type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
+      images: [`${NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
     },
     twitter: {
       site: '@documenso',
       card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
+      images: [`${NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
       description:
         'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
     },
   };
+};
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getServerComponentAllFlags();
@@ -66,17 +77,21 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       </Suspense>
 
       <body>
+        <RuntimeEnvProvider>
           <LocaleProvider locale={locale}>
             <FeatureFlagProvider initialFlags={flags}>
+              <PlausibleProvider>
                 <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
                   <TooltipProvider>
                     <TrpcProvider>{children}</TrpcProvider>
                   </TooltipProvider>
                 </ThemeProvider>
+              </PlausibleProvider>
 
               <Toaster />
             </FeatureFlagProvider>
           </LocaleProvider>
+        </RuntimeEnvProvider>
       </body>
     </html>
   );

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

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { Button } from '@documenso/ui/primitives/button';
 
 import NotFoundPartial from '~/components/partials/not-found';