@servicetitan/dte-pdf-editor 1.96.1 → 1.96.3

package/dist/vendor/dte-shared/types.d.ts

@@ -40,6 +40,62 @@ export interface SaveScheduleRequest extends BusinessCalendarRules {
     /** Display name, unique per tenant ignoring case, max 255 characters, and not "Default". */
     name: string;
 }
+/**
+ * A date calculated field whose custom business-day exclusion toggle is on, and the schedule it
+ * uses (DTE's bindings, full-replace via `PUT api/holidays/templates/{id}/bindings`). A field with
+ * no entry has the toggle off; what that means for its date arithmetic is up to the editor.
+ */
+export interface FieldScheduleBinding {
+    /** The field's key: `PdfField.id` in BYOD, the tool's instance id (`values.id`) in Unlayer. */
+    fieldKey: string;
+    /** One of the tenant's schedules, or undefined for the default schedule. */
+    scheduleId?: number;
+}
+/**
+ * The business-day schedule props an editor (`PdfEditor`, `UnlayerEditor`) takes from its host,
+ * with the same names and meaning in every editor. The editor builds each field's
+ * `ScheduleEditorContext` from them (`useFieldScheduleEditorContext`).
+ */
+export interface BusinessCalendarHostProps {
+    /**
+     * Date calculated fields whose custom business-day exclusion toggle is on, and the schedule
+     * each uses. Also drives the toggle/picker of the field being edited.
+     */
+    scheduleBindings?: FieldScheduleBinding[];
+    /** The tenant's known holidays, for the schedule editor's checklist. */
+    holidayCatalog?: HolidayCatalog;
+    holidayCatalogLoading?: boolean;
+    holidayCatalogError?: string;
+    /** The schedules the tenant can pick from the schedule picker. */
+    schedules?: BusinessDaySchedule[];
+    schedulesLoading?: boolean;
+    schedulesError?: string;
+    /**
+     * Called with the complete desired `scheduleBindings` whenever the toggle, the schedule picker
+     * or a schedule delete changes them (full replacement, mirroring DTE's
+     * `PUT api/holidays/templates/{id}/bindings`). The editor does not persist them itself.
+     */
+    onScheduleBindingsChange?(bindings: FieldScheduleBinding[]): void;
+    /**
+     * Creates a tenant schedule from the "Create New Schedule" drawer. Always creates a new
+     * schedule — it never overwrites a selected one. On success the created schedule is selected
+     * in the picker. A rejected promise's `message` is shown as the drawer's error (for example a
+     * duplicate-name conflict).
+     */
+    onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /**
+     * Replaces a tenant schedule's name and rules in place, from the picker's "Edit" action (DTE's
+     * `PUT api/holidays/schedules/{id}`). On success the updated schedule stays selected.
+     */
+    onUpdateSchedule?(id: number, request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /**
+     * Permanently deletes a tenant schedule, from the picker's "Delete" action (DTE's
+     * `DELETE api/holidays/schedules/{id}`). On success every field bound to it moves to the
+     * default schedule (toggle still on) through `onScheduleBindingsChange`, as DTE falls back to
+     * the default schedule for a deleted one.
+     */
+    onDeleteSchedule?(id: number): Promise<void>;
+}
 /**
  * Prop bundle for the business-calendar toggle/picker/drawer, built by a host package (currently
  * `@servicetitan/dte-pdf-editor` and `@servicetitan/dte-unlayer`) from whatever it uses to track
@@ -57,6 +113,12 @@ export interface ScheduleEditorContext {
     schedules?: BusinessDaySchedule[];
     schedulesLoading?: boolean;
     schedulesError?: string;
+    /**
+     * When set, the schedule form ("Create New Schedule" / "Edit Schedule") is rendered into this
+     * element through a portal instead of opening in a drawer. The host owns the element and decides
+     * how it is shown; leave it unset (or null, before the element exists) for the drawer.
+     */
+    editorContainer?: HTMLElement | null;
     onToggle(enabled: boolean): void;
     onSelectSchedule(scheduleId: number | undefined): void;
     onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.96.1",
+  "version": "1.96.3",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "npm run build --prefix ../shared && tsc --build && startup prepare-package && node scripts/bundle-shared.mjs"
+    "build": "npm run build --prefix ../shared && tsc --build && startup prepare-package && node ../shared/scripts/bundle-shared.mjs"
   },
   "cli": {
     "webpack": false

package/src/components/field-config-panel/__tests__/field-config-panel-overlay.test.tsx

@@ -0,0 +1,200 @@
+/*
+ * The schedule UI is offered only to a host that passes `onScheduleBindingsChange`. The overlay
+ * decides that, and every place that renders the schedule UI checks the context it builds, so the
+ * panel below is replaced by a stand-in that records what the overlay gives it.
+ */
+jest.mock('../field-config-panel', () => ({ FieldConfigPanel: jest.fn(() => null) }));
+// A Proxy is what `.svg` imports become under test; it is not a component.
+jest.mock('@servicetitan/anvil2/assets/icons/material/round/close.svg', () => ({
+    __esModule: true,
+    default: () => null,
+}));
+
+import { TextDecoder, TextEncoder } from 'util';
+
+// jsdom has no TextEncoder; anvil2 reads it when it is loaded, so this must run before it is imported.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import { act, type ComponentProps } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { type FieldScheduleBinding, type PdfField } from '../../../interface/types';
+import { FieldConfigPanel } from '../field-config-panel';
+import { FieldConfigPanelOverlay } from '../field-config-panel-overlay';
+
+const panel = FieldConfigPanel as unknown as jest.Mock;
+const lastBusinessCalendar = () =>
+    panel.mock.calls[panel.mock.calls.length - 1][0].businessCalendar;
+
+const defaultSchedule = {
+    name: 'Default',
+    isDefault: true,
+    calendar: { weekendDays: [0, 6] as (0 | 6)[], knownHolidays: [], customDates: [] },
+};
+
+describe('FieldConfigPanelOverlay', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    // Async, so the state anvil2 sets right after mounting is flushed inside `act`.
+    const render = (props: Partial<ComponentProps<typeof FieldConfigPanelOverlay>> = {}) =>
+        act(async () => {
+            root.render(
+                <FieldConfigPanelOverlay
+                    selectedField={{ id: 'f1', type: 'calculated' } as PdfField}
+                    recipients={[]}
+                    forms={[]}
+                    formFieldsByFormId={{}}
+                    onFieldConfigChange={() => {}}
+                    onDeleteField={() => {}}
+                    onRequestFormFields={() => {}}
+                    {...props}
+                />,
+            );
+        });
+
+    beforeAll(() => {
+        (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    beforeEach(() => {
+        panel.mockClear();
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    describe('the schedule form slot', () => {
+        test('gives the panel an empty element inside the overlay to portal the form into', async () => {
+            await render();
+
+            const { scheduleEditorContainer } = panel.mock.calls[panel.mock.calls.length - 1][0];
+
+            expect(scheduleEditorContainer).toBeInstanceOf(HTMLElement);
+            expect(scheduleEditorContainer.childNodes).toHaveLength(0);
+            expect(
+                container
+                    .querySelector('.dte-field-config-panel-overlay')
+                    ?.contains(scheduleEditorContainer),
+            ).toBe(true);
+        });
+    });
+
+    describe('without onScheduleBindingsChange', () => {
+        test('gives the panel no schedule context', async () => {
+            await render();
+
+            expect(lastBusinessCalendar()).toBeUndefined();
+        });
+
+        test('gives the panel no schedule context although the host passed schedules', async () => {
+            await render({
+                scheduleBindings: [{ fieldKey: 'f1' }],
+                schedules: [defaultSchedule],
+                holidayCatalog: { jurisdiction: 'US', holidays: [] },
+                onCreateSchedule: jest.fn(),
+                onUpdateSchedule: jest.fn(),
+                onDeleteSchedule: jest.fn(),
+            });
+
+            expect(lastBusinessCalendar()).toBeUndefined();
+        });
+
+        test('adds the schedule context when the host starts passing the handler', async () => {
+            await render();
+            expect(lastBusinessCalendar()).toBeUndefined();
+
+            await render({ onScheduleBindingsChange: jest.fn() });
+
+            expect(lastBusinessCalendar()).toBeDefined();
+        });
+
+        test('removes the schedule context when the host stops passing the handler', async () => {
+            await render({ onScheduleBindingsChange: jest.fn() });
+            expect(lastBusinessCalendar()).toBeDefined();
+
+            await render({ onScheduleBindingsChange: undefined });
+
+            expect(lastBusinessCalendar()).toBeUndefined();
+        });
+    });
+
+    describe('with onScheduleBindingsChange', () => {
+        let onScheduleBindingsChange: jest.Mock;
+
+        beforeEach(() => {
+            onScheduleBindingsChange = jest.fn();
+        });
+
+        test('gives the panel a schedule context with the switch off for a field without a binding', async () => {
+            await render({ onScheduleBindingsChange, scheduleBindings: [] });
+
+            expect(lastBusinessCalendar()).toMatchObject({ enabled: false });
+        });
+
+        test('gives the panel the schedule of the field and what the host loaded', async () => {
+            const schedules = [defaultSchedule];
+            const holidayCatalog = { jurisdiction: 'US', holidays: [] };
+            const onCreateSchedule = jest.fn();
+            await render({
+                onScheduleBindingsChange,
+                scheduleBindings: [{ fieldKey: 'f1', scheduleId: 3 }],
+                schedules,
+                holidayCatalog,
+                onCreateSchedule,
+            });
+
+            expect(lastBusinessCalendar()).toMatchObject({
+                enabled: true,
+                selectedScheduleId: 3,
+                schedules,
+                holidayCatalog,
+                onCreateSchedule,
+            });
+        });
+
+        test('follows the binding of the field that is selected next', async () => {
+            const scheduleBindings = [{ fieldKey: 'f2', scheduleId: 3 }];
+            await render({ onScheduleBindingsChange, scheduleBindings });
+            expect(lastBusinessCalendar()).toMatchObject({ enabled: false });
+
+            await render({
+                onScheduleBindingsChange,
+                scheduleBindings,
+                selectedField: { id: 'f2', type: 'calculated' } as PdfField,
+            });
+
+            expect(lastBusinessCalendar()).toMatchObject({ enabled: true, selectedScheduleId: 3 });
+        });
+
+        test('turns the switch on by sending the whole list with the field added', async () => {
+            const others: FieldScheduleBinding[] = [{ fieldKey: 'other', scheduleId: 9 }];
+            await render({ onScheduleBindingsChange, scheduleBindings: others });
+
+            lastBusinessCalendar().onToggle(true);
+
+            expect(onScheduleBindingsChange).toHaveBeenCalledWith([
+                { fieldKey: 'other', scheduleId: 9 },
+                { fieldKey: 'f1' },
+            ]);
+        });
+
+        test('picks a schedule by sending the whole list with the field changed', async () => {
+            await render({
+                onScheduleBindingsChange,
+                scheduleBindings: [{ fieldKey: 'f1' }, { fieldKey: 'other', scheduleId: 9 }],
+            });
+
+            lastBusinessCalendar().onSelectSchedule(4);
+
+            expect(onScheduleBindingsChange).toHaveBeenCalledWith([
+                { fieldKey: 'other', scheduleId: 9 },
+                { fieldKey: 'f1', scheduleId: 4 },
+            ]);
+        });
+    });
+});

package/src/components/field-config-panel/__tests__/schedule-editor-placement.test.tsx

@@ -0,0 +1,289 @@
+/*
+ * Where "Create new schedule" opens its form. A calculated field keeps the drawer; an e-sign
+ * `dateSignedOffset` field portals the same form into the element the overlay gives the panel
+ * (`editorContainer`). anvil2 renders the drawer as a `<dialog>`, so a form with no `<dialog>`
+ * around it is not in a drawer.
+ */
+jest.mock('../formula-generator', () => ({ FormulaGenerator: jest.fn(() => null) }));
+
+import { TextDecoder, TextEncoder } from 'util';
+
+// jsdom has no TextEncoder; anvil2 reads it when it is loaded, so this must run before it is imported.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import {
+    type CalculatedFieldFormat,
+    ESignFieldType,
+    FieldTypeEnum,
+    type PdfField,
+} from '../../../interface/types';
+import { AdvancedSettings } from '../advanced-settings';
+import { ESignOptionsModal } from '../e-sign-options-modal';
+import { FieldConfigPanel } from '../field-config-panel';
+import { FormulaGenerator } from '../formula-generator';
+
+// jsdom has no matchMedia, ResizeObserver, IntersectionObserver, popover or dialog API; anvil2 uses them.
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => false,
+    }),
+});
+class ObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+global.ResizeObserver = ObserverMock as unknown as typeof ResizeObserver;
+global.IntersectionObserver = ObserverMock as unknown as typeof IntersectionObserver;
+HTMLElement.prototype.showPopover ??= () => {};
+HTMLElement.prototype.hidePopover ??= () => {};
+HTMLElement.prototype.togglePopover ??= () => false;
+HTMLDialogElement.prototype.show ??= () => {};
+HTMLDialogElement.prototype.showModal ??= () => {};
+HTMLDialogElement.prototype.close ??= () => {};
+
+const PICKER_LABEL = 'Select Schedule or create new';
+const FORM_TITLE = 'Create New Schedule';
+
+const defaultSchedule = {
+    name: 'Weekends and US Federal Holidays',
+    isDefault: true,
+    calendar: { weekendDays: [0, 6] as (0 | 6)[], knownHolidays: [], customDates: [] },
+};
+const created = {
+    id: 7,
+    name: 'Weekdays only',
+    isDefault: false,
+    calendar: { weekendDays: [0, 6] as (0 | 6)[], knownHolidays: [], customDates: [] },
+};
+const dateFormat: CalculatedFieldFormat = { resultType: 'date', dateFormat: 'MM/DD/YYYY' };
+const noOp = () => {};
+
+describe('where the schedule form opens', () => {
+    let container: HTMLDivElement;
+    let slot: HTMLDivElement;
+    let root: Root;
+    const onSelectSchedule = jest.fn();
+    const onCreateSchedule = jest.fn();
+    const businessCalendar = (editorContainer?: HTMLElement | null) => ({
+        enabled: true,
+        schedules: [defaultSchedule],
+        editorContainer,
+        onToggle: noOp,
+        onSelectSchedule,
+        onCreateSchedule,
+    });
+
+    const render = (element: JSX.Element) =>
+        act(async () => {
+            root.render(element);
+        });
+
+    const renderESign = (editorContainer: HTMLElement | null = slot) =>
+        render(
+            <ESignOptionsModal
+                initialState={{ rules: [{ days: 3 }] }}
+                onSave={noOp}
+                businessCalendar={businessCalendar(editorContainer)}
+            />,
+        );
+
+    const renderCalculated = () =>
+        render(
+            <AdvancedSettings
+                format={dateFormat}
+                setFormat={noOp}
+                businessCalendar={businessCalendar()}
+            />,
+        );
+
+    const renderPanel = (field: PdfField) =>
+        render(
+            <FieldConfigPanel
+                field={field}
+                recipients={[{ id: 1, name: 'customer', displayName: 'Customer' }]}
+                forms={[]}
+                hideConditionalLogic
+                businessCalendar={businessCalendar()}
+                scheduleEditorContainer={slot}
+                onDeleteField={noOp}
+                onFieldConfigChange={noOp}
+                onRequestFormFields={noOp}
+            />,
+        );
+
+    const findDrawer = () => document.querySelector('dialog');
+
+    // The item is in the DOM while the dropdown is closed, so there is no need to open it first.
+    const clickCreateNewSchedule = () =>
+        act(async () => {
+            [...document.querySelectorAll('button')]
+                .find(button => button.textContent?.includes('Create new schedule'))
+                ?.click();
+        });
+
+    const clickButton = (parent: HTMLElement, label: string) =>
+        act(async () => {
+            [...parent.querySelectorAll('button')]
+                .find(button => button.textContent?.trim() === label)
+                ?.click();
+        });
+
+    const clickClose = () =>
+        act(async () => {
+            slot.querySelector<HTMLButtonElement>('button[aria-label="Close"]')?.click();
+        });
+
+    const typeScheduleName = (name: string) =>
+        act(async () => {
+            const input = slot.querySelector('input') as HTMLInputElement;
+            const setValue = Object.getOwnPropertyDescriptor(
+                HTMLInputElement.prototype,
+                'value',
+            )?.set;
+            setValue?.call(input, name);
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+
+    beforeAll(() => {
+        (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    beforeEach(() => {
+        onSelectSchedule.mockClear();
+        onCreateSchedule.mockReset().mockResolvedValue(created);
+        (FormulaGenerator as unknown as jest.Mock).mockClear();
+        container = document.createElement('div');
+        slot = document.createElement('div');
+        document.body.append(container, slot);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+        slot.remove();
+    });
+
+    describe('for a calculated field', () => {
+        test('shows the form in a drawer, next to the picker', async () => {
+            await renderCalculated();
+            expect(findDrawer()).toBeNull();
+
+            await clickCreateNewSchedule();
+
+            expect(findDrawer()?.textContent).toContain(FORM_TITLE);
+            expect(container.textContent).toContain(PICKER_LABEL);
+            expect(slot.textContent).toBe('');
+        });
+
+        test('is not given the container by the config panel', async () => {
+            await renderPanel({
+                id: 'c1',
+                type: FieldTypeEnum.calculated,
+                path: 'c1',
+            } as unknown as PdfField);
+
+            const generatorProps = (FormulaGenerator as unknown as jest.Mock).mock.calls.at(
+                -1,
+            )?.[0];
+            expect(generatorProps.businessCalendar).toBeDefined();
+            expect(generatorProps.businessCalendar.editorContainer).toBeUndefined();
+        });
+    });
+
+    describe('for an e-sign date signed offset field', () => {
+        test('portals the form into the container and opens no drawer', async () => {
+            await renderESign();
+            expect(slot.textContent).toBe('');
+
+            await clickCreateNewSchedule();
+
+            expect(slot.textContent).toContain(FORM_TITLE);
+            expect(slot.textContent).toContain('Schedule Name');
+            expect(container.textContent).not.toContain(FORM_TITLE);
+            expect(findDrawer()).toBeNull();
+        });
+
+        test('leaves the field settings mounted while the form is open', async () => {
+            await renderESign();
+
+            await clickCreateNewSchedule();
+
+            expect(container.textContent).toContain('Number of days');
+            expect(container.textContent).toContain(PICKER_LABEL);
+        });
+
+        test('opens the drawer while the container does not exist yet', async () => {
+            await renderESign(null);
+
+            await clickCreateNewSchedule();
+
+            expect(findDrawer()?.textContent).toContain(FORM_TITLE);
+            expect(slot.textContent).toBe('');
+        });
+
+        test('gets the container from the config panel', async () => {
+            await renderPanel({
+                id: 'e1',
+                type: FieldTypeEnum.eSign,
+                subType: ESignFieldType.dateSignedOffset,
+                recipient: 'customer',
+                path: 'esign.customer.dateSignedOffset',
+                // The switch of an e-sign field is stored in its data, not in the schedule context.
+                data: { rules: [{ days: 3 }], businessCalendarEnabled: true },
+            } as unknown as PdfField);
+
+            await clickCreateNewSchedule();
+
+            expect(slot.textContent).toContain(FORM_TITLE);
+            expect(findDrawer()).toBeNull();
+        });
+
+        test('creates the schedule, selects it and empties the container', async () => {
+            await renderESign();
+            await clickCreateNewSchedule();
+            await typeScheduleName('Weekdays only');
+
+            await clickButton(slot, 'Create');
+
+            expect(onCreateSchedule).toHaveBeenCalledWith(
+                expect.objectContaining({ name: 'Weekdays only' }),
+            );
+            expect(onSelectSchedule).toHaveBeenCalledWith(created.id);
+            expect(slot.textContent).toBe('');
+            expect(slot.childNodes).toHaveLength(0);
+        });
+
+        test('does not create anything without a name', async () => {
+            await renderESign();
+            await clickCreateNewSchedule();
+
+            await clickButton(slot, 'Create');
+
+            expect(onCreateSchedule).not.toHaveBeenCalled();
+            expect(slot.textContent).toContain(FORM_TITLE);
+        });
+
+        test('close empties the container without creating or selecting a schedule', async () => {
+            await renderESign();
+            await clickCreateNewSchedule();
+
+            await clickClose();
+
+            expect(onCreateSchedule).not.toHaveBeenCalled();
+            expect(onSelectSchedule).not.toHaveBeenCalled();
+            expect(slot.childNodes).toHaveLength(0);
+        });
+    });
+});