refactor: extract common components into UI package

fix: fixed build command in codeql workflow

.env.example

@@ -52,7 +52,12 @@ NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
 
 # [[FEATURES]]
-NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false
+# 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=
 
 # This is only required for the marketing site
 # [[REDIS]]

.github/dependabot.yml

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

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches: [ "feat/refresh" ]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
 env:
   HUSKY: 0
 

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,45 @@
+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,3 +37,13 @@ yarn-error.log*
 
 # contentlayer
 .contentlayer
+
+# intellij
+.idea
+
+# vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

.husky/commit-msg

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

README.md

@@ -89,6 +89,10 @@ 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

@@ -0,0 +1,56 @@
+---
+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/package.json

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

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

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

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, Slack, Twitter } from 'lucide-react';
+import { Github, MessagesSquare, Twitter } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -36,11 +36,11 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             </Link>
 
             <Link
-              href="https://documenso.slack.com"
+              href="https://documen.so/discord"
               target="_blank"
               className="hover:text-[#6D6D6D]"
             >
-              <Slack className="h-6 w-6" />
+              <MessagesSquare className="h-6 w-6" />
             </Link>
           </div>
         </div>
@@ -61,6 +61,14 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             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,20 +1,27 @@
-import { HTMLAttributes } from 'react';
+'use client';
+
+import { HTMLAttributes, useState } 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="/">
-        <Image src="/logo.png" alt="Documenso Logo" width={170} height={0}></Image>
+      <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+        <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
       </Link>
 
-      <div className="flex items-center gap-x-6">
+      <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>
@@ -35,6 +42,15 @@ 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

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

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

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

@@ -0,0 +1,27 @@
+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,16 +9,10 @@
       }
     ],
     "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
   },
@@ -29,7 +23,5 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

apps/web/package.json

@@ -7,7 +7,8 @@
     "dev": "PORT=3000 next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/lib": "*",
@@ -27,12 +28,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",

apps/web/process-env.d.ts

@@ -10,8 +10,6 @@ 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,14 +2,23 @@
 
 import { useState } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 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 { LazyPDFViewer } from '~/components/(dashboard)/pdf-viewer/lazy-pdf-viewer';
