@servicetitan/dte-pdf-editor 1.86.0 → 1.88.0

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

@@ -1,4 +1,4 @@
-import { Button, Chip, Combobox, Flex, Text } from '@servicetitan/anvil2';
+import { Button, Chip, Flex, SelectFieldSync, Text } from '@servicetitan/anvil2';
 import TrashIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
 import { useEffect, useMemo, useState } from 'react';
 import {
@@ -220,6 +220,68 @@ export function ConditionRow({
         [operatorItems, condition.operator],
     );
 
+    const sourceKindSelectOptions = useMemo(
+        () => sourceKindOptions.map(option => ({ id: option.value, label: option.label })),
+        [sourceKindOptions],
+    );
+
+    const selectedSourceKindSelectOption = selectedSourceKindOption
+        ? { id: selectedSourceKindOption.value, label: selectedSourceKindOption.label }
+        : null;
+
+    const handleSourceKindSelect = (option: { id: string; label: string } | null) => {
+        handleSourceKindChange(sourceKindOptions.find(o => o.value === option?.id) ?? null);
+    };
+
+    const formSelectOptions = useMemo(
+        () => sortedForms.map(form => ({ id: form.id, label: form.name })),
+        [sortedForms],
+    );
+
+    const selectedFormSelectOption = pickerForm
+        ? { id: pickerForm.id, label: pickerForm.name }
+        : null;
+
+    const handleFormSelect = (option: { id: number; label: string }) => {
+        handlePickerFormChange(sortedForms.find(f => f.id === option?.id) ?? null);
+    };
+
+    const dataPointSelectOptions = useMemo(
+        () => dataPointItems.map(item => ({ id: item.fullKey, label: item.title })),
+        [dataPointItems],
+    );
+
+    const selectedDataPointSelectOption = selectedDataPoint
+        ? { id: selectedDataPoint.fullKey, label: selectedDataPoint.title }
+        : null;
+
+    const handleDataPointSelect = (option: { id: string; label: string }) => {
+        handleDataPointChange(dataPointItems.find(item => item.fullKey === option?.id) ?? null);
+    };
+
+    const operatorSelectOptions = useMemo(
+        () => operatorItems.map(op => ({ id: op.value, label: op.label })),
+        [operatorItems],
+    );
+
+    const selectedOperatorSelectOption = selectedOperator
+        ? { id: selectedOperator.value, label: selectedOperator.label }
+        : null;
+
+    const handleOperatorSelect = (option: { id: string; label: string } | null) => {
+        const nextOperator = (option?.id ?? 'is_equal_to') as DisplayConditionSingle['operator'];
+        onChange({
+            ...condition,
+            operator: nextOperator,
+            ...(isCheckbox
+                ? {
+                      value: CHECKBOX_CONDITION_VALUE,
+                      valueLabel: undefined,
+                  }
+                : {}),
+        });
+    };
+
     const isValueLess =
         isCheckbox || VALUE_LESS_OPERATORS.includes(condition.operator as ConditionOperator);
 
@@ -336,51 +398,27 @@ export function ConditionRow({
     return (
         <Flex direction="column" gap="4" flex={1}>
             <Flex flex={1} gap="2">
-                <Combobox
+                <SelectFieldSync
                     flex={1}
-                    itemToKey={(item: SourceKindOption | null) => item?.value ?? ''}
-                    itemToString={(item: SourceKindOption | null) => item?.label ?? ''}
-                    items={sourceKindOptions}
-                    selectedItem={selectedSourceKindOption}
-                    onChange={handleSourceKindChange}
-                    filterOptions={{ keys: ['label'] }}
-                >
-                    <Combobox.SelectTrigger label="Source" placeholder="Select source..." />
-                    <Combobox.Content>
-                        {({ items }: { items: SourceKindOption[] }) => (
-                            <Combobox.List>
-                                {items.map((item, i) => (
-                                    <Combobox.Item index={i} item={item} key={item.value}>
-                                        {item.label}
-                                    </Combobox.Item>
-                                ))}
-                            </Combobox.List>
-                        )}
-                    </Combobox.Content>
-                </Combobox>
+                    disableSearch
+                    disableClearButton
+                    label="Source"
+                    placeholder="Select source..."
+                    options={sourceKindSelectOptions}
+                    value={selectedSourceKindSelectOption}
+                    onSelectedOptionChange={handleSourceKindSelect}
+                />
                 {sourceKind === FieldTypeEnum.forms && (
-                    <Combobox
+                    <SelectFieldSync
                         flex={1}
-                        itemToKey={(item: FormInfo | null) => String(item?.id ?? '')}
-                        itemToString={(item: FormInfo | null) => item?.name ?? ''}
-                        items={sortedForms}
-                        selectedItem={pickerForm}
-                        onChange={handlePickerFormChange}
-                        filterOptions={{ keys: ['name'] }}
-                    >
-                        <Combobox.SelectTrigger label="Select Form" placeholder="Select form..." />
-                        <Combobox.Content>
-                            {({ items }: { items: FormInfo[] }) => (
-                                <Combobox.List>
-                                    {items.map((item, i) => (
-                                        <Combobox.Item index={i} item={item} key={item.id}>
-                                            {item.name}
-                                        </Combobox.Item>
-                                    ))}
-                                </Combobox.List>
-                            )}
-                        </Combobox.Content>
-                    </Combobox>
+                        disableSearch
+                        disableClearButton
+                        label="Select Form"
+                        placeholder="Select form..."
+                        options={formSelectOptions}
+                        value={selectedFormSelectOption}
+                        onSelectedOptionChange={handleFormSelect}
+                    />
                 )}
             </Flex>
 
@@ -401,113 +439,58 @@ export function ConditionRow({
                 </Flex>
 
                 <Flex flex={1} style={{ minWidth: 160 }}>
-                    <Combobox
+                    <SelectFieldSync
                         flex={1}
+                        disableSearch
+                        disableClearButton
                         disabled={
                             sourceKind === FieldTypeEnum.forms &&
                             (!pickerForm || isLoadingFormFields)
                         }
-                        itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
-                        itemToString={(item: DataPointOption | null) => item?.title ?? ''}
-                        items={dataPointItems}
-                        selectedItem={selectedDataPoint}
-                        onChange={handleDataPointChange}
-                        filterOptions={{ keys: ['title'] }}
-                    >
-                        <Combobox.SelectTrigger
-                            label="Data point"
-                            placeholder={
-                                sourceKind === FieldTypeEnum.forms && isLoadingFormFields
-                                    ? 'Loading fields...'
-                                    : sourceKind === FieldTypeEnum.forms && !pickerForm
-                                      ? 'Select a form first...'
-                                      : 'Select data point...'
-                            }
-                        />
-                        <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>
+                        label="Data point"
+                        placeholder={
+                            sourceKind === FieldTypeEnum.forms && isLoadingFormFields
+                                ? 'Loading fields...'
+                                : sourceKind === FieldTypeEnum.forms && !pickerForm
+                                  ? 'Select a form first...'
+                                  : 'Select data point...'
+                        }
+                        options={dataPointSelectOptions}
+                        value={selectedDataPointSelectOption}
+                        onSelectedOptionChange={handleDataPointSelect}
+                    />
                 </Flex>
                 <Flex flex={1} style={{ minWidth: 160 }}>
-                    <Combobox
+                    <SelectFieldSync
                         flex={1}
-                        itemToKey={(item: OperatorOption | null) => item?.value ?? ''}
-                        itemToString={(item: OperatorOption | null) => item?.label ?? ''}
-                        items={operatorItems}
-                        selectedItem={selectedOperator}
-                        onChange={(item: OperatorOption | null) => {
-                            const nextOperator = (item?.value ??
-                                'is_equal_to') as DisplayConditionSingle['operator'];
-                            onChange({
-                                ...condition,
-                                operator: nextOperator,
-                                ...(isCheckbox
-                                    ? {
-                                          value: CHECKBOX_CONDITION_VALUE,
-                                          valueLabel: undefined,
-                                      }
-                                    : {}),
-                            });
-                        }}
-                        filterOptions={{ keys: ['label'] }}
-                    >
-                        <Combobox.SelectTrigger label="Condition" placeholder="Select..." />
-                        <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>
+                        disableSearch
+                        disableClearButton
+                        label="Condition"
+                        placeholder="Select..."
+                        options={operatorSelectOptions}
+                        value={selectedOperatorSelectOption}
+                        onSelectedOptionChange={handleOperatorSelect}
+                    />
                 </Flex>
                 {!isValueLess && (
                     <Flex flex={1} style={{ minWidth: 160 }}>
                         {isRadioGroup ? (
-                            <Combobox
+                            <SelectFieldSync
                                 flex={1}
-                                itemToKey={item => item?.id ?? ''}
-                                itemToString={item => item?.label ?? ''}
-                                items={radioValueOptions}
-                                selectedItem={selectedRadioValue}
-                                onChange={(item: RadioGroupOption | null) =>
+                                disableSearch
+                                label="Value"
+                                disableClearButton
+                                placeholder="Select radio option..."
+                                options={radioValueOptions}
+                                value={selectedRadioValue}
+                                onSelectedOptionChange={(item: RadioGroupOption | null) =>
                                     onChange({
                                         ...condition,
                                         value: item?.id ?? '',
                                         valueLabel: undefined,
                                     })
                                 }
-                                filterOptions={{ keys: ['label'] }}
-                            >
-                                <Combobox.SelectTrigger
-                                    label="Value"
-                                    placeholder="Select radio option..."
-                                />
-                                <Combobox.Content>
-                                    {({ items }) => (
-                                        <Combobox.List>
-                                            {items.map((item, i) => (
-                                                <Combobox.Item index={i} item={item} key={item.id}>
-                                                    {item.label}
-                                                </Combobox.Item>
-                                            ))}
-                                        </Combobox.List>
-                                    )}
-                                </Combobox.Content>
-                            </Combobox>
+                            />
                         ) : (
                             <ConditionValueControl
                                 value={condition.value}

package/src/components/display-conditions/condition-value-control.tsx

@@ -1,5 +1,4 @@
-import { TextField } from '@servicetitan/anvil2';
-import { SelectField, SelectFieldOption, SelectFieldSync } from '@servicetitan/anvil2/beta';
+import { SelectField, SelectFieldOption, SelectFieldSync, TextField } from '@servicetitan/anvil2';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLookupOptions } from '../../hooks';
 import type { LookupOption } from '../../interface/host-events';

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,114 @@
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+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[];
+    onEdit: () => void;
+}
+
+export const ESignDateRulesSummary: FC<ESignDateRulesSummaryProps> = ({
+    documentFields,
+    elseDays,
+    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>
+                <Button
+                    appearance="ghost"
+                    size="small"
+                    icon={{ before: EditIcon }}
+                    onClick={onEdit}
+                >
+                    Edit
+                </Button>
+            </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>
+    );
+};