@servicetitan/dte-pdf-editor 1.86.0 → 1.88.0

package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx

@@ -1,7 +1,11 @@
 import { FC, Fragment } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { type PdfField } from '../../interface/types';
-import { getFieldPlaceholderText, getFieldTextClipClassName } from '../../utils';
+import {
+    getFieldPlaceholderText,
+    getFieldTextClipClassName,
+    getFillablePaintedLabel,
+} from '../../utils';
 import { AddHandle } from './add-handle';
 
 interface PdfOverlayFieldFillableProps {
@@ -20,29 +24,57 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
     switch (field.subType) {
         case 'checkbox':
             return (
-                <input
-                    type="checkbox"
-                    readOnly
-                    className="dte-pdf-field-fillable"
+                <div
+                    className="dte-pdf-field-content"
                     style={{
-                        width: field.width,
-                        height: field.height,
+                        display: 'flex',
+                        alignItems: 'center',
+                        background: 'inherit',
                     }}
-                />
-            );
-
-        case 'radio':
-            return (
-                <Fragment>
+                >
                     <input
-                        type="radio"
+                        title={field.label}
+                        type="checkbox"
                         readOnly
                         className="dte-pdf-field-fillable"
                         style={{
                             width: field.width,
                             height: field.height,
+                            margin: 0,
+                            border: 'none',
                         }}
                     />
+                    {getFillablePaintedLabel(field)}
+                </div>
+            );
+
+        case 'radio':
+            return (
+                <Fragment>
+                    <div
+                        className="dte-pdf-field-content"
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            background: 'inherit',
+                            width: '100%',
+                            height: '100%',
+                        }}
+                    >
+                        <input
+                            title={field.label}
+                            type="radio"
+                            readOnly
+                            className="dte-pdf-field-fillable"
+                            style={{
+                                width: field.width,
+                                height: field.height,
+                                margin: 0,
+                                border: 'none',
+                            }}
+                        />
+                        {getFillablePaintedLabel(field)}
+                    </div>
                     <AddHandle
                         onClick={() =>
                             handleAddNewField({

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -9,6 +9,7 @@ import {
     dateToUtcZero,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
+    getFillablePaintedLabel,
     toDateInputValue,
 } from '../../utils';
 
@@ -132,7 +133,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     name={field.path}
                     onChange={e => handleDataChange(e.target.checked)}
                 />
-                {!field.hideLabel && field.label}
+                {getFillablePaintedLabel(field)}
             </div>
         );
     }
@@ -164,7 +165,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     name={field.path}
                     onChange={() => handleDataChange(field.id)}
                 />
-                {!field.hideLabel && field.label}
+                {getFillablePaintedLabel(field)}
             </div>
         );
     }

package/src/constants/field.constants.ts

