@servicetitan/dte-pdf-editor 1.20.0 → 1.22.0

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

@@ -0,0 +1,182 @@
+import { Button, Chip, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import TrashIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
+import { useMemo } from 'react';
+import {
+    ConditionOperator,
+    DataPointOption,
+    DisplayConditionSingle,
+    NUMBER_OPERATORS,
+    STRING_OPERATORS,
+    VALUE_LESS_OPERATORS,
+} from '../../interface/types';
+
+export interface ConditionRowProps {
+    canRemove: boolean;
+    condition: DisplayConditionSingle;
+    dataPointOptions: DataPointOption[];
+    onChange: (c: DisplayConditionSingle) => void;
+    onRemove: () => void;
+}
+
+interface OperatorOption {
+    label: string;
+    value: string;
+}
+
+function sanitizeNumericInput(raw: string): string {
+    let value = raw.replaceAll(/[^0-9.-]/g, '');
+    const isNegative = value.startsWith('-');
+    value = value.replaceAll('-', '');
+    if (isNegative) {
+        value = `-${value}`;
+    }
+    const firstDot = value.indexOf('.');
+    if (firstDot >= 0) {
+        value = `${value.slice(0, firstDot + 1)}${value.slice(firstDot + 1).replaceAll('.', '')}`;
+    }
+    return value;
+}
+
+export function ConditionRow({
+    canRemove,
+    condition,
+    dataPointOptions,
+    onChange,
+    onRemove,
+}: Readonly<ConditionRowProps>) {
+    const selectedDataPoint = useMemo(
+        () => dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey) ?? null,
+        [dataPointOptions, condition.dataPointKey],
+    );
+
+    const fieldType = selectedDataPoint?.fieldType ?? 'string';
+
+    const operatorItems: OperatorOption[] = useMemo(
+        () =>
+            fieldType === 'number'
+                ? ([...NUMBER_OPERATORS] as OperatorOption[])
+                : ([...STRING_OPERATORS] as OperatorOption[]),
+        [fieldType],
+    );
+
+    const selectedOperator = useMemo(
+        () => operatorItems.find(op => op.value === condition.operator) ?? null,
+        [operatorItems, condition.operator],
+    );
+
+    const isValueLess = VALUE_LESS_OPERATORS.includes(condition.operator as ConditionOperator);
+
+    const handleValueChange = (raw: string) => {
+        const value = fieldType === 'number' ? sanitizeNumericInput(raw) : raw;
+        onChange({ ...condition, value });
+    };
+
+    const handleDataPointChange = (item: DataPointOption | null) => {
+        const nextFieldType = item?.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: item?.fullKey ?? '',
+            operator: operatorReset
+                ? nextIsNumber
+                    ? 'num_eq'
+                    : 'is_equal_to'
+                : condition.operator,
+        });
+    };
+
+    return (
+        <Flex direction="row" alignItems="flex-end" gap="2" flex={1}>
+            <Flex
+                alignItems="flex-end"
+                style={{
+                    padding: '8px 12px',
+                }}
+            >
+                <Chip label="IF" size="medium" />
+            </Flex>
+            <Flex flex={1}>
+                <Combobox
+                    flex={1}
+                    itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
+                    itemToString={(item: DataPointOption | null) => item?.title ?? ''}
+                    items={dataPointOptions}
+                    selectedItem={selectedDataPoint}
+                    onChange={handleDataPointChange}
+                >
+                    <Combobox.SelectTrigger label="Data point" placeholder="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>
+            </Flex>
+            <Flex flex={1}>
+                <Combobox
+                    flex={1}
+                    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 DisplayConditionSingle['operator'],
+                        })
+                    }
+                >
+                    <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>
+            </Flex>
+            {!isValueLess && (
+                <Flex flex={1}>
+                    <TextField
+                        label="Value"
+                        flex={1}
+                        value={condition.value}
+                        onChange={e => handleValueChange(e.target.value)}
+                        placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
+                        aria-label="Value"
+                        {...(fieldType === 'number' && { inputMode: 'decimal' })}
+                    />
+                </Flex>
+            )}
+            {canRemove && (
+                <Flex
+                    alignItems="flex-end"
+                    style={{
+                        padding: '6px 12px',
+                    }}
+                >
+                    <Button
+                        appearance="secondary"
+                        aria-label="Remove condition"
+                        icon={{ before: TrashIcon }}
+                        onClick={onRemove}
+                    />
+                </Flex>
+            )}
+        </Flex>
+    );
+}

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

