@servicetitan/dte-pdf-editor 1.45.0 → 1.47.0

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

@@ -1,30 +1,79 @@
 import { FC } from 'react';
-import { DataChangePayload, DataModelValues, PdfField, PreviewMode } from '../../interface/types';
+import { DataChangePayload, DataModelValues, PdfField, PdfViewMode } from '../../interface/types';
 import { dateToUtcZero, getFieldPlaceholderText, toDateInputValue } from '../../utils';
 
 interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
     fillingBy?: string[];
-    previewMode?: PreviewMode;
+    viewMode?: PdfViewMode;
     onDataChange?(changedData: DataChangePayload, field: PdfField): void;
 }
 
+interface FillableTextInputProps {
+    field: PdfField;
+    value: string;
+    disabled: boolean;
+    onChange(value: string): void;
+}
+
+const fillableTextStyles = {
+    background: 'inherit',
+    width: 'inherit',
+    height: 'inherit',
+    borderColor: 'inherit',
+} as const;
+
+export const FillableTextInput: FC<FillableTextInputProps> = ({
+    disabled,
+    field,
+    onChange,
+    value,
+}) => {
+    return (
+        <input
+            type="text"
+            style={fillableTextStyles}
+            disabled={disabled}
+            id={field.path}
+            name={field.path}
+            value={value}
+            onChange={e => onChange(e.target.value)}
+            placeholder={getFieldPlaceholderText(field)}
+        />
+    );
+};
+
+export const FillableTextareaInput: FC<FillableTextInputProps> = ({
+    disabled,
+    field,
+    onChange,
+    value,
+}) => {
+    return (
+        <textarea
+            style={{ ...fillableTextStyles, resize: 'none' }}
+            disabled={disabled}
+            id={field.path}
+            name={field.path}
+            value={value}
+            onChange={e => onChange(e.target.value)}
+            placeholder={getFieldPlaceholderText(field)}
+        />
+    );
+};
+
 export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     data,
     field,
     fillingBy,
     onDataChange,
-    previewMode,
+    viewMode,
 }) => {
     const resolvedValue = data?.[field.path!];
     const isViewByCurrentRecipient = fillingBy?.includes(field.recipient!);
     const isFillable =
-        previewMode === 'fillable'
-            ? true
-            : previewMode === 'view'
-              ? false
-              : isViewByCurrentRecipient;
+        viewMode === 'preview' ? true : viewMode === 'fill' ? false : isViewByCurrentRecipient;
 
     const handleDataChange = (fieldValue: DataChangePayload[string]) => {
         const changedData = { [field.path!]: fieldValue };
@@ -134,21 +183,13 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
         );
     }
 
+    const TextComponent = field.multiline ? FillableTextareaInput : FillableTextInput;
     return (
-        <input
-            type="text"
-            style={{
-                background: 'inherit',
-                width: 'inherit',
-                height: 'inherit',
-                borderColor: 'inherit',
-            }}
-            disabled={!isFillable}
-            id={field.path}
-            name={field.path}
+        <TextComponent
+            field={field}
             value={resolvedValue ?? ''}
-            onChange={e => handleDataChange(e.target.value)}
-            placeholder={getFieldPlaceholderText(field)}
+            disabled={!isFillable}
+            onChange={handleDataChange}
         />
     );
 };

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

@@ -6,7 +6,7 @@ import {
     DataModelValues,
     FieldTypeEnum,
     PdfField,
-    PreviewMode,
+    PdfViewMode,
     RecipientInfo,
 } from '../../interface/types';
 import { mapColorsToRecipients } from '../../utils';
