feat: add envelopes api (#2105)

packages/lib/universal/field-renderer/field-generic-items.ts

@@ -153,6 +153,11 @@ export const createFieldHoverInteraction = ({
   const hoverColor = RECIPIENT_COLOR_STYLES[options.color].baseRingHover;
 
   fieldGroup.on('mouseover', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -161,6 +166,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('mouseout', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -169,6 +179,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('transformstart', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -177,6 +192,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('transformend', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,

packages/lib/universal/field-renderer/field-renderer.ts

@@ -19,7 +19,7 @@ export type FieldToRender = Pick<
   positionX: number;
   positionY: number;
   fieldMeta?: TFieldMetaSchema | null;
-  signature?: Signature | null;
+  signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
 };
 
 export type RenderFieldElementOptions = {

packages/lib/universal/field-renderer/render-checkbox-field.ts

@@ -3,6 +3,7 @@ import { match } from 'ts-pattern';
 
 import { DEFAULT_STANDARD_FONT_SIZE } from '../../constants/pdf';
 import type { TCheckboxFieldMeta } from '../../types/field-meta';
+import { parseCheckboxCustomText } from '../../utils/fields';
 import {
   createFieldHoverInteraction,
   konvaTextFill,
@@ -62,16 +63,15 @@ export const renderCheckboxFieldElement = (
     const rectWidth = fieldRect.width() * groupScaleX;
     const rectHeight = fieldRect.height() * groupScaleY;
 
-    // Todo: Envelopes - check sorting more than 10
-    // arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
-
     const squares = fieldGroup
       .find('.checkbox-square')
-      .sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
     const checkmarks = fieldGroup
       .find('.checkbox-checkmark')
-      .sort((a, b) => a.id().localeCompare(b.id()));
-    const text = fieldGroup.find('.checkbox-text').sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
+    const text = fieldGroup
+      .find('.checkbox-text')
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
 
     const groupedItems = squares.map((square, i) => ({
       squareElement: square,
@@ -130,7 +130,7 @@ export const renderCheckboxFieldElement = (
     pageLayer.batchDraw();
   });
 
-  const checkedValues: number[] = field.customText ? JSON.parse(field.customText) : [];
+  const checkedValues: number[] = field.customText ? parseCheckboxCustomText(field.customText) : [];
 
   checkboxValues.forEach(({ value, checked }, index) => {
     const isCheckboxChecked = match(mode)
@@ -170,7 +170,7 @@ export const renderCheckboxFieldElement = (
       width: itemSize,
       height: itemSize,
       stroke: '#374151',
-      strokeWidth: 2,
+      strokeWidth: 1.5,
       cornerRadius: 2,
       fill: 'white',
     });

packages/lib/universal/field-renderer/render-field.ts

@@ -8,13 +8,24 @@ import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import type { TFieldMetaSchema } from '../../types/field-meta';
 import { renderCheckboxFieldElement } from './render-checkbox-field';
 import { renderDropdownFieldElement } from './render-dropdown-field';
+import { renderGenericTextFieldElement } from './render-generic-text-field';
 import { renderRadioFieldElement } from './render-radio-field';
 import { renderSignatureFieldElement } from './render-signature-field';
-import { renderTextFieldElement } from './render-text-field';
 
 export const MIN_FIELD_HEIGHT_PX = 12;
 export const MIN_FIELD_WIDTH_PX = 36;
 
+/**
+ * The render type.
+ *
+ * @default 'edit'
+ *
+ * - `edit` - The field is rendered in editor page.
+ * - `sign` - The field is rendered for the signing page.
+ * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
+ */
+export type FieldRenderMode = 'edit' | 'sign' | 'export';
+
 export type FieldToRender = Pick<
   Field,
   'envelopeItemId' | 'recipientId' | 'type' | 'page' | 'customText' | 'inserted' | 'recipientId'
@@ -25,7 +36,7 @@ export type FieldToRender = Pick<
   positionX: number;
   positionY: number;
   fieldMeta?: TFieldMetaSchema | null;
-  signature?: Signature | null;
+  signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
 };
 
 type RenderFieldOptions = {
@@ -38,16 +49,7 @@ type RenderFieldOptions = {
 
   translations: Record<FieldType, string> | null;
 
-  /**
-   * The render type.
-   *
-   * @default 'edit'
-   *
-   * - `edit` - The field is rendered in edit mode.
-   * - `sign` - The field is rendered in sign mode. No interactive elements.
-   * - `export` - The field is rendered in export mode. No backgrounds, interactive elements, etc.
-   */
-  mode: 'edit' | 'sign' | 'export';
+  mode: FieldRenderMode;
 
   scale: number;
   editable?: boolean;
@@ -76,10 +78,21 @@ export const renderField = ({
   };
 
   return match(field.type)
-    .with(FieldType.TEXT, () => renderTextFieldElement(field, options))
+    .with(
+      FieldType.INITIALS,
+      FieldType.NAME,
+      FieldType.EMAIL,
+      FieldType.DATE,
+      FieldType.TEXT,
+      FieldType.NUMBER,
+      () => renderGenericTextFieldElement(field, options),
+    )
     .with(FieldType.CHECKBOX, () => renderCheckboxFieldElement(field, options))
     .with(FieldType.RADIO, () => renderRadioFieldElement(field, options))
     .with(FieldType.DROPDOWN, () => renderDropdownFieldElement(field, options))
     .with(FieldType.SIGNATURE, () => renderSignatureFieldElement(field, options))
-    .otherwise(() => renderTextFieldElement(field, options)); // Todo: Envelopes
+    .with(FieldType.FREE_SIGNATURE, () => {
+      throw new Error('Free signature fields are not supported');
+    })
+    .exhaustive();
 };

packages/lib/universal/field-renderer/render-generic-text-field.ts

@@ -12,6 +12,8 @@ import {
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 import { calculateFieldPosition } from './field-renderer';
 
+const DEFAULT_TEXT_ALIGN = 'left';
+
 const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOptions): Konva.Text => {
   const { pageWidth, pageHeight, mode = 'edit', pageLayer, translations } = options;
 
@@ -31,8 +33,8 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   // Calculate text positioning based on alignment
   const textX = 0;
   const textY = 0;
-  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || 'left';
-  let textVerticalAlign: 'top' | 'middle' | 'bottom' = 'top';
+  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || DEFAULT_TEXT_ALIGN;
+  const textVerticalAlign: 'top' | 'middle' | 'bottom' = 'middle';
   const textFontSize = textMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
   const textPadding = 10;
 
@@ -40,51 +42,29 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
 
   // Handle edit mode.
   if (mode === 'edit') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    } else if (textMeta?.text) {
+    if (textMeta?.text) {
       textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
+    } else {
+      // Show field name which is centered for the edit mode if no label/text is avaliable.
+      textToRender = textMeta?.label || fieldTypeName;
+      textAlign = 'center';
     }
   }
 
   // Handle sign mode.
   if (mode === 'sign' || mode === 'export') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    }
-
-    if (textMeta?.text) {
-      textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
+    if (!field.inserted) {
+      if (textMeta?.text) {
+        textToRender = textMeta.text;
+      } else if (mode === 'sign') {
+        // Only show the field name in sign mode if no text/label is avaliable.
+        textToRender = textMeta?.label || fieldTypeName;
+        textAlign = 'center';
       }
     }
 
     if (field.inserted) {
       textToRender = field.customText;
-      textAlign = textMeta?.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta?.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
     }
   }
 
@@ -106,7 +86,7 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   return fieldText;
 };
 
-export const renderTextFieldElement = (
+export const renderGenericTextFieldElement = (
   field: FieldToRender,
   options: RenderFieldElementOptions,
 ) => {

packages/lib/universal/field-renderer/render-radio-field.ts

@@ -159,7 +159,7 @@ export const renderRadioFieldElement = (
       y: itemInputY,
       radius: calculateRadioSize(fontSize) / 2,
       stroke: '#374151',
-      strokeWidth: 2,
+      strokeWidth: 1.5,
       fill: 'white',
     });