@servicetitan/dte-pdf-editor 1.17.0 → 1.18.0

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

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

@@ -0,0 +1,34 @@
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+import { FC, Fragment } from 'react';
+import { CalculatedFieldFormat } from '../../interface/types';
+
+interface ResultTypeSelectorProps {
+    format: CalculatedFieldFormat;
+    onChange: (nextType: CalculatedFieldFormat['resultType']) => void;
+}
+
+const RESULT_TYPE_OPTIONS: { label: string; value: CalculatedFieldFormat['resultType'] }[] = [
+    { label: 'Number', value: 'number' },
+    { label: 'Currency', value: 'currency' },
+    { label: 'Percent', value: 'percent' },
+];
+
+export const ResultTypeSelector: FC<ResultTypeSelectorProps> = ({ format, onChange }) => (
+    <Fragment>
+        <Text variant="body" size="small">
+            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>
+            ))}
+        </Flex>
+    </Fragment>
+);

package/src/components/field-sidebar/calculated-field-type-list.tsx

@@ -0,0 +1,29 @@
+import { FC, Fragment } from 'react';
+import { CALCULATED_FIELD_TYPES } from '../../constants';
+import { FieldTypeOption } from '../../interface/types';
+import { FieldType } from './field-type';
+
+interface CalculatedFieldTypeListProps {
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+export const CalculatedFieldTypeList: FC<CalculatedFieldTypeListProps> = ({
+    onDragEnd,
+    onDragStart,
+}) => {
+    return (
+        <Fragment>
+            {CALCULATED_FIELD_TYPES.map(fieldOption => {
+                const key = `${fieldOption.type}-${fieldOption.path ?? fieldOption.label}`;
+                return (
+                    <FieldType
+                        key={key}
+                        label={fieldOption.label}
+                        onDragEnd={onDragEnd}
+                        onDragStart={() => onDragStart(fieldOption)}
+                    />
+                );
+            })}
+        </Fragment>
+    );
+};

package/src/components/field-sidebar/data-model-field-type-list.tsx

@@ -1,10 +1,9 @@
-import { Flex, Text } from '@servicetitan/anvil2';
-import { FC, Fragment, useMemo } from 'react';
+import { Flex, SearchField, Text } from '@servicetitan/anvil2';
+import { FC, Fragment, useMemo, useState } from 'react';
 import { DataModelFieldGroup, FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface DataModelFieldTypeListProps {
-    searchText?: string;
     dataModelGroups?: DataModelFieldGroup[];
     onDragStart(fieldOption: FieldTypeOption): void;
     onDragEnd(): void;
@@ -14,8 +13,9 @@ export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
     dataModelGroups = [],
     onDragEnd,
     onDragStart,
-    searchText,
 }) => {
+    const [searchText, setSearchText] = useState('');
+
     const searchedFieldGroups = useMemo(() => {
         if (!searchText) {
             return dataModelGroups;
@@ -33,6 +33,12 @@ export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
     }, [dataModelGroups, searchText]);
     return (
         <Fragment>
+            <SearchField
+                placeholder="Search"
+                size="small"
+                className="dte-field-sidebar-search"
+                onChange={e => setSearchText(e.target.value ?? '')}
+            />
             {searchedFieldGroups.map(group => (
                 <div key={group.groupName} className="dte-field-type-group">
                     <Flex alignItems="center" gap={1} className="dte-field-type-group-header">

package/src/components/field-sidebar/field-menu-group.tsx

@@ -0,0 +1,36 @@
+import { Flex, Icon, Text } from '@servicetitan/anvil2';
+import { FC } from 'react';
+import { MenuGroupModel } from '../../constants/menu-group';
+import { FieldTypeEnum } from '../../interface/types';
+
+interface FieldMenuGroupProps {
+    menuGroups: MenuGroupModel[];
+    activeFieldKey: FieldTypeEnum;
+    onClickMenu(key: FieldTypeEnum): void;
+}
+
+export const FieldMenuGroup: FC<FieldMenuGroupProps> = ({
+    activeFieldKey,
+    menuGroups,
+    onClickMenu,
+}) => {
+    return (
+        <Flex className="dte-field-sidebar-menu" shrink={0} direction="column" gap="3">
+            {menuGroups.map(({ key, label, svgIcon }) => (
+                <Flex
+                    key={key}
+                    alignItems="center"
+                    justifyContent="center"
+                    direction="column"
+                    className={`dte-field-sidebar-menu-item cursor-pointer ${key === activeFieldKey ? '--active' : ''}`}
+                    onClick={() => onClickMenu(key)}
+                >
+                    <Icon svg={svgIcon} size="large" className="dte-field-sidebar-menu-item-icon" />
+                    <Text variant="body" size="small" className="dte-field-sidebar-menu-item-text">
+                        {label}
+                    </Text>
+                </Flex>
+            ))}
+        </Flex>
+    );
+};