fix: tidying broke generation

feat: make billing page functional

.env.example

@@ -12,6 +12,8 @@ NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
+# Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
+NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
 # [[SMTP]]
 # OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels

.eslintignore

@@ -0,0 +1,7 @@
+# Config files
+*.config.js
+*.config.cjs
+
+# Statically hosted javascript files
+apps/*/public/*.js
+apps/*/public/*.cjs

.github/dependabot.yml

@@ -0,0 +1,32 @@
+version: 2
+
+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

.github/workflows/semantic-pull-requests.yml

@@ -0,0 +1,21 @@
+name: "Validate PR Name"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  validate-pr:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -4,10 +4,11 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "PORT=3001 next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
     "@documenso/lib": "*",
@@ -29,6 +30,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "recharts": "^2.7.2",
+    "sharp": "0.32.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },

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

@@ -5,7 +5,7 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = async () =>
+export const generateStaticParams = () =>
   allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {

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

@@ -0,0 +1,76 @@
+import { ImageResponse } from 'next/server';
+
+import { allBlogPosts } from 'contentlayer/generated';
+
+export const runtime = 'edge';
+
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+type BlogPostOpenGraphImageProps = {
+  params: { post: string };
+};
+
+export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) {
+  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!blogPost) {
+    return null;
+  }
+
+  // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
+  // to a constant will break og image generation.
+  const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([
+    fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+  ]);
+
+  return new ImageResponse(
+    (
+      <div tw="relative h-full w-full flex flex-col items-center justify-center text-center">
+        {/* @ts-expect-error Lack of typing from ImageResponse */}
+        <img src={backgroundImage} alt="og-background" tw="absolute inset-0 w-full h-full" />
+
+        {/* @ts-expect-error Lack of typing from ImageResponse */}
+        <img src={logoImage} alt="logo" tw="h-8" />
+
+        <h1 tw="mt-8 text-6xl text-center flex items-center justify-center w-full max-w-[800px] font-bold text-center mx-auto">
+          {blogPost.title}
+        </h1>
+
+        <p tw="font-normal">Written by {blogPost.authorName}</p>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: [
+        {
+          name: 'Inter',
+          data: interRegular,
+          style: 'normal',
+          weight: 400,
+        },
+        {
+          name: 'Inter',
+          data: interBold,
+          style: 'normal',
+          weight: 700,
+        },
+      ],
+    },
+  );
+}

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

@@ -7,7 +7,7 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = async () =>
+export const generateStaticParams = () =>
   allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
@@ -17,7 +17,9 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
     notFound();
   }
 
