@servicetitan/dte-pdf-editor 1.87.0 → 1.89.0

package/src/components/display-conditions/display-condition-modal.tsx

@@ -9,48 +9,15 @@ import type {
     SchemaObject,
 } from '../../interface/types';
 import {
-    getDisplayConditionFieldTypeForKey,
+    applyConditionMatchType,
+    type ConditionMatchType,
+    deriveConditionMatchType,
     getDocumentFieldsDataPointOptions,
     getSchemaDataPointOptions,
-    isValidNumber,
+    isValidConditionGroups,
 } from '../../utils';
 import { ConditionGroupsSection } from './condition-groups-section';
 
-type ConditionMatchType = 'and' | 'or';
-
-const deriveConditionMatchType = (conditionState: DisplayConditionState): ConditionMatchType => {
-    for (let g = 0; g < conditionState.groups.length; g++) {
-        const group = conditionState.groups[g];
-        if (g > 0 && group.logicalOperator === 'or') {
-            return 'or';
-        }
-        for (let i = 1; i < group.conditions.length; i++) {
-            if (group.conditions[i]?.logicalOperator === 'or') {
-                return 'or';
-            }
-        }
-    }
-    return 'and';
-};
-
-const applyConditionMatchType = (
-    conditionState: DisplayConditionState,
-    matchType: ConditionMatchType,
-): DisplayConditionState => {
-    return {
-        ...conditionState,
-        groups: conditionState.groups.map((group, groupIndex) => ({
-            ...group,
-            ...(groupIndex > 0 ? { logicalOperator: matchType } : {}),
-            conditions: group.conditions.map((c, i) =>
-                i === 0
-                    ? { ...c, logicalOperator: undefined }
-                    : { ...c, logicalOperator: matchType },
-            ),
-        })),
-    };
-};
-
 const BEHAVIOR_OPTIONS = [
     { label: 'Show', value: 'show' },
     { label: 'Hide', value: 'hide' },
@@ -159,32 +126,15 @@ export function DisplayConditionModal({
         setState(prev => applyConditionMatchType(prev, value));
     }, []);
 
-    const canSave = useMemo(() => {
-        for (const group of state.groups) {
-            for (const condition of group.conditions) {
-                if (!condition.dataPointKey) {
-                    return false;
-                }
-                if (condition.operator === 'is_empty' || condition.operator === 'is_not_empty') {
-                    continue;
-                }
-                const trimmedValue = condition.value.trim();
-                if (!trimmedValue) {
-                    return false;
-                }
-                const fieldType = getDisplayConditionFieldTypeForKey(
-                    condition.dataPointKey,
-                    mergeTagOptions,
-                    fillableOptions,
-                    formFieldsByFormId ?? {},
-                );
-                if (fieldType === 'number' && !isValidNumber(trimmedValue)) {
-                    return false;
-                }
-            }
-        }
-        return state.groups.length > 0;
-    }, [fillableOptions, formFieldsByFormId, mergeTagOptions, state.groups]);
+    const canSave = useMemo(
+        () =>
+            isValidConditionGroups(state.groups, {
+                fillableOptions,
+                formFieldsByFormId,
+                mergeTagOptions,
+            }),
+        [fillableOptions, formFieldsByFormId, mergeTagOptions, state.groups],
+    );
 
     return (
         <Dialog open onClose={handleClose} size="xlarge">

package/src/components/field-config-panel/e-sign-date-rules-summary.tsx

@@ -0,0 +1,127 @@
+import { Button, Flex, 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 { FC, useMemo } from 'react';
+import {
+    CHECKBOX_OPERATORS,
+    type ConditionOperator,
+    type DisplayConditionSingle,
+    type ESignDateSignedOffsetSettingsRule,
+    NUMBER_OPERATORS,
+    type PdfField,
+    RADIO_OPERATORS,
+    type SchemaObject,
+    STRING_OPERATORS,
+    VALUE_LESS_OPERATORS,
+} from '../../interface/types';
+import { getDataPointOptions } from '../../utils';
+
+const ALL_OPERATORS = [
+    ...NUMBER_OPERATORS,
+    ...STRING_OPERATORS,
+    ...RADIO_OPERATORS,
+    ...CHECKBOX_OPERATORS,
+];
+
+const getOperatorSymbol = (operator: string): string =>
+    ALL_OPERATORS.find(op => op.value === operator)?.label.split(' (')[0] ?? operator;
+
+export interface ESignDateRulesSummaryProps {
+    elseDays: number;
+    rulesWithConditions: ESignDateSignedOffsetSettingsRule[];
+    schema?: SchemaObject;
+    documentFields?: PdfField[];
+    onClear: () => void;
+    onEdit: () => void;
+}
+
+export const ESignDateRulesSummary: FC<ESignDateRulesSummaryProps> = ({
+    documentFields,
+    elseDays,
+    onClear,
+    onEdit,
+    rulesWithConditions,
+    schema,
+}) => {
+    const dataPointOptions = useMemo(
+        () => getDataPointOptions(schema, documentFields),
+        [schema, documentFields],
+    );
+
+    const getConditionText = (condition: DisplayConditionSingle) => {
+        const dataPoint = dataPointOptions.find(
+            option => option.fullKey === condition.dataPointKey,
+        );
+        const label = dataPoint?.title ?? condition.dataPointKey;
+        const symbol = getOperatorSymbol(condition.operator).replace('==', '=');
+        const isValueLess =
+            dataPoint?.isCheckbox === true ||
+            VALUE_LESS_OPERATORS.includes(condition.operator as ConditionOperator);
+        const value = condition.valueLabel ?? condition.value;
+
+        return `${label} ${symbol}${isValueLess ? '' : ` ${value}`}`;
+    };
+
+    return (
+        <Flex direction="column" gap="1">
+            <Flex justifyContent="space-between" alignItems="center">
+                <Text variant="body" size="medium" style={{ fontWeight: 500 }}>
+                    Calculated date rules
+                </Text>
+                <Flex gap="2">
+                    <Button
+                        appearance="ghost"
+                        size="small"
+                        icon={{ before: EditIcon }}
+                        onClick={onEdit}
+                    >
+                        Edit
+                    </Button>
+                    <Button
+                        appearance="ghost"
+                        size="small"
+                        icon={{ before: DeleteIcon }}
+                        onClick={onClear}
+                    >
+                        Clear
+                    </Button>
+                </Flex>
+            </Flex>
+            <Flex direction="column" gap="2" className="dte-rule-card --active">
+                {rulesWithConditions.map((rule, index) => {
+                    const condition = rule.condition.groups[0]?.conditions[0];
+                    return (
+                        <Flex key={rule.condition.groups[0]?.id ?? index} direction="column">
+                            <Text variant="body">{rule.days} After Signing When:</Text>
+                            {condition && (
+                                <Text
+                                    variant="body"
+                                    size="small"
+                                    style={{
+                                        color: '#422799',
+                                    }}
+                                >
+                                    {getConditionText(condition)}
+                                </Text>
+                            )}
+                        </Flex>
+                    );
+                })}
+                <Flex direction="column">
+                    <Text variant="body" size="medium">
+                        {elseDays} After Signing When:
+                    </Text>
+                    <Text
+                        variant="body"
+                        size="small"
+                        style={{
+                            color: '#422799',
+                        }}
+                    >
+                        ELSE
+                    </Text>
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+};

package/src/components/field-config-panel/e-sign-date-signed-offset-modal.tsx

@@ -0,0 +1,229 @@
+/**
+ * Why not `DisplayConditionModal`:
+ *
+ * `DisplayConditionModal` manages exactly one `DisplayConditionState` (a show/hide behavior
+ * toggle plus a list of condition groups) for a single field. `ESignDateSignedOffsetSettings` is
+ * a different shape entirely: a *list* of independent `{ days, condition }` rules, with no
+ * show/hide concept at all (`ESignDateSignedOffsetSettingsRule.condition` is "only show" by
+ * contract). The trailing, condition-less "else" row required by that settings type is owned by
+ * `ESignOptionsModal` (its own always-visible "Day offset" field) — this modal only ever manages
+ * the conditioned rules that precede it.
+ *
+ * Instead, this modal follows the same Dialog/Header/Content/Footer structure and reuses the same
+ * building blocks `DisplayConditionModal` is built from: `ConditionGroup`/`ConditionRow` for the
+ * condition-editing UI, `getSchemaDataPointOptions`/`getDocumentFieldsDataPointOptions` for
+ * data-point resolution, and `isValidConditionGroups` extracted from `DisplayConditionModal`.
+ * Nothing ESign-specific was added to any of those shared pieces.
+ */
+import { Button, Chip, Dialog, Flex, NumberField, Text } from '@servicetitan/anvil2';
+import PlusCircleIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { MODAL_CONTENT_MAX_HEIGHT } from '../../constants';
+import type {
+    ESignDateSignedOffsetSettingsFinalRule,
+    ESignDateSignedOffsetSettingsRule,
+    FormFieldsByFormIdI,
+    FormInfo,
+    PdfField,
+    SchemaObject,
+} from '../../interface/types';
+import {
+    addESignOffsetRule,
+    canAddESignOffsetRule,
+    createInitialESignOffsetRules,
+    getDocumentFieldsDataPointOptions,
+    getESignOffsetRulesForSave,
+    getSchemaDataPointOptions,
+    isValidConditionGroups,
+    removeESignOffsetRule,
+    updateESignOffsetRule,
+} from '../../utils';
+import { ESignOffsetRuleRow } from './e-sign-offset-rule-row';
+
+export interface ESignDateSignedOffsetModalProps {
+    onClose: () => void;
+    onSave: (
+        state: ESignDateSignedOffsetSettingsRule[],
+        finalRule: ESignDateSignedOffsetSettingsFinalRule,
+    ) => void;
+    initialState: ESignDateSignedOffsetSettingsRule[];
+    finalRule: ESignDateSignedOffsetSettingsFinalRule;
+    schema?: SchemaObject;
+    documentFields?: PdfField[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
+}
+
+export const ESignDateSignedOffsetModal: FC<ESignDateSignedOffsetModalProps> = ({
+    documentFields,
+    finalRule,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    initialState,
+    onClose,
+    onRequestFormFields,
+    onSave,
+    schema,
+}) => {
+    const [rules, setRules] = useState<ESignDateSignedOffsetSettingsRule[]>(
+        initialState.length === 0 ? createInitialESignOffsetRules() : initialState,
+    );
+    const [finalRuleDays, setFinalRuleDays] = useState<number>(finalRule.days);
+    const [hasClearedRules, setHasClearedRules] = useState(false);
+
+    const mergeTagOptions = useMemo(() => getSchemaDataPointOptions(schema), [schema]);
+
+    const fillableOptions = useMemo(
+        () => getDocumentFieldsDataPointOptions(documentFields),
+        [documentFields],
+    );
+
+    const conditionValidationDeps = useMemo(
+        () => ({
+            fillableOptions,
+            formFieldsByFormId,
+            mergeTagOptions,
+        }),
+        [fillableOptions, formFieldsByFormId, mergeTagOptions],
+    );
+
+    const hasConfiguredRules = useMemo(
+        () =>
+            rules.some(rule =>
+                isValidConditionGroups(rule.condition.groups, conditionValidationDeps),
+            ),
+        [conditionValidationDeps, rules],
+    );
+
+    const showClearRules = hasConfiguredRules || rules.length > 1;
+
+    const handleClose = useCallback(() => onClose(), [onClose]);
+
+    const handleSave = useCallback(() => {
+        const rulesToSave = getESignOffsetRulesForSave(rules, hasClearedRules, hasConfiguredRules);
+        onSave(rulesToSave, { days: finalRuleDays });
+        onClose();
+    }, [finalRuleDays, hasClearedRules, hasConfiguredRules, onClose, onSave, rules]);
+
+    const handleFinalRuleDaysChange = useCallback((days: number | null) => {
+        setFinalRuleDays(Math.max(Math.min(365, days ?? 0), 0));
+    }, []);
+
+    const handleAddRule = useCallback(() => {
+        setRules(prev => addESignOffsetRule(prev));
+    }, []);
+
+    const handleRemoveRule = useCallback((index: number) => {
+        setRules(prev => removeESignOffsetRule(prev, index));
+    }, []);
+
+    const handleClearRules = useCallback(() => {
+        setRules(createInitialESignOffsetRules());
+        setFinalRuleDays(0);
+        setHasClearedRules(true);
+    }, []);
+
+    const handleUpdateRule = useCallback(
+        (index: number, rule: ESignDateSignedOffsetSettingsRule) => {
+            setRules(prev => updateESignOffsetRule(prev, index, rule));
+        },
+        [],
+    );
+
+    const canSave = useMemo(() => {
+        if (hasClearedRules && !hasConfiguredRules) {
+            return true;
+        }
+
+        return rules.every(rule =>
+            isValidConditionGroups(rule.condition.groups, conditionValidationDeps),
+        );
+    }, [conditionValidationDeps, hasClearedRules, hasConfiguredRules, rules]);
+
+    return (
+        <Dialog open onClose={handleClose} size="xlarge">
+            <Dialog.Header>Date Signed Offset Rules</Dialog.Header>
+            <Dialog.Content>
+                <Flex
+                    direction="column"
+                    gap="4"
+                    flex={1}
+                    style={{
+                        maxHeight: MODAL_CONTENT_MAX_HEIGHT,
+                        overflowY: 'auto',
+                    }}
+                >
+                    {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}
+                            onDelete={() => handleRemoveRule(index)}
+                            fillableOptions={fillableOptions}
+                            formFieldsByFormId={formFieldsByFormId}
+                            formFieldsLoadingFormId={formFieldsLoadingFormId}
+                            forms={forms}
+                            mergeTagOptions={mergeTagOptions}
+                            onChange={next => handleUpdateRule(index, next)}
+                            onRequestFormFields={onRequestFormFields}
+                            rule={rule}
+                            canRemove
+                        />
+                    ))}
+                    <Button
+                        size="small"
+                        appearance="ghost"
+                        icon={{ before: PlusCircleIcon }}
+                        onClick={handleAddRule}
+                        disabled={!canAddESignOffsetRule(rules)}
+                    >
+                        Add Else Condition
+                    </Button>
+
+                    <Flex className="dte-rule-card">
+                        <Flex
+                            alignItems="center"
+                            style={{
+                                padding: '8px 12px',
+                            }}
+                        >
+                            <Chip label="THEN" size="medium" />
+                        </Flex>
+                        <Flex direction="column" gap="1">
+                            <NumberField
+                                size="small"
+                                label="Number of days"
+                                value={finalRuleDays}
+                                onChange={handleFinalRuleDaysChange}
+                                suffix="days"
+                            />
+                            <Text variant="body" size="small" subdued>
+                                days range up to 365
+                            </Text>
+                        </Flex>
+                    </Flex>
+                </Flex>
+            </Dialog.Content>
+            <Dialog.Footer sticky>
+                {showClearRules && (
+                    <Button appearance="ghost" onClick={handleClearRules}>
+                        Clear Rules
+                    </Button>
+                )}
+                <Dialog.CancelButton onClick={handleClose}>Cancel</Dialog.CancelButton>
+                <Button appearance="primary" disabled={!canSave} onClick={handleSave}>
+                    Save Changes
+                </Button>
+            </Dialog.Footer>
+        </Dialog>
+    );
+};

package/src/components/field-config-panel/e-sign-offset-rule-row.tsx

@@ -0,0 +1,91 @@
+import { Chip, Flex, NumberField, Text } from '@servicetitan/anvil2';
+import { FC } from 'react';
+import { defaultCondition, defaultGroup } from '../../constants';
+import type {
+    DataPointOption,
+    ESignDateSignedOffsetSettingsRule,
+    FormFieldsByFormIdI,
+    FormInfo,
+} from '../../interface/types';
+import { ConditionRow } from '../display-conditions/condition-row';
+
+export interface ESignOffsetRuleRowProps {
+    canRemove: boolean;
+    rule: ESignDateSignedOffsetSettingsRule;
+    onChange: (rule: ESignDateSignedOffsetSettingsRule) => void;
+    onDelete: () => void;
+    fillableOptions: DataPointOption[];
+    mergeTagOptions: DataPointOption[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
+}
+
+export const ESignOffsetRuleRow: FC<ESignOffsetRuleRowProps> = ({
+    canRemove,
+    fillableOptions,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    mergeTagOptions,
+    onChange,
+    onDelete,
+    onRequestFormFields,
+    rule,
+}) => {
+    const handleDaysChange = (days: number | null) => {
+        onChange({ ...rule, days: days ?? 0 });
+    };
+
+    const group = rule.condition.groups[0];
+    const condition = group?.conditions[0] ?? defaultCondition();
+
+    const handleConditionChange = (nextCondition: typeof condition) => {
+        onChange({
+            ...rule,
+            condition: {
+                ...rule.condition,
+                groups: [{ ...(group ?? defaultGroup()), conditions: [nextCondition] }],
+            },
+        });
+    };
+
+    return (
+        <Flex direction="column" gap="3" className="dte-rule-card">
+            <ConditionRow
+                canRemove={canRemove}
+                condition={condition}
+                fillableOptions={fillableOptions}
+                formFieldsByFormId={formFieldsByFormId}
+                formFieldsLoadingFormId={formFieldsLoadingFormId}
+                forms={forms}
+                mergeTagOptions={mergeTagOptions}
+                onChange={handleConditionChange}
+                onRemove={onDelete}
+                onRequestFormFields={onRequestFormFields}
+            />
+            <Flex>
+                <Flex
+                    alignItems="center"
+                    style={{
+                        padding: '8px 12px',
+                    }}
+                >
+                    <Chip label="THEN" size="medium" />
+                </Flex>
+                <Flex direction="column" gap="1">
+                    <NumberField
+                        label="Number of days"
+                        value={rule.days}
+                        onChange={handleDaysChange}
+                        suffix="days"
+                    />
+                    <Text variant="body" size="small" subdued>
+                        days range up to 365
+                    </Text>
+                </Flex>
+            </Flex>
+        </Flex>
+    );
+};

package/src/components/field-config-panel/e-sign-options-modal.tsx

@@ -0,0 +1,118 @@
+import { Button, Flex, NumberField } from '@servicetitan/anvil2';
+import AddIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+import { FC, Fragment, useState } from 'react';
+import {
+    ESignDateSignedOffsetSettings,
+    ESignDateSignedOffsetSettingsFinalRule,
+    ESignDateSignedOffsetSettingsRule,
+    FormFieldsByFormIdI,
+    FormInfo,
+    PdfField,
+    SchemaObject,
+} from '../../interface/types';
+import { createClearedESignOffsetSettings } from '../../utils';
+import { ESignDateRulesSummary } from './e-sign-date-rules-summary';
+import { ESignDateSignedOffsetModal } from './e-sign-date-signed-offset-modal';
+
+interface ESignOptionsModalProps {
+    initialState: ESignDateSignedOffsetSettings;
+    onSave: (state: ESignDateSignedOffsetSettings) => void;
+    schema?: SchemaObject;
+    documentFields?: PdfField[];
+    forms?: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    onRequestFormFields?: (formId: number) => void;
+    formFieldsLoadingFormId?: number | null;
+}
+
+export const ESignOptionsModal: FC<ESignOptionsModalProps> = ({
+    documentFields,
+    formFieldsByFormId,
+    formFieldsLoadingFormId,
+    forms,
+    initialState,
+    onRequestFormFields,
+    onSave,
+    schema,
+}) => {
+    const [open, setOpen] = useState(false);
+    /*
+     * `rules` is a tuple: zero or more conditioned rules followed by exactly one condition-less
+     * final rule (enforced by `ESignDateSignedOffsetSettings['rules']`). Slicing/indexing a
+     * variadic tuple widens to the member union, so the split needs one explicit, deliberate cast.
+     */
+    const ruleWithOutCondition = initialState.rules[
+        initialState.rules.length - 1
+    ] as ESignDateSignedOffsetSettingsFinalRule;
+    const rulesWithConditions = initialState.rules.slice(
+        0,
+        -1,
+    ) as ESignDateSignedOffsetSettingsRule[];
+
+    const handleDaysChange = (days: number | null) => {
+        onSave({
+            rules: [...rulesWithConditions, { days: Math.max(Math.min(365, days ?? 0), 0) }],
+        });
+    };
+
+    const handleSaveRules = (
+        rules: ESignDateSignedOffsetSettingsRule[],
+        finalRule: ESignDateSignedOffsetSettingsFinalRule,
+    ) => {
+        onSave({ rules: [...rules, finalRule] });
+    };
+
+    const handleClearRules = () => {
+        onSave(createClearedESignOffsetSettings());
+    };
+
+    return (
+        <Fragment>
+            {rulesWithConditions.length === 0 ? (
+                <Flex gap={1} direction="column" justifyContent="space-between">
+                    <NumberField
+                        size="small"
+                        label="Number of days"
+                        value={ruleWithOutCondition.days}
+                        onChange={handleDaysChange}
+                        suffix="days"
+                        width="100%"
+                    />
+
+                    <Button
+                        appearance="ghost"
+                        size="small"
+                        icon={AddIcon}
+                        onClick={() => setOpen(true)}
+                        style={{ color: '#0265DC' }}
+                    >
+                        Set Date Rule
+                    </Button>
+                </Flex>
+            ) : (
+                <ESignDateRulesSummary
+                    documentFields={documentFields}
+                    onClear={handleClearRules}
+                    onEdit={() => setOpen(true)}
+                    rulesWithConditions={rulesWithConditions}
+                    schema={schema}
+                    elseDays={ruleWithOutCondition.days}
+                />
+            )}
+            {open && (
+                <ESignDateSignedOffsetModal
+                    onClose={() => setOpen(false)}
+                    onSave={handleSaveRules}
+                    documentFields={documentFields}
+                    finalRule={ruleWithOutCondition}
+                    formFieldsByFormId={formFieldsByFormId}
+                    formFieldsLoadingFormId={formFieldsLoadingFormId}
+                    forms={forms}
+                    initialState={rulesWithConditions}
+                    onRequestFormFields={onRequestFormFields}
+                    schema={schema}
+                />
+            )}
+        </Fragment>
+    );
+};