fix: add regression test

packages/app-tests/constants/field-alignment-pdf.ts

@@ -0,0 +1,498 @@
+import { FieldType } from '@prisma/client';
+
+import type { TFieldAndMeta } from '@documenso/lib/types/field-meta';
+import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
+
+export type FieldTestData = TFieldAndMeta & {
+  page: number;
+  positionX: number;
+  positionY: number;
+  width: number;
+  height: number;
+  customText: string;
+  signature?: string;
+};
+
+const columnWidth = 19.125;
+const rowHeight = 6.7;
+
+const alignmentGridStartX = 31;
+const alignmentGridStartY = 19.02;
+
+export const ALIGNMENT_TEST_FIELDS: FieldTestData[] = [
+  /**
+   * Row 1 EMAIL
+   */
+  {
+    type: FieldType.EMAIL,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'email',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'admin@documenso.com',
+  },
+  {
+    type: FieldType.EMAIL,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'email',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'admin@documenso.com',
+  },
+  {
+    type: FieldType.EMAIL,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'email',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'admin@documenso.com',
+  },
+  /**
+   * Row 2 NAME
+   */
+  {
+    type: FieldType.NAME,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'name',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'John Doe',
+  },
+  {
+    type: FieldType.NAME,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'name',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'John Doe',
+  },
+  {
+    type: FieldType.NAME,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'name',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'John Doe',
+  },
+  /**
+   * Row 3 DATE
+   */
+  {
+    type: FieldType.DATE,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'date',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.DATE,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'date',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.DATE,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'date',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  /**
+   * Row 4 TEXT
+   */
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'text',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'text',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'text',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  /**
+   * Row 5 NUMBER
+   */
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'number',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'number',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'number',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  /**
+   * Row 6 Initials
+   */
+  {
+    type: FieldType.INITIALS,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'initials',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'JD',
+  },
+  {
+    type: FieldType.INITIALS,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'initials',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'JD',
+  },
+  {
+    type: FieldType.INITIALS,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'initials',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'JD',
+  },
+  /**
+   * Row 7 Radio
+   */
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      fontSize: 10,
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '0',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '2',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      fontSize: 20,
+      direction: 'horizontal',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+  },
+  /**
+   * Row 8 Checkbox
+   */
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      fontSize: 10,
+      direction: 'vertical',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: toCheckboxCustomText([0]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: toCheckboxCustomText([1]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      fontSize: 20,
+      direction: 'horizontal',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+  },
+  /**
+   * Row 8 Dropdown
+   */
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      fontSize: 10,
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      fontSize: 20,
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
+      type: 'dropdown',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'Option 1',
+  },
+  /**
+   * Row 9 Signature
+   */
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      fontSize: 10,
+      type: 'signature',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      fontSize: 20,
+      type: 'signature',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+    signature: 'My Signature',
+  },
+] as const;
+
+export const formatAlignmentTestFields = ALIGNMENT_TEST_FIELDS.map((field, index) => {
+  const row = Math.floor(index / 3);
+  const column = index % 3;
+
+  return {
+    ...field,
+    positionX: alignmentGridStartX + column * columnWidth,
+    positionY: alignmentGridStartY + row * rowHeight,
+  };
+});

packages/app-tests/constants/field-meta-pdf.ts

