fix: test

feat: add single player mode
2023-09-20 14:21:08 +10:00 · 2023-09-20 13:59:14 +10:00 · 2023-09-20 13:48:30 +10:00
113 changed files with 2686 additions and 1117 deletions
--- a/.env.example
+++ b/.env.example
@@ -10,6 +10,9 @@ NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"

+# [[MARKETING]]
+NEXT_PUBLIC_MARKETING_SITE_URL="http://localhost:3001"
+
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+TEST
+
 <p align="center" style="margin-top: 120px">
  <a href="https://github.com/documenso/documenso">
   <img width="250px" src="https://github.com/documenso/documenso/assets/1309312/cd7823ec-4baa-40b9-be78-4acb3b1c73cb" alt="Documenso Logo">
@@ -20,7 +22,7 @@
 </p>

 <p align="center">
-   <a href="https://documen.so/discord"><img src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2" alt="Join Documenso on Discord"></a> 
+   <a href="https://documen.so/discord"><img src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2" alt="Join Documenso on Discord"></a>
   <a href="https://github.com/documenso/documenso/stargazers"><img src="https://img.shields.io/github/stars/documenso/documenso" alt="Github Stars"></a>
   <a href="https://github.com/documenso/documenso/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
   <a href="https://github.com/documenso/documenso/pulse"><img src="https://img.shields.io/github/commit-activity/m/documenso/documenso" alt="Commits-per-month"></a>
@@ -227,11 +229,12 @@ docker run -d --restart=unless-stopped -p 3000:3000 -v documenso:/app/data --nam
 ```

 Command Breakdown:
+
 - `-d` - Let's you run the container in background
 - `-p` - Passes down which ports to use. First half is the host port, Second half is the app port. You can change the first half anything you want and reverse proxy to that port.
 - `-v` - Volume let's you persist the data
 - `--name` - Name of the container
- `documenso:latest` -  Image you have built
+- `documenso:latest` - Image you have built

 # Deployment

@@ -277,5 +280,5 @@ containers:
      - start
      - --
      - -H
-      - "::"
+      - '::'
 ```
