chore: add responsive container to pie chart

.env.example

@@ -52,12 +52,7 @@ NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
 
 # [[FEATURES]]
-# OPTIONAL: Leave blank to disable PostHog and feature flags.
-NEXT_PUBLIC_POSTHOG_KEY=""
-# OPTIONAL: Defines the host to use for PostHog.
-NEXT_PUBLIC_POSTHOG_HOST="https://eu.posthog.com"
-# OPTIONAL: Leave blank to disable billing.
-NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
+NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false
 
 # This is only required for the marketing site
 # [[REDIS]]

.github/dependabot.yml

@@ -1,39 +0,0 @@
-version: 2
-
-on:
-  push:
-    branches: [ "feat/refresh" ]
-  pull_request:
-    branches: [ "feat/refresh" ]
-  workflow_dispatch:
-
-updates:
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: "weekly"
-    target-branch: "feat/refresh"
-    labels:
-      - "ci dependencies"
-      - "ci"
-    open-pull-requests-limit: 10
-
-  - package-ecosystem: "npm"
-    directory: "/apps/marketing"
-    schedule:
-      interval: "weekly"
-    target-branch: "feat/refresh"
-    labels:
-      - "npm dependencies"
-      - "frontend"
-    open-pull-requests-limit: 10
-
-  - package-ecosystem: "npm"
-    directory: "/apps/web"
-    schedule:
-      interval: "weekly"
-    target-branch: "feat/refresh"
-    labels:
-      - "npm dependencies"
-      - "frontend"
-    open-pull-requests-limit: 10

.github/workflows/ci.yml

@@ -1,33 +0,0 @@
-name: "Continuous Integration"
-
-on:
-  push:
-    branches: [ "feat/refresh" ]
-  pull_request:
-    branches: [ "feat/refresh" ]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-
-env:
-  HUSKY: 0
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 2
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Build
-        run: npm run build

.github/workflows/codeql-analysis.yml

@@ -1,45 +0,0 @@
-name: "CodeQL"
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [ feat/refresh ]
-  pull_request:
-    branches: [ feat/refresh ]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: true
-      matrix:
-        language: [ 'javascript' ]
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-        cache: npm
-
-    - name: Install Dependencies
-      run: npm ci
-      
-    - name: Build Documenso
-      run: npm run build
-
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2

.gitignore

@@ -37,13 +37,3 @@ yarn-error.log*
 
 # contentlayer
 .contentlayer
-
-# intellij
-.idea
-
-# vscode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json

.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run commitlint -- $1

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged

README.md