@@ -0,0 +1,482 @@
+import { FieldType } from '@prisma/client';
+
+import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
+import {
+  CheckboxValidationRules,
+  numberFormatValues,
+} from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+
+import type { FieldTestData } from './field-alignment-pdf';
+
+const columnWidth = 20.1;
+const fullColumnWidth = 75.8;
+const rowHeight = 9.8;
+const rowPadding = 1.8;
+
+const alignmentGridStartX = 11.85;
+const alignmentGridStartY = 15.07;
+
+const calculatePosition = (row: number, column: number, width: 'full' | 'column' = 'column') => {
+  return {
+    height: rowHeight,
+    width: width === 'full' ? fullColumnWidth : columnWidth,
+    positionX: alignmentGridStartX + (column ?? 0) * columnWidth,
+    positionY: alignmentGridStartY + row * (rowHeight + rowPadding),
+  };
+};
+
+export const FIELD_META_TEST_FIELDS: FieldTestData[] = [
+  /**
+   * PAGE 2 Signature
+   */
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(0, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(1, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(2, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(3, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+
+  /**
+   * PAGE 3 TEXT
+   */
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+    },
+    page: 3,
+    ...calculatePosition(0, 0, 'full'),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+    },
+    page: 3,
+    ...calculatePosition(1, 0),
+    customText: '123456789123456789123456789123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      characterLimit: 5,
+    },
+    page: 3,
+    ...calculatePosition(2, 0),
+    customText: '12345',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      placeholder: 'Demo Placeholder',
+    },
+    page: 3,
+    ...calculatePosition(3, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      label: 'Demo Label',
+    },
+    page: 3,
+    ...calculatePosition(3, 1),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      text: 'Prefilled text',
+    },
+    page: 3,
+    ...calculatePosition(3, 2),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      required: true,
+    },
+    page: 3,
+    ...calculatePosition(4, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      readOnly: true,
+      text: 'Readonly Value',
+    },
+    page: 3,
+    ...calculatePosition(4, 1),
+    customText: 'Readonly Value',
+  },
+
+  /**
+   * PAGE 4 NUMBER
+   */
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+    },
+    page: 4,
+    ...calculatePosition(0, 0, 'full'),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+    },
+    page: 4,
+    ...calculatePosition(1, 0),
+    customText: '123456789123456789123456789123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      minValue: 0,
+      maxValue: 100,
+    },
+    page: 4,
+    ...calculatePosition(2, 0),
+    customText: '50',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      numberFormat: numberFormatValues[0].value, // Todo: Envelopes - Check this.
+      value: '123,456,789.00',
+    },
+    page: 4,
+    ...calculatePosition(2, 1),
+    customText: '123,456,789.00',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      placeholder: 'Demo Placeholder',
+    },
+    page: 4,
+    ...calculatePosition(3, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      label: 'Demo Label',
+    },
+    page: 4,
+    ...calculatePosition(3, 1),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      value: '123',
+    },
+    page: 4,
+    ...calculatePosition(3, 2),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      required: true,
+    },
+    page: 4,
+    ...calculatePosition(4, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      readOnly: true,
+    },
+    page: 4,
+    ...calculatePosition(4, 1),
+    customText: '123456789',
+  },
+
+  /**
+   * PAGE 5 RADIO
+   */
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'horizontal',
+      type: 'radio',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(0, 0, 'full'),
+    customText: '0',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(1, 0),
+    customText: '2',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(2, 0),
+    customText: '',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(2, 1),
+    customText: '',
+  },
+
+  /**
+   * PAGE 6 CHECKBOX
+   */
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'horizontal',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 2, checked: false, value: 'Option 3' },
+        { id: 2, checked: false, value: 'Option 4' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(0, 0, 'full'),
+    customText: toCheckboxCustomText([0]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+        { id: 2, checked: true, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(1, 0),
+    customText: toCheckboxCustomText([1]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      required: true,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(2, 0),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      readOnly: true,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(2, 1),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      validationRule: CheckboxValidationRules.SELECT_AT_LEAST,
+      validationLength: 2,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(3, 0),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      validationRule: CheckboxValidationRules.SELECT_EXACTLY,
+      validationLength: 2,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(3, 1),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      validationRule: CheckboxValidationRules.SELECT_AT_MOST,
+      validationLength: 2,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(3, 2),
+    customText: '',
+  },
+
+  /**
+   * PAGE 7 DROPDOWN
+   */
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+    },
+    page: 7,
+    ...calculatePosition(0, 0, 'full'),
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+      defaultValue: 'Option 1',
+    },
+    page: 7,
+    ...calculatePosition(1, 0),
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
+      type: 'dropdown',
+      required: true,
+    },
+    page: 7,
+    ...calculatePosition(2, 0),
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
+      type: 'dropdown',
+      readOnly: true,
+    },
+    page: 7,
+    ...calculatePosition(2, 1),
+    customText: 'Option 1',
+  },
+] as const;
+
+export const formatFieldMetaTestFields = FIELD_META_TEST_FIELDS.map((field, index) => {
+  return {
+    ...field,
+  };
+});