@@ -0,0 +1,180 @@
+import { Button, Dialog, Divider, Flex, SegmentedControl, Text } from '@servicetitan/anvil2';
+import { useCallback, useMemo, useState } from 'react';
+import { defaultGroup, defaultState, MODAL_CONTENT_MAX_HEIGHT } from '../../constants';
+import type { DisplayConditionState, PdfField, SchemaObject } from '../../interface/types';
+import { getDataPointOptions, isValidNumber } from '../../utils';
+import { ConditionGroupsSection } from './condition-groups-section';
+
+const BEHAVIOR_OPTIONS = [
+    { label: 'Show', value: 'show' },
+    { label: 'Hide', value: 'hide' },
+] as const;
+
+export interface DisplayConditionModalProps {
+    onClose: () => void;
+    onSave: (state: DisplayConditionState | null) => void;
+    initialState: DisplayConditionState | null | undefined;
+    /** Data model schema (for schema-backed data points). */
+    schema?: SchemaObject;
+    /** All document fields: fillable fields are included as data points. */
+    documentFields?: PdfField[];
+}
+
+export function DisplayConditionModal({
+    documentFields,
+    initialState,
+    onClose,
+    onSave,
+    schema,
+}: DisplayConditionModalProps) {
+    const [state, setState] = useState<DisplayConditionState>(() =>
+        initialState?.groups?.length ? initialState : defaultState(),
+    );
+
+    const dataPointOptions = useMemo(
+        () => getDataPointOptions(schema, documentFields),
+        [schema, documentFields],
+    );
+
+    const handleClose = useCallback(() => {
+        onClose();
+    }, [onClose]);
+
+    const handleSave = useCallback(() => {
+        const hasValidGroup = state.groups.some(group =>
+            group.conditions.some(
+                c =>
+                    c.dataPointKey &&
+                    (c.operator === 'is_empty' ||
+                        c.operator === 'is_not_empty' ||
+                        c.value.trim() !== ''),
+            ),
+        );
+        if (hasValidGroup) {
+            onSave(state);
+        } else {
+            onSave(null);
+        }
+        onClose();
+    }, [onSave, state, onClose]);
+
+    const updateGroup = useCallback((index: number, group: DisplayConditionState['groups'][0]) => {
+        setState(prev => {
+            const next = [...prev.groups];
+            next[index] = group;
+            return { ...prev, groups: next };
+        });
+    }, []);
+
+    const removeGroup = useCallback((index: number) => {
+        setState(prev => ({
+            ...prev,
+            groups: (() => {
+                const nextGroups = prev.groups.filter((_, i) => i !== index);
+                if (nextGroups.length === 0) {
+                    return [defaultGroup()];
+                }
+                if (index === 0 && nextGroups[0]) {
+                    const { logicalOperator: omit, ...firstGroup } = nextGroups[0];
+                    return [firstGroup, ...nextGroups.slice(1)];
+                }
+                return nextGroups;
+            })(),
+        }));
+    }, []);
+
+    const addGroup = useCallback(() => {
+        setState(prev => ({
+            ...prev,
+            groups: [...prev.groups, { ...defaultGroup(), logicalOperator: 'and' }],
+        }));
+    }, []);
+
+    const handleBehaviorChange = useCallback((behavior: DisplayConditionState['behavior']) => {
+        setState(prev => ({ ...prev, behavior }));
+    }, []);
+
+    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 =
+                    dataPointOptions.find(opt => opt.fullKey === condition.dataPointKey)
+                        ?.fieldType ?? 'string';
+                if (fieldType === 'number' && !isValidNumber(trimmedValue)) {
+                    return false;
+                }
+            }
+        }
+        return state.groups.length > 0;
+    }, [dataPointOptions, state.groups]);
+
+    return (
+        <Dialog open onClose={handleClose} size="xlarge">
+            <Dialog.Header>Rules and Conditions</Dialog.Header>
+            <Dialog.Content>
+                <Flex
+                    direction="column"
+                    gap="6"
+                    flex={1}
+                    style={{
+                        maxHeight: MODAL_CONTENT_MAX_HEIGHT,
+                        overflowY: 'auto',
+                    }}
+                >
+                    <Flex direction="column" gap="3">
+                        <Text size="medium" variant="body" style={{ fontWeight: 'bold' }}>
+                            When conditions are met:
+                        </Text>
+                        <Flex direction="row" alignItems="center" gap="3">
+                            <Text size="small" subdued variant="body">
+                                Select to show or hide this field.
+                            </Text>
+
+                            <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>
+                    </Flex>
+                    <Divider />
+                    <ConditionGroupsSection
+                        dataPointOptions={dataPointOptions}
+                        groups={state.groups}
+                        onAddGroup={addGroup}
+                        onRemoveGroup={removeGroup}
+                        onUpdateGroup={updateGroup}
+                    />
+                    {!canSave && (
+                        <Text size="small" subdued variant="body">
+                            Complete each condition before saving. Data point and value are
+                            required, and numeric fields must contain a valid number.
+                        </Text>
+                    )}
+                </Flex>
+            </Dialog.Content>
+            <Dialog.Footer sticky>
+                <Dialog.CancelButton onClick={handleClose}>Cancel</Dialog.CancelButton>
+                <Button appearance="primary" disabled={!canSave} onClick={handleSave}>
+                    Save Changes
+                </Button>
+            </Dialog.Footer>
+        </Dialog>
+    );
+}

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

