@servicetitan/dte-unlayer 0.122.0 → 0.124.0

package/src/display-conditions/ConditionRow.tsx

@@ -1,14 +1,18 @@
 import { Button, Chip, Combobox, Flex, 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 { FormInfo, parseFormFieldKey } from '../shared/forms';
 import { NUMBER_OPERATORS, SingleCondition, STRING_OPERATORS, VALUE_LESS_OPERATORS } from './types';
-import type { DataPointOption } from './types';
+import type { DataPointOption, FormFieldOption } from './types';
 
 export interface ConditionRowProps {
     canRemove: boolean;
     condition: SingleCondition;
     dataPointOptions: DataPointOption[];
+    formFieldOptions: FormFieldOption[];
+    forms: FormInfo[];
     onChange: (c: SingleCondition) => void;
+    onFormSelect: (formId: number) => void;
     onRemove: () => void;
 }
 
@@ -17,6 +21,12 @@ interface OperatorOption {
     value: string;
 }
 
+interface SourceOption {
+    formId?: number;
+    label: string;
+    value: string;
+}
+
 function sanitizeNumericInput(raw: string): string {
     // Allow only a single leading minus and one decimal separator.
     let value = raw.replaceAll(/[^0-9.-]/g, '');
@@ -36,12 +46,64 @@ export function ConditionRow({
     canRemove,
     condition,
     dataPointOptions,
+    formFieldOptions,
+    forms,
     onChange,
+    onFormSelect,
     onRemove,
 }: Readonly<ConditionRowProps>) {
+    const selectedFormFieldMeta = useMemo(
+        () => parseFormFieldKey(condition.dataPointKey),
+        [condition.dataPointKey],
+    );
+    const [selectedSourceValue, setSelectedSourceValue] = useState<string>(
+        selectedFormFieldMeta ? `form:${selectedFormFieldMeta.formId}` : 'schema',
+    );
+
+    const sourceOptions = useMemo<SourceOption[]>(
+        () => [
+            { label: 'Data point', value: 'schema' },
+            ...forms.map(form => ({
+                formId: form.id,
+                label: form.name,
+                value: `form:${form.id}`,
+            })),
+        ],
+        [forms],
+    );
+
+    const selectedSource = useMemo<SourceOption | null>(() => {
+        return (
+            sourceOptions.find(opt => opt.value === selectedSourceValue) ?? sourceOptions[0] ?? null
+        );
+    }, [selectedSourceValue, sourceOptions]);
+
+    useEffect(() => {
+        if (selectedFormFieldMeta) {
+            setSelectedSourceValue(`form:${selectedFormFieldMeta.formId}`);
+            return;
+        }
+        if (!condition.dataPointKey) {
+            return;
+        }
+        const hasSchemaMatch = dataPointOptions.some(opt => opt.fullKey === condition.dataPointKey);
+        if (hasSchemaMatch) {
+            setSelectedSourceValue('schema');
+        }
+    }, [condition.dataPointKey, dataPointOptions, selectedFormFieldMeta]);
+
+    const currentFormId = selectedSource?.formId;
+    const activeDataPointOptions = useMemo(
+        () =>
+            currentFormId
+                ? formFieldOptions.filter(option => option.formId === currentFormId)
+                : dataPointOptions,
+        [currentFormId, dataPointOptions, formFieldOptions],
+    );
+
     const selectedDataPoint = useMemo(
-        () => dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
-        [dataPointOptions, condition.dataPointKey],
+        () => activeDataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
+        [activeDataPointOptions, condition.dataPointKey],
     );
 
     const fieldType = selectedDataPoint?.fieldType ?? 'string';
@@ -67,8 +129,7 @@ export function ConditionRow({
     };
 
     const handleDataPointChange = (item: DataPointOption | null) => {
-        const nextFieldType = item?.fieldType ?? 'string';
-        const nextIsNumber = nextFieldType === 'number';
+        const nextIsNumber = item?.fieldType === 'number';
         const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
         const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
         onChange({
@@ -82,71 +143,74 @@ export function ConditionRow({
         });
     };
 
+    const handleSourceChange = (item: SourceOption | null) => {
+        if (!item) {
+            return;
+        }
+        setSelectedSourceValue(item.value);
+
+        if (!item.formId) {
+            const schemaField =
+                dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null;
+            const nextFieldType = schemaField?.fieldType ?? 'string';
+            const nextIsNumber = nextFieldType === 'number';
+            const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
+            const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
+
+            onChange({
+                ...condition,
+                dataPointKey: schemaField?.fullKey ?? '',
+                operator: operatorReset
+                    ? nextIsNumber
+                        ? 'num_eq'
+                        : 'is_equal_to'
+                    : condition.operator,
+            });
+            return;
+        }
+
+        onFormSelect(item.formId);
+        const nextFormFieldOptions = formFieldOptions.filter(
+            option => option.formId === item.formId,
+        );
+        const currentSelected = nextFormFieldOptions.find(
+            opt => opt.fullKey === condition.dataPointKey,
+        );
+        const nextSelected = currentSelected ?? nextFormFieldOptions[0] ?? null;
+        const nextFieldType = nextSelected?.fieldType ?? 'string';
+        const nextIsNumber = nextFieldType === 'number';
+        const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
+        const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
+
+        onChange({
+            ...condition,
+            dataPointKey: nextSelected?.fullKey ?? '',
+            operator: operatorReset
+                ? nextIsNumber
+                    ? 'num_eq'
+                    : 'is_equal_to'
+                : condition.operator,
+        });
+    };
+
     return (
-        <Flex
-            direction="row"
-            alignItems="flex-end"
-            gap="2"
-            style={{ flexWrap: 'wrap', rowGap: 8, width: '100%' }}
-        >
-            <div
-                style={{
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    flexShrink: 0,
-                    padding: '4px 8px',
-                }}
-            >
-                <Chip label="IF" size="small" />
-            </div>
-            <div style={{ flex: '2 1 240px', minWidth: 200 }}>
-                <Combobox
-                    {...({ disableClearSelection: true } as object)}
-                    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..."
-                        size="small"
-                    />
-                    <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>
-            </div>
-            <div style={{ flex: '1 1 180px', minWidth: 150 }}>
+        <Flex direction="column" gap="3" style={{ width: '100%' }}>
+            <div style={{ width: '100%' }}>
                 <Combobox
                     {...({ disableClearSelection: true } as object)}
-                    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 SingleCondition['operator'],
-                        })
-                    }
+                    itemToKey={(item: SourceOption | null) => item?.value ?? ''}
+                    itemToString={(item: SourceOption | null) => item?.label ?? ''}
+                    items={sourceOptions}
+                    selectedItem={selectedSource}
+                    onChange={handleSourceChange}
                 >
                     <Combobox.SelectTrigger
-                        label="Condition"
-                        placeholder="Select..."
+                        label="Data Type"
+                        placeholder="Select source..."
                         size="small"
                     />
                     <Combobox.Content>
-                        {({ items }: { items: OperatorOption[] }) => (
+                        {({ items }: { items: SourceOption[] }) => (
                             <Combobox.List>
                                 {items.map((item, i) => (
                                     <Combobox.Item index={i} item={item} key={item.value}>
@@ -158,21 +222,12 @@ export function ConditionRow({
                     </Combobox.Content>
                 </Combobox>
             </div>
-            {!isValueLess && (
-                <div style={{ flex: '1 1 180px', minWidth: 150 }}>
-                    <TextField
-                        label="Value"
-                        size="small"
-                        value={condition.value}
-                        onChange={e => handleValueChange(e.target.value)}
-                        placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
-                        style={{ width: '100%' }}
-                        aria-label="Value"
-                        {...(fieldType === 'number' && { inputMode: 'decimal' })}
-                    />
-                </div>
-            )}
-            {canRemove && (
+            <Flex
+                direction="row"
+                alignItems="flex-end"
+                gap="2"
+                style={{ flexWrap: 'wrap', rowGap: 8, width: '100%' }}
+            >
                 <div
                     style={{
                         display: 'flex',
@@ -181,15 +236,103 @@ export function ConditionRow({
                         padding: '4px 8px',
                     }}
                 >
-                    <Button
-                        appearance="secondary"
-                        aria-label="Remove condition"
-                        icon={{ before: TrashIcon }}
-                        size="small"
-                        onClick={onRemove}
-                    />
+                    <Chip label="IF" size="small" />
+                </div>
+                <div style={{ flex: '2 1 240px', minWidth: 200 }}>
+                    <Combobox
+                        {...({ disableClearSelection: true } as object)}
+                        itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
+                        itemToString={(item: DataPointOption | null) => item?.title ?? ''}
+                        items={activeDataPointOptions}
+                        selectedItem={selectedDataPoint}
+                        onChange={handleDataPointChange}
+                    >
+                        <Combobox.SelectTrigger
+                            label="Data Point"
+                            placeholder={
+                                currentFormId ? 'Select form field...' : 'Select data point...'
+                            }
+                            size="small"
+                        />
+                        <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>
+                </div>
+                <div style={{ flex: '1 1 180px', minWidth: 150 }}>
+                    <Combobox
+                        {...({ disableClearSelection: true } as object)}
+                        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 SingleCondition['operator'],
+                            })
+                        }
+                    >
+                        <Combobox.SelectTrigger
+                            label="Condition"
+                            placeholder="Select..."
+                            size="small"
+                        />
+                        <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>
                 </div>
-            )}
+                {!isValueLess && (
+                    <div style={{ flex: '1 1 180px', minWidth: 150 }}>
+                        <TextField
+                            label="Value"
+                            size="small"
+                            value={condition.value}
+                            onChange={e => handleValueChange(e.target.value)}
+                            placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
+                            style={{ width: '100%' }}
+                            aria-label="Value"
+                            {...(fieldType === 'number' && { inputMode: 'decimal' })}
+                        />
+                    </div>
+                )}
+                {canRemove && (
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            flexShrink: 0,
+                            padding: '4px 8px',
+                        }}
+                    >
+                        <Button
+                            appearance="secondary"
+                            aria-label="Remove condition"
+                            icon={{ before: TrashIcon }}
+                            size="small"
+                            onClick={onRemove}
+                        />
+                    </div>
+                )}
+            </Flex>
         </Flex>
     );
 }

package/src/display-conditions/DisplayConditionModal.tsx

@@ -1,6 +1,13 @@
 import { Button, Combobox, Dialog, Flex, Text } from '@servicetitan/anvil2';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import {
+    buildFormFieldKey,
+    FormFieldInfo,
+    FormInfo,
+    getConditionalFieldTypeFromFormItemType,
+    parseFormFieldKey,
+} from '../shared/forms';
 import { ConditionGroupsSection, MatchType } from './ConditionGroupsSection';
 import { defaultState, MODAL_CONTENT_MAX_HEIGHT } from './constants';
 import { DisplayConditionRequest, onDisplayCondition } from './displayConditionController';
@@ -10,6 +17,7 @@ import {
     ConditionGroup as ConditionGroupType,
     DisplayBehavior,
     DisplayConditionState,
+    FormFieldOption,
     LogicalOperator,
 } from './types';
 
@@ -51,16 +59,90 @@ function applyMatchTypeToState(
 }
 
 export interface DisplayConditionModalProps {
+    onConditionFormSelect?: (
+        formId: number,
+        sendFormFields: (formId: number, fields: FormFieldInfo[]) => void,
+    ) => void;
+    onConditionalsOpen?: (
+        usedFormIds: number[],
+        sendFormList: (forms: FormInfo[]) => void,
+        sendFormFields: (formId: number, fields: FormFieldInfo[]) => void,
+    ) => void;
     schema?: import('../shared/schema').SchemaObject;
 }
 
 export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
+    const { onConditionFormSelect, onConditionalsOpen, schema } = props;
     const [request, setRequest] = useState<DisplayConditionRequest | null>(null);
     const [isOpen, setIsOpen] = useState(false);
     const [state, setState] = useState(defaultState);
     const [matchType, setMatchType] = useState<MatchType>('all');
+    const [forms, setForms] = useState<FormInfo[]>([]);
+    const [formFieldsByFormId, setFormFieldsByFormId] = useState<Record<number, FormFieldInfo[]>>(
+        {},
+    );
+    const [loadingFormIds, setLoadingFormIds] = useState<number[]>([]);
+    const [isFormsListLoading, setIsFormsListLoading] = useState(false);
+    const formFieldsByFormIdRef = useRef<Record<number, FormFieldInfo[]>>({});
+    const loadingFormIdsRef = useRef<number[]>([]);
+
+    const dataPointOptions = useMemo(() => getSchemaDataPointOptions(schema), [schema]);
+    const formFieldOptions = useMemo<FormFieldOption[]>(() => {
+        const nextOptions: FormFieldOption[] = [];
+        for (const form of forms) {
+            const fields = formFieldsByFormId[form.id];
+            if (!fields) {
+                continue;
+            }
+            for (const field of fields) {
+                const fieldType = getConditionalFieldTypeFromFormItemType(field.itemType);
+                if (!fieldType) {
+                    continue;
+                }
+                nextOptions.push({
+                    fieldType,
+                    formId: form.id,
+                    fullKey: buildFormFieldKey(form.id, field.id),
+                    title: field.header,
+                });
+            }
+        }
+        return nextOptions.sort((left, right) => left.title.localeCompare(right.title));
+    }, [forms, formFieldsByFormId]);
+    const allFieldOptions = useMemo(
+        () => [...dataPointOptions, ...formFieldOptions],
+        [dataPointOptions, formFieldOptions],
+    );
+    const isFieldDataLoading = isFormsListLoading || loadingFormIds.length > 0;
 
-    const dataPointOptions = useMemo(() => getSchemaDataPointOptions(props.schema), [props.schema]);
+    useEffect(() => {
+        formFieldsByFormIdRef.current = formFieldsByFormId;
+    }, [formFieldsByFormId]);
+
+    useEffect(() => {
+        loadingFormIdsRef.current = loadingFormIds;
+    }, [loadingFormIds]);
+
+    const requestFormFields = useCallback(
+        (formId: number) => {
+            if (!onConditionFormSelect) {
+                return;
+            }
+            if (
+                formFieldsByFormIdRef.current[formId] ||
+                loadingFormIdsRef.current.includes(formId)
+            ) {
+                return;
+            }
+
+            setLoadingFormIds(prev => (prev.includes(formId) ? prev : [...prev, formId]));
+            onConditionFormSelect(formId, (selectedFormId, fields) => {
+                setFormFieldsByFormId(prev => ({ ...prev, [selectedFormId]: fields }));
+                setLoadingFormIds(prev => prev.filter(id => id !== selectedFormId));
+            });
+        },
+        [onConditionFormSelect],
+    );
 
     const portalTarget = useMemo(() => {
         if (typeof document === 'undefined') {
@@ -75,11 +157,49 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
             const existing = nextRequest.data;
             const parsed = parseUnlayerDisplayCondition(existing);
             const initialState = parsed ?? defaultState();
+            const usedFormIds = Array.from(
+                new Set(
+                    initialState.groups
+                        .flatMap(group => group.conditions)
+                        .map(condition => parseFormFieldKey(condition.dataPointKey)?.formId)
+                        .filter((formId): formId is number => formId != null),
+                ),
+            );
+
+            setForms([]);
+            setFormFieldsByFormId({});
+            setIsFormsListLoading(!!onConditionalsOpen);
+            setLoadingFormIds([]);
+
+            if (onConditionalsOpen) {
+                onConditionalsOpen(
+                    usedFormIds,
+                    nextForms => {
+                        setForms(nextForms);
+                        setIsFormsListLoading(false);
+                    },
+                    (formId, fields) => {
+                        setFormFieldsByFormId(prev => ({ ...prev, [formId]: fields }));
+                        setLoadingFormIds(prev => prev.filter(id => id !== formId));
+                    },
+                );
+
+                /*
+                 * Keep display-condition flow aligned with calculated-field flow:
+                 * when modal opens, request fields for already-used forms so labels
+                 * are available in edit mode.
+                 */
+                usedFormIds.forEach(formId => requestFormFields(formId));
+            } else {
+                setIsFormsListLoading(false);
+                setLoadingFormIds([]);
+            }
+
             setState(initialState);
             setMatchType(deriveMatchType(initialState));
             setIsOpen(true);
         });
-    }, []);
+    }, [onConditionalsOpen, requestFormFields]);
 
     const handleClose = useCallback(() => {
         setRequest(null);
@@ -120,7 +240,17 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
         }
     }, []);
 
+    const handleFormSelect = useCallback(
+        (formId: number) => {
+            requestFormFields(formId);
+        },
+        [requestFormFields],
+    );
+
     const canSave = useMemo(() => {
+        if (isFieldDataLoading) {
+            return false;
+        }
         for (const group of state.groups) {
             for (const condition of group.conditions) {
                 if (!condition.dataPointKey) {
@@ -134,7 +264,7 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
                     return false;
                 }
                 const fieldType =
-                    dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey)
+                    allFieldOptions.find(opt => opt.fullKey === condition.dataPointKey)
                         ?.fieldType ?? 'string';
                 if (fieldType === 'number' && !NUMERIC_VALUE_RE.test(trimmedValue)) {
                     return false;
@@ -142,7 +272,7 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
             }
         }
         return state.groups.length > 0;
-    }, [dataPointOptions, state.groups]);
+    }, [allFieldOptions, isFieldDataLoading, state.groups]);
 
     if (!portalTarget || !isOpen) {
         return null;
@@ -211,8 +341,11 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
                             </Flex>
                         }
                         dataPointOptions={dataPointOptions}
+                        formFieldOptions={formFieldOptions}
+                        forms={forms}
                         groups={state.groups}
                         matchType={matchType}
+                        onFormSelect={handleFormSelect}
                         onMatchTypeChange={setMatchType}
                         onUpdateGroup={updateGroup}
                     />

package/src/display-conditions/nunjucks.ts

@@ -1,3 +1,4 @@
+import { buildFormFieldKey, parseFormFieldKey, toNunjucksFieldReference } from '../shared/forms';
 import { generateId } from './constants';
 import {
     CONDITION_OPERATORS,
@@ -44,7 +45,7 @@ function buildSingleConditionExpression(
     operator: string,
     value: string,
 ): string {
-    const path = dataPointKey;
+    const path = toNunjucksFieldReference(dataPointKey);
     const defaulted = `(${path} | default(''))`;
     const numDefaulted = `(${path} | default(0))`;
     const normalizedValue = value.trim();
@@ -171,9 +172,7 @@ function generateTypeAndLabel(state: DisplayConditionState): { type: string; lab
             if (isValueLessOperator(c.operator)) {
                 parts.push(`${c.dataPointKey} ${operatorLabel(c.operator)}`);
             } else if (c.value.trim()) {
-                parts.push(
-                    `${c.dataPointKey} ${operatorLabel(c.operator)} ${c.value.trim()}`,
-                );
+                parts.push(`${c.dataPointKey} ${operatorLabel(c.operator)} ${c.value.trim()}`);
             }
         }
     }
@@ -273,8 +272,11 @@ function unescapeNunjucksString(s: string): string {
     return s.replaceAll('\\\\', '\\').replaceAll(String.raw`\'`, "'");
 }
 
-const RE_STR_DEFAULT = String.raw`\(([\w.]+)\s*\|\s*default\s*\(\s*''\s*\)\)`;
-const RE_NUM_DEFAULT = String.raw`\(([\w.]+)\s*\|\s*default\s*\(\s*0\s*\)\)`;
+const SIMPLE_DATA_POINT_PATH = String.raw`[\w.]+`;
+const FORM_RUNTIME_DATA_POINT_PATH = String.raw`__submission_fields\["\d+"\]\["[A-Za-z0-9]+"\]`;
+const DATA_POINT_PATH = String.raw`(${SIMPLE_DATA_POINT_PATH}|${FORM_RUNTIME_DATA_POINT_PATH})`;
+const RE_STR_DEFAULT = String.raw`\(${DATA_POINT_PATH}\s*\|\s*default\s*\(\s*''\s*\)\)`;
+const RE_NUM_DEFAULT = String.raw`\(${DATA_POINT_PATH}\s*\|\s*default\s*\(\s*0\s*\)\)`;
 const QUOTED_CONTENT = String.raw`((?:[^'\\]|\\.)*)`;
 
 function toSingleCondition(
@@ -283,8 +285,15 @@ function toSingleCondition(
     value: string,
     logicalOp?: LogicalOperator,
 ): SingleCondition {
+    const normalizedDataPointKey = (() => {
+        const parsed = parseFormFieldKey(dataPointKey.trim());
+        if (!parsed) {
+            return dataPointKey.trim();
+        }
+        return buildFormFieldKey(parsed.formId, parsed.fieldId);
+    })();
     const condition: SingleCondition = {
-        dataPointKey: dataPointKey.trim(),
+        dataPointKey: normalizedDataPointKey,
         id: generateId(),
         operator,
         value,
@@ -330,7 +339,7 @@ const PARSE_PATTERNS: ParsePattern[] = [
         operator: 'is_empty',
         pathGroup: 1,
         pattern: new RegExp(
-            String.raw`^${RE_STR_DEFAULT}\s*==\s*''\s+or\s+\(\([\w.]+\s*\|\s*default\s*\(\s*''\s*\)\)\s*\|\s*length\)\s*==\s*0$`,
+            String.raw`^${RE_STR_DEFAULT}\s*==\s*''\s+or\s+\(\(${DATA_POINT_PATH}\s*\|\s*default\s*\(\s*''\s*\)\)\s*\|\s*length\)\s*==\s*0$`,
         ),
     },
     {
@@ -338,7 +347,7 @@ const PARSE_PATTERNS: ParsePattern[] = [
         operator: 'is_not_empty',
         pathGroup: 1,
         pattern: new RegExp(
-            String.raw`^${RE_STR_DEFAULT}\s*!=\s*''\s+and\s+\(\([\w.]+\s*\|\s*default\s*\(\s*''\s*\)\)\s*\|\s*length\)\s*>\s*0$`,
+            String.raw`^${RE_STR_DEFAULT}\s*!=\s*''\s+and\s+\(\(${DATA_POINT_PATH}\s*\|\s*default\s*\(\s*''\s*\)\)\s*\|\s*length\)\s*>\s*0$`,
         ),
     },
     // string with value

package/src/display-conditions/types.ts

@@ -65,6 +65,10 @@ export interface DataPointOption {
     title: string;
 }
 
+export interface FormFieldOption extends DataPointOption {
+    formId: number;
+}
+
 /** Unlayer display condition shape passed to done() */
 export interface UnlayerDisplayCondition {
     type: string;