chore: [INCOMPLETE] checkbox ui for all fields

skill issue
probably

README.md

@@ -82,7 +82,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 - [NextAuth.js](https://next-auth.js.org/) - Authentication
 - [react-email](https://react.email/) - Email Templates
 - [tRPC](https://trpc.io/) - API
-- [Node SignPDF](https://github.com/vbuch/node-signpdf) - Digital Signature
+- [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
 - [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
 - [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
 - [Stripe](https://stripe.com/) - Payments

apps/marketing/content/blog/building-documenso-pt1.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Building Documenso — Part 1: Certificates'
-description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+description: Let's take a look why you need a signing certificate and how Documenso does it.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'

apps/marketing/content/blog/building-documenso-pt2.mdx

@@ -0,0 +1,117 @@
+---
+title: 'Building Documenso — Part 2: Signature Validity'
+description: Is a signature valid? And what does that mean? It's a surprisingly complex question; let's take a look.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-04-05
+tags:
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/eu-validate-1.png"
+    width= "650"
+    height= "650"
+    alt= "A report card for signature validity."
+  />
+
+  <figcaption className="text-center">
+    If a tree does not comply with the EU trust list, does it make a sound when validating?r
+  </figcaption>
+</figure>
+
+> TLDR; Signatures can be valid and compliant for different signature levels, even if some validators show higher-level errors. Not all helpful security measures are mandated by law.
+
+# A valid question
+
+A few days ago, an early adopter brought up this question in our [Discord](https://documen.so/discord):
+
+<figure>
+  <MdxNextImage
+    src="/blog/eu-validate-2.png"
+    width= "650"
+    height= "650"
+    alt= "A report card for signature validity."
+  />
+
+  <figcaption className="text-center">
+    You can check out the validator here: [https://documen.so/eu-validator](https://documen.so/eu-validator)
+  </figcaption>
+</figure>
+
+For those unfamiliar with the tool, he used the validator tool of the EU's Digital Signature Service (DSS) Framework to check the signature of a document signed with Documenso. The EU provides this tool to help users and providers check the validity level of their signatures.
+
+A short refresher from [Building Documenso — Part 1: Certificates](https://documen.so/certs):
+
+> Documenso inserts all visual signatures into the document and then seals it using the "Documenso Inc." corporate certificate. This makes the resulting PDF document tamper-proof and guarantees it hasn't changed since signing.
+
+Before we answer if the document was signed correctly, we need to understand what the goal was.
+
+There are three signature levels in the European eIDAS regulation:
+
+1. **Simple Electronic Signatures (Level 1/ SES):** This is just a visual signature or even a checkbox on a document.
+
+2. **Advanded Electronic Signatures (Level 2/ AES)**: An actual crypographic signature (not just a seal on the whole document, but a specific signature), using a certificate linked to the identification data of the signer.
+
+3. **Qualified Electronic Signatures (Level 3/ QES):** Same as 2. but done by a government-certified entity on certified hardware and after identifying the signer with an official ID document (e.g., passport)
+
+> 💡 Side Note: Number 2 (AES) is how most people imagine digital signatures. But most of the market uses 1. plus a seal on the whole document under the name of the signing provider (e.g., Documenso). The signer's data is only inserted visually, not in the actual signature. Why? One of the reasons is that it's much easier, and without a readily available open source framework to draw from, it is quite tricky to build. This is something we aim to build (which many have done) and open source (which no one has done).
+
+From the perspective of eIDAS, Documenso offers Level 1/ SES signatures since it does not adhere to all of the requirements of Level 2/ AES. This means that, technically, there is no legal need to seal the document to achieve this level of validity (at least within eIDAS). We do it anyway since it improves the level of confidence users can have in the signed document. Sealing the document, even though not legally required, is a great example of Documenso's approach to signatures. First, we aim to provide all legal requirements for a given use case. Then, we add any protection that can be added without unwarranted friction to the creation of the signature.
+
+## Not if valid, but how valid
+
+**Q: So, is the signature in the image valid?**
+
+A: Yes, as an eidas Level 1 SES.
+
+**Q: Then why does it say "Unable to build a certificate chain up to a trusted list"**
+
+A: The certificate we use to seal the document after inserting the signatures is not on the EU Trust list.
+
+**Q: Does that mean it is less secure?**
+
+A: No, it means the provider (Wisekey) is not on a list maintained by the EU. The cryptographic signature is just as strong as any other
+
+For someone who does not deal with this stuff daily, this can be hard to comprehend. Whether you use a certificate you generated yourself, one generated by a certificate authority (CA) like Wisekey, or one by another on the EU trust list (e.g., Bundesdruckerei), the cryptographic security guaranteeing that the document has not been tampered with is always the same. Many providers like Documenso, DocuSign, PandaDoc, and Digisigner all use this method for their regular plans. That means if you were to run a document signed by them through the validator above, the result would be the same[1]. The interesting question is why? Why do it like this?
+
+## Certificate Infrastructure is broken
+
+While there are some actual expenses involved in providing AES and QES, the blunt reality is that it's just good business to charge for them per signature, making it unsuitable for the "standard offerings"; almost no one has the resources to set this up themselves. While this initial process of becoming a QES-certified entity is really expensive, selling the certificates afterward is very lucrative. This leads to less innovation in the space and only big players providing these high-compliance services. Even certificates only used to seal documents without being QES certified are sold for a large range of prices, and they cost almost nothing to produce.
+
+## Why Though?
+
+**Q: Why do people buy a certificate for money and not just generate one themselves? Isn't the cryptographic security the same?**
+
+A: Self-generated certificates are not recognized for higher-level compliance signatures like QES
+
+**Q: So if you don't need higher-level signatures, you could just generate one yourself?**
+
+A: Yes, you could. Since eIDAS Level 1 does not require a cert, you could use your own.
+
+**Q: Why don't more people?**
+
+A: One reason is that apart from the EU trust list, there are others, like the Adobe trust list. While not legally required, being on that one (like Wisekey) gives you a green checkmark in Adobe PDF, which is how most people check signature validity.
+
+**Q: Not a question, but all of this sounds weird**
+
+A: It is. This is one of the reasons why Documenso exists. We plan to make this easier.
+
+**Q: How?**
+
+A: By explaining and providing easy-to-use tools and eventually free, highly compliant signature certificates for everyone.
+
+Eventually, we plan to start a free certificate authority called Let's Sign, named after another instituion that broke the paid certificate paradigm to the benefit of the internet: [Let's Encrypt](https://letsencrypt.org/).
+
+As always, feel free to connect on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments.
+
+Best from Hamburg\
+Timur
+\
+\
+\
+[1] The signature format (e.g. PKCS7-B) will vary. It's the format what the signature inserted into the document looks like. eIDAS itself does not specifically require any given format, but the PAdES defined by the EU is mostly used by european providers.

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

@@ -100,7 +100,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
       </div>
 
       <EditDocumentForm
-        className="mt-8"
+        className="mt-6"
         initialDocument={document}
         documentRootPath={documentRootPath}
         isDocumentEnterprise={isDocumentEnterprise}

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

@@ -2,6 +2,8 @@ import Link from 'next/link';
 
 import { ChevronLeft, Loader } from 'lucide-react';
 
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+
 export default function Loading() {
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
@@ -13,7 +15,12 @@ export default function Loading() {
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
-      <div className="mt-8 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
+
+      <div className="flex h-10 items-center">
+        <Skeleton className="my-6 h-4 w-24 rounded-2xl" />
+      </div>
+
+      <div className="mt-4 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 h-[80vh] max-h-[60rem] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />

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

@@ -2,16 +2,21 @@ import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { ChevronLeft, DownloadIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Recipient, Team } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card } from '@documenso/ui/primitives/card';
 
-import { FRIENDLY_STATUS_MAP } from '~/components/formatter/document-status';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/formatter/document-status';
 
 import { DocumentLogsDataTable } from './document-logs-data-table';
 
@@ -23,6 +28,8 @@ export type DocumentLogsPageViewProps = {
 };
 
 export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
+  const locale = getLocale();
+
   const { id } = params;
 
   const documentId = Number(id);
@@ -67,15 +74,21 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     },
     {
       description: 'Created by',
-      value: document.User.name ?? document.User.email,
+      value: document.User.name
+        ? `${document.User.name} (${document.User.email})`
+        : document.User.email,
     },
     {
       description: 'Date created',
-      value: document.createdAt.toISOString(),
+      value: DateTime.fromJSDate(document.createdAt)
+        .setLocale(locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
       description: 'Last updated',
-      value: document.updatedAt.toISOString(),
+      value: DateTime.fromJSDate(document.updatedAt)
+        .setLocale(locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
       description: 'Time zone',
@@ -90,7 +103,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
       text = `${recipient.name} (${recipient.email})`;
     }
 
-    return `${text} - ${recipient.role}`;
+    return `[${recipient.role}] ${text}`;
   };
 
   return (
@@ -104,9 +117,19 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
       </Link>
 
       <div className="flex flex-col justify-between sm:flex-row">
-        <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {document.title}
-        </h1>
+        <div>
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+            {document.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
+          </div>
+        </div>
 
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
           <Button variant="outline" className="mr-2 w-full sm:w-auto">

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

@@ -0,0 +1,133 @@
+'use client';
+
+import { useCallback, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { Form, FormControl, FormField } from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SigningFieldContainer } from './signing-field-container';
+
+export type CheckboxFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+const CheckBoxSchema = z.object({
+  check: z.boolean().default(false).optional(),
+});
+
+export const CheckboxField = ({ field, recipient }: CheckboxFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  // const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const form = useForm<z.infer<typeof CheckBoxSchema>>({
+    resolver: zodResolver(CheckBoxSchema),
+    defaultValues: {
+      check: false,
+    },
+  });
+
+  const onSign = useCallback(
+    async (authOptions?: TRecipientActionAuth) => {
+      try {
+        await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value: 'checked',
+          isBase64: true,
+          authOptions,
+        });
+
+        startTransition(() => router.refresh());
+      } catch (err) {
+        const error = AppError.parseError(err);
+
+        if (error.code === AppErrorCode.UNAUTHORIZED) {
+          throw error;
+        }
+
+        toast({
+          title: 'Error',
+          description: 'An error occurred while signing the document.',
+          variant: 'destructive',
+        });
+      }
+    },
+    [field.id, recipient.token, router, signFieldWithToken, toast],
+  );
+
+  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 text.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Checkbox"
+      raw={true}
+    >
+      <Form {...form}>
+        <form>
+          <FormField
+            control={form.control}
+            name="check"
+            render={({ field }) => (
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  className="h-8 w-8"
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            )}
+          />
+        </form>
+      </Form>
+    </SigningFieldContainer>
+  );
+};

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

@@ -35,8 +35,10 @@ export type SignatureFieldProps = {
    */
   onSign?: (documentAuthValue?: TRecipientActionAuth) => Promise<void> | void;
   onRemove?: () => Promise<void> | void;
-  type?: 'Date' | 'Email' | 'Name' | 'Signature';
+  type?: 'Date' | 'Email' | 'Name' | 'Signature' | 'Checkbox';
   tooltipText?: string | null;
+
+  raw?: boolean;
 };
 
 export const SigningFieldContainer = ({
@@ -48,6 +50,7 @@ export const SigningFieldContainer = ({
   children,
   type,
   tooltipText,
+  raw = false,
 }: SignatureFieldProps) => {
   const { executeActionAuthProcedure, isAuthRedirectRequired } = useRequiredDocumentAuthContext();
 
@@ -103,8 +106,8 @@ export const SigningFieldContainer = ({
   };
 
   return (
-    <FieldRootContainer field={field}>
-      {!field.inserted && !loading && (
+    <FieldRootContainer raw={raw} field={field}>
+      {!field.inserted && !loading && !raw && (
         <button
           type="submit"
           className="absolute inset-0 z-10 h-full w-full"

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

@@ -12,6 +12,7 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { truncateTitle } from '~/helpers/truncate-title';
 
+import { CheckboxField } from './checkbox-field';
 import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
@@ -94,6 +95,9 @@ export const SigningPageView = ({ document, recipient, fields }: SigningPageView
             .with(FieldType.TEXT, () => (
               <TextField key={field.id} field={field} recipient={recipient} />
             ))
+            .with(FieldType.CHECKBOX, () => (
+              <CheckboxField key={field.id} field={field} recipient={recipient} />
+            ))
             .otherwise(() => null),
         )}
       </ElementVisible>

packages/api/v1/implementation.ts

@@ -13,6 +13,7 @@ import { createField } from '@documenso/lib/server-only/field/create-field';
 import { deleteField } from '@documenso/lib/server-only/field/delete-field';
 import { getFieldById } from '@documenso/lib/server-only/field/get-field-by-id';
 import { updateField } from '@documenso/lib/server-only/field/update-field';
+import { insertFormValuesInPdf } from '@documenso/lib/server-only/pdf/insert-form-values-in-pdf';
 import { deleteRecipient } from '@documenso/lib/server-only/recipient/delete-recipient';
 import { getRecipientById } from '@documenso/lib/server-only/recipient/get-recipient-by-id';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
@@ -20,6 +21,8 @@ import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/s
 import { updateRecipient } from '@documenso/lib/server-only/recipient/update-recipient';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
 import { DocumentDataType, DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
@@ -156,6 +159,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         title: body.title,
         userId: user.id,
         teamId: team?.id,
+        formValues: body.formValues,
         documentDataId: documentData.id,
         requestMetadata: extractNextApiRequestMetadata(args.req),
       });
@@ -217,12 +221,37 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       recipients: body.recipients,
     });
 
+    let documentDataId = document.documentDataId;
+
+    if (body.formValues) {
+      const pdf = await getFile(document.documentData);
+
+      const prefilled = await insertFormValuesInPdf({
+        pdf: Buffer.from(pdf),
+        formValues: body.formValues,
+      });
+
+      const newDocumentData = await putFile({
+        name: fileName,
+        type: 'application/pdf',
+        arrayBuffer: async () => Promise.resolve(prefilled),
+      });
+
+      documentDataId = newDocumentData.id;
+    }
+
     await updateDocument({
       documentId: document.id,
       userId: user.id,
       teamId: team?.id,
       data: {
         title: fileName,
+        formValues: body.formValues,
+        documentData: {
+          connect: {
+            id: documentDataId,
+          },
+        },
       },
     });
 

packages/api/v1/schema.ts

@@ -73,6 +73,7 @@ export const ZCreateDocumentMutationSchema = z.object({
       redirectUrl: z.string(),
     })
     .partial(),
+  formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
 });
 
 export type TCreateDocumentMutationSchema = z.infer<typeof ZCreateDocumentMutationSchema>;
@@ -112,6 +113,7 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
     })
     .partial()
     .optional(),
+  formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
 });
 
 export type TCreateDocumentFromTemplateMutationSchema = z.infer<

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

@@ -14,6 +14,7 @@ export type CreateDocumentOptions = {
   userId: number;
   teamId?: number;
   documentDataId: string;
+  formValues?: Record<string, string | number | boolean>;
   requestMetadata?: RequestMetadata;
 };
 
@@ -22,6 +23,7 @@ export const createDocument = async ({
   title,
   documentDataId,
   teamId,
+  formValues,
   requestMetadata,
 }: CreateDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
@@ -51,6 +53,7 @@ export const createDocument = async ({
         documentDataId,
         userId,
         teamId,
+        formValues,
       },
     });
 

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

@@ -153,9 +153,19 @@ export const sealDocument = async ({
     await sendCompletedEmail({ documentId, requestMetadata });
   }
 
+  const updatedDocument = await prisma.document.findFirstOrThrow({
+    where: {
+      id: document.id,
+    },
+    include: {
+      documentData: true,
+      Recipient: true,
+    },
+  });
+
   await triggerWebhook({
     event: WebhookTriggerEvents.DOCUMENT_COMPLETED,
-    data: document,
+    data: updatedDocument,
     userId: document.userId,
     teamId: document.teamId ?? undefined,
   });

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

@@ -17,6 +17,9 @@ import {
   RECIPIENT_ROLES_DESCRIPTION,
   RECIPIENT_ROLE_TO_EMAIL_TYPE,
 } from '../../constants/recipient-roles';
+import { getFile } from '../../universal/upload/get-file';
+import { putFile } from '../../universal/upload/put-file';
+import { insertFormValuesInPdf } from '../pdf/insert-form-values-in-pdf';
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
 export type SendDocumentOptions = {
@@ -65,6 +68,7 @@ export const sendDocument = async ({
     include: {
       Recipient: true,
       documentMeta: true,
+      documentData: true,
     },
   });
 
@@ -82,6 +86,38 @@ export const sendDocument = async ({
     throw new Error('Can not send completed document');
   }
 
+  const { documentData } = document;
+
+  if (!documentData.data) {
+    throw new Error('Document data not found');
+  }
+
+  if (document.formValues) {
+    const file = await getFile(documentData);
+
+    const prefilled = await insertFormValuesInPdf({
+      pdf: Buffer.from(file),
+      formValues: document.formValues as Record<string, string | number | boolean>,
+    });
+
+    const newDocumentData = await putFile({
+      name: document.title,
+      type: 'application/pdf',
+      arrayBuffer: async () => Promise.resolve(prefilled),
+    });
+
+    const result = await prisma.document.update({
+      where: {
+        id: document.id,
+      },
+      data: {
+        documentDataId: newDocumentData.id,
+      },
+    });
+
+    Object.assign(document, result);
+  }
+
   await Promise.all(
     document.Recipient.map(async (recipient) => {
       if (recipient.sendStatus === SendStatus.SENT || recipient.role === RecipientRole.CC) {

packages/lib/server-only/field/sign-field-with-token.ts

@@ -188,10 +188,17 @@ export const signFieldWithToken = async ({
               type,
               data: signatureImageAsBase64 || typedSignature || '',
             }))
-            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, FieldType.TEXT, (type) => ({
-              type,
-              data: updatedField.customText,
-            }))
+            .with(
+              FieldType.DATE,
+              FieldType.EMAIL,
+              FieldType.NAME,
+              FieldType.TEXT,
+              FieldType.CHECKBOX,
+              (type) => ({
+                type,
+                data: updatedField.customText,
+              }),
+            )
             .exhaustive(),
           fieldSecurity: derivedRecipientActionAuth
             ? {

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

@@ -1,6 +1,7 @@
 // https://github.com/Hopding/pdf-lib/issues/20#issuecomment-412852821
 import fontkit from '@pdf-lib/fontkit';
-import { PDFDocument, StandardFonts } from 'pdf-lib';
+import type { PDFDocument } from 'pdf-lib';
+import { StandardFonts } from 'pdf-lib';
 
 import {
   DEFAULT_HANDWRITING_FONT_SIZE,
@@ -18,6 +19,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
   );
 
   const isSignatureField = isSignatureFieldType(field.type);
+  const isCheckboxField = field.type === FieldType.CHECKBOX;
 
   pdf.registerFontkit(fontkit);
 
@@ -73,6 +75,28 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
       width: imageWidth,
       height: imageHeight,
     });
+  } else if (isCheckboxField) {
+    const form = pdf.getForm();
+    const checkBox = form.createCheckBox(`checkBox.field.${field.id}`);
+
+    const textX = fieldX + fieldWidth / 2;
+    let textY = fieldY + fieldHeight / 2;
+
+    textY = pageHeight - textY;
+
+    checkBox.addToPage(page, {
+      x: textX,
+      y: textY,
+      width: 16,
+      height: 16,
+      borderWidth: 1,
+    });
+
+    if (field.customText === '✓') {
+      checkBox.check();
+    }
+
+    form.getField(`checkBox.field.${field.id}`).enableReadOnly();
   } else {
     const longestLineInTextForWidth = field.customText
       .split('\n')
@@ -102,14 +126,3 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
 
   return pdf;
 };
-
-export const insertFieldInPDFBytes = async (
-  pdf: ArrayBuffer | Uint8Array | string,
-  field: FieldWithSignature,
-) => {
-  const pdfDoc = await PDFDocument.load(pdf);
-
-  await insertFieldInPDF(pdfDoc, field);
-
-  return await pdfDoc.save();
-};

packages/lib/server-only/pdf/insert-form-values-in-pdf.ts

@@ -0,0 +1,54 @@
+import { PDFCheckBox, PDFDocument, PDFDropdown, PDFRadioGroup, PDFTextField } from 'pdf-lib';
+
+export type InsertFormValuesInPdfOptions = {
+  pdf: Buffer;
+  formValues: Record<string, string | boolean | number>;
+};
+
+export const insertFormValuesInPdf = async ({ pdf, formValues }: InsertFormValuesInPdfOptions) => {
+  const doc = await PDFDocument.load(pdf);
+
+  const form = doc.getForm();
+
+  if (!form) {
+    return pdf;
+  }
+
+  for (const [key, value] of Object.entries(formValues)) {
+    try {
+      const field = form.getField(key);
+
+      if (!field) {
+        continue;
+      }
+
+      if (typeof value === 'boolean' && field instanceof PDFCheckBox) {
+        if (value) {
+          field.check();
+        } else {
+          field.uncheck();
+        }
+      }
+
+      if (field instanceof PDFTextField) {
+        field.setText(value.toString());
+      }
+
+      if (field instanceof PDFDropdown) {
+        field.select(value.toString());
+      }
+
+      if (field instanceof PDFRadioGroup) {
+        field.select(value.toString());
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        console.error(`Error setting value for field ${key}: ${err.message}`);
+      } else {
+        console.error(`Error setting value for field ${key}`);
+      }
+    }
+  }
+
+  return await doc.save().then((buf) => Buffer.from(buf));
+};

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

@@ -79,6 +79,7 @@ export const createDocumentFromTemplate = async ({
           id: 'asc',
         },
       },
+      documentData: true,
     },
   });
 

packages/lib/types/document-audit-logs.ts

@@ -231,16 +231,38 @@ export const ZDocumentAuditLogEventDocumentFieldInsertedSchema = z.object({
         type: z.literal(FieldType.TEXT),
         data: z.string(),
       }),
+      z.object({
+        type: z.literal(FieldType.CHECKBOX),
+        data: z.string(),
+      }),
       z.object({
         type: z.union([z.literal(FieldType.SIGNATURE), z.literal(FieldType.FREE_SIGNATURE)]),
         data: z.string(),
       }),
     ]),
-    fieldSecurity: z
-      .object({
-        type: ZRecipientActionAuthTypesSchema,
-      })
-      .optional(),
+    fieldSecurity: z.preprocess(
+      (input) => {
+        const legacyNoneSecurityType = JSON.stringify({
+          type: 'NONE',
+        });
+
+        // Replace legacy 'NONE' field security type with undefined.
+        if (
+          typeof input === 'object' &&
+          input !== null &&
+          JSON.stringify(input) === legacyNoneSecurityType
+        ) {
+          return undefined;
+        }
+
+        return input;
+      },
+      z
+        .object({
+          type: ZRecipientActionAuthTypesSchema,
+        })
+        .optional(),
+    ),
   }),
 });
 

packages/prisma/migrations/20240408083413_add_form_values_column/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "formValues" JSONB;

packages/prisma/migrations/20240409193420_checkbox_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FieldType" ADD VALUE 'CHECKBOX';

packages/prisma/schema.prisma

@@ -257,6 +257,7 @@ model Document {
   userId         Int
   User           User                @relation(fields: [userId], references: [id], onDelete: Cascade)
   authOptions    Json?
+  formValues     Json?
   title          String
   status         DocumentStatus      @default(DRAFT)
   Recipient      Recipient[]
@@ -378,6 +379,7 @@ enum FieldType {
   EMAIL
   DATE
   TEXT
+  CHECKBOX
 }
 
 model Field {

packages/trpc/server/singleplayer-router/helper.ts

@@ -23,6 +23,7 @@ export const mapField = (
     .with(FieldType.EMAIL, () => signer.email)
     .with(FieldType.NAME, () => signer.name)
     .with(FieldType.TEXT, () => signer.customText)
+    .with(FieldType.CHECKBOX, () => signer.customText)
     .otherwise(() => '');
 
   return {

packages/ui/components/field/field.tsx

@@ -18,6 +18,7 @@ export type FieldRootContainerProps = {
 export type FieldContainerPortalProps = {
   field: Field;
   className?: string;
+  raw?: boolean;
   children: React.ReactNode;
 };
 
@@ -44,7 +45,7 @@ export function FieldContainerPortal({
   );
 }
 
-export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children, raw = false }: FieldContainerPortalProps) {
   const [isValidating, setIsValidating] = useState(false);
 
   const ref = React.useRef<HTMLDivElement>(null);
@@ -71,21 +72,36 @@ export function FieldRootContainer({ field, children }: FieldContainerPortalProp
 
   return (
     <FieldContainerPortal field={field}>
-      <Card
-        id={`field-${field.id}`}
-        className={cn(
-          'field-card-container bg-background relative z-20 h-full w-full transition-all',
-          {
+      {!raw && (
+        <Card
+          id={`field-${field.id}`}
+          className={cn(
+            'field-card-container bg-background relative z-20 h-full w-full transition-all',
+            {
+              'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
+            },
+          )}
+          ref={ref}
+          data-inserted={field.inserted ? 'true' : 'false'}
+        >
+          <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
+            {children}
+          </CardContent>
+        </Card>
+      )}
+
+      {raw && (
+        <div
+          id={`field-${field.id}`}
+          className={cn('field-card-container bg-background relative z-20 transition-all', {
             'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
-          },
-        )}
-        ref={ref}
-        data-inserted={field.inserted ? 'true' : 'false'}
-      >
-        <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
+          })}
+          ref={ref}
+          data-inserted={field.inserted ? 'true' : 'false'}
+        >
           {children}
-        </CardContent>
-      </Card>
+        </div>
+      )}
     </FieldContainerPortal>
   );
 }

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

@@ -19,6 +19,7 @@ import { FieldType, SendStatus } from '@documenso/prisma/client';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useStep } from '../stepper';
@@ -135,11 +136,17 @@ export const AddFieldsFormPartial = ({
       );
 
       setCoords({
-        x: event.clientX - fieldBounds.current.width / 2,
-        y: event.clientY - fieldBounds.current.height / 2,
+        x:
+          selectedField === FieldType.CHECKBOX
+            ? event.clientX - 16
+            : event.clientX - fieldBounds.current.width / 2,
+        y:
+          selectedField === FieldType.CHECKBOX
+            ? event.clientY - 16
+            : event.clientY - fieldBounds.current.height / 2,
       });
     },
-    [isWithinPageBounds],
+    [isWithinPageBounds, selectedField],
   );
 
   const onMouseClick = useCallback(
@@ -149,6 +156,7 @@ export const AddFieldsFormPartial = ({
       }
 
       const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+      const isCheckboxField = selectedField === FieldType.CHECKBOX;
 
       if (
         !$page ||
@@ -172,8 +180,8 @@ export const AddFieldsFormPartial = ({
       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;
+      const fieldPageWidth = ((isCheckboxField ? 32 : fieldBounds.current.width) / width) * 100;
+      const fieldPageHeight = ((isCheckboxField ? 32 : fieldBounds.current.height) / height) * 100;
 
       // And center it based on the bounds
       pageX -= fieldPageWidth / 2;
@@ -322,7 +330,8 @@ export const AddFieldsFormPartial = ({
 
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {selectedField && (
+          {/* When it is not a checkbox field */}
+          {selectedField && selectedField !== FieldType.CHECKBOX && (
             <Card
               className={cn(
                 'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
@@ -344,6 +353,27 @@ export const AddFieldsFormPartial = ({
             </Card>
           )}
 
+          {/* Checkbox Field */}
+          {selectedField && selectedField === FieldType.CHECKBOX && (
+            <div
+              className="pointer-events-none fixed z-50"
+              style={{
+                top: coords.y,
+                left: coords.x,
+                height: 6 * 4,
+                width: 6 * 4,
+              }}
+            >
+              <Checkbox
+                className={cn(
+                  'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
+                  'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
+                  'border-field-card-border',
+                )}
+              />
+            </div>
+          )}
+
           {isDocumentPdfLoaded &&
             localFields.map((field, index) => (
               <FieldItem
@@ -577,6 +607,28 @@ export const AddFieldsFormPartial = ({
                   </CardContent>
                 </Card>
               </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                onClick={() => setSelectedField(FieldType.CHECKBOX)}
+                onMouseDown={() => setSelectedField(FieldType.CHECKBOX)}
+                data-selected={selectedField === FieldType.CHECKBOX ? 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',
+                      )}
+                    >
+                      {'Checkbox'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Checkbox</p>
+                  </CardContent>
+                </Card>
+              </button>
             </fieldset>
           </div>
         </div>

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

@@ -147,6 +147,11 @@ export const AddSignatureFormPartial = ({
       return !form.formState.errors.customText;
     }
 
+    if (fieldType === FieldType.CHECKBOX) {
+      await form.trigger('customText');
+      return !form.formState.errors.customText;
+    }
+
     return true;
   };
 

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

@@ -10,8 +10,10 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 
 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import type { TDocumentFlowFormSchema } from './types';
 import { FRIENDLY_FIELD_TYPE } from './types';
+import { FieldType } from '.prisma/client';
 
 type Field = TDocumentFlowFormSchema['fields'][0];
 
@@ -44,6 +46,8 @@ export const FieldItem = ({
     pageWidth: 0,
   });
 
+  const isCheckboxField = field.type === FieldType.CHECKBOX;
+
   const calculateCoords = useCallback(() => {
     const $page = document.querySelector<HTMLElement>(
       `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
@@ -102,8 +106,8 @@ export const FieldItem = ({
       default={{
         x: coords.pageX,
         y: coords.pageY,
-        height: coords.pageHeight,
-        width: coords.pageWidth,
+        height: isCheckboxField ? 32 : coords.pageHeight,
+        width: isCheckboxField ? 32 : coords.pageWidth,
       }}
       bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
       onDragStart={() => setActive(true)}
@@ -119,7 +123,13 @@ export const FieldItem = ({
     >
       {!disabled && (
         <button
-          className="text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border"
+          className={cn(
+            'text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex  items-center justify-center rounded-full border',
+            {
+              'h-8 w-8': !isCheckboxField,
+              'h-6 w-6': isCheckboxField,
+            },
+          )}
           onClick={() => onRemove?.()}
           onTouchEnd={() => onRemove?.()}
         >
@@ -127,25 +137,40 @@ export const FieldItem = ({
         </button>
       )}
 
-      <Card
-        className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
-          'border-field-card-border': !disabled,
-          'border-field-card-border/80': active,
-        })}
-      >
-        <CardContent
+      {!isCheckboxField && (
+        <Card
+          className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
+            'border-field-card-border': !disabled,
+            'border-field-card-border/80': active,
+          })}
+        >
+          <CardContent
+            className={cn(
+              'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
+              {
+                'text-field-card-foreground/50': disabled,
+              },
+            )}
+          >
+            {FRIENDLY_FIELD_TYPE[field.type]}
+
+            <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {isCheckboxField && (
+        <Checkbox
           className={cn(
-            'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
             {
-              'text-field-card-foreground/50': disabled,
+              'border-field-card-border': !disabled,
+              'border-field-card-border/80': active,
             },
           )}
-        >
-          {FRIENDLY_FIELD_TYPE[field.type]}
-
-          <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
-        </CardContent>
-      </Card>
+        />
+      )}
     </Rnd>,
     document.body,
   );

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

@@ -4,9 +4,11 @@ import type { Prisma } from '@prisma/client';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { FieldType } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import { FRIENDLY_FIELD_TYPE } from './types';
 
 export type ShowFieldItemProps = {
@@ -19,6 +21,7 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
 
   const signerEmail =
     recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '';
+  const isCheckboxField = field.type === FieldType.CHECKBOX;
 
   return createPortal(
     <div
@@ -30,19 +33,30 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
         width: `${coords.width}px`,
       }}
     >
-      <Card className={cn('bg-background h-full w-full')}>
-        <CardContent
-          className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
-          )}
-        >
-          {FRIENDLY_FIELD_TYPE[field.type]}
+      {!isCheckboxField && (
+        <Card className={cn('bg-background h-full w-full')}>
+          <CardContent
+            className={cn(
+              'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
+            )}
+          >
+            {FRIENDLY_FIELD_TYPE[field.type]}
 
-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
-            {signerEmail}
-          </p>
-        </CardContent>
-      </Card>
+            <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+              {signerEmail}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {isCheckboxField && (
+        <Checkbox
+          className={cn(
+            'h-8 w-8',
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
+          )}
+        />
+      )}
     </div>,
     document.body,
   );

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

@@ -48,6 +48,7 @@ export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
   [FieldType.DATE]: 'Date',
   [FieldType.EMAIL]: 'Email',
   [FieldType.NAME]: 'Name',
+  [FieldType.CHECKBOX]: 'Checkbox',
 };
 
 export interface DocumentFlowStep {