@@ -0,0 +1,41 @@
+import { Button } from '@servicetitan/anvil2';
+import PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';
+import { FC, Fragment, useState } from 'react';
+import { PdfField } from '../../interface/types';
+import { DisplayConditionModal, DisplayConditionModalProps } from './display-condition-modal';
+
+interface DisplayConditionProps
+    extends Pick<DisplayConditionModalProps, 'initialState' | 'schema' | 'documentFields'> {
+    onSave: (state: Partial<PdfField>) => void;
+}
+
+export const DisplayCondition: FC<DisplayConditionProps> = ({
+    documentFields,
+    initialState,
+    onSave,
+    schema,
+}) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Fragment>
+            <Button
+                appearance="secondary"
+                className="full-width"
+                icon={PlusIcon}
+                onClick={() => setOpen(true)}
+            >
+                Add Display Condition
+            </Button>
+            {open && (
+                <DisplayConditionModal
+                    onClose={() => setOpen(false)}
+                    onSave={state => onSave({ displayCondition: state ?? undefined })}
+                    initialState={initialState}
+                    schema={schema}
+                    documentFields={documentFields}
+                />
+            )}
+        </Fragment>
+    );
+};

package/src/components/field-config-panel/advanced-settings.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from '@servicetitan/anvil2';
+import { Flex, SegmentedControl, Switch, Text } from '@servicetitan/anvil2';
 import { Dispatch, FC, SetStateAction } from 'react';
 import { CalculatedFieldFormat } from '../../interface/types';
 
@@ -18,23 +18,21 @@ export const AdvancedSettings: FC<AdvancedSettingsProps> = ({ format, setFormat
         <Text variant="body" size="small">
             Rounding mode
         </Text>
-        <Flex gap={1}>
-            {ROUNDING_OPTIONS.map(({ label, value }) => (
-                <Button
-                    key={value}
-                    appearance={format.roundingMode === value ? 'primary' : 'secondary'}
-                    size="small"
-                    onClick={() => setFormat(prev => ({ ...prev, roundingMode: value }))}
-                >
-                    {label}
-                </Button>
-            ))}
-        </Flex>
-        <Flex
-            alignItems="center"
-            justifyContent="space-between"
-            className="dte-formula-advanced-row"
+        <SegmentedControl
+            size="medium"
+            selected={format.roundingMode}
+            onChange={(roundingMode: CalculatedFieldFormat['roundingMode']) =>
+                setFormat(prev => ({ ...prev, roundingMode }))
+            }
+            fill
         >
+            {ROUNDING_OPTIONS.map(opt => (
+                <SegmentedControl.Segment key={opt.value} value={opt.value}>
+                    {opt.label}
+                </SegmentedControl.Segment>
+            ))}
+        </SegmentedControl>
+        <Flex alignItems="center" justifyContent="space-between">
             <Text variant="body" size="small">
                 Decimal places
             </Text>
@@ -44,7 +42,6 @@ export const AdvancedSettings: FC<AdvancedSettingsProps> = ({ format, setFormat
         </Flex>
         <input
             type="range"
-            className="dte-formula-advanced-range"
             min={0}
             max={10}
             value={format.decimals}
@@ -55,36 +52,35 @@ export const AdvancedSettings: FC<AdvancedSettingsProps> = ({ format, setFormat
                 }))
             }
         />
-        <label className="dte-formula-advanced-checkbox">
-            <input
-                type="checkbox"
-                checked={format.thousandsSeparator}
-                onChange={e =>
-                    setFormat(prev => ({
-                        ...prev,
-                        thousandsSeparator: e.target.checked,
-                        decimalSeparatorEnabled: e.target.checked,
-                        decimalSeparator: e.target.checked ? prev.decimalSeparator : '.',
-                    }))
-                }
-            />
-            <Text variant="body" size="small">
-                Thousands separator
-            </Text>
-        </label>
+        <Switch
+            checked={format.thousandsSeparator}
+            onChange={(_e, { checked }) => {
+                setFormat(prev => ({
+                    ...prev,
+                    thousandsSeparator: checked,
+                    decimalSeparatorEnabled: checked,
+                    decimalSeparator: checked ? prev.decimalSeparator : '.',
+                }));
+            }}
+            label="Thousands separator"
+            value="switch-example"
+        />
+
         {format.thousandsSeparator && (
-            <Flex gap={2}>
-                {(['.', ','] as const).map(sep => (
-                    <Button
-                        key={sep}
-                        appearance={format.decimalSeparator === sep ? 'primary' : 'secondary'}
-                        size="small"
-                        onClick={() => setFormat(prev => ({ ...prev, decimalSeparator: sep }))}
-                    >
-                        {sep}
-                    </Button>
+            <SegmentedControl
+                size="medium"
+                fill
+                selected={format.decimalSeparator}
+                onChange={(decimalSeparator: CalculatedFieldFormat['decimalSeparator']) =>
+                    setFormat(prev => ({ ...prev, decimalSeparator }))
+                }
+            >
+                {['.', ','].map(decimalSeparator => (
+                    <SegmentedControl.Segment key={decimalSeparator} value={decimalSeparator}>
+                        {decimalSeparator}
+                    </SegmentedControl.Segment>
                 ))}
-            </Flex>
+            </SegmentedControl>
         )}
         <Text variant="body" size="small">
             Result affixes

package/src/components/field-config-panel/field-config-panel.tsx

@@ -9,12 +9,13 @@ import {
     SchemaObject,
 } from '../../interface/types';
 import { generateESignPath, generateFillablePath } from '../../utils';
+import { DisplayCondition } from '../display-conditions/display-condition';
 import { FormulaGenerator } from './formula-generator';
 
 interface FieldConfigPanelProps {
     field: PdfField;
     dataModel?: SchemaObject;
-    /** All fields on the document (e.g. for formula builder fillable section). */
+    /** All fields on the document (e.g., for a formula builder fillable section). */
     documentFields?: PdfField[];
     recipients?: RecipientInfo[];
     onDeleteField(): void;
@@ -158,6 +159,14 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     }
                 />
             )}
+
+            <DisplayCondition
+                onSave={onFieldConfigChange}
+                documentFields={documentFields}
+                schema={dataModel}
+                initialState={field.displayCondition ?? undefined}
+            />
+
             <Textarea
                 label="Description"
                 value={field.description}
@@ -167,7 +176,8 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     })
                 }
             />
