@servicetitan/dte-unlayer 0.158.0 → 0.160.0

package/src/display-conditions/ConditionGroupsSection.tsx

@@ -36,28 +36,31 @@ export function ConditionGroupsSection({
     }
 
     return (
-        <Flex direction="column" gap="4">
-            <Flex direction="row" alignItems="center" gap="1" style={{ flexWrap: 'wrap' }}>
-                <Text size="small" variant="body" style={{ fontWeight: 'bold' }}>
-                    When
-                </Text>
-                <SegmentedControl
-                    selected={matchType}
-                    size="small"
-                    onChange={(value: string) => onMatchTypeChange(value as MatchType)}
-                >
-                    <SegmentedControl.Segment value="all">All</SegmentedControl.Segment>
-                    <SegmentedControl.Segment value="any">Any</SegmentedControl.Segment>
-                </SegmentedControl>
-                <Text size="small" variant="body" style={{ fontWeight: 'bold' }}>
-                    of the
-                </Text>
-                <Chip label="IF" size="small" />
-                <Text size="small" variant="body" style={{ fontWeight: 'bold' }}>
-                    conditions are met
-                </Text>
+        // Spacing matches BYOD's display-condition modal: header rows at gap 3, rules 6 below them.
+        <Flex direction="column" gap="6">
+            <Flex direction="column" gap="3">
+                <Flex direction="row" alignItems="center" gap="2" style={{ flexWrap: 'wrap' }}>
+                    <Text size="medium" variant="body" style={{ fontWeight: 'bold' }}>
+                        When
+                    </Text>
+                    <SegmentedControl
+                        selected={matchType}
+                        size="small"
+                        onChange={(value: string) => onMatchTypeChange(value as MatchType)}
+                    >
+                        <SegmentedControl.Segment value="all">All</SegmentedControl.Segment>
+                        <SegmentedControl.Segment value="any">Any</SegmentedControl.Segment>
+                    </SegmentedControl>
+                    <Text size="medium" variant="body" style={{ fontWeight: 'bold' }}>
+                        of the
+                    </Text>
+                    <Chip label="IF" size="small" />
+                    <Text size="medium" variant="body" style={{ fontWeight: 'bold' }}>
+                        conditions are met
+                    </Text>
+                </Flex>
+                {behaviorSection}
             </Flex>
-            {behaviorSection}
             <ConditionGroup
                 dataPointOptions={dataPointOptions}
                 formFieldOptions={formFieldOptions}

package/src/display-conditions/ConditionRow.tsx

@@ -22,12 +22,18 @@ interface OperatorOption {
     value: string;
 }
 
+type SourceKind = 'schema' | 'form';
+
 interface SourceOption {
-    formId?: number;
     label: string;
-    value: string;
+    value: SourceKind;
 }
 
+const SOURCE_KIND_LABELS: Record<SourceKind, string> = {
+    form: 'Form',
+    schema: 'Merge tags',
+};
+
 export function ConditionRow({
     canRemove,
     condition,
@@ -42,31 +48,38 @@ export function ConditionRow({
         () => parseFormFieldKey(condition.dataPointKey),
         [condition.dataPointKey],
     );
-    const [selectedSourceValue, setSelectedSourceValue] = useState<string>(
-        selectedFormFieldMeta ? `form:${selectedFormFieldMeta.formId}` : 'schema',
+    // As in BYOD: the source is "Merge tags" or "Form", and a form source gets its own form picker.
+    const [sourceKind, setSourceKind] = useState<SourceKind>(
+        selectedFormFieldMeta ? 'form' : 'schema',
     );
+    const [selectedFormId, setSelectedFormId] = useState<number | undefined>(
+        selectedFormFieldMeta?.formId,
+    );
+
+    const sourceOptions = useMemo<SourceOption[]>(() => {
+        const kinds: SourceKind[] =
+            forms.length || selectedFormFieldMeta ? ['schema', 'form'] : ['schema'];
+
+        return kinds.map(value => ({ label: SOURCE_KIND_LABELS[value], value }));
+    }, [forms.length, selectedFormFieldMeta]);
 
-    const sourceOptions = useMemo<SourceOption[]>(
-        () => [
-            { label: 'Merge tags', value: 'schema' },
-            ...forms.map(form => ({
-                formId: form.id,
-                label: form.name,
-                value: `form:${form.id}`,
-            })),
-        ],
+    const selectedSource =
+        sourceOptions.find(opt => opt.value === sourceKind) ?? sourceOptions[0] ?? null;
+
+    const sortedForms = useMemo(
+        () => [...forms].sort((a, b) => a.name.localeCompare(b.name)),
         [forms],
     );
 
-    const selectedSource = useMemo<SourceOption | null>(() => {
-        return (
-            sourceOptions.find(opt => opt.value === selectedSourceValue) ?? sourceOptions[0] ?? null
-        );
-    }, [selectedSourceValue, sourceOptions]);
+    const selectedForm = useMemo(
+        () => sortedForms.find(form => form.id === selectedFormId) ?? null,
+        [selectedFormId, sortedForms],
+    );
 
     useEffect(() => {
         if (selectedFormFieldMeta) {
-            setSelectedSourceValue(`form:${selectedFormFieldMeta.formId}`);
+            setSourceKind('form');
+            setSelectedFormId(selectedFormFieldMeta.formId);
             return;
         }
         if (!condition.dataPointKey) {
@@ -74,18 +87,21 @@ export function ConditionRow({
         }
         const hasSchemaMatch = dataPointOptions.some(opt => opt.fullKey === condition.dataPointKey);
         if (hasSchemaMatch) {
-            setSelectedSourceValue('schema');
+            setSourceKind('schema');
         }
     }, [condition.dataPointKey, dataPointOptions, selectedFormFieldMeta]);
 
-    const currentFormId = selectedSource?.formId;
-    const activeDataPointOptions = useMemo(
-        () =>
-            currentFormId
-                ? formFieldOptions.filter(option => option.formId === currentFormId)
-                : dataPointOptions,
-        [currentFormId, dataPointOptions, formFieldOptions],
-    );
+    const isFormSource = selectedSource?.value === 'form';
+    const currentFormId = isFormSource ? selectedFormId : undefined;
+    const activeDataPointOptions = useMemo(() => {
+        if (!isFormSource) {
+            return dataPointOptions;
+        }
+
+        return currentFormId
+            ? formFieldOptions.filter(option => option.formId === currentFormId)
+            : [];
+    }, [currentFormId, dataPointOptions, formFieldOptions, isFormSource]);
 
     const selectedDataPoint = useMemo(
         () => activeDataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
@@ -128,13 +144,20 @@ export function ConditionRow({
         if (!item) {
             return;
         }
-        setSelectedSourceValue(item.value);
+        setSourceKind(item.value);
+        setSelectedFormId(undefined);
         // 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) {
-            onFormSelect(item.formId);
+    const handleFormChange = (formId: number | undefined) => {
+        if (formId === undefined) {
+            return;
         }
+        setSelectedFormId(formId);
+        // Switching forms keeps the "Form" source and its picker, and starts the condition over.
+        onChange({ ...condition, dataPointKey: '', operator: 'is_equal_to', value: '' });
+        onFormSelect(formId);
     };
 
     // Same controls and layout as BYOD's condition row (`dte-pdf-editor`'s `ConditionRow`).
@@ -142,6 +165,7 @@ export function ConditionRow({
         id: option.value,
         label: option.label,
     }));
+    const formSelectOptions = sortedForms.map(form => ({ id: form.id, label: form.name }));
     const dataPointSelectOptions = activeDataPointOptions.map(option => ({
         id: option.fullKey,
         label: option.title,
@@ -170,6 +194,22 @@ export function ConditionRow({
                         handleSourceChange(sourceOptions.find(o => o.value === option?.id) ?? null)
                     }
                 />
+                {isFormSource && (
+                    <SelectFieldSync
+                        flex={1}
+                        disableSearch
+                        disableClearButton
+                        label="Select Form"
+                        placeholder="Select form..."
+                        options={formSelectOptions}
+                        value={
+                            selectedForm ? { id: selectedForm.id, label: selectedForm.name } : null
+                        }
+                        onSelectedOptionChange={(option: { id: number; label: string } | null) =>
+                            handleFormChange(option?.id)
+                        }
+                    />
+                )}
             </Flex>
             <Flex
                 direction="row"
@@ -186,9 +226,12 @@ export function ConditionRow({
                         flex={1}
                         disableSearch
                         disableClearButton
+                        disabled={isFormSource && !currentFormId}
                         label="Data point"
                         placeholder={
-                            currentFormId ? 'Select form field...' : 'Select data point...'
+                            isFormSource && !currentFormId
+                                ? 'Select a form first...'
+                                : 'Select data point...'
                         }
                         options={dataPointSelectOptions}
                         value={

package/src/display-conditions/DisplayConditionModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Combobox, Dialog, Flex, Text, ThemeProvider } from '@servicetitan/anvil2';
+import { Button, Dialog, Flex, SegmentedControl, Text, ThemeProvider } from '@servicetitan/anvil2';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ConditionGroupsSection, MatchType } from './ConditionGroupsSection';
@@ -23,7 +23,6 @@ const BEHAVIOR_OPTIONS = [
     { label: 'Hide', value: 'hide' },
 ] as const;
 const NUMERIC_VALUE_RE = /^-?(?:\d+\.?\d*|\.\d+)$/;
-type BehaviorOption = (typeof BEHAVIOR_OPTIONS)[number];
 
 function deriveMatchType(conditionState: DisplayConditionState): MatchType {
     const firstGroup = conditionState.groups[0];
@@ -129,15 +128,8 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
         });
     }, []);
 
-    const selectedBehavior = useMemo(
-        () => BEHAVIOR_OPTIONS.find(opt => opt.value === state.behavior) ?? BEHAVIOR_OPTIONS[0],
-        [state.behavior],
-    );
-
-    const handleBehaviorChange = useCallback((item: BehaviorOption | null) => {
-        if (item) {
-            setState(prev => ({ ...prev, behavior: item.value as DisplayBehavior }));
-        }
+    const handleBehaviorChange = useCallback((behavior: string) => {
+        setState(prev => ({ ...prev, behavior: behavior as DisplayBehavior }));
     }, []);
 
     const handleFormSelect = useCallback(
@@ -187,66 +179,33 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
         <Dialog open={isOpen} onClose={handleClose} size="xlarge">
             <Dialog.Header>Conditions</Dialog.Header>
             <Dialog.Content>
+                {/* Spacing matches BYOD's `DisplayConditionModal` (`dte-pdf-editor`). */}
                 <Flex
                     direction="column"
-                    gap="4"
+                    gap="6"
+                    flex={1}
                     style={{
                         maxHeight: MODAL_CONTENT_MAX_HEIGHT,
                         overflowY: 'auto',
-                        paddingRight: 8,
-                        width: '100%',
                     }}
                 >
                     <ConditionGroupsSection
                         behaviorSection={
-                            <Flex
-                                direction="row"
-                                alignItems="center"
-                                gap="2"
-                                style={{ flexWrap: 'wrap' }}
-                            >
+                            <Flex direction="row" alignItems="center" gap="3">
                                 <Text size="small" subdued variant="body">
                                     Select to include or exclude selected template/file.
                                 </Text>
-                                <div style={{ width: 90 }}>
-                                    <Combobox.Select
-                                        disableClearSelection
-                                        itemToKey={(item: BehaviorOption | null) =>
-                                            item?.value ?? ''
-                                        }
-                                        itemToString={(item: BehaviorOption | null) =>
-                                            item?.label ?? ''
-                                        }
-                                        items={[...BEHAVIOR_OPTIONS]}
-                                        selectedItem={selectedBehavior}
-                                        onChange={handleBehaviorChange}
-                                    >
-                                        <Combobox.SelectTrigger
-                                            label=""
-                                            placeholder="Select..."
-                                            size="small"
-                                        />
-                                        <Combobox.Content>
-                                            {({
-                                                items,
-                                            }: {
-                                                items: BehaviorOption[];
-                                            }) => (
-                                                <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>
+                                <SegmentedControl
+                                    size="small"
+                                    selected={state.behavior}
+                                    onChange={handleBehaviorChange}
+                                >
+                                    {BEHAVIOR_OPTIONS.map(opt => (
+                                        <SegmentedControl.Segment key={opt.value} value={opt.value}>
+                                            {opt.label}
+                                        </SegmentedControl.Segment>
+                                    ))}
+                                </SegmentedControl>
                             </Flex>
                         }
                         dataPointOptions={dataPointOptions}

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

@@ -83,21 +83,21 @@ export function ESignDateSignedOffsetModal({
     );
 
     /*
-     * As in BYOD: "Clear Rules" shows once there is something to clear, and leaves one empty rule
-     * that is saved as no rules until it is filled in.
+     * As in BYOD: "Clear Rules" shows once there is something to clear, and leaves one empty rule.
+     * Save stays disabled after it until a rule is filled in again.
      */
     const hasConfiguredRules = rules.some(isCompleteRule);
-    const shouldSaveNoRules = hasClearedRules && !hasConfiguredRules;
-    const canSave = !isFieldDataLoading && (shouldSaveNoRules || rules.every(isCompleteRule));
+    const isClearedWithoutRules = hasClearedRules && !hasConfiguredRules;
+    const canSave = !isFieldDataLoading && !isClearedWithoutRules && rules.every(isCompleteRule);
 
     const handleClose = useCallback(() => {
         setRequest(null);
     }, []);
 
     const handleSave = useCallback(() => {
-        request?.done(buildESignOffsetSettings(shouldSaveNoRules ? [] : rules, finalDays));
+        request?.done(buildESignOffsetSettings(rules, finalDays));
         setRequest(null);
-    }, [finalDays, request, rules, shouldSaveNoRules]);
+    }, [finalDays, request, rules]);
 
     const handleClearRules = useCallback(() => {
         setRules([createESignOffsetRule()]);