@@ -89,10 +89,6 @@ Documenso is built using awesome open source tech including:
 - [Node SignPDF (Digital Signature)](https://github.com/vbuch/node-signpdf)
 - [React-PDF for viewing PDFs](https://github.com/wojtekmaj/react-pdf)
 - [PDF-Lib for PDF manipulation](https://github.com/Hopding/pdf-lib)
-- [Zod for schema declaration and validation](https://zod.dev/)
-- [Lucide React for icons in React app](https://lucide.dev/)
-- [Framer Motion for motion library](https://www.framer.com/motion/)
-- [Radix UI for component library](https://www.radix-ui.com/)
 - Check out `/package.json` and `/apps/web/package.json` for more
 - Support for [opensignpdf (requires Java on server)](https://github.com/open-pdf-sign) is currently planned.
 

apps/marketing/content/blog/next.mdx

@@ -1,56 +0,0 @@
----
-title: Preview the next Documenso
-description: We're redesigning Documenso by making it more elegant and appropriately playful. Here's a sneak peek.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2023-08-21
-tags:
-  - Design
-  - Preview
----
-
-Since we launched [Documenso 0.9 on Product Hunt](https://producthunt.com/products/documenso#documenso) last May, the team's been hard at work behind the scenes to ramp up development and design to deliver an excellent next version.
-
-Last week, Lucas shared the reasoning how [why we're doing a rewrite](https://documenso.com/blog/why-were-doing-a-rewrite).
-
-Today, I'm pleased to share with you a preview of the next Documenso.
-
-## Preview the next Documenso
-
-We redesigned the whole signing flow to make it more appealing and more convenient.
-
-We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it. 
-
-**We call it happy minimalism.**
-
-We paid particular attention to the moment of signing, which should be celebrated. 
-
-The image below is the final bloom of the completion celebration we added:
-
-<figure>
-  <MdxNextImage
-    src="/blog/blog-fig-preview-documenso.webp"
-    width="2000"
-    height="1268"
-    alt="Figure 1"
-  />
-
-  <figcaption className="text-center">"You've signed a new document."</figcaption>
-</figure>
-
-## Kicking off a new phase of collaboration
-
-This preview also is the kickoff for a new phase of how we collaborate with the community.
-
-We recently [switched to Discord](https://documenso.com/blog/switching-from-slack-to-discord) to set up a more developer-friendly, community-driven environment, and we just released the [public roadmap](https://documen.so/launches).
-
-As always, if you have any questions or feedback, please reach out. We love to hear from you.
-
-Best from Hamburg,
-
-Timur
-
-Make sure to [star the GitHub repository](https://documen.so/github), [follow us on X](http://documen.so/twitter) and [join the Discord server](https://documen.so/discord) to keep up to date with all things Documenso.
-
-We're building a beautiful, open-source alternative to DocuSign.

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

@@ -1,36 +0,0 @@
----
-title: Announcing Pre-Seed and Open Metrics
-description: We are exicited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2023-08-17
-tags:
-  - Funding
-  - Metrics
-  - Open Startup
----
-
-Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it. 
-
-## Two more for the road (to open signing)
-We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso.
-
-## Open Source, Open Metrics
-If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com. 
-
-The two main takeaways are:
-
-- "Any Startup that shares its metrics as open as technically and operationally possible is an Open Startup."
-- "Why should I care? Frankly speaking, Open Startups have a tough time screwing you over."
-
-The more open the culture, the less shady stuff is going on. While this may sound trivial, the implications are profound. A new generation of organizations, operating more ethically and responsibly simply because everything is out in the open. 
-
-For us, there are two sides to being an Open Startup:
-
-- The company side: Sharing Financial KPIs like growth, funding, team structure, salary, internal processes, and tools.
-- The product side: Sharing insights and data like usage, reach, and GitHub activity.
-
-Both sides aim to contribute to the global knowledge base of how startups work, specifically COSS startups. As we see more and more COSS, best practices and business insights should be broadly available to let the space mature. As we contribute code to the global community, we also contribute our business knowledge to help bring about even more COSS. 
-
-Starting today, we're releasing a lot of our data as part of the Open Startup movement. You can find the juicy details on our funding and more here: [documen.so/open](https://documen.so/open)

apps/marketing/package.json

@@ -7,8 +7,7 @@
     "dev": "PORT=3001 next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "lint": "next lint"
   },
   "dependencies": {
     "@documenso/lib": "*",

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

@@ -2,7 +2,7 @@
 
 import { HTMLAttributes, useEffect, useState } from 'react';
 
-import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -53,33 +53,30 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
-          <PieChart width={400} height={400}>
-            <Pie
-              data={CAP_TABLE}
-              cx="50%"
-              cy="50%"
-              labelLine={false}
-              label={renderCustomizedLabel}
-              outerRadius={160}
-              innerRadius={80}
-              fill="#8884d8"
-              dataKey="percentage"
-            >
-              {CAP_TABLE.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-              ))}
-            </Pie>
-            <Legend
-              formatter={(value) => {
-                return <span className="text-sm text-black">{value}</span>;
-              }}
-            />
-            <Tooltip
-              formatter={(percent: number, name, props) => {
-                return [`${percent}%`, name || props['name'] || props['payload']['name']];
-              }}
-            />
-          </PieChart>
+          <ResponsiveContainer width="100%" height={400}>
+            <PieChart>
+              <Pie
+                data={CAP_TABLE}
+                cx="50%"
+                cy="50%"
+                labelLine={false}
+                label={renderCustomizedLabel}
+                outerRadius={160}
+                innerRadius={80}
+                fill="#8884d8"
+                dataKey="percentage"
+              >
+                {CAP_TABLE.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip
+                formatter={(percent: number, name, props) => {
+                  return [`${percent}%`, name || props['name'] || props['payload']['name']];
+                }}
+              />
+            </PieChart>
+          </ResponsiveContainer>
         )}
       </div>
     </div>

apps/marketing/src/app/(marketing)/open/data.ts

@@ -56,11 +56,11 @@ export const FUNDING_RAISED = [
   },
   {
     date: '2023-05',
-    amount: 290_000,
+    amount: 300_000,
   },
   {
     date: '2023-07',
-    amount: 1_540_000,
+    amount: 1_550_000,
   },
 ];
 

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

@@ -70,12 +70,9 @@ export default async function OpenPage() {
       <div className="flex flex-col items-center justify-center">
         <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
 
-        <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
           All our metrics, finances, and learnings are public. We believe in transparency and want
-          to share our journey with you. You can read more about why here:{' '}
-          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
-            Announcing Open Metrics
-          </a>
+          to share our journey with you.
         </p>
       </div>
 

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

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Github, MessagesSquare, Twitter } from 'lucide-react';
+import { Github, Slack, Twitter } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -36,16 +36,20 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             </Link>
 
             <Link
-              href="https://documen.so/discord"
+              href="https://documenso.slack.com"
               target="_blank"
               className="hover:text-[#6D6D6D]"
             >
-              <MessagesSquare className="h-6 w-6" />
+              <Slack className="h-6 w-6" />
             </Link>
           </div>
         </div>
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
+            Blog
+          </Link>
+
           <Link
             href="/pricing"
             className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
@@ -53,22 +57,6 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             Pricing
           </Link>
 
-          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
-            Blog
-          </Link>
-
-          <Link href="/open" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
-            Open
-          </Link>
-
-          <Link
-            href="https://shop.documenso.com"
-            target="_blank"
-            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            Shop
-          </Link>
-
           <Link
             href="https://status.documenso.com"
             target="_blank"

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

@@ -1,37 +1,26 @@
-'use client';
-
-import { HTMLAttributes, useState } from 'react';
+import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
 import { cn } from '@documenso/ui/lib/utils';
 
-import { HamburgerMenu } from './mobile-hamburger';
-import { MobileNavigation } from './mobile-navigation';
-
 export type HeaderProps = HTMLAttributes<HTMLElement>;
 
 export const Header = ({ className, ...props }: HeaderProps) => {
-  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
-
   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 href="/">
+        <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
       </Link>
 
-      <div className="hidden items-center gap-x-6 md:flex">
-        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
-          Pricing
-        </Link>
-
+      <div className="flex items-center gap-x-6">
         <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
           Blog
         </Link>
 
-        <Link href="/open" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
-          Open
+        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Pricing
         </Link>
 
         <Link
@@ -42,15 +31,6 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           Sign in
         </Link>
       </div>
-
-      <HamburgerMenu
-        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
-        isMenuOpen={isHamburgerMenuOpen}
-      />
-      <MobileNavigation
-        isMenuOpen={isHamburgerMenuOpen}
-        onMenuOpenChange={setIsHamburgerMenuOpen}
-      />
     </header>
   );
 };

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

@@ -1,20 +0,0 @@
-'use client';
-
-import { Menu, X } from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export interface HamburgerMenuProps {
-  isMenuOpen: boolean;
-  onToggleMenuOpen?: () => void;
-}
-
-export const HamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
-  return (
-    <div className="flex md:hidden">
-      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
-        {isMenuOpen ? <X /> : <Menu />}
-      </Button>
-    </div>
-  );
-};

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

@@ -1,121 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { motion, useReducedMotion } from 'framer-motion';
-import { Github, MessagesSquare, Twitter } from 'lucide-react';
-
-import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
-
-export type MobileNavigationProps = {
-  isMenuOpen: boolean;
-  onMenuOpenChange?: (_value: boolean) => void;
-};
-
-export const MENU_NAVIGATION_LINKS = [
-  {
-    href: '/blog',
-    text: 'Blog',
-  },
-  {
-    href: '/pricing',
-    text: 'Pricing',
-  },
-  {
-    href: 'https://status.documenso.com',
-    text: 'Status',
-  },
-  {
-    href: 'mailto:support@documenso.com',
-    text: 'Support',
-  },
-  {
-    href: '/privacy',
-    text: 'Privacy',
-  },
-  {
-    href: 'https://app.documenso.com/login',
-    text: 'Sign in',
-  },
-];
-
-export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
-  const shouldReduceMotion = useReducedMotion();
-
-  const handleMenuItemClick = () => {
-    onMenuOpenChange?.(false);
-  };
-
-  return (
-    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
-      <SheetContent className="w-full max-w-[400px]">
-        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
-          <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
-        </Link>
-
-        <motion.div
-          className="mt-12 flex w-full flex-col items-start gap-y-4"
-          initial="initial"
-          animate="animate"
-          transition={{
-            staggerChildren: 0.2,
-          }}
-        >
-          {MENU_NAVIGATION_LINKS.map(({ href, text }) => (
-            <motion.div
-              key={href}
-              variants={{
-                initial: {
-                  opacity: 0,
-                  x: shouldReduceMotion ? 0 : 100,
-                },
-                animate: {
-                  opacity: 1,
-                  x: 0,
-                  transition: {
-                    duration: 0.5,
-                  },
-                },
-              }}
-            >
-              <Link
-                className="text-2xl font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]"
-                href={href}
-                onClick={() => handleMenuItemClick()}
-              >
-                {text}
-              </Link>
-            </motion.div>
-          ))}
-        </motion.div>
-
-        <div className="mx-auto mt-8 flex w-full flex-wrap items-center gap-x-4 gap-y-4 ">
-          <Link
-            href="https://twitter.com/documenso"
-            target="_blank"
-            className="text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            <Twitter className="h-6 w-6" />
-          </Link>
-
-          <Link
-            href="https://github.com/documenso/documenso"
-            target="_blank"
-            className="text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            <Github className="h-6 w-6" />
-          </Link>
-
-          <Link
-            href="https://documen.so/discord"
-            target="_blank"
-            className="text-[#8D8D8D] hover:text-[#6D6D6D]"
-          >
-            <MessagesSquare className="h-6 w-6" />
-          </Link>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-};

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

@@ -21,12 +21,12 @@ import {
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { claimPlan } from '~/api/claim-plan/fetcher';
 
 import { FormErrorMessage } from '../form/form-error-message';
+import { SignaturePad } from '../signature-pad';
 
 const ZWidgetFormSchema = z
   .object({

apps/marketing/src/components/signature-pad/signature-pad.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import {
+  HTMLAttributes,
+  MouseEvent,
+  PointerEvent,
+  TouchEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { StrokeOptions, getStroke } from 'perfect-freehand';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { getSvgPathFromStroke } from './helper';
+import { Point } from './point';
+
+const DPI = 2;
+
+export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
+  onChange?: (_signatureDataUrl: string | null) => void;
+};
+
+export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProps) => {
+  const $el = useRef<HTMLCanvasElement>(null);
+
+  const [isPressed, setIsPressed] = useState(false);
+  const [points, setPoints] = useState<Point[]>([]);
+
+  const perfectFreehandOptions = useMemo(() => {
+    const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
+
+    return {
+      size,
+      thinning: 0.25,
+      streamline: 0.5,
+      smoothing: 0.5,
+      end: {
+        taper: size * 2,
+      },
+    } satisfies StrokeOptions;
+  }, []);
+
+  const onMouseDown = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    setIsPressed(true);
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    const newPoints = [...points, point];
+
+    setPoints(newPoints);
+
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      if (ctx) {
+        ctx.save();
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const pathData = new Path2D(
+          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
+        );
+
+        ctx.fill(pathData);
+      }
+    }
+  };
+
+  const onMouseMove = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if (!isPressed) {
+      return;
+    }
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    if (point.distanceTo(points[points.length - 1]) > 5) {
+      const newPoints = [...points, point];
+
+      setPoints(newPoints);
+
+      if ($el.current) {
+        const ctx = $el.current.getContext('2d');
+
+        if (ctx) {
+          ctx.restore();
+
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = 'high';
+
+          const pathData = new Path2D(
+            getSvgPathFromStroke(getStroke(points, perfectFreehandOptions)),
+          );
+
+          ctx.fill(pathData);
+        }
+      }
+    }
+  };
+
+  const onMouseUp = (event: MouseEvent | PointerEvent | TouchEvent, addPoint = true) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    setIsPressed(false);
+
+    const point = Point.fromEvent(event, DPI, $el.current);
+
+    const newPoints = [...points];
+
+    if (addPoint) {
+      newPoints.push(point);
+
+      setPoints(newPoints);
+    }
+
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      if (ctx) {
+        ctx.restore();
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        const pathData = new Path2D(
+          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
+        );
+
+        ctx.fill(pathData);
+
+        ctx.save();
+      }
+
+      onChange?.($el.current.toDataURL());
+    }
+
+    setPoints([]);
+  };
+
+  const onMouseEnter = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if ('buttons' in event && event.buttons === 1) {
+      onMouseDown(event);
+    }
+  };
+
+  const onMouseLeave = (event: MouseEvent | PointerEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    onMouseUp(event, false);
+  };
+
+  const onClearClick = () => {
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+
+      ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+    }
+
+    onChange?.(null);
+
+    setPoints([]);
+  };
+
+  useEffect(() => {
+    if ($el.current) {
+      $el.current.width = $el.current.clientWidth * DPI;
+      $el.current.height = $el.current.clientHeight * DPI;
+    }
+  }, []);
+
+  return (
+    <div className="relative block">
+      <canvas
+        ref={$el}
+        className={cn('relative block', className)}
+        style={{ touchAction: 'none' }}
+        onPointerMove={(event) => onMouseMove(event)}
+        onPointerDown={(event) => onMouseDown(event)}
+        onPointerUp={(event) => onMouseUp(event)}
+        onPointerLeave={(event) => onMouseLeave(event)}
+        onPointerEnter={(event) => onMouseEnter(event)}
+        {...props}
+      />
+
+      <div className="absolute bottom-2 right-2">
+        <button className="rounded-full p-2 text-xs text-slate-500" onClick={() => onClearClick()}>
+          Clear Signature
+        </button>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/hooks/use-window-size.ts

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useWindowSize() {
-  const [size, setSize] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  const onResize = () => {
-    setSize({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-  };
-
-  useEffect(() => {
-    onResize();
-
-    window.addEventListener('resize', onResize);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
-
-  return size;
-}

apps/marketing/tsconfig.json

@@ -9,10 +9,16 @@
       }
     ],
     "paths": {
-      "~/*": ["./src/*"],
-      "contentlayer/generated": ["./.contentlayer/generated"]
+      "~/*": [
+        "./src/*"
+      ],
+      "contentlayer/generated": [
+        "./.contentlayer/generated"
+      ]
     },
-    "types": ["@documenso/lib/types/next-auth.d.ts"],
+    "types": [
+      "@documenso/lib/types/next-auth.d.ts"
+    ],
     "strictNullChecks": true,
     "incremental": false
   },
@@ -23,5 +29,7 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/web/package.json

@@ -7,8 +7,7 @@
     "dev": "PORT=3000 next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "lint": "next lint"
   },
   "dependencies": {
     "@documenso/lib": "*",
@@ -28,15 +27,13 @@
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
     "perfect-freehand": "^1.2.0",
-    "posthog-js": "^1.75.3",
-    "posthog-node": "^3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
+    "react-pdf": "^7.1.1",
     "react-rnd": "^10.4.1",
-    "ts-pattern": "^5.0.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },

apps/web/process-env.d.ts

@@ -10,6 +10,8 @@ declare namespace NodeJS {
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
 
+    NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
+
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
   }

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

@@ -5,10 +5,10 @@ import { useRouter } from 'next/navigation';
 import { Loader } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCreateDocument } from '~/api/document/create/fetcher';
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
 
 export type UploadDocumentProps = {
   className?: string;

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

@@ -2,23 +2,28 @@
 
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
 
 import { Document, Field, Recipient, User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
-import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
-import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/add-signers';
-import { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
-import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/add-subject';
-import { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { addFields } from '~/components/forms/edit-document/add-fields.action';
-import { addSigners } from '~/components/forms/edit-document/add-signers.action';
-import { completeDocument } from '~/components/forms/edit-document/add-subject.action';
+import { AddFieldsFormPartial } from '~/components/forms/edit-document/add-fields';
+import { AddSignersFormPartial } from '~/components/forms/edit-document/add-signers';
+import { AddSubjectFormPartial } from '~/components/forms/edit-document/add-subject';
+
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+      <p className="text-muted-foreground mt-4">Loading document...</p>
+    </div>
+  ),
+});
 
 export type EditDocumentFormProps = {
   className?: string;
@@ -35,9 +40,6 @@ export const EditDocumentForm = ({
   fields,
   user: _user,
 }: EditDocumentFormProps) => {
-  const { toast } = useToast();
-  const router = useRouter();
-
   const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
 
   const documentUrl = `data:application/pdf;base64,${document.document}`;
@@ -62,76 +64,6 @@ export const EditDocumentForm = ({
     }
   };
 
-  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
-    try {
-      // Custom invocation server action
-      await addSigners({
-        documentId: document.id,
-        signers: data.signers,
-      });
-
-      router.refresh();
-
-      onNextStep();
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while adding signers.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
-    try {
-      // Custom invocation server action
-      await addFields({
-        documentId: document.id,
-        fields: data.fields,
-      });
-
-      router.refresh();
-
-      onNextStep();
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while adding signers.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message } = data.email;
-
-    try {
-      await completeDocument({
-        documentId: document.id,
-        email: {
-          subject,
-          message,
-        },
-      });
-
-      router.refresh();
-
-      onNextStep();
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while sending the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -139,7 +71,7 @@ export const EditDocumentForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer document={documentUrl} />
+          <PDFViewer document={documentUrl} />
         </CardContent>
       </Card>
 
@@ -151,7 +83,6 @@ export const EditDocumentForm = ({
             document={document}
             onContinue={onNextStep}
             onGoBack={onPreviousStep}
-            onSubmit={onAddSignersFormSubmit}
           />
         )}
 
@@ -162,7 +93,6 @@ export const EditDocumentForm = ({
             document={document}
             onContinue={onNextStep}
             onGoBack={onPreviousStep}
-            onSubmit={onAddFieldsFormSubmit}
           />
         )}
 
@@ -173,7 +103,6 @@ export const EditDocumentForm = ({
             document={document}
             onContinue={onNextStep}
             onGoBack={onPreviousStep}
-            onSubmit={onAddSubjectFormSubmit}
           />
         )}
       </div>

apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx

@@ -1,19 +1,34 @@
 'use client';
 
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { PDFViewerProps } from '@documenso/ui/primitives/pdf-viewer';
+
+import { PDFViewerProps } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
 
 export type LoadablePDFCard = PDFViewerProps & {
   className?: string;
   pdfClassName?: string;
 };
 
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="h-12 w-12 animate-spin text-slate-500" />
+
+      <p className="mt-4 text-slate-500">Loading document...</p>
+    </div>
+  ),
+});
+
 export const LoadablePDFCard = ({ className, pdfClassName, ...props }: LoadablePDFCard) => {
   return (
     <Card className={className} gradient {...props}>
       <CardContent className="p-2">
-        <LazyPDFViewer className={pdfClassName} {...props} />
+        <PDFViewer className={pdfClassName} {...props} />
       </CardContent>
     </Card>
   );

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

@@ -1,17 +1,23 @@
 import Link from 'next/link';
 
+import { Plus } from 'lucide-react';
+
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
 import { getStats } from '@documenso/lib/server-only/document/get-stats';
 import { isDocumentStatus } from '@documenso/lib/types/is-document-status';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import {
+  PeriodSelectorValue,
+  isPeriodSelectorValue,
+} from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
-import { UploadDocument } from '../dashboard/upload-document';
 import { DocumentsDataTable } from './data-table';
 
 export type DocumentsPageProps = {
@@ -31,12 +37,10 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
   });
 
   const status = isDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
-  // const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
 
-  const shouldDefaultToPending = status === 'ALL' && stats.PENDING > 0;
-
   const results = await findDocuments({
     userId: session.id,
     status: status === 'ALL' ? undefined : status,
@@ -48,6 +52,8 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
     perPage,
   });
 
+  const isNoResults = status === 'ALL' && period === '' && results.data.length === 0;
+
   const getTabHref = (value: typeof status) => {
     const params = new URLSearchParams(searchParams);
 
@@ -66,13 +72,25 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <UploadDocument />
-
-      <h1 className="mt-12 text-4xl font-semibold">Documents</h1>
+      <h1 className="text-4xl font-semibold">All Documents</h1>
 
       <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
-        <Tabs defaultValue={shouldDefaultToPending ? InternalDocumentStatus.PENDING : status}>
+        <Tabs defaultValue={status}>
           <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
+              <Link href={getTabHref('ALL')}>All</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.DRAFT)}>
+                <DocumentStatus status={InternalDocumentStatus.DRAFT} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.DRAFT, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
             <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
               <Link href={getTabHref(InternalDocumentStatus.PENDING)}>
                 <DocumentStatus status={InternalDocumentStatus.PENDING} />
@@ -92,30 +110,26 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                 </span>
               </Link>
             </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
-              <Link href={getTabHref(InternalDocumentStatus.DRAFT)}>
-                <DocumentStatus status={InternalDocumentStatus.DRAFT} />
-
-                <span className="ml-1 hidden opacity-50 md:inline-block">
-                  {Math.min(stats.DRAFT, 99)}
-                </span>
-              </Link>
-            </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
-              <Link href={getTabHref('ALL')}>All</Link>
-            </TabsTrigger>
           </TabsList>
         </Tabs>
 
         <div className="flex flex-1 flex-wrap items-center justify-between gap-x-2 gap-y-4">
           <PeriodSelector />
+
+          <Button>
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Document
+          </Button>
         </div>
       </div>
 
       <div className="mt-8">
-        <DocumentsDataTable results={results} />
+        {/* If we're viewing all documents for all time and there's nuffin we should should an add document component instead */}
+        {isNoResults ? (
+          <DocumentDropzone className="min-h-[60vh] md:min-h-[40vh]" />
+        ) : (
+          <DocumentsDataTable results={results} />
+        )}
       </div>
     </div>
   );

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

@@ -8,7 +8,6 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
-import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
 
 export type AuthenticatedDashboardLayoutProps = {
@@ -31,8 +30,6 @@ export default async function AuthenticatedDashboardLayout({
       <Header user={user} />
 
       <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
-
-      <RefreshOnFocus />
     </NextAuthProvider>
   );
 }

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

@@ -1,17 +1,15 @@
 import { redirect } from 'next/navigation';
 
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
 import { PasswordForm } from '~/components/forms/password';
-import { getServerComponentFlag } from '~/helpers/get-server-component-feature-flag';
 
 export default async function BillingSettingsPage() {
   const user = await getRequiredServerComponentSession();
 
-  const isBillingEnabled = await getServerComponentFlag('app_billing');
-
   // Redirect if subscriptions are not enabled.
-  if (!isBillingEnabled) {
+  if (!IS_SUBSCRIPTIONS_ENABLED) {
     redirect('/settings/profile');
   }
 

apps/web/src/app/(signing)/sign/[token]/complete/download-button.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { HTMLAttributes } from 'react';
-
-import { Download } from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
-  disabled?: boolean;
-  fileName?: string;
-  document?: string;
-};
-
-export const DownloadButton = ({
-  className,
-  fileName,
-  document,
-  disabled,
-  ...props
-}: DownloadButtonProps) => {
-  /**
-   * Convert the document from base64 to a blob and download it.
-   */
-  const onDownloadClick = () => {
-    if (!document) {
-      return;
-    }
-
-    let decodedDocument = document;
-
-    try {
-      decodedDocument = atob(document);
-    } catch (err) {
-      // We're just going to ignore this error and try to download the document
-      console.error(err);
-    }
-
-    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = fileName || 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
-  };
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      className={className}
-      disabled={disabled || !document}
-      onClick={onDownloadClick}
-      {...props}
-    >
-      <Download className="mr-2 h-5 w-5" />
-      Download
-    </Button>
-  );
-};

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

@@ -1,107 +0,0 @@
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-
-import { CheckCircle2, Clock8, Share } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
-import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { DocumentStatus, FieldType } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { DownloadButton } from './download-button';
-import { SigningCard } from './signing-card';
-
-export type CompletedSigningPageProps = {
-  params: {
-    token?: string;
-  };
-};
-
-export default async function CompletedSigningPage({
-  params: { token },
-}: CompletedSigningPageProps) {
-  if (!token) {
-    return notFound();
-  }
-
-  const document = await getDocumentAndSenderByToken({
-    token,
-  }).catch(() => null);
-
-  if (!document) {
-    return notFound();
-  }
-
-  const [fields, recipient] = await Promise.all([
-    getFieldsForToken({ token }),
-    getRecipientByToken({ token }),
-  ]);
-
-  const recipientName =
-    recipient.name ||
-    fields.find((field) => field.type === FieldType.NAME)?.customText ||
-    recipient.email;
-
-  return (
-    <div className="flex flex-col items-center pt-24">
-      {/* Card with recipient */}
-      <SigningCard name={recipientName} />
-
-      <div className="mt-6">
-        {match(document.status)
-          .with(DocumentStatus.COMPLETED, () => (
-            <div className="text-documenso-700 flex items-center text-center">
-              <CheckCircle2 className="mr-2 h-5 w-5" />
-              <span className="text-sm">Everyone has signed</span>
-            </div>
-          ))
-          .otherwise(() => (
-            <div className="flex items-center text-center text-blue-600">
-              <Clock8 className="mr-2 h-5 w-5" />
-              <span className="text-sm">Waiting for others to sign</span>
-            </div>
-          ))}
-      </div>
-
-      <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-        You have signed "{document.title}"
-      </h2>
-
-      {match(document.status)
-        .with(DocumentStatus.COMPLETED, () => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            Everyone has signed! You will receive an Email copy of the signed document.
-          </p>
-        ))
-        .otherwise(() => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            You will receive an Email copy of the signed document once everyone has signed.
-          </p>
-        ))}
-
-      <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        {/* TODO: Hook this up */}
-        <Button variant="outline" className="flex-1">
-          <Share className="mr-2 h-5 w-5" />
-          Share
-        </Button>
-
-        <DownloadButton
-          className="flex-1"
-          fileName={document.title}
-          document={document.status === DocumentStatus.COMPLETED ? document.document : undefined}
-          disabled={document.status !== DocumentStatus.COMPLETED}
-        />
-      </div>
-
-      <p className="text-muted-foreground/60 mt-36 text-sm">
-        Want so send slick signing links like this one?{' '}
-        <Link href="https://documenso.com" className="text-documenso-700 hover:text-documenso-600">
-          Check out Documenso.
-        </Link>
-      </p>
-    </div>
-  );
-}

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>
-  );
-};

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