packages/app-tests/e2e/api/v2/envelopes-api.spec.ts

@@ -0,0 +1,264 @@
+import { expect, test } from '@playwright/test';
+import type { Team, User } from '@prisma/client';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { incrementDocumentId } from '@documenso/lib/server-only/envelope/increment-id';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { prefixedId } from '@documenso/lib/universal/id';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentSource,
+  DocumentVisibility,
+  EnvelopeType,
+  RecipientRole,
+} from '@documenso/prisma/client';
+import { seedUser } from '@documenso/prisma/seed/users';
+import type { TCreateEnvelopeItemsRequest } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
+import type { TCreateEnvelopeRecipientsRequest } from '@documenso/trpc/server/envelope-router/envelope-recipients/create-envelope-recipients.types';
+import type { TGetEnvelopeResponse } from '@documenso/trpc/server/envelope-router/get-envelope.types';
+import type { TUpdateEnvelopeRequest } from '@documenso/trpc/server/envelope-router/update-envelope.types';
+
+import { formatAlignmentTestFields } from '../../../constants/field-alignment-pdf';
+import { FIELD_META_TEST_FIELDS } from '../../../constants/field-meta-pdf';
+
+const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
+const baseUrl = `${WEBAPP_BASE_URL}/api/v2-beta`;
+
+test.describe.configure({
+  mode: 'parallel',
+});
+
+test.describe('API V2 Envelopes', () => {
+  let userA: User, teamA: Team, userB: User, teamB: Team, tokenA: string, tokenB: string;
+
+  test.beforeEach(async () => {
+    ({ user: userA, team: teamA } = await seedUser());
+    ({ token: tokenA } = await createApiToken({
+      userId: userA.id,
+      teamId: teamA.id,
+      tokenName: 'userA',
+      expiresIn: null,
+    }));
+
+    ({ user: userB, team: teamB } = await seedUser());
+    ({ token: tokenB } = await createApiToken({
+      userId: userB.id,
+      teamId: teamB.id,
+      tokenName: 'userB',
+      expiresIn: null,
+    }));
+  });
+
+  /**
+   * Creates envelopes with the two field test PDFs.
+   */
+  test('Envelope full test', async ({ request }) => {
+    // Step 1: Create initial envelope with Prisma (with first envelope item)
+    const alignmentPdf = fs
+      .readFileSync(path.join(__dirname, '../../../../../assets/field-font-alignment.pdf'))
+      .toString('base64');
+
+    const fieldMetaPdf = fs
+      .readFileSync(path.join(__dirname, '../../../../../assets/field-meta.pdf'))
+      .toString('base64');
+
+    const alignmentDocumentData = await prisma.documentData.create({
+      data: {
+        type: 'BYTES_64',
+        data: alignmentPdf,
+        initialData: alignmentPdf,
+      },
+    });
+
+    const documentId = await incrementDocumentId();
+    const documentMeta = await prisma.documentMeta.create({
+      data: {},
+    });
+
+    const createdEnvelope = await prisma.envelope.create({
+      data: {
+        id: prefixedId('envelope'),
+        secondaryId: documentId.formattedDocumentId,
+        internalVersion: 2,
+        type: EnvelopeType.DOCUMENT,
+        documentMetaId: documentMeta.id,
+        source: DocumentSource.DOCUMENT,
+        title: `Envelope Full Field Test`,
+        status: 'DRAFT',
+        userId: userA.id,
+        teamId: teamA.id,
+        envelopeItems: {
+          create: {
+            id: prefixedId('envelope_item'),
+            title: `Alignment Test`,
+            documentDataId: alignmentDocumentData.id,
+            order: 1,
+          },
+        },
+      },
+      include: {
+        envelopeItems: true,
+      },
+    });
+
+    // Step 2: Create second envelope item via API
+    const fieldMetaDocumentData = await prisma.documentData.create({
+      data: {
+        type: 'BYTES_64',
+        data: fieldMetaPdf,
+        initialData: fieldMetaPdf,
+      },
+    });
+
+    const createEnvelopeItemsRequest: TCreateEnvelopeItemsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: [
+        {
+          title: 'Field Meta Test',
+          documentDataId: fieldMetaDocumentData.id,
+        },
+      ],
+    };
+
+    const createItemsRes = await request.post(`${baseUrl}/envelope/item/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: createEnvelopeItemsRequest,
+    });
+
+    expect(createItemsRes.ok()).toBeTruthy();
+    expect(createItemsRes.status()).toBe(200);
+
+    // Step 3: Update envelope via API
+    const updateEnvelopeRequest: TUpdateEnvelopeRequest = {
+      envelopeId: createdEnvelope.id,
+      envelopeType: EnvelopeType.DOCUMENT,
+      data: {
+        title: 'Envelope Full Field Test',
+        visibility: DocumentVisibility.MANAGER_AND_ABOVE,
+      },
+    };
+
+    const updateRes = await request.post(`${baseUrl}/envelope/update`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: updateEnvelopeRequest,
+    });
+
+    expect(updateRes.ok()).toBeTruthy();
+    expect(updateRes.status()).toBe(200);
+
+    // Step 4: Create recipient via API
+    const createRecipientsRequest: TCreateEnvelopeRecipientsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: [
+        {
+          email: userA.email,
+          name: userA.name || '',
+          role: RecipientRole.SIGNER,
+          accessAuth: [],
+          actionAuth: [],
+        },
+      ],
+    };
+
+    const createRecipientsRes = await request.post(`${baseUrl}/envelope/recipient/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: createRecipientsRequest,
+    });
+
+    expect(createRecipientsRes.ok()).toBeTruthy();
+    expect(createRecipientsRes.status()).toBe(200);
+
+    // Step 5: Get envelope to retrieve recipients and envelope items
+    const getRes = await request.get(`${baseUrl}/envelope/${createdEnvelope.id}`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+    });
+
+    expect(getRes.ok()).toBeTruthy();
+    expect(getRes.status()).toBe(200);
+
+    const envelopeResponse = (await getRes.json()) as TGetEnvelopeResponse;
+
+    const recipientId = envelopeResponse.recipients[0].id;
+    const alignmentItem = envelopeResponse.envelopeItems.find(
+      (item: { order: number }) => item.order === 1,
+    );
+    const fieldMetaItem = envelopeResponse.envelopeItems.find(
+      (item: { order: number }) => item.order === 2,
+    );
+
+    expect(recipientId).toBeDefined();
+    expect(alignmentItem).toBeDefined();
+    expect(fieldMetaItem).toBeDefined();
+
+    if (!alignmentItem || !fieldMetaItem) {
+      throw new Error('Envelope items not found');
+    }
+
+    // Step 6: Create fields for first PDF (alignment fields)
+    const alignmentFieldsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: formatAlignmentTestFields.map((field) => ({
+        recipientId,
+        envelopeItemId: alignmentItem.id,
+        type: field.type,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+        fieldMeta: field.fieldMeta,
+      })),
+    };
+
+    const createAlignmentFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: alignmentFieldsRequest,
+    });
+
+    expect(createAlignmentFieldsRes.ok()).toBeTruthy();
+    expect(createAlignmentFieldsRes.status()).toBe(200);
+
+    // Step 7: Create fields for second PDF (field-meta fields)
+    const fieldMetaFieldsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: FIELD_META_TEST_FIELDS.map((field) => ({
+        recipientId,
+        envelopeItemId: fieldMetaItem.id,
+        type: field.type,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+        fieldMeta: field.fieldMeta,
+      })),
+    };
+
+    const createFieldMetaFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: fieldMetaFieldsRequest,
+    });
+
+    expect(createFieldMetaFieldsRes.ok()).toBeTruthy();
+    expect(createFieldMetaFieldsRes.status()).toBe(200);
+
+    // Step 8: Verify final envelope structure
+    const finalGetRes = await request.get(`${baseUrl}/envelope/${createdEnvelope.id}`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+    });
+
+    expect(finalGetRes.ok()).toBeTruthy();
+    const finalEnvelope = (await finalGetRes.json()) as TGetEnvelopeResponse;
+
+    // Verify structure
+    expect(finalEnvelope.envelopeItems.length).toBe(2);
+    expect(finalEnvelope.recipients.length).toBe(1);
+    expect(finalEnvelope.fields.length).toBe(
+      formatAlignmentTestFields.length + FIELD_META_TEST_FIELDS.length,
+    );
+    expect(finalEnvelope.title).toBe('Envelope Full Field Test');
+    expect(finalEnvelope.type).toBe(EnvelopeType.DOCUMENT);
+  });
+});