-            <Button className="full-width" onClick={onDeleteField}>
+
+            <Button className="full-width" onClick={onDeleteField} appearance="danger">
                 Delete Field
             </Button>
         </Flex>

package/src/components/field-config-panel/formula-generator.tsx

@@ -1,10 +1,10 @@
-import { Text } from '@servicetitan/anvil2';
+import { Button } from '@servicetitan/anvil2';
+import EditIcon from '@servicetitan/anvil2/assets/icons/material/round/edit.svg';
 import { FC, Fragment, useMemo, useState } from 'react';
 import {
     CalculatedFieldFormat,
     FieldTypeEnum,
     FieldTypeOption,
-    FormulaToken,
     PdfField,
     PdfFieldSubType,
     SchemaObject,
@@ -57,56 +57,21 @@ export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
         [documentFields],
     );
 
-    const hasFormula = formula?.tokens && formula.tokens.length > 0;
-
     const handleSave = (newFormula: StructuredFormula, format: CalculatedFieldFormat) => {
         onFormulaChange?.(newFormula, format);
     };
 
     return (
         <Fragment>
-            <Text variant="body" size="small">
-                Formula
-            </Text>
-            <div
-                className="dte-formula-box"
-                role="button"
-                tabIndex={0}
+            <Button
+                appearance="secondary"
+                className="full-width"
+                icon={EditIcon}
                 onClick={() => setModalOpen(true)}
-                onKeyDown={e => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        setModalOpen(true);
-                    }
-                }}
-                aria-label="Configure formula"
             >
-                {hasFormula ? (
-                    (() => {
-                        let offset = 0;
-                        return formula!.tokens.map((token: FormulaToken) => {
-                            const value =
-                                token.type === 'field'
-                                    ? token.path
-                                    : (token as { value: string }).value;
-                            const key = `formula-${offset}-${token.type}-${value}`;
-                            offset += value.length + 1;
-                            return (
-                                <span
-                                    key={key}
-                                    className={`dte-formula-token dte-formula-token-${token.type}`}
-                                >
-                                    {token.type === 'field'
-                                        ? token.label
-                                        : (token as { value: string }).value}
-                                </span>
-                            );
-                        });
-                    })()
-                ) : (
-                    <span>Configure formula</span>
-                )}
-            </div>
+                Configure formula
+            </Button>
+
             {modalOpen && (
                 <FormulaModal
                     initialFormula={formula}