@servicetitan/dte-unlayer 0.157.0 → 0.159.0

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 };
+}

package/src/display-conditions/ConditionRow.tsx

@@ -1,4 +1,4 @@
-import { Button, Chip, Combobox, Flex } from '@servicetitan/anvil2';
+import { Button, Chip, Flex, SelectFieldSync } from '@servicetitan/anvil2';
 import TrashIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
 import { useEffect, useMemo, useState } from 'react';
 import { FormInfo, parseFormFieldKey } from '../shared/forms';
@@ -48,7 +48,7 @@ export function ConditionRow({
 
     const sourceOptions = useMemo<SourceOption[]>(
         () => [
-            { label: 'Data point', value: 'schema' },
+            { label: 'Merge tags', value: 'schema' },
             ...forms.map(form => ({
                 formId: form.id,
                 label: form.name,
@@ -129,194 +129,121 @@ export function ConditionRow({
             return;
         }
         setSelectedSourceValue(item.value);
+        // As in BYOD, a new source starts the condition over instead of picking a data point for it.
+        onChange({ ...condition, dataPointKey: '', operator: 'is_equal_to', value: '' });
 
-        if (!item.formId) {
-            const schemaField =
-                dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null;
-            const nextFieldType = schemaField?.fieldType ?? 'string';
-            const nextIsNumber = nextFieldType === 'number';
-            const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
-            const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
-
-            onChange({
-                ...condition,
-                dataPointKey: schemaField?.fullKey ?? '',
-                operator: operatorReset
-                    ? nextIsNumber
-                        ? 'num_eq'
-                        : 'is_equal_to'
-                    : condition.operator,
-            });
-            return;
+        if (item.formId) {
+            onFormSelect(item.formId);
         }
-
-        onFormSelect(item.formId);
-        const nextFormFieldOptions = formFieldOptions.filter(
-            option => option.formId === item.formId,
-        );
-        const currentSelected = nextFormFieldOptions.find(
-            opt => opt.fullKey === condition.dataPointKey,
-        );
-        const nextSelected = currentSelected ?? nextFormFieldOptions[0] ?? null;
-        const nextFieldType = nextSelected?.fieldType ?? 'string';
-        const nextIsNumber = nextFieldType === 'number';
-        const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
-        const operatorReset = !nextOperatorItems.some(op => op.value === condition.operator);
-
-        onChange({
-            ...condition,
-            dataPointKey: nextSelected?.fullKey ?? '',
-            operator: operatorReset
-                ? nextIsNumber
-                    ? 'num_eq'
-                    : 'is_equal_to'
-                : condition.operator,
-        });
     };
 
+    // Same controls and layout as BYOD's condition row (`dte-pdf-editor`'s `ConditionRow`).
+    const sourceSelectOptions = sourceOptions.map(option => ({
+        id: option.value,
+        label: option.label,
+    }));
+    const dataPointSelectOptions = activeDataPointOptions.map(option => ({
+        id: option.fullKey,
+        label: option.title,
+    }));
+    const operatorSelectOptions = operatorItems.map(option => ({
+        id: option.value,
+        label: option.label,
+    }));
+
     return (
-        <Flex direction="column" gap="3" style={{ width: '100%' }}>
-            <div style={{ width: '100%' }}>
-                <Combobox.Select
+        <Flex direction="column" gap="4" flex={1}>
+            <Flex flex={1} gap="2">
+                <SelectFieldSync
                     flex={1}
-                    style={{ width: '100%' }}
-                    disableClearSelection
-                    itemToKey={(item: SourceOption | null) => item?.value ?? ''}
-                    itemToString={(item: SourceOption | null) => item?.label ?? ''}
-                    items={sourceOptions}
-                    selectedItem={selectedSource}
-                    onChange={handleSourceChange}
-                >
-                    <Combobox.SelectTrigger
-                        label="Data Type"
-                        placeholder="Select source..."
-                        size="small"
+                    disableSearch
+                    disableClearButton
+                    label="Source"
+                    placeholder="Select source..."
+                    options={sourceSelectOptions}
+                    value={
+                        selectedSource
+                            ? { id: selectedSource.value, label: selectedSource.label }
+                            : null
+                    }
+                    onSelectedOptionChange={(option: { id: string; label: string } | null) =>
+                        handleSourceChange(sourceOptions.find(o => o.value === option?.id) ?? null)
+                    }
+                />
+            </Flex>
+            <Flex
+                direction="row"
+                alignItems="flex-end"
+                gap="2"
+                flex={1}
+                style={{ flexWrap: 'wrap' }}
+            >
+                <Flex alignItems="flex-end" style={{ padding: '8px 12px' }}>
+                    <Chip label="IF" size="medium" />
+                </Flex>
+                <Flex flex={1} style={{ minWidth: 160 }}>
+                    <SelectFieldSync
+                        flex={1}
+                        disableSearch
+                        disableClearButton
+                        label="Data point"
+                        placeholder={
+                            currentFormId ? 'Select form field...' : 'Select data point...'
+                        }
+                        options={dataPointSelectOptions}
+                        value={
+                            selectedDataPoint
+                                ? { id: selectedDataPoint.fullKey, label: selectedDataPoint.title }
+                                : null
+                        }
+                        onSelectedOptionChange={(option: { id: string; label: string } | null) =>
+                            handleDataPointChange(
+                                activeDataPointOptions.find(o => o.fullKey === option?.id) ?? null,
+                            )
+                        }
+                    />
+                </Flex>
+                <Flex flex={1} style={{ minWidth: 160 }}>
+                    <SelectFieldSync
+                        flex={1}
+                        disableSearch
+                        disableClearButton
+                        label="Condition"
+                        placeholder="Select..."
+                        options={operatorSelectOptions}
+                        value={
+                            selectedOperator
+                                ? { id: selectedOperator.value, label: selectedOperator.label }
+                                : null
+                        }
+                        onSelectedOptionChange={(option: { id: string; label: string } | null) =>
+                            onChange({
+                                ...condition,
+                                operator: (option?.id ??
+                                    'is_equal_to') as SingleCondition['operator'],
+                            })
+                        }
                     />
-                    <Combobox.Content>
-                        {({ items }: { items: SourceOption[] }) => (
-                            <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>
-            </div>
-            <Flex direction="row" alignItems="flex-end" gap="2" style={{ width: '100%' }}>
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'flex-end',
-                        flexShrink: 0,
-                        padding: '4px 8px',
-                    }}
-                >
-                    <Chip label="IF" size="small" />
-                </div>
-                <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'],
-                                })
-                            }
-                        >
-                            <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>
+                {!isValueLess && (
+                    <Flex flex={1} style={{ minWidth: 160 }}>
+                        <LookupValueControl
+                            value={condition.value}
+                            fieldType={fieldType}
+                            lookupSource={selectedDataPoint?.lookupSource}
+                            onChange={value => onChange({ ...condition, value })}
+                        />
+                    </Flex>
+                )}
                 {canRemove && (
-                    <div
-                        style={{
-                            display: 'flex',
-                            alignItems: 'flex-end',
-                            flexShrink: 0,
-                            paddingBottom: 4,
-                        }}
-                    >
+                    <Flex alignItems="flex-end" style={{ padding: '6px 12px' }}>
                         <Button
                             appearance="secondary"
                             aria-label="Remove condition"
                             icon={{ before: TrashIcon }}
-                            size="small"
                             onClick={onRemove}
                         />
-                    </div>
+                    </Flex>
                 )}
             </Flex>
         </Flex>

package/src/display-conditions/LookupValueControl.tsx

@@ -149,15 +149,7 @@ export function LookupValueControl({
 
     if (status === 'loading') {
         return (
-            <TextField
-                label="Value"
-                size="small"
-                flex={1}
-                disabled
-                value=""
-                placeholder=""
-                aria-label="Value"
-            />
+            <TextField label="Value" flex={1} disabled value="" placeholder="" aria-label="Value" />
         );
     }
 
@@ -165,7 +157,6 @@ export function LookupValueControl({
         return (
             <SelectFieldSync
                 flex={1}
-                size="small"
                 label="Value"
                 placeholder="Search value..."
                 options={staticOptionsWithSelected}
@@ -179,7 +170,6 @@ export function LookupValueControl({
         return (
             <SelectField
                 flex={1}
-                size="small"
                 label="Value"
                 placeholder="Type to search..."
                 initialLoad="open"
@@ -202,7 +192,6 @@ export function LookupValueControl({
     return (
         <TextField
             label="Value"
-            size="small"
             flex={1}
             value={value}
             onChange={e => handleTextChange(e.target.value)}