-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';
+import { addFields } from '~/components/forms/edit-document/add-fields.action';
+import { addSigners } from '~/components/forms/edit-document/add-signers.action';
+import { completeDocument } from '~/components/forms/edit-document/add-subject.action';
 
 export type EditDocumentFormProps = {
   className?: string;
@@ -26,6 +35,9 @@ 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}`;
@@ -50,6 +62,76 @@ 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
@@ -69,6 +151,7 @@ export const EditDocumentForm = ({
             document={document}
             onContinue={onNextStep}
             onGoBack={onPreviousStep}
+            onSubmit={onAddSignersFormSubmit}
           />
         )}
 
@@ -79,6 +162,7 @@ export const EditDocumentForm = ({
             document={document}
             onContinue={onNextStep}
             onGoBack={onPreviousStep}
+            onSubmit={onAddFieldsFormSubmit}
           />
         )}
 
@@ -89,6 +173,7 @@ export const EditDocumentForm = ({
             document={document}
             onContinue={onNextStep}
             onGoBack={onPreviousStep}
+            onSubmit={onAddSubjectFormSubmit}
           />
         )}
       </div>

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

@@ -1,34 +1,19 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-
-import { Loader } from 'lucide-react';
-
 import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import { PDFViewerProps } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { PDFViewerProps } from '@documenso/ui/primitives/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">
-        <PDFViewer className={pdfClassName} {...props} />
+        <LazyPDFViewer className={pdfClassName} {...props} />
       </CardContent>
     </Card>
   );

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

@@ -1,23 +1,17 @@
 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,
-  isPeriodSelectorValue,
-} from '~/components/(dashboard)/period-selector/types';
+import { PeriodSelectorValue } 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 = {
@@ -37,10 +31,12 @@ 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,
@@ -52,8 +48,6 @@ 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);
 
@@ -72,25 +66,13 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="text-4xl font-semibold">All Documents</h1>
+      <UploadDocument />
+
+      <h1 className="mt-12 text-4xl font-semibold">Documents</h1>
 
       <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
-        <Tabs defaultValue={status}>
+        <Tabs defaultValue={shouldDefaultToPending ? InternalDocumentStatus.PENDING : 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} />
@@ -110,26 +92,30 @@ 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">
-        {/* 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} />
-        )}
+        <DocumentsDataTable results={results} />
       </div>
     </div>
   );

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

@@ -1,15 +1,17 @@
 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 (!IS_SUBSCRIPTIONS_ENABLED) {
+  if (!isBillingEnabled) {
     redirect('/settings/profile');
   }
 

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

@@ -12,8 +12,7 @@ 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 '~/components/signature-pad';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 
 import { useRequiredSigningContext } from './provider';
 

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

@@ -2,6 +2,7 @@ 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';
@@ -9,9 +10,7 @@ import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-re
 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 '~/components/(dashboard)/pdf-viewer/lazy-pdf-viewer';
-import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DateField } from './date-field';
 import { SigningForm } from './form';

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

@@ -12,10 +12,9 @@ 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 { SignaturePad } from '~/components/signature-pad';
-
 import { useRequiredSigningContext } from './provider';
 import { SigningFieldContainer } from './signing-field-container';
 

apps/web/src/app/layout.tsx

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

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

@@ -2,30 +2,15 @@
 
 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}>
-      <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
+      {/* No Nav tabs while there is only one main page */}
+      {/* <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 ',
@@ -35,14 +20,6 @@ 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,7 +15,6 @@ 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';
@@ -28,11 +27,19 @@ 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(' ')
@@ -40,8 +47,6 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
       .slice(0, 2)
       .join('') ?? 'UK';
 
-  const { theme, setTheme } = useTheme();
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -69,7 +74,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </Link>
         </DropdownMenuItem>
 
-        {IS_SUBSCRIPTIONS_ENABLED && (
+        {isBillingEnabled && (
           <DropdownMenuItem asChild>
             <Link href="/settings/billing" className="cursor-pointer">
               <CreditCard className="mr-2 h-4 w-4" />

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

@@ -1,19 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-import { Loader } from 'lucide-react';
-
-export const LazyPDFViewer = 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>
-    ),
-  },
-);

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

@@ -7,15 +7,20 @@ 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">
@@ -44,7 +49,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      {IS_SUBSCRIPTIONS_ENABLED && (
+      {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button
             variant="ghost"

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

@@ -7,15 +7,20 @@ 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)}
@@ -47,7 +52,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      {IS_SUBSCRIPTIONS_ENABLED && (
+      {isBillingEnabled && (
         <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,11 +13,6 @@ type FriendlyStatus = {
 };
 
 const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
-  DRAFT: {
-    label: 'Draft',
-    icon: File,
-    color: 'text-yellow-500',
-  },
   PENDING: {
     label: 'Pending',
     icon: Clock,
@@ -28,6 +23,11 @@ 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,8 +2,7 @@
 
 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 './add-fields.types';
+import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
 
 export type AddFieldsActionInput = TAddFieldsFormSchema & {
   documentId: number;

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

@@ -2,8 +2,7 @@
 
 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 './add-signers.types';
+import { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
 
 export type AddSignersActionInput = TAddSignersFormSchema & {
   documentId: number;

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

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

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

@@ -14,10 +14,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),

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

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

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

@@ -12,10 +12,9 @@ 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/signature-pad/canvas.ts

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

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

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

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

@@ -1,98 +0,0 @@
-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/helpers/get-feature-flag.ts

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

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

@@ -0,0 +1,26 @@
+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,10 +1,9 @@
 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';
 
-import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
-import { getBoundingClientRect } from '~/helpers/getBoundingClientRect';
-
 export const useFieldPageCoords = (field: Field) => {
   const [coords, setCoords] = useState({
     x: 0,

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('/dashboard', req.url);
+    const redirectUrl = new URL('/documents', req.url);
 
     return NextResponse.redirect(redirectUrl);
   }

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

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

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

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

@@ -0,0 +1,53 @@
+'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,16 +9,10 @@
       }
     ],
     "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
   },
@@ -30,7 +24,5 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

commitlint.config.cjs

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

package.json

@@ -6,9 +6,16 @@
     "start": "cd apps && cd web && next start",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,mdx}\"",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "commitlint": "commitlint --edit"
+  },
+  "engines": {
+    "npm": ">=8.6.0",
+    "node": ">=18.0.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "dotenv": "^16.0.3",
     "dotenv-cli": "^7.2.1",
     "eslint": "^7.32.0",

packages/lib/constants/feature-flags.ts

@@ -0,0 +1,37 @@
+/**
+ * How frequent to poll for new feature flags in milliseconds.
+ */
+export const FEATURE_FLAG_POLL_INTERVAL = 30000;
+
+/**
+ * Feature flags that will be used when PostHog is disabled.
+ *
+ * Does not take any person or group properties into account.
+ */
+export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
+  app_billing: process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
+} as const;
+
+/**
+ * Extract the PostHog configuration from the environment.
+ */
+export function extractPostHogConfig(): { key: string; host: string } | null {
+  const postHogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  const postHogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
+
+  if (!postHogKey || !postHogHost) {
+    return null;
+  }
+
+  return {
+    key: postHogKey,
+    host: postHogHost,
+  };
+}
+
+/**
+ * Whether feature flags are enabled for the current instance.
+ */
+export function isFeatureFlagEnabled(): boolean {
+  return extractPostHogConfig() !== null;
+}

packages/lib/constants/features.ts

@@ -1,5 +0,0 @@
-/* eslint-disable turbo/no-undeclared-env-vars */
-export const IS_SUBSCRIPTIONS_ENABLED = process.env.NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED === 'true';
-
-export const isSubscriptionsEnabled = () =>
-  process.env.NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED === 'true';

packages/tsconfig/process-env.d.ts

@@ -13,8 +13,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
 
-    NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
-
     NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'smtp-auth' | 'smtp-api';
 
     NEXT_PRIVATE_MAILCHANNELS_API_KEY?: string;

packages/ui/package.json

@@ -54,8 +54,11 @@
     "date-fns": "^2.30.0",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.214.0",
+    "next": "13.4.12",
+    "pdfjs-dist": "3.6.172",
     "react-day-picker": "^8.7.1",
+    "react-pdf": "^7.3.3",
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5"
   }
-}
+}

packages/ui/primitives/document-flow/add-fields.tsx

@@ -3,12 +3,13 @@
 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';
@@ -22,20 +23,15 @@ 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 {
-  EditDocumentFormContainer,
-  EditDocumentFormContainerActions,
-  EditDocumentFormContainerContent,
-  EditDocumentFormContainerFooter,
-  EditDocumentFormContainerStep,
-} from './container';
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from './document-flow-root';
 import { FieldItem } from './field-item';
 import { FRIENDLY_FIELD_TYPE } from './types';
 
@@ -58,18 +54,15 @@ 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,
@@ -303,28 +296,6 @@ 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);
@@ -357,8 +328,8 @@ export const AddFieldsFormPartial = ({
   }, [recipients]);
 
   return (
-    <EditDocumentFormContainer>
-      <EditDocumentFormContainerContent
+    <DocumentFlowFormContainer>
+      <DocumentFlowFormContainerContent
         title="Add Fields"
         description="Add all relevant fields for each recipient."
       >
@@ -560,18 +531,18 @@ export const AddFieldsFormPartial = ({
             </div>
           </div>
         </div>
-      </EditDocumentFormContainerContent>
+      </DocumentFlowFormContainerContent>
 
-      <EditDocumentFormContainerFooter>
-        <EditDocumentFormContainerStep title="Add Fields" step={2} maxStep={3} />
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep title="Add Fields" step={2} maxStep={3} />
 
-        <EditDocumentFormContainerActions
+        <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoNextClick={() => onFormSubmit()}
+          onGoNextClick={() => handleSubmit(onSubmit)()}
           onGoBackClick={onGoBack}
         />
-      </EditDocumentFormContainerFooter>
-    </EditDocumentFormContainer>
+      </DocumentFlowFormContainerFooter>
+    </DocumentFlowFormContainer>
   );
 };

packages/ui/primitives/document-flow/add-signers.tsx

@@ -2,8 +2,6 @@
 
 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';
@@ -11,21 +9,19 @@ 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 {
-  EditDocumentFormContainer,
-  EditDocumentFormContainerActions,
-  EditDocumentFormContainerContent,
-  EditDocumentFormContainerFooter,
-  EditDocumentFormContainerStep,
-} from './container';
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from './document-flow-root';
 
 export type AddSignersFormProps = {
   recipients: Recipient[];
@@ -33,17 +29,16 @@ 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();
 
@@ -120,31 +115,9 @@ 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 (
-    <EditDocumentFormContainer onSubmit={onFormSubmit}>
-      <EditDocumentFormContainerContent
+    <DocumentFlowFormContainer onSubmit={handleSubmit(onSubmit)}>
+      <DocumentFlowFormContainerContent
         title="Add Signers"
         description="Add the people who will sign the document."
       >
@@ -229,18 +202,18 @@ export const AddSignersFormPartial = ({
             Add Signer
           </Button>
         </div>
-      </EditDocumentFormContainerContent>
+      </DocumentFlowFormContainerContent>
 
-      <EditDocumentFormContainerFooter>
-        <EditDocumentFormContainerStep title="Add Signers" step={1} maxStep={3} />
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep title="Add Signers" step={1} maxStep={3} />
 
-        <EditDocumentFormContainerActions
+        <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoNextClick={() => onFormSubmit()}
+          onGoNextClick={() => handleSubmit(onSubmit)()}
           onGoBackClick={onGoBack}
         />
-      </EditDocumentFormContainerFooter>
-    </EditDocumentFormContainer>
+      </DocumentFlowFormContainerFooter>
+    </DocumentFlowFormContainer>
   );
 };

packages/ui/primitives/document-flow/add-subject.tsx

@@ -1,26 +1,22 @@
 '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 {
-  EditDocumentFormContainer,
-  EditDocumentFormContainerActions,
-  EditDocumentFormContainerContent,
-  EditDocumentFormContainerFooter,
-  EditDocumentFormContainerStep,
-} from './container';
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from './document-flow-root';
 
 export type AddSubjectFormProps = {
   recipients: Recipient[];
@@ -28,18 +24,16 @@ 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,
@@ -53,35 +47,9 @@ 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 (
-    <EditDocumentFormContainer>
-      <EditDocumentFormContainerContent
+    <DocumentFlowFormContainer>
+      <DocumentFlowFormContainerContent
         title="Add Subject"
         description="Add the subject and message you wish to send to signers."
       >
@@ -151,19 +119,19 @@ export const AddSubjectFormPartial = ({
             </div>
           </div>
         </div>
-      </EditDocumentFormContainerContent>
+      </DocumentFlowFormContainerContent>
 
-      <EditDocumentFormContainerFooter>
-        <EditDocumentFormContainerStep title="Add Subject" step={3} maxStep={3} />
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep title="Add Subject" step={3} maxStep={3} />
 
-        <EditDocumentFormContainerActions
+        <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
           goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
-          onGoNextClick={() => onFormSubmit()}
+          onGoNextClick={() => handleSubmit(onSubmit)()}
           onGoBackClick={onGoBack}
         />
-      </EditDocumentFormContainerFooter>
-    </EditDocumentFormContainer>
+      </DocumentFlowFormContainerFooter>
+    </DocumentFlowFormContainer>
   );
 };

packages/ui/primitives/document-flow/document-flow-root.tsx

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

packages/ui/primitives/document-flow/field-item.tsx

@@ -6,14 +6,13 @@ 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 { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+import { FRIENDLY_FIELD_TYPE, TDocumentFlowFormSchema } from './types';
 
-import { FRIENDLY_FIELD_TYPE, TEditDocumentFormSchema } from './types';
-
-type Field = TEditDocumentFormSchema['fields'][0];
+type Field = TDocumentFlowFormSchema['fields'][0];
 
 export type FieldItemProps = {
   field: Field;

packages/ui/primitives/document-flow/types.ts

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

packages/ui/primitives/form/form-error-message.tsx

@@ -0,0 +1,34 @@
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type FormErrorMessageProps = {
+  className?: string;
+  error: { message?: string } | undefined;
+};
+
+export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => {
+  return (
+    <AnimatePresence>
+      {error && (
+        <motion.p
+          initial={{
+            opacity: 0,
+            y: -10,
+          }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          exit={{
+            opacity: 0,
+            y: 10,
+          }}
+          className={cn('text-xs text-red-500', className)}
+        >
+          {error.message}
+        </motion.p>
+      )}
+    </AnimatePresence>
+  );
+};

packages/ui/primitives/lazy-pdf-viewer.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+export const LazyPDFViewer = dynamic(async () => import('./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>
+  ),
+});

packages/ui/primitives/pdf-viewer.tsx

@@ -3,21 +3,19 @@
 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';
 
-type LoadedPDFDocument = pdfjs.PDFDocumentProxy;
+export type LoadedPDFDocument = PDFDocumentProxy;
 
 /**
  * This imports the worker from the `pdfjs-dist` package.
  */
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.js',
-  import.meta.url,
-).toString();
+pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.min.js`;
 
 export type OnPDFViewerPageClick = (_event: {
   pageNumber: number;

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -194,7 +194,6 @@ export const SignaturePad = ({
   }, []);
 
   useEffect(() => {
-    console.log({ defaultValue });
     if ($el.current && typeof defaultValue === 'string') {
       const ctx = $el.current.getContext('2d');
 

scripts/copy-pdfjs.cjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const fs = require('fs');
+
+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
+
+const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.min.js');
+
+fs.copyFileSync(pdfWorkerPath, './public/pdf.worker.min.js');

turbo.json

@@ -2,8 +2,13 @@
   "$schema": "https://turbo.build/schema.json",
   "pipeline": {
     "build": {
-      "dependsOn": ["^build"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "dependsOn": [
+        "^build"
+      ],
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**"
+      ]
     },
     "lint": {},
     "dev": {
@@ -11,14 +16,18 @@
       "persistent": true
     }
   },
-  "globalDependencies": ["**/.env.*local"],
+  "globalDependencies": [
+    "**/.env.*local"
+  ],
   "globalEnv": [
     "NEXTAUTH_URL",
     "NEXTAUTH_SECRET",
     "NEXT_PUBLIC_SITE_URL",
+    "NEXT_PUBLIC_POSTHOG_KEY",
+    "NEXT_PUBLIC_POSTHOG_HOST",
+    "NEXT_PUBLIC_FEATURE_BILLING_ENABLED",
     "NEXT_PRIVATE_DATABASE_URL",
     "NEXT_PRIVATE_NEXT_AUTH_SECRET",
-    "NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED",
     "NEXT_PRIVATE_GOOGLE_CLIENT_ID",
     "NEXT_PRIVATE_GOOGLE_CLIENT_SECRET",
     "NEXT_PRIVATE_SMTP_TRANSPORT",
@@ -37,4 +46,4 @@
     "NEXT_PRIVATE_SMTP_FROM_NAME",
     "NEXT_PRIVATE_SMTP_FROM_ADDRESS"
   ]
-}
+}