@@ -1,94 +0,0 @@
-'use client';
-
-import { useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { SigningFieldContainer } from './signing-field-container';
-
-export type DateFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const DateField = ({ field, recipient }: DateFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const onSign = async () => {
-    try {
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: '',
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Date</p>
-      )}
-
-      {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
-      )}
-    </SigningFieldContainer>
-  );
-};

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

@@ -1,126 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-
-import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
-import { Document, Field, Recipient } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-
-import { useRequiredSigningContext } from './provider';
-
-export type SigningFormProps = {
-  document: Document;
-  recipient: Recipient;
-  fields: Field[];
-};
-
-export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
-  const router = useRouter();
-
-  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
-
-  const {
-    handleSubmit,
-    formState: { isSubmitting },
-  } = useForm();
-
-  const isComplete = fields.every((f) => f.inserted);
-
-  const onFormSubmit = async () => {
-    if (!isComplete) {
-      return;
-    }
-
-    await completeDocumentWithToken({
-      token: recipient.token,
-      documentId: document.id,
-    });
-
-    router.push(`/sign/${recipient.token}/complete`);
-  };
-
-  return (
-    <form
-      className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border px-4 py-6',
-      )}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}>
-        <div className={cn('flex flex-1 flex-col')}>
-          <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
-
-          <p className="text-muted-foreground mt-2 text-sm">
-            Please review the document before signing.
-          </p>
-
-          <hr className="border-border mb-8 mt-4" />
-
-          <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">
-            <div className="flex flex-1 flex-col gap-y-4">
-              <div>
-                <Label htmlFor="full-name">Full Name</Label>
-
-                <Input
-                  type="text"
-                  id="full-name"
-                  className="bg-background mt-2"
-                  value={fullName}
-                  onChange={(e) => setFullName(e.target.value)}
-                />
-              </div>
-
-              <div>
-                <Label htmlFor="Signature">Signature</Label>
-
-                <Card className="mt-2" gradient degrees={-120}>
-                  <CardContent className="p-0">
-                    <SignaturePad
-                      className="h-44 w-full"
-                      defaultValue={signature ?? undefined}
-                      onChange={(value) => {
-                        console.log({
-                          signpadValue: value,
-                        });
-                        setSignature(value);
-                      }}
-                    />
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-
-            <div className="flex gap-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                size="lg"
-              >
-                Cancel
-              </Button>
-
-              <Button
-                type="submit"
-                className="flex-1"
-                size="lg"
-                disabled={!isComplete || isSubmitting}
-              >
-                {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-                Complete
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-};

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

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-
-import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
-import { NextAuthProvider } from '~/providers/next-auth';
-
-export type SigningLayoutProps = {
-  children: React.ReactNode;
-};
-
-export default async function SigningLayout({ children }: SigningLayoutProps) {
-  const user = await getServerComponentSession();
-
-  return (
-    <NextAuthProvider>
-      <div className="min-h-screen overflow-hidden">
-        {user && <AuthenticatedHeader user={user} />}
-
-        <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
-      </div>
-    </NextAuthProvider>
-  );
-}

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

