@servicetitan/dte-pdf-editor 1.16.0 → 1.18.0

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

@@ -1,10 +1,13 @@
 import { Button, Flex, Text } from '@servicetitan/anvil2';
 import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
 import { FC } from 'react';
-import { PdfField, RecipientInfo } from '../../interface/types';
+import { PdfField, RecipientInfo, SchemaObject } from '../../interface/types';
 import { FieldConfigPanel } from './field-config-panel';
 
 interface FieldConfigPanelOverlayProps {
+    dataModel?: SchemaObject;
+    /** All fields on the document (e.g. for formula builder fillable section). */
+    documentFields?: PdfField[];
     selectedField: PdfField;
     recipients?: RecipientInfo[];
     onFieldConfigChange(updates: Partial<PdfField>): void;
@@ -13,6 +16,8 @@ interface FieldConfigPanelOverlayProps {
 }
 
 export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
+    dataModel,
+    documentFields = [],
     onDeleteField,
     onDeselectField,
     onFieldConfigChange,
@@ -39,6 +44,8 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
             </Flex>
             <div className="dte-field-config-panel-content">
                 <FieldConfigPanel
+                    dataModel={dataModel}
+                    documentFields={documentFields}
                     field={selectedField}
                     recipients={recipients}
                     onFieldConfigChange={onFieldConfigChange}

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

@@ -1,17 +1,29 @@
-import { Button, Combobox, Flex, Textarea, TextField } from '@servicetitan/anvil2';
+import { Button, Checkbox, Combobox, Flex, Textarea, TextField } from '@servicetitan/anvil2';
 import { FC, useMemo } from 'react';
 import { E_SIGN_FIELD_TYPE_OPTIONS } from '../../constants';
-import { ESignFieldType, FieldTypeEnum, PdfField, RecipientInfo } from '../../interface/types';
+import {
+    ESignFieldType,
+    FieldTypeEnum,
+    PdfField,
+    RecipientInfo,
+    SchemaObject,
+} from '../../interface/types';
 import { generateESignPath, generateFillablePath } from '../../utils';
+import { FormulaGenerator } from './formula-generator';
 
 interface FieldConfigPanelProps {
     field: PdfField;
+    dataModel?: SchemaObject;
+    /** All fields on the document (e.g. for formula builder fillable section). */
+    documentFields?: PdfField[];
     recipients?: RecipientInfo[];
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
 }
 
 export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
+    dataModel,
+    documentFields = [],
     field,
     onDeleteField,
     onFieldConfigChange,
@@ -63,8 +75,11 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
 
     return (
         <Flex direction="column" gap="4">
-            {(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (
+            {[FieldTypeEnum.fillable, FieldTypeEnum.eSign, FieldTypeEnum.calculated].includes(
+                field.type,
+            ) && (
                 <TextField
+                    required
                     label="Label"
                     value={field.label}
                     onChange={e =>
@@ -118,18 +133,31 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 </Combobox>
             )}
             <TextField label="Data Path" value={field.path} disabled />
-            {/* Todo need to uncomment when in MFE starts handle validations */}
-            {/* {field.type === FieldTypeEnum.fillable && (*/}
-            {/*    <Checkbox*/}
-            {/*        label="Required"*/}
-            {/*        checked={field.required}*/}
-            {/*        onChange={() =>*/}
-            {/*            onFieldConfigChange({*/}
-            {/*                required: !field.required,*/}
-            {/*            })*/}
-            {/*        }*/}
-            {/*    />*/}
-            {/* )}*/}
+            {field.type === FieldTypeEnum.fillable && field.subType !== 'checkbox' && (
+                <Checkbox
+                    label="Required"
+                    checked={field.required}
+                    onChange={() =>
+                        onFieldConfigChange({
+                            required: !field.required,
+                        })
+                    }
+                />
+            )}
+            {field.type === FieldTypeEnum.calculated && (
+                <FormulaGenerator
+                    dataModel={dataModel}
+                    documentFields={documentFields}
+                    formula={field.formula}
+                    formulaFormat={field.formulaFormat}
+                    onFormulaChange={(formula, formulaFormat) =>
+                        onFieldConfigChange({
+                            formula,
+                            formulaFormat,
+                        })
+                    }
+                />
+            )}
             <Textarea
                 label="Description"
                 value={field.description}

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

@@ -0,0 +1,91 @@
+import { Text } from '@servicetitan/anvil2';
+import { FC } from 'react';
+import { FieldTypeOption } from '../../interface/types';
+
+interface FieldSidebarProps {
+    fillableOptions: FieldTypeOption[];
+    mergeTagOptions: FieldTypeOption[];
+    highlightElementPath: string;
+    onHover: (path: string) => void;
+    onSelect: (path: string) => void;
+    selectedPaths: Set<string>;
+}
+
+export const FieldSidebar: FC<FieldSidebarProps> = ({
+    fillableOptions,
+    highlightElementPath,
+    mergeTagOptions,
+    onHover,
+    onSelect,
+    selectedPaths,
+}) => {
+    return (
+        <div className="dte-formula-sidebar">
+            <FieldOptionList
+                title="Fillable fields"
+                options={fillableOptions}
+                highlightElementPath={highlightElementPath}
+                selectedPaths={selectedPaths}
+                onHover={onHover}
+                onSelect={onSelect}
+            />
+            <FieldOptionList
+                title="Merge tags"
+                options={mergeTagOptions}
+                highlightElementPath={highlightElementPath}
+                selectedPaths={selectedPaths}
+                onHover={onHover}
+                onSelect={onSelect}
+            />
+        </div>
+    );
+};
+
+interface FieldOptionListProps {
+    highlightElementPath: string;
+    onHover: (path: string) => void;
+    onSelect: (path: string) => void;
+    options: FieldTypeOption[];
+    selectedPaths: Set<string>;
+    title: string;
+}
+
+const FieldOptionList: FC<FieldOptionListProps> = ({
+    highlightElementPath,
+    onHover,
+    onSelect,
+    options,
+    selectedPaths,
+    title,
+}) => {
+    if (options.length === 0) {
+        return null;
+    }
+
+    return (
+        <div>
+            <Text variant="headline" el="h6" size="small">
+                {title}
+            </Text>
+            <ul className="dte-formula-field-list" role="listbox" aria-label={title}>
+                {options.map(opt => (
+                    <li
+                        key={`${opt.path}-${opt.label}`}
+                        role="option"
+                        aria-selected={opt.path === highlightElementPath}
+                        className={`dte-formula-field-list-item ${opt.path === highlightElementPath ? '--highlight' : ''} ${selectedPaths.has(opt.path ?? '') ? '--selected' : ''}`}
+                        onMouseEnter={() => opt.path && onHover(opt.path)}
+                        onMouseDown={e => {
+                            e.preventDefault();
+                            if (opt.path) {
+                                onSelect(opt.path);
+                            }
+                        }}
+                    >
+                        {opt.label ?? opt.path}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

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

@@ -0,0 +1,122 @@
+import { Text } from '@servicetitan/anvil2';
+import { FC, Fragment, useMemo, useState } from 'react';
+import {
+    CalculatedFieldFormat,
+    FieldTypeEnum,
+    FieldTypeOption,
+    FormulaToken,
+    PdfField,
+    PdfFieldSubType,
+    SchemaObject,
+    StructuredFormula,
+} from '../../interface/types';
+import { extractGroupedFieldsFromDataModel } from '../../utils';
+import { FormulaModal } from './formula-modal';
+
+export interface FormulaGeneratorProps {
+    dataModel?: SchemaObject;
+    documentFields?: PdfField[];
+    formula?: StructuredFormula;
+    formulaFormat?: CalculatedFieldFormat;
+    onFormulaChange?(formula: StructuredFormula, format: CalculatedFieldFormat): void;
+}
+
+function getFillableFilteredBuySubTypeFields(
+    fields: PdfField[],
+    subTypes: PdfFieldSubType[],
+): FieldTypeOption[] {
+    return fields
+        .filter(f => f.type === FieldTypeEnum.fillable && subTypes.includes(f.subType!))
+        .map(f => ({
+            label: (f.label || f.path) ?? '',
+            type: FieldTypeEnum.fillable,
+            subType: f.subType,
+            path: f.path,
+        }));
+}
+
+export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
+    dataModel,
+    documentFields = [],
+    formula,
+    formulaFormat,
+    onFormulaChange,
+}) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const dataModelGroups = useMemo(
+        () =>
+            dataModel
+                ? extractGroupedFieldsFromDataModel(dataModel, {
+                      onlyUseInCalculatedFields: true,
+                  })
+                : [],
+        [dataModel],
+    );
+    const fillableFieldsFromDocument = useMemo(
+        () => getFillableFilteredBuySubTypeFields(documentFields, ['number']),
+        [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}
+                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>
+            {modalOpen && (
+                <FormulaModal
+                    initialFormula={formula}
+                    initialFormat={formulaFormat}
+                    dataModelGroups={dataModelGroups}
+                    fillableFieldsFromDocument={fillableFieldsFromDocument}
+                    onClose={() => setModalOpen(false)}
+                    onSave={handleSave}
+                />
+            )}
+        </Fragment>
+    );
+};

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

@@ -0,0 +1,229 @@
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+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 { useFormulaEditor } from '../../hooks';
+import {
+    CalculatedFieldFormat,
+    DataModelFieldGroup,
+    FieldTypeOption,
+    StructuredFormula,
+} from '../../interface/types';
+import {
+    parseExpression,
+    tokenizeExpression,
+    tokensToExpression,
+    validateFormula,
+} from '../../utils';
+import { FieldSidebar } from './field-sidebar';
+import { FormulaWorkspace } from './formula-workspace';
+
+const DEFAULT_CALCULATED_FIELD_FORMAT: CalculatedFieldFormat = {
+    resultType: 'number',
+    thousandsSeparator: false,
+    decimals: 2,
+    roundingMode: 'round',
+    decimalSeparatorEnabled: false,
+    decimalSeparator: '.',
+    prefixText: '',
+    postfixText: '',
+};
+
+function getAllFields(groups: DataModelFieldGroup[]): FieldTypeOption[] {
+    const list: FieldTypeOption[] = [];
+    for (const g of groups) {
+        for (const f of g.fields) {
+            list.push(f);
+        }
+    }
+    return list;
+}
+
+function getValidPathsSet(groups: DataModelFieldGroup[]): Set<string> {
+    const set = new Set<string>();
+    for (const f of getAllFields(groups)) {
+        if (f.path) {
+            set.add(f.path);
+        }
+    }
+    return set;
+}
+
+export interface FormulaModalProps {
+    initialFormula: StructuredFormula | undefined;
+    initialFormat?: CalculatedFieldFormat;
+    dataModelGroups: DataModelFieldGroup[];
+    fillableFieldsFromDocument?: FieldTypeOption[];
+    onClose(): void;
+    onSave(formula: StructuredFormula, format: CalculatedFieldFormat): void;
+}
+
+export const FormulaModal: FC<FormulaModalProps> = ({
+    dataModelGroups,
+    fillableFieldsFromDocument = [],
+    initialFormat,
+    initialFormula,
+    onClose,
+    onSave,
+}) => {
+    const validPaths = useMemo(() => {
+        const set = getValidPathsSet(dataModelGroups);
+        for (const f of fillableFieldsFromDocument) {
+            if (f.path) {
+                set.add(f.path);
+            }
+        }
+        return set;
+    }, [dataModelGroups, fillableFieldsFromDocument]);
+    const allFields = useMemo(() => getAllFields(dataModelGroups), [dataModelGroups]);
+    const pathToLabel = useMemo(() => {
+        const m = new Map<string, string>();
+        for (const f of fillableFieldsFromDocument) {
+            if (f.path) {
+                m.set(f.path, f.label ?? f.path);
+            }
+        }
+        for (const f of allFields) {
+            if (f.path) {
+                m.set(f.path, f.label ?? f.path);
+            }
+        }
+        return m;
+    }, [allFields, fillableFieldsFromDocument]);
+
+    const currentExpression = useMemo(() => tokensToExpression(initialFormula), [initialFormula]);
+
+    const [highlightElementPath, setHighlightElementPath] = useState('');
+    const [format, setFormat] = useState<CalculatedFieldFormat>(
+        () => initialFormat ?? DEFAULT_CALCULATED_FIELD_FORMAT,
+    );
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+
+    const formulaEditor = useFormulaEditor({
+        currentExpression,
+        opened: true,
+        pathToLabel,
+    });
+
+    const parsedTokens = useMemo(
+        () => parseExpression(formulaEditor.draftExpression, validPaths, pathToLabel),
+        [formulaEditor.draftExpression, validPaths, pathToLabel],
+    );
+
+    const formulaValidation = useMemo(
+        () => validateFormula({ tokens: parsedTokens }, validPaths),
+        [parsedTokens, validPaths],
+    );
+
+    const unknownFieldErrors = useMemo(() => {
+        const parts = tokenizeExpression(formulaEditor.draftExpression);
+        const errors: string[] = [];
+        for (const p of parts) {
+            if (p.type === 'field' && !validPaths.has(p.value)) {
+                errors.push(`Unknown field: "${p.value}"`);
+            }
+        }
+        return errors;
+    }, [formulaEditor.draftExpression, validPaths]);
+
+    const validationError = unknownFieldErrors[0] ?? formulaValidation.errors[0] ?? '';
+    const isInvalid = !formulaValidation.valid || unknownFieldErrors.length > 0;
+    const canSave =
+        formulaValidation.valid && unknownFieldErrors.length === 0 && parsedTokens.length > 0;
+
+    const handleSave = useCallback(() => {
+        if (!canSave) {
+            return;
+        }
+        onSave({ tokens: parsedTokens }, format);
+        onClose();
+    }, [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 ">
+                <Flex
+                    className="dte-formula-modal-header"
+                    alignItems="center"
+                    justifyContent="space-between"
+                >
+                    <Text variant="headline" el="h6" size="small">
+                        Formula Builder
+                    </Text>
+                    <Button
+                        appearance="ghost"
+                        size="small"
+                        onClick={onClose}
+                        aria-label="Close"
+                        icon={IconClose}
+                    />
+                </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>
+    );
+};

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

@@ -0,0 +1,116 @@
+import { Alert, Button, Flex, Text } from '@servicetitan/anvil2';
+import {
+    Dispatch,
+    FC,
+    KeyboardEvent,
+    MouseEvent,
+    ReactNode,
+    RefObject,
+    SetStateAction,
+    useCallback,
+} from 'react';
+import { CalculatedFieldFormat } from '../../interface/types';
+import { AdvancedSettings } from './advanced-settings';
+import { ResultTypeSelector } from './result-type-selector';
+
+interface FormulaWorkspaceProps {
+    actions: ReactNode;
+    advancedOpen: boolean;
+    editorRef: RefObject<HTMLDivElement | null>;
+    format: CalculatedFieldFormat;
+    isInvalid: boolean;
+    onClick: (e: MouseEvent<HTMLDivElement>) => void;
+    onInput: () => void;
+    onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+    onMouseUp: () => void;
+    onOperatorSelect: (op: string) => void;
+    onPaste: (text: string) => void;
+    onRemoveField: (fieldIndex: number) => void;
+    onResultTypeChange: (nextType: CalculatedFieldFormat['resultType']) => void;
+    onToggleAdvanced: () => void;
+    setFormat: Dispatch<SetStateAction<CalculatedFieldFormat>>;
+    validationError: string;
+}
+
+export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
+    actions,
+    advancedOpen,
+    editorRef,
+    format,
+    isInvalid,
+    onClick,
+    onInput,
+    onKeyDown,
+    onMouseUp,
+    onOperatorSelect,
+    onPaste,
+    onRemoveField,
+    onResultTypeChange,
+    onToggleAdvanced,
+    setFormat,
+    validationError,
+}) => {
+    const handleClick = useCallback(
+        (e: MouseEvent<HTMLDivElement>) => {
+            const target = e.target as HTMLElement;
+            const removeBtn = target.closest('[data-field-remove="true"]');
+            if (removeBtn) {
+                e.preventDefault();
+                e.stopPropagation();
+                const chip = removeBtn.closest('[data-field-index]') as HTMLElement | null;
+                const idx = chip?.dataset?.fieldIndex;
+                if (idx !== undefined) {
+                    onRemoveField(Number(idx));
+                }
+                return;
+            }
+            onClick(e);
+        },
+        [onClick, onRemoveField],
+    );
+
+    return (
+        <Flex direction="column" flex={1} gap={2}>
+            <Text variant="body" size="small">
+                Click a field on the left to add it. Use +, -, *, /, and parentheses to build
+                formulas.
+            </Text>
+            <Flex alignItems="center" justifyContent="space-between">
+                <Text variant="body" size="small">
+                    Formula
+                </Text>
+                {actions}
+            </Flex>
+            <div
+                ref={editorRef as RefObject<HTMLDivElement>}
+                className={`dte-formula-editor ${isInvalid ? 'dte-formula-editor-invalid' : ''}`}
+                role="textbox"
+                contentEditable
+                suppressContentEditableWarning
+                data-placeholder="e.g. order.total + order.tax"
+                onInput={onInput}
+                onKeyDown={onKeyDown}
+                onClick={handleClick}
+                onKeyUp={onInput}
+                onMouseUp={onMouseUp}
+                onPaste={e => {
+                    e.preventDefault();
+                    onPaste(e.clipboardData.getData('text/plain'));
+                }}
+            />
+            {isInvalid && validationError && <Alert status="danger" title={validationError} />}
+            <Flex gap={1}>
+                {['+', '-', '*', '/', '(', ')'].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">
+                {advancedOpen ? 'Hide advanced settings' : 'Show advanced settings'}
+            </Button>
+            {advancedOpen && <AdvancedSettings format={format} setFormat={setFormat} />}
+        </Flex>
+    );
+};