@servicetitan/dte-unlayer 0.158.0 → 0.159.0

package/src/__tests__/store.business-calendar.test.ts

@@ -0,0 +1,185 @@
+import type { UnlayerEventBusinessCalendarState } from '../shared/const';
+import { UnlayerStore } from '../store';
+
+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 offState: UnlayerEventBusinessCalendarState = {
+    enabled: true,
+    bindings: {},
+    schedules: [],
+    canDeleteSchedule: true,
+    fieldCalendars: {},
+};
+
+const onState: UnlayerEventBusinessCalendarState = {
+    enabled: true,
+    bindings: { 'field-a': { scheduleId: 7 } },
+    schedules: [
+        {
+            id: 7,
+            name: 'Sundays only',
+            isDefault: false,
+            calendar: { weekendDays: [0], knownHolidays: [], customDates: [] },
+        },
+    ],
+    canDeleteSchedule: true,
+    fieldCalendars: {
+        'field-a': { weekendDays: [0], holidays: [], firstYear: 2025, lastYear: 2027 },
+    },
+    holidays: ['2026-07-03'],
+};
+
+/** A message posted to the parent window: by the tools core in Unlayer's iframe, by default. */
+const postFromIframe = (
+    type: string,
+    data?: unknown,
+    source: Window | null = document.querySelector('iframe')?.contentWindow ?? null,
+) =>
+    window.dispatchEvent(
+        new MessageEvent('message', { data: { '-dte-message-from': { type, data } }, source }),
+    );
+
+describe('UnlayerStore business-day schedules', () => {
+    let store: UnlayerStore;
+    let container: HTMLDivElement;
+    let postMessage: jest.SpyInstance;
+
+    /** Types of the messages sent to the iframe, in order. */
+    const sentTypes = () =>
+        postMessage.mock.calls.map(([message]) => message['-dte-message-to'].type);
+    const sentData = (type: string) =>
+        postMessage.mock.calls
+            .map(([message]) => message['-dte-message-to'])
+            .filter(message => message.type === type)
+            .map(message => message.data);
+
+    beforeEach(async () => {
+        jest.useFakeTimers();
+        jest.clearAllMocks();
+        (window as any).unlayer = {};
+        container = document.createElement('div');
+        container.appendChild(document.createElement('iframe'));
+        document.body.appendChild(container);
+
+        store = new UnlayerStore({ tools: [] });
+        await store.init(container);
+        // The window message listener is added on the next tick (not the tools-ready watchdog).
+        jest.advanceTimersByTime(0);
+        postMessage = jest.spyOn(container.querySelector('iframe')!.contentWindow!, 'postMessage');
+    });
+
+    afterEach(() => {
+        store.destroy();
+        container.remove();
+        jest.useRealTimers();
+    });
+
+    test('keeps the state until the tools core has loaded, then sends it right after --config', () => {
+        store.setBusinessCalendarState(onState);
+        expect(sentTypes()).toEqual([]);
+
+        postFromIframe('--core-loaded');
+
+        expect(sentTypes()).toEqual(['--config', '--business-calendar-state']);
+        expect(sentData('--business-calendar-state')).toEqual([onState]);
+    });
+
+    test('sends a changed state at once, and skips an unchanged one', () => {
+        postFromIframe('--core-loaded');
+        postMessage.mockClear();
+
+        store.setBusinessCalendarState(offState);
+        store.setBusinessCalendarState({ ...offState });
+        store.setBusinessCalendarState(onState);
+
+        expect(sentData('--business-calendar-state')).toEqual([offState, onState]);
+    });
+
+    test('sends the state again when the tools core loads again', () => {
+        store.setBusinessCalendarState(onState);
+        postFromIframe('--core-loaded');
+        postMessage.mockClear();
+
+        postFromIframe('--core-loaded');
+
+        expect(sentData('--business-calendar-state')).toEqual([onState]);
+    });
+
+    test('sends a plain copy, not the object it was given', () => {
+        postFromIframe('--core-loaded');
+        store.setBusinessCalendarState(onState);
+
+        const [sent] = sentData('--business-calendar-state');
+        expect(sent).toEqual(onState);
+        expect(sent).not.toBe(onState);
+    });
+
+    test('passes schedule requests to the host only when they name an action and a field', () => {
+        const onRequest = jest.fn();
+        store.setOnBusinessCalendarRequest(onRequest);
+
+        postFromIframe('--business-calendar-request', { action: 'toggle', enabled: true });
+        postFromIframe('--business-calendar-request', { fieldKey: 'field-a' });
+        postFromIframe('--business-calendar-request', {
+            action: 'toggle',
+            fieldKey: 'field-a',
+            enabled: true,
+        });
+        postFromIframe('--business-calendar-request', {
+            action: 'select',
+            fieldKey: 'esign-a',
+            scheduleId: 7,
+        });
+
+        expect(onRequest.mock.calls).toEqual([
+            [{ action: 'toggle', fieldKey: 'field-a', enabled: true }],
+            [{ action: 'select', fieldKey: 'esign-a', scheduleId: 7 }],
+        ]);
+    });
+
+    test("ignores schedule requests that don't come from the editor's iframe", () => {
+        const onRequest = jest.fn();
+        store.setOnBusinessCalendarRequest(onRequest);
+        const otherFrame = document.createElement('iframe');
+        document.body.appendChild(otherFrame);
+
+        const request = { action: 'delete', fieldKey: 'field-a', scheduleId: 7, requestId: 'r1' };
+        postFromIframe('--business-calendar-request', request, otherFrame.contentWindow);
+        postFromIframe('--business-calendar-request', request, window);
+        postFromIframe('--business-calendar-request', request, null);
+
+        expect(onRequest).not.toHaveBeenCalled();
+    });
+
+    test('sends the outcome of a delete request to the iframe', () => {
+        store.sendBusinessCalendarResult({ requestId: 'r1', error: 'in use' });
+
+        expect(sentData('--business-calendar-result')).toEqual([
+            { requestId: 'r1', error: 'in use' },
+        ]);
+    });
+
+    test('registers the e-sign type labels with the tools', () => {
+        postFromIframe('--data-loaded');
+
+        const [register] = sentData('--register');
+        expect(register.eSignFieldTypes).toContain('Date Signed Offset');
+        expect(register.eSignFieldTypeLabels).toEqual({
+            dateSignedOffset: 'Calculated Signing Date',
+        });
+    });
+});

