@servicetitan/dte-unlayer 0.153.0 → 0.155.0

package/src/display-conditions/DisplayConditionModal.tsx

@@ -1,13 +1,6 @@
 import { Button, Combobox, Dialog, Flex, Text, ThemeProvider } from '@servicetitan/anvil2';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import {
-    buildFormFieldKey,
-    FormFieldInfo,
-    FormInfo,
-    getConditionalFieldTypeFromFormItemType,
-    parseFormFieldKey,
-} from '../shared/forms';
 import { ConditionGroupsSection, MatchType } from './ConditionGroupsSection';
 import { defaultState, MODAL_CONTENT_MAX_HEIGHT } from './constants';
 import { DisplayConditionRequest, onDisplayCondition } from './displayConditionController';
@@ -17,9 +10,13 @@ import {
     ConditionGroup as ConditionGroupType,
     DisplayBehavior,
     DisplayConditionState,
-    FormFieldOption,
     LogicalOperator,
 } from './types';
+import {
+    ConditionalsOpenHandler,
+    ConditionFormSelectHandler,
+    useConditionForms,
+} from './useConditionForms';
 
 const BEHAVIOR_OPTIONS = [
     { label: 'Show', value: 'show' },
@@ -65,15 +62,8 @@ export interface DisplayConditionModalProps {
      * content is wrapped in `ThemeProvider` so Anvil2 styles still apply after portaling.
      */
     portalContainer?: Element | DocumentFragment | null;
-    onConditionFormSelect?: (
-        formId: number,
-        sendFormFields: (formId: number, fields: FormFieldInfo[]) => void,
-    ) => void;
-    onConditionalsOpen?: (
-        usedFormIds: number[],
-        sendFormList: (forms: FormInfo[]) => void,
-        sendFormFields: (formId: number, fields: FormFieldInfo[]) => void,
-    ) => void;
+    onConditionFormSelect?: ConditionFormSelectHandler;
+    onConditionalsOpen?: ConditionalsOpenHandler;
     schema?: import('../shared/schema').SchemaObject;
 }
 
@@ -88,72 +78,14 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
     const [isOpen, setIsOpen] = useState(false);
     const [state, setState] = useState(defaultState);
     const [matchType, setMatchType] = useState<MatchType>('all');
-    const [forms, setForms] = useState<FormInfo[]>([]);
-    const [formFieldsByFormId, setFormFieldsByFormId] = useState<Record<number, FormFieldInfo[]>>(
-        {},
-    );
-    const [loadingFormIds, setLoadingFormIds] = useState<number[]>([]);
-    const [isFormsListLoading, setIsFormsListLoading] = useState(false);
-    const formFieldsByFormIdRef = useRef<Record<number, FormFieldInfo[]>>({});
-    const loadingFormIdsRef = useRef<number[]>([]);
+    const { formFieldOptions, forms, isFieldDataLoading, loadForms, requestFormFields } =
+        useConditionForms({ onConditionFormSelect, onConditionalsOpen });
 
     const dataPointOptions = useMemo(() => getSchemaDataPointOptions(schema), [schema]);
-    const formFieldOptions = useMemo<FormFieldOption[]>(() => {
-        const nextOptions: FormFieldOption[] = [];
-        for (const form of forms) {
-            const fields = formFieldsByFormId[form.id];
-            if (!fields) {
-                continue;
-            }
-            for (const field of fields) {
-                const fieldType = getConditionalFieldTypeFromFormItemType(field.itemType);
-                if (!fieldType) {
-                    continue;
-                }
-                nextOptions.push({
-                    fieldType,
-                    formId: form.id,
-                    fullKey: buildFormFieldKey(form.id, field.id),
-                    title: field.header,
-                });
-            }
-        }
-        return nextOptions.sort((left, right) => left.title.localeCompare(right.title));
-    }, [forms, formFieldsByFormId]);
     const allFieldOptions = useMemo(
         () => [...dataPointOptions, ...formFieldOptions],
         [dataPointOptions, formFieldOptions],
     );
-    const isFieldDataLoading = isFormsListLoading || loadingFormIds.length > 0;
-
-    useEffect(() => {
-        formFieldsByFormIdRef.current = formFieldsByFormId;
-    }, [formFieldsByFormId]);
-
-    useEffect(() => {
-        loadingFormIdsRef.current = loadingFormIds;
-    }, [loadingFormIds]);
-
-    const requestFormFields = useCallback(
-        (formId: number) => {
-            if (!onConditionFormSelect) {
-                return;
-            }
-            if (
-                formFieldsByFormIdRef.current[formId] ||
-                loadingFormIdsRef.current.includes(formId)
-            ) {
-                return;
-            }
-
-            setLoadingFormIds(prev => (prev.includes(formId) ? prev : [...prev, formId]));
-            onConditionFormSelect(formId, (selectedFormId, fields) => {
-                setFormFieldsByFormId(prev => ({ ...prev, [selectedFormId]: fields }));
-                setLoadingFormIds(prev => prev.filter(id => id !== selectedFormId));
-            });
-        },
-        [onConditionFormSelect],
-    );
 
     useEffect(() => {
         return onDisplayCondition(nextRequest => {
@@ -161,49 +93,13 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
             const existing = nextRequest.data;
             const parsed = parseUnlayerDisplayCondition(existing);
             const initialState = parsed ?? defaultState();
-            const usedFormIds = Array.from(
-                new Set(
-                    initialState.groups
-                        .flatMap(group => group.conditions)
-                        .map(condition => parseFormFieldKey(condition.dataPointKey)?.formId)
-                        .filter((formId): formId is number => formId != null),
-                ),
-            );
-
-            setForms([]);
-            setFormFieldsByFormId({});
-            setIsFormsListLoading(!!onConditionalsOpen);
-            setLoadingFormIds([]);
-
-            if (onConditionalsOpen) {
-                onConditionalsOpen(
-                    usedFormIds,
-                    nextForms => {
-                        setForms(nextForms);
-                        setIsFormsListLoading(false);
-                    },
-                    (formId, fields) => {
-                        setFormFieldsByFormId(prev => ({ ...prev, [formId]: fields }));
-                        setLoadingFormIds(prev => prev.filter(id => id !== formId));
-                    },
-                );
-
-                /*
-                 * Keep display-condition flow aligned with calculated-field flow:
-                 * when modal opens, request fields for already-used forms so labels
-                 * are available in edit mode.
-                 */
-                usedFormIds.forEach(formId => requestFormFields(formId));
-            } else {
-                setIsFormsListLoading(false);
-                setLoadingFormIds([]);
-            }
 
+            loadForms(initialState.groups);
             setState(initialState);
             setMatchType(deriveMatchType(initialState));
             setIsOpen(true);
         });
-    }, [onConditionalsOpen, requestFormFields]);
+    }, [loadForms]);
 
     const handleClose = useCallback(() => {
         setRequest(null);

package/src/display-conditions/useConditionForms.ts

@@ -0,0 +1,146 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    buildFormFieldKey,
+    FormFieldInfo,
+    FormInfo,
+    getConditionalFieldTypeFromFormItemType,
+    parseFormFieldKey,
+} from '../shared/forms';
+import { ConditionGroup, FormFieldOption } from './types';
+
+type SendFormFields = (formId: number, fields: FormFieldInfo[]) => void;
+
+export type ConditionFormSelectHandler = (formId: number, sendFormFields: SendFormFields) => void;
+
+export type ConditionalsOpenHandler = (
+    usedFormIds: number[],
+    sendFormList: (forms: FormInfo[]) => void,
+    sendFormFields: SendFormFields,
+) => void;
+
+export interface UseConditionFormsOptions {
+    onConditionFormSelect?: ConditionFormSelectHandler;
+    onConditionalsOpen?: ConditionalsOpenHandler;
+}
+
+/**
+ * Loads the host's forms and form fields for a condition-editing modal, so form fields can be
+ * picked as condition data points alongside schema fields.
+ */
+export const useConditionForms = ({
+    onConditionFormSelect,
+    onConditionalsOpen,
+}: UseConditionFormsOptions) => {
+    const [forms, setForms] = useState<FormInfo[]>([]);
+    const [formFieldsByFormId, setFormFieldsByFormId] = useState<Record<number, FormFieldInfo[]>>(
+        {},
+    );
+    const [loadingFormIds, setLoadingFormIds] = useState<number[]>([]);
+    const [isFormsListLoading, setIsFormsListLoading] = useState(false);
+    const formFieldsByFormIdRef = useRef<Record<number, FormFieldInfo[]>>({});
+    const loadingFormIdsRef = useRef<number[]>([]);
+
+    const formFieldOptions = useMemo<FormFieldOption[]>(() => {
+        const nextOptions: FormFieldOption[] = [];
+        for (const form of forms) {
+            const fields = formFieldsByFormId[form.id];
+            if (!fields) {
+                continue;
+            }
+            for (const field of fields) {
+                const fieldType = getConditionalFieldTypeFromFormItemType(field.itemType);
+                if (!fieldType) {
+                    continue;
+                }
+                nextOptions.push({
+                    fieldType,
+                    formId: form.id,
+                    fullKey: buildFormFieldKey(form.id, field.id),
+                    title: field.header,
+                });
+            }
+        }
+        return nextOptions.sort((left, right) => left.title.localeCompare(right.title));
+    }, [forms, formFieldsByFormId]);
+
+    useEffect(() => {
+        formFieldsByFormIdRef.current = formFieldsByFormId;
+    }, [formFieldsByFormId]);
+
+    useEffect(() => {
+        loadingFormIdsRef.current = loadingFormIds;
+    }, [loadingFormIds]);
+
+    const requestFormFields = useCallback(
+        (formId: number) => {
+            if (!onConditionFormSelect) {
+                return;
+            }
+            if (
+                formFieldsByFormIdRef.current[formId] ||
+                loadingFormIdsRef.current.includes(formId)
+            ) {
+                return;
+            }
+
+            setLoadingFormIds(prev => (prev.includes(formId) ? prev : [...prev, formId]));
+            onConditionFormSelect(formId, (selectedFormId, fields) => {
+                setFormFieldsByFormId(prev => ({ ...prev, [selectedFormId]: fields }));
+                setLoadingFormIds(prev => prev.filter(id => id !== selectedFormId));
+            });
+        },
+        [onConditionFormSelect],
+    );
+
+    /** Resets form data and requests the forms list plus fields of forms the groups already use. */
+    const loadForms = useCallback(
+        (groups: ConditionGroup[]) => {
+            const usedFormIds = Array.from(
+                new Set(
+                    groups
+                        .flatMap(group => group.conditions)
+                        .map(condition => parseFormFieldKey(condition.dataPointKey)?.formId)
+                        .filter((formId): formId is number => formId != null),
+                ),
+            );
+
+            /*
+             * Reset synchronously so `requestFormFields` below does not skip forms loaded by a
+             * previous open whose state is being cleared.
+             */
+            formFieldsByFormIdRef.current = {};
+            loadingFormIdsRef.current = [];
+            setForms([]);
+            setFormFieldsByFormId({});
+            setIsFormsListLoading(!!onConditionalsOpen);
+            setLoadingFormIds([]);
+
+            if (!onConditionalsOpen) {
+                return;
+            }
+
+            onConditionalsOpen(
+                usedFormIds,
+                nextForms => {
+                    setForms(nextForms);
+                    setIsFormsListLoading(false);
+                },
+                (formId, fields) => {
+                    setFormFieldsByFormId(prev => ({ ...prev, [formId]: fields }));
+                    setLoadingFormIds(prev => prev.filter(id => id !== formId));
+                },
+            );
+
+            usedFormIds.forEach(formId => requestFormFields(formId));
+        },
+        [onConditionalsOpen, requestFormFields],
+    );
+
+    return {
+        formFieldOptions,
+        forms,
+        isFieldDataLoading: isFormsListLoading || loadingFormIds.length > 0,
+        loadForms,
+        requestFormFields,
+    };
+};

package/src/e-sign-offset/ESignDateSignedOffsetModal.tsx

@@ -0,0 +1,197 @@
+import { Button, Card, Dialog, Flex, Text, ThemeProvider } from '@servicetitan/anvil2';
+import PlusCircleIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MODAL_CONTENT_MAX_HEIGHT } from '../display-conditions/constants';
+import { getSchemaDataPointOptions } from '../display-conditions/schemaDataPoints';
+import {
+    ConditionalsOpenHandler,
+    ConditionFormSelectHandler,
+    useConditionForms,
+} from '../display-conditions/useConditionForms';
+import type { ESignDateSignedOffsetRule } from '../shared/const';
+import {
+    addESignOffsetRule,
+    buildESignOffsetSettings,
+    canAddESignOffsetRule,
+    createESignOffsetRule,
+    getESignOffsetRuleCondition,
+    isCompleteESignOffsetCondition,
+    normalizeESignOffsetSettings,
+    removeESignOffsetRule,
+    splitESignOffsetSettings,
+    updateESignOffsetRule,
+} from '../shared/e-sign-offset';
+import type { SchemaObject } from '../shared/schema';
+import { ESignOffsetRequest, onESignOffsetRequest } from './eSignOffsetController';
+import { ESignOffsetDaysField, ESignOffsetRuleRow } from './ESignOffsetRuleRow';
+
+export interface ESignDateSignedOffsetModalProps {
+    /** Same contract as `DisplayConditionModalProps.portalContainer`. */
+    portalContainer?: Element | DocumentFragment | null;
+    onConditionFormSelect?: ConditionFormSelectHandler;
+    onConditionalsOpen?: ConditionalsOpenHandler;
+    schema?: SchemaObject;
+}
+
+export function ESignDateSignedOffsetModal({
+    onConditionFormSelect,
+    onConditionalsOpen,
+    portalContainer,
+    schema,
+}: Readonly<ESignDateSignedOffsetModalProps>) {
+    const [request, setRequest] = useState<ESignOffsetRequest | null>(null);
+    const [rules, setRules] = useState<ESignDateSignedOffsetRule[]>([]);
+    const [finalDays, setFinalDays] = useState(0);
+    const { formFieldOptions, forms, isFieldDataLoading, loadForms, requestFormFields } =
+        useConditionForms({ onConditionFormSelect, onConditionalsOpen });
+
+    const dataPointOptions = useMemo(() => getSchemaDataPointOptions(schema), [schema]);
+    const allFieldOptions = useMemo(
+        () => [...dataPointOptions, ...formFieldOptions],
+        [dataPointOptions, formFieldOptions],
+    );
+
+    useEffect(() => {
+        return onESignOffsetRequest(nextRequest => {
+            const { conditionedRules, finalDays: nextFinalDays } = splitESignOffsetSettings(
+                normalizeESignOffsetSettings(nextRequest.value),
+            );
+            const initialRules = conditionedRules.length
+                ? conditionedRules
+                : [createESignOffsetRule()];
+
+            loadForms(initialRules.flatMap(rule => rule.condition.groups));
+            setRules(initialRules);
+            setFinalDays(nextFinalDays);
+            setRequest(nextRequest);
+        });
+    }, [loadForms]);
+
+    const canSave = useMemo(() => {
+        if (isFieldDataLoading) {
+            return false;
+        }
+
+        return rules.every(rule => {
+            const condition = getESignOffsetRuleCondition(rule);
+            const fieldType =
+                allFieldOptions.find(option => option.fullKey === condition?.dataPointKey)
+                    ?.fieldType ?? 'string';
+
+            return isCompleteESignOffsetCondition(condition, fieldType);
+        });
+    }, [allFieldOptions, isFieldDataLoading, rules]);
+
+    const handleClose = useCallback(() => {
+        setRequest(null);
+    }, []);
+
+    const handleSave = useCallback(() => {
+        request?.done(buildESignOffsetSettings(rules, finalDays));
+        setRequest(null);
+    }, [finalDays, request, rules]);
+
+    const handleClearRules = useCallback(() => {
+        setRules([]);
+        setFinalDays(0);
+    }, []);
+
+    const handleAddRule = useCallback(() => {
+        setRules(prev => addESignOffsetRule(prev));
+    }, []);
+
+    const handleUpdateRule = useCallback((index: number, rule: ESignDateSignedOffsetRule) => {
+        setRules(prev => updateESignOffsetRule(prev, index, rule));
+    }, []);
+
+    const handleRemoveRule = useCallback((index: number) => {
+        setRules(prev => removeESignOffsetRule(prev, index));
+    }, []);
+
+    if (!request) {
+        return null;
+    }
+
+    const dialog = (
+        <Dialog open onClose={handleClose} size="xlarge">
+            <Dialog.Header>Date Signed Offset Rules</Dialog.Header>
+            <Dialog.Content>
+                <Flex
+                    direction="column"
+                    gap="4"
+                    style={{
+                        maxHeight: MODAL_CONTENT_MAX_HEIGHT,
+                        overflowY: 'auto',
+                        paddingRight: 8,
+                        width: '100%',
+                    }}
+                >
+                    {rules.length === 0 && (
+                        <Flex justifyContent="center" alignItems="center">
+                            <Text variant="body" size="xlarge" subdued>
+                                Rule not configured yet.
+                            </Text>
+                        </Flex>
+                    )}
+                    {rules.map((rule, index) => (
+                        <ESignOffsetRuleRow
+                            key={rule.condition.groups[0]?.id ?? index}
+                            dataPointOptions={dataPointOptions}
+                            formFieldOptions={formFieldOptions}
+                            forms={forms}
+                            onChange={nextRule => handleUpdateRule(index, nextRule)}
+                            onFormSelect={requestFormFields}
+                            onRemove={() => handleRemoveRule(index)}
+                            rule={rule}
+                        />
+                    ))}
+                    <Flex>
+                        <Button
+                            size="small"
+                            appearance="ghost"
+                            icon={{ before: PlusCircleIcon }}
+                            onClick={handleAddRule}
+                            disabled={!canAddESignOffsetRule(rules)}
+                        >
+                            {rules.length === 0 ? 'Add Condition' : 'Add Else Condition'}
+                        </Button>
+                    </Flex>
+                    <Card background="strong" padding="small">
+                        <ESignOffsetDaysField
+                            chipLabel={rules.length === 0 ? 'THEN' : 'ELSE'}
+                            days={finalDays}
+                            onChange={setFinalDays}
+                        />
+                    </Card>
+                </Flex>
+            </Dialog.Content>
+            <Dialog.Footer sticky>
+                <Flex
+                    justifyContent="flex-end"
+                    alignItems="center"
+                    gap="3"
+                    style={{ width: '100%' }}
+                >
+                    {rules.length > 0 && (
+                        <Button appearance="ghost" onClick={handleClearRules}>
+                            Clear Rules
+                        </Button>
+                    )}
+                    <Button appearance="secondary" onClick={handleClose}>
+                        Cancel
+                    </Button>
+                    <Button appearance="primary" disabled={!canSave} onClick={handleSave}>
+                        Save Changes
+                    </Button>
+                </Flex>
+            </Dialog.Footer>
+        </Dialog>
+    );
+
+    if (portalContainer) {
+        return createPortal(<ThemeProvider>{dialog}</ThemeProvider>, portalContainer);
+    }
+
+    return dialog;
+}

