@servicetitan/dte-unlayer 0.154.0 → 0.155.0

package/src/__tests__/e-sign-offset.test.ts

@@ -0,0 +1,281 @@
+import {
+    emitESignOffsetRequest,
+    onESignOffsetRequest,
+} from '../e-sign-offset/eSignOffsetController';
+import type { SingleCondition } from '../display-conditions/types';
+import {
+    type ESignDateSignedOffsetRule,
+    type ESignDateSignedOffsetSettings,
+    MAX_E_SIGN_OFFSET_RULES,
+} from '../shared/const';
+import {
+    addESignOffsetRule,
+    buildESignOffsetSettings,
+    canAddESignOffsetRule,
+    clampESignOffsetDays,
+    createESignOffsetRule,
+    createESignOffsetSettings,
+    getESignOffsetConditionText,
+    getESignOffsetRuleCondition,
+    isCompleteESignOffsetCondition,
+    isESignOffsetSettings,
+    normalizeESignOffsetSettings,
+    removeESignOffsetRule,
+    splitESignOffsetSettings,
+    updateESignOffsetRule,
+} from '../shared/e-sign-offset';
+import { unlayerToolsBuildDesign, unlayerToolsNormalizeESignOffsets } from '../tools';
+import type { UnlayerDesignCustomTool } from '../unlayer-interface';
+
+const createCondition = (overrides: Partial<SingleCondition> = {}): SingleCondition => ({
+    dataPointKey: 'job.status',
+    id: 'c1',
+    operator: 'is_equal_to',
+    value: 'Completed',
+    ...overrides,
+});
+
+const createRule = (days: number, condition = createCondition()): ESignDateSignedOffsetRule => ({
+    condition: { behavior: 'show', groups: [{ conditions: [condition], id: `g-${days}` }] },
+    days,
+});
+
+describe('clampESignOffsetDays', () => {
+    test.each([
+        [14, 14],
+        [0, 0],
+        [-5, 0],
+        [400, 365],
+        [3.7, 3],
+        [Number.NaN, 0],
+        [null, 0],
+        ['7', 0],
+    ])('clamps %p to %p', (input, expected) => {
+        expect(clampESignOffsetDays(input)).toBe(expected);
+    });
+});
+
+describe('createESignOffsetSettings', () => {
+    test('defaults to a single unconditional zero-day rule', () => {
+        expect(createESignOffsetSettings()).toEqual({ rules: [{ days: 0 }] });
+    });
+
+    test('clamps the provided days', () => {
+        expect(createESignOffsetSettings(500)).toEqual({ rules: [{ days: 365 }] });
+    });
+});
+
+describe('createESignOffsetRule', () => {
+    test('creates a show rule with a single blank condition', () => {
+        const rule = createESignOffsetRule();
+
+        expect(rule.days).toBe(0);
+        expect(rule.condition.behavior).toBe('show');
+        expect(rule.condition.groups).toHaveLength(1);
+        expect(rule.condition.groups[0].logicalOperator).toBeUndefined();
+        expect(rule.condition.groups[0].conditions).toHaveLength(1);
+        expect(rule.condition.groups[0].conditions[0].logicalOperator).toBeUndefined();
+    });
+});
+
+describe('buildESignOffsetSettings / splitESignOffsetSettings', () => {
+    test('appends the unconditional final rule after the conditioned rules', () => {
+        const settings = buildESignOffsetSettings([createRule(3), createRule(7)], 14);
+
+        expect(settings.rules).toHaveLength(3);
+        expect(settings.rules[2]).toEqual({ days: 14 });
+        expect(splitESignOffsetSettings(settings)).toEqual({
+            conditionedRules: [createRule(3), createRule(7)],
+            finalDays: 14,
+        });
+    });
+
+    test('clamps days of every rule', () => {
+        const settings = buildESignOffsetSettings([createRule(900)], -2);
+
+        expect(settings.rules.map(rule => rule.days)).toEqual([365, 0]);
+    });
+});
+
+describe('isESignOffsetSettings', () => {
+    test('accepts a lone final rule and a conditioned chain', () => {
+        expect(isESignOffsetSettings({ rules: [{ days: 5 }] })).toBe(true);
+        expect(isESignOffsetSettings({ rules: [createRule(3), { days: 5 }] })).toBe(true);
+    });
+
+    test.each([
+        ['missing value', undefined],
+        ['missing rules', {}],
+        ['empty rules', { rules: [] }],
+        ['condition on the last rule', { rules: [createRule(3)] }],
+        ['unconditioned rule before the last', { rules: [{ days: 1 }, { days: 5 }] }],
+        ['days out of range', { rules: [{ days: 366 }] }],
+        ['negative days', { rules: [{ days: -1 }] }],
+        [
+            'too many rules',
+            {
+                rules: [
+                    ...Array.from({ length: MAX_E_SIGN_OFFSET_RULES }, (_, i) => createRule(i)),
+                    { days: 0 },
+                ],
+            },
+        ],
+    ])('rejects %s', (_, value) => {
+        expect(isESignOffsetSettings(value)).toBe(false);
+    });
+});
+
+describe('normalizeESignOffsetSettings', () => {
+    test('returns valid settings unchanged', () => {
+        const settings: ESignDateSignedOffsetSettings = { rules: [createRule(3), { days: 5 }] };
+
+        expect(normalizeESignOffsetSettings(settings)).toBe(settings);
+    });
+
+    test.each([undefined, null, 'x', {}, { rules: 'x' }])('defaults %p', value => {
+        expect(normalizeESignOffsetSettings(value)).toEqual({ rules: [{ days: 0 }] });
+    });
+
+    test('repairs malformed chains', () => {
+        const normalized = normalizeESignOffsetSettings({
+            rules: [createRule(500), { days: 2 }, createRule(20)],
+        });
+
+        expect(normalized).toEqual({ rules: [{ ...createRule(500), days: 365 }, { days: 20 }] });
+        expect(isESignOffsetSettings(normalized)).toBe(true);
+    });
+
+    test('drops conditioned rules beyond the maximum', () => {
+        const normalized = normalizeESignOffsetSettings({
+            rules: [
+                ...Array.from({ length: MAX_E_SIGN_OFFSET_RULES + 2 }, (_, i) => createRule(i)),
+                { days: 9 },
+            ],
+        });
+
+        expect(normalized.rules).toHaveLength(MAX_E_SIGN_OFFSET_RULES);
+        expect(normalized.rules[normalized.rules.length - 1]).toEqual({ days: 9 });
+    });
+});
+
+describe('rule list operations', () => {
+    test('adds rules up to the maximum, counting the final rule', () => {
+        let rules: ESignDateSignedOffsetRule[] = [];
+
+        for (let i = 0; i < MAX_E_SIGN_OFFSET_RULES + 2; i++) {
+            rules = addESignOffsetRule(rules);
+        }
+
+        expect(rules).toHaveLength(MAX_E_SIGN_OFFSET_RULES - 1);
+        expect(canAddESignOffsetRule(rules)).toBe(false);
+    });
+
+    test('updates and removes by index without mutating the input', () => {
+        const rules = [createRule(1), createRule(2)];
+        const updated = updateESignOffsetRule(rules, 1, createRule(9));
+        const removed = removeESignOffsetRule(rules, 0);
+
+        expect(updated.map(rule => rule.days)).toEqual([1, 9]);
+        expect(removed.map(rule => rule.days)).toEqual([2]);
+        expect(rules.map(rule => rule.days)).toEqual([1, 2]);
+    });
+
+    test('reads the single condition of a rule', () => {
+        expect(getESignOffsetRuleCondition(createRule(1))).toEqual(createCondition());
+    });
+});
+
+describe('isCompleteESignOffsetCondition', () => {
+    test.each([
+        ['complete string condition', createCondition(), 'string', true],
+        ['missing condition', undefined, 'string', false],
+        ['missing data point', createCondition({ dataPointKey: '' }), 'string', false],
+        ['blank value', createCondition({ value: '  ' }), 'string', false],
+        [
+            'value-less operator',
+            createCondition({ operator: 'is_empty', value: '' }),
+            'string',
+            true,
+        ],
+        ['numeric value', createCondition({ operator: 'num_gt', value: '64' }), 'number', true],
+        [
+            'non-numeric value',
+            createCondition({ operator: 'num_gt', value: 'abc' }),
+            'number',
+            false,
+        ],
+    ] as const)('%s', (_, condition, fieldType, expected) => {
+        expect(isCompleteESignOffsetCondition(condition, fieldType)).toBe(expected);
+    });
+});
+
+describe('getESignOffsetConditionText', () => {
+    test('formats string, number and value-less operators', () => {
+        expect(getESignOffsetConditionText(createCondition(), 'Job Status')).toBe(
+            'Job Status is equal to Completed',
+        );
+        expect(
+            getESignOffsetConditionText(
+                createCondition({ operator: 'num_eq', value: '3' }),
+                'Visits',
+            ),
+        ).toBe('Visits = 3');
+        expect(
+            getESignOffsetConditionText(createCondition({ operator: 'is_empty' }), 'Notes'),
+        ).toBe('Notes is empty');
+    });
+});
+
+describe('unlayerToolsNormalizeESignOffsets', () => {
+    const createESignTool = (values: Record<string, unknown>): UnlayerDesignCustomTool => ({
+        type: 'custom',
+        slug: 'e-sign',
+        values: { eSignRecipient: 'customer', ...values },
+    });
+
+    test('fills settings on offset placements saved without them and leaves the rest alone', () => {
+        const valid = { rules: [createRule(3), { days: 5 }] };
+        const legacyOffset = createESignTool({ eSignFieldType: 'dateSignedOffset' });
+        const configuredOffset = createESignTool({
+            eSignDateSignedOffset: valid,
+            eSignFieldType: 'dateSignedOffset',
+        });
+        const signature = createESignTool({ eSignFieldType: 'signature' });
+        const design = unlayerToolsBuildDesign([legacyOffset, configuredOffset, signature]);
+
+        expect(unlayerToolsNormalizeESignOffsets(design)).toBe(true);
+        expect(legacyOffset.values.eSignDateSignedOffset).toEqual({ rules: [{ days: 0 }] });
+        expect(configuredOffset.values.eSignDateSignedOffset).toBe(valid);
+        expect(signature.values).not.toHaveProperty('eSignDateSignedOffset');
+        expect(unlayerToolsNormalizeESignOffsets(design)).toBe(false);
+    });
+
+    test('tolerates a missing design', () => {
+        expect(unlayerToolsNormalizeESignOffsets(undefined as never)).toBe(false);
+    });
+});
+
+describe('eSignOffsetController', () => {
+    test('resolves with the original value when no modal is listening', () => {
+        const value = createESignOffsetSettings(4);
+        const done = jest.fn();
+
+        emitESignOffsetRequest({ done, value });
+
+        expect(done).toHaveBeenCalledWith(value);
+    });
+
+    test('delivers requests to the listener until it unsubscribes', () => {
+        const listener = jest.fn();
+        const unsubscribe = onESignOffsetRequest(listener);
+        const request = { done: jest.fn(), value: createESignOffsetSettings(4) };
+
+        emitESignOffsetRequest(request);
+        unsubscribe();
+        emitESignOffsetRequest(request);
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(listener).toHaveBeenCalledWith(request);
+        expect(request.done).toHaveBeenCalledTimes(1);
+    });
+});

