feat: add checkbox field

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/types/document-audit-logs.ts

@@ -231,6 +231,10 @@ 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(),

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

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

packages/prisma/schema.prisma

@@ -379,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/primitives/document-flow/add-fields.tsx

@@ -577,6 +577,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/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 {