@servicetitan/dte-unlayer 0.153.0 → 0.155.0

package/src/__tests__/merge-tags.test.ts

@@ -1,4 +1,4 @@
-import { scheduleUnlayerMergeTags, toUnlayerMergeTags } from '../merge-tags';
+import { toUnlayerMergeTags } from '../merge-tags';
 
 const customerNameTag = {
     id: '10',
@@ -75,7 +75,7 @@ describe('toUnlayerMergeTags', () => {
                     name: 'Customer Name',
                     value: '{{Customer.Name | safe | nl2br }}',
                 },
-                custom_fields: {
+                'custom_fields': {
                     name: 'Custom Fields',
                     mergeTags: {
                         custom_field_12345: {
@@ -124,6 +124,101 @@ describe('toUnlayerMergeTags', () => {
         });
     });
 
+    describe('when group is a path', () => {
+        const intakeScoreTag = {
+            id: 'form-7-abc123',
+            name: 'Score',
+            propertyPath: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+            group: ['Forms', 'Customer Intake'],
+        };
+        const intakeNotesTag = {
+            id: 'form-7-def456',
+            name: 'Notes',
+            propertyPath: '{{ __submission_fields["7"]["def456"] | safe | nl2br }}',
+            group: ['Forms', 'Customer Intake'],
+        };
+        const inspectionDateTag = {
+            id: 'form-9-fed987',
+            name: 'Inspection Date',
+            propertyPath: '{{ __submission_fields["9"]["fed987"] | safe | nl2br }}',
+            group: ['Forms', 'Inspection'],
+        };
+
+        const subject = () =>
+            toUnlayerMergeTags([
+                contractTermTag,
+                renewalDateTag,
+                intakeScoreTag,
+                intakeNotesTag,
+                inspectionDateTag,
+            ]);
+
+        test('nests one submenu per path segment', () => {
+            expect(subject()).toEqual({
+                ...groupedCustomFields,
+                forms: {
+                    name: 'Forms',
+                    mergeTags: {
+                        customer_intake: {
+                            name: 'Customer Intake',
+                            mergeTags: {
+                                form_7_abc123: {
+                                    name: 'Score',
+                                    value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                                },
+                                form_7_def456: {
+                                    name: 'Notes',
+                                    value: '{{ __submission_fields["7"]["def456"] | safe | nl2br }}',
+                                },
+                            },
+                        },
+                        inspection: {
+                            name: 'Inspection',
+                            mergeTags: {
+                                form_9_fed987: {
+                                    name: 'Inspection Date',
+                                    value: '{{ __submission_fields["9"]["fed987"] | safe | nl2br }}',
+                                },
+                            },
+                        },
+                    },
+                },
+            });
+        });
+
+        test('drops blank segments and keeps the remaining path', () => {
+            expect(toUnlayerMergeTags([{ ...intakeScoreTag, group: [' ', 'Forms', ''] }])).toEqual({
+                forms: {
+                    name: 'Forms',
+                    mergeTags: {
+                        form_7_abc123: {
+                            name: 'Score',
+                            value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                        },
+                    },
+                },
+            });
+        });
+
+        test('treats an all-blank path as ungrouped', () => {
+            expect(toUnlayerMergeTags([{ ...intakeScoreTag, group: [] }])).toEqual({
+                form_7_abc123: {
+                    name: 'Score',
+                    value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                },
+            });
+        });
+
+        test('flattens the path when groups are disabled', () => {
+            expect(toUnlayerMergeTags([intakeScoreTag], { groups: false })).toEqual({
+                form_7_abc123: {
+                    name: 'Score',
+                    value: '{{ __submission_fields["7"]["abc123"] | safe | nl2br }}',
+                },
+            });
+        });
+    });
+
     describe('when group is blank', () => {
         const subject = () =>
             toUnlayerMergeTags([
@@ -153,7 +248,7 @@ describe('toUnlayerMergeTags', () => {
                     name: 'Customer Name',
                     value: '{{Customer.Name | safe | nl2br }}',
                 },
-                custom_field_12345: {
+                'custom_field_12345': {
                     name: 'Contract Term',
                     value: '{{ __custom_fields["Contract Term"] | safe | nl2br }}',
                 },
@@ -161,76 +256,3 @@ describe('toUnlayerMergeTags', () => {
         });
     });
 });
-
-describe('scheduleUnlayerMergeTags', () => {
-    describe('when grouped tags exist', () => {
-        const setMergeTags = jest.fn();
-        const addEventListener = jest.fn();
-
-        beforeEach(() => {
-            setMergeTags.mockReset();
-            addEventListener.mockReset();
-            scheduleUnlayerMergeTags(
-                { addEventListener, setMergeTags },
-                [customerNameTag, contractTermTag, renewalDateTag],
-            );
-        });
-
-        test('does not apply grouped merge tags until the editor is ready', () => {
-            expect(setMergeTags).not.toHaveBeenCalled();
-            expect(addEventListener).toHaveBeenCalledWith('editor:ready', expect.any(Function));
-            expect(addEventListener).toHaveBeenCalledWith('design:loaded', expect.any(Function));
-        });
-
-        test('applies grouped merge tags when the editor is ready', () => {
-            addEventListener.mock.calls[0][1]();
-
-            expect(setMergeTags).toHaveBeenCalledWith({
-                '10': {
-                    name: 'Customer Name',
-                    value: '{{Customer.Name | safe | nl2br }}',
-                },
-                ...groupedCustomFields,
-            });
-        });
-
-        test('applies grouped merge tags only once', () => {
-            addEventListener.mock.calls[0][1]();
-            addEventListener.mock.calls[1][1]();
-
-            expect(setMergeTags).toHaveBeenCalledTimes(1);
-        });
-
-        test('retries on design:loaded when setMergeTags throws', () => {
-            const consoleError = jest.spyOn(console, 'error').mockImplementation(() => undefined);
-            setMergeTags.mockImplementationOnce(() => {
-                throw new Error('setMergeTags failed');
-            });
-
-            addEventListener.mock.calls[0][1]();
-            addEventListener.mock.calls[1][1]();
-
-            expect(setMergeTags).toHaveBeenCalledTimes(2);
-            expect(consoleError).toHaveBeenCalledWith(
-                '[dte-unlayer]',
-                'Failed to apply grouped merge tags',
-                expect.any(Error),
-            );
-            consoleError.mockRestore();
-        });
-    });
-
-    describe('when tags are missing', () => {
-        const setMergeTags = jest.fn();
-        const addEventListener = jest.fn();
-
-        beforeEach(() => {
-            scheduleUnlayerMergeTags({ addEventListener, setMergeTags }, undefined);
-        });
-
-        test('does not touch the editor', () => {
-            expect(setMergeTags).not.toHaveBeenCalled();
-            expect(addEventListener).not.toHaveBeenCalled();
-        });
-    });
-});

package/src/__tests__/store.merge-tags.test.ts

@@ -0,0 +1,186 @@
+import { UnlayerStore } from '../store';
+import type { CreateUnlayerEditorProps } from '../unlayer-interface';
+
+const editorMock = {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    registerCallback: jest.fn(),
+    unregisterCallback: jest.fn(),
+    setMergeTags: jest.fn(),
+    loadDesign: jest.fn(),
+    setBodyValues: jest.fn(),
+};
+
+jest.mock('../loadScript', () => ({ loadScript: jest.fn().mockResolvedValue(undefined) }));
+jest.mock('../unlayer', () => ({
+    ...jest.requireActual('../unlayer'),
+    createUnlayerEditor: jest.fn(() => editorMock),
+}));
+
+const customerNameTag = {
+    id: '10',
+    name: 'Customer Name',
+    propertyPath: '{{Customer.Name | safe | nl2br }}',
+};
+
+const scoreTag = {
+    id: 'form-7-abc',
+    name: 'Score',
+    propertyPath: '{{ __submission_fields["7"]["abc"] | safe | nl2br }}',
+    group: ['Forms', 'Customer Intake'],
+};
+
+const flatCustomer = {
+    '10': { name: 'Customer Name', value: '{{Customer.Name | safe | nl2br }}' },
+};
+
+const groupedScore = {
+    forms: {
+        name: 'Forms',
+        mergeTags: {
+            customer_intake: {
+                name: 'Customer Intake',
+                mergeTags: {
+                    form_7_abc: {
+                        name: 'Score',
+                        value: '{{ __submission_fields["7"]["abc"] | safe | nl2br }}',
+                    },
+                },
+            },
+        },
+    },
+};
+
+const fireEditorEvent = (event: string) => {
+    editorMock.addEventListener.mock.calls
+        .filter(([name]) => name === event)
+        .forEach(([, handler]) => handler());
+};
+
+describe('UnlayerStore merge tags', () => {
+    let store: UnlayerStore;
+    let consoleError: jest.SpyInstance;
+
+    const createStore = (props: Partial<CreateUnlayerEditorProps> = {}) => {
+        store = new UnlayerStore({ tools: [], ...props });
+        return store;
+    };
+
+    const initStore = async () => {
+        (window as any).unlayer = {};
+        const container = document.createElement('div');
+        container.appendChild(document.createElement('iframe'));
+        await store.init(container);
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        consoleError = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    });
+
+    afterEach(() => {
+        store.destroy();
+        consoleError.mockRestore();
+    });
+
+    describe('when the editor initializes with merge tags', () => {
+        beforeEach(async () => {
+            createStore({ mergeTags: [customerNameTag, scoreTag] });
+            await initStore();
+        });
+
+        test('does not touch the editor before it is ready', () => {
+            expect(editorMock.setMergeTags).not.toHaveBeenCalled();
+        });
+
+        test('applies the grouped shape once on editor:ready', () => {
+            fireEditorEvent('editor:ready');
+            fireEditorEvent('design:loaded');
+
+            expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+            expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                ...flatCustomer,
+                ...groupedScore,
+            });
+        });
+
+        test('applies on design:loaded when editor:ready never fires', () => {
+            fireEditorEvent('design:loaded');
+
+            expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+            expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                ...flatCustomer,
+                ...groupedScore,
+            });
+        });
+
+        test('retries on design:loaded when the first apply throws', () => {
+            editorMock.setMergeTags.mockImplementationOnce(() => {
+                throw new Error('not ready');
+            });
+
+            fireEditorEvent('editor:ready');
+            fireEditorEvent('design:loaded');
+            fireEditorEvent('design:loaded');
+
+            expect(editorMock.setMergeTags).toHaveBeenCalledTimes(2);
+            expect(consoleError).toHaveBeenCalledWith(
+                '[dte-unlayer]',
+                'Failed to apply merge tags',
+                expect.any(Error),
+            );
+        });
+    });
+
+    describe('with setMergeTags', () => {
+        describe('when called before the editor is ready', () => {
+            beforeEach(async () => {
+                createStore({ mergeTags: [customerNameTag] });
+                store.unlayerRef.setMergeTags([customerNameTag, scoreTag]);
+                await initStore();
+            });
+
+            test('replaces the initial tags and applies once on ready', () => {
+                fireEditorEvent('editor:ready');
+
+                expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+                expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                    ...flatCustomer,
+                    ...groupedScore,
+                });
+            });
+        });
+
+        describe('when called after the editor is ready', () => {
+            beforeEach(async () => {
+                createStore({ mergeTags: [customerNameTag] });
+                await initStore();
+                fireEditorEvent('editor:ready');
+                editorMock.setMergeTags.mockClear();
+            });
+
+            test('applies immediately', () => {
+                store.unlayerRef.setMergeTags([customerNameTag, scoreTag]);
+
+                expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+                expect(editorMock.setMergeTags).toHaveBeenCalledWith({
+                    ...flatCustomer,
+                    ...groupedScore,
+                });
+            });
+
+            test('does not re-apply on later design:loaded events', () => {
+                store.unlayerRef.setMergeTags([customerNameTag, scoreTag]);
+                fireEditorEvent('design:loaded');
+
+                expect(editorMock.setMergeTags).toHaveBeenCalledTimes(1);
+            });
+
+            test('ignores an empty set', () => {
+                store.unlayerRef.setMergeTags([]);
+
+                expect(editorMock.setMergeTags).not.toHaveBeenCalled();
+            });
+        });
+    });
+});

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