package/src/display-conditions/ConditionRow.tsx

@@ -178,6 +178,8 @@ export function ConditionRow({
         <Flex direction="column" gap="3" style={{ width: '100%' }}>
             <div style={{ width: '100%' }}>
                 <Combobox.Select
+                    flex={1}
+                    style={{ width: '100%' }}
                     disableClearSelection
                     itemToKey={(item: SourceOption | null) => item?.value ?? ''}
                     itemToString={(item: SourceOption | null) => item?.label ?? ''}
@@ -203,12 +205,7 @@ export function ConditionRow({
                     </Combobox.Content>
                 </Combobox.Select>
             </div>
-            <Flex
-                direction="row"
-                alignItems="flex-end"
-                gap="2"
-                style={{ flexWrap: 'wrap', rowGap: 8, width: '100%' }}
-            >
+            <Flex direction="row" alignItems="flex-end" gap="2" style={{ width: '100%' }}>
                 <div
                     style={{
                         display: 'flex',
@@ -219,89 +216,97 @@ export function ConditionRow({
                 >
                     <Chip label="IF" size="small" />
                 </div>
-                <Flex flex={1} style={{ minWidth: 160 }}>
-                    <Combobox.Select
-                        flex={1}
-                        style={{ width: '100%' }}
-                        disableClearSelection
-                        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...'
+                <Flex
+                    flex={1}
+                    direction="row"
+                    alignItems="flex-end"
+                    gap="2"
+                    style={{ minWidth: 0, width: '100%' }}
+                >
+                    <Flex flex={1} style={{ minWidth: 0, width: '100%' }}>
+                        <Combobox.Select
+                            flex={1}
+                            style={{ width: '100%' }}
+                            disableClearSelection
+                            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.Select>
+                    </Flex>
+                    <Flex flex={1} style={{ minWidth: 0, width: '100%' }}>
+                        <Combobox.Select
+                            flex={1}
+                            style={{ width: '100%' }}
+                            disableClearSelection
+                            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'],
+                                })
                             }
-                            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.Select>
-                </Flex>
-                <Flex flex={1} style={{ minWidth: 160 }}>
-                    <Combobox.Select
-                        flex={1}
-                        style={{ width: '100%' }}
-                        disableClearSelection
-                        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.Select>
-                </Flex>
-                {!isValueLess && (
-                    <Flex flex={1} style={{ minWidth: 160 }}>
-                        <LookupValueControl
-                            value={condition.value}
-                            fieldType={fieldType}
-                            lookupSource={selectedDataPoint?.lookupSource}
-                            onChange={value => onChange({ ...condition, value })}
-                        />
+                        >
+                            <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.Select>
                     </Flex>
-                )}
+                    {!isValueLess && (
+                        <Flex flex="0 0 186px" style={{ minWidth: 0 }}>
+                            <LookupValueControl
+                                value={condition.value}
+                                fieldType={fieldType}
+                                lookupSource={selectedDataPoint?.lookupSource}
+                                onChange={value => onChange({ ...condition, value })}
+                            />
+                        </Flex>
+                    )}
+                </Flex>
                 {canRemove && (
                     <div
                         style={{
                             display: 'flex',
                             alignItems: 'flex-end',
                             flexShrink: 0,
-                            padding: '4px 8px',
+                            paddingBottom: 4,
                         }}
                     >
                         <Button

package/src/display-conditions/DisplayConditionModal.tsx

@@ -1,13 +1,6 @@
 import { Button, Combobox, Dialog, Flex, Text, ThemeProvider } from '@servicetitan/anvil2';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, 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';
@@ -17,9 +10,13 @@ import {
     ConditionGroup as ConditionGroupType,
     DisplayBehavior,
     DisplayConditionState,
-    FormFieldOption,
     LogicalOperator,
 } from './types';
+import {
+    ConditionalsOpenHandler,
+    ConditionFormSelectHandler,
+    useConditionForms,
+} from './useConditionForms';
 
 const BEHAVIOR_OPTIONS = [
     { label: 'Show', value: 'show' },
@@ -65,15 +62,8 @@ export interface DisplayConditionModalProps {
      * content is wrapped in `ThemeProvider` so Anvil2 styles still apply after portaling.
      */
     portalContainer?: Element | DocumentFragment | null;
-    onConditionFormSelect?: (
-        formId: number,
-        sendFormFields: (formId: number, fields: FormFieldInfo[]) => void,
-    ) => void;
-    onConditionalsOpen?: (
-        usedFormIds: number[],
-        sendFormList: (forms: FormInfo[]) => void,
-        sendFormFields: (formId: number, fields: FormFieldInfo[]) => void,
-    ) => void;
+    onConditionFormSelect?: ConditionFormSelectHandler;
+    onConditionalsOpen?: ConditionalsOpenHandler;
     schema?: import('../shared/schema').SchemaObject;
 }
 
@@ -88,72 +78,14 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
     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 { formFieldOptions, forms, isFieldDataLoading, loadForms, requestFormFields } =
+        useConditionForms({ onConditionFormSelect, onConditionalsOpen });
 
     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;
-
-    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],
-    );
 
     useEffect(() => {
         return onDisplayCondition(nextRequest => {
@@ -161,49 +93,13 @@ 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([]);
-            }
 
+            loadForms(initialState.groups);
             setState(initialState);
             setMatchType(deriveMatchType(initialState));
             setIsOpen(true);
         });
-    }, [onConditionalsOpen, requestFormFields]);
+    }, [loadForms]);
 
     const handleClose = useCallback(() => {
         setRequest(null);