@servicetitan/dte-pdf-editor 1.20.0 → 1.22.0

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>
     );
 };

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 {
@@ -112,7 +132,11 @@ export interface SchemaSimpleNumber extends SchemaNodeProps {
     type: 'number';
 }
 
-export type SchemaSimple = SchemaSimpleString | SchemaSimpleNumber;
+export interface SchemaSimpleDate extends SchemaNodeProps {
+    type: 'date';
+}
+
+export type SchemaSimple = SchemaSimpleString | SchemaSimpleNumber | SchemaSimpleDate;
 
 export type DataModelValues = Record<string, any>;
 
@@ -140,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);
-}