package/src/e-sign-offset/ESignOffsetRuleRow.tsx

@@ -0,0 +1,101 @@
+import { Card, Chip, Flex, NumberField } from '@servicetitan/anvil2';
+import { ConditionRow } from '../display-conditions/ConditionRow';
+import { defaultCondition, defaultGroup } from '../display-conditions/constants';
+import type {
+    DataPointOption,
+    FormFieldOption,
+    SingleCondition,
+} from '../display-conditions/types';
+import { type ESignDateSignedOffsetRule, MAX_E_SIGN_OFFSET_DAYS } from '../shared/const';
+import { clampESignOffsetDays } from '../shared/e-sign-offset';
+import { FormInfo } from '../shared/forms';
+
+export interface ESignOffsetDaysFieldProps {
+    chipLabel: string;
+    days: number;
+    onChange: (days: number) => void;
+}
+
+export function ESignOffsetDaysField({
+    chipLabel,
+    days,
+    onChange,
+}: Readonly<ESignOffsetDaysFieldProps>) {
+    return (
+        <Flex>
+            <Flex alignItems="center" style={{ padding: '8px 12px' }}>
+                <Chip label={chipLabel} size="medium" />
+            </Flex>
+            <NumberField
+                label="Number of days"
+                size="small"
+                value={days}
+                minValue={0}
+                maxValue={MAX_E_SIGN_OFFSET_DAYS}
+                maximumFractionDigits={0}
+                suffix="days"
+                hint={`days range up to ${MAX_E_SIGN_OFFSET_DAYS}`}
+                onChange={value => onChange(clampESignOffsetDays(value))}
+            />
+        </Flex>
+    );
+}
+
+export interface ESignOffsetRuleRowProps {
+    dataPointOptions: DataPointOption[];
+    formFieldOptions: FormFieldOption[];
+    forms: FormInfo[];
+    onChange: (rule: ESignDateSignedOffsetRule) => void;
+    onFormSelect: (formId: number) => void;
+    onRemove: () => void;
+    rule: ESignDateSignedOffsetRule;
+}
+
+export function ESignOffsetRuleRow({
+    dataPointOptions,
+    formFieldOptions,
+    forms,
+    onChange,
+    onFormSelect,
+    onRemove,
+    rule,
+}: Readonly<ESignOffsetRuleRowProps>) {
+    const group = rule.condition.groups[0] ?? defaultGroup();
+    const condition = group.conditions[0] ?? defaultCondition();
+
+    const handleConditionChange = (nextCondition: SingleCondition) => {
+        onChange({
+            ...rule,
+            condition: {
+                behavior: 'show',
+                groups: [{ conditions: [nextCondition], id: group.id }],
+            },
+        });
+    };
+
+    const handleDaysChange = (days: number) => {
+        onChange({ ...rule, days });
+    };
+
+    return (
+        <Card background="strong" padding="small">
+            <Flex direction="column" gap="3">
+                <ConditionRow
+                    canRemove
+                    condition={condition}
+                    dataPointOptions={dataPointOptions}
+                    formFieldOptions={formFieldOptions}
+                    forms={forms}
+                    onChange={handleConditionChange}
+                    onFormSelect={onFormSelect}
+                    onRemove={onRemove}
+                />
+                <ESignOffsetDaysField
+                    chipLabel="THEN"
+                    days={rule.days}
+                    onChange={handleDaysChange}
+                />
+            </Flex>
+        </Card>
+    );
+}