--- a/apps/marketing/content/blog/design-system.mdx
+++ b/apps/marketing/content/blog/design-system.mdx
@@ -1,49 +0,0 @@
---
-title: Open Sourcing Documenso's Design
-description: It's day 1 of our first launch week. We are kicking it off by open sourcing Documenso's design system! Let's go..
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2023-09-25
-tags:
-  - Design
-  - Open Source
-  - Community
---
-
-<figure>
-  <MdxNextImage
-    src="/blog/designsystem.png"
-    width="1260"
-    height="630"
-    alt="Documenso's Design System"
-  />
-
-  <figcaption className="text-center">
-   Documenso's Design System ✨
-  </figcaption>
-</figure>
-
-> TLDR; Our design system is OSS under MIT at [design.documenso.com](https://design.documenso.com)
-
-Today, we are open sourcing our design system, lovingly crafted by [Thilo](https://twitter.com/thilokonzok). The system is public on Figma and will be available at [design.documenso.com](https://design.documenso.com) from here on out.
-We are publishing it under the MIT License so everyone can share, remix, and use it as it helps them most.
-
-We chose to start our first launch week with a design topic to emphasize the role design will play in Documenso's company and community culture. As it is historically difficult to bring together open-source software with great design, this is our first step towards encouraging a more design-driven COSS (Commercial Open Source) movement.
-
-## Designers Welcome
-
-We added a designer role in our Discord to create a space for designers to explore and discuss design-related topics of Documenso and signing in general. In the future, we want to foster more coding contributions and start a design culture around the product. As it is much more difficult to incorporate design contributions, we have yet to find a clear plan of what that will look like. I would like to see contributions around stuff we are NOT working on. Designs in that area can inspire and start discussions without the complexities of implementing them immediately — a free-thinking space around everything Documenso. Having a free mandate to design without restriction can create many exciting ideas. Some Ideas worth exploring:
-
-## Areas for design contributions
-
- Explorations of exciting aspects of signing and document handling:
- What does signing look like when we no longer have skeuomorphic signatures?
- What is signing if we move beyond paper-inspired documents?
- What would the government process look like using Documenso?
- Solutions Concepts for features further down the roadmap, e.g., Widgets in websites
-
-These are fascinating ideas for explorative design. They won't be built 1:1 but shape how we think about signing and where it can go, which is even more critical. If you are interested in product design, you are invited to join our [Discord](https://documen.so/discord) and discuss the future of signing design or the future of Documenso's design system. Also let me know what you think on [X (formerly Twitter)](https://x.com/eltimuro).
-
-Best from Hamburg\
-Timur
--- a/apps/marketing/next.config.js
+++ b/apps/marketing/next.config.js
@@ -2,7 +2,7 @@
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');

-const { parsed: env } = require('dotenv').config({
+require('dotenv').config({
  path: path.join(__dirname, '../../.env.local'),
 });

@@ -10,9 +10,13 @@ const { parsed: env } = require('dotenv').config({
 const config = {
  experimental: {
    serverActions: true,
+    serverActionsBodySizeLimit: '10mb',
  },
  reactStrictMode: true,
  transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
+  env: {
+    NEXT_PUBLIC_PROJECT: 'marketing',
+  },
  modularizeImports: {
    'lucide-react': {
      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -18,14 +18,16 @@
    "@hookform/resolvers": "^3.1.0",
    "contentlayer": "^0.3.4",
    "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.277.0",
    "micro": "^10.0.1",
-    "next": "13.4.12",
+    "next": "13.4.19",
    "next-auth": "4.22.3",
    "next-contentlayer": "^0.3.4",
    "next-plausible": "^3.10.1",
    "perfect-freehand": "^1.2.0",
+    "posthog-js": "^1.77.3",
    "react": "18.2.0",
+    "react-confetti": "^6.1.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.9",
    "react-icons": "^4.8.0",
--- a/apps/marketing/public/blog/designsystem.png
+++ b/apps/marketing/public/blog/designsystem.png
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -66,7 +66,7 @@ export default async function OpenPage() {
    .then((res) => ZStargazersLiveResponse.parse(res));

  return (
-    <div className="mx-auto mt-12 max-w-screen-lg">
+    <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
      <div className="flex flex-col items-center justify-center">
        <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>

--- a/apps/marketing/src/app/(marketing)/pricing/page.tsx
+++ b/apps/marketing/src/app/(marketing)/pricing/page.tsx
@@ -20,7 +20,7 @@ export type PricingPageProps = {

 export default function PricingPage() {
  return (
-    <div className="mt-12">
+    <div className="mt-6 sm:mt-12">
      <div className="text-center">
        <h1 className="text-3xl font-bold lg:text-5xl">Pricing</h1>

--- a/apps/marketing/src/app/(marketing)/single-player-mode/[token]/success/page.tsx
+++ b/apps/marketing/src/app/(marketing)/single-player-mode/[token]/success/page.tsx
@@ -0,0 +1,29 @@
+import { notFound } from 'next/navigation';
+
+import { getDocumentAndRecipientByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+
+import SinglePlayerModeSuccess from '~/components/(marketing)/single-player-mode/single-player-mode-success';
+
+export type SinglePlayerModeSuccessPageProps = {
+  params: {
+    token?: string;
+  };
+};
+
+export default async function SinglePlayerModeSuccessPage({
+  params: { token },
+}: SinglePlayerModeSuccessPageProps) {
+  if (!token) {
+    return notFound();
+  }
+
+  const document = await getDocumentAndRecipientByToken({
+    token,
+  }).catch(() => null);
+
+  if (!document || document.status !== 'COMPLETED') {
+    return notFound();
+  }
+
+  return <SinglePlayerModeSuccess document={document} />;
+}
--- a/apps/marketing/src/app/(marketing)/single-player-mode/page.tsx
+++ b/apps/marketing/src/app/(marketing)/single-player-mode/page.tsx
@@ -0,0 +1,237 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { 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 { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
+import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { createSinglePlayerDocument } from '~/components/(marketing)/single-player-mode/create-single-player-document.action';
+
+type SinglePlayerModeStep = 'fields' | 'sign';
+
+export default function SinglePlayerModePage() {
+  const analytics = useAnalytics();
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [uploadedFile, setUploadedFile] = useState<{ name: string; file: string } | null>();
+
+  const [step, setStep] = useState<SinglePlayerModeStep>('fields');
+  const [fields, setFields] = useState<Field[]>([]);
+
+  const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
+    fields: {
+      title: 'Add document',
+      description: 'Upload a document and add fields.',
+      stepIndex: 1,
+      onBackStep: uploadedFile
+        ? () => {
+            setUploadedFile(null);
+            setFields([]);
+          }
+        : undefined,
+      onNextStep: () => setStep('sign'),
+    },
+    sign: {
+      title: 'Sign',
+      description: 'Enter your details.',
+      stepIndex: 2,
+      onBackStep: () => setStep('fields'),
+    },
+  };
+
+  const currentDocumentFlow = documentFlow[step];
+
+  useEffect(() => {
+    analytics.startSessionRecording('marketing_session_recording_spm');
+
+    return () => {
+      analytics.stopSessionRecording();
+    };
+  }, [analytics]);
+
+  /**
+   * Insert the selected fields into the local state.
+   */
+  const onFieldsSubmit = (data: TAddFieldsFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    setFields(
+      data.fields.map((field, i) => ({
+        id: i,
+        documentId: -1,
+        recipientId: -1,
+        type: field.type,
+        page: field.pageNumber,
+        positionX: new Prisma.Decimal(field.pageX),
+        positionY: new Prisma.Decimal(field.pageY),
+        width: new Prisma.Decimal(field.pageWidth),
+        height: new Prisma.Decimal(field.pageHeight),
+        customText: '',
+        inserted: false,
+      })),
+    );
+
+    analytics.capture('Marketing: SPM - Fields added');
+
+    documentFlow.fields.onNextStep?.();
+  };
+
+  /**
+   * Create, sign and send the document.
+   */
+  const onSignSubmit = async (data: TAddSignatureFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    try {
+      const documentToken = await createSinglePlayerDocument({
+        document: uploadedFile.file,
+        documentName: uploadedFile.name,
+        signer: data,
+        fields: fields.map((field) => ({
+          page: field.page,
+          type: field.type,
+          positionX: field.positionX.toNumber(),
+          positionY: field.positionY.toNumber(),
+          width: field.width.toNumber(),
+          height: field.height.toNumber(),
+        })),
+      });
+
+      analytics.capture('Marketing: SPM - Document signed', {
+        signer: data.email,
+      });
+
+      router.push(`/single-player-mode/${documentToken}/success`);
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const placeholderRecipient: Recipient = {
+    id: -1,
+    documentId: -1,
+    email: '',
+    name: '',
+    token: '',
+    expired: null,
+    signedAt: null,
+    readStatus: 'OPENED',
+    signingStatus: 'NOT_SIGNED',
+    sendStatus: 'NOT_SENT',
+  };
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const base64String = Buffer.from(arrayBuffer).toString('base64');
+
+      setUploadedFile({
+        name: file.name,
+        file: `data:application/pdf;base64,${base64String}`,
+      });
+
+      analytics.capture('Marketing: SPM - Document uploaded');
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
+
+        <p className="mt-4 text-lg leading-normal text-[#31373D]">
+          View our{' '}
+          <Link
+            href={'/pricing'}
+            target="_blank"
+            className="font-semibold transition-colors hover:text-[#31373D]/80"
+          >
+            community plan
+          </Link>{' '}
+          for exclusive features, including the ability to collaborate with multiple signers.
+        </p>
+      </div>
+
+      <div className="mt-12 grid w-full grid-cols-12 gap-8">
+        <div className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7">
+          {uploadedFile ? (
+            <Card gradient>
+              <CardContent className="p-2">
+                <LazyPDFViewer document={uploadedFile.file} />
+              </CardContent>
+            </Card>
+          ) : (
+            <DocumentDropzone className="h-[80vh] max-h-[60rem]" onDrop={onFileDrop} />
+          )}
+        </div>
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+            <DocumentFlowFormContainerHeader
+              title={currentDocumentFlow.title}
+              description={currentDocumentFlow.description}
+            />
+
+            {/* 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'))}
+              />
+            )}
+          </DocumentFlowFormContainer>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/marketing/src/app/layout.tsx
+++ b/apps/marketing/src/app/layout.tsx
@@ -1,12 +1,19 @@
-import { Inter } from 'next/font/google';
+import { Suspense } from 'react';

+import { Caveat, Inter } from 'next/font/google';
+
+import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
+import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
+import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';

 import { PlausibleProvider } from '~/providers/plausible';
+import { PostHogPageview } from '~/providers/posthog';

 import './globals.css';

 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });

 export const metadata = {
  title: 'Documenso - The Open Source DocuSign Alternative',
@@ -32,9 +39,15 @@ export const metadata = {
  },
 };

-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const flags = await getAllAnonymousFlags();
+
  return (
-    <html lang="en" className={fontInter.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={cn(fontInter.variable, fontCaveat.variable)}
+      suppressHydrationWarning
+    >
      <head>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@@ -42,9 +55,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
        <link rel="manifest" href="/site.webmanifest" />
      </head>

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

 export default function robots(): MetadataRoute.Robots {
  return {
-    rules: [
-      {
-        userAgent: '*',
-      },
-    ],
+    rules: {
+      userAgent: '*',
+      allow: '/*',
+      disallow: ['/_next/*'],
+    },
    sitemap: `${getBaseUrl()}/sitemap.xml`,
  };
 }
--- a/apps/marketing/src/assets/signing-celebration.png
+++ b/apps/marketing/src/assets/signing-celebration.png
--- a/apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx
+++ b/apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx
@@ -10,6 +10,7 @@ import { usePlausible } from 'next-plausible';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -43,9 +44,11 @@ export type ClaimPlanDialogProps = {

 export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
  const params = useSearchParams();
-  const { toast } = useToast();
+  const analytics = useAnalytics();
  const event = usePlausible();

+  const { toast } = useToast();
+
  const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');

  const {
@@ -73,10 +76,12 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
      ]);

      event('claim-plan-pricing');
+      analytics.capture('Marketing: Claim plan', { planId, email });

      window.location.href = redirectUrl;
    } catch (error) {
      event('claim-plan-failed');
+      analytics.capture('Marketing: Claim plan failure', { planId, email });

      toast({
        title: 'Something went wrong',
--- a/apps/marketing/src/components/(marketing)/confetti-screen.tsx
+++ b/apps/marketing/src/components/(marketing)/confetti-screen.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Confetti from 'react-confetti';
+import { createPortal } from 'react-dom';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size';
+
+export default function ConfettiScreen({
+  numberOfPieces: numberOfPiecesProp = 200,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Confetti> & { duration?: number }) {
+  const isMounted = useIsMounted();
+  const { width, height } = useWindowSize();
+
+  const [numberOfPieces, setNumberOfPieces] = useState(numberOfPiecesProp);
+
+  useEffect(() => {
+    if (!props.duration) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setNumberOfPieces(0);
+    }, props.duration);
+
+    return () => clearTimeout(timer);
+  }, [props.duration]);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return createPortal(
+    <Confetti
+      {...props}
+      className="w-full"
+      numberOfPieces={numberOfPieces}
+      width={width}
+      height={height}
+    />,
+    document.body,
+  );
+}
--- a/apps/marketing/src/components/(marketing)/footer.tsx
+++ b/apps/marketing/src/components/(marketing)/footer.tsx
@@ -17,6 +17,7 @@ const SOCIAL_LINKS = [

 const FOOTER_LINKS = [
  { href: '/pricing', text: 'Pricing' },
+  { href: '/single-player-mode', text: 'Single Player Mode' },
  { href: '/blog', text: 'Blog' },
  { href: '/open', text: 'Open' },
  { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
--- a/apps/marketing/src/components/(marketing)/header.tsx
+++ b/apps/marketing/src/components/(marketing)/header.tsx
@@ -5,6 +5,7 @@ import { HTMLAttributes, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';

+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';

 import { HamburgerMenu } from './mobile-hamburger';
@@ -15,11 +16,26 @@ export type HeaderProps = HTMLAttributes<HTMLElement>;
 export const Header = ({ className, ...props }: HeaderProps) => {
  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);

+  const { getFlag } = useFeatureFlags();
+
+  const isSinglePlayerModeMarketingEnabled = getFlag('marketing_header_single_player_mode');
+
  return (
    <header className={cn('flex items-center justify-between', className)} {...props}>
-      <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
-        <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
-      </Link>
+      <div className="flex items-center space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
+        </Link>
+
+        {isSinglePlayerModeMarketingEnabled && (
+          <Link
+            href="/single-player-mode"
+            className="bg-primary rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Try now!
+          </Link>
+        )}
+      </div>

      <div className="hidden items-center gap-x-6 md:flex">
        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
--- a/apps/marketing/src/components/(marketing)/hero.tsx
+++ b/apps/marketing/src/components/(marketing)/hero.tsx
@@ -6,7 +6,9 @@ import Link from 'next/link';
 import { Variants, motion } from 'framer-motion';
 import { Github } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { match } from 'ts-pattern';

+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';

@@ -51,6 +53,10 @@ const HeroTitleVariants: Variants = {
 export const Hero = ({ className, ...props }: HeroProps) => {
  const event = usePlausible();

+  const { getFlag } = useFeatureFlags();
+
+  const heroMarketingCTA = getFlag('marketing_landing_hero_cta');
+
  const onSignUpClick = () => {
    const el = document.getElementById('email');

@@ -122,23 +128,40 @@ export const Hero = ({ className, ...props }: HeroProps) => {
          </Link>
        </motion.div>

-        <motion.div
-          variants={HeroTitleVariants}
-          initial="initial"
-          animate="animate"
-          className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
-        >
-          <Link
-            href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
-            target="_blank"
-          >
-            <img
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
-              alt="Documenso - The open source DocuSign alternative | Product Hunt"
-              style={{ width: '250px', height: '54px' }}
-            />
-          </Link>
-        </motion.div>
+        {match(heroMarketingCTA)
+          .with('spm', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="border-primary mx-auto mt-8 w-fit rounded-xl border-2 bg-white transition-colors hover:bg-slate-50/60"
+            >
+              <Link href="/single-player-mode" className="block px-4 py-2 text-center">
+                <h2 className="text-xs font-semibold text-[#727272]">Single Player Mode</h2>
+                <h1 className="font-semibold leading-5 text-[#606060]">Self sign documents here</h1>
+              </Link>
+            </motion.div>
+          ))
+          .with('productHunt', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
+            >
+              <Link
+                href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
+                target="_blank"
+              >
+                <img
+                  src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
+                  alt="Documenso - The open source DocuSign alternative | Product Hunt"
+                  style={{ width: '250px', height: '54px' }}
+                />
+              </Link>
+            </motion.div>
+          ))
+          .otherwise(() => null)}

        <motion.div
          className="mt-12"
--- a/apps/marketing/src/components/(marketing)/mobile-navigation.tsx
+++ b/apps/marketing/src/components/(marketing)/mobile-navigation.tsx
@@ -14,6 +14,10 @@ export type MobileNavigationProps = {
 };

 export const MENU_NAVIGATION_LINKS = [
+  {
+    href: '/single-player-mode',
+    text: 'Single Player Mode',
+  },
  {
    href: '/blog',
    text: 'Blog',
--- a/apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts
+++ b/apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts
@@ -0,0 +1,225 @@
+'use server';
+
+import { createElement } from 'react';
+
+import { DateTime } from 'luxon';
+import { nanoid } from 'nanoid';
+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 { prisma } from '@documenso/prisma';
+import {
+  DocumentDataType,
+  DocumentStatus,
+  FieldType,
+  Prisma,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+const ZCreateSinglePlayerDocumentSchema = z.object({
+  document: z.string(),
+  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, document, documentName } = ZCreateSinglePlayerDocumentSchema.parse(value);
+
+  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 pdfBytes = await doc.save();
+
+  const documentToken = await prisma.$transaction(
+    async (tx) => {
+      const documentToken = nanoid();
+
+      // Fetch service user who will be the owner of the document.
+      const serviceUser = await tx.user.findFirstOrThrow({
+        where: {
+          email: SERVICE_USER_EMAIL,
+        },
+      });
+
+      const documentDataBytes = Buffer.from(pdfBytes).toString('base64');
+
+      const { id: documentDataId } = await tx.documentData.create({
+        data: {
+          type: DocumentDataType.BYTES_64,
+          data: documentDataBytes,
+          initialData: documentDataBytes,
+        },
+      });
+
+      // 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: documentToken,
+          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 documentToken;
+    },
+    // Test values.
+    {
+      maxWait: 30000,
+      timeout: 30000,
+    },
+  );
+
+  // Todo: Handle `downloadLink`
+  const template = createElement(DocumentSelfSignedEmailTemplate, {
+    downloadLink: 'https://documenso.com',
+    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 }),
+  });
+
+  return documentToken;
+};
+
+/**
+ * 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,
+  };
+};
--- a/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx
+++ b/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import { Share } from 'lucide-react';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import signingCelebration from '~/assets/signing-celebration.png';
+import ConfettiScreen from '~/components/(marketing)/confetti-screen';
+
+import { DocumentStatus } from '.prisma/client';
+
+interface SinglePlayerModeSuccessProps {
+  className?: string;
+  document: DocumentWithRecipient;
+}
+
+export default function SinglePlayerModeSuccess({
+  className,
+  document,
+}: SinglePlayerModeSuccessProps) {
+  const [showDocumentDialog, setShowDocumentDialog] = useState(false);
+  const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
+  const [documentFile, setDocumentFile] = useState<string | null>(null);
+
+  const { toast } = useToast();
+
+  const handleShowDocumentDialog = async () => {
+    if (isFetchingDocumentFile) {
+      return;
+    }
+
+    setIsFetchingDocumentFile(true);
+
+    try {
+      const data = await getFile(document.documentData);
+
+      setDocumentFile(Buffer.from(data).toString('base64'));
+
+      setShowDocumentDialog(true);
+    } catch {
+      toast({
+        title: 'Something went wrong.',
+        description: 'We were unable to retrieve the document at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+
+    setIsFetchingDocumentFile(false);
+  };
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
+
+  return (
+    <div className="flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center sm:min-h-[calc(100vh-13rem)]">
+      <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+
+      <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
+        You have signed
+      </h2>
+      <h3 className="text-foreground/80 mb-6 text-center text-lg font-semibold md:text-xl lg:mb-8 lg:text-3xl">
+        {document.title}
+      </h3>
+
+      <SigningCard3D
+        name={document.Recipient.name || document.Recipient.email}
+        signingCelebrationImage={signingCelebration}
+      />
+
+      <div className="mt-8 w-full">
+        <div className={cn('flex flex-col items-center', className)}>
+          <div className="grid w-full max-w-sm grid-cols-2 gap-4">
+            {/* TODO: Hook this up */}
+            <Button variant="outline" className="flex-1" disabled>
+              <Share className="mr-2 h-5 w-5" />
+              Share
+            </Button>
+
+            <DocumentDownloadButton
+              className="flex-1"
+              fileName={document.title}
+              documentData={document.documentData}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+            />
+
+            <Button
+              onClick={async () => handleShowDocumentDialog()}
+              loading={isFetchingDocumentFile}
+              className="col-span-2"
+            >
+              Show document
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <p className="text-muted-foreground/60 mt-36 text-center text-sm">
+        View the{' '}
+        <Link
+          href="/pricing"
+          target="_blank"
+          className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+        >
+          community plan
+        </Link>{' '}
+        to access the full range of features provided by Documenso
+      </p>
+
+      <DocumentDialog
+        document={documentFile ?? ''}
+        open={showDocumentDialog}
+        onOpenChange={setShowDocumentDialog}
+      />
+    </div>
+  );
+}
--- a/apps/marketing/src/pages/api/feature-flag/all.ts
+++ b/apps/marketing/src/pages/api/feature-flag/all.ts
@@ -0,0 +1,7 @@
+import handlerFeatureFlagAll from '@documenso/lib/server-only/feature-flags/all';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default handlerFeatureFlagAll;
--- a/apps/marketing/src/pages/api/feature-flag/get.ts
+++ b/apps/marketing/src/pages/api/feature-flag/get.ts
@@ -0,0 +1,7 @@
+import handlerFeatureFlagGet from '@documenso/lib/server-only/feature-flags/get';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default handlerFeatureFlagGet;
--- a/apps/marketing/src/providers/posthog.tsx
+++ b/apps/marketing/src/providers/posthog.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+
+import posthog from 'posthog-js';
+
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+export function PostHogPageview() {
+  const postHogConfig = extractPostHogConfig();
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  if (typeof window !== 'undefined' && postHogConfig) {
+    posthog.init(postHogConfig.key, {
+      api_host: postHogConfig.host,
+      disable_session_recording: true,
+    });
+  }
+
+  useEffect(() => {
+    if (!postHogConfig || !pathname) {
+      return;
+    }
+
+    let url = window.origin + pathname;
+    if (searchParams && searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
+    }
+    posthog.capture('$pageview', {
+      $current_url: url,
+    });
+  }, [pathname, searchParams, postHogConfig]);
+
+  return null;
+}
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -2,7 +2,7 @@
 const path = require('path');
 const { version } = require('./package.json');

-const { parsed: env } = require('dotenv').config({
+require('dotenv').config({
  path: path.join(__dirname, '../../.env.local'),
 });

@@ -22,6 +22,7 @@ const config = {
  ],
  env: {
    APP_VERSION: version,
+    NEXT_PUBLIC_PROJECT: 'web',
  },
  modularizeImports: {
    'lucide-react': {
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,10 +21,11 @@
    "@tanstack/react-query": "^4.29.5",
    "formidable": "^2.1.1",
    "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.277.0",
    "luxon": "^3.4.0",
    "micro": "^10.0.1",
-    "next": "13.4.12",
+    "nanoid": "^4.0.2",
+    "next": "13.4.19",
    "next-auth": "4.22.3",
    "next-plausible": "^3.10.1",
    "next-themes": "^0.2.1",
@@ -49,4 +50,4 @@
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7"
  }
-}
+}
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -55,21 +55,18 @@ export const EditDocumentForm = ({
      title: 'Add Signers',
      description: 'Add the people who will sign the document.',
      stepIndex: 1,
-      onSubmit: () => onAddSignersFormSubmit,
    },
    fields: {
      title: 'Add Fields',
      description: 'Add all relevant fields for each recipient.',
      stepIndex: 2,
      onBackStep: () => setStep('signers'),
-      onSubmit: () => onAddFieldsFormSubmit,
    },
    subject: {
      title: 'Add Subject',
      description: 'Add the subject and message you wish to send to signers.',
      stepIndex: 3,
      onBackStep: () => setStep('fields'),
-      onSubmit: () => onAddSubjectFormSubmit,
    },
  };

--- a/apps/web/src/app/(dashboard)/documents/empty-state.tsx
+++ b/apps/web/src/app/(dashboard)/documents/empty-state.tsx
@@ -1,50 +0,0 @@
-import { Bird, CheckCircle2 } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-
-export type EmptyDocumentProps = { status: ExtendedDocumentStatus };
-
-export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
-  const {
-    title,
-    message,
-    icon: Icon,
-  } = match(status)
-    .with(ExtendedDocumentStatus.COMPLETED, () => ({
-      title: 'Nothing to do',
-      message:
-        'There are no completed documents yet. Documents that you have created or received that become completed will appear here later.',
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.DRAFT, () => ({
-      title: 'No active drafts',
-      message:
-        'There are no active drafts at then current moment. You can upload a document to start drafting.',
-      icon: CheckCircle2,
-    }))
-    .with(ExtendedDocumentStatus.ALL, () => ({
-      title: "We're all empty",
-      message:
-        'You have not yet created or received any documents. To create a document please upload one.',
-      icon: Bird,
-    }))
-    .otherwise(() => ({
-      title: 'Nothing to do',
-      message:
-        'All documents are currently actioned. Any new documents are sent or recieved they will start to appear here.',
-      icon: CheckCircle2,
-    }));
-
-  return (
-    <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
-      <Icon className="h-12 w-12" strokeWidth={1.5} />
-
-      <div className="text-center">
-        <h3 className="text-lg font-semibold">{title}</h3>
-
-        <p className="mt-2 max-w-[60ch]">{message}</p>
-      </div>
-    </div>
-  );
-};
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -12,7 +12,6 @@ import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/ty
 import { DocumentStatus } from '~/components/formatter/document-status';

 import { DocumentsDataTable } from './data-table';
-import { EmptyDocumentState } from './empty-state';
 import { UploadDocument } from './upload-document';

 export type DocumentsPageProps = {
@@ -97,8 +96,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
      </div>

      <div className="mt-8">
-        {results.count > 0 && <DocumentsDataTable results={results} />}
-        {results.count === 0 && <EmptyDocumentState status={status} />}
+        <DocumentsDataTable results={results} />
      </div>
    </div>
  );
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -4,12 +4,12 @@ import { redirect } from 'next/navigation';
 import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
 import { SubscriptionStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';

 import { LocaleDate } from '~/components/formatter/locale-date';
-import { getServerComponentFlag } from '~/helpers/get-server-component-feature-flag';

 export default async function BillingSettingsPage() {
  const user = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
@@ -8,10 +8,11 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/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 { DocumentStatus, FieldType } from '@documenso/prisma/client';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { SigningCard } from '@documenso/ui/components/signing-card';
 import { Button } from '@documenso/ui/primitives/button';

-import { DownloadButton } from './download-button';
-import { SigningCard } from './signing-card';
+import signingCelebration from '~/assets/signing-celebration.png';

 export type CompletedSigningPageProps = {
  params: {
@@ -53,7 +54,7 @@ export default async function CompletedSigningPage({
  return (
    <div className="flex flex-col items-center pt-24">
      {/* Card with recipient */}
-      <SigningCard name={recipientName} />
+      <SigningCard name={recipientName} signingCelebrationImage={signingCelebration} />

      <div className="mt-6">
        {match(document.status)
@@ -94,7 +95,7 @@ export default async function CompletedSigningPage({
          Share
        </Button>

-        <DownloadButton
+        <DocumentDownloadButton
          className="flex-1"
          fileName={document.title}
          documentData={documentData}
@@ -103,7 +104,7 @@ export default async function CompletedSigningPage({
      </div>

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

 import React from 'react';

+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
 import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';

-import { useFieldPageCoords } from '~/hooks/use-field-page-coords';
-
 export type SignatureFieldProps = {
  field: FieldWithSignature;
  loading?: boolean;
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -2,15 +2,15 @@ import { Suspense } from 'react';

 import { Caveat, Inter } from 'next/font/google';

+import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 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 { 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 { getServerComponentAllFlags } from '~/helpers/get-server-component-feature-flag';
-import { FeatureFlagProvider } from '~/providers/feature-flag';
 import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
 import { PostHogPageview } from '~/providers/posthog';
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -1,26 +0,0 @@
-import Link from 'next/link';
-
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { Button } from '@documenso/ui/primitives/button';
-
-import NotFoundPartial from '~/components/partials/not-found';
-
-export default async function NotFound() {
-  const session = await getServerComponentSession();
-
-  return (
-    <NotFoundPartial>
-      {session && (
-        <Button className="w-32" asChild>
-          <Link href="/documents">Documents</Link>
-        </Button>
-      )}
-
-      {!session && (
-        <Button className="w-32" asChild>
-          <Link href="/signin">Sign In</Link>
-        </Button>
-      )}
-    </NotFoundPartial>
-  );
-}
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@@ -10,13 +10,13 @@ import {
  User as LucideUser,
  Monitor,
  Moon,
-  Palette,
  Sun,
  UserCog,
 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 import { useTheme } from 'next-themes';

+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
 import { User } from '@documenso/prisma/client';
@@ -27,25 +27,17 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';

-import { useFeatureFlags } from '~/providers/feature-flag';
-
 export type ProfileDropdownProps = {
  user: User;
 };

 export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { getFlag } = useFeatureFlags();
  const { theme, setTheme } = useTheme();
+  const { getFlag } = useFeatureFlags();
  const isUserAdmin = isAdmin(user);

  const isBillingEnabled = getFlag('app_billing');
@@ -105,30 +97,28 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {

        <DropdownMenuSeparator />

-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <Palette className="mr-2 h-4 w-4" />
-            Themes
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent>
-              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-                <DropdownMenuRadioItem value="light">
-                  <Sun className="mr-2 h-4 w-4" /> Light
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="dark">
-                  <Moon className="mr-2 h-4 w-4" />
-                  Dark
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="system">
-                  <Monitor className="mr-2 h-4 w-4" />
-                  System
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
+        {theme === 'light' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('light')}>
+            <Sun className="mr-2 h-4 w-4" />
+            Light Mode
+          </DropdownMenuItem>
+        )}
+        {theme === 'dark' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('dark')}>
+            <Moon className="mr-2 h-4 w-4" />
+            Dark Mode
+          </DropdownMenuItem>
+        )}
+
+        {theme === 'system' ? null : (
+          <DropdownMenuItem onClick={() => setTheme('system')}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System Theme
+          </DropdownMenuItem>
+        )}
+
        <DropdownMenuSeparator />
+
        <DropdownMenuItem asChild>
          <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
            <Github className="mr-2 h-4 w-4" />
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
@@ -7,11 +7,10 @@ import { usePathname } from 'next/navigation';

 import { CreditCard, Key, User } from 'lucide-react';

+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 { useFeatureFlags } from '~/providers/feature-flag';
-
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;

 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
@@ -7,11 +7,10 @@ import { usePathname } from 'next/navigation';

 import { CreditCard, Key, User } from 'lucide-react';

+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 { useFeatureFlags } from '~/providers/feature-flag';
-
 export type MobileNavProps = HTMLAttributes<HTMLDivElement>;

 export const MobileNav = ({ className, ...props }: MobileNavProps) => {
--- a/apps/web/src/components/forms/edit-document/add-subject.action.ts
+++ b/apps/web/src/components/forms/edit-document/add-subject.action.ts
@@ -1,7 +1,6 @@
 'use server';

 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';

@@ -9,20 +8,12 @@ export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
  documentId: number;
 };

-export const completeDocument = async ({ documentId, email }: CompleteDocumentActionInput) => {
+export const completeDocument = async ({ documentId }: CompleteDocumentActionInput) => {
  'use server';

  const { id: userId } = await getRequiredServerComponentSession();

-  if (email.message || email.subject) {
-    await upsertDocumentMeta({
-      documentId,
-      subject: email.subject,
-      message: email.message,
-    });
-  }
-
-  return await sendDocument({
+  await sendDocument({
    userId,
    documentId,
  });
--- a/apps/web/src/components/motion.tsx
+++ b/apps/web/src/components/motion.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export * from 'framer-motion';
+
+export const MotionDiv = motion.div;
--- a/apps/web/src/components/partials/not-found.tsx
+++ b/apps/web/src/components/partials/not-found.tsx
@@ -1,66 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-
-import { motion } from 'framer-motion';
-import { ChevronLeft } from 'lucide-react';
-
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-
-import backgroundPattern from '~/assets/background-pattern.png';
-
-export type NotFoundPartialProps = {
-  children?: React.ReactNode;
-};
-
-export default function NotFoundPartial({ children }: NotFoundPartialProps) {
-  const router = useRouter();
-
-  return (
-    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
-      <div className="absolute -inset-24 -z-10">
-        <motion.div
-          className="flex h-full w-full items-center justify-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
-        >
-          <Image
-            src={backgroundPattern}
-            alt="background pattern"
-            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
-            priority
-          />
-        </motion.div>
-      </div>
-
-      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
-        <div>
-          <p className="text-muted-foreground font-semibold">404 Page not found</p>
-
-          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
-
-          <p className="text-muted-foreground mt-4 text-sm">
-            The page you are looking for was moved, removed, renamed or might never have existed.
-          </p>
-
-          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
-            <Button
-              variant="ghost"
-              className="w-32"
-              onClick={() => {
-                void router.back();
-              }}
-            >
-              <ChevronLeft className="mr-2 h-4 w-4" />
-              Go Back
-            </Button>
-
-            {children}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/apps/web/src/pages/api/feature-flag/all.ts
+++ b/apps/web/src/pages/api/feature-flag/all.ts
@@ -1,44 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-import { getToken } from 'next-auth/jwt';
-
-import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
-
-import PostHogServerClient from '~/helpers/get-post-hog-server-client';
-
-import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
+import handlerFeatureFlagAll from '@documenso/lib/server-only/feature-flags/all';

 export const config = {
  runtime: 'edge',
 };

-/**
- * Get all the evaluated feature flags based on the current user if possible.
- */
-export default async function handler(req: Request) {
-  const requestHeaders = Object.fromEntries(req.headers.entries());
-
-  const nextReq = new NextRequest(req, {
-    headers: requestHeaders,
-  });
-
-  const token = await getToken({ req: nextReq });
-
-  const postHog = PostHogServerClient();
-
-  // Return the local feature flags if PostHog is not enabled, true by default.
-  // The front end should not call this API if PostHog is not enabled to reduce network requests.
-  if (!postHog) {
-    return NextResponse.json(LOCAL_FEATURE_FLAGS);
-  }
-
-  const distinctId = extractDistinctUserId(token, nextReq);
-
-  const featureFlags = await postHog.getAllFlags(distinctId, mapJwtToFlagProperties(token));
-
-  const res = NextResponse.json(featureFlags);
-
-  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
-
-  return res;
-}
+export default handlerFeatureFlagAll;
--- a/apps/web/src/pages/api/feature-flag/get.ts
+++ b/apps/web/src/pages/api/feature-flag/get.ts
@@ -1,122 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-import { JWT, getToken } from 'next-auth/jwt';
-
-import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
-import { nanoid } from '@documenso/lib/universal/id';
-
-import PostHogServerClient from '~/helpers/get-post-hog-server-client';
+import handlerFeatureFlagGet from '@documenso/lib/server-only/feature-flags/get';

 export const config = {
  runtime: 'edge',
 };

-/**
- * Evaluate a single feature flag based on the current user if possible.
- *
- * @param req The request with a query parameter `flag`. Example request URL: /api/feature-flag/get?flag=flag-name
- * @returns A Response with the feature flag value.
- */
-export default async function handler(req: Request) {
-  const { searchParams } = new URL(req.url ?? '');
-  const flag = searchParams.get('flag');
-
-  const requestHeaders = Object.fromEntries(req.headers.entries());
-
-  const nextReq = new NextRequest(req, {
-    headers: requestHeaders,
-  });
-
-  const token = await getToken({ req: nextReq });
-
-  if (!flag) {
-    return NextResponse.json(
-      {
-        error: 'Missing flag query parameter.',
-      },
-      {
-        status: 400,
-        headers: {
-          'content-type': 'application/json',
-        },
-      },
-    );
-  }
-
-  const postHog = PostHogServerClient();
-
-  // Return the local feature flags if PostHog is not enabled, true by default.
-  // The front end should not call this API if PostHog is disabled to reduce network requests.
-  if (!postHog) {
-    return NextResponse.json(LOCAL_FEATURE_FLAGS[flag] ?? true);
-  }
-
-  const distinctId = extractDistinctUserId(token, nextReq);
-
-  const featureFlag = await postHog.getFeatureFlag(flag, distinctId, mapJwtToFlagProperties(token));
-
-  const res = NextResponse.json(featureFlag);
-
-  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
-
-  return res;
-}
-
-/**
- * Map a JWT to properties which are consumed by PostHog to evaluate feature flags.
- *
- * @param jwt The JWT of the current user.
- * @returns A map of properties which are consumed by PostHog.
- */
-export const mapJwtToFlagProperties = (
-  jwt?: JWT | null,
-): {
-  groups?: Record<string, string>;
-  personProperties?: Record<string, string>;
-  groupProperties?: Record<string, Record<string, string>>;
-} => {
-  return {
-    personProperties: {
-      email: jwt?.email ?? '',
-    },
-    groupProperties: {
-      // Add properties to group users into different groups, such as billing plan.
-    },
-  };
-};
-
-/**
- * Extract a distinct ID from a JWT and request.
- *
- * Will fallback to a random ID if no ID could be extracted from either the JWT or request.
- *
- * @param jwt The JWT of the current user.
- * @param request Request potentially containing a PostHog `distinct_id` cookie.
- * @returns A distinct user ID.
- */
-export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): string => {
-  const config = extractPostHogConfig();
-
-  const email = jwt?.email;
-  const userId = jwt?.id.toString();
-
-  let fallbackDistinctId = nanoid();
-
-  if (config) {
-    try {
-      const postHogCookie = JSON.parse(
-        request.cookies.get(`ph_${config.key}_posthog`)?.value ?? '',
-      );
-
-      const postHogDistinctId = postHogCookie['distinct_id'];
-
-      if (typeof postHogDistinctId === 'string') {
-        fallbackDistinctId = postHogDistinctId;
-      }
-    } catch {
-      // Do nothing.
-    }
-  }
-
-  return email ?? userId ?? fallbackDistinctId;
-};
+export default handlerFeatureFlagGet;
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,14 +41,16 @@
        "@hookform/resolvers": "^3.1.0",
        "contentlayer": "^0.3.4",
        "framer-motion": "^10.12.8",
-        "lucide-react": "^0.214.0",
+        "lucide-react": "^0.277.0",
        "micro": "^10.0.1",
-        "next": "13.4.12",
+        "next": "13.4.19",
        "next-auth": "4.22.3",
        "next-contentlayer": "^0.3.4",
        "next-plausible": "^3.10.1",
        "perfect-freehand": "^1.2.0",
+        "posthog-js": "^1.77.3",
        "react": "18.2.0",
+        "react-confetti": "^6.1.0",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.43.9",
        "react-icons": "^4.8.0",
@@ -78,10 +80,11 @@
        "@tanstack/react-query": "^4.29.5",
        "formidable": "^2.1.1",
        "framer-motion": "^10.12.8",
-        "lucide-react": "^0.214.0",
+        "lucide-react": "^0.277.0",
        "luxon": "^3.4.0",
        "micro": "^10.0.1",
-        "next": "13.4.12",
+        "nanoid": "^4.0.2",
+        "next": "13.4.19",
        "next-auth": "4.22.3",
        "next-plausible": "^3.10.1",
        "next-themes": "^0.2.1",
@@ -2444,9 +2447,9 @@
      }
    },
    "node_modules/@hookform/resolvers": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.1.1.tgz",
-      "integrity": "sha512-tS16bAUkqjITNSvbJuO1x7MXbn7Oe8ZziDTJdA9mMvsoYthnOOiznOTGBYwbdlYBgU+tgpI/BtTU3paRbCuSlg==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.0.tgz",
+      "integrity": "sha512-tgK3nWlfFLlqhqpXZmFMP3RN5E7mlbGfnM2h2ILVsW1TNGuFSod0ePW0grlIY2GAbL4pJdtmOT4HQSZsTwOiKg==",
      "peerDependencies": {
        "react-hook-form": "^7.0.0"
      }
@@ -2818,22 +2821,22 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.12.tgz",
-      "integrity": "sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ=="
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.19.tgz",
+      "integrity": "sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ=="
    },
    "node_modules/@next/eslint-plugin-next": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.12.tgz",
-      "integrity": "sha512-6rhK9CdxEgj/j1qvXIyLTWEaeFv7zOK8yJMulz3Owel0uek0U9MJCGzmKgYxM3aAUBo3gKeywCZKyQnJKto60A==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.19.tgz",
+      "integrity": "sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==",
      "dependencies": {
        "glob": "7.1.7"
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz",
-      "integrity": "sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz",
+      "integrity": "sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==",
      "cpu": [
        "arm64"
      ],
@@ -2846,9 +2849,9 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.12.tgz",
-      "integrity": "sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.19.tgz",
+      "integrity": "sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==",
      "cpu": [
        "x64"
      ],
@@ -2861,9 +2864,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.12.tgz",
-      "integrity": "sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.19.tgz",
+      "integrity": "sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==",
      "cpu": [
        "arm64"
      ],
@@ -2876,9 +2879,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.12.tgz",
-      "integrity": "sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.19.tgz",
+      "integrity": "sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==",
      "cpu": [
        "arm64"
      ],
@@ -2891,9 +2894,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.12.tgz",
-      "integrity": "sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.19.tgz",
+      "integrity": "sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==",
      "cpu": [
        "x64"
      ],
@@ -2906,9 +2909,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.12.tgz",
-      "integrity": "sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.19.tgz",
+      "integrity": "sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==",
      "cpu": [
        "x64"
      ],
@@ -2921,9 +2924,9 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.12.tgz",
-      "integrity": "sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.19.tgz",
+      "integrity": "sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==",
      "cpu": [
        "arm64"
      ],
@@ -2936,9 +2939,9 @@
      }
    },
    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.12.tgz",
-      "integrity": "sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.19.tgz",
+      "integrity": "sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==",
      "cpu": [
        "ia32"
      ],
@@ -2951,9 +2954,9 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.12.tgz",
-      "integrity": "sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.19.tgz",
+      "integrity": "sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==",
      "cpu": [
        "x64"
      ],
@@ -6272,9 +6275,9 @@
      "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
    },
    "node_modules/@types/luxon": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.1.tgz",
-      "integrity": "sha512-XOS5nBcgEeP2PpcqJHjCWhUCAzGfXIU8ILOSLpx2FhxqMW9KdxgCGXNOEKGVBfveKtIpztHzKK5vSRVLyW/NqA==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.2.tgz",
+      "integrity": "sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==",
      "dev": true
    },
    "node_modules/@types/mdast": {
@@ -9594,19 +9597,19 @@
      }
    },
    "node_modules/eslint-config-next": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.12.tgz",
-      "integrity": "sha512-ZF0r5vxKaVazyZH/37Au/XItiG7qUOBw+HaH3PeyXltIMwXorsn6bdrl0Nn9N5v5v9spc+6GM2ryjugbjF6X2g==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.19.tgz",
+      "integrity": "sha512-WE8367sqMnjhWHvR5OivmfwENRQ1ixfNE9hZwQqNCsd+iM3KnuMc1V8Pt6ytgjxjf23D+xbesADv9x3xaKfT3g==",
      "dependencies": {
-        "@next/eslint-plugin-next": "13.4.12",
+        "@next/eslint-plugin-next": "13.4.19",
        "@rushstack/eslint-patch": "^1.1.3",
-        "@typescript-eslint/parser": "^5.42.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
        "eslint-import-resolver-node": "^0.3.6",
        "eslint-import-resolver-typescript": "^3.5.2",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-react": "^7.31.7",
-        "eslint-plugin-react-hooks": "5.0.0-canary-7118f5dd7-20230705"
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
      },
      "peerDependencies": {
        "eslint": "^7.23.0 || ^8.0.0",
@@ -12685,17 +12688,17 @@
      }
    },
    "node_modules/lucide-react": {
-      "version": "0.214.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.214.0.tgz",
-      "integrity": "sha512-/vRi1wnFV2lqyIIkghQ3dDLu0eA9zykRQN9GZBwydzv+kB/2Q3S4X6OYB+aRqLXwl438vfVBqyYov2z0LJeoqA==",
+      "version": "0.277.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.277.0.tgz",
+      "integrity": "sha512-9epmznme+vW14V9d2rsMeLr3fMnf59lYDUOVUg6s7oVN22Zq8h4B30+3CIdFFV9UXCjPG5ZNKHfO/hf96cl46A==",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
      }
    },
    "node_modules/luxon": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.0.tgz",
-      "integrity": "sha512-7eDo4Pt7aGhoCheGFIuq4Xa2fJm4ZpmldpGhjTYBNUYNCN6TIEP6v7chwwwt3KRp7YR+rghbfvjyo3V5y9hgBw==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.2.tgz",
+      "integrity": "sha512-uBoAVCVcajsrqy3pv7eo5jEUz1oeLmCcnMv8n4AJpT5hbpN9lUssAXibNElpbLce3Mhm9dyBzwYLs9zctM/0tA==",
      "engines": {
        "node": ">=12"
      }
@@ -13981,11 +13984,11 @@
      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
    },
    "node_modules/next": {
-      "version": "13.4.12",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.12.tgz",
-      "integrity": "sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==",
+      "version": "13.4.19",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.4.19.tgz",
+      "integrity": "sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==",
      "dependencies": {
-        "@next/env": "13.4.12",
+        "@next/env": "13.4.19",
        "@swc/helpers": "0.5.1",
        "busboy": "1.6.0",
        "caniuse-lite": "^1.0.30001406",
@@ -14001,19 +14004,18 @@
        "node": ">=16.8.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.12",
-        "@next/swc-darwin-x64": "13.4.12",
-        "@next/swc-linux-arm64-gnu": "13.4.12",
-        "@next/swc-linux-arm64-musl": "13.4.12",
-        "@next/swc-linux-x64-gnu": "13.4.12",
-        "@next/swc-linux-x64-musl": "13.4.12",
-        "@next/swc-win32-arm64-msvc": "13.4.12",
-        "@next/swc-win32-ia32-msvc": "13.4.12",
-        "@next/swc-win32-x64-msvc": "13.4.12"
+        "@next/swc-darwin-arm64": "13.4.19",
+        "@next/swc-darwin-x64": "13.4.19",
+        "@next/swc-linux-arm64-gnu": "13.4.19",
+        "@next/swc-linux-arm64-musl": "13.4.19",
+        "@next/swc-linux-x64-gnu": "13.4.19",
+        "@next/swc-linux-x64-musl": "13.4.19",
+        "@next/swc-win32-arm64-msvc": "13.4.19",
+        "@next/swc-win32-ia32-msvc": "13.4.19",
+        "@next/swc-win32-x64-msvc": "13.4.19"
      },
      "peerDependencies": {
        "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.3.0"
@@ -14022,9 +14024,6 @@
        "@opentelemetry/api": {
          "optional": true
        },
-        "fibers": {
-          "optional": true
-        },
        "sass": {
          "optional": true
        }
@@ -15043,9 +15042,9 @@
      }
    },
    "node_modules/posthog-js": {
-      "version": "1.75.3",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.75.3.tgz",
-      "integrity": "sha512-q5xP4R/Tx8E6H0goZQjY+URMLATFiYXc2raHA+31aNvpBs118fPTmExa4RK6MgRZDFhBiMUBZNT6aj7dM3SyUQ==",
+      "version": "1.77.3",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.77.3.tgz",
+      "integrity": "sha512-DKsGpBIUjQSihhGruEW8wpVCkeDxU4jz7gADdXX2jEWV6bl4WpUPxjo1ukidVDFvvc/ihCM5PQWMQrItexdpSA==",
      "dependencies": {
        "fflate": "^0.4.1"
      }
@@ -15559,6 +15558,20 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
+      "dependencies": {
+        "tween-functions": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
    "node_modules/react-day-picker": {
      "version": "8.8.0",
      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.8.0.tgz",
@@ -16089,9 +16102,9 @@
      }
    },
    "node_modules/react-hook-form": {
-      "version": "7.45.2",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.2.tgz",
-      "integrity": "sha512-9s45OdTaKN+4NSTbXVqeDITd/nwIg++nxJGL8+OD5uf1DxvhsXQ641kaYHk5K28cpIOTYm71O/fYk7rFaygb3A==",
+      "version": "7.45.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.4.tgz",
+      "integrity": "sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==",
      "engines": {
        "node": ">=12.22.0"
      },
@@ -18639,6 +18652,11 @@
        "node": ">= 6"
      }
    },
+    "node_modules/tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA=="
+    },
    "node_modules/typanion": {
      "version": "3.13.0",
      "resolved": "https://registry.npmjs.org/typanion/-/typanion-3.13.0.tgz",
@@ -19439,7 +19457,7 @@
        "@typescript-eslint/eslint-plugin": "^5.59.2",
        "@typescript-eslint/parser": "^5.59.2",
        "eslint": "^8.40.0",
-        "eslint-config-next": "13.4.12",
+        "eslint-config-next": "13.4.19",
        "eslint-config-prettier": "^8.8.0",
        "eslint-config-turbo": "^1.9.3",
        "eslint-plugin-package-json": "^0.1.4",
@@ -19466,7 +19484,7 @@
        "bcrypt": "^5.1.0",
        "luxon": "^3.4.0",
        "nanoid": "^4.0.2",
-        "next": "13.4.12",
+        "next": "13.4.19",
        "next-auth": "4.22.3",
        "pdf-lib": "^1.17.1",
        "react": "18.2.0",
@@ -19549,6 +19567,7 @@
      "license": "MIT",
      "dependencies": {
        "@documenso/lib": "*",
+        "@hookform/resolvers": "^3.3.0",
        "@radix-ui/react-accordion": "^1.1.1",
        "@radix-ui/react-alert-dialog": "^1.0.3",
        "@radix-ui/react-aspect-ratio": "^1.0.2",
@@ -19569,6 +19588,7 @@
        "@radix-ui/react-select": "^1.2.1",
        "@radix-ui/react-separator": "^1.0.2",
        "@radix-ui/react-slider": "^1.1.1",
+        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.2",
        "@radix-ui/react-tabs": "^1.0.3",
        "@radix-ui/react-toast": "^1.1.3",
@@ -19579,17 +19599,21 @@
        "clsx": "^1.2.1",
        "cmdk": "^0.2.0",
        "framer-motion": "^10.12.8",
-        "lucide-react": "^0.214.0",
-        "next": "13.4.12",
+        "lucide-react": "^0.277.0",
+        "luxon": "^3.4.2",
+        "next": "13.4.19",
        "pdfjs-dist": "3.6.172",
        "react-day-picker": "^8.7.1",
+        "react-hook-form": "^7.45.4",
        "react-pdf": "^7.3.3",
+        "react-rnd": "^10.4.1",
        "tailwind-merge": "^1.12.0",
        "tailwindcss-animate": "^1.0.5"
      },
      "devDependencies": {
        "@documenso/tailwind-config": "*",
        "@documenso/tsconfig": "*",
+        "@types/luxon": "^3.3.2",
        "@types/react": "18.2.18",
        "@types/react-dom": "18.2.7",
        "react": "18.2.0",
--- a/packages/email/template-components/template-document-completed.tsx
+++ b/packages/email/template-components/template-document-completed.tsx
@@ -1,17 +1,15 @@
-import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';

 import * as config from '@documenso/tailwind-config';

 export interface TemplateDocumentCompletedProps {
  downloadLink: string;
-  reviewLink: string;
  documentName: string;
  assetBaseUrl: string;
 }

 export const TemplateDocumentCompleted = ({
  downloadLink,
-  reviewLink,
  documentName,
  assetBaseUrl,
 }: TemplateDocumentCompletedProps) => {
@@ -29,23 +27,11 @@ export const TemplateDocumentCompleted = ({
        },
      }}
    >
-      <Section>
-        <Row className="table-fixed">
-          <Column />
+      <Section className="flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>

-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
-          </Column>
-
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
          Completed
@@ -56,17 +42,17 @@ export const TemplateDocumentCompleted = ({
        </Text>

        <Text className="my-1 text-center text-base text-slate-400">
-          Continue by downloading or reviewing the document.
+          Continue by downloading the document.
        </Text>

        <Section className="mb-6 mt-8 text-center">
-          <Button
+          {/* <Button
            className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
            href={reviewLink}
          >
            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
            Review
-          </Button>
+          </Button> */}
          <Button
            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
            href={downloadLink}
--- a/packages/email/template-components/template-document-invite.tsx
+++ b/packages/email/template-components/template-document-invite.tsx
@@ -1,4 +1,4 @@
-import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';

 import * as config from '@documenso/tailwind-config';

@@ -30,26 +30,13 @@ export const TemplateDocumentInvite = ({
        },
      }}
    >
-      <Section className="mt-4">
-        <Row className="table-fixed">
-          <Column />
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>

-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
-          </Column>
-
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has invited you to sign
-          <br />"{documentName}"
+          {inviterName} has invited you to sign "{documentName}"
        </Text>

        <Text className="my-1 text-center text-base text-slate-400">
--- a/packages/email/template-components/template-document-pending.tsx
+++ b/packages/email/template-components/template-document-pending.tsx
@@ -1,4 +1,4 @@
-import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Img, Section, Tailwind, Text } from '@react-email/components';

 import * as config from '@documenso/tailwind-config';

@@ -25,23 +25,11 @@ export const TemplateDocumentPending = ({
        },
      }}
    >
-      <Section>
-        <Row className="table-fixed">
-          <Column />
+      <Section className="flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>

-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
-          </Column>
-
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
          <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
          Waiting for others
--- a/packages/email/template-components/template-document-self-signed.tsx
+++ b/packages/email/template-components/template-document-self-signed.tsx
@@ -0,0 +1,69 @@
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateDocumentSelfSignedProps {
+  downloadLink: string;
+  documentName: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateDocumentSelfSigned = ({
+  downloadLink,
+  documentName,
+  assetBaseUrl,
+}: TemplateDocumentSelfSignedProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+          <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
+          Completed
+        </Text>
+
+        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+          You have signed “{documentName}”
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Check out our plans to access the full suite of features.
+        </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href="https://documenso.com/pricing"
+          >
+            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            View plans
+          </Button>
+          <Button
+            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href={downloadLink}
+          >
+            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            Download
+          </Button>
+        </Section>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateDocumentSelfSigned;
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@@ -21,7 +21,6 @@ export type DocumentCompletedEmailTemplateProps = Partial<TemplateDocumentComple

 export const DocumentCompletedEmailTemplate = ({
  downloadLink = 'https://documenso.com',
-  reviewLink = 'https://documenso.com',
  documentName = 'Open Source Pledge.pdf',
  assetBaseUrl = 'http://localhost:3002',
 }: DocumentCompletedEmailTemplateProps) => {
@@ -56,7 +55,6 @@ export const DocumentCompletedEmailTemplate = ({

                <TemplateDocumentCompleted
                  downloadLink={downloadLink}
-                  reviewLink={reviewLink}
                  documentName={documentName}
                  assetBaseUrl={assetBaseUrl}
                />
--- a/packages/email/templates/document-invite.tsx
+++ b/packages/email/templates/document-invite.tsx
@@ -20,9 +20,7 @@ import {
 } from '../template-components/template-document-invite';
 import TemplateFooter from '../template-components/template-footer';

-export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
-  customBody?: string;
-};
+export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps>;

 export const DocumentInviteEmailTemplate = ({
  inviterName = 'Lucas Smith',
@@ -30,7 +28,6 @@ export const DocumentInviteEmailTemplate = ({
  documentName = 'Open Source Pledge.pdf',
  signDocumentLink = 'https://documenso.com',
  assetBaseUrl = 'http://localhost:3002',
-  customBody,
 }: DocumentInviteEmailTemplateProps) => {
  const previewText = `Completed Document`;

@@ -81,11 +78,7 @@ export const DocumentInviteEmailTemplate = ({
                </Text>

                <Text className="mt-2 text-base text-slate-400">
-                  {customBody ? (
-                    <pre className="font-sans text-base text-slate-400">{customBody}</pre>
-                  ) : (
-                    `${inviterName} has invited you to sign the document "${documentName}".`
-                  )}
+                  {inviterName} has invited you to sign the document "{documentName}".
                </Text>
              </Section>
            </Container>
--- a/packages/email/templates/document-self-signed.tsx
+++ b/packages/email/templates/document-self-signed.tsx
@@ -0,0 +1,74 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+} from '@react-email/components';
+
+import config from '@documenso/tailwind-config';
+
+import {
+  TemplateDocumentSelfSigned,
+  TemplateDocumentSelfSignedProps,
+} from '../template-components/template-document-self-signed';
+import TemplateFooter from '../template-components/template-footer';
+
+export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps;
+
+export const DocumentSelfSignedEmailTemplate = ({
+  downloadLink = 'https://documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentSelfSignedTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateDocumentSelfSigned
+                  downloadLink={downloadLink}
+                  documentName={documentName}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentSelfSignedEmailTemplate;
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -7,7 +7,7 @@
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "eslint": "^8.40.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "13.4.19",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-turbo": "^1.9.3",
    "eslint-plugin-package-json": "^0.1.4",
@@ -15,4 +15,4 @@
    "eslint-plugin-react": "^7.32.2",
    "typescript": "^5.1.6"
  }
-}
+}
--- a/packages/lib/client-only/hooks/use-analytics.ts
+++ b/packages/lib/client-only/hooks/use-analytics.ts
@@ -0,0 +1,61 @@
+import { posthog } from 'posthog-js';
+
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import {
+  FEATURE_FLAG_GLOBAL_SESSION_RECORDING,
+  extractPostHogConfig,
+} from '@documenso/lib/constants/feature-flags';
+
+export function useAnalytics() {
+  const featureFlags = useFeatureFlags();
+  const isPostHogEnabled = extractPostHogConfig();
+
+  /**
+   * Capture an analytic event.
+   *
+   * @param event The event name.
+   * @param properties Properties to attach to the event.
+   */
+  const capture = (event: string, properties?: Record<string, unknown>) => {
+    if (!isPostHogEnabled) {
+      return;
+    }
+
+    posthog.capture(event, properties);
+  };
+
+  /**
+   * Start the session recording.
+   *
+   * @param eventFlag The event to check against feature flags to determine whether tracking is enabled.
+   */
+  const startSessionRecording = (eventFlag?: string) => {
+    const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
+    const isSessionRecordingEnabledForEvent = Boolean(eventFlag && featureFlags.getFlag(eventFlag));
+
+    if (!isPostHogEnabled || !isSessionRecordingEnabled || !isSessionRecordingEnabledForEvent) {
+      return;
+    }
+
+    posthog.startSessionRecording();
+  };
+
+  /**
+   * Stop the current session recording.
+   */
+  const stopSessionRecording = () => {
+    const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
+
+    if (!isPostHogEnabled || !isSessionRecordingEnabled) {
+      return;
+    }
+
+    posthog.stopSessionRecording();
+  };
+
+  return {
+    capture,
+    startSessionRecording,
+    stopSessionRecording,
+  };
+}
--- a/packages/lib/client-only/hooks/use-debounced-value.ts
+++ b/packages/lib/client-only/hooks/use-debounced-value.ts
--- a/packages/lib/client-only/hooks/use-element-scale-size.ts
+++ b/packages/lib/client-only/hooks/use-element-scale-size.ts
@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import { RefObject, useEffect, useState } from 'react';
+
+/**
+ * Calculate the width and height of a text element.
+ *
+ * @param text The text to calculate the width and height of.
+ * @param fontSize The font size to apply to the text.
+ * @param fontFamily The font family to apply to the text.
+ * @returns Returns the width and height of the text.
+ */
+function calculateTextDimensions(
+  text: string,
+  fontSize: string,
+  fontFamily: string,
+): { width: number; height: number } {
+  // Reuse old canvas if available.
+  let canvas = (calculateTextDimensions as { canvas?: HTMLCanvasElement }).canvas;
+
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    (calculateTextDimensions as { canvas?: HTMLCanvasElement }).canvas = canvas;
+  }
+
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return { width: 0, height: 0 };
+  }
+
+  context.font = `${fontSize} ${fontFamily}`;
+  const metrics = context.measureText(text);
+
+  return {
+    width: metrics.width,
+    height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
+  };
+}
+
+/**
+ * Calculate the scaling size to apply to a text to fit it within a container.
+ *
+ * @param container The container dimensions to fit the text within.
+ * @param text The text to fit within the container.
+ * @param fontSize The font size to apply to the text.
+ * @param fontFamily The font family to apply to the text.
+ * @returns Returns a value between 0 and 1 which represents the scaling factor to apply to the text.
+ */
+export const calculateTextScaleSize = (
+  container: { width: number; height: number },
+  text: string,
+  fontSize: string,
+  fontFamily: string,
+) => {
+  const { width, height } = calculateTextDimensions(text, fontSize, fontFamily);
+  return Math.min(container.width / width, container.height / height, 1);
+};
+
+/**
+ * Given a container and child element, calculate the scaling size to apply to the child.
+ */
+export function useElementScaleSize(
+  container: { width: number; height: number },
+  child: RefObject<HTMLElement | null>,
+  fontSize: number,
+  fontFamily: string,
+) {
+  const [scalingFactor, setScalingFactor] = useState(1);
+
+  useEffect(() => {
+    if (!child.current) {
+      return;
+    }
+
+    const scaleSize = calculateTextScaleSize(
+      container,
+      child.current.innerText,
+      `${fontSize}px`,
+      fontFamily,
+    );
+
+    setScalingFactor(scaleSize);
+  }, [child, container, fontFamily, fontSize]);
+
+  return scalingFactor;
+}
--- a/packages/lib/client-only/hooks/use-field-page-coords.ts
+++ b/packages/lib/client-only/hooks/use-field-page-coords.ts
--- a/packages/lib/client-only/hooks/use-is-mounted.ts
+++ b/packages/lib/client-only/hooks/use-is-mounted.ts
@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted;
+};
--- a/packages/lib/client-only/hooks/use-window-size.ts
+++ b/packages/lib/client-only/hooks/use-window-size.ts
--- a/packages/lib/client-only/providers/feature-flag.tsx
+++ b/packages/lib/client-only/providers/feature-flag.tsx
@@ -7,8 +7,7 @@ import {
  LOCAL_FEATURE_FLAGS,
  isFeatureFlagEnabled,
 } from '@documenso/lib/constants/feature-flags';
-
-import { getAllFlags } from '~/helpers/get-feature-flag';
+import { getAllFlags } from '@documenso/lib/universal/get-feature-flag';

 import { TFeatureFlagValue } from './feature-flag.types';

--- a/packages/lib/client-only/providers/feature-flag.types.ts
+++ b/packages/lib/client-only/providers/feature-flag.types.ts
--- a/packages/lib/constants/app.ts
+++ b/packages/lib/constants/app.ts
@@ -0,0 +1,8 @@
+export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
+export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';
+
+export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
+
+export const APP_BASE_URL = IS_APP_WEB
+  ? process.env.NEXT_PUBLIC_WEBAPP_URL
+  : process.env.NEXT_PUBLIC_MARKETING_URL;
--- a/packages/lib/constants/email.ts
+++ b/packages/lib/constants/email.ts
@@ -0,0 +1,4 @@
+export const FROM_ADDRESS = process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com';
+export const FROM_NAME = process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso';
+
+export const SERVICE_USER_EMAIL = 'serviceaccount@documenso.com';
--- a/packages/lib/constants/feature-flags.ts
+++ b/packages/lib/constants/feature-flags.ts
@@ -1,3 +1,8 @@
+/**
+ * The flag name for global session recording feature flag.
+ */
+export const FEATURE_FLAG_GLOBAL_SESSION_RECORDING = 'global_session_recording';
+
 /**
 * How frequent to poll for new feature flags in milliseconds.
 */
@@ -10,6 +15,7 @@ export const FEATURE_FLAG_POLL_INTERVAL = 30000;
 */
 export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
  app_billing: process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
+  marketing_header_single_player_mode: false,
 } as const;

 /**
--- a/packages/lib/constants/pdf.ts
+++ b/packages/lib/constants/pdf.ts
@@ -0,0 +1,9 @@
+import { APP_BASE_URL } from './app';
+
+export const DEFAULT_STANDARD_FONT_SIZE = 15;
+export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
+
+export const MIN_STANDARD_FONT_SIZE = 8;
+export const MIN_HANDWRITING_FONT_SIZE = 20;
+
+export const CAVEAT_FONT_PATH = `${APP_BASE_URL}/fonts/caveat.ttf`;
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -25,7 +25,7 @@
    "bcrypt": "^5.1.0",
    "luxon": "^3.4.0",
    "nanoid": "^4.0.2",
-    "next": "13.4.12",
+    "next": "13.4.19",
    "next-auth": "4.22.3",
    "pdf-lib": "^1.17.1",
    "react": "18.2.0",
@@ -36,4 +36,4 @@
    "@types/bcrypt": "^5.0.0",
    "@types/luxon": "^3.3.1"
  }
-}
+}
--- a/packages/lib/server-only/document-meta/upsert-document-meta.ts
+++ b/packages/lib/server-only/document-meta/upsert-document-meta.ts
@@ -1,30 +0,0 @@
-'use server';
-
-import { prisma } from '@documenso/prisma';
-
-export type CreateDocumentMetaOptions = {
-  documentId: number;
-  subject: string;
-  message: string;
-};
-
-export const upsertDocumentMeta = async ({
-  subject,
-  message,
-  documentId,
-}: CreateDocumentMetaOptions) => {
-  return await prisma.documentMeta.upsert({
-    where: {
-      documentId,
-    },
-    create: {
-      subject,
-      message,
-      documentId,
-    },
-    update: {
-      subject,
-      message,
-    },
-  });
-};
--- a/packages/lib/server-only/document/complete-document-with-token.ts
+++ b/packages/lib/server-only/document/complete-document-with-token.ts
@@ -4,7 +4,6 @@ import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';

 import { sealDocument } from './seal-document';
-import { sendPendingEmail } from './send-pending-email';

 export type CompleteDocumentWithTokenOptions = {
  token: string;
@@ -70,19 +69,6 @@ export const completeDocumentWithToken = async ({
    },
  });

-  const pendingRecipients = await prisma.recipient.count({
-    where: {
-      documentId: document.id,
-      signingStatus: {
-        not: SigningStatus.SIGNED,
-      },
-    },
-  });
-
-  if (pendingRecipients > 0) {
-    await sendPendingEmail({ documentId, recipientId: recipient.id });
-  }
-
  const documents = await prisma.document.updateMany({
    where: {
      id: document.id,
--- a/packages/lib/server-only/document/get-document-by-id.ts
+++ b/packages/lib/server-only/document/get-document-by-id.ts
@@ -13,7 +13,6 @@ export const getDocumentById = async ({ id, userId }: GetDocumentByIdOptions) =>
    },
    include: {
      documentData: true,
-      documentMeta: true,
    },
  });
 };
--- a/packages/lib/server-only/document/get-document-by-token.ts
+++ b/packages/lib/server-only/document/get-document-by-token.ts
@@ -1,12 +1,21 @@
 import { prisma } from '@documenso/prisma';
+import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';

 export interface GetDocumentAndSenderByTokenOptions {
  token: string;
 }

+export interface GetDocumentAndRecipientByTokenOptions {
+  token: string;
+}
+
 export const getDocumentAndSenderByToken = async ({
  token,
 }: GetDocumentAndSenderByTokenOptions) => {
+  if (!token) {
+    throw new Error('Missing token');
+  }
+
  const result = await prisma.document.findFirstOrThrow({
    where: {
      Recipient: {
@@ -29,3 +38,33 @@ export const getDocumentAndSenderByToken = async ({
    User,
  };
 };
+
+/**
+ * Get a Document and a Recipient by the recipient token.
+ */
+export const getDocumentAndRecipientByToken = async ({
+  token,
+}: GetDocumentAndRecipientByTokenOptions): Promise<DocumentWithRecipient> => {
+  if (!token) {
+    throw new Error('Missing token');
+  }
+
+  const result = await prisma.document.findFirstOrThrow({
+    where: {
+      Recipient: {
+        some: {
+          token,
+        },
+      },
+    },
+    include: {
+      Recipient: true,
+      documentData: true,
+    },
+  });
+
+  return {
+    ...result,
+    Recipient: result.Recipient[0],
+  };
+};
--- a/packages/lib/server-only/document/seal-document.ts
+++ b/packages/lib/server-only/document/seal-document.ts
@@ -9,7 +9,6 @@ import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import { getFile } from '../../universal/upload/get-file';
 import { putFile } from '../../universal/upload/put-file';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
-import { sendCompletedEmail } from './send-completed-email';

 export type SealDocumentOptions = {
  documentId: number;
@@ -87,6 +86,4 @@ export const sealDocument = async ({ documentId }: SealDocumentOptions) => {
      data: newData,
    },
  });
-
-  await sendCompletedEmail({ documentId });
 };
--- a/packages/lib/server-only/document/send-completed-email.ts
+++ b/packages/lib/server-only/document/send-completed-email.ts
@@ -1,57 +0,0 @@
-import { createElement } from 'react';
-
-import { mailer } from '@documenso/email/mailer';
-import { render } from '@documenso/email/render';
-import { DocumentCompletedEmailTemplate } from '@documenso/email/templates/document-completed';
-import { prisma } from '@documenso/prisma';
-
-export interface SendDocumentOptions {
-  documentId: number;
-}
-
-export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) => {
-  const document = await prisma.document.findUnique({
-    where: {
-      id: documentId,
-    },
-    include: {
-      Recipient: true,
-    },
-  });
-
-  if (!document) {
-    throw new Error('Document not found');
-  }
-
-  if (document.Recipient.length === 0) {
-    throw new Error('Document has no recipients');
-  }
-
-  await Promise.all([
-    document.Recipient.map(async (recipient) => {
-      const { email, name, token } = recipient;
-
-      const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
-
-      const template = createElement(DocumentCompletedEmailTemplate, {
-        documentName: document.title,
-        assetBaseUrl,
-        downloadLink: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${token}/complete`,
-      });
-
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
-          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
-        },
-        subject: 'Signing Complete!',
-        html: render(template),
-        text: render(template, { plainText: true }),
-      });
-    }),
-  ]);
-};
--- a/packages/lib/server-only/document/send-document.tsx
+++ b/packages/lib/server-only/document/send-document.tsx
@@ -3,14 +3,14 @@ import { createElement } from 'react';
 import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
-import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SendStatus } from '@documenso/prisma/client';

-export type SendDocumentOptions = {
+export interface SendDocumentOptions {
  documentId: number;
  userId: number;
-};
+}

 export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
  const user = await prisma.user.findFirstOrThrow({
@@ -26,12 +26,9 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
    },
    include: {
      Recipient: true,
-      documentMeta: true,
    },
  });

-  const customEmail = document?.documentMeta;
-
  if (!document) {
    throw new Error('Document not found');
  }
@@ -48,12 +45,6 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
    document.Recipient.map(async (recipient) => {
      const { email, name } = recipient;

-      const customEmailTemplate = {
-        'signer.name': name,
-        'signer.email': email,
-        'document.name': document.title,
-      };
-
      if (recipient.sendStatus === SendStatus.SENT) {
        return;
      }
@@ -67,7 +58,6 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
        inviterEmail: user.email,
        assetBaseUrl,
        signDocumentLink,
-        customBody: renderCustomEmailTemplate(customEmail?.message || '', customEmailTemplate),
      });

      await mailer.sendMail({
@@ -76,12 +66,10 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
          name,
        },
        from: {
-          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
-          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+          name: FROM_NAME,
+          address: FROM_ADDRESS,
        },
-        subject: customEmail?.subject
-          ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : 'Please sign this document',
+        subject: 'Please sign this document',
        html: render(template),
        text: render(template, { plainText: true }),
      });
--- a/packages/lib/server-only/document/send-pending-email.ts
+++ b/packages/lib/server-only/document/send-pending-email.ts
@@ -1,64 +0,0 @@
-import { createElement } from 'react';
-
-import { mailer } from '@documenso/email/mailer';
-import { render } from '@documenso/email/render';
-import { DocumentPendingEmailTemplate } from '@documenso/email/templates/document-pending';
-import { prisma } from '@documenso/prisma';
-
-export interface SendPendingEmailOptions {
-  documentId: number;
-  recipientId: number;
-}
-
-export const sendPendingEmail = async ({ documentId, recipientId }: SendPendingEmailOptions) => {
-  const document = await prisma.document.findFirst({
-    where: {
-      id: documentId,
-      Recipient: {
-        some: {
-          id: recipientId,
-        },
-      },
-    },
-    include: {
-      Recipient: {
-        where: {
-          id: recipientId,
-        },
-      },
-    },
-  });
-
-  if (!document) {
-    throw new Error('Document not found');
-  }
-
-  if (document.Recipient.length === 0) {
-    throw new Error('Document has no recipients');
-  }
-
-  const [recipient] = document.Recipient;
-
-  const { email, name } = recipient;
-
-  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
-
-  const template = createElement(DocumentPendingEmailTemplate, {
-    documentName: document.title,
-    assetBaseUrl,
-  });
-
-  await mailer.sendMail({
-    to: {
-      address: email,
-      name,
-    },
-    from: {
-      name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
-      address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
-    },
-    subject: 'Waiting for others to complete signing.',
-    html: render(template),
-    text: render(template, { plainText: true }),
-  });
-};
--- a/packages/lib/server-only/document/update-document.ts
+++ b/packages/lib/server-only/document/update-document.ts
@@ -1,21 +0,0 @@
-'use server';
-
-import { Prisma } from '@prisma/client';
-
-import { prisma } from '@documenso/prisma';
-
-export type UpdateDocumentOptions = {
-  documentId: number;
-  data: Prisma.DocumentUpdateInput;
-};
-
-export const updateDocument = async ({ documentId, data }: UpdateDocumentOptions) => {
-  return await prisma.document.update({
-    where: {
-      id: documentId,
-    },
-    data: {
-      ...data,
-    },
-  });
-};
--- a/packages/lib/server-only/feature-flags/all.ts
+++ b/packages/lib/server-only/feature-flags/all.ts
@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { getToken } from 'next-auth/jwt';
+
+import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
+import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
+
+import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
+
+/**
+ * Get all the evaluated feature flags based on the current user if possible.
+ */
+export default async function handlerFeatureFlagAll(req: Request) {
+  const requestHeaders = Object.fromEntries(req.headers.entries());
+
+  const nextReq = new NextRequest(req, {
+    headers: requestHeaders,
+  });
+
+  const token = await getToken({ req: nextReq });
+
+  const postHog = PostHogServerClient();
+
+  // Return the local feature flags if PostHog is not enabled, true by default.
+  // The front end should not call this API if PostHog is not enabled to reduce network requests.
+  if (!postHog) {
+    return NextResponse.json(LOCAL_FEATURE_FLAGS);
+  }
+
+  const distinctId = extractDistinctUserId(token, nextReq);
+
+  const featureFlags = await postHog.getAllFlags(distinctId, mapJwtToFlagProperties(token));
+
+  const res = NextResponse.json(featureFlags);
+
+  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+
+  return res;
+}
--- a/packages/lib/server-only/feature-flags/get-post-hog-server-client.ts
+++ b/packages/lib/server-only/feature-flags/get-post-hog-server-client.ts
--- a/packages/lib/server-only/feature-flags/get-server-component-feature-flag.ts
+++ b/packages/lib/server-only/feature-flags/get-server-component-feature-flag.ts
@@ -1,6 +1,6 @@
 import { headers } from 'next/headers';

-import { getAllFlags, getFlag } from './get-feature-flag';
+import { getAllFlags, getFlag } from '@documenso/lib/universal/get-feature-flag';

 /**
 * Evaluate whether a flag is enabled for the current user in a server component.
--- a/packages/lib/server-only/feature-flags/get.ts
+++ b/packages/lib/server-only/feature-flags/get.ts
@@ -0,0 +1,117 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { nanoid } from 'nanoid';
+import { JWT, getToken } from 'next-auth/jwt';
+
+import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
+
+/**
+ * Evaluate a single feature flag based on the current user if possible.
+ *
+ * @param req The request with a query parameter `flag`. Example request URL: /api/feature-flag/get?flag=flag-name
+ * @returns A Response with the feature flag value.
+ */
+export default async function handleFeatureFlagGet(req: Request) {
+  const { searchParams } = new URL(req.url ?? '');
+  const flag = searchParams.get('flag');
+
+  const requestHeaders = Object.fromEntries(req.headers.entries());
+
+  const nextReq = new NextRequest(req, {
+    headers: requestHeaders,
+  });
+
+  const token = await getToken({ req: nextReq });
+
+  if (!flag) {
+    return NextResponse.json(
+      {
+        error: 'Missing flag query parameter.',
+      },
+      {
+        status: 400,
+        headers: {
+          'content-type': 'application/json',
+        },
+      },
+    );
+  }
+
+  const postHog = PostHogServerClient();
+
+  // Return the local feature flags if PostHog is not enabled, true by default.
+  // The front end should not call this API if PostHog is disabled to reduce network requests.
+  if (!postHog) {
+    return NextResponse.json(LOCAL_FEATURE_FLAGS[flag] ?? true);
+  }
+
+  const distinctId = extractDistinctUserId(token, nextReq);
+
+  const featureFlag = await postHog.getFeatureFlag(flag, distinctId, mapJwtToFlagProperties(token));
+
+  const res = NextResponse.json(featureFlag);
+
+  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+
+  return res;
+}
+
+/**
+ * Map a JWT to properties which are consumed by PostHog to evaluate feature flags.
+ *
+ * @param jwt The JWT of the current user.
+ * @returns A map of properties which are consumed by PostHog.
+ */
+export const mapJwtToFlagProperties = (
+  jwt?: JWT | null,
+): {
+  groups?: Record<string, string>;
+  personProperties?: Record<string, string>;
+  groupProperties?: Record<string, Record<string, string>>;
+} => {
+  return {
+    personProperties: {
+      email: jwt?.email ?? '',
+    },
+    groupProperties: {
+      // Add properties to group users into different groups, such as billing plan.
+    },
+  };
+};
+
+/**
+ * Extract a distinct ID from a JWT and request.
+ *
+ * Will fallback to a random ID if no ID could be extracted from either the JWT or request.
+ *
+ * @param jwt The JWT of the current user.
+ * @param request Request potentially containing a PostHog `distinct_id` cookie.
+ * @returns A distinct user ID.
+ */
+export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): string => {
+  const config = extractPostHogConfig();
+
+  const email = jwt?.email;
+  const userId = jwt?.id.toString();
+
+  let fallbackDistinctId = nanoid();
+
+  if (config) {
+    try {
+      const postHogCookie = JSON.parse(
+        request.cookies.get(`ph_${config.key}_posthog`)?.value ?? '',
+      );
+
+      const postHogDistinctId = postHogCookie['distinct_id'];
+
+      if (typeof postHogDistinctId === 'string') {
+        fallbackDistinctId = postHogDistinctId;
+      }
+    } catch {
+      // Do nothing.
+    }
+  }
+
+  return email ?? userId ?? fallbackDistinctId;
+};
--- a/packages/lib/server-only/pdf/insert-field-in-pdf.ts
+++ b/packages/lib/server-only/pdf/insert-field-in-pdf.ts
@@ -1,25 +1,31 @@
 import fontkit from '@pdf-lib/fontkit';
-import { readFileSync } from 'fs';
 import { PDFDocument, StandardFonts } from 'pdf-lib';

+import {
+  CAVEAT_FONT_PATH,
+  DEFAULT_HANDWRITING_FONT_SIZE,
+  DEFAULT_STANDARD_FONT_SIZE,
+  MIN_HANDWRITING_FONT_SIZE,
+  MIN_STANDARD_FONT_SIZE,
+} from '@documenso/lib/constants/pdf';
 import { FieldType } from '@documenso/prisma/client';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';

-const DEFAULT_STANDARD_FONT_SIZE = 15;
-const DEFAULT_HANDWRITING_FONT_SIZE = 50;
-
 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
+  // Fetch the font file from the public URL.
+  const fontResponse = await fetch(CAVEAT_FONT_PATH);
+  const fontCaveat = await fontResponse.arrayBuffer();
+
  const isSignatureField = isSignatureFieldType(field.type);

  pdf.registerFontkit(fontkit);

-  const fontCaveat = readFileSync('./public/fonts/caveat.ttf');
-
  const pages = pdf.getPages();

+  const minFontSize = isSignatureField ? MIN_HANDWRITING_FONT_SIZE : MIN_STANDARD_FONT_SIZE;
  const maxFontSize = isSignatureField ? DEFAULT_HANDWRITING_FONT_SIZE : DEFAULT_STANDARD_FONT_SIZE;
-  let fontSize = isSignatureField ? DEFAULT_HANDWRITING_FONT_SIZE : DEFAULT_STANDARD_FONT_SIZE;
+  let fontSize = maxFontSize;

  const page = pages.at(field.page - 1);

@@ -50,11 +56,6 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
    let imageWidth = image.width;
    let imageHeight = image.height;

-    // const initialDimensions = {
-    //   width: imageWidth,
-    //   height: imageHeight,
-    // };
-
    const scalingFactor = Math.min(fieldWidth / imageWidth, fieldHeight / imageHeight, 1);

    imageWidth = imageWidth * scalingFactor;
@@ -76,14 +77,9 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
    let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
    const textHeight = font.heightAtSize(fontSize);

-    // const initialDimensions = {
-    //   width: textWidth,
-    //   height: textHeight,
-    // };
-
    const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);

-    fontSize = Math.max(fontSize * scalingFactor, maxFontSize);
+    fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
    textWidth = font.widthOfTextAtSize(field.customText, fontSize);

    const textX = fieldX + (fieldWidth - textWidth) / 2;
--- a/packages/lib/server-only/pdf/insert-text-in-pdf.ts
+++ b/packages/lib/server-only/pdf/insert-text-in-pdf.ts
@@ -1,7 +1,8 @@
 import fontkit from '@pdf-lib/fontkit';
-import * as fs from 'fs';
 import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

+import { CAVEAT_FONT_PATH } from '../../constants/pdf';
+
 export async function insertTextInPDF(
  pdfAsBase64: string,
  text: string,
@@ -10,13 +11,15 @@ export async function insertTextInPDF(
  page = 0,
  useHandwritingFont = true,
 ): Promise<string> {
-  const fontBytes = fs.readFileSync('./public/fonts/caveat.ttf');
+  // Fetch the font file from the public URL.
+  const fontResponse = await fetch(CAVEAT_FONT_PATH);
+  const fontCaveat = await fontResponse.arrayBuffer();

  const pdfDoc = await PDFDocument.load(pdfAsBase64);

  pdfDoc.registerFontkit(fontkit);

-  const font = await pdfDoc.embedFont(useHandwritingFont ? fontBytes : StandardFonts.Helvetica);
+  const font = await pdfDoc.embedFont(useHandwritingFont ? fontCaveat : StandardFonts.Helvetica);

  const pages = pdfDoc.getPages();
  const pdfPage = pages[page];
--- a/packages/lib/universal/get-feature-flag.ts
+++ b/packages/lib/universal/get-feature-flag.ts
@@ -1,9 +1,12 @@
 import { z } from 'zod';

+import {
+  TFeatureFlagValue,
+  ZFeatureFlagValueSchema,
+} from '@documenso/lib/client-only/providers/feature-flag.types';
+import { APP_BASE_URL } from '@documenso/lib/constants/app';
 import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';

-import { TFeatureFlagValue, ZFeatureFlagValueSchema } from '~/providers/feature-flag.types';
-
 /**
 * Evaluate whether a flag is enabled for the current user.
 *
@@ -54,7 +57,7 @@ export const getAllFlags = async (
    return LOCAL_FEATURE_FLAGS;
  }

-  const url = new URL(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/feature-flag/all`);
+  const url = new URL(`${APP_BASE_URL}/api/feature-flag/all`);

  return fetch(url, {
    headers: {
@@ -69,6 +72,28 @@ export const getAllFlags = async (
    .catch(() => LOCAL_FEATURE_FLAGS);
 };

+/**
+ * Get all feature flags for anonymous users.
+ *
+ * @returns A record of flags and their values.
+ */
+export const getAllAnonymousFlags = async (): Promise<Record<string, TFeatureFlagValue>> => {
+  if (!isFeatureFlagEnabled()) {
+    return LOCAL_FEATURE_FLAGS;
+  }
+
+  const url = new URL(`${APP_BASE_URL}/api/feature-flag/all`);
+
+  return fetch(url, {
+    next: {
+      revalidate: 60,
+    },
+  })
+    .then(async (res) => res.json())
+    .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
+    .catch(() => LOCAL_FEATURE_FLAGS);
+};
+
 interface GetFlagOptions {
  /**
   * The headers to attach to the request to evaluate flags.
--- a/packages/lib/utils/render-custom-email-template.ts
+++ b/packages/lib/utils/render-custom-email-template.ts
@@ -1,12 +0,0 @@
-export const renderCustomEmailTemplate = <T extends Record<string, string>>(
-  template: string,
-  variables: T,
-): string => {
-  return template.replace(/\{(\S+)\}/g, (_, key) => {
-    if (key in variables) {
-      return variables[key];
-    }
-
-    return key;
-  });
-};
--- a/packages/prisma/migrations/20230830053354_add_service_user/migration.sql
+++ b/packages/prisma/migrations/20230830053354_add_service_user/migration.sql
@@ -0,0 +1,4 @@
+INSERT INTO "User" ("email", "name") VALUES (
+  'serviceaccount@documenso.com',
+  'Service Account'
+) ON CONFLICT DO NOTHING;
--- a/packages/prisma/migrations/20230920052232_document_meta/migration.sql
+++ b/packages/prisma/migrations/20230920052232_document_meta/migration.sql
@@ -1,14 +0,0 @@
-- AlterTable
-ALTER TABLE "Document" ADD COLUMN     "documentMetaId" TEXT;
-
-- CreateTable
-CREATE TABLE "DocumentMeta" (
-    "id" TEXT NOT NULL,
-    "customEmailSubject" TEXT,
-    "customEmailBody" TEXT,
-
-    CONSTRAINT "DocumentMeta_pkey" PRIMARY KEY ("id")
-);
-
-- AddForeignKey
-ALTER TABLE "Document" ADD CONSTRAINT "Document_documentMetaId_fkey" FOREIGN KEY ("documentMetaId") REFERENCES "DocumentMeta"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/packages/prisma/migrations/20230920124941_fix_documentmeta_relation/migration.sql
+++ b/packages/prisma/migrations/20230920124941_fix_documentmeta_relation/migration.sql
@@ -1,8 +0,0 @@
-/*
-  Warnings:
-
-  - A unique constraint covering the columns `[documentMetaId]` on the table `Document` will be added. If there are existing duplicate values, this will fail.
-
-*/
-- CreateIndex
-CREATE UNIQUE INDEX "Document_documentMetaId_key" ON "Document"("documentMetaId");
--- a/packages/prisma/migrations/20230922121421_fix_document_meta_schema/migration.sql
+++ b/packages/prisma/migrations/20230922121421_fix_document_meta_schema/migration.sql
@@ -1,52 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the column `documentMetaId` on the `Document` table. All the data in the column will be lost.
-  - You are about to drop the column `customEmailBody` on the `DocumentMeta` table. All the data in the column will be lost.
-  - You are about to drop the column `customEmailSubject` on the `DocumentMeta` table. All the data in the column will be lost.
-  - A unique constraint covering the columns `[documentId]` on the table `DocumentMeta` will be added. If there are existing duplicate values, this will fail.
-  - Added the required column `documentId` to the `DocumentMeta` table without a default value. This is not possible if the table is not empty.
-
-*/
-- DropForeignKey
-ALTER TABLE "Document" DROP CONSTRAINT "Document_documentMetaId_fkey";
-
-- DropIndex
-DROP INDEX "Document_documentMetaId_key";
-
-- AlterTable
-ALTER TABLE "DocumentMeta"
-ADD COLUMN     "documentId" INTEGER,
-ADD COLUMN     "message" TEXT,
-ADD COLUMN     "subject" TEXT;
-
-- Migrate data
-UPDATE "DocumentMeta" SET "documentId" = (
-  SELECT "id" FROM "Document" WHERE "Document"."documentMetaId" = "DocumentMeta"."id"
-);
-
-- Migrate data
-UPDATE "DocumentMeta" SET "message" = "customEmailBody";
-
-- Migrate data
-UPDATE "DocumentMeta" SET "subject" = "customEmailSubject";
-
-- Prune data
-DELETE FROM "DocumentMeta" WHERE "documentId" IS NULL;
-
-- AlterTable
-ALTER TABLE "Document" DROP COLUMN "documentMetaId";
-
-- AlterTable
-ALTER TABLE "DocumentMeta" 
-DROP COLUMN "customEmailBody",
-DROP COLUMN "customEmailSubject";
-
-- AlterColumn
-ALTER TABLE "DocumentMeta" ALTER COLUMN "documentId" SET NOT NULL;
-
-- CreateIndex
-CREATE UNIQUE INDEX "DocumentMeta_documentId_key" ON "DocumentMeta"("documentId");
-
-- AddForeignKey
-ALTER TABLE "DocumentMeta" ADD CONSTRAINT "DocumentMeta_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -110,7 +110,6 @@ model Document {
  Field          Field[]
  documentDataId String
  documentData   DocumentData   @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
-  documentMeta   DocumentMeta?
  createdAt      DateTime       @default(now())
  updatedAt      DateTime       @default(now()) @updatedAt

@@ -131,14 +130,6 @@ model DocumentData {
  Document    Document?
 }

-model DocumentMeta {
-  id       String    @id @default(cuid())
-  subject  String?
-  message  String?
-  documentId Int @unique
-  document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
-}
-
 enum ReadStatus {
  NOT_OPENED
  OPENED
--- a/packages/prisma/types/document-with-data.ts
+++ b/packages/prisma/types/document-with-data.ts
@@ -1,6 +1,5 @@
-import { Document, DocumentData, DocumentMeta } from '@documenso/prisma/client';
+import { Document, DocumentData } from '@documenso/prisma/client';

 export type DocumentWithData = Document & {
  documentData?: DocumentData | null;
-  documentMeta?: DocumentMeta | null;
 };
--- a/packages/prisma/types/document-with-recipient.ts
+++ b/packages/prisma/types/document-with-recipient.ts
@@ -1,5 +1,10 @@
-import { Document, Recipient } from '@documenso/prisma/client';
+import { Document, DocumentData, Recipient } from '@documenso/prisma/client';

-export type DocumentWithRecipient = Document & {
+export type DocumentWithRecipients = Document & {
  Recipient: Recipient[];
 };
+
+export type DocumentWithRecipient = Document & {
+  Recipient: Recipient;
+  documentData: DocumentData;
+};
--- a/packages/ui/components/document/document-dialog.tsx
+++ b/packages/ui/components/document/document-dialog.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
+import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';
+
+export type DocumentDialogProps = {
+  document: string;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+/**
+ * A dialog which renders the provided document.
+ */
+export default function DocumentDialog({ document, ...props }: DocumentDialogProps) {
+  const [documentLoaded, setDocumentLoaded] = useState(false);
+
+  const onDocumentLoad = () => {
+    setDocumentLoaded(true);
+  };
+
+  return (
+    <Dialog {...props}>
+      <DialogPortal>
+        <DialogOverlay className="bg-black/80" />
+
+        <DialogPrimitive.Content
+          className={cn(
+            'animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 pointer-events-none fixed z-50 h-screen w-screen overflow-y-auto px-2 py-14 opacity-0 transition-opacity lg:py-32',
+            {
+              'opacity-100': documentLoaded,
+            },
+          )}
+          onClick={() => props.onOpenChange?.(false)}
+        >
+          <LazyPDFViewerNoLoader
+            className="mx-auto w-full max-w-3xl xl:max-w-5xl"
+            document={`data:application/pdf;base64,${document}`}
+            onClick={(e) => e.stopPropagation()}
+            onDocumentLoad={onDocumentLoad}
+          />
+
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none">
+            <X className="h-6 w-6 text-white" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  );
+}
--- a/apps/web/src/app/(signing)/sign/[token]/complete/download-button.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/complete/download-button.tsx
@@ -15,7 +15,7 @@ export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
  documentData?: DocumentData;
 };

-export const DownloadButton = ({
+export const DocumentDownloadButton = ({
  className,
  fileName,
  documentData,
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@@ -0,0 +1,205 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import Image, { StaticImageData } from 'next/image';
+
+import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+export type SigningCardProps = {
+  name: string;
+  signingCelebrationImage?: StaticImageData;
+};
+
+/**
+ * 2D signing card.
+ */
+export const SigningCard = ({ name, signingCelebrationImage }: SigningCardProps) => {
+  return (
+    <div className="relative w-full max-w-xs md:max-w-sm">
+      <SigningCardContent name={name} />
+
+      {signingCelebrationImage && (
+        <SigningCardImage signingCelebrationImage={signingCelebrationImage} />
+      )}
+    </div>
+  );
+};
+
+/**
+ * 3D signing card that follows the mouse movement within a certain range.
+ */
+export const SigningCard3D = ({ name, signingCelebrationImage }: SigningCardProps) => {
+  // Should use % based dimensions by calculating the window height/width.
+  const boundary = 400;
+
+  const [trackMouse, setTrackMouse] = useState(false);
+
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const cardX = useMotionValue(0);
+  const cardY = useMotionValue(0);
+  const rotateX = useTransform(cardY, [-600, 600], [8, -8]);
+  const rotateY = useTransform(cardX, [-600, 600], [-8, 8]);
+
+  const diagonalMovement = useTransform<number, number>(
+    [rotateX, rotateY],
+    ([newRotateX, newRotateY]) => newRotateX + newRotateY,
+  );
+
+  const sheenPosition = useTransform(diagonalMovement, [-16, 16], [-100, 200]);
+  const sheenOpacity = useTransform(sheenPosition, [-100, 50, 200], [0, 0.1, 0]);
+  const sheenGradient = useMotionTemplate`linear-gradient(
+    30deg,
+    transparent,
+    rgba(200 200 200 / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
+    transparent)`;
+
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const cardCenterPosition = useCallback(() => {
+    if (!cardRef.current) {
+      return { x: 0, y: 0 };
+    }
+
+    const { x, y, width, height } = cardRef.current.getBoundingClientRect();
+
+    return { x: x + width / 2, y: y + height / 2 };
+  }, [cardRef]);
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      const { x, y } = cardCenterPosition();
+
+      const offsetX = event.clientX - x;
+      const offsetY = event.clientY - y;
+
+      // Calculate distance between the mouse pointer and center of the card.
+      const distance = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
+
+      // Mouse enters enter boundary.
+      if (distance <= boundary && !trackMouse) {
+        setTrackMouse(true);
+      }
+
+      if (!trackMouse) {
+        return;
+      }
+
+      void animate(cardX, offsetX, { duration: 0.125 });
+      void animate(cardY, offsetY, { duration: 0.125 });
+
+      clearTimeout(timeoutRef.current);
+
+      // Revert the card back to the center position after the mouse stops moving.
+      timeoutRef.current = setTimeout(() => {
+        void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
+        void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
+
+        setTrackMouse(false);
+      }, 1000);
+    },
+    [cardX, cardY, cardCenterPosition, trackMouse],
+  );
+
+  useEffect(() => {
+    window.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [onMouseMove]);
+
+  return (
+    <div className="relative w-full max-w-xs md:max-w-sm" style={{ perspective: 800 }}>
+      <motion.div
+        className="bg-background w-full"
+        ref={cardRef}
+        style={{
+          perspective: '800',
+          backgroundImage: sheenGradient,
+          transformStyle: 'preserve-3d',
+          rotateX,
+          rotateY,
+        }}
+      >
+        <SigningCardContent className="bg-transparent" name={name} />
+      </motion.div>
+
+      {signingCelebrationImage && (
+        <SigningCardImage signingCelebrationImage={signingCelebrationImage} />
+      )}
+    </div>
+  );
+};
+
+type SigningCardContentProps = {
+  name: string;
+  className?: string;
+};
+
+const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
+  return (
+    <Card
+      className={cn(
+        'group mx-auto flex aspect-[21/9] w-full items-center justify-center',
+        className,
+      )}
+      degrees={-145}
+      gradient
+    >
+      <CardContent
+        className="font-signature p-6 text-center"
+        style={{
+          container: 'main',
+        }}
+      >
+        <span
+          className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
+          style={{
+            fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
+          }}
+        >
+          {name}
+        </span>
+      </CardContent>
+    </Card>
+  );
+};
+
+type SigningCardImageProps = {
+  signingCelebrationImage: StaticImageData;
+};
+
+const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
+  return (
+    <motion.div
+      className="pointer-events-none absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
+      initial={{
+        opacity: 0,
+        scale: 0.8,
+      }}
+      animate={{
+        scale: 1,
+        opacity: 0.5,
+      }}
+      transition={{
+        delay: 0.5,
+        duration: 0.5,
+      }}
+    >
+      <Image
+        src={signingCelebrationImage}
+        alt="background pattern"
+        className="w-full"
+        style={{
+          mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+          WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+        }}
+      />
+    </motion.div>
+  );
+};
--- a/packages/ui/icons/signature.tsx
+++ b/packages/ui/icons/signature.tsx
@@ -1,12 +1,13 @@
-import type { LucideIcon } from 'lucide-react/dist/lucide-react';
+import type { LucideIcon, LucideProps } from 'lucide-react/dist/lucide-react';

-export const SignatureIcon: LucideIcon = ({
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+export const SignatureIcon = (({
  size = 24,
  color = 'currentColor',
  strokeWidth = 1.33,
  absoluteStrokeWidth,
  ...props
-}) => {
+}: LucideProps) => {
  return (
    <svg
      width={size}
@@ -25,4 +26,4 @@ export const SignatureIcon: LucideIcon = ({
      />
    </svg>
  );
-};
+}) as LucideIcon;
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,12 +17,14 @@
  "devDependencies": {
    "@documenso/tailwind-config": "*",
    "@documenso/tsconfig": "*",
+    "@types/luxon": "^3.3.2",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "react": "18.2.0",
    "typescript": "^5.1.6"
  },
  "dependencies": {
+    "@hookform/resolvers": "^3.3.0",
    "@documenso/lib": "*",
    "@radix-ui/react-accordion": "^1.1.1",
    "@radix-ui/react-alert-dialog": "^1.0.3",
@@ -44,6 +46,7 @@
    "@radix-ui/react-select": "^1.2.1",
    "@radix-ui/react-separator": "^1.0.2",
    "@radix-ui/react-slider": "^1.1.1",
+    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.3",
    "@radix-ui/react-toast": "^1.1.3",
@@ -54,12 +57,15 @@
    "clsx": "^1.2.1",
    "cmdk": "^0.2.0",
    "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
-    "next": "13.4.12",
+    "lucide-react": "^0.277.0",
+    "luxon": "^3.4.2",
+    "next": "13.4.19",
    "pdfjs-dist": "3.6.172",
    "react-day-picker": "^8.7.1",
+    "react-hook-form": "^7.45.4",
    "react-pdf": "^7.3.3",
+    "react-rnd": "^10.4.1",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5"
  }
-}
+}
--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@@ -56,14 +56,14 @@ export interface ButtonProps
 }

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
    if (asChild) {
      return (
        <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
      );
    }

-    const showLoader = props.loading === true;
+    const showLoader = loading === true;
    const isDisabled = props.disabled || showLoader;

    return (
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -109,6 +109,8 @@ export {
  DialogContent,
  DialogHeader,
  DialogFooter,
+  DialogOverlay,
  DialogTitle,
  DialogDescription,
+  DialogPortal,
 };
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -73,7 +73,7 @@ const DocumentDropzoneCardCenterVariants: Variants = {
 };

 export type DocumentDropzoneProps = {
-  className: string;
+  className?: string;
  onDrop?: (_file: File) => void | Promise<void>;
  [key: string]: unknown;
 };
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -256,17 +256,28 @@ export const AddFieldsFormPartial = ({
  }, [onMouseClick, onMouseMove, selectedField]);

  useEffect(() => {
-    const $page = window.document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+    const observer = new MutationObserver((_mutations) => {
+      const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);

-    if (!$page) {
-      return;
-    }
+      if (!$page) {
+        return;
+      }

-    const { height, width } = $page.getBoundingClientRect();
+      const { height, width } = $page.getBoundingClientRect();

-    fieldBounds.current = {
-      height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
-      width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
+      fieldBounds.current = {
+        height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
+        width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
+      };
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
    };
  }, []);

@@ -396,7 +407,7 @@ export const AddFieldsFormPartial = ({
            </Popover>
          )}

-          <div className="-mx-2 flex-1 overflow-y-scroll px-2">
+          <div className="-mx-2 flex-1 overflow-y-auto px-2">
            <div className="grid grid-cols-2 gap-x-4 gap-y-8">
              <button
                type="button"
@@ -505,7 +516,10 @@ export const AddFieldsFormPartial = ({
        <DocumentFlowFormContainerActions
          loading={isSubmitting}
          disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          onGoBackClick={() => {
+            documentFlow.onBackStep?.();
+            remove();
+          }}
          onGoNextClick={() => void onFormSubmit()}
        />
      </DocumentFlowFormContainerFooter>
--- a/packages/ui/primitives/document-flow/add-signature.tsx
+++ b/packages/ui/primitives/document-flow/add-signature.tsx
@@ -0,0 +1,282 @@
+'use client';
+
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DateTime } from 'luxon';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { FieldType } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
+import { ZAddSignatureFormSchema } from './add-signature.types';
+import {
+  SinglePlayerModeCustomTextField,
+  SinglePlayerModeSignatureField,
+} from './single-player-mode-fields';
+
+export type AddSignatureFormProps = {
+  defaultValues?: TAddSignatureFormSchema;
+  documentFlow: DocumentFlowStep;
+  fields: FieldWithSignature[];
+  numberOfSteps: number;
+  onSubmit: (_data: TAddSignatureFormSchema) => Promise<void> | void;
+  requireName?: boolean;
+  requireSignature?: boolean;
+};
+
+export const AddSignatureFormPartial = ({
+  defaultValues,
+  documentFlow,
+  fields,
+  numberOfSteps,
+  onSubmit,
+  requireName = false,
+  requireSignature = true,
+}: AddSignatureFormProps) => {
+  // Refined schema which takes into account whether to allow an empty name or signature.
+  const refinedSchema = ZAddSignatureFormSchema.superRefine((val, ctx) => {
+    if (requireName && val.name.length === 0) {
+      ctx.addIssue({
+        path: ['name'],
+        code: 'custom',
+        message: 'Name is required',
+      });
+    }
+
+    if (requireSignature && val.signature.length === 0) {
+      ctx.addIssue({
+        path: ['signature'],
+        code: 'custom',
+        message: 'Signature is required',
+      });
+    }
+  });
+
+  const form = useForm<TAddSignatureFormSchema>({
+    resolver: zodResolver(refinedSchema),
+    defaultValues: defaultValues ?? {
+      name: '',
+      email: '',
+      signature: '',
+    },
+  });
+
+  /**
+   * A local copy of the provided fields to modify.
+   */
+  const [localFields, setLocalFields] = useState(
+    fields.map((field) => {
+      let customText = field.customText;
+
+      if (field.type === FieldType.DATE) {
+        customText = DateTime.now().toFormat('yyyy-MM-dd hh:mm a');
+      }
+
+      const inserted = match(field.type)
+        .with(FieldType.DATE, () => true)
+        .with(FieldType.NAME, () => form.getValues('name').length > 0)
+        .with(FieldType.EMAIL, () => form.getValues('email').length > 0)
+        .with(FieldType.SIGNATURE, () => form.getValues('signature').length > 0)
+        .otherwise(() => true);
+
+      return { ...field, inserted, customText };
+    }),
+  );
+
+  const onEmailInputBlur = () => {
+    setLocalFields((prev) =>
+      prev.map((field) => {
+        if (field.type !== FieldType.EMAIL) {
+          return field;
+        }
+
+        const value = form.getValues('email');
+
+        return {
+          ...field,
+          customText: value,
+          inserted: value.length > 0,
+        };
+      }),
+    );
+  };
+
+  const onNameInputBlur = () => {
+    setLocalFields((prev) =>
+      prev.map((field) => {
+        if (field.type !== FieldType.NAME) {
+          return field;
+        }
+
+        const value = form.getValues('name');
+
+        return {
+          ...field,
+          customText: value,
+          inserted: value.length > 0,
+        };
+      }),
+    );
+  };
+
+  const onSignatureInputChange = (value: string) => {
+    setLocalFields((prev) =>
+      prev.map((field) => {
+        if (field.type !== FieldType.SIGNATURE) {
+          return field;
+        }
+
+        return {
+          ...field,
+          value: value ?? '',
+          inserted: true,
+          Signature: {
+            id: -1,
+            recipientId: -1,
+            fieldId: -1,
+            created: new Date(),
+            signatureImageAsBase64: value,
+            typedSignature: null,
+          },
+        };
+      }),
+    );
+  };
+
+  return (
+    <Form {...form}>
+      <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+        <DocumentFlowFormContainerContent>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="bg-background"
+                      type="email"
+                      autoComplete="email"
+                      {...field}
+                      onBlur={() => {
+                        field.onBlur();
+                        onEmailInputBlur();
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {requireName && (
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required={requireName}>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        {...field}
+                        onBlur={() => {
+                          field.onBlur();
+                          onNameInputBlur();
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {requireSignature && (
+              <FormField
+                control={form.control}
+                name="signature"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required={requireSignature}>Signature</FormLabel>
+                    <FormControl>
+                      <Card
+                        className={cn('mt-2', {
+                          'rounded-sm ring-2 ring-red-500 ring-offset-2 transition-all':
+                            form.formState.errors.signature,
+                        })}
+                        gradient={!form.formState.errors.signature}
+                        degrees={-120}
+                      >
+                        <CardContent className="p-0">
+                          <SignaturePad
+                            className="h-44 w-full"
+                            defaultValue={field.value}
+                            onChange={(value) => {
+                              field.onChange(value ?? '');
+                              onSignatureInputChange(value ?? '');
+                            }}
+                          />
+                        </CardContent>
+                      </Card>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+        </DocumentFlowFormContainerContent>
+
+        <DocumentFlowFormContainerFooter>
+          <DocumentFlowFormContainerStep
+            title={documentFlow.title}
+            step={documentFlow.stepIndex}
+            maxStep={numberOfSteps}
+          />
+
+          <DocumentFlowFormContainerActions
+            loading={form.formState.isSubmitting}
+            disabled={form.formState.isSubmitting}
+            onGoBackClick={documentFlow.onBackStep}
+            onGoNextClick={async () => await form.handleSubmit(onSubmit)()}
+          />
+        </DocumentFlowFormContainerFooter>
+      </fieldset>
+
+      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        {localFields.map((field) =>
+          match(field.type)
+            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
+              return <SinglePlayerModeCustomTextField key={field.id} field={field} />;
+            })
+            .with(FieldType.SIGNATURE, () => (
+              <SinglePlayerModeSignatureField key={field.id} field={field} />
+            ))
+            .otherwise(() => {
+              return null;
+            }),
+        )}
+      </ElementVisible>
+    </Form>
+  );
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
David Nguyen	e52aa8a12d	fix: test	2023-09-20 14:21:08 +10:00
David Nguyen	3361acdef3	fix: test	2023-09-20 13:59:14 +10:00
David Nguyen	4b8aa3298b	feat: add single player mode	2023-09-20 13:48:30 +10:00