@servicetitan/dte-pdf-editor 1.17.0 → 1.19.0

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

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

@@ -1,14 +1,14 @@
-import { Button, Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
-import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import { Button, Flex, Icon, Text } from '@servicetitan/anvil2';
 import IconMenuOpen from '@servicetitan/anvil2/assets/icons/material/round/menu_open.svg';
-import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
-import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
 
 import { FC, useState } from 'react';
+import { menuGroups } from '../../constants/menu-group';
 import { useToggle } from '../../hooks';
 import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../../interface/types';
+import { CalculatedFieldTypeList } from './calculated-field-type-list';
 import { DataModelFieldTypeList } from './data-model-field-type-list';
 import { ESignFieldTypeList } from './e-sign-field-type-list';
+import { FieldMenuGroup } from './field-menu-group';
 import { FillableFieldTypeList } from './fillable-field-type-list';
 
 interface FieldSidebarProps {
@@ -17,23 +17,12 @@ interface FieldSidebarProps {
     onDragStart(fieldOption: FieldTypeOption): void;
 }
 
-const menuGroups: { svgIcon: any; label: string; key: FieldTypeEnum }[] = [
-    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
-    { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
-    {
-        svgIcon: IconPhotoSizeSelectSmall,
-        label: 'Fillable Fields',
-        key: FieldTypeEnum.fillable,
-    },
-];
-
 export const FieldSidebar: FC<FieldSidebarProps> = ({
     dataModelGroups = [],
     onDragEnd,
     onDragStart,
 }) => {
     const [activeFieldType, setActiveFieldType] = useState<FieldTypeEnum>(FieldTypeEnum.dataModel);
-    const [searchText, setSearchText] = useState('');
     const { isOpen, open, toggle } = useToggle(true);
 
     const handleActiveFieldTypeChange = (activeFieldType: FieldTypeEnum) => {
@@ -43,31 +32,11 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
 
     return (
         <Flex className="dte-field-sidebar-container skeleton-item">
-            <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 === activeFieldType ? '--active' : ''}`}
-                        onClick={() => handleActiveFieldTypeChange(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>
+            <FieldMenuGroup
+                menuGroups={menuGroups}
+                onClickMenu={handleActiveFieldTypeChange}
+                activeFieldKey={activeFieldType}
+            />
 
             <Flex
                 className={`dte-field-sidebar-content skeleton-item ${isOpen ? '--open' : ''}`}
@@ -75,35 +44,25 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
             >
                 <Flex className="dte-field-sidebar-content-inner">
                     <Text variant="headline" el="h1" size="medium">
-                        {menuGroups.find(group => group.key === activeFieldType)!.label}
+                        {menuGroups.find(group => group.key === activeFieldType)?.label}
                     </Text>
 
-                    {activeFieldType !== FieldTypeEnum.eSign && (
-                        <SearchField
-                            placeholder="Search"
-                            size="small"
-                            className="dte-field-sidebar-search"
-                            onChange={e => setSearchText(e.target.value ?? '')}
-                        />
-                    )}
                     {activeFieldType === FieldTypeEnum.fillable && (
-                        <FillableFieldTypeList
-                            searchText={searchText}
-                            onDragStart={onDragStart}
-                            onDragEnd={onDragEnd}
-                        />
+                        <FillableFieldTypeList onDragStart={onDragStart} onDragEnd={onDragEnd} />
                     )}
                     {activeFieldType === FieldTypeEnum.eSign && (
                         <ESignFieldTypeList onDragEnd={onDragEnd} onDragStart={onDragStart} />
                     )}
                     {activeFieldType === FieldTypeEnum.dataModel && (
                         <DataModelFieldTypeList
-                            searchText={searchText}
                             dataModelGroups={dataModelGroups}
                             onDragStart={onDragStart}
                             onDragEnd={onDragEnd}
                         />
                     )}
+                    {activeFieldType === FieldTypeEnum.calculated && (
+                        <CalculatedFieldTypeList onDragStart={onDragStart} onDragEnd={onDragEnd} />
+                    )}
                 </Flex>
             </Flex>
             <Button

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

@@ -1,10 +1,10 @@
-import { FC, Fragment, useMemo } from 'react';
+import { SearchField } from '@servicetitan/anvil2';
+import { FC, Fragment, useMemo, useState } from 'react';
 import { FILLABLE_FIELD_TYPES } from '../../constants';
 import { FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface FillableFieldTypeListProps {
-    searchText?: string;
     onDragStart(fieldOption: FieldTypeOption): void;
     onDragEnd(): void;
 }
@@ -12,8 +12,9 @@ interface FillableFieldTypeListProps {
 export const FillableFieldTypeList: FC<FillableFieldTypeListProps> = ({
     onDragEnd,
     onDragStart,
-    searchText,
 }) => {
+    const [searchText, setSearchText] = useState('');
+
     const searchedFieldTypes = useMemo(() => {
         if (!searchText) {
             return FILLABLE_FIELD_TYPES;
@@ -27,18 +28,19 @@ export const FillableFieldTypeList: FC<FillableFieldTypeListProps> = ({
 
     return (
         <Fragment>
+            <SearchField
+                placeholder="Search"
+                size="small"
+                className="dte-field-sidebar-search"
+                onChange={e => setSearchText(e.target.value ?? '')}
+            />
             {searchedFieldTypes.map(fieldOption => {
                 return (
                     <FieldType
                         key={fieldOption.subType}
                         label={fieldOption.label}
                         onDragEnd={onDragEnd}
-                        onDragStart={() =>
-                            onDragStart({
-                                ...fieldOption,
-                                label: '',
-                            })
-                        }
+                        onDragStart={() => onDragStart(fieldOption)}
                     />
                 );
             })}

package/src/components/pdf-canvas/pdf-canvas.tsx

@@ -10,6 +10,7 @@ interface PdfCanvasProps {
     errorPlaceholder?: ReactNode;
     loadingPlaceholder?: ReactNode;
     fields: PdfField[];
+    errors?: Record<string, string>;
     loading: boolean;
     selectedField: PdfField | null;
     pdfContainerRef: RefObject<HTMLDivElement>;
@@ -27,6 +28,7 @@ interface PdfCanvasProps {
 
 export const PdfCanvas: FC<PdfCanvasProps> = ({
     errorPlaceholder,
+    errors = {},
     fields,
     handleAddNewField,
     loading,
@@ -76,6 +78,7 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
                 {isPdfLoaded && (
                     <PdfFieldsOverlay
                         fields={fields}
+                        errors={errors}
                         handleAddNewField={handleAddNewField}
                         pdfWrapperRef={pdfWrapperRef}
                         recipientsColors={recipientsColors}

package/src/components/pdf-editor/pdf-editor.tsx

@@ -12,6 +12,7 @@ import '../../styles/index.css';
 export interface PdfEditorProps {
     pdfUrl: string;
     loading?: boolean;
+    errors?: Record<string, string>;
     loadingPlaceholder?: ReactNode;
     errorPlaceholder?: ReactNode;
     dataModel?: SchemaObject;
@@ -24,6 +25,7 @@ export interface PdfEditorProps {
 export const PdfEditor: FC<PdfEditorProps> = ({
     dataModel,
     errorPlaceholder,
+    errors = {},
     fields = [],
     loading = false,
     loadingPlaceholder,
@@ -69,6 +71,8 @@ export const PdfEditor: FC<PdfEditorProps> = ({
         <Flex flex={1} className={`dte-pdf-editor ${loading ? 'skeleton' : ''}`}>
             {selectedField && (
                 <FieldConfigPanelOverlay
+                    dataModel={dataModel}
+                    documentFields={fields}
                     selectedField={selectedField}
                     onFieldConfigChange={updateField}
                     onDeleteField={deleteSelectedField}
@@ -90,6 +94,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     pdfUrl={pdfUrl}
                     fields={fields}
                     loading={loading}
+                    errors={errors}
                     onLoadSuccess={onLoadSuccess}
                     recipientsColors={recipientsColors}
                     selectedField={selectedField}

package/src/components/pdf-fields-overlay/pdf-fields-overlay.tsx

@@ -5,6 +5,7 @@ import { PdfOverlayField } from './pdf-overlay-field';
 interface PdfFieldsOverlayProps {
     fields: PdfField[];
     selectedField: PdfField | null;
+    errors: Record<string, string>;
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
     handleAddNewField(field: PdfField): void;
@@ -14,6 +15,7 @@ interface PdfFieldsOverlayProps {
 }
 
 export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
+    errors,
     fields,
     handleAddNewField,
     onFieldClick,
@@ -29,6 +31,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                 <PdfOverlayField
                     key={field.id}
                     field={field}
+                    error={errors[field.id]}
                     handleAddNewField={handleAddNewField}
                     onFieldMove={onFieldMove}
                     onFieldClick={onFieldClick}

package/src/components/pdf-fields-overlay/pdf-overlay-field-calculated.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfOverlayFieldCalculatedProps {
+    field: PdfField;
+}
+
+export const PdfOverlayFieldCalculated: FC<PdfOverlayFieldCalculatedProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label ? field.label : field.path}
+            {field.required ? '*' : ''}
+        </span>
+    );
+};

package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx

@@ -2,6 +2,7 @@ import { FC, MouseEvent, RefObject } from 'react';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, PdfField } from '../../interface/types';
 import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
 import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
 import { PdfOverlayFieldFillable } from './pdf-overlay-field-fillable';
@@ -9,6 +10,7 @@ import { ResizeHandle } from './resize-handle';
 
 interface PdfOverlayFieldProps {
     field: PdfField;
+    error?: string;
     isSelected: boolean;
     isSameGroup: boolean;
     recipientsColors: Record<string, string>;
@@ -20,6 +22,7 @@ interface PdfOverlayFieldProps {
 }
 
 export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
+    error,
     field,
     handleAddNewField,
     isSameGroup,
@@ -62,15 +65,17 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             onDragStart={e => handleDragStart(e, field)}
             onDrag={e => handleDrag(e, field)}
             onDragEnd={handleDragEnd}
-            className={`dte-pdf-field ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''}`}
+            className={`dte-pdf-field ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''} ${error ? '--error' : ''}`}
             style={style}
         >
+            {field.type === FieldTypeEnum.calculated && <PdfOverlayFieldCalculated field={field} />}
             {field.type === FieldTypeEnum.eSign && <PdfOverlayFieldESign field={field} />}
             {field.type === FieldTypeEnum.dataModel && <PdfOverlayFieldDataModel field={field} />}
             {field.type === FieldTypeEnum.fillable && (
                 <PdfOverlayFieldFillable field={field} handleAddNewField={handleAddNewField} />
             )}
             {isSelected && <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />}
+            {error && <span className="dte-pdf-field-error-message">{error}</span>}
         </div>
     );
 };

package/src/components/pdf-view/pdf-view-calculated.tsx

@@ -0,0 +1,23 @@
+import { FC, useMemo } from 'react';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { evaluateFormula, formatCalculatedResult, resolvePdfDataValues } from '../../utils';
+
+interface PdfViewCalculatedProps {
+    field: PdfField;
+    data?: DataModelValues;
+}
+
+export const PdfViewCalculated: FC<PdfViewCalculatedProps> = ({ data, field }) => {
+    const displayValue = useMemo(() => {
+        if (field.formula?.tokens?.length) {
+            const value = evaluateFormula(field.formula, data);
+            return formatCalculatedResult(value, field.formulaFormat);
+        }
+        if (field.path) {
+            return resolvePdfDataValues(data, field.path) ?? '';
+        }
+        return field.label ?? '';
+    }, [data, field.formula, field.formulaFormat, field.label, field.path]);
+
+    return <div className="dte-pdf-field-value">{displayValue}</div>;
+};

package/src/components/pdf-view/pdf-view.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../interface/types';
 import { mapColorsToRecipients } from '../../utils';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
+import { PdfViewCalculated } from './pdf-view-calculated';
 import { PdfViewDataModel } from './pdf-view-data-model';
 import { PdfViewESign } from './pdf-view-e-sign';
 import { PdfViewFieldContainer } from './pdf-view-field-container';
@@ -70,7 +71,6 @@ export const PdfView: FC<PdfViewProps> = ({
     };
 
     const recipientsColors = mapColorsToRecipients(recipients);
-
     return (
         <Flex flex={1} className="dte-pdf-view-container" style={{ maxWidth: BASE_PAGE_WIDTH }}>
             <div ref={pdfWrapperRef} className="dte-pdf-wrapper">
@@ -97,6 +97,12 @@ export const PdfView: FC<PdfViewProps> = ({
                                 {field.type === FieldTypeEnum.eSign && (
                                     <PdfViewESign field={field} />
                                 )}
+                                {field.type === FieldTypeEnum.calculated && (
+                                    <PdfViewCalculated
+                                        field={field}
+                                        data={previewMode === 'fillable' ? previewData : data}
+                                    />
+                                )}
                                 {field.type === FieldTypeEnum.fillable && (
                                     <PdfViewFillable
                                         data={previewMode === 'fillable' ? previewData : data}

package/src/constants/field.constants.ts

@@ -2,7 +2,7 @@ import {
     ESignFieldType,
     FieldTypeEnum,
     FieldTypeOption,
-    FillableFieldType,
+    PdfFieldSubType,
 } from '../interface/types';
 
 export const FIELD_CONSTANTS = {
@@ -19,7 +19,7 @@ export const FILLABLE_FIELD_DEFAULT_SIZES = {
     date: { width: 200, height: 25 },
     radio: { width: 20, height: 20 },
     checkbox: { width: 20, height: 20 },
-} as Record<FillableFieldType | ESignFieldType, { width: number; height: number }>;
+} as Record<PdfFieldSubType, { width: number; height: number }>;
 
 export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] = [
     { name: 'Signature', id: ESignFieldType.signature },
@@ -43,3 +43,10 @@ export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
         subType: ESignFieldType.signature,
     },
 ];
+
+export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [
+    {
+        label: 'Calculated Field',
+        type: FieldTypeEnum.calculated,
+    },
+];

package/src/constants/menu-group.ts

@@ -0,0 +1,26 @@
+import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import IconCalculate from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
+import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
+import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
+import { FieldTypeEnum } from '../interface/types';
+
+export interface MenuGroupModel {
+    svgIcon: any;
+    label: string;
+    key: FieldTypeEnum;
+}
+
+export const menuGroups: MenuGroupModel[] = [
+    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
+    { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
+    {
+        svgIcon: IconPhotoSizeSelectSmall,
+        label: 'Fillable Fields',
+        key: FieldTypeEnum.fillable,
+    },
+    {
+        svgIcon: IconCalculate,
+        label: 'Calculated Fields',
+        key: FieldTypeEnum.calculated,
+    },
+];

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useFieldDrag';
 export * from './useFieldResize';
+export * from './useFormulaEditor';
 export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';
 export * from './usePdfFieldSelection';