@servicetitan/dte-unlayer 0.154.0 → 0.156.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/__tests__/store.image-upload.test.ts

@@ -0,0 +1,132 @@
+import { ImageUploadError } from '../image-upload-error';
+import { UnlayerStore } from '../store';
+
+const editorMock = {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    registerCallback: jest.fn(),
+    unregisterCallback: jest.fn(),
+};
+
+jest.mock('../loadScript', () => ({ loadScript: jest.fn().mockResolvedValue(undefined) }));
+jest.mock('../unlayer', () => ({
+    ...jest.requireActual('../unlayer'),
+    createUnlayerEditor: jest.fn(() => editorMock),
+}));
+
+class LoadedImageMock {
+    width = 100;
+    height = 100;
+    onload?: () => void;
+    onerror?: () => void;
+
+    set src(_: string) {
+        setTimeout(() => this.onload?.());
+    }
+}
+
+const GENERIC_DESCRIPTION =
+    'Something went wrong while uploading the image. Please try again or select another image.';
+
+describe('UnlayerStore image upload', () => {
+    const originalImage = window.Image;
+    const originalCreateObjectURL = URL.createObjectURL;
+    const originalRevokeObjectURL = URL.revokeObjectURL;
+
+    let store: UnlayerStore;
+    let onError: jest.Mock;
+    let done: jest.Mock;
+
+    const uploadImage = () => {
+        const [, handler] = editorMock.registerCallback.mock.calls.find(
+            ([name]) => name === 'image',
+        );
+        const file = new File(['img'], 'logo.png', { type: 'image/png' });
+
+        return handler({ attachments: [file] }, done);
+    };
+
+    beforeEach(async () => {
+        jest.clearAllMocks();
+        jest.spyOn(console, 'error').mockImplementation(() => undefined);
+        window.Image = LoadedImageMock as unknown as typeof Image;
+        URL.createObjectURL = jest.fn(() => 'blob:logo');
+        URL.revokeObjectURL = jest.fn();
+        (window as any).unlayer = {};
+
+        onError = jest.fn();
+        done = jest.fn();
+        store = new UnlayerStore({ tools: [] });
+        store.setOnError(onError);
+
+        const container = document.createElement('div');
+        container.appendChild(document.createElement('iframe'));
+        await store.init(container);
+    });
+
+    afterEach(() => {
+        store.destroy();
+        window.Image = originalImage;
+        URL.createObjectURL = originalCreateObjectURL;
+        URL.revokeObjectURL = originalRevokeObjectURL;
+        jest.restoreAllMocks();
+    });
+
+    describe('when the host resolves with a url', () => {
+        beforeEach(async () => {
+            store.setOnImage(jest.fn().mockResolvedValue({ url: 'https://cdn/logo.png' }));
+            await uploadImage();
+        });
+
+        test('completes the upload with the url only', () => {
+            expect(done.mock.calls).toEqual([[{ progress: 100, url: 'https://cdn/logo.png' }]]);
+        });
+
+        test('does not report an error', () => {
+            expect(onError).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('when the host rejects with an ImageUploadError', () => {
+        beforeEach(async () => {
+            store.setOnImage(
+                jest
+                    .fn()
+                    .mockRejectedValue(
+                        new ImageUploadError(
+                            'Image dimensions 4320x2144 exceed maximum allowed 4000px',
+                        ),
+                    ),
+            );
+            await uploadImage();
+        });
+
+        test('reports the host message', () => {
+            expect(onError).toHaveBeenCalledWith(
+                'Image upload failed',
+                'Image dimensions 4320x2144 exceed maximum allowed 4000px',
+            );
+        });
+
+        test('does not report upload progress', () => {
+            expect(done).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('when the host rejects with any other error', () => {
+        beforeEach(async () => {
+            store.setOnImage(
+                jest.fn().mockRejectedValue(new Error('Request failed with status code 500')),
+            );
+            await uploadImage();
+        });
+
+        test('reports the generic message', () => {
+            expect(onError).toHaveBeenCalledWith('Image upload failed', GENERIC_DESCRIPTION);
+        });
+
+        test('does not report upload progress', () => {
+            expect(done).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