package/src/e-sign-offset/eSignOffsetController.ts

@@ -0,0 +1,39 @@
+import type { ESignDateSignedOffsetSettings } from '../shared/const';
+
+export interface ESignOffsetRequest {
+    value: ESignDateSignedOffsetSettings;
+    done: (value: ESignDateSignedOffsetSettings) => void;
+}
+
+type Listener = (request: ESignOffsetRequest) => void;
+
+const E_SIGN_OFFSET_EVENT = 'dte:e-sign-offset';
+const eSignOffsetEvents = new EventTarget();
+let activeListeners = 0;
+
+export const onESignOffsetRequest = (listener: Listener) => {
+    const handler = (event: Event) => {
+        if (event instanceof CustomEvent && event.detail) {
+            listener(event.detail);
+        }
+    };
+
+    activeListeners += 1;
+    eSignOffsetEvents.addEventListener(E_SIGN_OFFSET_EVENT, handler);
+
+    return () => {
+        activeListeners = Math.max(0, activeListeners - 1);
+        eSignOffsetEvents.removeEventListener(E_SIGN_OFFSET_EVENT, handler);
+    };
+};
+
+export const emitESignOffsetRequest = (request: ESignOffsetRequest) => {
+    if (activeListeners === 0) {
+        request.done(request.value);
+        return;
+    }
+
+    eSignOffsetEvents.dispatchEvent(
+        new CustomEvent<ESignOffsetRequest>(E_SIGN_OFFSET_EVENT, { detail: request }),
+    );
+};