@servicetitan/dte-pdf-editor 1.17.0 → 1.18.0

package/dist/utils/formula/render-formula.utils.js

@@ -0,0 +1,39 @@
+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) {
+    if (!(tokens === null || tokens === void 0 ? void 0 : tokens.length)) {
+        return '';
+    }
+    return tokens
+        .map(token => {
+        const type = token.type;
+        const text = type === 'field' ? token.label : token.value;
+        const escaped = escapeHtml(text).replace(/ /g, ' ');
+        return `<span class="dte-formula-token dte-formula-token-${type}">${escaped}</span>`;
+    })
+        .join('');
+}
+export function renderFormulaHtml(expression, labelMap) {
+    if (!expression.trim()) {
+        return '';
+    }
+    const parts = tokenizeExpression(expression);
+    let fieldIndex = 0;
+    return parts
+        .map(part => {
+        var _a;
+        if (part.type === 'field') {
+            const displayValue = (_a = labelMap.get(part.value)) !== null && _a !== void 0 ? _a : part.value;
+            const currentIndex = fieldIndex;
+            fieldIndex += 1;
+            return `<span class="dte-formula-chip" contenteditable="false" data-field="${escapeHtml(part.value)}" data-field-index="${currentIndex}" draggable="true"><span class="dte-formula-chip-label">${escapeHtml(displayValue)}</span><span class="dte-formula-chip-remove" data-field-remove="true" role="button" aria-label="Remove field">&times;</span></span>`;
+        }
+        return `<span>${escapeHtml(part.value).replace(/ /g, '&nbsp;')}</span>`;
+    })
+        .join('');
+}
+//# sourceMappingURL=render-formula.utils.js.map

package/dist/utils/formula/render-formula.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-formula.utils.js","sourceRoot":"","sources":["../../../src/utils/formula/render-formula.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD;;;GAGG;AACH,MAAM,UAAU,wBAAwB,CAAC,MAAsB;IAC3D,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAA,EAAE,CAAC;QAClB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,OAAO,MAAM;SACR,GAAG,CAAC,KAAK,CAAC,EAAE;QACT,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAE,KAA2B,CAAC,KAAK,CAAC;QACjF,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACzD,OAAO,oDAAoD,IAAI,KAAK,OAAO,SAAS,CAAC;IACzF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,UAAkB,EAAE,QAA6B;IAC/E,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC;QACrB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC7C,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,OAAO,KAAK;SACP,GAAG,CAAC,IAAI,CAAC,EAAE;;QACR,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACxB,MAAM,YAAY,GAAG,MAAA,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,KAAK,CAAC;YAC5D,MAAM,YAAY,GAAG,UAAU,CAAC;YAChC,UAAU,IAAI,CAAC,CAAC;YAChB,OAAO,sEAAsE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,uBAAuB,YAAY,2DAA2D,UAAU,CAAC,YAAY,CAAC,qIAAqI,CAAC;QACnW,CAAC;QACD,OAAO,SAAS,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC5E,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AAClB,CAAC"}

package/dist/utils/formula/serialize-formula.utils.d.ts

@@ -0,0 +1,14 @@
+import { StructuredFormula } from '../../interface/types';
+export interface SerializedFormula {
+    v: number;
+    tokens: StructuredFormula['tokens'];
+}
+/**
+ * Serialize structured formula for persistence (e.g. to JSON in store).
+ */
+export declare function serializeFormula(formula: StructuredFormula): string;
+/**
+ * Deserialize formula from persisted string. Returns null if invalid.
+ */
+export declare function deserializeFormula(json: string): StructuredFormula | null;
+//# sourceMappingURL=serialize-formula.utils.d.ts.map

package/dist/utils/formula/serialize-formula.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize-formula.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/formula/serialize-formula.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI1D,MAAM,WAAW,iBAAiB;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAMnE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,GAAG,IAAI,CAgBzE"}

package/dist/utils/formula/serialize-formula.utils.js

@@ -0,0 +1,33 @@
+const SERIALIZATION_VERSION = 1;
+/**
+ * Serialize structured formula for persistence (e.g. to JSON in store).
+ */
+export function serializeFormula(formula) {
+    const payload = {
+        v: SERIALIZATION_VERSION,
+        tokens: formula.tokens,
+    };
+    return JSON.stringify(payload);
+}
+/**
+ * Deserialize formula from persisted string. Returns null if invalid.
+ */
+export function deserializeFormula(json) {
+    if (!json || typeof json !== 'string') {
+        return null;
+    }
+    try {
+        const payload = JSON.parse(json);
+        if ((payload === null || payload === void 0 ? void 0 : payload.v) !== SERIALIZATION_VERSION || !Array.isArray(payload.tokens)) {
+            return null;
+        }
+        if (payload.tokens.length === 0) {
+            return { tokens: [] };
+        }
+        return { tokens: payload.tokens };
+    }
+    catch (_a) {
+        return null;
+    }
+}
+//# sourceMappingURL=serialize-formula.utils.js.map