-  return { title: `Documenso - ${blogPost.title}` };
+  return {
+    title: `Documenso - ${blogPost.title}`,
+  };
 };
 
 const mdxComponents: MDXComponents = {

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

@@ -8,7 +8,7 @@ import { FundingRaised } from './funding-raised';
 import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
 
-export const revalidate = 86400;
+export const revalidate = 3600;
 
 const ZGithubStatsResponse = z.object({
   stargazers_count: z.number(),
@@ -43,7 +43,7 @@ export default async function OpenPage() {
       accept: 'application/vnd.github.v3+json',
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZGithubStatsResponse.parse(res));
 
   const { total_count: mergedPullRequests } = await fetch(
@@ -54,7 +54,7 @@ export default async function OpenPage() {
       },
     },
   )
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZMergedPullRequestsResponse.parse(res));
 
   const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
@@ -62,7 +62,7 @@ export default async function OpenPage() {
       accept: 'application/json',
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZStargazersLiveResponse.parse(res));
 
   return (

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

@@ -24,7 +24,7 @@ export default async function IndexPage() {
       accept: 'application/vnd.github.v3+json',
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined))
     .catch(() => undefined);
 

apps/marketing/src/app/robots.ts

@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next';
+
+import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/*',
+      disallow: ['/_next/*'],
+    },
+    sitemap: `${getBaseUrl()}/sitemap.xml`,
+  };
+}

apps/marketing/src/app/sitemap.ts

@@ -0,0 +1,41 @@
+import { MetadataRoute } from 'next';
+
+import { allBlogPosts, allGenericPages } from 'contentlayer/generated';
+
+import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = getBaseUrl();
+  const lastModified = new Date();
+
+  return [
+    {
+      url: baseUrl,
+      lastModified,
+    },
+    ...allGenericPages.map((doc) => ({
+      url: `${baseUrl}/${doc._raw.flattenedPath}`,
+      lastModified,
+    })),
+    {
+      url: `${baseUrl}/blog`,
+      lastModified,
+    },
+    ...allBlogPosts.map((doc) => ({
+      url: `${baseUrl}/${doc._raw.flattenedPath}`,
+      lastModified,
+    })),
+    {
+      url: `${baseUrl}/open`,
+      lastModified,
+    },
+    {
+      url: `${baseUrl}/oss-friends`,
+      lastModified,
+    },
+    {
+      url: `${baseUrl}/pricing`,
+      lastModified,
+    },
+  ];
+}

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Info, Loader } from 'lucide-react';
+import { Info } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -63,7 +63,9 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
 
   const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      const delay = new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
 
       const [redirectUrl] = await Promise.all([
         claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),
@@ -85,7 +87,7 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={(value) => !isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>{children}</DialogTrigger>
 
       <DialogContent>
@@ -97,50 +99,49 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
           </DialogDescription>
         </DialogHeader>
 
-        <form
-          className={cn('flex flex-col gap-y-4', className)}
-          onSubmit={handleSubmit(onFormSubmit)}
-        >
-          {params?.get('cancelled') === 'true' && (
-            <div className="rounded-lg border border-yellow-400 bg-yellow-50 p-4">
-              <div className="flex">
-                <div className="flex-shrink-0">
-                  <Info className="h-5 w-5 text-yellow-400" />
-                </div>
-                <div className="ml-3">
-                  <p className="text-sm leading-5 text-yellow-700">
-                    You have cancelled the payment process. If you didn't mean to do this, please
-                    try again.
-                  </p>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <fieldset disabled={isSubmitting} className={cn('flex flex-col gap-y-4', className)}>
+            {params?.get('cancelled') === 'true' && (
+              <div className="rounded-lg border border-yellow-400 bg-yellow-50 p-4">
+                <div className="flex">
+                  <div className="flex-shrink-0">
+                    <Info className="h-5 w-5 text-yellow-400" />
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm leading-5 text-yellow-700">
+                      You have cancelled the payment process. If you didn't mean to do this, please
+                      try again.
+                    </p>
+                  </div>
                 </div>
               </div>
+            )}
+
+            <div>
+              <Label className="text-slate-500">Name</Label>
+
+              <Input type="text" className="mt-2" {...register('name')} autoFocus />
+
+              <FormErrorMessage className="mt-1" error={errors.name} />
             </div>
-          )}
 
-          <div>
-            <Label className="text-slate-500">Name</Label>
+            <div>
+              <Label className="text-slate-500">Email</Label>
 
-            <Input type="text" className="mt-2" {...register('name')} autoFocus />
+              <Input type="email" className="mt-2" {...register('email')} />
 
-            <FormErrorMessage className="mt-1" error={errors.name} />
-          </div>
+              <FormErrorMessage className="mt-1" error={errors.email} />
+            </div>
 
-          <div>
-            <Label className="text-slate-500">Email</Label>
-
-            <Input type="email" className="mt-2" {...register('email')} />
-
-            <FormErrorMessage className="mt-1" error={errors.email} />
-          </div>
-
-          <Button type="submit" size="lg" disabled={isSubmitting}>
-            {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
-            Claim the Community Plan ({/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
-            {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
-              ? 'Monthly'
-              : 'Yearly'}
-            )
-          </Button>
+            <Button type="submit" size="lg" loading={isSubmitting}>
+              Claim the Community Plan (
+              {/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
+              {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
+                ? 'Monthly'
+                : 'Yearly'}
+              )
+            </Button>
+          </fieldset>
         </form>
       </DialogContent>
     </Dialog>

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)/password-reveal.tsx

@@ -13,7 +13,7 @@ export const PasswordReveal = ({ password }: PasswordRevealProps) => {
   const [, copy] = useCopyToClipboard();
 
   const onCopyClick = () => {
-    copy(password).then(() => {
+    void copy(password).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'Your password has been copied to your clipboard.',

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({
@@ -124,7 +124,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     setValue('signatureDataUrl', draftSignatureDataUrl);
     setValue('signatureText', '');
 
-    trigger('signatureDataUrl');
+    void trigger('signatureDataUrl');
     setShowSigningDialog(false);
   };
 
@@ -135,7 +135,9 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     signatureText,
   }: TWidgetFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      const delay = new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
 
       // eslint-disable-next-line turbo/no-undeclared-env-vars
       const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;

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

@@ -4,12 +4,14 @@
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
-    "dev": "PORT=3000 next dev",
+    "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/ee": "*",
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
     "@documenso/tailwind-config": "*",
@@ -20,6 +22,7 @@
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.214.0",
+    "luxon": "^3.4.0",
     "micro": "^10.0.1",
     "nanoid": "^4.0.2",
     "next": "13.4.12",
@@ -34,14 +37,15 @@
     "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",
+    "sharp": "0.32.5",
     "ts-pattern": "^5.0.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/formidable": "^2.0.6",
+    "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7"

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

@@ -22,14 +22,14 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 import { UploadDocument } from './upload-document';
 
 export default async function DashboardPage() {
-  const session = await getRequiredServerComponentSession();
+  const user = await getRequiredServerComponentSession();
 
   const [stats, results] = await Promise.all([
     getStats({
-      userId: session.id,
+      user,
     }),
     findDocuments({
-      userId: session.id,
+      userId: user.id,
       perPage: 10,
     }),
   ]);

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,28 @@
 
 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 {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { 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;
@@ -19,6 +33,8 @@ export type EditDocumentFormProps = {
   fields: Field[];
 };
 
+type EditDocumentStep = 'signers' | 'fields' | 'subject';
+
 export const EditDocumentForm = ({
   className,
   document,
@@ -26,27 +42,103 @@ export const EditDocumentForm = ({
   fields,
   user: _user,
 }: EditDocumentFormProps) => {
-  const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const [step, setStep] = useState<EditDocumentStep>('signers');
 
   const documentUrl = `data:application/pdf;base64,${document.document}`;
 
-  const onNextStep = () => {
-    if (step === 'signers') {
-      setStep('fields');
-    }
+  const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
+    signers: {
+      title: 'Add Signers',
+      description: 'Add the people who will sign the document.',
+      stepIndex: 1,
+      onSubmit: () => onAddSignersFormSubmit,
+    },
+    fields: {
+      title: 'Add Fields',
+      description: 'Add all relevant fields for each recipient.',
+      stepIndex: 2,
+      onBackStep: () => setStep('signers'),
+      onSubmit: () => onAddFieldsFormSubmit,
+    },
+    subject: {
+      title: 'Add Subject',
+      description: 'Add the subject and message you wish to send to signers.',
+      stepIndex: 3,
+      onBackStep: () => setStep('fields'),
+      onSubmit: () => onAddSubjectFormSubmit,
+    },
+  };
 
-    if (step === 'fields') {
-      setStep('subject');
+  const currentDocumentFlow = documentFlow[step];
+
+  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addSigners({
+        documentId: document.id,
+        signers: data.signers,
+      });
+
+      router.refresh();
+
+      setStep('fields');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
     }
   };
 
-  const onPreviousStep = () => {
-    if (step === 'fields') {
-      setStep('signers');
-    }
+  const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addFields({
+        documentId: document.id,
+        fields: data.fields,
+      });
 
-    if (step === 'subject') {
-      setStep('fields');
+      router.refresh();
+
+      setStep('subject');
+    } 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();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while sending the document.',
+        variant: 'destructive',
+      });
     }
   };
 
@@ -62,35 +154,43 @@ export const EditDocumentForm = ({
       </Card>
 
       <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-        {step === 'signers' && (
-          <AddSignersFormPartial
-            recipients={recipients}
-            fields={fields}
-            document={document}
-            onContinue={onNextStep}
-            onGoBack={onPreviousStep}
+        <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+          <DocumentFlowFormContainerHeader
+            title={currentDocumentFlow.title}
+            description={currentDocumentFlow.description}
           />
-        )}
 
-        {step === 'fields' && (
-          <AddFieldsFormPartial
-            recipients={recipients}
-            fields={fields}
-            document={document}
-            onContinue={onNextStep}
-            onGoBack={onPreviousStep}
-          />
-        )}
+          {step === 'signers' && (
+            <AddSignersFormPartial
+              documentFlow={documentFlow.signers}
+              recipients={recipients}
+              fields={fields}
+              numberOfSteps={Object.keys(documentFlow).length}
+              onSubmit={onAddSignersFormSubmit}
+            />
+          )}
 
-        {step === 'subject' && (
-          <AddSubjectFormPartial
-            recipients={recipients}
-            fields={fields}
-            document={document}
-            onContinue={onNextStep}
-            onGoBack={onPreviousStep}
-          />
-        )}
+          {step === 'fields' && (
+            <AddFieldsFormPartial
+              documentFlow={documentFlow.fields}
+              recipients={recipients}
+              fields={fields}
+              numberOfSteps={Object.keys(documentFlow).length}
+              onSubmit={onAddFieldsFormSubmit}
+            />
+          )}
+
+          {step === 'subject' && (
+            <AddSubjectFormPartial
+              documentFlow={documentFlow.subject}
+              document={document}
+              recipients={recipients}
+              fields={fields}
+              numberOfSteps={Object.keys(documentFlow).length}
+              onSubmit={onAddSubjectFormSubmit}
+            />
+          )}
+        </DocumentFlowFormContainer>
       </div>
     </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/[id]/loading.tsx

@@ -9,12 +9,13 @@ export default function Loading() {
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Documents
       </Link>
+
       <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
-      <div className="mt-8 grid min-h-[80vh] w-full grid-cols-12 gap-x-8">
+      <div className="mt-8 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
         <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
-          <div className="flex min-h-[80vh] flex-col items-center justify-center">
+          <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />
 
             <p className="text-muted-foreground mt-4">Loading document...</p>

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

@@ -7,8 +7,11 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 export type DocumentPageProps = {
@@ -69,18 +72,28 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <span>{recipients.length} Recipient(s)</span>
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+              <span>{recipients.length} Recipient(s)</span>
+            </StackAvatarsWithTooltip>
           </div>
         )}
       </div>
 
-      <EditDocumentForm
-        className="mt-8"
-        document={document}
-        user={session}
-        recipients={recipients}
-        fields={fields}
-      />
+      {document.status !== InternalDocumentStatus.COMPLETED && (
+        <EditDocumentForm
+          className="mt-8"
+          document={document}
+          user={session}
+          recipients={recipients}
+          fields={fields}
+        />
+      )}
+
+      {document.status === InternalDocumentStatus.COMPLETED && (
+        <div className="mx-auto mt-12 max-w-2xl">
+          <LazyPDFViewer document={`data:application/pdf;base64,${document.document}`} />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,65 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Edit, Pencil, Share } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DataTableActionButtonProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  const isRecipient = !!recipient;
+  const isDraft = row.status === DocumentStatus.DRAFT;
+  const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  return match({
+    isOwner,
+    isRecipient,
+    isDraft,
+    isPending,
+    isComplete,
+    isSigned,
+  })
+    .with({ isOwner: true, isDraft: true }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/documents/${row.id}`}>
+          <Edit className="-ml-1 mr-2 h-4 w-4" />
+          Edit
+        </Link>
+      </Button>
+    ))
+    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/sign/${recipient?.token}`}>
+          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+          Sign
+        </Link>
+      </Button>
+    ))
+    .otherwise(() => (
+      <Button className="w-24" disabled>
+        <Share className="-ml-1 mr-2 h-4 w-4" />
+        Share
+      </Button>
+    ));
+};

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

@@ -0,0 +1,133 @@
+'use client';
+
+import Link from 'next/link';
+
+import {
+  Copy,
+  Download,
+  Edit,
+  History,
+  MoreHorizontal,
+  Pencil,
+  Share,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type DataTableActionDropdownProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  // const isRecipient = !!recipient;
+  // const isDraft = row.status === DocumentStatus.DRAFT;
+  // const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  const onDownloadClick = () => {
+    let decodedDocument = row.document;
+
+    try {
+      decodedDocument = atob(decodedDocument);
+    } catch (err) {
+      // We're just going to ignore this error and try to download the document
+      console.error(err);
+    }
+
+    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="h-5 w-5 text-gray-500" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled={!recipient} asChild>
+          <Link href={`/sign/${recipient?.token}`}>
+            <Pencil className="mr-2 h-4 w-4" />
+            Sign
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isOwner} asChild>
+          <Link href={`/documents/${row.id}`}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
+          <Download className="mr-2 h-4 w-4" />
+          Download
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <XCircle className="mr-2 h-4 w-4" />
+          Void
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+
+        <DropdownMenuLabel>Share</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled>
+          <History className="mr-2 h-4 w-4" />
+          Resend
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Share className="mr-2 h-4 w-4" />
+          Share
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

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

@@ -8,7 +8,7 @@ import { Loader } from 'lucide-react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
+import { Document, Recipient, User } from '@documenso/prisma/client';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
@@ -16,8 +16,16 @@ import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-a
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
+import { DataTableActionButton } from './data-table-action-button';
+import { DataTableActionDropdown } from './data-table-action-dropdown';
+
 export type DocumentsDataTableProps = {
-  results: FindResultSet<DocumentWithReciepient>;
+  results: FindResultSet<
+    Document & {
+      Recipient: Recipient[];
+      User: Pick<User, 'id' | 'name' | 'email'>;
+    }
+  >;
 };
 
 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@@ -45,7 +53,11 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           {
             header: 'Title',
             cell: ({ row }) => (
-              <Link href={`/documents/${row.original.id}`} className="font-medium hover:underline">
+              <Link
+                href={`/documents/${row.original.id}`}
+                title={row.original.title}
+                className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+              >
                 {row.original.title}
               </Link>
             ),
@@ -67,6 +79,15 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             accessorKey: 'created',
             cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
           },
+          {
+            header: 'Actions',
+            cell: ({ row }) => (
+              <div className="flex items-center gap-x-4">
+                <DataTableActionButton row={row.original} />
+                <DataTableActionDropdown row={row.original} />
+              </div>
+            ),
+          },
         ]}
         data={results.data}
         perPage={results.perPage}

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

@@ -1,28 +1,22 @@
 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 { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 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 = {
   searchParams?: {
-    status?: InternalDocumentStatus | 'ALL';
+    status?: ExtendedDocumentStatus;
     period?: PeriodSelectorValue;
     page?: string;
     perPage?: string;
@@ -30,20 +24,20 @@ export type DocumentsPageProps = {
 };
 
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const session = await getRequiredServerComponentSession();
+  const user = await getRequiredServerComponentSession();
 
   const stats = await getStats({
-    userId: session.id,
+    user,
   });
 
-  const status = isDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
-  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
+  // const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
 
   const results = await findDocuments({
-    userId: session.id,
-    status: status === 'ALL' ? undefined : status,
+    userId: user.id,
+    status,
     orderBy: {
       column: 'created',
       direction: 'desc',
@@ -52,8 +46,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);
 
@@ -63,73 +55,47 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
       params.delete('page');
     }
 
-    if (value === 'ALL') {
-      params.delete('status');
-    }
-
     return `/documents?${params.toString()}`;
   };
 
   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={status} className="overflow-x-auto">
           <TabsList>
-            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
-              <Link href={getTabHref('ALL')}>All</Link>
-            </TabsTrigger>
+            {[
+              ExtendedDocumentStatus.INBOX,
+              ExtendedDocumentStatus.PENDING,
+              ExtendedDocumentStatus.COMPLETED,
+              ExtendedDocumentStatus.DRAFT,
+              ExtendedDocumentStatus.ALL,
+            ].map((value) => (
+              <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
+                <Link href={getTabHref(value)} scroll={false}>
+                  <DocumentStatus status={value} />
 
-            <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} />
-
-                <span className="ml-1 hidden opacity-50 md:inline-block">
-                  {Math.min(stats.PENDING, 99)}
-                </span>
-              </Link>
-            </TabsTrigger>
-
-            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild>
-              <Link href={getTabHref(InternalDocumentStatus.COMPLETED)}>
-                <DocumentStatus status={InternalDocumentStatus.COMPLETED} />
-
-                <span className="ml-1 hidden opacity-50 md:inline-block">
-                  {Math.min(stats.COMPLETED, 99)}
-                </span>
-              </Link>
-            </TabsTrigger>
+                  {value !== ExtendedDocumentStatus.ALL && (
+                    <span className="ml-1 hidden opacity-50 md:inline-block">
+                      {Math.min(stats[value], 99)}
+                    </span>
+                  )}
+                </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,8 +1,14 @@
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
+import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { SubscriptionStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
 
-import { PasswordForm } from '~/components/forms/password';
+import { LocaleDate } from '~/components/formatter/locale-date';
 import { getServerComponentFlag } from '~/helpers/get-server-component-feature-flag';
 
 export default async function BillingSettingsPage() {
@@ -15,17 +21,55 @@ export default async function BillingSettingsPage() {
     redirect('/settings/profile');
   }
 
+  let subscription = await getSubscriptionByUserId({ userId: user.id });
+
+  // If we don't have a customer record, create one as well as an empty subscription.
+  if (!subscription?.customerId) {
+    subscription = await createCustomer({ user });
+  }
+
+  let billingPortalUrl = '';
+
+  if (subscription?.customerId) {
+    billingPortalUrl = await getPortalSession({
+      customerId: subscription.customerId,
+      returnUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/settings/billing`,
+    });
+  }
+
   return (
     <div>
       <h3 className="text-lg font-medium">Billing</h3>
 
       <p className="mt-2 text-sm text-slate-500">
-        Here you can update and manage your subscription.
+        Your subscription is{' '}
+        {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
+        {subscription?.periodEnd && (
+          <>
+            {' '}
+            Your next payment is due on{' '}
+            <span className="font-semibold">
+              <LocaleDate date={subscription.periodEnd} />
+            </span>
+            .
+          </>
+        )}
       </p>
 
       <hr className="my-4" />
 
-      <PasswordForm user={user} className="max-w-xl" />
+      {billingPortalUrl && (
+        <Button asChild>
+          <Link href={billingPortalUrl}>Manage Subscription</Link>
+        </Button>
+      )}
+
+      {!billingPortalUrl && (
+        <p className="max-w-[60ch] text-base text-slate-500">
+          You do not currently have a customer record, this should not happen. Please contact
+          support for assistance.
+        </p>
+      )}
     </div>
   );
 }

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';
 
@@ -51,7 +50,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   return (
     <form
       className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border px-4 py-6',
+        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[80rem] flex-col rounded-xl border px-4 py-6',
       )}
       onSubmit={handleSubmit(onFormSubmit)}
     >
@@ -65,7 +64,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
 
           <hr className="border-border mb-8 mt-4" />
 
-          <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">
+          <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
             <div className="flex flex-1 flex-col gap-y-4">
               <div>
                 <Label htmlFor="full-name">Full Name</Label>
@@ -99,10 +98,10 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
               </div>
             </div>
 
-            <div className="flex gap-4">
+            <div className="flex flex-col gap-4 md:flex-row">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 size="lg"
               >
@@ -110,8 +109,8 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
               </Button>
 
               <Button
+                className="w-full"
                 type="submit"
-                className="flex-1"
                 size="lg"
                 disabled={!isComplete || isSubmitting}
               >

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

@@ -149,7 +149,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
                 disabled={!localFullName}
                 onClick={() => {
                   setShowFullNameModal(false);
-                  onSign('local');
+                  void onSign('local');
                 }}
               >
                 Sign

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';
@@ -58,7 +57,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
           </p>
         </div>
 
-        <div className="mt-8 grid grid-cols-12 gap-8">
+        <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
           <Card
             className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
             gradient

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';
 
@@ -183,7 +182,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
                 disabled={!localSignature}
                 onClick={() => {
                   setShowSignatureModal(false);
-                  onSign('local');
+                  void onSign('local');
                 }}
               >
                 Sign

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

@@ -46,7 +46,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
       className={`
         ${zIndexClass}
         ${firstClass}
-        h-10 w-10 border-2 border-solid border-white`}
+        dark:border-border h-10 w-10 border-2 border-solid border-white`}
     >
       <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
     </Avatar>

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

@@ -11,7 +11,17 @@ import {
 import { StackAvatar } from './stack-avatar';
 import { StackAvatars } from './stack-avatars';
 
-export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
+export type StackAvatarsWithTooltipProps = {
+  recipients: Recipient[];
+  position?: 'top' | 'bottom';
+  children?: React.ReactNode;
+};
+
+export const StackAvatarsWithTooltip = ({
+  recipients,
+  position,
+  children,
+}: StackAvatarsWithTooltipProps) => {
   const waitingRecipients = recipients.filter(
     (recipient) => getRecipientType(recipient) === 'waiting',
   );
@@ -32,9 +42,10 @@ export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger className="flex cursor-pointer">
-          <StackAvatars recipients={recipients} />
+          {children || <StackAvatars recipients={recipients} />}
         </TooltipTrigger>
-        <TooltipContent>
+
+        <TooltipContent side={position}>
           <div className="flex flex-col gap-y-5 p-1">
             {completedRecipients.length > 0 && (
               <div>

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

@@ -2,47 +2,26 @@
 
 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();
+  // 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
+      {/* We have no other subpaths rn */}
+      {/* <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 ',
+          '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('/documents'),
           },
         )}
       >
         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/header.tsx

@@ -4,11 +4,8 @@ import { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 
-import { Menu } from 'lucide-react';
-
 import { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
 
 import { Logo } from '~/components/branding/logo';
 
@@ -23,7 +20,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-40 flex h-16 w-full items-center border-b backdrop-blur',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-50 flex h-16 w-full items-center border-b backdrop-blur',
         className,
       )}
       {...props}
@@ -41,9 +38,9 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
         <div className="flex gap-x-4">
           <ProfileDropdown user={user} />
 
-          <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
+          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
             <Menu className="h-6 w-6" />
-          </Button>
+          </Button> */}
         </div>
       </div>
     </header>

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