package/src/__tests__/unlayer.e-sign-types.test.ts

@@ -0,0 +1,30 @@
+import { E_SIGN_DATE_SIGNED_OFFSET_TYPE } from '../shared/const';
+import { createUnlayerEditor } from '../unlayer';
+
+describe('createUnlayerEditor e-sign field types', () => {
+    const createEditor = jest.fn(() => ({ registerCallback: jest.fn() }));
+
+    beforeEach(() => {
+        createEditor.mockClear();
+        (window as any).unlayer = { createEditor };
+    });
+
+    const eSignTypeOptions = (): { label: string; value: string }[] => {
+        const container = document.createElement('div');
+        container.id = 'editor';
+        createUnlayerEditor(container, {
+            tools: [],
+            eSignFieldTypes: ['Signature', 'Date Signed', 'Date Signed Offset'],
+        });
+        const [[config]] = createEditor.mock.calls as unknown as [[any]];
+        return config.tools['custom#e-sign'].properties.eSignFieldType.editor.data.options;
+    };
+
+    test('shows "Calculated Signing Date" for the date signed offset type, keeping its value', () => {
+        expect(eSignTypeOptions()).toEqual([
+            { label: 'Signature', value: 'signature' },
+            { label: 'Date Signed', value: 'dateSigned' },
+            { label: 'Calculated Signing Date', value: E_SIGN_DATE_SIGNED_OFFSET_TYPE },
+        ]);
+    });
+});

package/src/business-calendar/BusinessCalendarDrawer.tsx