package/dist/utils/formula/serialize-formula.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize-formula.utils.js","sourceRoot":"","sources":["../../../src/utils/formula/serialize-formula.utils.ts"],"names":[],"mappings":"AAEA,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAOhC;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAA0B;IACvD,MAAM,OAAO,GAAsB;QAC/B,CAAC,EAAE,qBAAqB;QACxB,MAAM,EAAE,OAAO,CAAC,MAAM;KACzB,CAAC;IACF,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AACnC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAY;IAC3C,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,IAAI,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAsB,CAAC;QACtD,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,CAAC,MAAK,qBAAqB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACzE,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QAC1B,CAAC;QACD,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAAC,WAAM,CAAC;QACL,OAAO,IAAI,CAAC;IAChB,CAAC;AACL,CAAC"}

package/dist/utils/formula/validate-formula.utils.d.ts

@@ -0,0 +1,11 @@
+import { StructuredFormula } from '../../interface/types';
+export interface FormulaValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+/**
+ * Validates a structured formula.
+ * Rules: not empty, valid operator placement, balanced parentheses, supported operators only, all field paths exist.
+ */
+export declare function validateFormula(formula: StructuredFormula | undefined | null, validPaths: Set<string>): FormulaValidationResult;
+//# sourceMappingURL=validate-formula.utils.d.ts.map

package/dist/utils/formula/validate-formula.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-formula.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/formula/validate-formula.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAGH,iBAAiB,EACpB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAYD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,OAAO,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI,EAC7C,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,GACxB,uBAAuB,CAiEzB"}

package/dist/utils/formula/validate-formula.utils.js

@@ -0,0 +1,79 @@
+import { FORMULA_OPERATORS, } from '../../interface/types';
+const OPERATOR_SET = new Set(FORMULA_OPERATORS);
+function isOperatorToken(t) {
+    return t.type === 'operator';
+}
+function isOperandToken(t) {
+    return t.type === 'number' || t.type === 'field';
+}
+/**
+ * Validates a structured formula.
+ * Rules: not empty, valid operator placement, balanced parentheses, supported operators only, all field paths exist.
+ */
+export function validateFormula(formula, validPaths) {
+    var _a;
+    const errors = [];
+    if (!((_a = formula === null || formula === void 0 ? void 0 : formula.tokens) === null || _a === void 0 ? void 0 : _a.length)) {
+        return { valid: false, errors: ['Formula cannot be empty'] };
+    }
+    const tokens = formula.tokens;
+    let parenBalance = 0;
+    for (let i = 0; i < tokens.length; i++) {
+        const t = tokens[i];
+        const prev = tokens[i - 1];
+        const next = tokens[i + 1];
+        if (t.type === 'lparen') {
+            parenBalance++;
+            if (prev != null && isOperandToken(prev)) {
+                errors.push('Operator required before opening parenthesis');
+            }
+        }
+        else if (t.type === 'rparen') {
+            parenBalance--;
+            if (parenBalance < 0) {
+                errors.push('Unbalanced parentheses');
+            }
+            if (prev != null && isOperatorToken(prev)) {
+                errors.push('Operand required before closing parenthesis');
+            }
+        }
+        else if (t.type === 'operator') {
+            if (prev == null || next == null) {
+                errors.push('Operator must be between two operands or expressions');
+            }
+            else if (prev.type === 'operator' || prev.type === 'lparen') {
+                errors.push('Operand required before operator');
+            }
+            else if (next.type === 'operator' || next.type === 'rparen') {
+                errors.push('Operand required after operator');
+            }
+        }
+        else if (t.type === 'field') {
+            if (!validPaths.has(t.path)) {
+                errors.push(`Unknown field: "${t.label}" (path: ${t.path})`);
+            }
+        }
+        else if (t.type === 'number') {
+            const num = parseFloat(t.value);
+            if (Number.isNaN(num)) {
+                errors.push(`Invalid number: "${t.value}"`);
+            }
+        }
+    }
+    if (parenBalance !== 0) {
+        errors.push('Unbalanced parentheses');
+    }
+    const first = tokens[0];
+    const last = tokens[tokens.length - 1];
+    if (first && (first.type === 'operator' || first.type === 'rparen')) {
+        errors.push('Formula must start with an operand or opening parenthesis');
+    }
+    if (last && (last.type === 'operator' || last.type === 'lparen')) {
+        errors.push('Formula must end with an operand or closing parenthesis');
+    }
+    return {
+        valid: errors.length === 0,
+        errors,
+    };
+}
+//# sourceMappingURL=validate-formula.utils.js.map

