@servicetitan/dte-pdf-editor 1.51.0 → 1.53.0

package/src/components/field-config-panel/field-config-panel-overlay.tsx

@@ -20,6 +20,10 @@ interface FieldConfigPanelOverlayProps {
     recipients?: RecipientInfo[];
     hideConditionalLogic?: boolean;
     onFieldConfigChange(updates: Partial<PdfField>): void;
+    onMatchingFieldsConfigChange?(
+        predicate: (field: PdfField) => boolean,
+        updates: Partial<PdfField>,
+    ): void;
     onDeleteField(): void;
     onDeselectField?(): void;
     onRequestFormFields(formId: number): void;
@@ -35,6 +39,7 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
     onDeleteField,
     onDeselectField,
     onFieldConfigChange,
+    onMatchingFieldsConfigChange,
     onRequestFormFields,
     recipients,
     selectedField,
@@ -67,6 +72,7 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
                     formulaLoadingFormId={formulaLoadingFormId}
                     recipients={recipients}
                     onFieldConfigChange={onFieldConfigChange}
+                    onMatchingFieldsConfigChange={onMatchingFieldsConfigChange}
                     onDeleteField={onDeleteField}
                     hideConditionalLogic={hideConditionalLogic}
                     onRequestFormFields={onRequestFormFields}

package/src/components/field-config-panel/field-config-panel.tsx

@@ -14,6 +14,7 @@ import {
     generateESignPath,
     generateFillablePath,
     getFieldFontSize,
+    parseFillablePathName,
     supportsFieldFontSize,
 } from '../../utils';
 import { DisplayCondition } from '../display-conditions/display-condition';
@@ -31,6 +32,10 @@ interface FieldConfigPanelProps {
     hideConditionalLogic?: boolean;
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
+    onMatchingFieldsConfigChange?(
+        predicate: (field: PdfField) => boolean,
+        updates: Partial<PdfField>,
+    ): void;
     onRequestFormFields(formId: number): void;
 }
 
@@ -44,6 +49,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
     hideConditionalLogic = false,
     onDeleteField,
     onFieldConfigChange,
+    onMatchingFieldsConfigChange,
     onRequestFormFields,
     recipients = [],
 }) => {
@@ -61,20 +67,42 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         [recipientOptions, field.recipient],
     );
 
+    const isRadioGroupSibling = (documentField: PdfField) =>
+        documentField.subType === 'radio' && documentField.path === field.path;
+
     const handleRecipientChange = (item: { id: string; name: string } | null) => {
-        if (item) {
-            let path = field.path;
-            if (field.type === FieldTypeEnum.eSign) {
-                path = generateESignPath(item.id, field.subType as ESignFieldType);
-            }
-            if (field.type === FieldTypeEnum.fillable) {
-                path = generateFillablePath(item.id, field.id);
-            }
-            onFieldConfigChange({
-                recipient: item.id,
-                path,
-            });
+        if (!item) {
+            return;
+        }
+
+        let path = field.path;
+        if (field.type === FieldTypeEnum.eSign) {
+            path = generateESignPath(item.id, field.subType as ESignFieldType);
+        }
+        if (field.type === FieldTypeEnum.fillable) {
+            const pathName =
+                field.subType === 'radio' && field.path
+                    ? parseFillablePathName(field.path)
+                    : field.id;
+            path = generateFillablePath(item.id, pathName);
+        }
+
+        const updates = {
+            recipient: item.id,
+            path,
+        };
+
+        if (
+            field.type === FieldTypeEnum.fillable &&
+            field.subType === 'radio' &&
+            field.path &&
+            onMatchingFieldsConfigChange
+        ) {
+            onMatchingFieldsConfigChange(isRadioGroupSibling, updates);
+            return;
         }
+
+        onFieldConfigChange(updates);
     };
 
     const selectedESignFieldType = useMemo(
@@ -104,6 +132,19 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         }
     };
 
