@servicetitan/dte-pdf-editor 1.21.0 → 1.23.0

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

@@ -1,4 +1,4 @@
-import { Alert, Button, Flex, Text } from '@servicetitan/anvil2';
+import { Alert, Button, Flex, LinkButton, Text } from '@servicetitan/anvil2';
 import {
     Dispatch,
     FC,
@@ -9,6 +9,7 @@ import {
     SetStateAction,
     useCallback,
 } from 'react';
+import { CALCULATED_OPERATIONS } from '../../constants';
 import { CalculatedFieldFormat } from '../../interface/types';
 import { AdvancedSettings } from './advanced-settings';
 import { ResultTypeSelector } from './result-type-selector';
@@ -70,7 +71,7 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
     );
 
     return (
-        <Flex direction="column" flex={1} gap={2}>
+        <Flex direction="column" flex={1} gap={2} style={{ padding: '12px' }}>
             <Text variant="body" size="small">
                 Click a field on the left to add it. Use +, -, *, /, and parentheses to build
                 formulas.
@@ -100,16 +101,16 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
             />
             {isInvalid && validationError && <Alert status="danger" title={validationError} />}
             <Flex gap={1}>
-                {['+', '-', '*', '/', '(', ')'].map(op => (
+                {CALCULATED_OPERATIONS.map(op => (
                     <Button key={op} onClick={() => onOperatorSelect(op)} size="small">
                         {op}
                     </Button>
                 ))}
             </Flex>
             <ResultTypeSelector format={format} onChange={onResultTypeChange} />
-            <Button appearance="ghost" onClick={onToggleAdvanced} size="small">
+            <LinkButton appearance="primary" onClick={onToggleAdvanced}>
                 {advancedOpen ? 'Hide advanced settings' : 'Show advanced settings'}
-            </Button>
+            </LinkButton>
             {advancedOpen && <AdvancedSettings format={format} setFormat={setFormat} />}
         </Flex>
     );

package/src/components/field-config-panel/result-type-selector.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from '@servicetitan/anvil2';
+import { Flex, SegmentedControl, Text } from '@servicetitan/anvil2';
 import { FC, Fragment } from 'react';
 import { CalculatedFieldFormat } from '../../interface/types';
 
@@ -19,16 +19,13 @@ export const ResultTypeSelector: FC<ResultTypeSelectorProps> = ({ format, onChan
             Result type
         </Text>
         <Flex gap={2}>
-            {RESULT_TYPE_OPTIONS.map(({ label, value }) => (
-                <Button
-                    key={value}
-                    appearance={format.resultType === value ? 'primary' : 'secondary'}
-                    size="small"
-                    onClick={() => onChange(value)}
-                >
-                    {label}
-                </Button>
-            ))}
+            <SegmentedControl size="medium" selected={format.resultType} onChange={onChange} fill>
+                {RESULT_TYPE_OPTIONS.map(opt => (
+                    <SegmentedControl.Segment key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </SegmentedControl.Segment>
+                ))}
+            </SegmentedControl>
         </Flex>
     </Fragment>
 );

package/src/components/pdf-view/pdf-view-field-container.tsx

@@ -1,9 +1,10 @@
 import { FC, PropsWithChildren, RefObject } from 'react';
-import { PdfField } from '../../interface/types';
-import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { evaluateDisplayCondition, getFieldBackgroundColor, getPagePosition } from '../../utils';
 
 interface PdfViewFieldContainer {
     pdfWrapperRef: RefObject<HTMLDivElement>;
+    data?: DataModelValues;
     error?: string;
     field: PdfField;
     recipientsColors: Record<string, string>;
@@ -11,11 +12,19 @@ interface PdfViewFieldContainer {
 
 export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>> = ({
     children,
+    data,
     error,
     field,
     pdfWrapperRef,
     recipientsColors,
 }) => {
+    const visible =
+        !field.displayCondition || evaluateDisplayCondition(field.displayCondition, data);
+
+    if (!visible) {
+        return null;
+    }
+
     const pagePos = getPagePosition(field.page, pdfWrapperRef);
     const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
     return (

package/src/components/pdf-view/pdf-view.tsx

@@ -90,6 +90,7 @@ export const PdfView: FC<PdfViewProps> = ({
                             <PdfViewFieldContainer
                                 key={field.id}
                                 field={field}
+                                data={previewMode === 'fillable' ? previewData : data}
                                 error={errors[field.path!] || ''}
                                 recipientsColors={recipientsColors}
                                 pdfWrapperRef={pdfWrapperRef}

package/src/constants/calculated.constants.ts

@@ -0,0 +1 @@
+export const CALCULATED_OPERATIONS = ['+', '-', '*', '/', '(', ')'];

package/src/constants/conditions.constants.ts

@@ -0,0 +1,26 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import type {
+    DisplayConditionGroup,
+    DisplayConditionSingle,
+    DisplayConditionState,
+} from '../interface/types';
+
+export const defaultCondition = (): DisplayConditionSingle => ({
+    dataPointKey: '',
+    id: uuidv4(),
+    operator: 'is_equal_to',
+    value: '',
+});
+
+export const defaultGroup = (): DisplayConditionGroup => ({
+    conditions: [defaultCondition()],
+    id: uuidv4(),
+});
+
+export const defaultState = (): DisplayConditionState => ({
+    behavior: 'show',
+    groups: [defaultGroup()],
+});
+
+export const MODAL_CONTENT_MAX_HEIGHT = '70vh';

package/src/constants/index.ts

@@ -1,2 +1,5 @@
+export * from './calculated.constants';
+export * from './conditions.constants';
 export * from './field.constants';
+export * from './menu-group';
 export * from './pdf-editor.constants';

package/src/interface/types.ts

@@ -16,6 +16,25 @@ export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio' | 'number
 
 export type PdfFieldSubType = FillableFieldType | ESignFieldType;
 
+export interface DisplayConditionState {
+    behavior: 'show' | 'hide';
+    groups: DisplayConditionGroup[];
+}
+
+export interface DisplayConditionGroup {
+    id: string;
+    logicalOperator?: 'and' | 'or';
+    conditions: DisplayConditionSingle[];
+}
+
+export interface DisplayConditionSingle {
+    id: string;
+    dataPointKey: string;
+    logicalOperator?: 'and' | 'or';
+    operator: string;
+    value: string;
+}
+
 export interface PdfField {
     id: string;
     type: FieldTypeEnum;
@@ -32,6 +51,7 @@ export interface PdfField {
     description?: string;
     formula?: StructuredFormula;
     formulaFormat?: CalculatedFieldFormat;
+    displayCondition?: DisplayConditionState | null;
 }
 
 export interface FieldTypeOption {
@@ -144,3 +164,42 @@ export interface DataChangePayload {
  *   it is displayed.
  */
 export type PreviewMode = 'fillable' | 'view';
+
+/**
+ * Display condition types for the Rules and Conditions modal and evaluation.
+ */
+
+/** Operators for string-type fields. */
+export const STRING_OPERATORS = [
+    { label: 'Contains', value: 'contains' },
+    { label: 'Does not contain', value: 'does_not_contain' },
+    { label: 'Is equal to', value: 'is_equal_to' },
+    { label: 'Is not equal to', value: 'is_not_equal_to' },
+    { label: 'Starts with', value: 'starts_with' },
+    { label: 'Ends with', value: 'ends_with' },
+    { label: 'Is empty', value: 'is_empty' },
+    { label: 'Is not empty', value: 'is_not_empty' },
+] as const;
+
+/** Operators for number-type fields. */
+export const NUMBER_OPERATORS = [
+    { label: '== (equal to)', value: 'num_eq' },
+    { label: '!= (not equal to)', value: 'num_neq' },
+    { label: '> (greater than)', value: 'num_gt' },
+    { label: '< (less than)', value: 'num_lt' },
+    { label: '>= (greater than or equal to)', value: 'num_gte' },
+    { label: '<= (less than or equal to)', value: 'num_lte' },
+] as const;
+
+export type ConditionOperator =
+    | (typeof STRING_OPERATORS)[number]['value']
+    | (typeof NUMBER_OPERATORS)[number]['value'];
+
+/** Operators that do not require a value (empty/is not empty) */
+export const VALUE_LESS_OPERATORS: ConditionOperator[] = ['is_empty', 'is_not_empty'];
+
+export interface DataPointOption {
+    fieldType: 'number' | 'string';
+    fullKey: string;
+    title: string;
+}

package/src/styles/formula-modal.css

@@ -15,19 +15,9 @@
     max-height: 85vh;
 }
 
-.dte-formula-modal-body {
-    padding: var(--spacing-2);
-    overflow: auto;
-}
-
-.dte-formula-modal-columns {
-    min-height: 280px;
-    max-height: 60vh;
-}
-
 /* Field sidebar (left) */
 .dte-formula-sidebar {
-    flex: 0 0 220px;
+    flex: 0 0 250px;
     border-right: 1px solid var(--border-color);
     padding-right: var(--spacing-2);
     gap: var(--spacing-2);
@@ -115,20 +105,6 @@
     opacity: 1;
 }
 
-.dte-formula-advanced-toggle {
-    background: none;
-    border: none;
-    padding: var(--spacing-0);
-    font-size: var(--typescale-2);
-    color: var(--menu-active-color, #0265dc);
-    cursor: pointer;
-    text-decoration: none;
-}
-
-.dte-formula-advanced-toggle:hover {
-    text-decoration: underline;
-}
-
 .dte-formula-advanced {
     margin-top: var(--spacing-2);
     padding-top: var(--spacing-2);
@@ -138,30 +114,10 @@
     gap: var(--spacing-2);
 }
 
-.dte-formula-advanced-row {
-    margin-bottom: var(--spacing-0);
-}
-
 .dte-formula-advanced-value {
     color: var(--color-neutral-300);
 }
 
-.dte-formula-advanced-range {
-    width: 100%;
-    margin: var(--spacing-0);
-}
-
-.dte-formula-advanced-checkbox {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-1);
-    cursor: pointer;
-}
-
-.dte-formula-advanced-checkbox input {
-    margin: var(--spacing-0);
-}
-
 .dte-formula-advanced-input {
     flex: 1;
     min-width: 0;
@@ -182,70 +138,6 @@
     border-top: 1px solid var(--border-color);
 }
 
-/* Token input */
-.dte-formula-token-input-wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: var(--spacing-2);
-}
-
-.dte-formula-token-input {
-    flex: 1;
-    padding: var(--spacing-1) var(--spacing-2);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    outline: none;
-    flex-wrap: wrap;
-    gap: 2px;
-    cursor: text;
-}
-
-.dte-formula-token-input:focus {
-    border-color: var(--border-color-active);
-    box-shadow: 0 0 0 1px var(--border-color-active);
-}
-
-.dte-formula-placeholder {
-    color: var(--color-neutral-200);
-}
-
-.dte-formula-token {
-    margin: var(--spacing-half);
-    user-select: none;
-    font-size: var(--typescale-2);
-}
-
-.dte-formula-token-field {
-    padding: 2px var(--spacing-half);
-    background: var(--menu-active-color, #0265dc);
-    border-radius: var(--spacing-half, 4px);
-    color: var(--white);
-    flex-shrink: 0;
-}
-
-.dte-formula-token-delete {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-0);
-    margin: var(--spacing-0);
-    margin-left: 2px;
-    border: none;
-    background: transparent;
-    color: var(--color-neutral-200);
-    cursor: pointer;
-    border-radius: 2px;
-}
-
-.dte-formula-token-delete:hover {
-    color: var(--danger, #dc3545);
-}
-
-.dte-formula-token-number {
-    font-variant-numeric: tabular-nums;
-}
-
 .dte-formula-caret {
     width: 0;
     height: 1em;
@@ -259,49 +151,3 @@
         opacity: 0;
     }
 }
-
-/* Autosuggest - left side, always visible */
-.dte-formula-autosuggest {
-    margin: var(--spacing-0);
-    padding: var(--spacing-0);
-    list-style: none;
-    width: 200px;
-    min-width: 200px;
-    max-height: 200px;
-    overflow-y: auto;
-    background: var(--white);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    flex-shrink: 0;
-}
-
-.dte-formula-autosuggest-item {
-    padding: var(--spacing-1) var(--spacing-2);
-    cursor: pointer;
-}
-
-.dte-formula-autosuggest-item:hover,
-.dte-formula-autosuggest-item.--highlight {
-    color: var(--menu-active-color);
-}
-
-.dte-formula-autosuggest-item.empty {
-    cursor: default;
-    color: var(--color-neutral-200);
-}
-
-.dte-formula-box {
-    padding: var(--spacing-1) var(--spacing-2);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background: var(--color-neutral-0);
-    cursor: pointer;
-    display: flex;
-    overflow-x: auto;
-    align-items: center;
-    gap: 2px;
-}
-
-.dte-formula-box:hover {
-    border-color: var(--border-color-hover);
-}

package/src/utils/conditions/evaluate.utils.ts

@@ -0,0 +1,134 @@
+import {
+    ConditionOperator,
+    DataModelValues,
+    DisplayConditionGroup,
+    DisplayConditionState,
+    VALUE_LESS_OPERATORS,
+} from '../../interface/types';
+
+function getValueAtPath(
+    data: DataModelValues | undefined,
+    path: string,
+): string | number | undefined {
+    if (!data || !path) {
+        return undefined;
+    }
+    const keys = path.split('.');
+    let value: unknown = data;
+    for (const key of keys) {
+        if (value === null || value === undefined || typeof value !== 'object') {
+            return undefined;
+        }
+        value = (value as Record<string, unknown>)[key];
+    }
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    if (typeof value === 'number' || typeof value === 'string') {
+        return value;
+    }
+    return String(value);
+}
+
+function evaluateSingleCondition(
+    dataPointKey: string,
+    operator: string,
+    value: string,
+    data: DataModelValues | undefined,
+): boolean {
+    const raw = getValueAtPath(data, dataPointKey);
+    const strVal = raw === undefined ? '' : String(raw);
+    const numVal = typeof raw === 'number' ? raw : Number(strVal);
+    const trimmedInput = value.trim();
+    const parsed = Number(trimmedInput);
+    const numInput = trimmedInput !== '' && Number.isFinite(parsed) ? parsed : 0;
+
+    switch (operator as ConditionOperator) {
+        case 'is_equal_to':
+            return strVal === trimmedInput;
+        case 'is_not_equal_to':
+            return strVal !== trimmedInput;
+        case 'contains':
+            return strVal.includes(trimmedInput);
+        case 'does_not_contain':
+            return !strVal.includes(trimmedInput);
+        case 'starts_with':
+            return strVal.startsWith(trimmedInput);
+        case 'ends_with':
+            return strVal.endsWith(trimmedInput);
+        case 'is_empty':
+            return strVal === '' || strVal.length === 0;
+        case 'is_not_empty':
+            return strVal !== '' && strVal.length > 0;
+        case 'num_eq':
+            return numVal === numInput;
+        case 'num_neq':
+            return numVal !== numInput;
+        case 'num_gt':
+            return numVal > numInput;
+        case 'num_lt':
+            return numVal < numInput;
+        case 'num_gte':
+            return numVal >= numInput;
+        case 'num_lte':
+            return numVal <= numInput;
+        default:
+            return strVal === trimmedInput;
+    }
+}
+
+function evaluateGroup(group: DisplayConditionGroup, data: DataModelValues | undefined): boolean {
+    const valid = group.conditions.filter(
+        c =>
+            c.dataPointKey &&
+            (VALUE_LESS_OPERATORS.includes(c.operator as ConditionOperator) ||
+                c.value.trim() !== ''),
+    );
+    if (valid.length === 0) {
+        return false;
+    }
+    let result = evaluateSingleCondition(
+        valid[0].dataPointKey,
+        valid[0].operator,
+        valid[0].value,
+        data,
+    );
+    for (let i = 1; i < valid.length; i++) {
+        const op = valid[i].logicalOperator === 'or' ? 'or' : 'and';
+        const next = evaluateSingleCondition(
+            valid[i].dataPointKey,
+            valid[i].operator,
+            valid[i].value,
+            data,
+        );
+        result = op === 'or' ? result || next : result && next;
+    }
+    return result;
+}
+
+/**
+ * Evaluate display condition state against data. Returns true if the field should be visible.
+ */
+export function evaluateDisplayCondition(
+    state: DisplayConditionState,
+    data: DataModelValues | undefined,
+): boolean {
+    const validGroups = state.groups.filter(g =>
+        g.conditions.some(
+            c =>
+                c.dataPointKey &&
+                (VALUE_LESS_OPERATORS.includes(c.operator as ConditionOperator) ||
+                    c.value.trim() !== ''),
+        ),
+    );
+    if (validGroups.length === 0) {
+        return true;
+    }
+    let result = evaluateGroup(validGroups[0], data);
+    for (let i = 1; i < validGroups.length; i++) {
+        const op = validGroups[i].logicalOperator === 'or' ? 'or' : 'and';
+        const next = evaluateGroup(validGroups[i], data);
+        result = op === 'or' ? result || next : result && next;
+    }
+    return state.behavior === 'hide' ? !result : result;
+}

package/src/utils/conditions/index.ts

@@ -0,0 +1,2 @@
+export * from './evaluate.utils';
+export * from './schema-data-points.utils';

package/src/utils/conditions/schema-data-points.utils.ts

@@ -0,0 +1,93 @@
+import {
+    DataPointOption,
+    FieldTypeEnum,
+    type PdfField,
+    type SchemaNode,
+    type SchemaObject,
+} from '../../interface/types';
+
+function isUseInConditionals(
+    node:
+        | { options?: { useInConditionals?: boolean; useInCalculatedFields?: boolean } }
+        | undefined,
+): boolean {
+    return (
+        node?.options?.useInConditionals === true || node?.options?.useInCalculatedFields === true
+    );
+}
+
+function isValueNode(
+    node: SchemaNode,
+): node is { type: 'string' | 'number'; title?: string; options?: object } {
+    return node?.type === 'string' || node?.type === 'number';
+}
+
+function walkSchema(
+    schema: SchemaObject | undefined,
+    prefix: string,
+    parentTitles: string[],
+): DataPointOption[] {
+    if (!schema?.properties) {
+        return [];
+    }
+    const result: DataPointOption[] = [];
+    for (const [key, node] of Object.entries(schema.properties)) {
+        const fullKey = prefix ? `${prefix}.${key}` : key;
+        const title = (node as { title?: string }).title ?? key;
+        const fullTitle = [...parentTitles, title].join(' - ');
+
+        if (node?.type === 'object') {
+            result.push(...walkSchema(node as SchemaObject, fullKey, [...parentTitles, title]));
+        } else if (isValueNode(node) && isUseInConditionals(node)) {
+            result.push({
+                fieldType: node.type === 'number' ? 'number' : 'string',
+                fullKey,
+                title: fullTitle || fullKey,
+            });
+        }
+    }
+    return result;
+}
+
+export function getSchemaDataPointOptions(schema: SchemaObject | undefined): DataPointOption[] {
+    const options = walkSchema(schema, '', []);
+    return options.sort((a, b) => a.title.localeCompare(b.title));
+}
+
+/**
+ * Data point options from document fields: fillable only (no calculated fields).
+ * Uses field.path as fullKey so condition evaluation can read from the same data object.
+ */
+export function getDocumentFieldsDataPointOptions(
+    fields: PdfField[] | undefined,
+): DataPointOption[] {
+    if (!fields?.length) {
+        return [];
+    }
+    const result: DataPointOption[] = [];
+    for (const f of fields) {
+        if (!f.path || f.type !== FieldTypeEnum.fillable) {
+            continue;
+        }
+        const fieldType = f.subType === 'number' ? 'number' : 'string';
+        result.push({
+            fieldType,
+            fullKey: f.path,
+            title: f.label || f.path,
+        });
+    }
+    return result.sort((a, b) => a.title.localeCompare(b.title));
+}
+
+/**
+ * Combined data point options: schema (data model) + fillable fields.
+ */
+export function getDataPointOptions(
+    schema: SchemaObject | undefined,
+    documentFields: PdfField[] | undefined,
+): DataPointOption[] {
+    const schemaOptions = getSchemaDataPointOptions(schema);
+    const documentOptions = getDocumentFieldsDataPointOptions(documentFields);
+    const combined = [...schemaOptions, ...documentOptions];
+    return combined.sort((a, b) => a.title.localeCompare(b.title));
+}

package/src/utils/data-model/extract-fields.utils.ts

@@ -23,6 +23,7 @@ function useInCalculatedFields(node: SchemaNode): boolean {
 export interface ExtractGroupedFieldsOptions {
     /** When true, only include fields with SchemaFieldBaseOptions.useInCalculatedFields === true */
     onlyUseInCalculatedFields?: boolean;
+    onlyUseInConditionals?: boolean;
 }
 
 /**

package/src/utils/formula/render-formula.utils.ts

@@ -1,25 +1,6 @@
-import { FormulaToken } from '../../interface/types';
 import { escapeHtml } from './dom.utils';
 import { tokenizeExpression } from './expression.utils';
 
-/**
- * Renders formula tokens to HTML for the read-only preview (e.g. formula box).
- * Uses the same token classes as the modal (dte-formula-token, dte-formula-token-field, etc.).
- */
-export function renderFormulaPreviewHtml(tokens: FormulaToken[]): string {
-    if (!tokens?.length) {
-        return '';
-    }
-    return tokens
-        .map(token => {
-            const type = token.type;
-            const text = type === 'field' ? token.label : (token as { value: string }).value;
-            const escaped = escapeHtml(text).replace(/ /g, ' ');
-            return `<span class="dte-formula-token dte-formula-token-${type}">${escaped}</span>`;
-        })
-        .join('');
-}
-
 export function renderFormulaHtml(expression: string, labelMap: Map<string, string>): string {
     if (!expression.trim()) {
         return '';