packages/app-tests/e2e/envelopes/envelope-alignment.spec.ts

@@ -0,0 +1,267 @@
+// sort-imports-ignore
+
+// ---- PATCH pdfjs-dist's canvas require BEFORE importing it ----
+import Module from 'module';
+import { Canvas, Image } from 'skia-canvas';
+
+// Intercept require('canvas') and return skia-canvas equivalents
+const originalRequire = Module.prototype.require;
+Module.prototype.require = function (path: string) {
+  if (path === 'canvas') {
+    return {
+      createCanvas: (width: number, height: number) => new Canvas(width, height),
+      Image, // needed by pdfjs-dist
+    };
+  }
+  // eslint-disable-next-line prefer-rest-params, @typescript-eslint/consistent-type-assertions
+  return originalRequire.apply(this, arguments as unknown as [string]);
+};
+
+import pixelMatch from 'pixelmatch';
+import { PNG } from 'pngjs';
+import type { TestInfo } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { DocumentStatus } from '@prisma/client';
+import fs from 'node:fs';
+import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { prisma } from '@documenso/prisma';
+import { seedAlignmentTestDocument } from '@documenso/prisma/seed/initial-seed';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+test('field placement visual regression', async ({ page }, testInfo) => {
+  const { user, team } = await seedUser();
+
+  const envelope = await seedAlignmentTestDocument({
+    userId: user.id,
+    teamId: team.id,
+    recipientName: user.name || '',
+    recipientEmail: user.email,
+    insertFields: true,
+    status: DocumentStatus.PENDING,
+  });
+
+  const token = envelope.recipients[0].token;
+
+  const signUrl = `/sign/${token}`;
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: signUrl,
+  });
+
+  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  await expect(async () => {
+    const { status } = await prisma.envelope.findFirstOrThrow({
+      where: {
+        id: envelope.id,
+      },
+    });
+
+    expect(status).toBe(DocumentStatus.COMPLETED);
+  }).toPass({
+    timeout: 10000,
+  });
+
+  const completedDocument = await prisma.envelope.findFirstOrThrow({
+    where: {
+      id: envelope.id,
+    },
+    include: {
+      envelopeItems: {
+        orderBy: {
+          order: 'asc',
+        },
+        include: {
+          documentData: true,
+        },
+      },
+    },
+  });
+
+  const storedImages = fs.readdirSync(`packages/app-tests/visual-regression`);
+
+  await Promise.all(
+    completedDocument.envelopeItems.map(async (item) => {
+      const pdfData = await getFile(item.documentData);
+
+      const loadedImages = storedImages
+        .filter((image) => image.includes(item.title))
+        .map((image) => fs.readFileSync(`packages/app-tests/visual-regression/${image}`));
+
+      await compareSignedPdfWithImages({
+        id: item.title.replaceAll(' ', '-').toLowerCase(),
+        pdfData,
+        images: loadedImages,
+        testInfo,
+      });
+    }),
+  );
+});
+
+/**
+ * Used to download the envelope images when updating the visual regression test.
+ *
+ * DON'T COMMIT THIS WITHOUT THE "SKIP" COMMAND.
+ */
+test.skip('download envelope images', async ({ page }) => {
+  const { user, team } = await seedUser();
+
+  const envelope = await seedAlignmentTestDocument({
+    userId: user.id,
+    teamId: team.id,
+    recipientName: user.name || '',
+    recipientEmail: user.email,
+    insertFields: true,
+    status: DocumentStatus.PENDING,
+  });
+
+  const token = envelope.recipients[0].token;
+
+  const signUrl = `/sign/${token}`;
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: signUrl,
+  });
+
+  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  await expect(async () => {
+    const { status } = await prisma.envelope.findFirstOrThrow({
+      where: {
+        id: envelope.id,
+      },
+    });
+
+    expect(status).toBe(DocumentStatus.COMPLETED);
+  }).toPass({
+    timeout: 10000,
+  });
+
+  const completedDocument = await prisma.envelope.findFirstOrThrow({
+    where: {
+      id: envelope.id,
+    },
+    include: {
+      envelopeItems: {
+        orderBy: {
+          order: 'asc',
+        },
+        include: {
+          documentData: true,
+        },
+      },
+    },
+  });
+
+  await Promise.all(
+    completedDocument.envelopeItems.map(async (item) => {
+      const pdfData = await getFile(item.documentData);
+
+      const pdfImages = await renderPdfToImage(pdfData);
+
+      for (const [index, { image }] of pdfImages.entries()) {
+        fs.writeFileSync(
+          `packages/app-tests/visual-regression/${item.title}-${index}.png`,
+          new Uint8Array(image),
+        );
+      }
+    }),
+  );
+});
+
+async function renderPdfToImage(pdfBytes: Uint8Array) {
+  const loadingTask = pdfjsLib.getDocument({ data: pdfBytes });
+  const pdf = await loadingTask.promise;
+
+  // Increase for higher resolution
+  const scale = 2;
+
+  return await Promise.all(
+    Array.from({ length: pdf.numPages }, async (_, index) => {
+      const page = await pdf.getPage(index + 1);
+
+      const viewport = page.getViewport({ scale });
+      const virtualCanvas = new Canvas(viewport.width, viewport.height);
+      const context = virtualCanvas.getContext('2d');
+
+      // @ts-expect-error skia-canvas context satisfies runtime requirements for pdfjs
+      await page.render({ canvasContext: context, viewport }).promise;
+
+      return {
+        image: await virtualCanvas.toBuffer('png'),
+
+        // Rounded down because the certificate page somehow gives dimensions with decimals
+        width: Math.floor(viewport.width),
+        height: Math.floor(viewport.height),
+      };
+    }),
+  );
+}
+
+type CompareSignedPdfWithImagesOptions = {
+  id: string;
+  pdfData: Uint8Array;
+  images: Buffer[];
+  testInfo: TestInfo;
+};
+
+const compareSignedPdfWithImages = async ({
+  id,
+  pdfData,
+  images,
+  testInfo,
+}: CompareSignedPdfWithImagesOptions) => {
+  const renderedImages = await renderPdfToImage(pdfData);
+
+  for (const [index, { image, width, height }] of renderedImages.entries()) {
+    const isCertificate = index === renderedImages.length - 1;
+
+    const diff = new PNG({ width, height });
+
+    const storedImage = new Uint8Array(PNG.sync.read(images[index]).data);
+
+    const newImage = new Uint8Array(PNG.sync.read(image).data);
+
+    const comparison = pixelMatch(
+      storedImage,
+      newImage,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      diff.data as unknown as Uint8Array,
+      width,
+      height,
+      {
+        threshold: 0,
+        // includeAA: true, // This allows stricter testing.
+      },
+    );
+    console.log(`${id}-${index}: ${comparison}`);
+
+    const filePath = testInfo.outputPath(`diff-${id}-${index}.png`);
+
+    fs.writeFileSync(filePath, new Uint8Array(PNG.sync.write(diff)));
+
+    if (isCertificate) {
+      expect(comparison).toBeLessThan(20000);
+    } else {
+      expect(comparison).toEqual(0);
+    }
+  }
+};

packages/app-tests/package.json

@@ -15,7 +15,10 @@
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
     "@playwright/test": "1.52.0",
-    "@types/node": "^20"
+    "@types/node": "^20",
+    "@types/pngjs": "^6.0.5",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0"
   },
   "dependencies": {
     "start-server-and-test": "^2.0.12"