feat: promise safety with eslint

chore: reduce open page caching time to 1 hour

.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

@@ -1,12 +1,5 @@
 version: 2
 
-on:
-  push:
-    branches: [ "feat/refresh" ]
-  pull_request:
-    branches: [ "feat/refresh" ]
-  workflow_dispatch:
-
 updates:
   - package-ecosystem: 'github-actions'
     directory: '/'

.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 }}

apps/marketing/package.json

@@ -4,7 +4,7 @@
   "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",
@@ -30,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]/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 } }) => {

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,10 +99,8 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
           </DialogDescription>
         </DialogHeader>
 
-        <form
-          className={cn('flex flex-col gap-y-4', className)}
-          onSubmit={handleSubmit(onFormSubmit)}
-        >
+        <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">
@@ -133,14 +133,15 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
               <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 */}
+            <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)/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

@@ -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/package.json

@@ -4,7 +4,7 @@
   "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",
@@ -36,6 +36,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "react-rnd": "^10.4.1",
+    "sharp": "0.32.5",
     "ts-pattern": "^5.0.5",
     "typescript": "5.1.6",
     "zod": "^3.21.4"

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

@@ -13,6 +13,11 @@ import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/ad
 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';
 
@@ -28,6 +33,8 @@ export type EditDocumentFormProps = {
   fields: Field[];
 };
 
+type EditDocumentStep = 'signers' | 'fields' | 'subject';
+
 export const EditDocumentForm = ({
   className,
   document,
@@ -38,29 +45,34 @@ export const EditDocumentForm = ({
   const { toast } = useToast();
   const router = useRouter();
 
-  const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
+  const [step, setStep] = useState<EditDocumentStep>('signers');
 
   const documentUrl = `data:application/pdf;base64,${document.document}`;
 
-  const onNextStep = () => {
-    if (step === 'signers') {
-      setStep('fields');
-    }
-
-    if (step === 'fields') {
-      setStep('subject');
-    }
+  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,
+    },
   };
 
-  const onPreviousStep = () => {
-    if (step === 'fields') {
-      setStep('signers');
-    }
-
-    if (step === 'subject') {
-      setStep('fields');
-    }
-  };
+  const currentDocumentFlow = documentFlow[step];
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
@@ -72,7 +84,7 @@ export const EditDocumentForm = ({
 
       router.refresh();
 
-      onNextStep();
+      setStep('fields');
     } catch (err) {
       console.error(err);
 
@@ -94,7 +106,7 @@ export const EditDocumentForm = ({
 
       router.refresh();
 
-      onNextStep();
+      setStep('subject');
     } catch (err) {
       console.error(err);
 
@@ -119,8 +131,6 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
-      onNextStep();
     } catch (err) {
       console.error(err);
 
@@ -144,38 +154,43 @@ export const EditDocumentForm = ({
       </Card>
 
       <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+          <DocumentFlowFormContainerHeader
+            title={currentDocumentFlow.title}
+            description={currentDocumentFlow.description}
+          />
+
           {step === 'signers' && (
             <AddSignersFormPartial
+              documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
-            document={document}
-            onContinue={onNextStep}
-            onGoBack={onPreviousStep}
+              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSignersFormSubmit}
             />
           )}
 
           {step === 'fields' && (
             <AddFieldsFormPartial
+              documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
-            document={document}
-            onContinue={onNextStep}
-            onGoBack={onPreviousStep}
+              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddFieldsFormSubmit}
             />
           )}
 
           {step === 'subject' && (
             <AddSubjectFormPartial
+              documentFlow={documentFlow.subject}
+              document={document}
               recipients={recipients}
               fields={fields}
-            document={document}
-            onContinue={onNextStep}
-            onGoBack={onPreviousStep}
+              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSubjectFormSubmit}
             />
           )}
+        </DocumentFlowFormContainer>
       </div>
     </div>
   );

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,11 +72,14 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
               <span>{recipients.length} Recipient(s)</span>
+            </StackAvatarsWithTooltip>
           </div>
         )}
       </div>
 
+      {document.status !== InternalDocumentStatus.COMPLETED && (
         <EditDocumentForm
           className="mt-8"
           document={document}
@@ -81,6 +87,13 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           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/(signing)/sign/[token]/form.tsx

@@ -50,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)}
     >
@@ -64,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>
@@ -98,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"
               >
@@ -109,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

@@ -57,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

@@ -182,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/profile-dropdown.tsx

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

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

@@ -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/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',
@@ -92,6 +92,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 +110,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/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>;
@@ -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

@@ -18,7 +18,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 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>;
@@ -105,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/helpers/get-feature-flag.ts

@@ -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/middleware.ts

@@ -1,6 +1,6 @@
 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('/documents', req.url);
 

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

@@ -67,7 +67,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 +84,7 @@ export function FeatureFlagProvider({
       return;
     }
 
-    const onFocus = () => getAllFlags().then((newFlags) => setFlags(newFlags));
+    const onFocus = () => void getAllFlags().then((newFlags) => setFlags(newFlags));
 
     window.addEventListener('focus', onFocus);
 

package-lock.json

@@ -53,6 +53,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"
       },
@@ -92,6 +93,7 @@
         "react-hook-form": "^7.43.9",
         "react-icons": "^4.8.0",
         "react-rnd": "^10.4.1",
+        "sharp": "0.32.5",
         "ts-pattern": "^5.0.5",
         "typescript": "5.1.6",
         "zod": "^3.21.4"
@@ -5213,6 +5215,11 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw=="
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -5227,6 +5234,25 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/bcrypt": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.0.tgz",
@@ -5256,6 +5282,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -5318,6 +5354,29 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -5994,6 +6053,18 @@
         }
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6010,6 +6081,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -6544,6 +6624,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6897,6 +6985,14 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
@@ -7974,6 +8070,14 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -8008,6 +8112,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -8258,6 +8367,11 @@
         }
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
     "node_modules/fs-extra": {
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
@@ -8468,6 +8582,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="
+    },
     "node_modules/glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -8986,6 +9105,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -11367,6 +11505,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
+    },
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -11418,6 +11561,11 @@
         "node": "^14 || ^16 || >=18"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -11618,6 +11766,17 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.47.0.tgz",