@@ -0,0 +1,76 @@
+import { ThemeProvider } from '@servicetitan/anvil2';
+// eslint-disable-next-line import/no-extraneous-dependencies -- bundled, see bundle-shared.mjs
+import {
+    type BusinessCalendarHostProps,
+    type BusinessDaySchedule,
+    findSelectedSchedule,
+    ScheduleDrawer,
+    useFieldScheduleEditorContext,
+} from '@servicetitan/dte-shared';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import type { BusinessCalendarDrawerRequest } from './business-calendar-requests';
+
+export interface BusinessCalendarDrawerProps {
+    /** The field and the schedule to edit (none: a new schedule), asked for from the iframe. */
+    request: BusinessCalendarDrawerRequest;
+    /** The editor's schedule props (`CreateUnlayerEditorProps`). */
+    host: BusinessCalendarHostProps;
+    /** Same contract as `DisplayConditionModalProps.portalContainer`. */
+    portalContainer?: Element | DocumentFragment | null;
+    onClose(): void;
+}
+
+/**
+ * The shared "Create New Schedule" / "Edit Schedule" drawer, opened in the parent window from a
+ * date field's inline schedule picker (a calculated field's, in the Formula Builder, or an e-sign
+ * "Date Signed Offset" field's, in its property panel), which runs inside the Unlayer iframe
+ * without the design system. As BYOD's picker does, a saved schedule is selected for the field.
+ */
+export function BusinessCalendarDrawer({
+    host,
+    onClose,
+    portalContainer,
+    request,
+}: Readonly<BusinessCalendarDrawerProps>) {
+    const businessCalendar = useFieldScheduleEditorContext(request.fieldKey, host);
+    const editingSchedule =
+        request.scheduleId === undefined
+            ? undefined
+            : findSelectedSchedule(host.schedules, request.scheduleId);
+
+    /*
+     * The schedule to edit was deleted meanwhile: close the request instead of turning the edit
+     * into a create, or of leaving it pending to open the drawer on its own later.
+     */
+    const scheduleMissing = request.scheduleId !== undefined && !editingSchedule;
+    useEffect(() => {
+        if (scheduleMissing) {
+            onClose();
+        }
+    }, [onClose, scheduleMissing]);
+
+    if (scheduleMissing) {
+        return null;
+    }
+
+    const handleSaved = (schedule: BusinessDaySchedule) => {
+        businessCalendar.onSelectSchedule(schedule.id);
+        onClose();
+    };
+
+    const drawer = (
+        <ScheduleDrawer
+            businessCalendar={businessCalendar}
+            editingSchedule={editingSchedule}
+            onClose={onClose}
+            onSaved={handleSaved}
+        />
+    );
+
+    if (portalContainer) {
+        return createPortal(<ThemeProvider>{drawer}</ThemeProvider>, portalContainer);
+    }
+
+    return drawer;
+}

package/src/business-calendar/business-calendar-requests.ts