@@ -1,163 +0,0 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useRequiredSigningContext } from './provider';
-import { SigningFieldContainer } from './signing-field-container';
-
-export type NameFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const NameField = ({ field, recipient }: NameFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-
-  const { fullName: providedFullName, setFullName: setProvidedFullName } =
-    useRequiredSigningContext();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const [showFullNameModal, setShowFullNameModal] = useState(false);
-  const [localFullName, setLocalFullName] = useState('');
-
-  const onSign = async (source: 'local' | 'provider' = 'provider') => {
-    try {
-      if (!providedFullName && !localFullName) {
-        setShowFullNameModal(true);
-        return;
-      }
-
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: source === 'local' && localFullName ? localFullName : providedFullName ?? '',
-        isBase64: false,
-      });
-
-      if (source === 'local' && !providedFullName) {
-        setProvidedFullName(localFullName);
-      }
-
-      setLocalFullName('');
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Name</p>
-      )}
-
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
-
-      <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
-        <DialogContent>
-          <DialogTitle>
-            Sign as {recipient.name}{' '}
-            <span className="text-muted-foreground">({recipient.email})</span>
-          </DialogTitle>
-
-          <div className="py-4">
-            <Label htmlFor="signature">Full Name</Label>
-
-            <Input
-              type="text"
-              className="mt-2"
-              value={localFullName}
-              onChange={(e) => setLocalFullName(e.target.value)}
-            />
-          </div>
-
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                onClick={() => {
-                  setShowFullNameModal(false);
-                  setLocalFullName('');
-                }}
-              >
-                Cancel
-              </Button>
-
-              <Button
-                type="button"
-                className="flex-1"
-                disabled={!localFullName}
-                onClick={() => {
-                  setShowFullNameModal(false);
-                  onSign('local');
-                }}
-              >
-                Sign
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </SigningFieldContainer>
-  );
-};

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

@@ -1,93 +0,0 @@
-import { notFound } from 'next/navigation';
-
-import { match } from 'ts-pattern';
-
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
-import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
-import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { FieldType } from '@documenso/prisma/client';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-
-import { DateField } from './date-field';
-import { SigningForm } from './form';
-import { NameField } from './name-field';
-import { SigningProvider } from './provider';
-import { SignatureField } from './signature-field';
-
-export type SigningPageProps = {
-  params: {
-    token?: string;
-  };
-};
-
-export default async function SigningPage({ params: { token } }: SigningPageProps) {
-  if (!token) {
-    return notFound();
-  }
-
-  const [document, fields, recipient] = await Promise.all([
-    getDocumentAndSenderByToken({
-      token,
-    }).catch(() => null),
-    getFieldsForToken({ token }),
-    getRecipientByToken({ token }),
-    viewedDocument({ token }),
-  ]);
-
-  if (!document) {
-    return notFound();
-  }
-
-  const documentUrl = `data:application/pdf;base64,${document.document}`;
-
-  return (
-    <SigningProvider email={recipient.email} fullName={recipient.name}>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-        <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {document.title}
-        </h1>
-
-        <div className="mt-2.5 flex items-center gap-x-6">
-          <p className="text-muted-foreground">
-            {document.User.name} ({document.User.email}) has invited you to sign this document.
-          </p>
-        </div>
-
-        <div className="mt-8 grid grid-cols-12 gap-8">
-          <Card
-            className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
-            gradient
-          >
-            <CardContent className="p-2">
-              <LazyPDFViewer document={documentUrl} />
-            </CardContent>
-          </Card>
-
-          <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <SigningForm document={document} recipient={recipient} fields={fields} />
-          </div>
-        </div>
-
-        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-          {fields.map((field) =>
-            match(field.type)
-              .with(FieldType.SIGNATURE, () => (
-                <SignatureField key={field.id} field={field} recipient={recipient} />
-              ))
-              .with(FieldType.NAME, () => (
-                <NameField key={field.id} field={field} recipient={recipient} />
-              ))
-              .with(FieldType.DATE, () => (
-                <DateField key={field.id} field={field} recipient={recipient} />
-              ))
-              .otherwise(() => null),
-          )}
-        </ElementVisible>
-      </div>
-    </SigningProvider>
-  );
-}

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

@@ -1,63 +0,0 @@
-'use client';
-
-import { createContext, useContext, useState } from 'react';
-
-export type SigningContextValue = {
-  fullName: string;
-  setFullName: (_value: string) => void;
-  email: string;
-  setEmail: (_value: string) => void;
-  signature: string | null;
-  setSignature: (_value: string | null) => void;
-};
-
-const SigningContext = createContext<SigningContextValue | null>(null);
-
-export const useSigningContext = () => {
-  return useContext(SigningContext);
-};
-
-export const useRequiredSigningContext = () => {
-  const context = useSigningContext();
-
-  if (!context) {
-    throw new Error('Signing context is required');
-  }
-
-  return context;
-};
-
-export interface SigningProviderProps {
-  fullName?: string;
-  email?: string;
-  signature?: string;
-  children: React.ReactNode;
-}
-
-export const SigningProvider = ({
-  fullName: initialFullName,
-  email: initialEmail,
-  signature: initialSignature,
-  children,
-}: SigningProviderProps) => {
-  const [fullName, setFullName] = useState(initialFullName || '');
-  const [email, setEmail] = useState(initialEmail || '');
-  const [signature, setSignature] = useState(initialSignature || null);
-
-  return (
-    <SigningContext.Provider
-      value={{
-        fullName,
-        setFullName,
-        email,
-        setEmail,
-        signature,
-        setSignature,
-      }}
-    >
-      {children}
-    </SigningContext.Provider>
-  );
-};
-
-SigningProvider.displayName = 'SigningProvider';

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

@@ -1,196 +0,0 @@
-'use client';
-
-import { useMemo, useState, useTransition } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Loader } from 'lucide-react';
-
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useRequiredSigningContext } from './provider';
-import { SigningFieldContainer } from './signing-field-container';
-
-type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
-
-export type SignatureFieldProps = {
-  field: FieldWithSignature;
-  recipient: Recipient;
-};
-
-export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
-  const router = useRouter();
-
-  const { toast } = useToast();
-  const { signature: providedSignature, setSignature: setProvidedSignature } =
-    useRequiredSigningContext();
-
-  const [isPending, startTransition] = useTransition();
-
-  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
-
-  const {
-    mutateAsync: removeSignedFieldWithToken,
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
-
-  const { Signature: signature } = field;
-
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
-
-  const [showSignatureModal, setShowSignatureModal] = useState(false);
-  const [localSignature, setLocalSignature] = useState<string | null>(null);
-
-  const state = useMemo<SignatureFieldState>(() => {
-    if (!field.inserted) {
-      return 'empty';
-    }
-
-    if (signature?.signatureImageAsBase64) {
-      return 'signed-image';
-    }
-
-    return 'signed-text';
-  }, [field.inserted, signature?.signatureImageAsBase64]);
-
-  const onSign = async (source: 'local' | 'provider' = 'provider') => {
-    try {
-      console.log({
-        providedSignature,
-        localSignature,
-      });
-
-      if (!providedSignature && !localSignature) {
-        setShowSignatureModal(true);
-        return;
-      }
-
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: source === 'local' && localSignature ? localSignature : providedSignature ?? '',
-        isBase64: true,
-      });
-
-      if (source === 'local' && !providedSignature) {
-        setProvidedSignature(localSignature);
-      }
-
-      setLocalSignature(null);
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onRemove = async () => {
-    try {
-      await removeSignedFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-      });
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-          Signature
-        </p>
-      )}
-
-      {state === 'signed-image' && signature?.signatureImageAsBase64 && (
-        <img
-          src={signature.signatureImageAsBase64}
-          alt={`Signature for ${recipient.name}`}
-          className="h-full w-full object-contain"
-        />
-      )}
-
-      {state === 'signed-text' && (
-        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-          {signature?.typedSignature}
-        </p>
-      )}
-
-      <Dialog open={showSignatureModal} onOpenChange={setShowSignatureModal}>
-        <DialogContent>
-          <DialogTitle>
-            Sign as {recipient.name}{' '}
-            <span className="text-muted-foreground">({recipient.email})</span>
-          </DialogTitle>
-
-          <div className="">
-            <Label htmlFor="signature">Signature</Label>
-
-            <SignaturePad
-              id="signature"
-              className="border-border mt-2 h-44 w-full rounded-md border"
-              onChange={(value) => setLocalSignature(value)}
-            />
-          </div>
-
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                onClick={() => {
-                  setShowSignatureModal(false);
-                  setLocalSignature(null);
-                }}
-              >
-                Cancel
-              </Button>
-
-              <Button
-                type="button"
-                className="flex-1"
-                disabled={!localSignature}
-                onClick={() => {
-                  setShowSignatureModal(false);
-                  onSign('local');
-                }}
-              >
-                Sign
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </SigningFieldContainer>
-  );
-};

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

@@ -1,81 +0,0 @@
-'use client';
-
-import React from 'react';
-
-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;
-  children: React.ReactNode;
-  onSign?: () => Promise<void> | void;
-  onRemove?: () => Promise<void> | void;
-};
-
-export const SigningFieldContainer = ({
-  field,
-  loading,
-  onSign,
-  onRemove,
-  children,
-}: SignatureFieldProps) => {
-  const coords = useFieldPageCoords(field);
-
-  const onSignFieldClick = async () => {
-    if (field.inserted) {
-      return;
-    }
-
-    await onSign?.();
-  };
-
-  const onRemoveSignedFieldClick = async () => {
-    if (!field.inserted) {
-      return;
-    }
-
-    await onRemove?.();
-  };
-
-  return (
-    <div
-      className="absolute"
-      style={{
-        top: `${coords.y}px`,
-        left: `${coords.x}px`,
-        height: `${coords.height}px`,
-        width: `${coords.width}px`,
-      }}
-    >
-      <Card
-        className="bg-background relative h-full w-full"
-        data-inserted={field.inserted ? 'true' : 'false'}
-      >
-        <CardContent
-          className={cn(
-            'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2',
-          )}
-        >
-          {!field.inserted && !loading && (
-            <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
-          )}
-
-          {field.inserted && !loading && (
-            <button
-              className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
-              onClick={onRemoveSignedFieldClick}
-            >
-              Remove
-            </button>
-          )}
-
-          {children}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};

apps/web/src/app/layout.tsx

@@ -1,22 +1,15 @@
-import { Suspense } from 'react';
-
-import { Caveat, Inter } from 'next/font/google';
+import { Inter } from 'next/font/google';
 
 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';
 
 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',
@@ -42,15 +35,9 @@ export const metadata = {
   },
 };
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const flags = await getServerComponentAllFlags();
-
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html
-      lang="en"
-      className={cn(fontInter.variable, fontCaveat.variable)}
-      suppressHydrationWarning
-    >
+    <html lang="en" className={fontInter.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" />
@@ -58,21 +45,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="manifest" href="/site.webmanifest" />
       </head>
 
-      <Suspense>
-        <PostHogPageview />
-      </Suspense>
-
       <body>
-        <FeatureFlagProvider initialFlags={flags}>
-          <PlausibleProvider>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <TooltipProvider>
-                <TrpcProvider>{children}</TrpcProvider>
-              </TooltipProvider>
-            </ThemeProvider>
-          </PlausibleProvider>
-          <Toaster />
-        </FeatureFlagProvider>
+        <PlausibleProvider>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <TooltipProvider>
+              <TrpcProvider>{children}</TrpcProvider>
+            </TooltipProvider>
+          </ThemeProvider>
+        </PlausibleProvider>
+        <Toaster />
       </body>
     </html>
   );

apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx

@@ -12,7 +12,7 @@ export type StackAvatarProps = {
   first?: boolean;
   zIndex?: string;
   fallbackText?: string;
-  type: 'unsigned' | 'waiting' | 'opened' | 'completed';
+  type: 'unsigned' | 'waiting' | 'completed';
 };
 
 export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
@@ -28,9 +28,6 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
     case 'unsigned':
       classes = 'bg-dawn-200 text-dawn-900';
       break;