@@ -43,13 +43,6 @@ export const GENERIC_FIELD_DEFAULT_SIZES = {
     table: { width: BASE_PAGE_WIDTH - 10, height: 2 * GENERIC_FIELD_TABLE_ROW_HEIGHT },
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
-export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] = [
-    { name: 'Signature', id: ESignFieldType.signature },
-    { name: 'Initials', id: ESignFieldType.initials },
-    { name: 'Date Signed', id: ESignFieldType.dateSigned },
-    { name: 'Full Name', id: ESignFieldType.fullName },
-];
-
 export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
     { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text' },
     { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number' },
@@ -60,10 +53,30 @@ export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
 
 export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
     {
-        label: 'E-Sign',
+        label: 'Signature',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.signature,
     },
+    {
+        label: 'Initials',
+        type: FieldTypeEnum.eSign,
+        subType: ESignFieldType.initials,
+    },
+    {
+        label: 'Date Signed',
+        type: FieldTypeEnum.eSign,
+        subType: ESignFieldType.dateSigned,
+    },
+    {
+        label: 'Date Signed Offset',
+        type: FieldTypeEnum.eSign,
+        subType: ESignFieldType.dateSignedOffset,
+    },
+    {
+        label: 'Full Name',
+        type: FieldTypeEnum.eSign,
+        subType: ESignFieldType.fullName,
+    },
 ];
 
 export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [

package/src/hooks/usePdfFieldDnD.ts

@@ -29,19 +29,33 @@ type InitializeDroppedField = (
     baseField: PdfField,
     option: FieldTypeOption,
     recipients: RecipientInfo[],
+    fields: PdfField[],
 ) => PdfField;
 
 const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField> = {
-    [FieldTypeEnum.eSign]: (base, option, recipients) => {
+    [FieldTypeEnum.eSign]: (base, option, recipients, fields) => {
         const recipientName = recipients[0]?.name ?? '';
-        return {
+        const field = {
             ...base,
             recipient: recipientName,
             path: generateESignPath(recipientName, option.subType as ESignFieldType),
         };
+
+        if (field.subType === ESignFieldType.dateSignedOffset) {
+            const existingDateSignedOffsetField = fields.find(
+                existingField =>
+                    existingField.type === FieldTypeEnum.eSign &&
+                    existingField.subType === ESignFieldType.dateSignedOffset,
+            );
+            field.data = existingDateSignedOffsetField?.data ?? {
+                rules: [{ days: 0 }],
+            };
+        }
+        return field;
     },
     [FieldTypeEnum.fillable]: (base, option, recipients) => {
         const recipientName = getFillableFieldsRecipients(recipients)[0]?.name ?? '';
+
         const defaultSize = FILLABLE_FIELD_DEFAULT_SIZES[base.subType!];
         return {
             ...base,
@@ -216,6 +230,7 @@ export const usePdfFieldDnD = ({
             baseField,
             draggedFieldOption,
             recipients,
+            fields,
         );
 
         onFieldsChange([...fields, newField]);

package/src/interface/types.ts

@@ -11,6 +11,7 @@ export enum ESignFieldType {
     signature = 'signature',
     initials = 'initials',
     dateSigned = 'dateSigned',
+    dateSignedOffset = 'dateSignedOffset',
     fullName = 'fullName',
 }
 
@@ -56,7 +57,39 @@ export interface GenericFieldTextDataType {
     value: string;
 }
 
-export type FieldDataType = GenericFieldTableDataType | GenericFieldTextDataType;
+export interface ESignDateSignedOffsetSettingsRule {
+    days: number;
+    condition: DisplayConditionState;
+}
+
+export interface ESignDateSignedOffsetSettingsFinalRule {
+    days: number;
+    condition?: never;
+}
+
+/**
+ * Ordered "if/else if/.../else" chain of day-offset rules for an e-sign `dateSignedOffset` field.
+ * Rules are evaluated in array order; the first rule whose `condition` matches applies its `days`.
+ *
+ * The tuple shape encodes two invariants the UI and evaluator both rely on:
+ * - The last element is always the trailing else case: no `condition`, so it always matches.
+ * - Every element before it is a normal, conditioned rule (`ESignDateSignedOffsetSettingsRule`).
+ *
+ * `rules` therefore always has at least one entry (just the else rule) and never has a
+ * condition-less rule anywhere but last. `ESignOptionsModal` is the only place that splits this
+ * tuple apart (the else row is edited inline; the conditioned rules are edited in
+ * `ESignDateSignedOffsetModal`) and reassembles it before saving.
+ */
+export interface ESignDateSignedOffsetSettings {
+    rules:
+        | [ESignDateSignedOffsetSettingsFinalRule]
+        | [...ESignDateSignedOffsetSettingsRule[], ESignDateSignedOffsetSettingsFinalRule];
+}
+
+export type FieldDataType =
+    | GenericFieldTableDataType
+    | GenericFieldTextDataType
+    | ESignDateSignedOffsetSettings;
 
 export interface DisplayConditionState {
     behavior: 'show' | 'hide';

package/src/styles/field-config-panel.css

@@ -0,0 +1,11 @@
+.dte-rule-card {
+    padding: 12px;
+    background: var(--color-neutral-30, #f7f7f7);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+
+    &.--active {
+        border-color: var(--border-color-active, #2270ee);
+        background: var(--bg-color-secondary-active, #fafcff);
+    }
+}

package/src/styles/field-type.css

@@ -15,3 +15,15 @@
 .dte-field-type-item:hover {
     box-shadow: 0 0 2px 0 var(--border-color-active);
 }
+
+.dte-field-type-items-wrapper {
+    &.--grid-2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-1, 8px);
+
+        .dte-field-type-item {
+            margin-top: var(--spacing-0, 0);
+        }
+    }
+}

package/src/styles/index.css

@@ -10,3 +10,4 @@
 @import './field-type.css';
 @import './pdf-document-renderer.css';
 @import './inline-editable.css';
+@import './field-config-panel.css';

package/src/styles/variables.css

@@ -28,11 +28,13 @@
     --color-neutral-70: var(--color-neutral-70, #737475);
     --color-neutral-200: var(--color-neutral-200, #6c6d70);
     --color-neutral-300: var(--color-neutral-300, #2d2e31);
+    --color-blue-100: var(--color-blue-100, #fafcff);
 
     /* Background colors */
     --bg-color-light: var(--color-neutral-0, #ffffff);
     --bg-color-main: var(--color-neutral-20, #fafafa);
     --bg-color-secondary: var(--color-neutral-50, #eeeeee);
+    --bg-color-secondary-active: var(--color-blue-100, #fafcff);
     --bg-color: var(--color-neutral-200, #f5f5f5);
     --bg-color-hover: #eaeaea;
 

package/src/utils/conditions/__tests__/condition-match-type.utils.test.ts

@@ -0,0 +1,104 @@
+import type { DisplayConditionSingle, DisplayConditionState } from '../../../interface/types';
+import {
+    applyConditionMatchType,
+    deriveConditionMatchType,
+    isValidConditionGroups,
+} from '../condition-match-type.utils';
+
+const buildCondition = (overrides: Partial<DisplayConditionSingle> = {}): DisplayConditionSingle => ({
+    id: 'c1',
+    dataPointKey: '',
+    operator: 'is_equal_to',
+    value: '',
+    ...overrides,
+});
+
+describe('deriveConditionMatchType', () => {
+    test('defaults to "and" with a single condition', () => {
+        const state: DisplayConditionState = {
+            behavior: 'show',
+            groups: [{ id: 'g1', conditions: [buildCondition()] }],
+        };
+        expect(deriveConditionMatchType(state)).toBe('and');
+    });
+
+    test('returns "or" when a later condition in the group carries an "or" join', () => {
+        const state: DisplayConditionState = {
+            behavior: 'show',
+            groups: [
+                {
+                    id: 'g1',
+                    conditions: [buildCondition(), buildCondition({ id: 'c2', logicalOperator: 'or' })],
+                },
+            ],
+        };
+        expect(deriveConditionMatchType(state)).toBe('or');
+    });
+
+    test('returns "or" when a later group carries an "or" join', () => {
+        const state: DisplayConditionState = {
+            behavior: 'show',
+            groups: [
+                { id: 'g1', conditions: [buildCondition()] },
+                { id: 'g2', logicalOperator: 'or', conditions: [buildCondition({ id: 'c2' })] },
+            ],
+        };
+        expect(deriveConditionMatchType(state)).toBe('or');
+    });
+});
+
+describe('applyConditionMatchType', () => {
+    test('stamps the match type onto every condition after the first, and every group after the first', () => {
+        const state: DisplayConditionState = {
+            behavior: 'show',
+            groups: [
+                {
+                    id: 'g1',
+                    conditions: [buildCondition(), buildCondition({ id: 'c2' })],
+                },
+                { id: 'g2', conditions: [buildCondition({ id: 'c3' })] },
+            ],
+        };
+        const next = applyConditionMatchType(state, 'or');
+        expect(next.groups[0].conditions[0].logicalOperator).toBeUndefined();
+        expect(next.groups[0].conditions[1].logicalOperator).toBe('or');
+        expect(next.groups[1].logicalOperator).toBe('or');
+    });
+});
+
+describe('isValidConditionGroups', () => {
+    const deps = { fillableOptions: [], formFieldsByFormId: {}, mergeTagOptions: [] };
+
+    test('is false when there are no groups', () => {
+        expect(isValidConditionGroups([], deps)).toBe(false);
+    });
+
+    test('is false when a condition has no data point selected', () => {
+        const groups = [{ id: 'g1', conditions: [buildCondition({ dataPointKey: '' })] }];
+        expect(isValidConditionGroups(groups, deps)).toBe(false);
+    });
+
+    test('is false when a value-requiring condition has a blank value', () => {
+        const groups = [
+            { id: 'g1', conditions: [buildCondition({ dataPointKey: 'name', value: '  ' })] },
+        ];
+        expect(isValidConditionGroups(groups, deps)).toBe(false);
+    });
+
+    test('is true for a value-less operator with no value', () => {
+        const groups = [
+            {
+                id: 'g1',
+                conditions: [buildCondition({ dataPointKey: 'name', operator: 'is_empty', value: '' })],
+            },
+        ];
+        expect(isValidConditionGroups(groups, deps)).toBe(true);
+    });
+
+    test('is true when the data point and value are both present', () => {
+        const groups = [
+            { id: 'g1', conditions: [buildCondition({ dataPointKey: 'name', value: 'Acme' })] },
+        ];
+        expect(isValidConditionGroups(groups, deps)).toBe(true);
+    });
+});

package/src/utils/conditions/__tests__/e-sign-offset-rules.utils.test.ts

@@ -0,0 +1,51 @@
+import type { ESignDateSignedOffsetSettingsRule } from '../../../interface/types';
+import {
+    addESignOffsetRule,
+    canAddESignOffsetRule,
+    createESignOffsetRule,
+    MAX_ESIGN_OFFSET_RULES,
+    updateESignOffsetRule,
+} from '../e-sign-offset-rules.utils';
+
+describe('createESignOffsetRule', () => {
+    test('creates a normal rule with a single default condition group', () => {
+        const rule = createESignOffsetRule();
+        expect(rule.days).toBe(0);
+        expect(rule.condition.behavior).toBe('show');
+        expect(rule.condition.groups).toHaveLength(1);
+        expect(rule.condition.groups[0].conditions).toHaveLength(1);
+    });
+});
+
+describe('addESignOffsetRule', () => {
+    test('appends a new rule after any existing rules, preserving their order', () => {
+        const first = createESignOffsetRule();
+        const withSecond = addESignOffsetRule([first]);
+        expect(withSecond).toHaveLength(2);
+        expect(withSecond[0]).toBe(first);
+
+        const withThird = addESignOffsetRule(withSecond);
+        expect(withThird).toHaveLength(3);
+        expect(withThird[0]).toBe(first);
+        expect(withThird[1]).toBe(withSecond[1]);
+    });
+
+    test('is a no-op once the max rule count is reached', () => {
+        let rules: ESignDateSignedOffsetSettingsRule[] = [];
+        for (let i = 0; i < MAX_ESIGN_OFFSET_RULES + 3; i++) {
+            rules = addESignOffsetRule(rules);
+        }
+        expect(rules).toHaveLength(MAX_ESIGN_OFFSET_RULES - 1);
+        expect(canAddESignOffsetRule(rules)).toBe(false);
+    });
+});
+
+describe('updateESignOffsetRule', () => {
+    test('replaces the rule at the given index without mutating the input array', () => {
+        const rules = [createESignOffsetRule(), createESignOffsetRule()];
+        const updated: ESignDateSignedOffsetSettingsRule = { ...rules[1], days: 7 };
+        const next = updateESignOffsetRule(rules, 1, updated);
+        expect(next[1].days).toBe(7);
+        expect(rules[1].days).toBe(0);
+    });
+});

package/src/utils/conditions/condition-match-type.utils.ts

@@ -0,0 +1,80 @@
+import type {
+    DataPointOption,
+    DisplayConditionGroup,
+    DisplayConditionState,
+    FormFieldsByFormIdI,
+} from '../../interface/types';
+import { getDisplayConditionFieldTypeForKey } from '../formula';
+import { isValidNumber } from '../shared';
+
+export type ConditionMatchType = 'and' | 'or';
+
+/** Derives All/Any (and/or) toggle value from the operators already stored on a condition state. */
+export const deriveConditionMatchType = (
+    conditionState: DisplayConditionState,
+): ConditionMatchType => {
+    for (let g = 0; g < conditionState.groups.length; g++) {
+        const group = conditionState.groups[g];
+        if (g > 0 && group.logicalOperator === 'or') {
+            return 'or';
+        }
+        for (let i = 1; i < group.conditions.length; i++) {
+            if (group.conditions[i]?.logicalOperator === 'or') {
+                return 'or';
+            }
+        }
+    }
+    return 'and';
+};
+
+/** Stamps the given All/Any (and/or) value onto every group/condition after the first in each. */
+export const applyConditionMatchType = (
+    conditionState: DisplayConditionState,
+    matchType: ConditionMatchType,
+): DisplayConditionState => ({
+    ...conditionState,
+    groups: conditionState.groups.map((group, groupIndex) => ({
+        ...group,
+        ...(groupIndex > 0 ? { logicalOperator: matchType } : {}),
+        conditions: group.conditions.map((c, i) =>
+            i === 0 ? { ...c, logicalOperator: undefined } : { ...c, logicalOperator: matchType },
+        ),
+    })),
+});
+
+export interface ConditionValidationDeps {
+    mergeTagOptions: DataPointOption[];
+    fillableOptions: DataPointOption[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+}
+
+/** True when every condition in every group has a data point and a usable value for its type. */
+export const isValidConditionGroups = (
+    groups: DisplayConditionGroup[],
+    { fillableOptions, formFieldsByFormId, mergeTagOptions }: ConditionValidationDeps,
+): boolean => {
+    for (const group of groups) {
+        for (const condition of group.conditions) {
+            if (!condition.dataPointKey) {
+                return false;
+            }
+            if (condition.operator === 'is_empty' || condition.operator === 'is_not_empty') {
+                continue;
+            }
+            const trimmedValue = condition.value.trim();
+            if (!trimmedValue) {
+                return false;
+            }
+            const fieldType = getDisplayConditionFieldTypeForKey(
+                condition.dataPointKey,
+                mergeTagOptions,
+                fillableOptions,
+                formFieldsByFormId ?? {},
+            );
+            if (fieldType === 'number' && !isValidNumber(trimmedValue)) {
+                return false;
+            }
+        }
+    }
+    return groups.length > 0;
+};

package/src/utils/conditions/e-sign-offset-rules.utils.ts

@@ -0,0 +1,32 @@
+import { defaultGroup } from '../../constants';
+import type { ESignDateSignedOffsetSettingsRule } from '../../interface/types';
+
+/**
+ * Product limit: rules (the conditioned rules managed here, plus the trailing else row that
+ * lives outside this array) may not exceed this total.
+ */
+export const MAX_ESIGN_OFFSET_RULES = 5;
+
+export const createESignOffsetRule = (): ESignDateSignedOffsetSettingsRule => ({
+    days: 0,
+    condition: { behavior: 'show', groups: [defaultGroup()] },
+});
+
+export const canAddESignOffsetRule = (rules: ESignDateSignedOffsetSettingsRule[]): boolean =>
+    rules.length < MAX_ESIGN_OFFSET_RULES - 1;
+
+/** Appends a new rule. No-op past the max. */
+export const addESignOffsetRule = (
+    rules: ESignDateSignedOffsetSettingsRule[],
+): ESignDateSignedOffsetSettingsRule[] =>
+    canAddESignOffsetRule(rules) ? [...rules, createESignOffsetRule()] : rules;
+
+export const updateESignOffsetRule = (
+    rules: ESignDateSignedOffsetSettingsRule[],
+    index: number,
+    rule: ESignDateSignedOffsetSettingsRule,
+): ESignDateSignedOffsetSettingsRule[] => {
+    const next = [...rules];
+    next[index] = rule;
+    return next;
+};

package/src/utils/conditions/index.ts

@@ -1,2 +1,4 @@
+export * from './condition-match-type.utils';
+export * from './e-sign-offset-rules.utils';
 export * from './evaluate.utils';
 export * from './schema-data-points.utils';

package/src/utils/field/__tests__/field-placeholder-text.utils.test.ts

@@ -1,5 +1,5 @@
 import { FieldTypeEnum, type PdfField } from '../../../interface/types';
-import { getFieldPlaceholderText } from '../field-placeholder-text.utils';
+import { getFieldPlaceholderText, getFillablePaintedLabel } from '../field-placeholder-text.utils';
 
 const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
     id: 'field-1',
@@ -60,3 +60,19 @@ describe('getFieldPlaceholderText', () => {
         expect(subject(buildField({ hideLabel: false, required: true }))).toBe('Field Label *');
     });
 });
+
+describe('getFillablePaintedLabel', () => {
+    const subject = (field: PdfField) => getFillablePaintedLabel(field);
+
+    test('returns the label so editor and fill paint the same adjacent text', () => {
+        expect(subject(buildField({ subType: 'checkbox' }))).toBe('Field Label');
+    });
+
+    test('returns empty when hideLabel is set, including in the authoring overlay', () => {
+        expect(subject(buildField({ subType: 'checkbox', hideLabel: true }))).toBe('');
+    });
+
+    test('treats an absent hideLabel as shown, so pre-existing fields keep their label', () => {
+        expect(subject(buildField({ subType: 'radio' }))).toBe('Field Label');
+    });
+});

package/src/utils/field/field-placeholder-text.utils.ts

@@ -1,11 +1,17 @@
 import { type PdfField } from '../../interface/types';
 
+export const getFillablePaintedLabel = (field: PdfField) => {
+    return field.hideLabel ? '' : field.label || '';
+};
+
 export const getFieldPlaceholderText = (field: PdfField, prefix?: string): string => {
-    // A hidden label takes its required marker with it - a lone '*' floating in an otherwise empty box
-    // reads as stray ink on the document, not as a hint. Any prefix stays: it is a format hint supplied
-    // by the caller (e.g. 'mm/dd/yyyy'), not part of the label.
+    /*
+     * A hidden label takes its required marker with it - a lone '*' floating in an otherwise empty box
+     * reads as stray ink on the document, not as a hint. Any prefix stays: it is a format hint supplied
+     * by the caller (e.g. 'mm/dd/yyyy'), not part of the label.
+     */
     const requiredIndicator = field.required && !field.hideLabel ? '*' : '';
-    const label = field.hideLabel ? '' : field.label || '';
+    const label = getFillablePaintedLabel(field);
     const parts = [prefix, label, requiredIndicator].filter(Boolean);
     return parts.join(' ');
 };