@@ -0,0 +1,80 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- bundled, see bundle-shared.mjs
+import {
+    buildFieldScheduleEditorContext,
+    type BusinessCalendarHostProps,
+    type FieldScheduleBindingsAccess,
+    SCHEDULE_PICKER_TEXT,
+} from '@servicetitan/dte-shared';
+import type {
+    UnlayerEventBusinessCalendarRequest,
+    UnlayerEventBusinessCalendarResult,
+} from '../shared/const';
+
+/** The schedule drawer to show for a field: a new schedule, or `scheduleId` to edit. */
+export interface BusinessCalendarDrawerRequest {
+    fieldKey: string;
+    scheduleId?: number;
+}
+
+export interface BusinessCalendarRequestHandlerDeps {
+    bindings: FieldScheduleBindingsAccess;
+    /** The editor's current schedule props. */
+    getHost(): BusinessCalendarHostProps;
+    openDrawer(request: BusinessCalendarDrawerRequest): void;
+    sendResult(result: UnlayerEventBusinessCalendarResult): void;
+}
+
+/**
+ * Carries out the iframe's schedule requests (`--business-calendar-request`) through the field's
+ * `ScheduleEditorContext`, the one BYOD's toggle and picker use, so a toggle, a pick or a delete
+ * changes the bindings exactly as there. A delete then reports back. Unlike `SchedulePicker` it
+ * doesn't select the default schedule for the field afterwards: the context's delete has already
+ * moved every field still on that schedule to the default one, and selecting it again would turn
+ * the field's toggle back on if it was switched off while the delete was running. A pick or a
+ * delete of a schedule the host doesn't list as one of the tenant's own is ignored or refused.
+ */
+export const createBusinessCalendarRequestHandler =
+    ({ bindings, getHost, openDrawer, sendResult }: BusinessCalendarRequestHandlerDeps) =>
+    (request: UnlayerEventBusinessCalendarRequest) => {
+        const host = getHost();
+        const context = buildFieldScheduleEditorContext(request.fieldKey, host, bindings);
+        const isListedTenantSchedule = (scheduleId: number) =>
+            !!host.schedules?.some(schedule => schedule.id === scheduleId && !schedule.isDefault);
+
+        switch (request.action) {
+            case 'toggle':
+                context.onToggle(request.enabled);
+                return;
+            case 'select':
+                // No id is the default schedule.
+                if (
+                    request.scheduleId === undefined ||
+                    isListedTenantSchedule(request.scheduleId)
+                ) {
+                    context.onSelectSchedule(request.scheduleId);
+                }
+                return;
+            case 'create':
+                openDrawer({ fieldKey: request.fieldKey });
+                return;
+            case 'edit':
+                openDrawer({ fieldKey: request.fieldKey, scheduleId: request.scheduleId });
+                return;
+            case 'delete': {
+                const { requestId, scheduleId } = request;
+                if (!context.onDeleteSchedule || !isListedTenantSchedule(scheduleId)) {
+                    sendResult({ requestId, error: SCHEDULE_PICKER_TEXT.deleteFailed });
+                    return;
+                }
+                context.onDeleteSchedule(scheduleId).then(
+                    () => sendResult({ requestId }),
+                    (e: unknown) =>
+                        sendResult({
+                            requestId,
+                            error:
+                                e instanceof Error ? e.message : SCHEDULE_PICKER_TEXT.deleteFailed,
+                        }),
+                );
+            }
+        }
+    };

package/src/business-calendar/business-calendar-state.ts