@@ -21,7 +21,7 @@ import { PdfViewGeneric } from './pdf-view-generic';
 export interface PdfViewProps {
     fields: PdfField[];
     errors?: Record<string, string>;
-    previewMode?: PreviewMode;
+    viewMode?: PdfViewMode;
     data?: DataModelValues;
     pdfUrl: string;
     loading?: boolean;
@@ -34,8 +34,8 @@ export interface PdfViewProps {
     /*
      * fillingBy defines the list of recipient names
      * who are allowed to fill this field.
-     * This restriction is enforced only when PreviewMode
-     * is NOT active (i.e., during actual form filling).
+     * This restriction is enforced only in 'fill' mode
+     * (i.e., during actual form filling), not in 'preview' mode.
      */
     fillingBy?: string[];
     loadingPlaceholder?: ReactNode;
@@ -57,8 +57,8 @@ export const PdfView: FC<PdfViewProps> = ({
     onDataChange,
     onLoadSuccess,
     pdfUrl,
-    previewMode,
     recipients,
+    viewMode,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
     const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
@@ -71,7 +71,7 @@ export const PdfView: FC<PdfViewProps> = ({
     };
 
     const handleDataChange = (data: DataChangePayload, field: PdfField) => {
-        if (previewMode === 'fillable') {
+        if (viewMode === 'preview') {
             setPreviewData(prev => ({
                 ...prev,
                 ...data,
@@ -98,7 +98,7 @@ export const PdfView: FC<PdfViewProps> = ({
                             <PdfViewFieldContainer
                                 key={field.id}
                                 field={field}
-                                data={previewMode === 'fillable' ? previewData : data}
+                                data={viewMode === 'preview' ? previewData : data}
                                 error={errors[field.path!] || ''}
                                 recipientsColors={recipientsColors}
                                 pdfWrapperRef={pdfWrapperRef}
@@ -113,16 +113,17 @@ export const PdfView: FC<PdfViewProps> = ({
                                 {field.type === FieldTypeEnum.calculated && (
                                     <PdfViewCalculated
                                         field={field}
-                                        data={previewMode === 'fillable' ? previewData : data}
+                                        data={viewMode === 'preview' ? previewData : data}
                                         holidays={holidays}
+                                        viewMode={viewMode}
                                     />
                                 )}
                                 {field.type === FieldTypeEnum.fillable && (
                                     <PdfViewFillable
-                                        data={previewMode === 'fillable' ? previewData : data}
+                                        data={viewMode === 'preview' ? previewData : data}
                                         field={field}
                                         fillingBy={fillingBy}
-                                        previewMode={previewMode}
+                                        viewMode={viewMode}
                                         onDataChange={handleDataChange}
                                     />
                                 )}

package/src/interface/types.ts

@@ -96,6 +96,7 @@ export interface PdfField {
     formula?: StructuredFormula;
     formulaFormat?: CalculatedFieldFormat;
     displayCondition?: DisplayConditionState | null;
+    multiline?: boolean;
 }
 
 export type SchemaFieldType = 'number' | 'date';
@@ -228,19 +229,20 @@ export interface DataChangePayload {
 }
 
 /*
- * PreviewMode controls how the form is displayed:
+ * PdfViewMode controls who is interacting with the PDF and how:
  *
- * - 'fillable':
- *   Allows the user to fill all fillable fields,
- *   but the data is NOT saved — it’s only for previewing
- *   how the form will look when filled.
+ * - 'preview':
+ *   Author/admin preview. All fields are visible and interactive so
+ *   the admin can try out the form and see its behavior, but data is
+ *   NOT persisted. Recipient scoping is ignored.
  *
- * - 'view':
- *   Does NOT allow editing any fields.
- *   Fields are shown as read-only, and if a value exists,
- *   it is displayed.
+ * - 'fill':
+ *   Real recipient fill experience. Only the current recipient's own
+ *   empty fields are editable. Fields owned by other recipients are
+ *   hidden if empty, or shown read-only if already filled.
+ *   Already-filled values from any recipient are shown read-only.
  */
-export type PreviewMode = 'fillable' | 'view';
+export type PdfViewMode = 'preview' | 'fill';
 
 /**
  * Display condition types for the Rules and Conditions modal and evaluation.

package/src/styles/generic.css

@@ -1,3 +1,9 @@
 .full-width {
     width: 100%;
 }
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/styles/inline-editable.css

@@ -17,4 +17,5 @@
 
 .inline-editable-html-text {
     margin: var(--spacing-0, 0);
+    white-space: pre-wrap;
 }

package/src/utils/conditions/__tests__/evaluate.utils.test.ts

@@ -0,0 +1,163 @@
+import {
+    DisplayConditionSingle,
+    DisplayConditionState,
+} from '../../../interface/types';
+import { evaluateDisplayCondition } from '../evaluate.utils';
+
+const buildCondition = (overrides: Partial<DisplayConditionSingle> = {}): DisplayConditionSingle => ({
+    id: 'c1',
+    dataPointKey: 'name',
+    operator: 'is_equal_to',
+    value: 'John',
+    ...overrides,
+});
+
+const buildState = (
+    conditions: DisplayConditionSingle[],
+    behavior: DisplayConditionState['behavior'] = 'show',
+): DisplayConditionState => ({
+    behavior,
+    groups: [{ id: 'g1', conditions }],
+});
+
+describe('evaluateDisplayCondition', () => {
+    const subject = (state: DisplayConditionState, data: Record<string, unknown> | undefined) =>
+        evaluateDisplayCondition(state, data);
+
+    describe('when no valid conditions exist', () => {
+        test('returns true when groups have no usable conditions', () => {
+            const state = buildState([buildCondition({ dataPointKey: '', value: '' })]);
+            expect(subject(state, { name: 'John' })).toBe(true);
+        });
+
+        test('returns true when state has no groups', () => {
+            expect(subject({ behavior: 'show', groups: [] }, {})).toBe(true);
+        });
+    });
+
+    describe('with string operators', () => {
+        test.each([
+            ['is_equal_to', 'John', 'John', true],
+            ['is_equal_to', 'John', 'Jane', false],
+            ['is_not_equal_to', 'John', 'Jane', true],
+            ['is_not_equal_to', 'John', 'John', false],
+            ['contains', 'John Doe', 'Doe', true],
+            ['contains', 'John', 'Doe', false],
+            ['does_not_contain', 'John', 'Doe', true],
+            ['does_not_contain', 'John Doe', 'Doe', false],
+            ['starts_with', 'John', 'Jo', true],
+            ['starts_with', 'John', 'Do', false],
+            ['ends_with', 'John', 'hn', true],
+            ['ends_with', 'John', 'Do', false],
+        ])('%s "%s" vs "%s" returns %s', (operator, actual, expected, result) => {
+            const state = buildState([
+                buildCondition({ operator, value: expected }),
+            ]);
+            expect(subject(state, { name: actual })).toBe(result);
+        });
+    });
+
+    describe('with valueless operators', () => {
+        test.each([
+            ['is_empty', '', '', true],
+            ['is_empty', 'John', '', false],
+            ['is_not_empty', 'John', '', true],
+            ['is_not_empty', '', '', false],
+        ])('%s with actual "%s" returns %s', (operator, actual, value, expected) => {
+            const state = buildState([buildCondition({ operator, value })]);
+            expect(subject(state, { name: actual })).toBe(expected);
+        });
+    });
+
+    describe('with numeric operators', () => {
+        test.each([
+            ['num_eq', 5, '5', true],
+            ['num_eq', 5, '6', false],
+            ['num_neq', 5, '6', true],
+            ['num_gt', 10, '5', true],
+            ['num_gt', 5, '10', false],
+            ['num_lt', 5, '10', true],
+            ['num_gte', 5, '5', true],
+            ['num_gte', 4, '5', false],
+            ['num_lte', 5, '5', true],
+            ['num_lte', 6, '5', false],
+        ])('%s with %p vs "%s" returns %s', (operator, actual, value, expected) => {
+            const state = buildState([
+                buildCondition({ dataPointKey: 'amount', operator, value }),
+            ]);
+            expect(subject(state, { amount: actual })).toBe(expected);
+        });
+    });
+
+    describe('with nested data', () => {
+        test('reads value at nested path', () => {
+            const state = buildState([
+                buildCondition({ dataPointKey: 'user.name', value: 'John' }),
+            ]);
+            expect(subject(state, { user: { name: 'John' } })).toBe(true);
+        });
+
+        test('treats missing value as empty string', () => {
+            const state = buildState([
+                buildCondition({ dataPointKey: 'user.name', operator: 'is_empty', value: '' }),
+            ]);
+            expect(subject(state, { user: {} })).toBe(true);
+        });
+    });
+
+    describe('with multiple conditions in a group', () => {
+        test('combines conditions with AND when next has logicalOperator and', () => {
+            const state = buildState([
+                buildCondition({ dataPointKey: 'a', value: '1' }),
+                buildCondition({ id: 'c2', dataPointKey: 'b', value: '2', logicalOperator: 'and' }),
+            ]);
+            expect(subject(state, { a: '1', b: '2' })).toBe(true);
+            expect(subject(state, { a: '1', b: '3' })).toBe(false);
+        });
+
+        test('combines conditions with OR when next has logicalOperator or', () => {
+            const state = buildState([
+                buildCondition({ dataPointKey: 'a', value: '1' }),
+                buildCondition({ id: 'c2', dataPointKey: 'b', value: '2', logicalOperator: 'or' }),
+            ]);
+            expect(subject(state, { a: '0', b: '2' })).toBe(true);
+            expect(subject(state, { a: '0', b: '0' })).toBe(false);
+        });
+    });
+
+    describe('with multiple groups', () => {
+        const state: DisplayConditionState = {
+            behavior: 'show',
+            groups: [
+                {
+                    id: 'g1',
+                    conditions: [buildCondition({ dataPointKey: 'a', value: '1' })],
+                },
+                {
+                    id: 'g2',
+                    logicalOperator: 'or',
+                    conditions: [buildCondition({ id: 'c2', dataPointKey: 'b', value: '2' })],
+                },
+            ],
+        };
+
+        test('returns true when either group matches with OR logic', () => {
+            expect(subject(state, { a: '0', b: '2' })).toBe(true);
+        });
+
+        test('returns false when neither group matches with OR logic', () => {
+            expect(subject(state, { a: '0', b: '0' })).toBe(false);
+        });
+    });
+
+    describe('with hide behavior', () => {
+        test('inverts result when behavior is hide', () => {
+            const state = buildState(
+                [buildCondition({ dataPointKey: 'name', value: 'John' })],
+                'hide',
+            );
+            expect(subject(state, { name: 'John' })).toBe(false);
+            expect(subject(state, { name: 'Jane' })).toBe(true);
+        });
+    });
+});

package/src/utils/conditions/__tests__/schema-data-points.utils.test.ts

@@ -0,0 +1,149 @@
+import { FieldTypeEnum, PdfField, SchemaObject } from '../../../interface/types';
+import {
+    getDataPointOptions,
+    getDocumentFieldsDataPointOptions,
+    getSchemaDataPointOptions,
+} from '../schema-data-points.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'f1',
+    type: FieldTypeEnum.fillable,
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 100,
+    height: 25,
+    ...overrides,
+});
+
+describe('getSchemaDataPointOptions', () => {
+    const subject = (schema: SchemaObject | undefined) => getSchemaDataPointOptions(schema);
+
+    test('returns empty array when schema is undefined', () => {
+        expect(subject(undefined)).toEqual([]);
+    });
+
+    test('returns empty array when schema has no properties', () => {
+        expect(subject({ type: 'object', properties: {} })).toEqual([]);
+    });
+
+    test('returns only nodes flagged with useInConditionals or useInCalculatedFields', () => {
+        const schema: SchemaObject = {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    options: { useInConditionals: true },
+                },
+                age: {
+                    type: 'number',
+                    title: 'Age',
+                    options: { useInCalculatedFields: true },
+                },
+                hiddenField: { type: 'string', title: 'Hidden' },
+            },
+        };
+        expect(subject(schema)).toEqual([
+            { fieldType: 'number', fullKey: 'age', title: 'Age' },
+            { fieldType: 'string', fullKey: 'name', title: 'Name' },
+        ]);
+    });
+
+    test('walks nested objects and joins titles with dash', () => {
+        const schema: SchemaObject = {
+            type: 'object',
+            properties: {
+                user: {
+                    type: 'object',
+                    title: 'User',
+                    properties: {
+                        name: {
+                            type: 'string',
+                            title: 'Name',
+                            options: { useInConditionals: true },
+                        },
+                    },
+                },
+            },
+        };
+        expect(subject(schema)).toEqual([
+            { fieldType: 'string', fullKey: 'user.name', title: 'User - Name' },
+        ]);
+    });
+
+    test('returns options sorted alphabetically by title', () => {
+        const schema: SchemaObject = {
+            type: 'object',
+            properties: {
+                zebra: {
+                    type: 'string',
+                    title: 'Zebra',
+                    options: { useInConditionals: true },
+                },
+                alpha: {
+                    type: 'string',
+                    title: 'Alpha',
+                    options: { useInConditionals: true },
+                },
+            },
+        };
+        expect(subject(schema).map(o => o.title)).toEqual(['Alpha', 'Zebra']);
+    });
+});
+
+describe('getDocumentFieldsDataPointOptions', () => {
+    const subject = (fields: PdfField[] | undefined) => getDocumentFieldsDataPointOptions(fields);
+
+    test.each([
+        ['undefined', undefined],
+        ['empty array', []],
+    ])('returns empty array when fields is %s', (_, fields) => {
+        expect(subject(fields)).toEqual([]);
+    });
+
+    test('includes only fillable fields with a path', () => {
+        const fields = [
+            buildField({ id: '1', path: 'fillable_a_b', label: 'Alpha', subType: 'text' }),
+            buildField({ id: '2', path: 'fillable_c_d', label: 'Number', subType: 'number' }),
+            buildField({ id: '3', label: 'No Path' }),
+            buildField({ id: '4', path: 'esign_x_y', type: FieldTypeEnum.eSign, label: 'Sig' }),
+        ];
+        expect(subject(fields)).toEqual([
+            { fieldType: 'string', fullKey: 'fillable_a_b', title: 'Alpha' },
+            { fieldType: 'number', fullKey: 'fillable_c_d', title: 'Number' },
+        ]);
+    });
+
+    test('falls back to path when label is empty', () => {
+        const fields = [buildField({ path: 'fillable_a_b', label: '' })];
+        expect(subject(fields)).toEqual([
+            { fieldType: 'string', fullKey: 'fillable_a_b', title: 'fillable_a_b' },
+        ]);
+    });
+});
+
+describe('getDataPointOptions', () => {
+    const subject = (schema: SchemaObject | undefined, documentFields: PdfField[] | undefined) =>
+        getDataPointOptions(schema, documentFields);
+
+    test('merges schema and document field options sorted by title', () => {
+        const schema: SchemaObject = {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                    options: { useInConditionals: true },
+                },
+            },
+        };
+        const fields = [buildField({ path: 'fillable_a_b', label: 'Address' })];
+
+        expect(subject(schema, fields)).toEqual([
+            { fieldType: 'string', fullKey: 'fillable_a_b', title: 'Address' },
+            { fieldType: 'string', fullKey: 'name', title: 'Name' },
+        ]);
+    });
+});