+      "integrity": "sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
@@ -12446,6 +12605,111 @@
         "preact": ">=10"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+    },
+    "node_modules/prebuild-install/node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -12660,6 +12924,15 @@
       "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
       "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
     },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -12701,6 +12974,11 @@
         }
       ]
     },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
+    },
     "node_modules/quick-lru": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
@@ -12743,6 +13021,28 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/re-resizable": {
       "version": "6.9.6",
       "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.6.tgz",
@@ -13795,6 +14095,82 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
       "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
     },
+    "node_modules/sharp": {
+      "version": "0.32.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.5.tgz",
+      "integrity": "sha512-0dap3iysgDkNaPOaOL4X/0akdu0ma62GcdC2NBQ+93eqpePdDdr2/LM0sFdDSMmN7yS+odyZtPsb7tx/cYBKnQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.5.4",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^3.0.4",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/sharp/node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sharp/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sharp/node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
+    },
+    "node_modules/sharp/node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -13849,8 +14225,7 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ],
-      "optional": true
+      ]
     },
     "node_modules/simple-get": {
       "version": "3.1.1",
@@ -13863,6 +14238,19 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -14009,6 +14397,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz",
+      "integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==",
+      "dependencies": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -14472,6 +14869,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+      "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+      "dependencies": {
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+      "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
     "node_modules/text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
@@ -14913,6 +15330,17 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/turbo": {
       "version": "1.10.12",
       "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.10.12.tgz",

packages/email/transports/mailchannels.ts

@@ -110,9 +110,10 @@ export class MailChannelsTransport implements Transport<SentMessageInfo> {
           });
         }
 
