@servicetitan/dte-pdf-editor 1.41.0 → 1.43.0

package/src/components/display-conditions/condition-row.tsx

@@ -1,19 +1,34 @@
-import { Button, Chip, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import { Button, Chip, Combobox, Flex, Text, TextField } from '@servicetitan/anvil2';
 import TrashIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
     ConditionOperator,
     DataPointOption,
     DisplayConditionSingle,
+    FieldTypeEnum,
+    FormFieldsByFormIdI,
+    FormInfo,
     NUMBER_OPERATORS,
     STRING_OPERATORS,
     VALUE_LESS_OPERATORS,
 } from '../../interface/types';
+import {
+    DisplayConditionSourceKind,
+    formFieldToDisplayConditionDataPointOption,
+    getDisplayConditionFieldTypeForKey,
+    inferDisplayConditionSourceKind,
+    parseFormFieldKey,
+} from '../../utils';
 
 export interface ConditionRowProps {
     canRemove: boolean;
     condition: DisplayConditionSingle;
-    dataPointOptions: DataPointOption[];
+    fillableOptions: DataPointOption[];
+    mergeTagOptions: DataPointOption[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
     onChange: (c: DisplayConditionSingle) => void;
     onRemove: () => void;
 }
@@ -23,6 +38,23 @@ interface OperatorOption {
     value: string;
 }
 
+interface SourceKindOption {
+    value: DisplayConditionSourceKind;
+    label: string;
+}
+
+const SOURCE_KIND_ORDER: DisplayConditionSourceKind[] = [
+    FieldTypeEnum.dataModel,
+    FieldTypeEnum.fillable,
+    FieldTypeEnum.forms,
+];
+
+const SOURCE_KIND_LABELS: Record<DisplayConditionSourceKind, string> = {
+    [FieldTypeEnum.dataModel]: 'Merge tags',
+    [FieldTypeEnum.fillable]: 'Fillable field',
+    [FieldTypeEnum.forms]: 'Form',
+};
+
 function sanitizeNumericInput(raw: string): string {
     let value = raw.replaceAll(/[^0-9.-]/g, '');
     const isNegative = value.startsWith('-');
@@ -37,19 +69,135 @@ function sanitizeNumericInput(raw: string): string {
     return value;
 }
 
+const pickDefaultSourceKind = (options: SourceKindOption[]) => {
+    return options[0]?.value ?? FieldTypeEnum.dataModel;
+};
+
 export function ConditionRow({
     canRemove,
     condition,
-    dataPointOptions,
+    fillableOptions,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    mergeTagOptions,
     onChange,
     onRemove,
+    onRequestFormFields,
 }: Readonly<ConditionRowProps>) {
-    const selectedDataPoint = useMemo(
-        () => dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
-        [dataPointOptions, condition.dataPointKey],
+    const inferredKind = inferDisplayConditionSourceKind(
+        condition.dataPointKey,
+        mergeTagOptions,
+        fillableOptions,
+    );
+
+    const [pendingSourceKind, setPendingSourceKind] = useState<DisplayConditionSourceKind | null>(
+        null,
+    );
+
+    const [pickerForm, setPickerForm] = useState<FormInfo | null>(() => {
+        const parsed = parseFormFieldKey(condition.dataPointKey);
+        if (!parsed || !forms?.length) {
+            return null;
+        }
+        return forms.find(f => f.id === parsed.formId) ?? null;
+    });
+
+    const sourceKindOptions = useMemo((): SourceKindOption[] => {
+        const allowed = new Set<DisplayConditionSourceKind>();
+        if (mergeTagOptions.length) {
+            allowed.add(FieldTypeEnum.dataModel);
+        }
+        if (fillableOptions.length) {
+            allowed.add(FieldTypeEnum.fillable);
+        }
+        if (forms?.length) {
+            allowed.add(FieldTypeEnum.forms);
+        }
+        const inferred = inferDisplayConditionSourceKind(
+            condition.dataPointKey,
+            mergeTagOptions,
+            fillableOptions,
+        );
+        if (inferred) {
+            allowed.add(inferred);
+        }
+        if (parseFormFieldKey(condition.dataPointKey)) {
+            allowed.add(FieldTypeEnum.forms);
+        }
+        return SOURCE_KIND_ORDER.filter(k => allowed.has(k)).map(value => ({
+            value,
+            label: SOURCE_KIND_LABELS[value],
+        }));
+    }, [condition.dataPointKey, fillableOptions, forms, mergeTagOptions]);
+
+    const sourceKind: DisplayConditionSourceKind =
+        inferredKind ?? pendingSourceKind ?? pickDefaultSourceKind(sourceKindOptions);
+
+    useEffect(() => {
+        if (inferredKind) {
+            setPendingSourceKind(null);
+        }
+    }, [inferredKind]);
+
+    const parsedKey = useMemo(
+        () => parseFormFieldKey(condition.dataPointKey),
+        [condition.dataPointKey],
     );
 
-    const fieldType = selectedDataPoint?.fieldType ?? 'string';
+    useEffect(() => {
+        if (parsedKey && forms?.length) {
+            setPickerForm(forms.find(f => f.id === parsedKey.formId) ?? null);
+            return;
+        }
+        if (sourceKind !== FieldTypeEnum.forms) {
+            setPickerForm(null);
+        }
+    }, [parsedKey, forms, sourceKind]);
+
+    useEffect(() => {
+        if (!parsedKey || !onRequestFormFields) {
+            return;
+        }
+        const list = formFieldsByFormId?.[parsedKey.formId];
+        if (!list?.length) {
+            onRequestFormFields(parsedKey.formId);
+        }
+    }, [parsedKey, onRequestFormFields, formFieldsByFormId]);
+
+    const sortedForms = useMemo(
+        () => (forms?.length ? [...forms].sort((a, b) => a.name.localeCompare(b.name)) : []),
+        [forms],
+    );
+
+    const dataPointItems: DataPointOption[] = useMemo(() => {
+        if (sourceKind === FieldTypeEnum.dataModel) {
+            return mergeTagOptions;
+        }
+        if (sourceKind === FieldTypeEnum.fillable) {
+            return fillableOptions;
+        }
+        if (!pickerForm) {
+            return [];
+        }
+        const list = formFieldsByFormId?.[pickerForm.id] ?? [];
+        return list.map(f => formFieldToDisplayConditionDataPointOption(pickerForm, f));
+    }, [sourceKind, mergeTagOptions, fillableOptions, pickerForm, formFieldsByFormId]);
+
+    const fieldType = getDisplayConditionFieldTypeForKey(
+        condition.dataPointKey,
+        mergeTagOptions,
+        fillableOptions,
+        formFieldsByFormId ?? {},
+    );
+
+    const selectedSourceKindOption =
+        sourceKindOptions.find(o => o.value === sourceKind) ?? sourceKindOptions[0] ?? null;
+
+    const selectedDataPoint = useMemo(
+        () => dataPointItems.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
+        [dataPointItems, condition.dataPointKey],
+    );
 
     const operatorItems: OperatorOption[] = useMemo(
         () =>
@@ -71,73 +219,95 @@ export function ConditionRow({
         onChange({ ...condition, value });
     };
 
+    const resetOperatorForFieldType = (nextFieldType: 'number' | 'string') => {
+        const nextOperatorItems = nextFieldType === 'number' ? NUMBER_OPERATORS : STRING_OPERATORS;
+        return !nextOperatorItems.some(op => op.value === condition.operator);
+    };
+
     const handleDataPointChange = (item: DataPointOption | null) => {
         const nextFieldType = item?.fieldType ?? 'string';
-        const nextIsNumber = nextFieldType === 'number';
-        const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
-        const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
+        const operatorReset = resetOperatorForFieldType(nextFieldType);
         onChange({
             ...condition,
             dataPointKey: item?.fullKey ?? '',
+            formSnapshot: item?.formSnapshot,
             operator: operatorReset
-                ? nextIsNumber
+                ? nextFieldType === 'number'
                     ? 'num_eq'
                     : 'is_equal_to'
                 : condition.operator,
         });
     };
 
-    return (
-        <Flex direction="row" alignItems="flex-end" gap="2" flex={1}>
-            <Flex
-                alignItems="flex-end"
-                style={{
-                    padding: '8px 12px',
-                }}
-            >
-                <Chip label="IF" size="medium" />
-            </Flex>
-            <Flex flex={1}>
-                <Combobox
-                    flex={1}
-                    itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
-                    itemToString={(item: DataPointOption | null) => item?.title ?? ''}
-                    items={dataPointOptions}
-                    selectedItem={selectedDataPoint}
-                    onChange={handleDataPointChange}
-                >
-                    <Combobox.SelectTrigger label="Data point" placeholder="Select data point..." />
-                    <Combobox.Content>
-                        {({ items }: { items: DataPointOption[] }) => (
-                            <Combobox.List>
-                                {items.map((item, i) => (
-                                    <Combobox.Item index={i} item={item} key={item.fullKey}>
-                                        {item.title}
-                                    </Combobox.Item>
-                                ))}
-                            </Combobox.List>
-                        )}
-                    </Combobox.Content>
-                </Combobox>
+    const handleSourceKindChange = (item: SourceKindOption | null) => {
+        const next = item?.value;
+        if (!next) {
+            return;
+        }
+        setPendingSourceKind(next);
+        setPickerForm(null);
+        onChange({
+            ...condition,
+            dataPointKey: '',
+            formSnapshot: undefined,
+            operator: 'is_equal_to',
+            value: '',
+        });
+    };
+
+    const handlePickerFormChange = (form: FormInfo | null) => {
+        setPickerForm(form);
+        onChange({
+            ...condition,
+            dataPointKey: '',
+            formSnapshot: undefined,
+            operator: 'is_equal_to',
+            value: '',
+        });
+        if (form) {
+            onRequestFormFields?.(form.id);
+        }
+    };
+
+    const isLoadingFormFields =
+        pickerForm != null &&
+        formFieldsLoadingFormId != null &&
+        formFieldsLoadingFormId === pickerForm.id;
+
+    if (!sourceKindOptions.length) {
+        return (
+            <Flex direction="row" alignItems="center" gap="3" flex={1} style={{ flexWrap: 'wrap' }}>
+                <Text flex={1} size="small" subdued variant="body">
+                    Add merge tags (data model), fillable fields on the document, or job forms to
+                    build conditions.
+                </Text>
+                {canRemove && (
+                    <Button
+                        appearance="secondary"
+                        aria-label="Remove condition"
+                        icon={{ before: TrashIcon }}
+                        onClick={onRemove}
+                    />
+                )}
             </Flex>
-            <Flex flex={1}>
+        );
+    }
+
+    return (
+        <Flex direction="column" gap="4" flex={1}>
+            <Flex flex={1} gap="2">
                 <Combobox
                     flex={1}
-                    itemToKey={(item: OperatorOption | null) => item?.value ?? ''}
-                    itemToString={(item: OperatorOption | null) => item?.label ?? ''}
-                    items={operatorItems}
-                    selectedItem={selectedOperator}
-                    onChange={(item: OperatorOption | null) =>
-                        onChange({
-                            ...condition,
-                            operator: (item?.value ??
-                                'is_equal_to') as DisplayConditionSingle['operator'],
-                        })
-                    }
+                    itemToKey={(item: SourceKindOption | null) => item?.value ?? ''}
+                    itemToString={(item: SourceKindOption | null) => item?.label ?? ''}
+                    items={sourceKindOptions}
+                    selectedItem={selectedSourceKindOption}
+                    onChange={handleSourceKindChange}
+                    filterOptions={{ keys: ['label'] }}
                 >
-                    <Combobox.SelectTrigger label="Condition" placeholder="Select..." />
+                    <Combobox.SelectTrigger label="Source" placeholder="Select source..." />
                     <Combobox.Content>
-                        {({ items }: { items: OperatorOption[] }) => (
+                        {({ items }: { items: SourceKindOption[] }) => (
                             <Combobox.List>
                                 {items.map((item, i) => (
                                     <Combobox.Item index={i} item={item} key={item.value}>
@@ -148,35 +318,144 @@ export function ConditionRow({
                         )}
                     </Combobox.Content>
                 </Combobox>
-            </Flex>
-            {!isValueLess && (
-                <Flex flex={1}>
-                    <TextField
-                        label="Value"
+                {sourceKind === FieldTypeEnum.forms && (
+                    <Combobox
                         flex={1}
-                        value={condition.value}
-                        onChange={e => handleValueChange(e.target.value)}
-                        placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
-                        aria-label="Value"
-                        {...(fieldType === 'number' && { inputMode: 'decimal' })}
-                    />
-                </Flex>
-            )}
-            {canRemove && (
+                        itemToKey={(item: FormInfo | null) => String(item?.id ?? '')}
+                        itemToString={(item: FormInfo | null) => item?.name ?? ''}
+                        items={sortedForms}
+                        selectedItem={pickerForm}
+                        onChange={handlePickerFormChange}
+                        filterOptions={{ keys: ['name'] }}
+                    >
+                        <Combobox.SelectTrigger label="Select Form" placeholder="Select form..." />
+                        <Combobox.Content>
+                            {({ items }: { items: FormInfo[] }) => (
+                                <Combobox.List>
+                                    {items.map((item, i) => (
+                                        <Combobox.Item index={i} item={item} key={item.id}>
+                                            {item.name}
+                                        </Combobox.Item>
+                                    ))}
+                                </Combobox.List>
+                            )}
+                        </Combobox.Content>
+                    </Combobox>
+                )}
+            </Flex>
+
+            <Flex
+                direction="row"
+                alignItems="flex-end"
+                gap="2"
+                flex={1}
+                style={{ flexWrap: 'wrap' }}
+            >
                 <Flex
                     alignItems="flex-end"
                     style={{
-                        padding: '6px 12px',
+                        padding: '8px 12px',
                     }}
                 >
-                    <Button
-                        appearance="secondary"
-                        aria-label="Remove condition"
-                        icon={{ before: TrashIcon }}
-                        onClick={onRemove}
-                    />
+                    <Chip label="IF" size="medium" />
+                </Flex>
+
+                <Flex flex={1} style={{ minWidth: 160 }}>
+                    <Combobox
+                        flex={1}
+                        disabled={
+                            sourceKind === FieldTypeEnum.forms &&
+                            (!pickerForm || isLoadingFormFields)
+                        }
+                        itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
+                        itemToString={(item: DataPointOption | null) => item?.title ?? ''}
+                        items={dataPointItems}
+                        selectedItem={selectedDataPoint}
+                        onChange={handleDataPointChange}
+                        filterOptions={{ keys: ['title'] }}
+                    >
+                        <Combobox.SelectTrigger
+                            label="Data point"
+                            placeholder={
+                                sourceKind === FieldTypeEnum.forms && isLoadingFormFields
+                                    ? 'Loading fields...'
+                                    : sourceKind === FieldTypeEnum.forms && !pickerForm
+                                      ? 'Select a form first...'
+                                      : 'Select data point...'
+                            }
+                        />
+                        <Combobox.Content>
+                            {({ items }: { items: DataPointOption[] }) => (
+                                <Combobox.List>
+                                    {items.map((item, i) => (
+                                        <Combobox.Item index={i} item={item} key={item.fullKey}>
+                                            {item.title}
+                                        </Combobox.Item>
+                                    ))}
+                                </Combobox.List>
+                            )}
+                        </Combobox.Content>
+                    </Combobox>
                 </Flex>
-            )}
+                <Flex flex={1} style={{ minWidth: 140 }}>
+                    <Combobox
+                        flex={1}
+                        itemToKey={(item: OperatorOption | null) => item?.value ?? ''}
+                        itemToString={(item: OperatorOption | null) => item?.label ?? ''}
+                        items={operatorItems}
+                        selectedItem={selectedOperator}
+                        onChange={(item: OperatorOption | null) =>
+                            onChange({
+                                ...condition,
+                                operator: (item?.value ??
+                                    'is_equal_to') as DisplayConditionSingle['operator'],
+                            })
+                        }
+                        filterOptions={{ keys: ['label'] }}
+                    >
+                        <Combobox.SelectTrigger label="Condition" placeholder="Select..." />
+                        <Combobox.Content>
+                            {({ items }: { items: OperatorOption[] }) => (
+                                <Combobox.List>
+                                    {items.map((item, i) => (
+                                        <Combobox.Item index={i} item={item} key={item.value}>
+                                            {item.label}
+                                        </Combobox.Item>
+                                    ))}
+                                </Combobox.List>
+                            )}
+                        </Combobox.Content>
+                    </Combobox>
+                </Flex>
+                {!isValueLess && (
+                    <Flex flex={1} style={{ minWidth: 120 }}>
+                        <TextField
+                            label="Value"
+                            flex={1}
+                            value={condition.value}
+                            onChange={e => handleValueChange(e.target.value)}
+                            placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
+                            aria-label="Value"
+                            {...(fieldType === 'number' && { inputMode: 'decimal' })}
+                        />
+                    </Flex>
+                )}
+                {canRemove && (
+                    <Flex
+                        alignItems="flex-end"
+                        style={{
+                            padding: '6px 12px',
+                        }}
+                    >
+                        <Button
+                            appearance="secondary"
+                            aria-label="Remove condition"
+                            icon={{ before: TrashIcon }}
+                            onClick={onRemove}
+                        />
+                    </Flex>
+                )}
+            </Flex>
         </Flex>
     );
 }

package/src/components/display-conditions/display-condition-modal.tsx

@@ -1,8 +1,19 @@
 import { Button, Chip, Dialog, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';
 import { useCallback, useMemo, useState } from 'react';
 import { defaultGroup, defaultState, MODAL_CONTENT_MAX_HEIGHT } from '../../constants';
-import type { DisplayConditionState, PdfField, SchemaObject } from '../../interface/types';
-import { getDataPointOptions, isValidNumber } from '../../utils';
+import type {
+    DisplayConditionState,
+    FormFieldsByFormIdI,
+    FormInfo,
+    PdfField,
+    SchemaObject,
+} from '../../interface/types';
+import {
+    getDisplayConditionFieldTypeForKey,
+    getDocumentFieldsDataPointOptions,
+    getSchemaDataPointOptions,
+    isValidNumber,
+} from '../../utils';
 import { ConditionGroupsSection } from './condition-groups-section';
 
 type ConditionMatchType = 'and' | 'or';
@@ -53,12 +64,20 @@ export interface DisplayConditionModalProps {
     schema?: SchemaObject;
     /** All document fields: fillable fields are included as data points. */
     documentFields?: PdfField[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
 }
 
 export function DisplayConditionModal({
     documentFields,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
     initialState,
     onClose,
+    onRequestFormFields,
     onSave,
     schema,
 }: DisplayConditionModalProps) {
@@ -69,9 +88,11 @@ export function DisplayConditionModal({
         deriveConditionMatchType(initialState?.groups?.length ? initialState : defaultState()),
     );
 
-    const dataPointOptions = useMemo(
-        () => getDataPointOptions(schema, documentFields),
-        [schema, documentFields],
+    const mergeTagOptions = useMemo(() => getSchemaDataPointOptions(schema), [schema]);
+
+    const fillableOptions = useMemo(
+        () => getDocumentFieldsDataPointOptions(documentFields),
+        [documentFields],
     );
 
     const handleClose = useCallback(() => {
@@ -151,16 +172,19 @@ export function DisplayConditionModal({
                 if (!trimmedValue) {
                     return false;
                 }
-                const fieldType =
-                    dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey)
-                        ?.fieldType ?? 'string';
+                const fieldType = getDisplayConditionFieldTypeForKey(
+                    condition.dataPointKey,
+                    mergeTagOptions,
+                    fillableOptions,
+                    formFieldsByFormId ?? {},
+                );
                 if (fieldType === 'number' && !isValidNumber(trimmedValue)) {
                     return false;
                 }
             }
         }
         return state.groups.length > 0;
-    }, [dataPointOptions, state.groups]);
+    }, [fillableOptions, formFieldsByFormId, mergeTagOptions, state.groups]);
 
     return (
         <Dialog open onClose={handleClose} size="xlarge">
@@ -221,10 +245,15 @@ export function DisplayConditionModal({
                     </Flex>
                     <ConditionGroupsSection
                         conditionJoinOperator={matchType}
-                        dataPointOptions={dataPointOptions}
+                        fillableOptions={fillableOptions}
+                        formFieldsByFormId={formFieldsByFormId}
+                        formFieldsLoadingFormId={formFieldsLoadingFormId}
+                        forms={forms}
                         groups={state.groups}
+                        mergeTagOptions={mergeTagOptions}
                         onAddGroup={addGroup}
                         onRemoveGroup={removeGroup}
+                        onRequestFormFields={onRequestFormFields}
                         onUpdateGroup={updateGroup}
                     />
                 </Flex>

package/src/components/display-conditions/display-condition.tsx

@@ -5,13 +5,26 @@ import { PdfField } from '../../interface/types';
 import { DisplayConditionModal, DisplayConditionModalProps } from './display-condition-modal';
 
 interface DisplayConditionProps
-    extends Pick<DisplayConditionModalProps, 'initialState' | 'schema' | 'documentFields'> {
+    extends Pick<
+        DisplayConditionModalProps,
+        | 'documentFields'
+        | 'formFieldsByFormId'
+        | 'formFieldsLoadingFormId'
+        | 'forms'
+        | 'initialState'
+        | 'onRequestFormFields'
+        | 'schema'
+    > {
     onSave: (state: Partial<PdfField>) => void;
 }
 
 export const DisplayCondition: FC<DisplayConditionProps> = ({
     documentFields,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
     initialState,
+    onRequestFormFields,
     onSave,
     schema,
 }) => {
@@ -31,9 +44,13 @@ export const DisplayCondition: FC<DisplayConditionProps> = ({
                 <DisplayConditionModal
                     onClose={() => setOpen(false)}
                     onSave={state => onSave({ displayCondition: state ?? undefined })}
+                    documentFields={documentFields}
+                    formFieldsByFormId={formFieldsByFormId}
+                    formFieldsLoadingFormId={formFieldsLoadingFormId}
+                    forms={forms}
                     initialState={initialState}
+                    onRequestFormFields={onRequestFormFields}
                     schema={schema}
-                    documentFields={documentFields}
                 />
             )}
         </Fragment>