feat: add community embed and article link

- Edit headline for SEO
- Fix typo for consistency

apps/marketing/content/design-system.mdx

@@ -0,0 +1,42 @@
+---
+title: Design System
+---
+
+# We're building a beautiful, open-source alternative to DocuSign
+
+> Read more about our design culture here:
+>
+> [https://documenso.com/blog/design-system](https://documenso.com/blog/design-system)
+
+At Documenso, we aim to be a design-driven company.
+
+We believe that design isn't just about how things look, but also how they work. We want to make sure that the product is easy to use and intuitive. We also want to ensure that the website, desktop and mobile apps are consistent and look and feel like they belong together.
+
+To achieve this, we've created Documenso's design system containing tokens, primitives, and components, screens, and brand assets.
+
+We're open-sourcing this design system so you can see how we build the product and think about design as a whole.
+
+## Check out the design system
+
+<iframe
+  src="https://documen.so/design-system-embed"
+  className="aspect-square w-full border-none"
+  frameBorder="0"
+/>
+
+## Remix and Share the community version on Figma
+
+<a href="documen.so/design" target="_blank">
+<figure>
+  <MdxNextImage
+    src="/blog/designsystem.png"
+    width="1260"
+    height="630"
+    alt="Documenso's Design System"
+  />
+
+  <figcaption className="text-center">
+   Documenso's Design System ✨
+  </figcaption>
+</figure>
+</a>

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

@@ -21,6 +21,7 @@ const FOOTER_LINKS = [
   { href: '/open', text: 'Open' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
   { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
+  { href: '/design-system', text: 'Design' },
   { href: 'mailto:support@documenso.com', text: 'Support' },
   { href: '/privacy', text: 'Privacy' },
 ];
@@ -43,7 +44,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
           {FOOTER_LINKS.map((link, index) => (
             <Link
               key={index}

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

@@ -22,10 +22,6 @@ export const MENU_NAVIGATION_LINKS = [
     href: '/pricing',
     text: 'Pricing',
   },
-  {
-    href: '/open',
-    text: 'Open',
-  },
   {
     href: 'https://status.documenso.com',
     text: 'Status',
@@ -63,7 +59,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
           initial="initial"
           animate="animate"
           transition={{
-            staggerChildren: 0.03,
+            staggerChildren: 0.2,
           }}
         >
           {MENU_NAVIGATION_LINKS.map(({ href, text }) => (
@@ -79,7 +75,6 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
                   x: 0,
                   transition: {
                     duration: 0.5,
-                    ease: 'backInOut',
                   },
                 },
               }}

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

@@ -82,14 +82,14 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled={!recipient || isComplete} asChild>
+        <DropdownMenuItem disabled={!recipient} asChild>
           <Link href={`/sign/${recipient?.token}`}>
             <Pencil className="mr-2 h-4 w-4" />
             Sign
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
+        <DropdownMenuItem disabled={!isOwner} asChild>
           <Link href={`/documents/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit

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

@@ -1,166 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { Field, Recipient } from '@documenso/prisma/client';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
-import { AddTemplateFormPartial } from '@documenso/ui/primitives/document-flow/add-template-details';
-import { TAddTemplateSchema } from '@documenso/ui/primitives/document-flow/add-template-details.types';
-import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-template-fields';
-import { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-template-fields.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 { toast } from '@documenso/ui/primitives/use-toast';
-
-type TemplatePageFlowStep = 'details' | 'fields';
-
-export type DocumentPageProps = {
-  params: {
-    id: string;
-  };
-};
-
-export default function TemplatePage() {
-  const router = useRouter();
-
-  const [uploadedFile, setUploadedFile] = useState<{ name: string; file: string } | null>();
-  const [step, setStep] = useState<TemplatePageFlowStep>('details');
-  const [fields, setFields] = useState<Field[]>([]);
-
-  const documentFlow: Record<TemplatePageFlowStep, DocumentFlowStep> = {
-    details: {
-      title: 'Add Details',
-      description: 'Add the name and description of your template.',
-      stepIndex: 1,
-      onSubmit: () => onAddTemplateDetailsFormSubmit,
-    },
-    fields: {
-      title: 'Add Fields',
-      description: 'Add all relevant fields for each recipient.',
-      stepIndex: 2,
-      onBackStep: () => setStep('details'),
-      onSubmit: () => onAddTemplateFieldsFormSubmit,
-    },
-  };
-
-  const currentDocumentFlow = documentFlow[step];
-
-  const onAddTemplateDetailsFormSubmit = (data: TAddTemplateSchema) => {
-    if (!uploadedFile) {
-      return;
-    }
-
-    router.refresh();
-
-    const templateDetails = {
-      document: uploadedFile,
-      ...data,
-    };
-
-    console.log(templateDetails);
-
-    setStep('fields');
-  };
-
-  const onAddTemplateFieldsFormSubmit = (data: TAddTemplateFieldsFormSchema) => {
-    if (!uploadedFile) {
-      return;
-    }
-
-    console.log(data);
-
-    console.log('Submit fields in document flow');
-  };
-
-  const onFileDrop = async (file: File) => {
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const base64String = Buffer.from(arrayBuffer).toString('base64');
-
-      setUploadedFile({
-        name: file.name,
-        file: `data:application/pdf;base64,${base64String}`,
-      });
-    } catch {
-      toast({
-        title: 'Something went wrong',
-        description: 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const placeholderRecipient: Recipient[] = [
-    {
-      id: -1,
-      documentId: -1,
-      email: '',
-      name: '',
-      token: '',
-      expired: null,
-      signedAt: null,
-      readStatus: 'OPENED',
-      signingStatus: 'NOT_SIGNED',
-      sendStatus: 'NOT_SENT',
-    },
-  ];
-
-  return (
-    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="mt-4 max-w-xs truncate text-2xl font-semibold md:text-3xl" title="Templates">
-        Templates
-      </h1>
-
-      <div className="mt-12 grid w-full grid-cols-12 gap-8">
-        <div className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7">
-          {uploadedFile ? (
-            <Card gradient>
-              <CardContent className="p-2">
-                <LazyPDFViewer document={uploadedFile.file} />
-              </CardContent>
-            </Card>
-          ) : (
-            <DocumentDropzone className="h-[80vh] max-h-[60rem]" onDrop={onFileDrop} />
-          )}
-        </div>
-
-        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
-            <DocumentFlowFormContainerHeader
-              title={currentDocumentFlow.title}
-              description={currentDocumentFlow.description}
-            />
-
-            {step === 'details' && (
-              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
-                <AddTemplateFormPartial
-                  documentFlow={documentFlow.details}
-                  fields={fields}
-                  numberOfSteps={Object.keys(documentFlow).length}
-                  onSubmit={onAddTemplateDetailsFormSubmit}
-                />
-              </fieldset>
-            )}
-
-            {step === 'fields' && (
-              <AddTemplateFieldsFormPartial
-                documentFlow={documentFlow.fields}
-                recipients={placeholderRecipient}
-                fields={fields}
-                numberOfSteps={Object.keys(documentFlow).length}
-                onSubmit={onAddTemplateFieldsFormSubmit}
-              />
-            )}
-          </DocumentFlowFormContainer>
-        </div>
-      </div>
-    </div>
-  );
-}

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

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

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

@@ -3,7 +3,6 @@ import { notFound } from 'next/navigation';
 import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
@@ -14,7 +13,6 @@ import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DateField } from './date-field';
-import { EmailField } from './email-field';
 import { SigningForm } from './form';
 import { NameField } from './name-field';
 import { SigningProvider } from './provider';
@@ -44,12 +42,10 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
-  const user = await getServerComponentSession();
-
   const documentUrl = `data:application/pdf;base64,${document.document}`;
 
   return (
-    <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
+    <SigningProvider email={recipient.email} fullName={recipient.name}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
           {document.title}
@@ -88,9 +84,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
               .with(FieldType.DATE, () => (
                 <DateField key={field.id} field={field} recipient={recipient} />
               ))
-              .with(FieldType.EMAIL, () => (
-                <EmailField key={field.id} field={field} recipient={recipient} />
-              ))
               .otherwise(() => null),
           )}
         </ElementVisible>

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

@@ -28,9 +28,9 @@ export const useRequiredSigningContext = () => {
 };
 
 export interface SigningProviderProps {
-  fullName?: string | null;
-  email?: string | null;
-  signature?: string | null;
+  fullName?: string;
+  email?: string;
+  signature?: string;
   children: React.ReactNode;
 }
 

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

@@ -44,7 +44,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   } = useForm<TProfileFormSchema>({
     values: {
       name: user.name ?? '',
-      signature: user.signature || '',
+      signature: '',
     },
     resolver: zodResolver(ZProfileFormSchema),
   });
@@ -118,7 +118,6 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
             render={({ field: { onChange } }) => (
               <SignaturePad
                 className="h-44 w-full rounded-lg border bg-white backdrop-blur-sm dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
-                defaultValue={user.signature ?? undefined}
                 onChange={(v) => onChange(v ?? '')}
               />
             )}

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

@@ -1,9 +1,5 @@
 'use client';
 
-import { useEffect } from 'react';
-
-import { useSearchParams } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
@@ -11,20 +7,12 @@ import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
-import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-const ErrorMessages = {
-  [ErrorCode.CREDENTIALS_NOT_FOUND]: 'The email or password provided is incorrect',
-  [ErrorCode.INCORRECT_EMAIL_PASSWORD]: 'The email or password provided is incorrect',
-  [ErrorCode.USER_MISSING_PASSWORD]:
-    'This account appears to be using a social login method, please sign in using that method',
-};
-
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
   password: z.string().min(6).max(72),
@@ -38,7 +26,6 @@ export type SignInFormProps = {
 
 export const SignInForm = ({ className }: SignInFormProps) => {
   const { toast } = useToast();
-  const searchParams = useSearchParams();
 
   const {
     register,
@@ -52,27 +39,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
-  const errorCode = searchParams?.get('error');
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout | null = null;
-
-    if (isErrorCode(errorCode)) {
-      timeout = setTimeout(() => {
-        toast({
-          variant: 'destructive',
-          description: ErrorMessages[errorCode] ?? 'An unknown error occurred',
-        });
-      }, 0);
-    }
-
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [errorCode, toast]);
-
   const onFormSubmit = async ({ email, password }: TSignInFormSchema) => {
     try {
       await signIn('credentials', {

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

@@ -3,14 +3,13 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 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 { SignaturePad } from '@documenso/ui/primitives/signature-pad';
@@ -20,7 +19,6 @@ export const ZSignUpFormSchema = z.object({
   name: z.string().min(1),
   email: z.string().email().min(1),
   password: z.string().min(6).max(72),
-  signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
 });
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
@@ -33,7 +31,6 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
 
   const {
-    control,
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
@@ -42,16 +39,15 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
       name: '',
       email: '',
       password: '',
-      signature: '',
     },
     resolver: zodResolver(ZSignUpFormSchema),
   });
 
   const { mutateAsync: signup } = trpc.auth.signup.useMutation();
 
-  const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
+  const onFormSubmit = async ({ name, email, password }: TSignUpFormSchema) => {
     try {
-      await signup({ name, email, password, signature });
+      await signup({ name, email, password });
 
       await signIn('credentials', {
         email,
@@ -123,19 +119,8 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
         </Label>
 
         <div>
-          <Controller
-            control={control}
-            name="signature"
-            render={({ field: { onChange } }) => (
-              <SignaturePad
-                className="mt-2 h-36 w-full rounded-lg border bg-white dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
-                onChange={(v) => onChange(v ?? '')}
-              />
-            )}
-          />
+          <SignaturePad className="mt-2 h-36 w-full rounded-lg border bg-white dark:border-[#e2d7c5] dark:bg-[#fcf8ee]" />
         </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.signature} />
       </div>
 
       <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">

apps/web/src/components/forms/template/create-template.action.ts

@@ -1,25 +0,0 @@
-'use server';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
-import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
-import { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
-
-export type AddSignersActionInput = TAddSignersFormSchema & {
-  documentId: number;
-};
-
-export const addSigners = async ({ documentId, signers }: AddSignersActionInput) => {
-  'use server';
-
-  const { id: userId } = await getRequiredServerComponentSession();
-
-  await setRecipientsForDocument({
-    userId,
-    documentId,
-    recipients: signers.map((signer) => ({
-      id: signer.nativeId,
-      email: signer.email,
-      name: signer.name,
-    })),
-  });
-};

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

@@ -7,7 +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 { ErrorCode } from './error-codes';
+import { ErrorCodes } from './error-codes';
 
 export const NEXT_AUTH_OPTIONS: AuthOptions = {
   adapter: PrismaAdapter(prisma),
@@ -24,23 +24,23 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
       },
       authorize: async (credentials, _req) => {
         if (!credentials) {
-          throw new Error(ErrorCode.CREDENTIALS_NOT_FOUND);
+          throw new Error(ErrorCodes.CredentialsNotFound);
         }
 
         const { email, password } = credentials;
 
         const user = await getUserByEmail({ email }).catch(() => {
-          throw new Error(ErrorCode.INCORRECT_EMAIL_PASSWORD);
+          throw new Error(ErrorCodes.IncorrectEmailPassword);
         });
 
         if (!user.password) {
-          throw new Error(ErrorCode.USER_MISSING_PASSWORD);
+          throw new Error(ErrorCodes.UserMissingPassword);
         }
 
         const isPasswordsSame = await compare(password, user.password);
 
         if (!isPasswordsSame) {
-          throw new Error(ErrorCode.INCORRECT_EMAIL_PASSWORD);
+          throw new Error(ErrorCodes.IncorrectEmailPassword);
         }
 
         return {

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

@@ -1,11 +1,5 @@
-export const isErrorCode = (code: unknown): code is ErrorCode => {
-  return typeof code === 'string' && code in ErrorCode;
-};
-
-export type ErrorCode = (typeof ErrorCode)[keyof typeof ErrorCode];
-
-export const ErrorCode = {
-  INCORRECT_EMAIL_PASSWORD: 'INCORRECT_EMAIL_PASSWORD',
-  USER_MISSING_PASSWORD: 'USER_MISSING_PASSWORD',
-  CREDENTIALS_NOT_FOUND: 'CREDENTIALS_NOT_FOUND',
+export const ErrorCodes = {
+  IncorrectEmailPassword: 'incorrect-email-password',
+  UserMissingPassword: 'missing-password',
+  CredentialsNotFound: 'credentials-not-found',
 } as const;

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

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

packages/lib/server-only/document/seal-document.ts

@@ -53,6 +53,10 @@ export const sealDocument = async ({ documentId }: SealDocumentOptions) => {
   const doc = await PDFDocument.load(pdfData);
 
   for (const field of fields) {
+    console.log('inserting field', {
+      ...field,
+      Signature: null,
+    });
     await insertFieldInPDF(doc, field);
   }
 

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -35,6 +35,15 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
   const fieldX = pageWidth * (Number(field.positionX) / 100);
   const fieldY = pageHeight * (Number(field.positionY) / 100);
 
+  console.log({
+    fieldWidth,
+    fieldHeight,
+    fieldX,
+    fieldY,
+    pageWidth,
+    pageHeight,
+  });
+
   const font = await pdf.embedFont(isSignatureField ? fontCaveat : StandardFonts.Helvetica);
 
   if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
@@ -66,6 +75,15 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     // Invert the Y axis since PDFs use a bottom-left coordinate system
     imageY = pageHeight - imageY - imageHeight;
 
+    console.log({
+      initialDimensions,
+      scalingFactor,
+      imageWidth,
+      imageHeight,
+      imageX,
+      imageY,
+    });
+
     page.drawImage(image, {
       x: imageX,
       y: imageY,
@@ -89,6 +107,17 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     const textX = fieldX + (fieldWidth - textWidth) / 2;
     let textY = fieldY + (fieldHeight - textHeight) / 2;
 
+    console.log({
+      initialDimensions,
+      scalingFactor,
+      textWidth,
+      textHeight,
+      textX,
+      textY,
+      pageWidth,
+      pageHeight,
+    });
+
     // Invert the Y axis since PDFs use a bottom-left coordinate system
     textY = pageHeight - textY - textHeight;
 

packages/lib/server-only/template/create-template.ts

@@ -1,38 +0,0 @@
-'use server';
-
-import { nanoid } from 'nanoid';
-
-import { prisma } from '@documenso/prisma';
-import { DocumentContent } from '@documenso/prisma/client';
-
-type CreateTemplateInput = {
-  name: string;
-  description: string;
-  document: DocumentContent;
-  userId: number;
-};
-
-export const createTemplate = async ({
-  name,
-  description,
-  document,
-  userId,
-}: CreateTemplateInput) => {
-  const createTemplateDocument = await prisma.documentContent.create({
-    data: {
-      content: document.content,
-      name: document.name,
-    },
-  });
-
-  const createdTemplate = await prisma.template.create({
-    data: {
-      name,
-      slug: nanoid(10),
-      description,
-      ownerId: userId,
-      documentId: createTemplateDocument.id,
-    },
-  });
-  return createdTemplate;
-};

packages/lib/server-only/user/create-user.ts

@@ -9,10 +9,9 @@ export interface CreateUserOptions {
   name: string;
   email: string;
   password: string;
-  signature?: string | null;
 }
 
-export const createUser = async ({ name, email, password, signature }: CreateUserOptions) => {
+export const createUser = async ({ name, email, password }: CreateUserOptions) => {
   const hashedPassword = await hash(password, SALT_ROUNDS);
 
   const userExists = await prisma.user.findFirst({
@@ -30,7 +29,6 @@ export const createUser = async ({ name, email, password, signature }: CreateUse
       name,
       email: email.toLowerCase(),
       password: hashedPassword,
-      signature,
       identityProvider: IdentityProvider.DOCUMENSO,
     },
   });

packages/lib/server-only/user/update-profile.ts

@@ -6,7 +6,12 @@ export type UpdateProfileOptions = {
   signature: string;
 };
 
-export const updateProfile = async ({ userId, name, signature }: UpdateProfileOptions) => {
+export const updateProfile = async ({
+  userId,
+  name,
+  // TODO: Actually use signature
+  signature: _signature,
+}: UpdateProfileOptions) => {
   // Existence check
   await prisma.user.findFirstOrThrow({
     where: {
@@ -20,7 +25,7 @@ export const updateProfile = async ({ userId, name, signature }: UpdateProfileOp
     },
     data: {
       name,
-      signature,
+      // signature,
     },
   });
 

packages/prisma/migrations/20230901083000_add_user_signature_column/migration.sql

@@ -1,2 +0,0 @@
--- AlterTable
-ALTER TABLE "User" ADD COLUMN     "signature" TEXT;

packages/prisma/migrations/20230909113116_add_templates/migration.sql

@@ -1,34 +0,0 @@
--- CreateEnum
-CREATE TYPE "TemplateType" AS ENUM ('PRIVATE', 'PUBLIC');
-
--- CreateTable
-CREATE TABLE "Template" (
-    "id" SERIAL NOT NULL,
-    "name" TEXT NOT NULL,
-    "slug" TEXT NOT NULL,
-    "kind" "TemplateType" NOT NULL,
-    "ownerId" INTEGER NOT NULL,
-    "documentId" INTEGER NOT NULL,
-
-    CONSTRAINT "Template_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "DocumentContent" (
-    "id" SERIAL NOT NULL,
-    "content" TEXT NOT NULL,
-
-    CONSTRAINT "DocumentContent_pkey" PRIMARY KEY ("id")
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "Template_slug_key" ON "Template"("slug");
-
--- CreateIndex
-CREATE INDEX "Template_ownerId_idx" ON "Template"("ownerId");
-
--- AddForeignKey
-ALTER TABLE "Template" ADD CONSTRAINT "Template_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "Template" ADD CONSTRAINT "Template_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "DocumentContent"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20230909195606_single_player_mode/migration.sql

@@ -1,21 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the `DocumentContent` table. If the table is not empty, all the data it contains will be lost.
-  - You are about to drop the `Template` table. If the table is not empty, all the data it contains will be lost.
-
-*/
--- DropForeignKey
-ALTER TABLE "Template" DROP CONSTRAINT "Template_documentId_fkey";
-
--- DropForeignKey
-ALTER TABLE "Template" DROP CONSTRAINT "Template_ownerId_fkey";
-
--- DropTable
-DROP TABLE "DocumentContent";
-
--- DropTable
-DROP TABLE "Template";
-
--- DropEnum
-DROP TYPE "TemplateType";

packages/prisma/migrations/20230909195903_add_templates/migration.sql

@@ -1,34 +0,0 @@
--- CreateEnum
-CREATE TYPE "TemplateType" AS ENUM ('PRIVATE', 'PUBLIC');
-
--- CreateTable
-CREATE TABLE "Template" (
-    "id" SERIAL NOT NULL,
-    "name" TEXT NOT NULL,
-    "slug" TEXT NOT NULL,
-    "kind" "TemplateType" NOT NULL,
-    "ownerId" INTEGER NOT NULL,
-    "documentId" INTEGER NOT NULL,
-
-    CONSTRAINT "Template_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "DocumentContent" (
-    "id" SERIAL NOT NULL,
-    "content" TEXT NOT NULL,
-
-    CONSTRAINT "DocumentContent_pkey" PRIMARY KEY ("id")
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "Template_slug_key" ON "Template"("slug");
-
--- CreateIndex
-CREATE INDEX "Template_ownerId_idx" ON "Template"("ownerId");
-
--- AddForeignKey
-ALTER TABLE "Template" ADD CONSTRAINT "Template_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "Template" ADD CONSTRAINT "Template_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "DocumentContent"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20230910120846_template_private/migration.sql

@@ -1,2 +0,0 @@
--- AlterTable
-ALTER TABLE "Template" ALTER COLUMN "kind" SET DEFAULT 'PRIVATE';

packages/prisma/migrations/20230910120946_template_description/migration.sql

@@ -1,2 +0,0 @@
--- AlterTable
-ALTER TABLE "Template" ADD COLUMN     "description" TEXT;

packages/prisma/migrations/20230910121833_document_name/migration.sql

@@ -1,8 +0,0 @@
-/*
-  Warnings:
-
-  - Added the required column `name` to the `DocumentContent` table without a default value. This is not possible if the table is not empty.
-
-*/
--- AlterTable
-ALTER TABLE "DocumentContent" ADD COLUMN     "name" TEXT NOT NULL;

packages/prisma/schema.prisma

@@ -20,13 +20,11 @@ model User {
   emailVerified    DateTime?
   password         String?
   source           String?
-  signature        String?
   identityProvider IdentityProvider @default(DOCUMENSO)
   accounts         Account[]
   sessions         Session[]
   Document         Document[]
   Subscription     Subscription[]
-  Template         Template[]
 }
 
 enum SubscriptionStatus {
@@ -167,29 +165,3 @@ model Signature {
   Recipient Recipient @relation(fields: [recipientId], references: [id], onDelete: Cascade)
   Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Restrict)
 }
-
-enum TemplateType {
-  PRIVATE
-  PUBLIC
-}
-
-model Template {
-  id          Int             @id @default(autoincrement())
-  name        String
-  slug        String          @unique
-  description String?
-  kind        TemplateType    @default(PRIVATE)
-  ownerId     Int
-  owner       User            @relation(fields: [ownerId], references: [id], onDelete: Cascade)
-  documentId  Int
-  document    DocumentContent @relation(fields: [documentId], references: [id], onDelete: Cascade)
-
-  @@index([ownerId])
-}
-
-model DocumentContent {
-  id        Int        @id @default(autoincrement())
-  name      String
-  content   String
-  templates Template[]
-}

packages/tailwind-config/index.cjs

@@ -4,7 +4,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ['class'],
-  content: ['src/**/*.{ts,tsx}'],
+  content: ['src/**/*.{ts,tsx}', 'content/**/*.{md,mdx}'],
   theme: {
     extend: {
       fontFamily: {

packages/trpc/server/auth-router/router.ts

@@ -8,9 +8,9 @@ import { ZSignUpMutationSchema } from './schema';
 export const authRouter = router({
   signup: procedure.input(ZSignUpMutationSchema).mutation(async ({ input }) => {
     try {
-      const { name, email, password, signature } = input;
+      const { name, email, password } = input;
 
-      return await createUser({ name, email, password, signature });
+      return await createUser({ name, email, password });
     } catch (err) {
       console.error(err);
 

packages/trpc/server/auth-router/schema.ts

@@ -4,7 +4,6 @@ export const ZSignUpMutationSchema = z.object({
   name: z.string().min(1),
   email: z.string().email(),
   password: z.string().min(6),
-  signature: z.string().min(1, { message: 'A signature is required.' }),
 });
 
 export type TSignUpMutationSchema = z.infer<typeof ZSignUpMutationSchema>;

packages/ui/primitives/document-flow/add-template-details.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-
-import { Field } 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 { TAddTemplateSchema, ZAddTemplateSchema } from './add-template-details.types';
-import {
-  DocumentFlowFormContainerActions,
-  DocumentFlowFormContainerContent,
-  DocumentFlowFormContainerFooter,
-  DocumentFlowFormContainerStep,
-} from './document-flow-root';
-import { DocumentFlowStep } from './types';
-
-export type AddTemplateFormProps = {
-  documentFlow: DocumentFlowStep;
-  fields: Field[];
-  numberOfSteps: number;
-  onSubmit: (_data: TAddTemplateSchema) => void;
-};
-
-export const AddTemplateFormPartial = ({
-  documentFlow,
-  numberOfSteps,
-  fields: _fields,
-  onSubmit,
-}: AddTemplateFormProps) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddTemplateSchema>({
-    resolver: zodResolver(ZAddTemplateSchema),
-    defaultValues: {
-      template: {
-        name: '',
-        description: '',
-      },
-    },
-  });
-
-  const onFormSubmit = handleSubmit(onSubmit);
-
-  return (
-    <>
-      <DocumentFlowFormContainerContent>
-        <div className="flex flex-col">
-          <div className="flex flex-col gap-y-4">
-            <div>
-              <Label htmlFor="name">Name</Label>
-
-              <Input
-                id="name"
-                className="bg-background mt-2"
-                disabled={isSubmitting}
-                {...register('template.name')}
-              />
-
-              <FormErrorMessage className="mt-2" error={errors.template?.name} />
-            </div>
-
-            <div>
-              <Label htmlFor="description">
-                Description <span className="text-muted-foreground">(Optional)</span>
-              </Label>
-
-              <Input
-                id="description"
-                className="bg-background mt-2"
-                disabled={isSubmitting}
-                {...register('template.description')}
-              />
-
-              <FormErrorMessage className="mt-2" error={errors.template?.description} />
-            </div>
-          </div>
-        </div>
-      </DocumentFlowFormContainerContent>
-
-      <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep
-          title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
-        />
-
-        <DocumentFlowFormContainerActions
-          loading={isSubmitting}
-          disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
-          onGoNextClick={() => void onFormSubmit()}
-        />
-      </DocumentFlowFormContainerFooter>
-    </>
-  );
-};

packages/ui/primitives/document-flow/add-template-details.types.ts

@@ -1,10 +0,0 @@
-import { z } from 'zod';
-
-export const ZAddTemplateSchema = z.object({
-  template: z.object({
-    name: z.string(),
-    description: z.string(),
-  }),
-});
-
-export type TAddTemplateSchema = z.infer<typeof ZAddTemplateSchema>;

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

@@ -1,418 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { Caveat } from 'next/font/google';
-
-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 { Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import { TAddTemplateFieldsFormSchema } from './add-template-fields.types';
-import {
-  DocumentFlowFormContainerActions,
-  DocumentFlowFormContainerContent,
-  DocumentFlowFormContainerFooter,
-  DocumentFlowFormContainerStep,
-} from './document-flow-root';
-import { FieldItem } from './field-item';
-import { DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
-
-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
-const DEFAULT_HEIGHT_PERCENT = 5;
-const DEFAULT_WIDTH_PERCENT = 15;
-
-const MIN_HEIGHT_PX = 60;
-const MIN_WIDTH_PX = 200;
-
-export type AddTemplateFieldsFormProps = {
-  documentFlow: DocumentFlowStep;
-  recipients: Recipient[];
-  fields: Field[];
-  numberOfSteps: number;
-  onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
-};
-
-export const AddTemplateFieldsFormPartial = ({
-  documentFlow,
-  recipients,
-  fields,
-  numberOfSteps,
-  onSubmit,
-}: AddTemplateFieldsFormProps) => {
-  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
-
-  const {
-    control,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = useForm<TAddTemplateFieldsFormSchema>({
-    defaultValues: {
-      fields: fields.map((field) => ({
-        nativeId: field.id,
-        formId: `${field.id}-${field.documentId}`,
-        pageNumber: field.page,
-        type: field.type,
-        pageX: Number(field.positionX),
-        pageY: Number(field.positionY),
-        pageWidth: Number(field.width),
-        pageHeight: Number(field.height),
-        signerEmail:
-          recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
-      })),
-    },
-  });
-
-  const onFormSubmit = handleSubmit(onSubmit);
-
-  const {
-    append,
-    remove,
-    update,
-    fields: localFields,
-  } = useFieldArray({
-    control,
-    name: 'fields',
-  });
-
-  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
-  const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
-
-  const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
-
-  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
-  const [coords, setCoords] = useState({
-    x: 0,
-    y: 0,
-  });
-
-  const fieldBounds = useRef({
-    height: 0,
-    width: 0,
-  });
-
-  const onMouseMove = useCallback(
-    (event: MouseEvent) => {
-      setIsFieldWithinBounds(
-        isWithinPageBounds(
-          event,
-          PDF_VIEWER_PAGE_SELECTOR,
-          fieldBounds.current.width,
-          fieldBounds.current.height,
-        ),
-      );
-
-      setCoords({
-        x: event.clientX - fieldBounds.current.width / 2,
-        y: event.clientY - fieldBounds.current.height / 2,
-      });
-    },
-    [isWithinPageBounds],
-  );
-
-  const onMouseClick = useCallback(
-    (event: MouseEvent) => {
-      if (!selectedField || !selectedSigner) {
-        return;
-      }
-
-      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
-
-      if (
-        !$page ||
-        !isWithinPageBounds(
-          event,
-          PDF_VIEWER_PAGE_SELECTOR,
-          fieldBounds.current.width,
-          fieldBounds.current.height,
-        )
-      ) {
-        setSelectedField(null);
-        return;
-      }
-
-      const { top, left, height, width } = getBoundingClientRect($page);
-
-      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
-
-      // Calculate x and y as a percentage of the page width and height
-      let pageX = ((event.pageX - left) / width) * 100;
-      let pageY = ((event.pageY - top) / height) * 100;
-
-      // Get the bounds as a percentage of the page width and height
-      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
-      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
-
-      // And center it based on the bounds
-      pageX -= fieldPageWidth / 2;
-      pageY -= fieldPageHeight / 2;
-
-      append({
-        formId: nanoid(12),
-        type: selectedField,
-        pageNumber,
-        pageX,
-        pageY,
-        pageWidth: fieldPageWidth,
-        pageHeight: fieldPageHeight,
-        signerEmail: selectedSigner.email,
-      });
-
-      setIsFieldWithinBounds(false);
-      setSelectedField(null);
-    },
-    [append, isWithinPageBounds, selectedField, selectedSigner, getPage],
-  );
-
-  const onFieldResize = useCallback(
-    (node: HTMLElement, index: number) => {
-      const field = localFields[index];
-
-      const $page = window.document.querySelector<HTMLElement>(
-        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
-      );
-
-      if (!$page) {
-        return;
-      }
-
-      const {
-        x: pageX,
-        y: pageY,
-        width: pageWidth,
-        height: pageHeight,
-      } = getFieldPosition($page, node);
-
-      update(index, {
-        ...field,
-        pageX,
-        pageY,
-        pageWidth,
-        pageHeight,
-      });
-    },
-    [getFieldPosition, localFields, update],
-  );
-
-  const onFieldMove = useCallback(
-    (node: HTMLElement, index: number) => {
-      const field = localFields[index];
-
-      const $page = window.document.querySelector<HTMLElement>(
-        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
-      );
-
-      if (!$page) {
-        return;
-      }
-
-      const { x: pageX, y: pageY } = getFieldPosition($page, node);
-
-      update(index, {
-        ...field,
-        pageX,
-        pageY,
-      });
-    },
-    [getFieldPosition, localFields, update],
-  );
-
-  useEffect(() => {
-    if (selectedField) {
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('click', onMouseClick);
-    }
-
-    return () => {
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('click', onMouseClick);
-    };
-  }, [onMouseClick, onMouseMove, selectedField]);
-
-  useEffect(() => {
-    const $page = window.document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
-
-    if (!$page) {
-      return;
-    }
-
-    const { height, width } = $page.getBoundingClientRect();
-
-    fieldBounds.current = {
-      height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
-      width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
-    };
-  }, []);
-
-  useEffect(() => {
-    setSelectedSigner(recipients.find((r) => r.sendStatus !== SendStatus.SENT) ?? recipients[0]);
-  }, [recipients]);
-
-  return (
-    <>
-      <DocumentFlowFormContainerContent>
-        <div className="flex flex-col">
-          {selectedField && (
-            <Card
-              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,
-                height: fieldBounds.current.height,
-                width: fieldBounds.current.width,
-              }}
-            >
-              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
-                {FRIENDLY_FIELD_TYPE[selectedField]}
-              </CardContent>
-            </Card>
-          )}
-
-          {localFields.map((field, index) => (
-            <FieldItem
-              key={index}
-              field={field}
-              disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
-              minHeight={fieldBounds.current.height}
-              minWidth={fieldBounds.current.width}
-              passive={isFieldWithinBounds && !!selectedField}
-              onResize={(options) => onFieldResize(options, index)}
-              onMove={(options) => onFieldMove(options, index)}
-              onRemove={() => remove(index)}
-            />
-          ))}
-
-          <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={(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">
-                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                    <p
-                      className={cn(
-                        'text-muted-foreground group-data-[selected]:text-foreground text-3xl font-medium',
-                        fontCaveat.className,
-                      )}
-                    >
-                      {selectedSigner?.name || 'Signature'}
-                    </p>
-
-                    <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
-                  </CardContent>
-                </Card>
-              </button>
-
-              <button
-                type="button"
-                className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                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">
-                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                    <p
-                      className={cn(
-                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
-                      )}
-                    >
-                      {'Email'}
-                    </p>
-
-                    <p className="text-muted-foreground mt-2 text-xs">Email</p>
-                  </CardContent>
-                </Card>
-              </button>
-
-              <button
-                type="button"
-                className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                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">
-                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                    <p
-                      className={cn(
-                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
-                      )}
-                    >
-                      {'Name'}
-                    </p>
-
-                    <p className="text-muted-foreground mt-2 text-xs">Name</p>
-                  </CardContent>
-                </Card>
-              </button>
-
-              <button
-                type="button"
-                className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
-                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">
-                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                    <p
-                      className={cn(
-                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
-                      )}
-                    >
-                      {'Date'}
-                    </p>
-
-                    <p className="text-muted-foreground mt-2 text-xs">Date</p>
-                  </CardContent>
-                </Card>
-              </button>
-            </div>
-          </div>
-        </div>
-      </DocumentFlowFormContainerContent>
-
-      <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep
-          title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
-        />
-
-        <DocumentFlowFormContainerActions
-          loading={isSubmitting}
-          disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
-          onGoNextClick={() => void onFormSubmit()}
-        />
-      </DocumentFlowFormContainerFooter>
-    </>
-  );
-};

packages/ui/primitives/document-flow/add-template-fields.types.ts

@@ -1,21 +0,0 @@
-import { z } from 'zod';
-
-import { FieldType } from '@documenso/prisma/client';
-
-export const ZAddTemplateFieldsFormSchema = z.object({
-  fields: z.array(
-    z.object({
-      formId: z.string().min(1),
-      nativeId: z.number().optional(),
-      type: z.nativeEnum(FieldType),
-      signerEmail: z.string().min(1),
-      pageNumber: z.number().min(1),
-      pageX: z.number().min(0),
-      pageY: z.number().min(0),
-      pageWidth: z.number().min(0),
-      pageHeight: z.number().min(0),
-    }),
-  ),
-});
-
-export type TAddTemplateFieldsFormSchema = z.infer<typeof ZAddTemplateFieldsFormSchema>;

templates

@@ -1,10 +0,0 @@
-Plan
-
-Take the document
-Take the details of the template
-Take the fields
----??? Store it in the database with a templates schema
-
-Issues?
-
-Persist template details information.