-        res.json().then((data) => {
-          return callback(new Error(`MailChannels error: ${data.message}`), null);
-        });
+        res
+          .json()
+          .then((data) => callback(new Error(`MailChannels error: ${data.message}`), null))
+          .catch((err) => callback(err, null));
       })
       .catch((err) => {
         return callback(err, null);

packages/eslint-config/index.cjs

@@ -19,6 +19,8 @@ module.exports = {
   parser: '@typescript-eslint/parser',
 
   parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../../apps/*/tsconfig.json', '../../packages/*/tsconfig.json'],
     ecmaVersion: 2022,
     ecmaFeatures: {
       jsx: true,
@@ -32,6 +34,18 @@ module.exports = {
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 
+    // Safety with promises so we aren't running with scissors
+    'no-promise-executor-return': 'error',
+    'prefer-promise-reject-errors': 'error',
+    'require-atomic-updates': 'error',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      { checksVoidReturn: { attributes: false } },
+    ],
+    '@typescript-eslint/promise-function-async': 'error',
+    '@typescript-eslint/require-await': 'error',
+
     // We never want to use `as` but are required to on occasion to handle
     // shortcomings in third-party and generated types.
     //

packages/eslint-config/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@documenso/tsconfig/base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": true,
+  },
+  "include": ["**/*.cjs", "**/*.js"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/lib/client-only/hooks/use-document-element.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+
+export const useDocumentElement = () => {
+  /**
+   * Given a mouse event, find the nearest element found by the provided selector.
+   */
+  const getPage = (event: MouseEvent, pageSelector: string) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return null;
+    }
+
+    const target = event.target;
+
+    const $page =
+      target.closest<HTMLElement>(pageSelector) ?? target.querySelector<HTMLElement>(pageSelector);
+
+    if (!$page) {
+      return null;
+    }
+
+    return $page;
+  };
+
+  /**
+   * Provided a page and a field, calculate the position of the field
+   * as a percentage of the page width and height.
+   */
+  const getFieldPosition = (page: HTMLElement, field: HTMLElement) => {
+    const {
+      top: pageTop,
+      left: pageLeft,
+      height: pageHeight,
+      width: pageWidth,
+    } = getBoundingClientRect(page);
+
+    const {
+      top: fieldTop,
+      left: fieldLeft,
+      height: fieldHeight,
+      width: fieldWidth,
+    } = getBoundingClientRect(field);
+
+    return {
+      x: ((fieldLeft - pageLeft) / pageWidth) * 100,
+      y: ((fieldTop - pageTop) / pageHeight) * 100,
+      width: (fieldWidth / pageWidth) * 100,
+      height: (fieldHeight / pageHeight) * 100,
+    };
+  };
+
+  /**
+   * Given a mouse event, determine if the mouse is within the bounds of the
+   * nearest element found by the provided selector.
+   *
+   * @param mouseWidth The artifical width of the mouse.
+   * @param mouseHeight The artifical height of the mouse.
+   */
+  const isWithinPageBounds = useCallback(
+    (event: MouseEvent, pageSelector: string, mouseWidth = 0, mouseHeight = 0) => {
+      const $page = getPage(event, pageSelector);
+
+      if (!$page) {
+        return false;
+      }
+
+      const { top, left, height, width } = $page.getBoundingClientRect();
+
+      const halfMouseWidth = mouseWidth / 2;
+      const halfMouseHeight = mouseHeight / 2;
+
+      if (event.clientY > top + height - halfMouseHeight || event.clientY < top + halfMouseHeight) {
+        return false;
+      }
+
+      if (event.clientX > left + width - halfMouseWidth || event.clientX < left + halfMouseWidth) {
+        return false;
+      }
+
+      return true;
+    },
+    [],
+  );
+
+  return {
+    getPage,
+    getFieldPosition,
+    isWithinPageBounds,
+  };
+};

packages/lib/next-auth/auth-options.ts

@@ -7,6 +7,7 @@ import GoogleProvider, { GoogleProfile } from 'next-auth/providers/google';
 import { prisma } from '@documenso/prisma';
 
 import { getUserByEmail } from '../server-only/user/get-user-by-email';
+import { ErrorCodes } from './error-codes';
 
 export const NEXT_AUTH_OPTIONS: AuthOptions = {
   adapter: PrismaAdapter(prisma),
@@ -23,21 +24,23 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
       },
       authorize: async (credentials, _req) => {
         if (!credentials) {
-          return null;
+          throw new Error(ErrorCodes.CredentialsNotFound);
         }
 
         const { email, password } = credentials;
 
-        const user = await getUserByEmail({ email }).catch(() => null);
+        const user = await getUserByEmail({ email }).catch(() => {
+          throw new Error(ErrorCodes.IncorrectEmailPassword);
+        });
 
-        if (!user || !user.password) {
-          return null;
+        if (!user.password) {
+          throw new Error(ErrorCodes.UserMissingPassword);
         }
 
-        const isPasswordsSame = compare(password, user.password);
+        const isPasswordsSame = await compare(password, user.password);
 
         if (!isPasswordsSame) {
-          return null;
+          throw new Error(ErrorCodes.IncorrectEmailPassword);
         }
 
         return {
@@ -86,7 +89,7 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
       };
     },
 
-    async session({ token, session }) {
+    session({ token, session }) {
       if (token && token.email) {
         return {
           ...session,

packages/lib/next-auth/error-codes.ts

@@ -0,0 +1,5 @@
+export const ErrorCodes = {
+  IncorrectEmailPassword: 'incorrect-email-password',
+  UserMissingPassword: 'missing-password',
+  CredentialsNotFound: 'credentials-not-found',
+} as const;

packages/lib/next-auth/get-server-session.ts

@@ -1,9 +1,6 @@
 import { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from 'next';
-import { headers } from 'next/headers';
-import { NextRequest } from 'next/server';
 
 import { getServerSession as getNextAuthServerSession } from 'next-auth';
-import { getToken } from 'next-auth/jwt';
 
 import { prisma } from '@documenso/prisma';
 
@@ -30,18 +27,6 @@ export const getServerSession = async ({ req, res }: GetServerSessionOptions) =>
   return user;
 };
 
-export const getServerComponentToken = async () => {
-  const requestHeaders = Object.fromEntries(headers().entries());
-
-  const req = new NextRequest('http://example.com', {
-    headers: requestHeaders,
-  });
-
-  const token = await getToken({
-    req,
-  });
-};
-
 export const getServerComponentSession = async () => {
   const session = await getNextAuthServerSession(NEXT_AUTH_OPTIONS);
 

packages/lib/server-only/document/complete-document-with-token.ts

@@ -87,6 +87,6 @@ export const completeDocumentWithToken = async ({
 
   if (documents.count > 0) {
     console.log('sealing document');
-    sealDocument({ documentId: document.id });
+    await sealDocument({ documentId: document.id });
   }
 };

packages/lib/server-only/document/send-document.tsx

@@ -59,7 +59,7 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         signDocumentLink,
       });
 
-      mailer.sendMail({
+      await mailer.sendMail({
         to: {
           address: email,
           name,

packages/prisma/schema.prisma

@@ -1,11 +1,11 @@
 generator client {
   provider = "prisma-client-js"
-  previewFeatures = ["extendedWhereUnique", "jsonProtocol"]
 }
 
 datasource db {
   provider  = "postgresql"
   url       = env("NEXT_PRIVATE_DATABASE_URL")
+  directUrl = env("NEXT_PRIVATE_DIRECT_DATABASE_URL")
 }
 
 enum IdentityProvider {

packages/tailwind-config/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@documenso/tsconfig/base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": true,
+  },
+  "include": ["**/*.cjs", "**/*.js"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/trpc/server/trpc.ts

@@ -10,7 +10,7 @@ const t = initTRPC.context<TrpcContext>().create({
 /**
  * Middlewares
  */
-export const authenticatedMiddleware = t.middleware(({ ctx, next }) => {
+export const authenticatedMiddleware = t.middleware(async ({ ctx, next }) => {
   if (!ctx.session) {
     throw new TRPCError({
       code: 'UNAUTHORIZED',
@@ -18,7 +18,7 @@ export const authenticatedMiddleware = t.middleware(({ ctx, next }) => {
     });
   }
 
-  return next({
+  return await next({
     ctx: {
       ...ctx,
 

packages/tsconfig/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./base.json",
+  "compilerOptions": {
+    "noEmit": true,
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", "**/*.json"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/ui/primitives/button.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Slot } from '@radix-ui/react-slot';
 import { VariantProps, cva } from 'class-variance-authority';
+import { Loader } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 
@@ -30,17 +31,51 @@ const buttonVariants = cva(
   },
 );
 
+const loaderVariants = cva('mr-2 animate-spin', {
+  variants: {
+    size: {
+      default: 'h-5 w-5',
+      sm: 'h-4 w-4',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+
+  /**
+   * Will display the loading spinner and disable the button.
+   */
+  loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
+    if (asChild) {
       return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+        <Slot className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      );
+    }
+
+    const showLoader = props.loading === true;
+    const isDisabled = props.disabled || showLoader;
+
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+        disabled={isDisabled}
+      >
+        {showLoader && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
+        {props.children}
+      </button>
     );
   },
 );

packages/ui/primitives/document-dropzone.tsx

@@ -86,7 +86,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
     multiple: false,
     onDrop: ([acceptedFile]) => {
       if (acceptedFile && onDrop) {
-        onDrop(acceptedFile);
+        void onDrop(acceptedFile);
       }
     },
   });

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

@@ -9,8 +9,9 @@ import { nanoid } from 'nanoid';
 import { useFieldArray, useForm } from 'react-hook-form';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { Document, Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
+import { Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -26,14 +27,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 
 import { TAddFieldsFormSchema } from './add-fields.types';
 import {
-  DocumentFlowFormContainer,
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import { FieldItem } from './field-item';
-import { FRIENDLY_FIELD_TYPE } from './types';
+import { DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
 
 const fontCaveat = Caveat({
   weight: ['500'],
@@ -49,20 +49,24 @@ const MIN_HEIGHT_PX = 60;
 const MIN_WIDTH_PX = 200;
 
 export type AddFieldsFormProps = {
+  documentFlow: DocumentFlowStep;
+  hideRecipients?: boolean;
   recipients: Recipient[];
   fields: Field[];
-  document: Document;
-  onContinue?: () => void;
-  onGoBack?: () => void;
+  numberOfSteps: number;
   onSubmit: (_data: TAddFieldsFormSchema) => void;
 };
 
 export const AddFieldsFormPartial = ({
+  documentFlow,
+  hideRecipients = false,
   recipients,
   fields,
-  onGoBack,
+  numberOfSteps,
   onSubmit,
 }: AddFieldsFormProps) => {
+  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+
   const {
     control,
     handleSubmit,
@@ -84,6 +88,8 @@ export const AddFieldsFormPartial = ({
     },
   });
 
+  const onFormSubmit = handleSubmit(onSubmit);
+
   const {
     append,
     remove,
@@ -99,7 +105,7 @@ export const AddFieldsFormPartial = ({
 
   const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
 
-  const [visible, setVisible] = useState(false);
+  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
   const [coords, setCoords] = useState({
     x: 0,
     y: 0,
@@ -110,86 +116,17 @@ export const AddFieldsFormPartial = ({
     width: 0,
   });
 
-  /**
-   * Given a mouse event, find the nearest pdf page element.
-   */
-  const getPage = (event: MouseEvent) => {
-    if (!(event.target instanceof HTMLElement)) {
-      return null;
-    }
-
-    const target = event.target;
-
-    const $page =
-      target.closest<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR) ??
-      target.querySelector<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR);
-
-    if (!$page) {
-      return null;
-    }
-
-    return $page;
-  };
-
-  /**
-   * Provided a page and a field, calculate the position of the field
-   * as a percentage of the page width and height.
-   */
-  const getFieldPosition = (page: HTMLElement, field: HTMLElement) => {
-    const {
-      top: pageTop,
-      left: pageLeft,
-      height: pageHeight,
-      width: pageWidth,
-    } = getBoundingClientRect(page);
-
-    const {
-      top: fieldTop,
-      left: fieldLeft,
-      height: fieldHeight,
-      width: fieldWidth,
-    } = getBoundingClientRect(field);
-
-    return {
-      x: ((fieldLeft - pageLeft) / pageWidth) * 100,
-      y: ((fieldTop - pageTop) / pageHeight) * 100,
-      width: (fieldWidth / pageWidth) * 100,
-      height: (fieldHeight / pageHeight) * 100,
-    };
-  };
-
-  /**
-   * Given a mouse event, determine if the mouse is within the bounds of the
-   * nearest pdf page element.
-   */
-  const isWithinPageBounds = useCallback((event: MouseEvent) => {
-    const $page = getPage(event);
-
-    if (!$page) {
-      return false;
-    }
-
-    const { top, left, height, width } = $page.getBoundingClientRect();
-
-    if (event.clientY > top + height || event.clientY < top) {
-      return false;
-    }
-
-    if (event.clientX > left + width || event.clientX < left) {
-      return false;
-    }
-
-    return true;
-  }, []);
-
   const onMouseMove = useCallback(
     (event: MouseEvent) => {
-      if (!isWithinPageBounds(event)) {
-        setVisible(false);
-        return;
-      }
+      setIsFieldWithinBounds(
+        isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        ),
+      );
 
-      setVisible(true);
       setCoords({
         x: event.clientX - fieldBounds.current.width / 2,
         y: event.clientY - fieldBounds.current.height / 2,
@@ -204,9 +141,18 @@ export const AddFieldsFormPartial = ({
         return;
       }
 
-      const $page = getPage(event);
+      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
 
-      if (!$page || !isWithinPageBounds(event)) {
+      if (
+        !$page ||
+        !isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        )
+      ) {
+        setSelectedField(null);
         return;
       }
 
@@ -237,10 +183,10 @@ export const AddFieldsFormPartial = ({
         signerEmail: selectedSigner.email,
       });
 
-      setVisible(false);
+      setIsFieldWithinBounds(false);
       setSelectedField(null);
     },
-    [append, isWithinPageBounds, selectedField, selectedSigner],
+    [append, isWithinPageBounds, selectedField, selectedSigner, getPage],
   );
 
   const onFieldResize = useCallback(
@@ -270,7 +216,7 @@ export const AddFieldsFormPartial = ({
         pageHeight,
       });
     },
-    [localFields, update],
+    [getFieldPosition, localFields, update],
   );
 
   const onFieldMove = useCallback(
@@ -293,7 +239,7 @@ export const AddFieldsFormPartial = ({
         pageY,
       });
     },
-    [localFields, update],
+    [getFieldPosition, localFields, update],
   );
 
   useEffect(() => {
@@ -328,15 +274,18 @@ export const AddFieldsFormPartial = ({
   }, [recipients]);
 
   return (
-    <DocumentFlowFormContainer>
-      <DocumentFlowFormContainerContent
-        title="Add Fields"
-        description="Add all relevant fields for each recipient."
-      >
+    <>
+      <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {selectedField && visible && (
+          {selectedField && (
             <Card
-              className="border-primary pointer-events-none fixed z-50 cursor-pointer bg-white"
+              className={cn(
+                'pointer-events-none fixed z-50 cursor-pointer bg-white transition-opacity',
+                {
+                  'border-primary': isFieldWithinBounds,
+                  'opacity-50': !isFieldWithinBounds,
+                },
+              )}
               style={{
                 top: coords.y,
                 left: coords.x,
@@ -357,20 +306,21 @@ export const AddFieldsFormPartial = ({
               disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
               minHeight={fieldBounds.current.height}
               minWidth={fieldBounds.current.width}
-              passive={visible && !!selectedField}
+              passive={isFieldWithinBounds && !!selectedField}
               onResize={(options) => onFieldResize(options, index)}
               onMove={(options) => onFieldMove(options, index)}
               onRemove={() => remove(index)}
             />
           ))}
 
+          {!hideRecipients && (
             <Popover>
               <PopoverTrigger asChild>
                 <Button
                   type="button"
                   variant="outline"
                   role="combobox"
-                className="bg-background text-muted-foreground justify-between font-normal"
+                  className="bg-background text-muted-foreground mb-12 justify-between font-normal"
                 >
                   {selectedSigner?.email && (
                     <span className="flex-1 truncate text-left">
@@ -414,14 +364,17 @@ export const AddFieldsFormPartial = ({
                               <Info className="mr-2 h-4 w-4" />
                             </TooltipTrigger>
                             <TooltipContent className="max-w-xs">
-                            This document has already been sent to this recipient. You can no longer
-                            edit this recipient.
+                              This document has already been sent to this recipient. You can no
+                              longer edit this recipient.
                             </TooltipContent>
                           </Tooltip>
                         )}
 
                         {recipient.name && (
-                        <span className="truncate" title={`${recipient.name} (${recipient.email})`}>
+                          <span
+                            className="truncate"
+                            title={`${recipient.name} (${recipient.email})`}
+                          >
                             {recipient.name} ({recipient.email})
                           </span>
                         )}
@@ -437,14 +390,16 @@ export const AddFieldsFormPartial = ({
                 </Command>
               </PopoverContent>
             </Popover>
+          )}
 
-          <div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
-            <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-8">
+          <div className="-mx-2 flex-1 overflow-y-scroll px-2">
+            <div className="grid grid-cols-2 gap-x-4 gap-y-8">
               <button
                 type="button"
                 className="group h-full w-full"
                 disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={() => setSelectedField(FieldType.SIGNATURE)}
+                onClick={(e) => e.stopPropagation()}
+                onMouseDown={() => setSelectedField(FieldType.SIGNATURE)}
                 data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
               >
                 <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
@@ -467,7 +422,8 @@ export const AddFieldsFormPartial = ({
                 type="button"
                 className="group h-full w-full"
                 disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={() => setSelectedField(FieldType.EMAIL)}
+                onClick={(e) => e.stopPropagation()}
+                onMouseDown={() => setSelectedField(FieldType.EMAIL)}
                 data-selected={selectedField === FieldType.EMAIL ? true : undefined}
               >
                 <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
@@ -489,7 +445,8 @@ export const AddFieldsFormPartial = ({
                 type="button"
                 className="group h-full w-full"
                 disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={() => setSelectedField(FieldType.NAME)}
+                onClick={(e) => e.stopPropagation()}
+                onMouseDown={() => setSelectedField(FieldType.NAME)}
                 data-selected={selectedField === FieldType.NAME ? true : undefined}
               >
                 <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
@@ -511,7 +468,8 @@ export const AddFieldsFormPartial = ({
                 type="button"
                 className="group h-full w-full"
                 disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                onClick={() => setSelectedField(FieldType.DATE)}
+                onClick={(e) => e.stopPropagation()}
+                onMouseDown={() => setSelectedField(FieldType.DATE)}
                 data-selected={selectedField === FieldType.DATE ? true : undefined}
               >
                 <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
@@ -534,15 +492,19 @@ export const AddFieldsFormPartial = ({
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep title="Add Fields" step={2} maxStep={3} />
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={documentFlow.stepIndex}
+          maxStep={numberOfSteps}
+        />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoNextClick={() => handleSubmit(onSubmit)()}
-          onGoBackClick={onGoBack}
+          onGoBackClick={documentFlow.onBackStep}
+          onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>
-    </DocumentFlowFormContainer>
+    </>
   );
 };

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

@@ -2,40 +2,41 @@
 
 import React, { useId } from 'react';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
 import { nanoid } from 'nanoid';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
-import { Document, Field, Recipient, SendStatus } from '@documenso/prisma/client';
+import { Field, Recipient, SendStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { TAddSignersFormSchema } from './add-signers.types';
+import { TAddSignersFormSchema, ZAddSignersFormSchema } from './add-signers.types';
 import {
-  DocumentFlowFormContainer,
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
+import { DocumentFlowStep } from './types';
 
 export type AddSignersFormProps = {
+  documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
-  document: Document;
-  onContinue?: () => void;
-  onGoBack?: () => void;
+  numberOfSteps: number;
   onSubmit: (_data: TAddSignersFormSchema) => void;
 };
 
 export const AddSignersFormPartial = ({
+  documentFlow,
+  numberOfSteps,
   recipients,
   fields: _fields,
-  onGoBack,
   onSubmit,
 }: AddSignersFormProps) => {
   const { toast } = useToast();
@@ -47,6 +48,7 @@ export const AddSignersFormPartial = ({
     handleSubmit,
     formState: { errors, isSubmitting },
   } = useForm<TAddSignersFormSchema>({
+    resolver: zodResolver(ZAddSignersFormSchema),
     defaultValues: {
       signers:
         recipients.length > 0
@@ -66,6 +68,8 @@ export const AddSignersFormPartial = ({
     },
   });
 
+  const onFormSubmit = handleSubmit(onSubmit);
+
   const {
     append: appendSigner,
     fields: signers,
@@ -116,11 +120,8 @@ export const AddSignersFormPartial = ({
   };
 
   return (
-    <DocumentFlowFormContainer onSubmit={handleSubmit(onSubmit)}>
-      <DocumentFlowFormContainerContent
-        title="Add Signers"
-        description="Add the people who will sign the document."
-      >
+    <>
+      <DocumentFlowFormContainerContent>
         <div className="flex w-full flex-col gap-y-4">
           <AnimatePresence>
             {signers.map((signer, index) => (
@@ -205,15 +206,19 @@ export const AddSignersFormPartial = ({
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep title="Add Signers" step={1} maxStep={3} />
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={documentFlow.stepIndex}
+          maxStep={numberOfSteps}
+        />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoNextClick={() => handleSubmit(onSubmit)()}
-          onGoBackClick={onGoBack}
+          onGoBackClick={documentFlow.onBackStep}
+          onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>
-    </DocumentFlowFormContainer>
+    </>
   );
 };

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

@@ -3,35 +3,35 @@
 import { useForm } from 'react-hook-form';
 
 import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
-import { FormErrorMessage } from '~/components/form/form-error-message';
-
 import { TAddSubjectFormSchema } from './add-subject.types';
 import {
-  DocumentFlowFormContainer,
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
+import { DocumentFlowStep } from './types';
 
 export type AddSubjectFormProps = {
+  documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
   document: Document;
-  onContinue?: () => void;
-  onGoBack?: () => void;
+  numberOfSteps: number;
   onSubmit: (_data: TAddSubjectFormSchema) => void;
 };
 
 export const AddSubjectFormPartial = ({
+  documentFlow,
   recipients: _recipients,
   fields: _fields,
   document,
-  onGoBack,
+  numberOfSteps,
   onSubmit,
 }: AddSubjectFormProps) => {
   const {
@@ -47,12 +47,11 @@ export const AddSubjectFormPartial = ({
     },
   });
 
+  const onFormSubmit = handleSubmit(onSubmit);
+
   return (
-    <DocumentFlowFormContainer>
-      <DocumentFlowFormContainerContent
-        title="Add Subject"
-        description="Add the subject and message you wish to send to signers."
-      >
+    <>
+      <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
           <div className="flex flex-col gap-y-4">
             <div>
@@ -122,16 +121,20 @@ export const AddSubjectFormPartial = ({
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep title="Add Subject" step={3} maxStep={3} />
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={documentFlow.stepIndex}
+          maxStep={numberOfSteps}
+        />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
           goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
-          onGoNextClick={() => handleSubmit(onSubmit)()}
-          onGoBackClick={onGoBack}
+          onGoBackClick={documentFlow.onBackStep}
+          onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>
-    </DocumentFlowFormContainer>
+    </>
   );
 };

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

@@ -2,7 +2,7 @@
 
 import React, { HTMLAttributes } from 'react';
 
-import { Loader } from 'lucide-react';
+import { motion } from 'framer-motion';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -21,7 +21,7 @@ export const DocumentFlowFormContainer = ({
     <form
       id={id}
       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',
         className,
       )}
       {...props}
@@ -31,27 +31,37 @@ export const DocumentFlowFormContainer = ({
   );
 };
 
-export type DocumentFlowFormContainerContentProps = HTMLAttributes<HTMLDivElement> & {
+export type DocumentFlowFormContainerHeaderProps = {
   title: string;
   description: string;
-  children?: React.ReactNode;
 };
 
-export const DocumentFlowFormContainerContent = ({
-  children,
+export const DocumentFlowFormContainerHeader = ({
   title,
   description,
-  className,
-  ...props
-}: DocumentFlowFormContainerContentProps) => {
+}: DocumentFlowFormContainerHeaderProps) => {
   return (
-    <div className={cn('flex flex-1 flex-col', className)} {...props}>
+    <>
       <h3 className="text-foreground text-2xl font-semibold">{title}</h3>
 
       <p className="text-muted-foreground mt-2 text-sm">{description}</p>
 
       <hr className="border-border mb-8 mt-4" />
+    </>
+  );
+};
 
+export type DocumentFlowFormContainerContentProps = HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+};
+
+export const DocumentFlowFormContainerContent = ({
+  children,
+  className,
+  ...props
+}: DocumentFlowFormContainerContentProps) => {
+  return (
+    <div className={cn('flex flex-1 flex-col', className)} {...props}>
       <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">{children}</div>
     </div>
   );
@@ -94,7 +104,9 @@ export const DocumentFlowFormContainerStep = ({
       </p>
 
       <div className="bg-muted relative mt-4 h-[2px] rounded-md">
-        <div
+        <motion.div
+          layout="size"
+          layoutId="document-flow-container-step"
           className="bg-documenso absolute inset-y-0 left-0"
           style={{
             width: `${(100 / maxStep) * step}%`,
@@ -133,20 +145,19 @@ export const DocumentFlowFormContainerActions = ({
         className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
         size="lg"
         variant="secondary"
-        disabled={disabled || loading || !canGoBack}
+        disabled={disabled || loading || !canGoBack || !onGoBackClick}
         onClick={onGoBackClick}
       >
         {goBackLabel}
       </Button>
 
       <Button
-        type="button"
+        type="submit"
         className="bg-documenso flex-1"
         size="lg"
         disabled={disabled || loading || !canGoNext}
         onClick={onGoNextClick}
       >
-        {loading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
         {goNextLabel}
       </Button>
     </div>

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

@@ -91,9 +91,10 @@ export const FieldItem = ({
   return createPortal(
     <Rnd
       key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
-      className={cn('absolute z-20', {
+      className={cn('z-20', {
         'pointer-events-none': passive,
-        'pointer-events-none z-10 opacity-75': disabled,
+        'pointer-events-none opacity-75': disabled,
+        'z-10': !active || disabled,
       })}
       // minHeight={minHeight}
       // minWidth={minWidth}
@@ -117,7 +118,7 @@ export const FieldItem = ({
     >
       {!disabled && (
         <button
-          className="text-muted-foreground/50 hover:text-muted-foreground/80 absolute -right-2 -top-2 z-[9999] flex h-8 w-8 items-center justify-center rounded-full border bg-white shadow-[0_0_0_2px_theme(colors.gray.100/70%)]"
+          className="text-muted-foreground/50 hover:text-muted-foreground/80 absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border bg-white shadow-[0_0_0_2px_theme(colors.gray.100/70%)]"
           onClick={() => onRemove?.()}
         >
           <Trash className="h-4 w-4" />

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

@@ -47,3 +47,12 @@ export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
   [FieldType.EMAIL]: 'Email',
   [FieldType.NAME]: 'Name',
 };
+
+export interface DocumentFlowStep {
+  title: string;
+  description: string;
+  stepIndex: number;
+  onSubmit?: () => void;
+  onBackStep?: () => void;
+  onNextStep?: () => void;
+}

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

@@ -7,7 +7,7 @@ import { Loader } from 'lucide-react';
 export const LazyPDFViewer = dynamic(async () => import('./pdf-viewer'), {
   ssr: false,
   loading: () => (
-    <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+    <div className="dark:bg-background flex h-[80vh] max-h-[60rem] 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>

packages/ui/primitives/pdf-viewer.tsx

@@ -66,7 +66,7 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
     const pageY = event.clientY - top;
 
     if (onPageClick) {
-      onPageClick({
+      void onPageClick({
         pageNumber,
         numPages,
         originalEvent: event,
@@ -104,11 +104,13 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
     <div ref={$el} className={cn('overflow-hidden', className)} {...props}>
       <PDFDocument
         file={document}
-        className="w-full overflow-hidden rounded"
+        className={cn('w-full overflow-hidden rounded', {
+          'h-[80vh] max-h-[60rem]': numPages === 0,
+        })}
         onLoadSuccess={(d) => onDocumentLoaded(d)}
         externalLinkTarget="_blank"
         loading={
-          <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+          <div className="dark:bg-background flex h-[80vh] max-h-[60rem] 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>

packages/ui/primitives/signature-pad/canvas.ts

@@ -302,8 +302,8 @@ export class Canvas {
   /**
    * Retrieves the signature as an image blob.
    */
-  public toBlob(type?: string, quality?: number): Promise<Blob> {
-    return new Promise((resolve, reject) => {
+  public async toBlob(type?: string, quality?: number): Promise<Blob> {
+    const promise = new Promise<Blob>((resolve, reject) => {
       this.$canvas.toBlob(
         (blob) => {
           if (!blob) {
@@ -317,5 +317,7 @@ export class Canvas {
         quality,
       );
     });
+
+    return await promise;
   }
 }

packages/ui/tailwind.config.cjs

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const baseConfig = require('@documenso/tailwind-config');
+
+module.exports = {
+  ...baseConfig,
+  content: [
+    ...baseConfig.content,
+    './primitives/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './lib/**/*.{ts,tsx}',
+  ],
+};