@@ -118,7 +118,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
 
         <DropdownMenuItem
           onSelect={() =>
-            signOut({
+            void signOut({
               callbackUrl: '/',
             })
           }

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)/period-selector/period-selector.tsx

@@ -39,7 +39,7 @@ export const PeriodSelector = () => {
       params.delete('period');
     }
 
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
   };
 
   return (

apps/web/src/components/(marketing)/claim-plan-dialog.tsx

@@ -63,7 +63,9 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
 
   const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      const delay = new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
 
       const [redirectUrl] = await Promise.all([
         claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),

apps/web/src/components/(marketing)/password-reveal.tsx

@@ -13,7 +13,7 @@ export const PasswordReveal = ({ password }: PasswordRevealProps) => {
   const [, copy] = useCopyToClipboard();
 
   const onCopyClick = () => {
-    copy(password).then(() => {
+    void copy(password).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'Your password has been copied to your clipboard.',

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({
@@ -124,7 +124,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     setValue('signatureDataUrl', draftSignatureDataUrl);
     setValue('signatureText', '');
 
-    trigger('signatureDataUrl');
+    void trigger('signatureDataUrl');
     setShowSigningDialog(false);
   };
 
@@ -135,7 +135,9 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     signatureText,
   }: TWidgetFormSchema) => {
     try {
-      const delay = new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      const delay = new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
 
       // eslint-disable-next-line turbo/no-undeclared-env-vars
       const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;

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

@@ -3,21 +3,17 @@ import { HTMLAttributes } from 'react';
 import { CheckCircle2, Clock, File } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { cn } from '@documenso/ui/lib/utils';
 
 type FriendlyStatus = {
   label: string;
-  icon: LucideIcon;
+  icon?: LucideIcon;
   color: string;
 };
 
-const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
-  DRAFT: {
-    label: 'Draft',
-    icon: File,
-    color: 'text-yellow-500',
-  },
+const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
   PENDING: {
     label: 'Pending',
     icon: Clock,
@@ -28,10 +24,24 @@ const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
     icon: CheckCircle2,
     color: 'text-green-500',
   },
+  DRAFT: {
+    label: 'Draft',
+    icon: File,
+    color: 'text-yellow-500',
+  },
+  INBOX: {
+    label: 'Inbox',
+    icon: SignatureIcon,
+    color: 'text-muted-foreground',
+  },
+  ALL: {
+    label: 'All',
+    color: 'text-muted-foreground',
+  },
 };
 
 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
-  status: InternalDocumentStatus;
+  status: ExtendedDocumentStatus;
   inheritColor?: boolean;
 };
 
@@ -45,11 +55,13 @@ export const DocumentStatus = ({
 
   return (
     <span className={cn('flex items-center', className)} {...props}>
-      <Icon
-        className={cn('mr-2 inline-block h-4 w-4', {
-          [color]: !inheritColor,
-        })}
-      />
+      {Icon && (
+        <Icon
+          className={cn('mr-2 inline-block h-4 w-4', {
+            [color]: !inheritColor,
+          })}
+        />
+      )}
       {label}
     </span>
   );

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/password.tsx

@@ -18,8 +18,8 @@ import { FormErrorMessage } from '../form/form-error-message';
 
 export const ZPasswordFormSchema = z
   .object({
-    password: z.string().min(6),
-    repeatedPassword: z.string().min(6),
+    password: z.string().min(6).max(72),
+    repeatedPassword: z.string().min(6).max(72),
   })
   .refine((data) => data.password === data.repeatedPassword, {
     message: 'Passwords do not match',
@@ -39,6 +39,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors, isSubmitting },
   } = useForm<TPasswordFormSchema>({
     values: {
@@ -56,6 +57,8 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         password,
       });
 
+      reset();
+
       toast({
         title: 'Password updated',
         description: 'Your password has been updated successfully.',
@@ -73,7 +76,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           title: 'An unknown error occurred',
           variant: 'destructive',
           description:
-            'We encountered an unknown error while attempting to sign you In. Please try again later.',
+            'We encountered an unknown error while attempting to update your password. Please try again later.',
         });
       }
     }
@@ -92,6 +95,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         <Input
           id="password"
           type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="new-password"
           className="bg-background mt-2"
           {...register('password')}
         />
@@ -107,6 +113,9 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         <Input
           id="repeated-password"
           type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="new-password"
           className="bg-background mt-2"
           {...register('repeatedPassword')}
         />

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

@@ -15,7 +15,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
-  password: z.string().min(1),
+  password: z.string().min(6).max(72),
 });
 
 export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
@@ -44,7 +44,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       await signIn('credentials', {
         email,
         password,
-        callbackUrl: '/dashboard',
+        callbackUrl: '/documents',
       }).catch((err) => {
         console.error(err);
       });
@@ -76,10 +76,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={(e) => {
-        e.preventDefault();
-        handleSubmit(onFormSubmit)();
-      }}
+      onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
         <Label htmlFor="email" className="text-slate-500">
@@ -99,6 +96,9 @@ export const SignInForm = ({ className }: SignInFormProps) => {
         <Input
           id="password"
           type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="current-password"
           className="bg-background mt-2"
           {...register('password')}
         />

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

@@ -12,14 +12,13 @@ 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),
-  password: z.string().min(1),
+  password: z.string().min(6).max(72),
 });
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
@@ -106,6 +105,9 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
         <Input
           id="password"
           type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="new-password"
           className="bg-background mt-2"
           {...register('password')}
         />

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

@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';
 
-import { TFeatureFlagValue, ZFeatureFlagValueSchema } from '~/providers/feature-flag';
+import { TFeatureFlagValue, ZFeatureFlagValueSchema } from '~/providers/feature-flag.types';
 
 /**
  * Evaluate whether a flag is enabled for the current user.
@@ -32,7 +32,7 @@ export const getFlag = async (
       revalidate: 60,
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => ZFeatureFlagValueSchema.parse(res))
     .catch(() => false);
 
@@ -64,7 +64,7 @@ export const getAllFlags = async (
       revalidate: 60,
     },
   })
-    .then((res) => res.json())
+    .then(async (res) => res.json())
     .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
     .catch(() => LOCAL_FEATURE_FLAGS);
 };

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

@@ -11,6 +11,6 @@ export default function PostHogServerClient() {
 
   return new PostHog(postHogConfig.key, {
     host: postHogConfig.host,
-    fetch: (...args) => fetch(...args),
+    fetch: async (...args) => fetch(...args),
   });
 }

apps/web/src/hooks/use-debounced-value.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export function useDebouncedValue<T>(value: T, delay: number) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

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/get-bounding-client-rect';
-
 export const useFieldPageCoords = (field: Field) => {
   const [coords, setCoords] = useState({
     x: 0,

apps/web/src/middleware.ts

@@ -1,8 +1,8 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-export default async function middleware(req: NextRequest) {
+export default 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/document/create.ts

@@ -1,7 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 
-import formidable from 'formidable';
-import { type File } from 'formidable';
+import formidable, { type File } from 'formidable';
 import { readFileSync } from 'fs';
 
 import { getServerSession } from '@documenso/lib/next-auth/get-server-session';

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

@@ -4,7 +4,7 @@ import { appRouter } from '@documenso/trpc/server/router';
 
 export default trpcNext.createNextApiHandler({
   router: appRouter,
-  createContext: ({ req, res }) => createTrpcContext({ req, res }),
+  createContext: async ({ req, res }) => createTrpcContext({ req, res }),
 });
 
 // export default async function handler(_req: NextApiRequest, res: NextApiResponse) {

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

@@ -2,8 +2,6 @@
 
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
-import { z } from 'zod';
-
 import {
   FEATURE_FLAG_POLL_INTERVAL,
   LOCAL_FEATURE_FLAGS,
@@ -12,14 +10,7 @@ import {
 
 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>;
+import { TFeatureFlagValue } from './feature-flag.types';
 
 export type FeatureFlagContextValue = {
   getFlag: (_key: string) => TFeatureFlagValue;
@@ -67,7 +58,7 @@ export function FeatureFlagProvider({
 
     const interval = setInterval(() => {
       if (document.hasFocus()) {
-        getAllFlags().then((newFlags) => setFlags(newFlags));
+        void getAllFlags().then((newFlags) => setFlags(newFlags));
       }
     }, FEATURE_FLAG_POLL_INTERVAL);
 
@@ -84,7 +75,7 @@ export function FeatureFlagProvider({
       return;
     }
 
-    const onFocus = () => getAllFlags().then((newFlags) => setFlags(newFlags));
+    const onFocus = () => void getAllFlags().then((newFlags) => setFlags(newFlags));
 
     window.addEventListener('focus', onFocus);
 

apps/web/src/providers/feature-flag.types.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const ZFeatureFlagValueSchema = z.union([
+  z.boolean(),
+  z.string(),
+  z.number(),
+  z.undefined(),
+]);
+
+export type TFeatureFlagValue = z.infer<typeof ZFeatureFlagValueSchema>;

apps/web/tailwind.config.js

@@ -7,5 +7,6 @@ module.exports = {
   content: [
     ...baseConfig.content,
     `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
+    `${path.join(require.resolve('@documenso/email'), '..')}/**/*.{ts,tsx}`,
   ],
 };

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"]
 }

package.json

@@ -9,19 +9,23 @@
     "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",
+    "eslint": "^8.40.0",
     "eslint-config-custom": "*",
     "husky": "^8.0.0",
     "lint-staged": "^14.0.0",
     "prettier": "^2.5.1",
     "turbo": "^1.9.3"
   },
-  "name": "documenso.next",
+  "name": "@documenso/root",
   "packageManager": "npm@8.19.2",
   "workspaces": [
     "apps/*",

packages/ee/LICENSE

@@ -0,0 +1,40 @@
+The Documenso Commercial License (the “Commercial License”)
+Copyright (c) 2023 Documenso, Inc
+
+With regard to the Documenso Software:
+
+This software and associated documentation files (the "Software") may only be
+used in production, if you (and any entity that you represent) have agreed to,
+and are in compliance with, an agreement governing
+the use of the Software, as mutually agreed by you and Documenso, Inc ("Documenso"),
+and otherwise have a valid Documenso Enterprise Edition subscription ("Commercial Subscription").
+Subject to the foregoing sentence, you are free to modify this Software and publish patches to the Software.
+You agree that Documenso and/or its licensors (as applicable) retain all right, title and interest in
+and to all such modifications and/or patches, and all such modifications and/or
+patches may only be used, copied, modified, displayed, distributed, or otherwise
+exploited with a valid Commercial Subscription for the correct number of hosts.
+Notwithstanding the foregoing, you may copy and modify the Software for development
+and testing purposes, without requiring a subscription. You agree that Documenso and/or
+its licensors (as applicable) retain all right, title and interest in and to all such
+modifications. You are not granted any other rights beyond what is expressly stated herein.
+Subject to the foregoing, it is forbidden to copy, merge, publish, distribute, sublicense,
+and/or sell the Software.
+
+This Commercial License applies only to the part of this Software that is not distributed under
+the AGPLv3 license. Any part of this Software distributed under the MIT license or which
+is served client-side as an image, font, cascading stylesheet (CSS), file which produces
+or is compiled, arranged, augmented, or combined into client-side JavaScript, in whole or
+in part, is copyrighted under the AGPLv3 license. The full text of this Commercial License shall
+be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+For all third party components incorporated into the Documenso Software, those
+components are licensed under the original license provided by the owner of the
+applicable component.

packages/ee/index.ts

@@ -0,0 +1 @@
+export {};