@servicetitan/dte-pdf-editor 1.41.0 → 1.43.0

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

@@ -1,26 +1,41 @@
 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, SchemaObject } from '../../interface/types';
+import {
+    FormFieldsByFormIdI,
+    FormInfo,
+    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[];
+    formFieldsByFormId: FormFieldsByFormIdI;
+    forms: FormInfo[];
+    formulaLoadingFormId?: number | null;
     selectedField: PdfField;
     recipients?: RecipientInfo[];
+    hideConditionalLogic?: boolean;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     onDeleteField(): void;
     onDeselectField?(): void;
+    onRequestFormFields(formId: number): void;
 }
 
 export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
     dataModel,
     documentFields = [],
+    formFieldsByFormId,
+    forms,
+    formulaLoadingFormId,
+    hideConditionalLogic,
     onDeleteField,
     onDeselectField,
     onFieldConfigChange,
+    onRequestFormFields,
     recipients,
     selectedField,
 }) => {
@@ -47,9 +62,14 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
                     dataModel={dataModel}
                     documentFields={documentFields}
                     field={selectedField}
+                    formFieldsByFormId={formFieldsByFormId}
+                    forms={forms}
+                    formulaLoadingFormId={formulaLoadingFormId}
                     recipients={recipients}
                     onFieldConfigChange={onFieldConfigChange}
                     onDeleteField={onDeleteField}
+                    hideConditionalLogic={hideConditionalLogic}
+                    onRequestFormFields={onRequestFormFields}
                 />
             </div>
         </Flex>

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

@@ -4,6 +4,8 @@ import { E_SIGN_FIELD_TYPE_OPTIONS } from '../../constants';
 import {
     ESignFieldType,
     FieldTypeEnum,
+    FormFieldsByFormIdI,
+    FormInfo,
     PdfField,
     RecipientInfo,
     SchemaObject,
@@ -16,19 +18,28 @@ import { TableConfigs } from './table-configs';
 interface FieldConfigPanelProps {
     field: PdfField;
     dataModel?: SchemaObject;
-    /** All fields on the document (e.g., for a formula builder fillable section). */
     documentFields?: PdfField[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    forms: FormInfo[];
+    formulaLoadingFormId?: number | null;
     recipients?: RecipientInfo[];
+    hideConditionalLogic?: boolean;
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
+    onRequestFormFields(formId: number): void;
 }
 
 export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
     dataModel,
     documentFields = [],
     field,
+    formFieldsByFormId,
+    forms,
+    formulaLoadingFormId,
+    hideConditionalLogic = false,
     onDeleteField,
     onFieldConfigChange,
+    onRequestFormFields,
     recipients = [],
 }) => {
     const recipientOptions = useMemo(
@@ -77,9 +88,12 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
 
     return (
         <Flex direction="column" gap="4">
-            {[FieldTypeEnum.fillable, FieldTypeEnum.eSign, FieldTypeEnum.calculated].includes(
-                field.type,
-            ) && (
+            {[
+                FieldTypeEnum.fillable,
+                FieldTypeEnum.eSign,
+                FieldTypeEnum.calculated,
+                FieldTypeEnum.forms,
+            ].includes(field.type) && (
                 <TextField
                     required={field.type === FieldTypeEnum.fillable}
                     label="Label"
@@ -152,14 +166,18 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 <FormulaGenerator
                     dataModel={dataModel}
                     documentFields={documentFields}
+                    formFieldsByFormId={formFieldsByFormId}
+                    forms={forms}
                     formula={field.formula}
                     formulaFormat={field.formulaFormat}
+                    formulaLoadingFormId={formulaLoadingFormId}
                     onFormulaChange={(formula, formulaFormat) =>
                         onFieldConfigChange({
                             formula,
                             formulaFormat,
                         })
                     }
+                    onRequestFormFields={onRequestFormFields}
                 />
             )}
 
@@ -167,12 +185,18 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 <TableConfigs field={field} onFieldConfigChange={onFieldConfigChange} />
             )}
 
-            <DisplayCondition
-                onSave={onFieldConfigChange}
-                documentFields={documentFields}
-                schema={dataModel}
-                initialState={field.displayCondition ?? undefined}
-            />
+            {!hideConditionalLogic && (
+                <DisplayCondition
+                    onSave={onFieldConfigChange}
+                    documentFields={documentFields}
+                    formFieldsByFormId={formFieldsByFormId}
+                    formFieldsLoadingFormId={formulaLoadingFormId}
+                    forms={forms}
+                    initialState={field.displayCondition ?? undefined}
+                    onRequestFormFields={onRequestFormFields}
+                    schema={dataModel}
+                />
+            )}
 
             <Textarea
                 label="Description"

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

@@ -1,6 +1,9 @@
-import { Text } from '@servicetitan/anvil2';
-import { FC } from 'react';
-import { FieldTypeOption } from '../../interface/types';
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+import IconArrowBack from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_left.svg';
+import IconArrowForward from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_right.svg';
+import { FC, Fragment, useMemo, useState } from 'react';
+import { FieldTypeOption, FormFieldsByFormIdI, FormInfo } from '../../interface/types';
+import { formFieldInfosToCalculationOptions, parseFormFieldKey } from '../../utils';
 
 interface FieldSidebarProps {
     fillableOptions: FieldTypeOption[];
@@ -9,34 +12,157 @@ interface FieldSidebarProps {
     onHover: (path: string) => void;
     onSelect: (path: string) => void;
     selectedPaths: Set<string>;
+    forms: FormInfo[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    formulaLoadingFormId?: number | null;
+    onRequestFormFields(formId: number): void;
 }
 
 export const FieldSidebar: FC<FieldSidebarProps> = ({
     fillableOptions,
+    formFieldsByFormId = {},
+    forms,
+    formulaLoadingFormId = null,
     highlightElementPath,
     mergeTagOptions,
     onHover,
+    onRequestFormFields,
     onSelect,
     selectedPaths,
 }) => {
+    const [selectedFormId, setSelectedFormId] = useState<number | null>(null);
+
+    const onFormClick = (formId: number) => {
+        setSelectedFormId(formId);
+        const loaded = formFieldsByFormId[formId];
+        if (!loaded?.length) {
+            onRequestFormFields(formId);
+        }
+    };
+
+    const isFormFieldsLoading = selectedFormId != null && formulaLoadingFormId === selectedFormId;
+
+    const selectedForm = useMemo(
+        () => (forms ?? []).find(f => f.id === selectedFormId) ?? null,
+        [selectedFormId, forms],
+    );
+
+    const calcOptions = useMemo(() => {
+        return selectedFormId === null
+            ? []
+            : formFieldInfosToCalculationOptions(
+                  selectedFormId,
+                  formFieldsByFormId[selectedFormId] ?? [],
+                  selectedForm?.name ?? '',
+              );
+    }, [selectedFormId, formFieldsByFormId, selectedForm?.name]);
+
+    const formIdsReferencedInFormula = useMemo(() => {
+        const ids = new Set<number>();
+        for (const path of selectedPaths) {
+            const parsed = parseFormFieldKey(path);
+            if (parsed) {
+                ids.add(parsed.formId);
+            }
+        }
+        return ids;
+    }, [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 className="dte-formula-sidebar-slide-outer">
+                <div
+                    className={`dte-formula-sidebar-slide-track${selectedFormId ? ' --detail' : ''}`}
+                >
+                    <div className="dte-formula-sidebar-slide-panel">
+                        {forms.length > 0 && (
+                            <div className="dte-formula-sidebar-forms-heading">
+                                <Text variant="headline" el="h6" size="small">
+                                    Forms
+                                </Text>
+                                <ul
+                                    className="dte-formula-field-list"
+                                    role="listbox"
+                                    aria-label="Forms"
+                                >
+                                    {forms.map(form => (
+                                        <li
+                                            key={form.id}
+                                            role="option"
+                                            className={`dte-formula-field-list-item${formIdsReferencedInFormula.has(form.id) ? ' --selected' : ''}`}
+                                            onMouseDown={e => {
+                                                e.preventDefault();
+                                                onFormClick(form.id);
+                                            }}
+                                        >
+                                            <Flex
+                                                justifyContent="space-between"
+                                                alignItems="center"
+                                            >
+                                                <span
+                                                    className="dte-text-ellipsis"
+                                                    title={form.name}
+                                                >
+                                                    {form.name}
+                                                </span>
+                                                <IconArrowForward />
+                                            </Flex>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
+                        <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>
+                    <div className="dte-formula-sidebar-slide-panel --form-fields">
+                        {selectedFormId ? (
+                            <Fragment>
+                                <Button
+                                    style={{ width: '100%' }}
+                                    appearance="ghost"
+                                    size="small"
+                                    icon={IconArrowBack}
+                                    title={selectedForm?.name ?? 'Form fields'}
+                                    onClick={() => setSelectedFormId(null)}
+                                >
+                                    <Text
+                                        size="medium"
+                                        className="dte-text-ellipsis"
+                                        style={{ fontWeight: 'bold', width: '100%' }}
+                                    >
+                                        {selectedForm?.name ?? 'Form fields'}
+                                    </Text>
+                                </Button>
+
+                                <FieldOptionList
+                                    title=""
+                                    isLoading={isFormFieldsLoading}
+                                    options={calcOptions}
+                                    highlightElementPath={highlightElementPath}
+                                    selectedPaths={selectedPaths}
+                                    onHover={onHover}
+                                    onSelect={onSelect}
+                                />
+                            </Fragment>
+                        ) : null}
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };
@@ -48,10 +174,12 @@ interface FieldOptionListProps {
     options: FieldTypeOption[];
     selectedPaths: Set<string>;
     title: string;
+    isLoading?: boolean;
 }
 
 const FieldOptionList: FC<FieldOptionListProps> = ({
     highlightElementPath,
+    isLoading,
     onHover,
     onSelect,
     options,
@@ -64,28 +192,46 @@ const FieldOptionList: FC<FieldOptionListProps> = ({
 
     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>
+            {title ? (
+                <Text variant="headline" el="h6" size="small">
+                    {title}
+                </Text>
+            ) : null}
+            {isLoading ? (
+                <Text size="small" subdued variant="body">
+                    Loading fields…
+                </Text>
+            ) : options.length === 0 ? (
+                <Text size="small" subdued variant="body">
+                    No fields on this form.
+                </Text>
+            ) : (
+                <ul
+                    className="dte-formula-field-list"
+                    role="listbox"
+                    aria-label={title || 'Fields'}
+                >
+                    {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);
+                                }
+                            }}
+                        >
+                            <span className="dte-text-ellipsis" title={opt.label ?? opt.path}>
+                                {opt.label ?? opt.path}
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+            )}
         </div>
     );
 };

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

@@ -5,6 +5,8 @@ import {
     CalculatedFieldFormat,
     FieldTypeEnum,
     FieldTypeOption,
+    FormFieldsByFormIdI,
+    FormInfo,
     PdfField,
     PdfFieldSubType,
     SchemaObject,
@@ -16,9 +18,13 @@ import { FormulaModal } from './formula-modal';
 export interface FormulaGeneratorProps {
     dataModel?: SchemaObject;
     documentFields?: PdfField[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    forms: FormInfo[];
     formula?: StructuredFormula;
     formulaFormat?: CalculatedFieldFormat;
+    formulaLoadingFormId?: number | null;
     onFormulaChange?(formula: StructuredFormula, format: CalculatedFieldFormat): void;
+    onRequestFormFields(formId: number): void;
 }
 
 function getFillableFilteredBuySubTypeFields(
@@ -39,9 +45,13 @@ function getFillableFilteredBuySubTypeFields(
 export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
     dataModel,
     documentFields = [],
+    formFieldsByFormId,
+    forms,
     formula,
     formulaFormat,
+    formulaLoadingFormId,
     onFormulaChange,
+    onRequestFormFields,
 }) => {
     const [modalOpen, setModalOpen] = useState(false);
     const dataModelGroups = useMemo(
@@ -79,7 +89,11 @@ export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
                     initialFormat={formulaFormat}
                     dataModelGroups={dataModelGroups}
                     fillableFieldsFromDocument={fillableFieldsFromDocument}
+                    formFieldsByFormId={formFieldsByFormId}
+                    forms={forms}
+                    formulaLoadingFormId={formulaLoadingFormId}
                     onClose={() => setModalOpen(false)}
+                    onRequestFormFields={onRequestFormFields}
                     onSave={handleSave}
                 />
             )}

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

@@ -12,9 +12,12 @@ import {
     CalculatedFieldFormat,
     DataModelFieldGroup,
     FieldTypeOption,
+    FormFieldsByFormIdI,
+    FormInfo,
     StructuredFormula,
 } from '../../interface/types';
 import {
+    formFieldInfosToCalculationOptions,
     parseExpression,
     tokenizeExpression,
     tokensToExpression,
@@ -48,18 +51,41 @@ export interface FormulaModalProps {
     initialFormat?: CalculatedFieldFormat;
     dataModelGroups: DataModelFieldGroup[];
     fillableFieldsFromDocument?: FieldTypeOption[];
+    formFieldsByFormId?: FormFieldsByFormIdI;
+    forms: FormInfo[];
+    formulaLoadingFormId?: number | null;
     onClose(): void;
+    onRequestFormFields(formId: number): void;
     onSave(formula: StructuredFormula, format: CalculatedFieldFormat): void;
 }
 
 export const FormulaModal: FC<FormulaModalProps> = ({
     dataModelGroups,
     fillableFieldsFromDocument = [],
+    formFieldsByFormId = {},
+    forms,
+    formulaLoadingFormId,
     initialFormat,
     initialFormula,
     onClose,
+    onRequestFormFields,
     onSave,
 }) => {
+    const formCalculationOptions = useMemo((): FieldTypeOption[] => {
+        if (!forms?.length) {
+            return [];
+        }
+        const out: FieldTypeOption[] = [];
+        for (const form of forms) {
+            const list = formFieldsByFormId[form.id];
+            if (!list?.length) {
+                continue;
+            }
+            out.push(...formFieldInfosToCalculationOptions(form.id, list, form.name));
+        }
+        return out;
+    }, [forms, formFieldsByFormId]);
+
     const validPaths = useMemo(() => {
         const set = getValidPathsSet(dataModelGroups);
         for (const f of fillableFieldsFromDocument) {
@@ -67,8 +93,13 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                 set.add(f.path);
             }
         }
+        for (const f of formCalculationOptions) {
+            if (f.path) {
+                set.add(f.path);
+            }
+        }
         return set;
-    }, [dataModelGroups, fillableFieldsFromDocument]);
+    }, [dataModelGroups, fillableFieldsFromDocument, formCalculationOptions]);
     const allFields = useMemo(() => getAllFields(dataModelGroups), [dataModelGroups]);
     const pathToLabel = useMemo(() => {
         const m = new Map<string, string>();
@@ -82,8 +113,13 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                 m.set(f.path, f.label ?? f.path);
             }
         }
+        for (const f of formCalculationOptions) {
+            if (f.path) {
+                m.set(f.path, f.label ?? f.path);
+            }
+        }
         return m;
-    }, [allFields, fillableFieldsFromDocument]);
+    }, [allFields, fillableFieldsFromDocument, formCalculationOptions]);
 
     const knownDateFields = useMemo(() => {
         const set = new Set<string>();
@@ -97,8 +133,13 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                 set.add(f.path);
             }
         }
+        for (const f of formCalculationOptions) {
+            if (f.fieldType === 'date' && f.path) {
+                set.add(f.path);
+            }
+        }
         return set;
-    }, [allFields, fillableFieldsFromDocument]);
+    }, [allFields, fillableFieldsFromDocument, formCalculationOptions]);
 
     const currentExpression = useMemo(() => tokensToExpression(initialFormula), [initialFormula]);
 
@@ -123,9 +164,21 @@ export const FormulaModal: FC<FormulaModalProps> = ({
         }
     }, [formulaEditor.expressionHasDateFields, format.resultType]);
 
+    const formParseContext = useMemo(
+        (): { forms: FormInfo[]; formFieldsByFormId: FormFieldsByFormIdI } | undefined =>
+            forms.length > 0 ? { forms, formFieldsByFormId } : undefined,
+        [forms, formFieldsByFormId],
+    );
+
     const parsedTokens = useMemo(
-        () => parseExpression(formulaEditor.draftExpression, validPaths, knownDateFields),
-        [formulaEditor.draftExpression, validPaths, knownDateFields],
+        () =>
+            parseExpression(
+                formulaEditor.draftExpression,
+                validPaths,
+                knownDateFields,
+                formParseContext,
+            ),
+        [formulaEditor.draftExpression, validPaths, knownDateFields, formParseContext],
     );
 
     const formulaValidation = useMemo(
@@ -174,9 +227,13 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                 >
                     <FieldSidebar
                         fillableOptions={fillableFieldsFromDocument}
+                        formFieldsByFormId={formFieldsByFormId}
+                        forms={forms}
+                        formulaLoadingFormId={formulaLoadingFormId}
                         mergeTagOptions={allFields}
                         highlightElementPath={highlightElementPath}
                         onHover={setHighlightElementPath}
+                        onRequestFormFields={onRequestFormFields}
                         onSelect={formulaEditor.insertField}
                         selectedPaths={formulaEditor.selectedFieldPaths}
                     />