@@ -0,0 +1,113 @@
+import { useEffect, useMemo } from 'react';
+import type { UnlayerEventBusinessCalendarState } from '../shared/const';
+import type { BusinessCalendar } from '../shared/date-calc';
+import type { UnlayerStore } from '../store';
+import type { CreateUnlayerEditorProps } from '../unlayer-interface';
+
+type BusinessCalendarStateSource = Pick<
+    CreateUnlayerEditorProps,
+    | 'fieldCalendars'
+    | 'holidayCatalog'
+    | 'holidayCatalogError'
+    | 'holidayCatalogLoading'
+    | 'holidays'
+    | 'scheduleBindings'
+    | 'schedules'
+    | 'schedulesError'
+    | 'schedulesLoading'
+> &
+    Pick<UnlayerEventBusinessCalendarState, 'canDeleteSchedule' | 'enabled'>;
+
+/**
+ * The host's schedule props as the iframe needs them (`--business-calendar-state`): whether the
+ * schedule UI is on, each bound field's schedule, the schedules and holidays the inline picker
+ * shows, and the calendars the previews use.
+ *
+ * While the host edits schedules, only bound fields keep their calendar: a field whose toggle was
+ * just turned off uses the default calendar right away, without waiting for the host to drop its
+ * resolved calendar.
+ */
+export const buildBusinessCalendarState = (
+    source: BusinessCalendarStateSource,
+): UnlayerEventBusinessCalendarState => {
+    const bindings: UnlayerEventBusinessCalendarState['bindings'] = {};
+    const boundCalendars: Record<string, BusinessCalendar> = {};
+
+    for (const { fieldKey, scheduleId } of source.scheduleBindings ?? []) {
+        bindings[fieldKey] = { scheduleId };
+
+        const calendar = source.fieldCalendars?.[fieldKey];
+        if (calendar) {
+            boundCalendars[fieldKey] = calendar;
+        }
+    }
+
+    return {
+        enabled: source.enabled,
+        bindings,
+        schedules: source.schedules ?? [],
+        schedulesLoading: source.schedulesLoading,
+        schedulesError: source.schedulesError,
+        holidayCatalog: source.holidayCatalog,
+        holidayCatalogLoading: source.holidayCatalogLoading,
+        holidayCatalogError: source.holidayCatalogError,
+        canDeleteSchedule: source.canDeleteSchedule,
+        fieldCalendars: source.enabled ? boundCalendars : (source.fieldCalendars ?? {}),
+        holidays: source.holidays,
+    };
+};
+
+/**
+ * Keeps the iframe's schedule state in step with the editor's props: rebuilt only when one of
+ * them changes (the callbacks count only for whether they are passed), and sent by the store only
+ * when the result differs from what the iframe has.
+ */
+export function useBusinessCalendarState(store: UnlayerStore, opts: CreateUnlayerEditorProps) {
+    const {
+        fieldCalendars,
+        holidayCatalog,
+        holidayCatalogError,
+        holidayCatalogLoading,
+        holidays,
+        scheduleBindings,
+        schedules,
+        schedulesError,
+        schedulesLoading,
+    } = opts;
+    const enabled = !!opts.onScheduleBindingsChange;
+    const canDeleteSchedule = !!opts.onDeleteSchedule;
+
+    const state = useMemo(
+        () =>
+            buildBusinessCalendarState({
+                canDeleteSchedule,
+                enabled,
+                fieldCalendars,
+                holidayCatalog,
+                holidayCatalogError,
+                holidayCatalogLoading,
+                holidays,
+                scheduleBindings,
+                schedules,
+                schedulesError,
+                schedulesLoading,
+            }),
+        [
+            canDeleteSchedule,
+            enabled,
+            fieldCalendars,
+            holidayCatalog,
+            holidayCatalogError,
+            holidayCatalogLoading,
+            holidays,
+            scheduleBindings,
+            schedules,
+            schedulesError,
+            schedulesLoading,
+        ],
+    );
+
+    useEffect(() => {
+        store.setBusinessCalendarState(state);
+    }, [state, store]);
+}

package/src/business-calendar/useBusinessCalendarRequests.ts

@@ -0,0 +1,49 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- bundled, see bundle-shared.mjs
+import {
+    type BusinessCalendarHostProps,
+    useFieldScheduleBindingsAccess,
+} from '@servicetitan/dte-shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { UnlayerStore } from '../store';
+import {
+    type BusinessCalendarDrawerRequest,
+    createBusinessCalendarRequestHandler,
+} from './business-calendar-requests';
+
+/**
+ * Handles the iframe's schedule requests for `UnlayerEditor`: changes the bindings through the
+ * host's callbacks, and returns the schedule drawer to show. Each drawer request carries a new
+ * `id`, to remount the drawer with its own starting values.
+ */
+export function useBusinessCalendarRequests(store: UnlayerStore, host: BusinessCalendarHostProps) {
+    const [drawer, setDrawer] = useState<(BusinessCalendarDrawerRequest & { id: number }) | null>(
+        null,
+    );
+    const bindings = useFieldScheduleBindingsAccess(
+        host.scheduleBindings,
+        host.onScheduleBindingsChange,
+    );
+    const latestHost = useRef(host);
+    useEffect(() => {
+        latestHost.current = host;
+    });
+
+    useEffect(() => {
+        let drawerId = 0;
+
+        store.setOnBusinessCalendarRequest(
+            createBusinessCalendarRequestHandler({
+                bindings,
+                getHost: () => latestHost.current,
+                openDrawer: request => setDrawer({ ...request, id: ++drawerId }),
+                sendResult: store.sendBusinessCalendarResult,
+            }),
+        );
+
+        return () => store.setOnBusinessCalendarRequest();
+    }, [bindings, store]);
+
+    const closeDrawer = useCallback(() => setDrawer(null), []);
+
+    return { closeDrawer, drawer };
+}