@servicetitan/dte-pdf-editor 1.96.0 → 1.96.2

package/dist/vendor/dte-shared/components/schedule-picker.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Chip, Flex, SelectFieldSync, Text } from '@servicetitan/anvil2';
+import DeleteIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
+import EditIcon from '@servicetitan/anvil2/assets/icons/material/round/edit.svg';
+import IconExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
+import IconExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+import { Fragment, useMemo, useState } from 'react';
+import { formatCustomDateLabel } from '../business-calendar-validation.utils';
+import { ScheduleDrawer } from './schedule-drawer';
+/** `BusinessCalendarRules.weekendDays` day numbers, as `Date.getUTCDay()` numbers them. */
+const WEEKEND_DAY_LABELS = { 0: 'Sundays', 6: 'Saturdays' };
+const DEFAULT_OPTION_ID = 'default';
+/** "Select Schedule or create new" picker plus a collapsible preview of the selected schedule's rules. */
+export const SchedulePicker = ({ businessCalendar }) => {
+    var _a;
+    const { holidayCatalog, holidayCatalogError, holidayCatalogLoading, onDeleteSchedule, onSelectSchedule, schedules, schedulesError, schedulesLoading, selectedScheduleId, } = businessCalendar;
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [editingSchedule, setEditingSchedule] = useState();
+    const [previewOpen, setPreviewOpen] = useState(true);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState();
+    const options = useMemo(() => (schedules !== null && schedules !== void 0 ? schedules : []).map(s => { var _a; return ({ id: (_a = s.id) !== null && _a !== void 0 ? _a : DEFAULT_OPTION_ID, label: s.name }); }), [schedules]);
+    const selectedOptionId = selectedScheduleId !== null && selectedScheduleId !== void 0 ? selectedScheduleId : DEFAULT_OPTION_ID;
+    const selectedOption = (_a = options.find(o => o.id === selectedOptionId)) !== null && _a !== void 0 ? _a : null;
+    const selectedSchedule = (schedules !== null && schedules !== void 0 ? schedules : []).find(s => { var _a; return ((_a = s.id) !== null && _a !== void 0 ? _a : DEFAULT_OPTION_ID) === selectedOptionId; });
+    const holidayByCode = useMemo(() => {
+        var _a;
+        const map = new Map();
+        for (const h of (_a = holidayCatalog === null || holidayCatalog === void 0 ? void 0 : holidayCatalog.holidays) !== null && _a !== void 0 ? _a : []) {
+            map.set(h.code, h);
+        }
+        return map;
+    }, [holidayCatalog]);
+    const handleSelectedOptionChange = (option) => {
+        if (!option) {
+            return;
+        }
+        onSelectSchedule(option.id === DEFAULT_OPTION_ID ? undefined : option.id);
+    };
+    const handleSaved = (schedule) => {
+        onSelectSchedule(schedule.id);
+        setDrawerOpen(false);
+        setEditingSchedule(undefined);
+    };
+    const handleOpenCreate = () => {
+        setEditingSchedule(undefined);
+        setDrawerOpen(true);
+    };
+    const handleOpenEdit = () => {
+        if (!selectedSchedule) {
+            return;
+        }
+        setEditingSchedule(selectedSchedule);
+        setDrawerOpen(true);
+    };
+    const handleCloseDrawer = () => {
+        setDrawerOpen(false);
+        setEditingSchedule(undefined);
+    };
+    const handleDelete = async () => {
+        if (!(selectedSchedule === null || selectedSchedule === void 0 ? void 0 : selectedSchedule.id) || !onDeleteSchedule) {
+            return;
+        }
+        setDeleting(true);
+        setDeleteError(undefined);
+        try {
+            await onDeleteSchedule(selectedSchedule.id);
+            onSelectSchedule(undefined);
+        }
+        catch (e) {
+            setDeleteError(e instanceof Error ? e.message : 'Failed to delete schedule');
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    return (_jsxs(Fragment, { children: [_jsx(SelectFieldSync, { label: "Select Schedule or create new", options: options, value: selectedOption, disableClearButton: true, disabled: schedulesLoading, onSelectedOptionChange: handleSelectedOptionChange, onAddNewItem: handleOpenCreate, addItemLabel: "Create new schedule", filter: { keys: ['label'] } }), schedulesLoading && _jsx(Text, { variant: "body", children: "Loading schedules\u2026" }), schedulesError && _jsx(Alert, { status: "danger", title: schedulesError }), selectedSchedule && (_jsxs("div", { className: "dte-business-calendar-preview", children: [_jsxs(Flex, { alignItems: "center", justifyContent: "space-between", gap: "2", className: "dte-business-calendar-preview-header", children: [_jsxs(Flex, { alignItems: "center", gap: "2", onClick: () => setPreviewOpen(prev => !prev), children: [_jsx(Button, { appearance: "ghost", size: "small", icon: previewOpen ? IconExpandLess : IconExpandMore, "aria-label": previewOpen
+                                            ? 'Collapse schedule preview'
+                                            : 'Expand schedule preview' }), _jsx(Text, { variant: "body", children: _jsx("strong", { children: selectedSchedule.name }) })] }), !selectedSchedule.isDefault && (_jsxs(Flex, { alignItems: "center", gap: "2", children: [_jsx(Button, { icon: EditIcon, size: "small", appearance: "ghost", onClick: handleOpenEdit, disabled: deleting, children: "Edit" }), _jsx(Button, { icon: DeleteIcon, size: "small", appearance: "ghost", "aria-label": "Delete schedule", onClick: handleDelete, loading: deleting, disabled: !onDeleteSchedule })] }))] }), deleteError && _jsx(Alert, { status: "danger", title: deleteError }), previewOpen && (_jsxs(Flex, { direction: "column", gap: "3", className: "dte-business-calendar-preview-content", children: [_jsxs(Flex, { direction: "column", gap: "2", children: [_jsx(Text, { variant: "eyebrow", size: "small", children: "Excluded Weekends" }), _jsx(Flex, { gap: "2", style: { flexWrap: 'wrap' }, children: selectedSchedule.calendar.weekendDays.map(day => {
+                                            var _a;
+                                            return (_jsx(Chip, { label: (_a = WEEKEND_DAY_LABELS[day]) !== null && _a !== void 0 ? _a : String(day), size: "medium" }, day));
+                                        }) })] }), _jsxs(Flex, { direction: "column", gap: "2", children: [_jsx(Text, { variant: "eyebrow", size: "small", children: "Excluded Holidays" }), holidayCatalogLoading && (_jsx(Text, { variant: "body", children: "Loading holidays\u2026" })), holidayCatalogError && (_jsx(Alert, { status: "danger", title: holidayCatalogError })), _jsx(Flex, { gap: "2", style: { flexWrap: 'wrap' }, children: selectedSchedule.calendar.knownHolidays.map(code => {
+                                            const holiday = holidayByCode.get(code);
+                                            return (_jsx(Chip, { label: holiday
+                                                    ? `${holiday.displayName} · ${holiday.rule}`
+                                                    : code, size: "medium" }, code));
+                                        }) })] }), selectedSchedule.calendar.customDates.length > 0 && (_jsxs(Flex, { direction: "column", gap: "2", children: [_jsx(Text, { variant: "eyebrow", size: "small", children: "Custom Dates" }), _jsx(Flex, { gap: "2", style: { flexWrap: 'wrap' }, children: selectedSchedule.calendar.customDates.map(date => (_jsx(Chip, { label: formatCustomDateLabel(date), size: "medium" }, date))) })] }))] }))] })), drawerOpen && (_jsx(ScheduleDrawer, { businessCalendar: businessCalendar, editingSchedule: editingSchedule, onClose: handleCloseDrawer, onSaved: handleSaved }))] }));
+};

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

@@ -0,0 +1,10 @@
+/** DTE's `SaveDateScheduleRequest.Name` limit. */
+export declare const MAX_SCHEDULE_NAME_LENGTH = 255;
+/** The read-only default schedule's name; a tenant schedule may not reuse it (case-insensitive). */
+export declare const RESERVED_SCHEDULE_NAME = "Default";
+/** `MM-DD`, 01-12 / 01-31, as DTE's `CalendarSpecModel.customDates` (`02-29` is a valid leap day). */
+export declare const CUSTOM_DATE_PATTERN: RegExp;
+/** Days per month for an `MM-DD` custom date, Feb including the leap day. */
+export declare const CUSTOM_DATE_MONTH_LENGTHS: number[];
+/** The default schedule's weekend: Sunday and Saturday, DTE's `Date.getUTCDay()` numbering. */
+export declare const DEFAULT_SCHEDULE_WEEKEND_DAYS: [0, 6];

package/dist/vendor/dte-shared/constants.js

@@ -0,0 +1,10 @@
+/** DTE's `SaveDateScheduleRequest.Name` limit. */
+export const MAX_SCHEDULE_NAME_LENGTH = 255;
+/** The read-only default schedule's name; a tenant schedule may not reuse it (case-insensitive). */
+export const RESERVED_SCHEDULE_NAME = 'Default';
+/** `MM-DD`, 01-12 / 01-31, as DTE's `CalendarSpecModel.customDates` (`02-29` is a valid leap day). */
+export const CUSTOM_DATE_PATTERN = /^(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+/** Days per month for an `MM-DD` custom date, Feb including the leap day. */
+export const CUSTOM_DATE_MONTH_LENGTHS = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+/** The default schedule's weekend: Sunday and Saturday, DTE's `Date.getUTCDay()` numbering. */
+export const DEFAULT_SCHEDULE_WEEKEND_DAYS = [0, 6];

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

@@ -0,0 +1,6 @@
+export { BusinessCalendarSection } from './components/business-calendar-section';
+export { SchedulePicker } from './components/schedule-picker';
+export { ScheduleDrawer } from './components/schedule-drawer';
+export type * from './types';
+export * from './constants';
+export * from './business-calendar-validation.utils';

package/dist/vendor/dte-shared/index.js

@@ -0,0 +1,5 @@
+export { BusinessCalendarSection } from './components/business-calendar-section';
+export { SchedulePicker } from './components/schedule-picker';
+export { ScheduleDrawer } from './components/schedule-drawer';
+export * from './constants';
+export * from './business-calendar-validation.utils';

package/dist/vendor/dte-shared/styles/schedule.css

@@ -0,0 +1,19 @@
+.dte-business-calendar-section {
+    margin-top: var(--spacing-2);
+    padding-top: var(--spacing-2);
+    border-top: 1px solid var(--border-color);
+}
+
+.dte-business-calendar-preview {
+    padding: var(--spacing-2);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+.dte-business-calendar-preview-header {
+    cursor: pointer;
+}
+
+.dte-business-calendar-preview-content {
+    margin-top: var(--spacing-2);
+}

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

@@ -0,0 +1,67 @@
+/** A weekend day excluded by a business-day schedule, as `Date.getUTCDay()` numbers them. */
+export type WeekendDay = 0 | 6;
+/** A known holiday a tenant can exclude, from DTE's catalog (`GET api/holidays/catalog`). */
+export interface KnownHoliday {
+    /** Stable code stored in a schedule's `knownHolidays`, e.g. `JULY4`. */
+    code: string;
+    /** Name to show, e.g. "Independence Day". */
+    displayName: string;
+    /** When it falls, e.g. "July 4" or "4th Thursday of November". */
+    rule: string;
+}
+/** The known holidays a tenant can exclude, for the schedule editor's checklist. */
+export interface HolidayCatalog {
+    /** The jurisdiction the holidays belong to, e.g. "US" or a US state code. */
+    jurisdiction: string;
+    holidays: KnownHoliday[];
+}
+/** The rules of a business-day schedule: which days a date calculation skips. */
+export interface BusinessCalendarRules {
+    weekendDays: WeekendDay[];
+    /** Codes of excluded holidays from the jurisdiction's catalog (`KnownHoliday.code`). */
+    knownHolidays: string[];
+    /** Extra excluded days as `MM-DD`, repeating every year, e.g. `12-24`. */
+    customDates: string[];
+}
+/** A schedule a tenant can pick for a business-day calculation (DTE's `GET api/holidays/schedules`). */
+export interface BusinessDaySchedule {
+    /** Identifier of a tenant schedule; undefined for the read-only default schedule. */
+    id?: number;
+    name: string;
+    /** Whether this is the read-only default schedule of the tenant's jurisdiction. */
+    isDefault: boolean;
+    calendar: BusinessCalendarRules;
+}
+/**
+ * Request to create a tenant business-day schedule (DTE's `POST api/holidays/schedules`). Always
+ * creates a new schedule — editing a selected one does not overwrite it.
+ */
+export interface SaveScheduleRequest extends BusinessCalendarRules {
+    /** Display name, unique per tenant ignoring case, max 255 characters, and not "Default". */
+    name: string;
+}
+/**
+ * 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
+ * which of its own fields have the toggle on and which schedule each uses — this package has no
+ * opinion on that part, only on the schedule CRUD and the UI built from it.
+ */
+export interface ScheduleEditorContext {
+    /** Whether the current field's custom business-day exclusion toggle is on. */
+    enabled: boolean;
+    /** The current field's bound schedule id, or undefined for the default schedule. */
+    selectedScheduleId?: number;
+    holidayCatalog?: HolidayCatalog;
+    holidayCatalogLoading?: boolean;
+    holidayCatalogError?: string;
+    schedules?: BusinessDaySchedule[];
+    schedulesLoading?: boolean;
+    schedulesError?: string;
+    onToggle(enabled: boolean): void;
+    onSelectSchedule(scheduleId: number | undefined): void;
+    onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /** Replaces a tenant schedule's name and rules in place (DTE's `PUT api/holidays/schedules/{id}`). */
+    onUpdateSchedule?(id: number, request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    /** Permanently deletes a tenant schedule; fields bound to it fall back to the default schedule. */
+    onDeleteSchedule?(id: number): Promise<void>;
+}

package/dist/vendor/dte-shared/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.96.0",
+  "version": "1.96.2",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
@@ -13,17 +13,19 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "tsc --build && startup prepare-package"
+    "build": "npm run build --prefix ../shared && tsc --build && startup prepare-package && node scripts/bundle-shared.mjs"
   },
   "cli": {
     "webpack": false
   },
   "dependencies": {
-    "@servicetitan/dte-shared": "^0.0.1",
     "pdfjs-dist": "^5.4.530",
     "react-pdf": "^10.3.0",
     "uuid": "^9.0.0"
   },
+  "devDependencies": {
+    "@servicetitan/dte-shared": "^0.0.1"
+  },
   "peerDependencies": {
     "@servicetitan/anvil2": "^3.7.1",
     "react": "~18.3.1",

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

@@ -0,0 +1,184 @@
+/*
+ * 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('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-switch-visibility.test.tsx

@@ -0,0 +1,206 @@
+/*
+ * The overlay gives the panel no schedule context when the host cannot save bindings. This checks
+ * the other half: the places that draw the schedule switch show it only with a context.
+ */
+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, useState } 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';
+
+// jsdom has no matchMedia, ResizeObserver, IntersectionObserver or popover 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;
+
+const SWITCH_LABEL = 'Exclude weekends & holidays from the calculation';
+const noOp = () => {};
+const businessCalendar = { enabled: false, onToggle: noOp, onSelectSchedule: noOp };
+const dateFormat: CalculatedFieldFormat = { resultType: 'date', dateFormat: 'MM/DD/YYYY' };
+const numberFormat: CalculatedFieldFormat = {
+    resultType: 'number',
+    thousandsSeparator: false,
+    decimals: 2,
+    roundingMode: 'round',
+    decimalSeparatorEnabled: false,
+    decimalSeparator: '.',
+    prefixText: '',
+    postfixText: '',
+};
+
+const AdvancedSettingsSubject = ({
+    format,
+    withSchedules,
+}: {
+    format: CalculatedFieldFormat;
+    withSchedules: boolean;
+}) => {
+    const [current, setCurrent] = useState(format);
+
+    return (
+        <AdvancedSettings
+            format={current}
+            setFormat={setCurrent}
+            businessCalendar={withSchedules ? businessCalendar : undefined}
+        />
+    );
+};
+
+describe('the schedule switch', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+
+    const render = (element: JSX.Element) =>
+        act(async () => {
+            root.render(element);
+        });
+
+    beforeAll(() => {
+        (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    });
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    });
+
+    afterEach(async () => {
+        await act(async () => root.unmount());
+        container.remove();
+    });
+
+    describe('in the advanced settings of a calculated field', () => {
+        test('is shown for a date field with a schedule context', async () => {
+            await render(<AdvancedSettingsSubject format={dateFormat} withSchedules />);
+
+            expect(container.textContent).toContain('Date format');
+            expect(container.textContent).toContain(SWITCH_LABEL);
+        });
+
+        test('is not shown for a date field without a schedule context', async () => {
+            await render(<AdvancedSettingsSubject format={dateFormat} withSchedules={false} />);
+
+            expect(container.textContent).toContain('Date format');
+            expect(container.textContent).not.toContain(SWITCH_LABEL);
+        });
+
+        test('is not shown for a number field', async () => {
+            await render(<AdvancedSettingsSubject format={numberFormat} withSchedules />);
+
+            expect(container.textContent).not.toContain(SWITCH_LABEL);
+        });
+    });
+
+    describe('in the options of an e-sign date signed offset', () => {
+        const renderOptions = (withSchedules: boolean) =>
+            render(
+                <ESignOptionsModal
+                    initialState={{ rules: [{ days: 3 }] }}
+                    onSave={() => {}}
+                    businessCalendar={withSchedules ? businessCalendar : undefined}
+                />,
+            );
+
+        test('is shown with a schedule context', async () => {
+            await renderOptions(true);
+
+            expect(container.textContent).toContain(SWITCH_LABEL);
+        });
+
+        test('is not shown without a schedule context', async () => {
+            await renderOptions(false);
+
+            expect(container.textContent).not.toContain(SWITCH_LABEL);
+        });
+    });
+
+    describe('in the config panel of an e-sign date signed offset field', () => {
+        const field = {
+            id: 'e1',
+            type: FieldTypeEnum.eSign,
+            subType: ESignFieldType.dateSignedOffset,
+            recipient: 'customer',
+            path: 'esign.customer.dateSignedOffset',
+            data: { rules: [{ days: 3 }] },
+        } as unknown as PdfField;
+        const onFieldConfigChange = jest.fn();
+
+        const renderPanel = (context?: typeof businessCalendar) =>
+            render(
+                <FieldConfigPanel
+                    field={field}
+                    recipients={[{ id: 1, name: 'customer', displayName: 'Customer' }]}
+                    forms={[]}
+                    hideConditionalLogic
+                    businessCalendar={context}
+                    onDeleteField={noOp}
+                    onFieldConfigChange={onFieldConfigChange}
+                    onRequestFormFields={noOp}
+                />,
+            );
+
+        const findSwitch = () =>
+            [...container.querySelectorAll('input')].find(input =>
+                input.closest('label')?.textContent?.includes(SWITCH_LABEL),
+            );
+
+        beforeEach(() => onFieldConfigChange.mockClear());
+
+        test('is not shown without a schedule context', async () => {
+            await renderPanel();
+
+            expect(container.textContent).toContain('Number of days');
+            expect(container.textContent).not.toContain(SWITCH_LABEL);
+        });
+
+        test('is shown with a schedule context', async () => {
+            await renderPanel(businessCalendar);
+
+            expect(findSwitch()).toBeDefined();
+        });
+
+        test('stores the choice in the field data and does not call the context', async () => {
+            const onToggle = jest.fn();
+            await renderPanel({ ...businessCalendar, onToggle });
+
+            await act(async () => findSwitch()?.click());
+
+            expect(onFieldConfigChange).toHaveBeenCalledWith({
+                data: { rules: [{ days: 3 }], businessCalendarEnabled: true },
+            });
+            expect(onToggle).not.toHaveBeenCalled();
+        });
+    });
+});