package/dist/utils/formula/validate-formula.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-formula.utils.js","sourceRoot":"","sources":["../../../src/utils/formula/validate-formula.utils.ts"],"names":[],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './field';
 export * from './pdf';
 export * from './data-model';
+export * from './formula';
 export * from './path';
 export * from './recipients';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/dist/utils/index.js

@@ -1,6 +1,7 @@
 export * from './field';
 export * from './pdf';
 export * from './data-model';
+export * from './formula';
 export * from './path';
 export * from './recipients';
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
@@ -21,7 +21,7 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "@servicetitan/anvil2": "^1.46.9",
+    "@servicetitan/anvil2": "^2.0.2",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   }

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

@@ -0,0 +1,113 @@
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+import { Dispatch, FC, SetStateAction } from 'react';
+import { CalculatedFieldFormat } from '../../interface/types';
+
+interface AdvancedSettingsProps {
+    format: CalculatedFieldFormat;
+    setFormat: Dispatch<SetStateAction<CalculatedFieldFormat>>;
+}
+
+const ROUNDING_OPTIONS: { label: string; value: CalculatedFieldFormat['roundingMode'] }[] = [
+    { label: 'Round', value: 'round' },
+    { label: 'Floor', value: 'floor' },
+    { label: 'Ceil', value: 'ceil' },
+];
+
+export const AdvancedSettings: FC<AdvancedSettingsProps> = ({ format, setFormat }) => (
+    <div className="dte-formula-advanced">
+        <Text variant="body" size="small">
+            Rounding mode
+        </Text>
+        <Flex gap={1}>
+            {ROUNDING_OPTIONS.map(({ label, value }) => (
+                <Button
+                    key={value}
+                    appearance={format.roundingMode === value ? 'primary' : 'secondary'}
+                    size="small"
+                    onClick={() => setFormat(prev => ({ ...prev, roundingMode: value }))}
+                >
+                    {label}
+                </Button>
+            ))}
+        </Flex>
+        <Flex
+            alignItems="center"
+            justifyContent="space-between"
+            className="dte-formula-advanced-row"
+        >
+            <Text variant="body" size="small">
+                Decimal places
+            </Text>
+            <Text variant="body" size="small" className="dte-formula-advanced-value">
+                {format.decimals}
+            </Text>
+        </Flex>
+        <input
+            type="range"
+            className="dte-formula-advanced-range"
+            min={0}
+            max={10}
+            value={format.decimals}
+            onChange={e =>
+                setFormat(prev => ({
+                    ...prev,
+                    decimals: Number(e.target.value),
+                }))
+            }
+        />
+        <label className="dte-formula-advanced-checkbox">
+            <input
+                type="checkbox"
+                checked={format.thousandsSeparator}
+                onChange={e =>
+                    setFormat(prev => ({
+                        ...prev,
+                        thousandsSeparator: e.target.checked,
+                        decimalSeparatorEnabled: e.target.checked,
+                        decimalSeparator: e.target.checked ? prev.decimalSeparator : '.',
+                    }))
+                }
+            />
+            <Text variant="body" size="small">
+                Thousands separator
+            </Text>
+        </label>
+        {format.thousandsSeparator && (
+            <Flex gap={2}>
+                {(['.', ','] as const).map(sep => (
+                    <Button
+                        key={sep}
+                        appearance={format.decimalSeparator === sep ? 'primary' : 'secondary'}
+                        size="small"
+                        onClick={() => setFormat(prev => ({ ...prev, decimalSeparator: sep }))}
+                    >
+                        {sep}
+                    </Button>
+                ))}
+            </Flex>
+        )}
+        <Text variant="body" size="small">
+            Result affixes
+        </Text>
+        <Flex gap="2" alignItems="center">
+            <Text variant="body" size="small">
+                Prefix
+            </Text>
+            <input
+                type="text"
+                className="dte-formula-advanced-input"
+                value={format.prefixText}
+                onChange={e => setFormat(prev => ({ ...prev, prefixText: e.target.value }))}
+            />
+            <Text variant="body" size="small">
+                Postfix
+            </Text>
+            <input
+                type="text"
+                className="dte-formula-advanced-input"
+                value={format.postfixText}
+                onChange={e => setFormat(prev => ({ ...prev, postfixText: e.target.value }))}
+            />
+        </Flex>
+    </div>
+);

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