+    const handleRadioGroupNameChange = (groupName: string) => {
+        if (!field.path) {
+            return;
+        }
+
+        if (onMatchingFieldsConfigChange) {
+            onMatchingFieldsConfigChange(isRadioGroupSibling, { groupName });
+            return;
+        }
+
+        onFieldConfigChange({ groupName });
+    };
+
     return (
         <Flex direction="column" gap="4">
             {[
@@ -123,6 +164,14 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     }
                 />
             )}
+            {field.type === FieldTypeEnum.fillable && field.subType === 'radio' && (
+                <TextField
+                    required
+                    label="Radio Group Name"
+                    value={field.groupName!}
+                    onChange={e => handleRadioGroupNameChange(e.target.value)}
+                />
+            )}
             {(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (
                 <Combobox
                     items={recipientOptions}

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

@@ -87,6 +87,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     formulaLoadingFormId={formFields.formulaLoadingFormId}
                     selectedField={pdfFieldSelection.selectedField}
                     onFieldConfigChange={pdfFieldSelection.updateField}
+                    onMatchingFieldsConfigChange={pdfFieldSelection.updateMatchingFields}
                     onDeleteField={pdfFieldSelection.deleteSelectedField}
                     recipients={recipients}
                     onDeselectField={pdfFieldSelection.deselectField}

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

@@ -5,6 +5,7 @@ import { dateToUtcZero, getFieldPlaceholderText, toDateInputValue } from '../../
 interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
+    readOnly?: boolean;
     fillingBy?: string[];
     viewMode?: PdfViewMode;
     onDataChange?(changedData: DataChangePayload, field: PdfField): void;
@@ -14,6 +15,7 @@ interface FillableTextInputProps {
     field: PdfField;
     value: string;
     disabled: boolean;
+    readOnly?: boolean;
     onChange(value: string): void;
 }
 
@@ -29,10 +31,12 @@ export const FillableTextInput: FC<FillableTextInputProps> = ({
     disabled,
     field,
     onChange,
+    readOnly,
     value,
 }) => {
     return (
         <input
+            readOnly={readOnly}
             type="text"
             style={fillableTextStyles}
             disabled={disabled}
@@ -49,10 +53,12 @@ export const FillableTextareaInput: FC<FillableTextInputProps> = ({
     disabled,
     field,
     onChange,
+    readOnly,
     value,
 }) => {
     return (
         <textarea
+            readOnly={readOnly}
             style={{ ...fillableTextStyles, resize: 'none' }}
             disabled={disabled}
             id={field.path}
@@ -69,6 +75,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     field,
     fillingBy,
     onDataChange,
+    readOnly,
     viewMode,
 }) => {
     const resolvedValue = data?.[field.path!];
@@ -76,7 +83,12 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     const isFillable =
         viewMode === 'preview' ? true : viewMode === 'fill' ? false : isViewByCurrentRecipient;
 
+    const isInputDisabled = !isFillable || !!readOnly;
+
     const handleDataChange = (fieldValue: DataChangePayload[string]) => {
+        if (readOnly) {
+            return;
+        }
         const changedData = { [field.path!]: fieldValue };
         onDataChange?.(changedData, field);
     };
@@ -101,9 +113,9 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     }}
                     type="checkbox"
                     checked={resolvedValue ?? false}
-                    disabled={!isFillable}
+                    disabled={isInputDisabled}
                     name={field.path}
-                    onChange={e => handleDataChange?.(e!.target.checked)}
+                    onChange={e => handleDataChange(e.target.checked)}
                 />
                 {field.label}
             </div>
@@ -131,7 +143,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     type="radio"
                     value={field.id}
                     checked={resolvedValue === field.id}
-                    disabled={!isFillable}
+                    disabled={isInputDisabled}
                     name={field.path}
                     onChange={() => handleDataChange(field.id)}
                 />
@@ -144,6 +156,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
         const dateInputValue = toDateInputValue(resolvedValue);
         return (
             <input
+                readOnly={readOnly}
                 type="date"
                 style={{
                     background: 'inherit',
@@ -168,6 +181,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     if (field.subType === 'number') {
         return (
             <input
+                readOnly={readOnly}
                 type="number"
                 style={{
                     background: 'inherit',
@@ -189,6 +203,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     const TextComponent = field.multiline ? FillableTextareaInput : FillableTextInput;
     return (
         <TextComponent
+            readOnly={readOnly}
             field={field}
             value={resolvedValue ?? ''}
             disabled={!isFillable}

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

@@ -25,13 +25,18 @@ export interface PdfViewProps {
     data?: DataModelValues;
     pdfUrl: string;
     loading?: boolean;
+    /**
+     * If true, all fillable fields will be readonly.
+     * This is useful for previewing the form without allowing any changes.
+     */
+    makeFillableFieldsReadonly?: boolean;
     /**
      * UTC date strings (e.g. `'2026-03-17T00:00:00Z'`) treated as non-business days.
      * When provided, date-based calculated fields skip weekends and these holidays
      * when adding/subtracting days or computing date differences.
      */
     holidays?: string[];
-    /*
+    /**
      * fillingBy defines the list of recipient names
      * who are allowed to fill this field.
      * This restriction is enforced only in 'fill' mode
@@ -54,6 +59,7 @@ export const PdfView: FC<PdfViewProps> = ({
     holidays,
     loading = false,
     loadingPlaceholder,
+    makeFillableFieldsReadonly = false,
     onDataChange,
     onLoadSuccess,
     pdfUrl,
@@ -122,6 +128,7 @@ export const PdfView: FC<PdfViewProps> = ({
                                     <PdfViewFillable
                                         data={viewMode === 'preview' ? previewData : data}
                                         field={field}
+                                        readOnly={makeFillableFieldsReadonly}
                                         fillingBy={fillingBy}
                                         viewMode={viewMode}
                                         onDataChange={handleDataChange}

package/src/hooks/usePdfFieldDnD.ts

@@ -43,6 +43,11 @@ const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField
             recipient: recipientName,
             required: false,
             path: generateFillablePath(recipientName, uuidv4()),
+            ...(base.subType === 'radio'
+                ? {
+                      groupName: `Radio Group ${uuidv4()}`,
+                  }
+                : {}),
             ...(defaultSize && {
                 width: defaultSize.width,
                 height: defaultSize.height,

package/src/hooks/usePdfFieldSelection.ts

@@ -26,6 +26,13 @@ export const usePdfFieldSelection = (
         onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
     };
 
+    const updateMatchingFields = (
+        predicate: (field: PdfField) => boolean,
+        updates: Partial<PdfField>,
+    ) => {
+        onFieldsChange(fields.map(f => (predicate(f) ? { ...f, ...updates } : f)));
+    };
+
     const deleteSelectedField = () => {
         if (!selectedFieldId) {
             return;
@@ -47,6 +54,7 @@ export const usePdfFieldSelection = (
         selectField,
         deselectField,
         updateField,
+        updateMatchingFields,
         deleteSelectedField,
         moveField,
         resizeField,

package/src/interface/types.ts

@@ -89,6 +89,7 @@ export interface PdfField {
     y: number;
     page: number;
     label: string;
+    groupName?: string;
     width: number;
     height: number;
     required?: boolean;
@@ -187,6 +188,7 @@ export interface SchemaFieldBaseOptions {
     useInCalculatedFields?: boolean;
     useInConditionals?: boolean;
     isHighlighted?: boolean;
+    fieldLookupSource?: string;
 }
 
 interface SchemaNodeProps {
@@ -280,12 +282,25 @@ export type ConditionOperator =
     | (typeof STRING_OPERATORS)[number]['value']
     | (typeof NUMBER_OPERATORS)[number]['value'];
 
+/** Operators for radio-group fillable fields. */
+export const RADIO_OPERATORS = [
+    { label: 'Is equal to', value: 'is_equal_to' },
+    { label: 'Is not equal to', value: 'is_not_equal_to' },
+] as const;
+
 /** Operators that do not require a value (empty/is not empty) */
 export const VALUE_LESS_OPERATORS: ConditionOperator[] = ['is_empty', 'is_not_empty'];
 
+export interface RadioGroupOption {
+    id: string;
+    label: string;
+}
+
 export interface DataPointOption {
     fieldType: 'number' | 'string';
     fullKey: string;
     title: string;
     formSnapshot?: FormulaFieldFormSnapshot;
+    isRadioGroup?: boolean;
+    radioOptions?: RadioGroupOption[];
 }

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

@@ -122,6 +122,41 @@ describe('getDocumentFieldsDataPointOptions', () => {
             { fieldType: 'string', fullKey: 'fillable_a_b', title: 'fillable_a_b' },
         ]);
     });
+
+    test('groups radio fields with the same path into a single option using groupName', () => {
+        const sharedPath = 'fillable_signer1_payment';
+        const fields = [
+            buildField({
+                id: 'radio-yes',
+                path: sharedPath,
+                subType: 'radio',
+                label: 'Yes',
+                groupName: 'Payment Method',
+            }),
+            buildField({
+                id: 'radio-no',
+                path: sharedPath,
+                subType: 'radio',
+                label: 'No',
+                groupName: 'Payment Method',
+            }),
+            buildField({ id: 'text-1', path: 'fillable_signer1_name', label: 'Name', subType: 'text' }),
+        ];
+
+        expect(subject(fields)).toEqual([
+            { fieldType: 'string', fullKey: 'fillable_signer1_name', title: 'Name' },
+            {
+                fieldType: 'string',
+                fullKey: sharedPath,
+                title: 'Payment Method',
+                isRadioGroup: true,
+                radioOptions: [
+                    { id: 'radio-no', label: 'No' },
+                    { id: 'radio-yes', label: 'Yes' },
+                ],
+            },
+        ]);
+    });
 });
 
 describe('getDataPointOptions', () => {

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

@@ -58,6 +58,7 @@ export function getSchemaDataPointOptions(schema: SchemaObject | undefined): Dat
 /**
  * Data point options from document fields: fillable only (no calculated fields).
  * Uses field.path as fullKey so condition evaluation can read from the same data object.
+ * Radio buttons sharing the same path are grouped into a single option using groupName.
  */
 export function getDocumentFieldsDataPointOptions(
     fields: PdfField[] | undefined,
@@ -66,17 +67,47 @@ export function getDocumentFieldsDataPointOptions(
         return [];
     }
     const result: DataPointOption[] = [];
-    for (const f of fields) {
-        if (!f.path || f.type !== FieldTypeEnum.fillable) {
+    const radioGroupsByPath = new Map<string, PdfField[]>();
+
+    for (const field of fields) {
+        if (!field.path || field.type !== FieldTypeEnum.fillable) {
+            continue;
+        }
+        if (field.subType === 'radio') {
+            const group = radioGroupsByPath.get(field.path) ?? [];
+            group.push(field);
+            radioGroupsByPath.set(field.path, group);
             continue;
         }
-        const fieldType = f.subType === 'number' ? 'number' : 'string';
+        const fieldType = field.subType === 'number' ? 'number' : 'string';
         result.push({
             fieldType,
-            fullKey: f.path,
-            title: f.label || f.path,
+            fullKey: field.path,
+            title: field.label || field.path,
         });
     }
+
+    for (const [path, radioFields] of radioGroupsByPath) {
+        const sortedRadioFields = [...radioFields].sort((a, b) =>
+            (a.label || '').localeCompare(b.label || ''),
+        );
+        const groupName =
+            sortedRadioFields.find(radioField => radioField.groupName)?.groupName ??
+            sortedRadioFields[0]?.label ??
+            path;
+
+        result.push({
+            fieldType: 'string',
+            fullKey: path,
+            title: groupName,
+            isRadioGroup: true,
+            radioOptions: sortedRadioFields.map(radioField => ({
+                id: radioField.id,
+                label: radioField.label || radioField.id,
+            })),
+        });
+    }
+
     return result.sort((a, b) => a.title.localeCompare(b.title));
 }