-    case 'opened':
-      classes = 'bg-yellow-200 text-yellow-700';
-      break;
     case 'waiting':
       classes = 'bg-water text-water-700';
       break;

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -13,19 +13,15 @@ import { StackAvatars } from './stack-avatars';
 
 export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
   const waitingRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'waiting',
-  );
-
-  const openedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'opened',
+    (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
   );
 
   const completedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'completed',
+    (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
   );
 
   const uncompletedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'unsigned',
+    (recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
   );
 
   return (
@@ -70,23 +66,6 @@ export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[
               </div>
             )}
 
-            {openedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Opened</h1>
-                {openedRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={initials(recipient.name)}
-                    />
-                    <span className="text-sm text-gray-500">{recipient.email}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-
             {uncompletedRecipients.length > 0 && (
               <div>
                 <h1 className="text-base font-medium">Uncompleted</h1>

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -2,15 +2,30 @@
 
 import { HTMLAttributes } from 'react';
 
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
 import { cn } from '@documenso/ui/lib/utils';
 
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+  const pathname = usePathname();
+
   return (
     <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
-      {/* No Nav tabs while there is only one main page */}
-      {/* <Link
+      <Link
+        href="/dashboard"
+        className={cn(
+          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+          {
+            'text-foreground': pathname?.startsWith('/dashboard'),
+          },
+        )}
+      >
+        Dashboard
+      </Link>
+      <Link
         href="/documents"
         className={cn(
           'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 ',
@@ -20,6 +35,14 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         )}
       >
         Documents
+      </Link>
+      {/* <Link
+        href="/settings/profile"
+        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
+          'text-primary-foreground': pathname?.startsWith('/settings'),
+        })}
+      >
+        Settings
       </Link> */}
     </div>
   );

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -15,6 +15,7 @@ import {
 import { signOut } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -27,19 +28,11 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-import { useFeatureFlags } from '~/providers/feature-flag';
-
 export type ProfileDropdownProps = {
   user: User;
 };
 
 export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { theme, setTheme } = useTheme();
-
-  const { getFlag } = useFeatureFlags();
-
-  const isBillingEnabled = getFlag('app_billing');
-
   const initials =
     user.name
       ?.split(' ')
@@ -47,6 +40,8 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
       .slice(0, 2)
       .join('') ?? 'UK';
 
+  const { theme, setTheme } = useTheme();
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -74,7 +69,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </Link>
         </DropdownMenuItem>
 
-        {isBillingEnabled && (
+        {IS_SUBSCRIPTIONS_ENABLED && (
           <DropdownMenuItem asChild>
             <Link href="/settings/billing" className="cursor-pointer">
               <CreditCard className="mr-2 h-4 w-4" />

apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx

@@ -3,19 +3,21 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Loader } from 'lucide-react';
-import { PDFDocumentProxy } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 
 import { cn } from '@documenso/ui/lib/utils';
 
-export type LoadedPDFDocument = PDFDocumentProxy;
+type LoadedPDFDocument = pdfjs.PDFDocumentProxy;
 
 /**
  * This imports the worker from the `pdfjs-dist` package.
  */
-pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.min.js`;
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.js',
+  import.meta.url,
+).toString();
 
 export type OnPDFViewerPageClick = (_event: {
   pageNumber: number;

apps/web/src/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { useCallback, useEffect } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-export const RefreshOnFocus = () => {
-  const { refresh } = useRouter();
-
-  const onFocus = useCallback(() => {
-    refresh();
-  }, [refresh]);
-
-  useEffect(() => {
-    window.addEventListener('focus', onFocus);
-
-    return () => {
-      window.removeEventListener('focus', onFocus);
-    };
-  }, [onFocus]);
-
-  return null;
-};

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -7,20 +7,15 @@ import { usePathname } from 'next/navigation';
 
 import { CreditCard, Key, User } from 'lucide-react';
 
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 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) => {
   const pathname = usePathname();
 
-  const { getFlag } = useFeatureFlags();
-
-  const isBillingEnabled = getFlag('app_billing');
-
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
       <Link href="/settings/profile">
@@ -49,7 +44,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      {isBillingEnabled && (
+      {IS_SUBSCRIPTIONS_ENABLED && (
         <Link href="/settings/billing">
           <Button
             variant="ghost"

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -7,20 +7,15 @@ import { usePathname } from 'next/navigation';
 
 import { CreditCard, Key, User } from 'lucide-react';
 
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 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) => {
   const pathname = usePathname();
 
-  const { getFlag } = useFeatureFlags();
-
-  const isBillingEnabled = getFlag('app_billing');
-
   return (
     <div
       className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)}
@@ -52,7 +47,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      {isBillingEnabled && (
+      {IS_SUBSCRIPTIONS_ENABLED && (
         <Link href="/settings/billing">
           <Button
             variant="ghost"

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

@@ -21,12 +21,12 @@ import {
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { claimPlan } from '~/api/claim-plan/fetcher';
 
 import { FormErrorMessage } from '../form/form-error-message';
+import { SignaturePad } from '../signature-pad';
 
 const ZWidgetFormSchema = z
   .object({

apps/web/src/components/formatter/document-status.tsx

@@ -13,6 +13,11 @@ type FriendlyStatus = {
 };
 
 const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
+  DRAFT: {
+    label: 'Draft',
+    icon: File,
+    color: 'text-yellow-500',
+  },
   PENDING: {
     label: 'Pending',
     icon: Clock,
@@ -23,11 +28,6 @@ const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
     icon: CheckCircle2,
     color: 'text-green-500',
   },
-  DRAFT: {
-    label: 'Draft',
-    icon: File,
-    color: 'text-yellow-500',
-  },
 };
 
 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {

apps/web/src/components/forms/edit-document/add-fields.action.ts

@@ -2,7 +2,8 @@
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
-import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+
+import { TAddFieldsFormSchema } from './add-fields.types';
 
 export type AddFieldsActionInput = TAddFieldsFormSchema & {
   documentId: number;

apps/web/src/components/forms/edit-document/add-fields.tsx

@@ -3,13 +3,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Caveat } from 'next/font/google';
+import { useRouter } from 'next/navigation';
 
 import { Check, ChevronsUpDown, Info } from 'lucide-react';
 import { nanoid } from 'nanoid';
 import { useFieldArray, useForm } from 'react-hook-form';
 
-import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { Document, Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -23,15 +22,20 @@ import {
 } from '@documenso/ui/primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+import { getBoundingClientRect } from '~/helpers/getBoundingClientRect';
+
+import { addFields } from './add-fields.action';
 import { TAddFieldsFormSchema } from './add-fields.types';
 import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerActions,
-  DocumentFlowFormContainerContent,
-  DocumentFlowFormContainerFooter,
-  DocumentFlowFormContainerStep,
-} from './document-flow-root';
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 import { FieldItem } from './field-item';
 import { FRIENDLY_FIELD_TYPE } from './types';
 
@@ -54,15 +58,18 @@ export type AddFieldsFormProps = {
   document: Document;
   onContinue?: () => void;
   onGoBack?: () => void;
-  onSubmit: (_data: TAddFieldsFormSchema) => void;
 };
 
 export const AddFieldsFormPartial = ({
   recipients,
   fields,
+  document,
+  onContinue,
   onGoBack,
-  onSubmit,
 }: AddFieldsFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
   const {
     control,
     handleSubmit,
@@ -296,6 +303,28 @@ export const AddFieldsFormPartial = ({
     [localFields, update],
   );
 
+  const onFormSubmit = handleSubmit(async (data: TAddFieldsFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addFields({
+        documentId: document.id,
+        fields: data.fields,
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   useEffect(() => {
     if (selectedField) {
       window.addEventListener('mousemove', onMouseMove);
@@ -328,8 +357,8 @@ export const AddFieldsFormPartial = ({
   }, [recipients]);
 
   return (
-    <DocumentFlowFormContainer>
-      <DocumentFlowFormContainerContent
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
         title="Add Fields"
         description="Add all relevant fields for each recipient."
       >
@@ -531,18 +560,18 @@ export const AddFieldsFormPartial = ({
             </div>
           </div>
         </div>
-      </DocumentFlowFormContainerContent>
+      </EditDocumentFormContainerContent>
 
-      <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep title="Add Fields" step={2} maxStep={3} />
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Fields" step={2} maxStep={3} />
 
-        <DocumentFlowFormContainerActions
+        <EditDocumentFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoNextClick={() => handleSubmit(onSubmit)()}
+          onGoNextClick={() => onFormSubmit()}
           onGoBackClick={onGoBack}
         />
-      </DocumentFlowFormContainerFooter>
-    </DocumentFlowFormContainer>
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };

apps/web/src/components/forms/edit-document/add-signers.action.ts

@@ -2,7 +2,8 @@
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
-import { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
+
+import { TAddSignersFormSchema } from './add-signers.types';
 
 export type AddSignersActionInput = TAddSignersFormSchema & {
   documentId: number;

apps/web/src/components/forms/edit-document/add-signers.tsx

@@ -2,6 +2,8 @@
 
 import React, { useId } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import { AnimatePresence, motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
 import { nanoid } from 'nanoid';
@@ -9,19 +11,21 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { Document, Field, Recipient, SendStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { FormErrorMessage } from '~/components/form/form-error-message';
+
+import { addSigners } from './add-signers.action';
 import { TAddSignersFormSchema } from './add-signers.types';
 import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerActions,
-  DocumentFlowFormContainerContent,
-  DocumentFlowFormContainerFooter,
-  DocumentFlowFormContainerStep,
-} from './document-flow-root';
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 
 export type AddSignersFormProps = {
   recipients: Recipient[];
@@ -29,16 +33,17 @@ export type AddSignersFormProps = {
   document: Document;
   onContinue?: () => void;
   onGoBack?: () => void;
-  onSubmit: (_data: TAddSignersFormSchema) => void;
 };
 
 export const AddSignersFormPartial = ({
   recipients,
   fields: _fields,
+  document: document,
+  onContinue,
   onGoBack,
-  onSubmit,
 }: AddSignersFormProps) => {
   const { toast } = useToast();
+  const router = useRouter();
 
   const initialId = useId();
 
@@ -115,9 +120,31 @@ export const AddSignersFormPartial = ({
     }
   };
 
+  const onFormSubmit = handleSubmit(async (data: TAddSignersFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addSigners({
+        documentId: document.id,
+        signers: data.signers,
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   return (
-    <DocumentFlowFormContainer onSubmit={handleSubmit(onSubmit)}>
-      <DocumentFlowFormContainerContent
+    <EditDocumentFormContainer onSubmit={onFormSubmit}>
+      <EditDocumentFormContainerContent
         title="Add Signers"
         description="Add the people who will sign the document."
       >
@@ -202,18 +229,18 @@ export const AddSignersFormPartial = ({
             Add Signer
           </Button>
         </div>
-      </DocumentFlowFormContainerContent>
+      </EditDocumentFormContainerContent>
 
-      <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep title="Add Signers" step={1} maxStep={3} />
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Signers" step={1} maxStep={3} />
 
-        <DocumentFlowFormContainerActions
+        <EditDocumentFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoNextClick={() => handleSubmit(onSubmit)()}
+          onGoNextClick={() => onFormSubmit()}
           onGoBackClick={onGoBack}
         />
-      </DocumentFlowFormContainerFooter>
-    </DocumentFlowFormContainer>
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };

apps/web/src/components/forms/edit-document/add-subject.action.ts

@@ -2,7 +2,8 @@
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
-import { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
+
+import { TAddSubjectFormSchema } from './add-subject.types';
 
 export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
   documentId: number;

apps/web/src/components/forms/edit-document/add-subject.tsx

@@ -1,22 +1,26 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { useForm } from 'react-hook-form';
 
 import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FormErrorMessage } from '~/components/form/form-error-message';
 
+import { completeDocument } from './add-subject.action';
 import { TAddSubjectFormSchema } from './add-subject.types';
 import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerActions,
-  DocumentFlowFormContainerContent,
-  DocumentFlowFormContainerFooter,
-  DocumentFlowFormContainerStep,
-} from './document-flow-root';
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 
 export type AddSubjectFormProps = {
   recipients: Recipient[];
@@ -24,16 +28,18 @@ export type AddSubjectFormProps = {
   document: Document;
   onContinue?: () => void;
   onGoBack?: () => void;
-  onSubmit: (_data: TAddSubjectFormSchema) => void;
 };
 
 export const AddSubjectFormPartial = ({
   recipients: _recipients,
   fields: _fields,
   document,
+  onContinue,
   onGoBack,
-  onSubmit,
 }: AddSubjectFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
   const {
     register,
     handleSubmit,
@@ -47,9 +53,35 @@ export const AddSubjectFormPartial = ({
     },
   });
 
+  const onFormSubmit = handleSubmit(async (data: TAddSubjectFormSchema) => {
+    const { subject, message } = data.email;
+
+    try {
+      await completeDocument({
+        documentId: document.id,
+        email: {
+          subject,
+          message,
+        },
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while sending the document.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   return (
-    <DocumentFlowFormContainer>
-      <DocumentFlowFormContainerContent
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
         title="Add Subject"
         description="Add the subject and message you wish to send to signers."
       >
@@ -119,19 +151,19 @@ export const AddSubjectFormPartial = ({
             </div>
           </div>
         </div>
-      </DocumentFlowFormContainerContent>
+      </EditDocumentFormContainerContent>
 
-      <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep title="Add Subject" step={3} maxStep={3} />
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Subject" step={3} maxStep={3} />
 
-        <DocumentFlowFormContainerActions
+        <EditDocumentFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
           goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
-          onGoNextClick={() => handleSubmit(onSubmit)()}
+          onGoNextClick={() => onFormSubmit()}
           onGoBackClick={onGoBack}
         />
-      </DocumentFlowFormContainerFooter>
-    </DocumentFlowFormContainer>
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };

apps/web/src/components/forms/edit-document/container.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { HTMLAttributes } from 'react';
 
 import { Loader } from 'lucide-react';
@@ -7,16 +5,16 @@ import { Loader } from 'lucide-react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type DocumentFlowFormContainerProps = HTMLAttributes<HTMLFormElement> & {
+export type EditDocumentFormContainerProps = HTMLAttributes<HTMLFormElement> & {
   children?: React.ReactNode;
 };
 
-export const DocumentFlowFormContainer = ({
+export const EditDocumentFormContainer = ({
   children,
   id = 'edit-document-form',
   className,
   ...props
-}: DocumentFlowFormContainerProps) => {
+}: EditDocumentFormContainerProps) => {
   return (
     <form
       id={id}
@@ -31,19 +29,19 @@ export const DocumentFlowFormContainer = ({
   );
 };
 
-export type DocumentFlowFormContainerContentProps = HTMLAttributes<HTMLDivElement> & {
+export type EditDocumentFormContainerContentProps = HTMLAttributes<HTMLDivElement> & {
   title: string;
   description: string;
   children?: React.ReactNode;
 };
 
-export const DocumentFlowFormContainerContent = ({
+export const EditDocumentFormContainerContent = ({
   children,
   title,
   description,
   className,
   ...props
-}: DocumentFlowFormContainerContentProps) => {
+}: EditDocumentFormContainerContentProps) => {
   return (
     <div className={cn('flex flex-1 flex-col', className)} {...props}>
       <h3 className="text-foreground text-2xl font-semibold">{title}</h3>
@@ -57,15 +55,15 @@ export const DocumentFlowFormContainerContent = ({
   );
 };
 
-export type DocumentFlowFormContainerFooterProps = HTMLAttributes<HTMLDivElement> & {
+export type EditDocumentFormContainerFooterProps = HTMLAttributes<HTMLDivElement> & {
   children?: React.ReactNode;
 };
 
-export const DocumentFlowFormContainerFooter = ({
+export const EditDocumentFormContainerFooter = ({
   children,
   className,
   ...props
-}: DocumentFlowFormContainerFooterProps) => {
+}: EditDocumentFormContainerFooterProps) => {
   return (
     <div className={cn('mt-4 flex-shrink-0', className)} {...props}>
       {children}
@@ -73,17 +71,17 @@ export const DocumentFlowFormContainerFooter = ({
   );
 };
 
-export type DocumentFlowFormContainerStepProps = {
+export type EditDocumentFormContainerStepProps = {
   title: string;
   step: number;
   maxStep: number;
 };
 
-export const DocumentFlowFormContainerStep = ({
+export const EditDocumentFormContainerStep = ({
   title,
   step,
   maxStep,
-}: DocumentFlowFormContainerStepProps) => {
+}: EditDocumentFormContainerStepProps) => {
   return (
     <div>
       <p className="text-muted-foreground text-sm">
@@ -105,7 +103,7 @@ export const DocumentFlowFormContainerStep = ({
   );
 };
 
-export type DocumentFlowFormContainerActionsProps = {
+export type EditDocumentFormContainerActionsProps = {
   canGoBack?: boolean;
   canGoNext?: boolean;
   goNextLabel?: string;
@@ -116,7 +114,7 @@ export type DocumentFlowFormContainerActionsProps = {
   disabled?: boolean;
 };
 
-export const DocumentFlowFormContainerActions = ({
+export const EditDocumentFormContainerActions = ({
   canGoBack = true,
   canGoNext = true,
   goNextLabel = 'Continue',
@@ -125,7 +123,7 @@ export const DocumentFlowFormContainerActions = ({
   onGoNextClick,
   loading,
   disabled,
-}: DocumentFlowFormContainerActionsProps) => {
+}: EditDocumentFormContainerActionsProps) => {
   return (
     <div className="mt-4 flex gap-x-4">
       <Button

apps/web/src/components/forms/edit-document/field-item.tsx

@@ -1,18 +1,17 @@
-'use client';
-
 import { useCallback, useEffect, useState } from 'react';
 
 import { Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
 
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import { FRIENDLY_FIELD_TYPE, TDocumentFlowFormSchema } from './types';
+import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
 
-type Field = TDocumentFlowFormSchema['fields'][0];
+import { FRIENDLY_FIELD_TYPE, TEditDocumentFormSchema } from './types';
+
+type Field = TEditDocumentFormSchema['fields'][0];
 
 export type FieldItemProps = {
   field: Field;

apps/web/src/components/forms/edit-document/provider.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useRef } from 'react';
+
+import { OnPDFViewerPageClick } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
+
+type EditFormContextValue = {
+  firePageClickEvent: OnPDFViewerPageClick;
+  registerPageClickHandler: (_handler: OnPDFViewerPageClick) => void;
+  unregisterPageClickHandler: (_handler: OnPDFViewerPageClick) => void;
+} | null;
+
+const EditFormContext = createContext<EditFormContextValue>(null);
+
+export type EditFormProviderProps = {
+  children: React.ReactNode;
+};
+
+export const useEditForm = () => {
+  const context = React.useContext(EditFormContext);
+
+  if (!context) {
+    throw new Error('useEditForm must be used within a EditFormProvider');
+  }
+
+  return context;
+};
+
+export const EditFormProvider = ({ children }: EditFormProviderProps) => {
+  const handlers = useRef(new Set<OnPDFViewerPageClick>());
+
+  const firePageClickEvent: OnPDFViewerPageClick = (event) => {
+    handlers.current.forEach((handler) => handler(event));
+  };
+
+  const registerPageClickHandler = (handler: OnPDFViewerPageClick) => {
+    handlers.current.add(handler);
+  };
+
+  const unregisterPageClickHandler = (handler: OnPDFViewerPageClick) => {
+    handlers.current.delete(handler);
+  };
+
+  return (
+    <EditFormContext.Provider
+      value={{
+        firePageClickEvent,
+        registerPageClickHandler,
+        unregisterPageClickHandler,
+      }}
+    >
+      {children}
+    </EditFormContext.Provider>
+  );
+};

apps/web/src/components/forms/edit-document/types.ts

@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { FieldType } from '@documenso/prisma/client';
 
-export const ZDocumentFlowFormSchema = z.object({
+export const ZEditDocumentFormSchema = z.object({
   signers: z
     .array(
       z.object({
@@ -37,7 +37,7 @@ export const ZDocumentFlowFormSchema = z.object({
   }),
 });
 
-export type TDocumentFlowFormSchema = z.infer<typeof ZDocumentFlowFormSchema>;
+export type TEditDocumentFormSchema = z.infer<typeof ZEditDocumentFormSchema>;
 
 export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
   [FieldType.SIGNATURE]: 'Signature',

apps/web/src/components/forms/profile.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
@@ -14,10 +12,10 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FormErrorMessage } from '../form/form-error-message';
+import { SignaturePad } from '../signature-pad';
 
 export const ZProfileFormSchema = z.object({
   name: z.string().min(1),
@@ -32,8 +30,6 @@ export type ProfileFormProps = {
 };
 
 export const ProfileForm = ({ className, user }: ProfileFormProps) => {
-  const router = useRouter();
-
   const { toast } = useToast();
 
   const {
@@ -63,8 +59,6 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
         description: 'Your profile has been updated successfully.',
         duration: 5000,
       });
-
-      router.refresh();
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({

apps/web/src/components/forms/signin.tsx

@@ -44,7 +44,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       await signIn('credentials', {
         email,
         password,
-        callbackUrl: '/documents',
+        callbackUrl: '/dashboard',
       }).catch((err) => {
         console.error(err);
       });

apps/web/src/components/forms/signup.tsx

@@ -12,9 +12,10 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { SignaturePad } from '../signature-pad';
+
 export const ZSignUpFormSchema = z.object({
   name: z.string().min(1),
   email: z.string().email().min(1),

apps/web/src/components/motion.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export * from 'framer-motion';
-
-export const MotionDiv = motion.div;

apps/web/src/components/signature-pad/canvas.ts

@@ -0,0 +1,321 @@
+import { Point } from './point';
+
+export class Canvas {
+  private readonly $canvas: HTMLCanvasElement;
+  private readonly $offscreenCanvas: HTMLCanvasElement;
+
+  private currentCanvasWidth = 0;
+  private currentCanvasHeight = 0;
+
+  private points: Point[] = [];
+  private onChangeHandlers: Array<(_canvas: Canvas, _cleared: boolean) => void> = [];
+
+  private isPressed = false;
+  private lastVelocity = 0;
+
+  private readonly VELOCITY_FILTER_WEIGHT = 0.5;
+  private readonly DPI = 2;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.$canvas = canvas;
+    this.$offscreenCanvas = document.createElement('canvas');
+
+    const { width, height } = this.$canvas.getBoundingClientRect();
+
+    this.currentCanvasWidth = width * this.DPI;
+    this.currentCanvasHeight = height * this.DPI;
+
+    this.$canvas.width = this.currentCanvasWidth;
+    this.$canvas.height = this.currentCanvasHeight;
+
+    Object.assign(this.$canvas.style, {
+      touchAction: 'none',
+      msTouchAction: 'none',
+      userSelect: 'none',
+    });
+
+    window.addEventListener('resize', this.onResize.bind(this));
+
+    this.$canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    this.$canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.$canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
+    this.$canvas.addEventListener('mouseenter', this.onMouseEnter.bind(this));
+    this.$canvas.addEventListener('mouseleave', this.onMouseLeave.bind(this));
+    this.$canvas.addEventListener('pointerdown', this.onMouseDown.bind(this));
+    this.$canvas.addEventListener('pointermove', this.onMouseMove.bind(this));
+    this.$canvas.addEventListener('pointerup', this.onMouseUp.bind(this));
+  }
+
+  /**
+   * Calculates the minimum stroke width as a percentage of the current canvas suitable for a signature.
+   */
+  private minStrokeWidth(): number {
+    return Math.min(this.currentCanvasWidth, this.currentCanvasHeight) * 0.005;
+  }
+
+  /**
+   * Calculates the maximum stroke width as a percentage of the current canvas suitable for a signature.
+   */
+  private maxStrokeWidth(): number {
+    return Math.min(this.currentCanvasWidth, this.currentCanvasHeight) * 0.035;
+  }
+
+  /**
+   * Retrieves the HTML canvas element.
+   */
+  public getCanvas(): HTMLCanvasElement {
+    return this.$canvas;
+  }
+
+  /**
+   * Retrieves the 2D rendering context of the canvas.
+   * Throws an error if the context is not available.
+   */
+  public getContext(): CanvasRenderingContext2D {
+    const ctx = this.$canvas.getContext('2d');
+
+    if (!ctx) {
+      throw new Error('Canvas context is not available.');
+    }
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    return ctx;
+  }
+
+  /**
+   * Handles the resize event of the canvas.
+   * Adjusts the canvas size and preserves the content using image data.
+   */
+  private onResize(): void {
+    const { width, height } = this.$canvas.getBoundingClientRect();
+
+    const oldWidth = this.currentCanvasWidth;
+    const oldHeight = this.currentCanvasHeight;
+
+    const ctx = this.getContext();
+
+    const imageData = ctx.getImageData(0, 0, oldWidth, oldHeight);
+
+    this.$canvas.width = width * this.DPI;
+    this.$canvas.height = height * this.DPI;
+
+    this.currentCanvasWidth = width * this.DPI;
+    this.currentCanvasHeight = height * this.DPI;
+
+    ctx.putImageData(imageData, 0, 0, 0, 0, width * this.DPI, height * this.DPI);
+  }
+
+  /**
+   * Handles the mouse down event on the canvas.
+   * Adds the starting point for the signature.
+   */
+  private onMouseDown(event: MouseEvent | PointerEvent | TouchEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    this.isPressed = true;
+
+    const point = Point.fromEvent(event, this.DPI);
+
+    this.addPoint(point);
+  }
+
+  /**
+   * Handles the mouse move event on the canvas.
+   * Adds a point to the signature if the mouse is pressed, based on the sample rate.
+   */
+  private onMouseMove(event: MouseEvent | PointerEvent | TouchEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    if (!this.isPressed) {
+      return;
+    }
+
+    const point = Point.fromEvent(event, this.DPI);
+
+    if (point.distanceTo(this.points[this.points.length - 1]) > 10) {
+      this.addPoint(point);
+    }
+  }
+
+  /**
+   * Handles the mouse up event on the canvas.
+   * Adds the final point for the signature and resets the points array.
+   */
+  private onMouseUp(event: MouseEvent | PointerEvent | TouchEvent, addPoint = true): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    this.isPressed = false;
+
+    const point = Point.fromEvent(event, this.DPI);
+
+    if (addPoint) {
+      this.addPoint(point);
+    }
+
+    this.onChangeHandlers.forEach((handler) => handler(this, false));
+
+    this.points = [];
+  }
+
+  private onMouseEnter(event: MouseEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    event.buttons === 1 && this.onMouseDown(event);
+  }
+
+  private onMouseLeave(event: MouseEvent): void {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    this.onMouseUp(event, false);
+  }
+
+  /**
+   * Adds a point to the signature and performs smoothing and drawing.
+   */
+  private addPoint(point: Point): void {
+    const lastPoint = this.points[this.points.length - 1] ?? point;
+
+    this.points.push(point);
+
+    const smoothedPoints = this.smoothSignature(this.points);
+
+    let velocity = point.velocityFrom(lastPoint);
+    velocity =
+      this.VELOCITY_FILTER_WEIGHT * velocity +
+      (1 - this.VELOCITY_FILTER_WEIGHT) * this.lastVelocity;
+
+    const newWidth =
+      velocity > 0 && this.lastVelocity > 0 ? this.strokeWidth(velocity) : this.minStrokeWidth();
+
+    this.drawSmoothSignature(smoothedPoints, newWidth);
+
+    this.lastVelocity = velocity;
+  }
+
+  /**
+   * Applies a smoothing algorithm to the signature points.
+   */
+  private smoothSignature(points: Point[]): Point[] {
+    const smoothedPoints: Point[] = [];
+
+    const startPoint = points[0];
+    const endPoint = points[points.length - 1];
+
+    smoothedPoints.push(startPoint);
+
+    for (let i = 0; i < points.length - 1; i++) {
+      const p0 = i > 0 ? points[i - 1] : startPoint;
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const p3 = i < points.length - 2 ? points[i + 2] : endPoint;
+
+      const cp1x = p1.x + (p2.x - p0.x) / 6;
+      const cp1y = p1.y + (p2.y - p0.y) / 6;
+
+      const cp2x = p2.x - (p3.x - p1.x) / 6;
+      const cp2y = p2.y - (p3.y - p1.y) / 6;
+
+      smoothedPoints.push(new Point(cp1x, cp1y));
+      smoothedPoints.push(new Point(cp2x, cp2y));
+      smoothedPoints.push(p2);
+    }
+
+    return smoothedPoints;
+  }
+
+  /**
+   * Draws the smoothed signature on the canvas.
+   */
+  private drawSmoothSignature(points: Point[], width: number): void {
+    const ctx = this.getContext();
+
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+
+    const startPoint = points[0];
+
+    ctx.moveTo(startPoint.x, startPoint.y);
+
+    ctx.lineWidth = width;
+
+    for (let i = 1; i < points.length; i += 3) {
+      const cp1 = points[i];
+      const cp2 = points[i + 1];
+      const endPoint = points[i + 2];
+
+      ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, endPoint.x, endPoint.y);
+    }
+
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  /**
+   * Calculates the stroke width based on the velocity.
+   */
+  private strokeWidth(velocity: number): number {
+    return Math.max(this.maxStrokeWidth() / (velocity + 1), this.minStrokeWidth());
+  }
+
+  public registerOnChangeHandler(handler: (_canvas: Canvas, _cleared: boolean) => void): void {
+    this.onChangeHandlers.push(handler);
+  }
+
+  public unregisterOnChangeHandler(handler: (_canvas: Canvas, _cleared: boolean) => void): void {
+    this.onChangeHandlers = this.onChangeHandlers.filter((l) => l !== handler);
+  }
+
+  /**
+   * Retrieves the signature as a data URL.
+   */
+  public toDataURL(type?: string, quality?: number): string {
+    return this.$canvas.toDataURL(type, quality);
+  }
+
+  /**
+   * Clears the signature from the canvas.
+   */
+  public clear(): void {
+    const ctx = this.getContext();
+
+    ctx.clearRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
+
+    this.onChangeHandlers.forEach((handler) => handler(this, true));
+
+    this.points = [];
+  }
+
+  /**
+   * Retrieves the signature as an image blob.
+   */
+  public toBlob(type?: string, quality?: number): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      this.$canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error('Could not convert canvas to blob.'));
+            return;
+          }
+
+          resolve(blob);
+        },
+        type,
+        quality,
+      );
+    });
+  }
+}

apps/web/src/components/signature-pad/helper.ts

@@ -0,0 +1,29 @@
+export const average = (a: number, b: number) => (a + b) / 2;
+
+export const getSvgPathFromStroke = (points: number[][], closed = true) => {
+  const len = points.length;
+
+  if (len < 4) {
+    return ``;
+  }
+
+  let a = points[0];
+  let b = points[1];
+  const c = points[2];
+
+  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(
+    2,
+  )} ${average(b[0], c[0]).toFixed(2)},${average(b[1], c[1]).toFixed(2)} T`;
+
+  for (let i = 2, max = len - 1; i < max; i++) {
+    a = points[i];
+    b = points[i + 1];
+    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+  }
+
+  if (closed) {
+    result += 'Z';
+  }
+
+  return result;
+};

apps/web/src/components/signature-pad/index.ts

@@ -0,0 +1 @@
+export * from './signature-pad';

apps/web/src/components/signature-pad/point.ts

@@ -0,0 +1,98 @@
+import {
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
+
+export type PointLike = {
+  x: number;
+  y: number;
+  timestamp: number;
+};
+
+const isTouchEvent = (
+  event:
+    | ReactMouseEvent
+    | ReactPointerEvent
+    | ReactTouchEvent
+    | MouseEvent
+    | PointerEvent
+    | TouchEvent,
+): event is TouchEvent | ReactTouchEvent => {
+  return 'touches' in event;
+};
+
+export class Point implements PointLike {
+  public x: number;
+  public y: number;
+  public timestamp: number;
+
+  constructor(x: number, y: number, timestamp?: number) {
+    this.x = x;
+    this.y = y;
+    this.timestamp = timestamp ?? Date.now();
+  }
+
+  public distanceTo(point: PointLike): number {
+    return Math.sqrt(Math.pow(point.x - this.x, 2) + Math.pow(point.y - this.y, 2));
+  }
+
+  public equals(point: PointLike): boolean {
+    return this.x === point.x && this.y === point.y && this.timestamp === point.timestamp;
+  }
+
+  public velocityFrom(start: PointLike): number {
+    const timeDifference = this.timestamp - start.timestamp;
+
+    if (timeDifference !== 0) {
+      return this.distanceTo(start) / timeDifference;
+    }
+
+    return 0;
+  }
+
+  public static fromPointLike({ x, y, timestamp }: PointLike): Point {
+    return new Point(x, y, timestamp);
+  }
+
+  public static fromEvent(
+    event:
+      | ReactMouseEvent
+      | ReactPointerEvent
+      | ReactTouchEvent
+      | MouseEvent
+      | PointerEvent
+      | TouchEvent,
+    dpi = 1,
+    el?: HTMLElement | null,
+  ): Point {
+    const target = el ?? event.target;
+
+    if (!(target instanceof HTMLElement)) {
+      throw new Error('Event target is not an HTMLElement.');
+    }
+
+    const { top, bottom, left, right } = target.getBoundingClientRect();
+
+    let clientX, clientY;
+
+    if (isTouchEvent(event)) {
+      clientX = event.touches[0].clientX;
+      clientY = event.touches[0].clientY;
+    } else {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    }
+
+    // create a new point snapping to the edge of the current target element if it exceeds
+    // the bounding box of the target element
+    let x = Math.min(Math.max(left, clientX), right) - left;
+    let y = Math.min(Math.max(top, clientY), bottom) - top;
+
+    // adjust for DPI
+    x *= dpi;
+    y *= dpi;
+
+    return new Point(x, y);
+  }
+}

apps/web/src/components/signature-pad/signature-pad.tsx

@@ -24,12 +24,7 @@ export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChang
   onChange?: (_signatureDataUrl: string | null) => void;
 };
 
-export const SignaturePad = ({
-  className,
-  defaultValue,
-  onChange,
-  ...props
-}: SignaturePadProps) => {
+export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProps) => {
   const $el = useRef<HTMLCanvasElement>(null);
 
   const [isPressed, setIsPressed] = useState(false);
@@ -132,7 +127,7 @@ export const SignaturePad = ({
       setPoints(newPoints);
     }
 
-    if ($el.current && newPoints.length > 0) {
+    if ($el.current) {
       const ctx = $el.current.getContext('2d');
 
       if (ctx) {
@@ -193,22 +188,6 @@ export const SignaturePad = ({
     }
   }, []);
 
-  useEffect(() => {
-    if ($el.current && typeof defaultValue === 'string') {
-      const ctx = $el.current.getContext('2d');
-
-      const { width, height } = $el.current;
-
-      const img = new Image();
-
-      img.onload = () => {
-        ctx?.drawImage(img, 0, 0, Math.min(width, img.width), Math.min(height, img.height));
-      };
-
-      img.src = defaultValue;
-    }
-  }, [defaultValue]);
-
   return (
     <div className="relative block">
       <canvas
@@ -223,10 +202,10 @@ export const SignaturePad = ({
         {...props}
       />
 
-      <div className="absolute bottom-4 right-4">
+      <div className="absolute bottom-2 right-2">
         <button
           type="button"
-          className="focus-visible:ring-ring ring-offset-background rounded-full p-0 text-xs text-slate-500 focus-visible:outline-none focus-visible:ring-2"
+          className="focus-visible:ring-ring ring-offset-background rounded-full p-2 text-xs text-slate-500 focus-visible:outline-none focus-visible:ring-2"
           onClick={() => onClearClick()}
         >
           Clear Signature

apps/web/src/helpers/get-feature-flag.ts

@@ -1,79 +0,0 @@
-import { z } from 'zod';
-
-import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';
-
-import { TFeatureFlagValue, ZFeatureFlagValueSchema } from '~/providers/feature-flag';
-
-/**
- * Evaluate whether a flag is enabled for the current user.
- *
- * @param flag The flag to evaluate.
- * @param options See `GetFlagOptions`.
- * @returns Whether the flag is enabled, or the variant value of the flag.
- */
-export const getFlag = async (
-  flag: string,
-  options?: GetFlagOptions,
-): Promise<TFeatureFlagValue> => {
-  const requestHeaders = options?.requestHeaders ?? {};
-
-  if (!isFeatureFlagEnabled()) {
-    return LOCAL_FEATURE_FLAGS[flag] ?? true;
-  }
-
-  const url = new URL(`${process.env.NEXT_PUBLIC_SITE_URL}/api/feature-flag/get`);
-  url.searchParams.set('flag', flag);
-
-  const response = await fetch(url, {
-    headers: {
-      ...requestHeaders,
-    },
-    next: {
-      revalidate: 60,
-    },
-  })
-    .then((res) => res.json())
-    .then((res) => ZFeatureFlagValueSchema.parse(res))
-    .catch(() => false);
-
-  return response;
-};
-
-/**
- * Get all feature flags for the current user if possible.
- *
- * @param options See `GetFlagOptions`.
- * @returns A record of flags and their values for the user derived from the headers.
- */
-export const getAllFlags = async (
-  options?: GetFlagOptions,
-): Promise<Record<string, TFeatureFlagValue>> => {
-  const requestHeaders = options?.requestHeaders ?? {};
-
-  if (!isFeatureFlagEnabled()) {
-    return LOCAL_FEATURE_FLAGS;
-  }
-
-  const url = new URL(`${process.env.NEXT_PUBLIC_SITE_URL}/api/feature-flag/all`);
-
-  return fetch(url, {
-    headers: {
-      ...requestHeaders,
-    },
-    next: {
-      revalidate: 60,
-    },
-  })
-    .then((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.
-   *
-   * The authenticated user will be derived from the headers if possible.
-   */
-  requestHeaders: Record<string, string>;
-}

apps/web/src/helpers/get-post-hog-server-client.ts

@@ -1,16 +0,0 @@
-import { PostHog } from 'posthog-node';
-
-import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
-
-export default function PostHogServerClient() {
-  const postHogConfig = extractPostHogConfig();
-
-  if (!postHogConfig) {
-    return null;
-  }
-
-  return new PostHog(postHogConfig.key, {
-    host: postHogConfig.host,
-    fetch: (...args) => fetch(...args),
-  });
-}

apps/web/src/helpers/get-server-component-feature-flag.ts

@@ -1,26 +0,0 @@
-import { headers } from 'next/headers';
-
-import { getAllFlags, getFlag } from './get-feature-flag';
-
-/**
- * Evaluate whether a flag is enabled for the current user in a server component.
- *
- * @param flag The flag to evaluate.
- * @returns Whether the flag is enabled, or the variant value of the flag.
- */
-export const getServerComponentFlag = async (flag: string) => {
-  return await getFlag(flag, {
-    requestHeaders: Object.fromEntries(headers().entries()),
-  });
-};
-
-/**
- * Get all feature flags for the current user from a server component.
- *
- * @returns A record of flags and their values for the user derived from the headers.
- */
-export const getServerComponentAllFlags = async () => {
-  return await getAllFlags({
-    requestHeaders: Object.fromEntries(headers().entries()),
-  });
-};

apps/web/src/hooks/use-field-page-coords.ts

@@ -1,78 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { Field } from '@documenso/prisma/client';
-
-export const useFieldPageCoords = (field: Field) => {
-  const [coords, setCoords] = useState({
-    x: 0,
-    y: 0,
-    height: 0,
-    width: 0,
-  });
-
-  const calculateCoords = useCallback(() => {
-    const $page = document.querySelector<HTMLElement>(
-      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
-    );
-
-    if (!$page) {
-      return;
-    }
-
-    const { top, left, height, width } = getBoundingClientRect($page);
-
-    // X and Y are percentages of the page's height and width
-    const fieldX = (Number(field.positionX) / 100) * width + left;
-    const fieldY = (Number(field.positionY) / 100) * height + top;
-
-    const fieldHeight = (Number(field.height) / 100) * height;
-    const fieldWidth = (Number(field.width) / 100) * width;
-
-    setCoords({
-      x: fieldX,
-      y: fieldY,
-      height: fieldHeight,
-      width: fieldWidth,
-    });
-  }, [field.height, field.page, field.positionX, field.positionY, field.width]);
-
-  useEffect(() => {
-    calculateCoords();
-  }, [calculateCoords]);
-
-  useEffect(() => {
-    const onResize = () => {
-      calculateCoords();
-    };
-
-    window.addEventListener('resize', onResize);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, [calculateCoords]);
-
-  useEffect(() => {
-    const $page = document.querySelector<HTMLElement>(
-      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
-    );
-
-    if (!$page) {
-      return;
-    }
-
-    const observer = new ResizeObserver(() => {
-      calculateCoords();
-    });
-
-    observer.observe($page);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [calculateCoords, field.page]);
-
-  return coords;
-};

apps/web/src/middleware.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 export default async function middleware(req: NextRequest) {
   if (req.nextUrl.pathname === '/') {
-    const redirectUrl = new URL('/documents', req.url);
+    const redirectUrl = new URL('/dashboard', req.url);
 
     return NextResponse.redirect(redirectUrl);
   }

apps/web/src/pages/api/document/create.ts

@@ -48,7 +48,7 @@ export default async function handler(
           // We had intended to do this with Zod but we can only validate it
           // as a persistent file which does not include the properties that we
           // need.
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           resolve({ ...fields, ...files } as any);
         });
       },

apps/web/src/pages/api/feature-flag/all.ts

@@ -1,44 +0,0 @@
-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';
-
-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;
-}

apps/web/src/pages/api/feature-flag/get.ts

@@ -1,122 +0,0 @@
-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 '~/helpers/get-post-hog-server-client';
-
-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;
-};

apps/web/src/providers/feature-flag.tsx

@@ -1,105 +0,0 @@
-'use client';
-
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-
-import { z } from 'zod';
-
-import {
-  FEATURE_FLAG_POLL_INTERVAL,
-  LOCAL_FEATURE_FLAGS,
-  isFeatureFlagEnabled,
-} from '@documenso/lib/constants/feature-flags';
-
-import { getAllFlags } from '~/helpers/get-feature-flag';
-
-export const ZFeatureFlagValueSchema = z.union([
-  z.boolean(),
-  z.string(),
-  z.number(),
-  z.undefined(),
-]);
-
-export type TFeatureFlagValue = z.infer<typeof ZFeatureFlagValueSchema>;
-
-export type FeatureFlagContextValue = {
-  getFlag: (_key: string) => TFeatureFlagValue;
-};
-
-export const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);
-
-export const useFeatureFlags = () => {
-  const context = useContext(FeatureFlagContext);
-
-  if (!context) {
-    throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
-  }
-
-  return context;
-};
-
-export function FeatureFlagProvider({
-  children,
-  initialFlags,
-}: {
-  children: React.ReactNode;
-  initialFlags: Record<string, TFeatureFlagValue>;
-}) {
-  const [flags, setFlags] = useState(initialFlags);
-
-  const getFlag = useCallback(
-    (flag: string) => {
-      if (!isFeatureFlagEnabled()) {
-        return LOCAL_FEATURE_FLAGS[flag] ?? true;
-      }
-
-      return flags[flag] ?? false;
-    },
-    [flags],
-  );
-
-  /**
-   * Refresh the flags every `FEATURE_FLAG_POLL_INTERVAL` amount of time if the window is focused.
-   */
-  useEffect(() => {
-    if (!isFeatureFlagEnabled()) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (document.hasFocus()) {
-        getAllFlags().then((newFlags) => setFlags(newFlags));
-      }
-    }, FEATURE_FLAG_POLL_INTERVAL);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  /**
-   * Refresh the flags when the window is focused.
-   */
-  useEffect(() => {
-    if (!isFeatureFlagEnabled()) {
-      return;
-    }
-
-    const onFocus = () => getAllFlags().then((newFlags) => setFlags(newFlags));
-
-    window.addEventListener('focus', onFocus);
-
-    return () => {
-      window.removeEventListener('focus', onFocus);
-    };
-  }, []);
-
-  return (
-    <FeatureFlagContext.Provider
-      value={{
-        getFlag,
-      }}
-    >
-      {children}
-    </FeatureFlagContext.Provider>
-  );
-}

apps/web/src/providers/posthog.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import { usePathname, useSearchParams } from 'next/navigation';
-
-import { getSession } from 'next-auth/react';
-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,
-      loaded: () => {
-        getSession()
-          .then((session) => {
-            if (session) {
-              posthog.identify(session.user.email ?? session.user.id.toString());
-            } else {
-              posthog.reset();
-            }
-          })
-          .catch(() => {
-            // Do nothing.
-          });
-      },
-    });
-  }
-
-  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;
-}

apps/web/tsconfig.json

@@ -9,10 +9,16 @@
       }
     ],
     "paths": {
-      "~/*": ["./src/*"],
-      "contentlayer/generated": ["./.contentlayer/generated"]
+      "~/*": [
+        "./src/*"
+      ],
+      "contentlayer/generated": [
+        "./.contentlayer/generated"
+      ]
     },
-    "types": ["@documenso/lib/types/next-auth.d.ts"],
+    "types": [
+      "@documenso/lib/types/next-auth.d.ts"
+    ],
     "strictNullChecks": true,
     "incremental": false
   },
@@ -24,5 +30,7 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }

commitlint.config.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-};

docker/Dockerfile

@@ -22,9 +22,6 @@ RUN apk add --no-cache libc6-compat
 # Copy our current monorepo
 COPY . .
 
-# Disable husky from installing hooks
-ENV HUSKY 0
-
 RUN npm ci
 
 RUN npm run build --workspaces
@@ -50,4 +47,4 @@ EXPOSE 3000
 
 ENV PORT 3000
 
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start"]