@servicetitan/dte-pdf-editor 1.21.0 → 1.23.0

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;
@@ -79,7 +80,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 field.type,
             ) && (
                 <TextField
-                    required
+                    required={field.type === FieldTypeEnum.fillable}
                     label="Label"
                     value={field.label}
                     onChange={e =>
@@ -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}

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

@@ -1,8 +1,8 @@
-import { Button, Flex, Text } from '@servicetitan/anvil2';
-import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+import { Button, Dialog, Divider, Flex } from '@servicetitan/anvil2';
 import IconRedo from '@servicetitan/anvil2/assets/icons/material/round/redo.svg';
 import IconUndo from '@servicetitan/anvil2/assets/icons/material/round/undo.svg';
 import { FC, useCallback, useMemo, useState } from 'react';
+import { MODAL_CONTENT_MAX_HEIGHT } from '../../constants';
 import { useFormulaEditor } from '../../hooks';
 import {
     CalculatedFieldFormat,
@@ -132,6 +132,10 @@ export const FormulaModal: FC<FormulaModalProps> = ({
     const canSave =
         formulaValidation.valid && unknownFieldErrors.length === 0 && parsedTokens.length > 0;
 
+    const handleClose = useCallback(() => {
+        onClose();
+    }, [onClose]);
+
     const handleSave = useCallback(() => {
         if (!canSave) {
             return;
@@ -141,89 +145,75 @@ export const FormulaModal: FC<FormulaModalProps> = ({
     }, [canSave, format, onClose, onSave, parsedTokens]);
 
     return (
-        <Flex
-            alignItems="center"
-            justifyContent="center"
-            className="dte-formula-modal-overlay"
-            role="dialog"
-            aria-modal="true"
-            aria-label="Formula"
-        >
-            <Flex direction="column" className="dte-formula-modal ">
+        <Dialog open onClose={handleClose} size="xlarge">
+            <Dialog.Header>Formula Builder</Dialog.Header>
+            <Divider />
+            <Dialog.Content>
                 <Flex
-                    className="dte-formula-modal-header"
-                    alignItems="center"
-                    justifyContent="space-between"
+                    flex={1}
+                    alignItems="stretch"
+                    gap={2}
+                    style={{
+                        height: MODAL_CONTENT_MAX_HEIGHT,
+                        overflowY: 'auto',
+                    }}
                 >
-                    <Text variant="headline" el="h6" size="small">
-                        Formula Builder
-                    </Text>
-                    <Button
-                        appearance="ghost"
-                        size="small"
-                        onClick={onClose}
-                        aria-label="Close"
-                        icon={IconClose}
+                    <FieldSidebar
+                        fillableOptions={fillableFieldsFromDocument}
+                        mergeTagOptions={allFields}
+                        highlightElementPath={highlightElementPath}
+                        onHover={setHighlightElementPath}
+                        onSelect={formulaEditor.insertField}
+                        selectedPaths={formulaEditor.selectedFieldPaths}
+                    />
+                    <FormulaWorkspace
+                        editorRef={formulaEditor.editorRef}
+                        isInvalid={isInvalid && formulaEditor.isDirty}
+                        validationError={validationError}
+                        format={format}
+                        onResultTypeChange={nextType =>
+                            setFormat(prev => ({ ...prev, resultType: nextType }))
+                        }
+                        advancedOpen={advancedOpen}
+                        onToggleAdvanced={() => setAdvancedOpen(prev => !prev)}
+                        setFormat={setFormat}
+                        onInput={formulaEditor.handleEditorInput}
+                        onKeyDown={formulaEditor.handleKeyDown}
+                        onClick={() => {}}
+                        onMouseUp={formulaEditor.handleEditorInput}
+                        onPaste={formulaEditor.handlePaste}
+                        onOperatorSelect={formulaEditor.insertOperator}
+                        onRemoveField={formulaEditor.removeFieldAtIndex}
+                        actions={
+                            <Flex gap="1" alignItems="center">
+                                <Button
+                                    appearance="ghost"
+                                    size="small"
+                                    onClick={formulaEditor.undo}
+                                    disabled={!formulaEditor.canUndo}
+                                    aria-label="Undo"
+                                    icon={IconUndo}
+                                />
+                                <Button
+                                    appearance="ghost"
+                                    size="small"
+                                    onClick={formulaEditor.redo}
+                                    disabled={!formulaEditor.canRedo}
+                                    aria-label="Redo"
+                                    icon={IconRedo}
+                                />
+                            </Flex>
+                        }
                     />
                 </Flex>
-                <div className="dte-formula-modal-body">
-                    <Flex alignItems="stretch" gap={2} className="dte-formula-modal-columns">
-                        <FieldSidebar
-                            fillableOptions={fillableFieldsFromDocument}
-                            mergeTagOptions={allFields}
-                            highlightElementPath={highlightElementPath}
-                            onHover={setHighlightElementPath}
-                            onSelect={formulaEditor.insertField}
-                            selectedPaths={formulaEditor.selectedFieldPaths}
-                        />
-                        <FormulaWorkspace
-                            editorRef={formulaEditor.editorRef}
-                            isInvalid={isInvalid && formulaEditor.isDirty}
-                            validationError={validationError}
-                            format={format}
-                            onResultTypeChange={nextType =>
-                                setFormat(prev => ({ ...prev, resultType: nextType }))
-                            }
-                            advancedOpen={advancedOpen}
-                            onToggleAdvanced={() => setAdvancedOpen(prev => !prev)}
-                            setFormat={setFormat}
-                            onInput={formulaEditor.handleEditorInput}
-                            onKeyDown={formulaEditor.handleKeyDown}
-                            onClick={() => {}}
-                            onMouseUp={formulaEditor.handleEditorInput}
-                            onPaste={formulaEditor.handlePaste}
-                            onOperatorSelect={formulaEditor.insertOperator}
-                            onRemoveField={formulaEditor.removeFieldAtIndex}
-                            actions={
-                                <Flex gap="1" alignItems="center">
-                                    <Button
-                                        appearance="ghost"
-                                        size="small"
-                                        onClick={formulaEditor.undo}
-                                        disabled={!formulaEditor.canUndo}
-                                        aria-label="Undo"
-                                        icon={IconUndo}
-                                    />
-                                    <Button
-                                        appearance="ghost"
-                                        size="small"
-                                        onClick={formulaEditor.redo}
-                                        disabled={!formulaEditor.canRedo}
-                                        aria-label="Redo"
-                                        icon={IconRedo}
-                                    />
-                                </Flex>
-                            }
-                        />
-                    </Flex>
-                </div>
-                <Flex className="dte-formula-modal-footer" gap="2" justifyContent="flex-end">
-                    <Button onClick={onClose}>Cancel</Button>
-                    <Button onClick={handleSave} appearance="primary" disabled={!canSave}>
-                        Save
-                    </Button>
-                </Flex>
-            </Flex>
-        </Flex>
+            </Dialog.Content>
+            <Divider />
+            <Dialog.Footer sticky>
+                <Dialog.CancelButton onClick={handleClose}>Cancel</Dialog.CancelButton>
+                <Button onClick={handleSave} appearance="primary" disabled={!canSave}>
+                    Save
+                </Button>
+            </Dialog.Footer>
+        </Dialog>
     );
 };