@servicetitan/dte-pdf-editor 1.91.0 → 1.92.0

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

@@ -14,15 +14,11 @@ 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';
+import { FormFieldsTypeList } from './form-fields-type-list';
 import { GenericFieldTypeList } from './generic-field-type-list';
 
 interface FieldSidebarProps {
     dataModelGroups?: DataModelFieldGroup[];
-    /**
-     * Forms listed as a group inside the Merge Tags tab (alongside the data model groups).
-     * Hidden when empty, when `onSelectForm` is missing, or when `hideFields` names
-     * `FieldTypeEnum.forms`.
-     */
     forms?: FormInfo[];
     formFieldOptions?: FieldTypeOption[];
     hideFields?: FieldTypeEnum[];
@@ -53,14 +49,15 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
     };
 
     const filteredMenuGroups = useMemo(() => {
-        if (!hideFields?.length) {
-            return menuGroups;
+        let groups = menuGroups;
+        if (hideFields?.length) {
+            groups = groups.filter(menuGroup => !hideFields.includes(menuGroup.key));
         }
-        return menuGroups.filter(menuGroup => !hideFields.includes(menuGroup.key));
-    }, [hideFields]);
-
-    // The list itself hides the group when there are no forms or no selection handler.
-    const visibleForms = hideFields?.includes(FieldTypeEnum.forms) ? undefined : forms;
+        if (!forms?.length || !onSelectForm) {
+            groups = groups.filter(menuGroup => menuGroup.key !== FieldTypeEnum.forms);
+        }
+        return groups;
+    }, [forms?.length, hideFields, onSelectForm]);
 
     return (
         <Flex className="dte-field-sidebar-container skeleton-item">
@@ -88,11 +85,17 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
                     {activeFieldType === FieldTypeEnum.dataModel && (
                         <DataModelFieldTypeList
                             dataModelGroups={dataModelGroups}
-                            forms={visibleForms}
-                            formFieldOptions={formFieldOptions}
-                            isLoadingFormFields={isLoadingFormFields}
                             onDragStart={onDragStart}
                             onDragEnd={onDragEnd}
+                        />
+                    )}
+                    {activeFieldType === FieldTypeEnum.forms && forms && onSelectForm && (
+                        <FormFieldsTypeList
+                            fieldOptions={formFieldOptions}
+                            forms={forms}
+                            isLoadingFormFields={isLoadingFormFields}
+                            onDragEnd={onDragEnd}
+                            onDragStart={onDragStart}
                             onSelectForm={onSelectForm}
                             selectedForm={selectedForm}
                         />

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

@@ -1,15 +1,22 @@
-import { Flex, Icon, Text } from '@servicetitan/anvil2';
+import { Flex, Icon, Svg, Text } from '@servicetitan/anvil2';
 import IconDragIndicator from '@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg';
 import { FC } from 'react';
 
 interface FieldTypeProps {
+    icon?: Svg;
     label: string;
     sampleData?: string | number | null;
     onDragEnd(): void;
     onDragStart(): void;
 }
 
-export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart, sampleData }) => {
+export const FieldType: FC<FieldTypeProps> = ({
+    icon,
+    label,
+    onDragEnd,
+    onDragStart,
+    sampleData,
+}) => {
     return (
         <div
             draggable
@@ -24,7 +31,10 @@ export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart, s
         >
             <Icon svg={IconDragIndicator} size="medium" />
             <Flex direction="column" style={{ overflow: 'hidden' }}>
-                <Text size="small">{label}</Text>
+                <Flex alignItems="center" gap="2">
+                    {icon && <Icon svg={icon} size="medium" />}
+                    <Text size="small">{label}</Text>
+                </Flex>
                 {sampleData && (
                     <Text
                         size="small"

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

@@ -37,6 +37,7 @@ export const FillableFieldTypeList: FC<FillableFieldTypeListProps> = ({
             {searchedFieldTypes.map(fieldOption => {
                 return (
                     <FieldType
+                        icon={fieldOption.icon}
                         key={fieldOption.subType}
                         label={fieldOption.label}
                         onDragEnd={onDragEnd}

package/src/components/field-sidebar/form-fields-type-list.tsx

@@ -6,127 +6,112 @@ import { type FieldTypeOption, type FormInfo } from '../../interface/types';
 import { getFieldSampleData } from '../../utils';
 import { FieldType } from './field-type';
 
-/** Heading of the Forms group inside the Merge Tags tab. */
-export const FORMS_GROUP_NAME = 'Forms';
-
-export interface FormsListProps {
+export interface FormFieldsTypeListProps {
     forms: FormInfo[];
-    /** Rendered when the (possibly search-filtered) list is empty. */
-    emptyText?: string;
-    onSelectForm(form: FormInfo): void;
-}
-
-/**
- * Root level of the Forms group: one clickable row per form. Selecting a form hands off to
- * `FormFieldsPanel`, which lists that form's draggable fields.
- */
-export const FormsList: FC<FormsListProps> = ({
-    emptyText = 'No forms configured.',
-    forms,
-    onSelectForm,
-}) => {
-    return (
-        <div className="dte-field-type-group">
-            <Flex alignItems="center" gap={1} className="dte-field-type-group-header">
-                <Text variant="headline" el="h6" size="small">
-                    {FORMS_GROUP_NAME}
-                </Text>
-            </Flex>
-            {forms.length > 0 ? (
-                <ul className="dte-formula-field-list" role="listbox" aria-label={FORMS_GROUP_NAME}>
-                    {forms.map(form => (
-                        <li
-                            key={form.id}
-                            role="option"
-                            className="dte-formula-field-list-item"
-                            onMouseDown={e => {
-                                e.preventDefault();
-                                onSelectForm(form);
-                            }}
-                        >
-                            <Flex justifyContent="space-between" alignItems="center">
-                                <span className="dte-text-ellipsis" title={form.name}>
-                                    {form.name}
-                                </span>
-                                <IconArrowForward />
-                            </Flex>
-                        </li>
-                    ))}
-                </ul>
-            ) : (
-                <Text size="small" subdued variant="body">
-                    {emptyText}
-                </Text>
-            )}
-        </div>
-    );
-};
-
-export interface FormFieldsPanelProps {
-    form: FormInfo;
+    selectedForm: FormInfo | null;
     fieldOptions: FieldTypeOption[];
-    isLoading?: boolean;
-    /** Rendered when the form has fields but none match the current search. */
-    hasHiddenFields?: boolean;
-    onBack(): void;
+    isLoadingFormFields?: boolean;
+    onSelectForm(form: FormInfo | null): void;
     onDragEnd(): void;
     onDragStart(fieldOption: FieldTypeOption): void;
 }
 
-/**
- * Detail level of the Forms group: a back button naming the form, then its fields as the same
- * draggable rows the data model groups use, so a form field drops onto the PDF like any merge tag.
- */
-export const FormFieldsPanel: FC<FormFieldsPanelProps> = ({
+export const FormFieldsTypeList: FC<FormFieldsTypeListProps> = ({
     fieldOptions,
-    form,
-    hasHiddenFields = false,
-    isLoading = false,
-    onBack,
+    forms,
+    isLoadingFormFields = false,
     onDragEnd,
     onDragStart,
+    onSelectForm,
+    selectedForm,
 }) => {
     return (
-        <Fragment>
-            <Button
-                style={{ width: '100%' }}
-                appearance="ghost"
-                size="small"
-                icon={IconArrowBack}
-                title={form.name}
-                onClick={onBack}
-            >
-                <Text
-                    size="medium"
-                    className="dte-text-ellipsis"
-                    style={{ fontWeight: 'bold', width: '100%' }}
+        <Flex direction="column" gap={3} flex={1} style={{ minHeight: 0 }}>
+            <div className="dte-formula-sidebar-slide-outer">
+                <div
+                    className={`dte-formula-sidebar-slide-track${selectedForm ? ' --detail' : ''}`}
                 >
-                    {form.name}
-                </Text>
-            </Button>
-            <div className="dte-field-type-group">
-                {isLoading ? (
-                    <Text size="small" subdued variant="body">
-                        Loading fields…
-                    </Text>
-                ) : fieldOptions.length === 0 ? (
-                    <Text size="small" subdued variant="body">
-                        {hasHiddenFields
-                            ? 'No fields match the search.'
-                            : 'No fields on this form.'}
-                    </Text>
-                ) : (
-                    fieldOptions.map(option => (
-                        <FieldType
-                            key={option.path}
-                            label={option.label}
-                            sampleData={getFieldSampleData(option.sampleData, option.fieldType)}
-                            onDragEnd={onDragEnd}
-                            onDragStart={() => onDragStart(option)}
-                        />
-                    ))
-                )}
+                    <div className="dte-formula-sidebar-slide-panel">
+                        {forms.length > 0 ? (
+                            <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"
+                                        onMouseDown={e => {
+                                            e.preventDefault();
+                                            onSelectForm(form);
+                                        }}
+                                    >
+                                        <Flex justifyContent="space-between" alignItems="center">
+                                            <span className="dte-text-ellipsis" title={form.name}>
+                                                {form.name}
+                                            </span>
+                                            <IconArrowForward />
+                                        </Flex>
+                                    </li>
+                                ))}
+                            </ul>
+                        ) : (
+                            <Text size="small" subdued variant="body">
+                                No forms configured.
+                            </Text>
+                        )}
+                    </div>
+
+                    <div className="dte-formula-sidebar-slide-panel --form-fields">
+                        {selectedForm ? (
+                            <Fragment>
+                                <Button
+                                    style={{ width: '100%' }}
+                                    appearance="ghost"
+                                    size="small"
+                                    icon={IconArrowBack}
+                                    title={selectedForm.name}
+                                    onClick={() => onSelectForm(null)}
+                                >
+                                    <Text
+                                        size="medium"
+                                        className="dte-text-ellipsis"
+                                        style={{ fontWeight: 'bold', width: '100%' }}
+                                    >
+                                        {selectedForm.name}
+                                    </Text>
+                                </Button>
+                                <div className="dte-field-type-group">
+                                    {isLoadingFormFields ? (
+                                        <Text size="small" subdued variant="body">
+                                            Loading fields…
+                                        </Text>
+                                    ) : fieldOptions.length === 0 ? (
+                                        <Text size="small" subdued variant="body">
+                                            No fields on this form.
+                                        </Text>
+                                    ) : (
+                                        fieldOptions.map(option => (
+                                            <FieldType
+                                                key={option.path}
+                                                label={option.label}
+                                                sampleData={getFieldSampleData(
+                                                    option.sampleData,
+                                                    option.fieldType,
+                                                )}
+                                                onDragEnd={onDragEnd}
+                                                onDragStart={() => onDragStart(option)}
+                                            />
+                                        ))
+                                    )}
+                                </div>
+                            </Fragment>
+                        ) : null}
+                    </div>
+                </div>
             </div>
-        </Fragment>
+        </Flex>
     );
 };

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

@@ -16,6 +16,7 @@ export const GenericFieldTypeList: FC<GenericFieldTypeListProps> = ({ onDragEnd,
                 return (
                     <FieldType
                         key={key}
+                        icon={fieldOption.icon}
                         label={fieldOption.label}
                         onDragEnd={onDragEnd}
                         onDragStart={() => onDragStart(fieldOption)}

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

@@ -1,23 +1,32 @@
 import { Button, Divider, Flex, Icon, Text } from '@servicetitan/anvil2';
-import IconNavigateDown from '@servicetitan/anvil2/assets/icons/material/round/arrow_downward.svg';
-import IconNavigateUp from '@servicetitan/anvil2/assets/icons/material/round/arrow_upward.svg';
-import IconNavigateBefore from '@servicetitan/anvil2/assets/icons/material/round/navigate_before.svg';
-import IconNavigateNext from '@servicetitan/anvil2/assets/icons/material/round/navigate_next.svg';
 import IconZoomIn from '@servicetitan/anvil2/assets/icons/material/round/zoom_in.svg';
 import IconZoomOut from '@servicetitan/anvil2/assets/icons/material/round/zoom_out.svg';
 import { FC } from 'react';
 import { ZOOM_MAX, ZOOM_MIN } from '../../constants';
 
-interface ZoomControlsProps {
+export interface ZoomControlsProps {
     zoom: number;
+    vertical?: boolean;
+    position?: 'right-center' | 'right-bottom';
     onZoomIn(): void;
     onZoomOut(): void;
     onResetZoom(): void;
 }
 
-const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut, zoom }) => {
+export const ZoomControls: FC<ZoomControlsProps> = ({
+    onResetZoom,
+    onZoomIn,
+    onZoomOut,
+    position = 'right-center',
+    vertical,
+    zoom,
+}) => {
     return (
-        <Flex alignItems="center" gap={1} className="dte-pdf-zoom-controls">
+        <Flex
+            alignItems="center"
+            gap={1}
+            className={`dte-pdf-zoom-controls ${vertical ? '--vertical' : '--horizontal'} --${position}`}
+        >
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -28,7 +37,7 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
             >
                 <Icon svg={IconZoomOut} size="medium" />
             </Button>
-
+            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
             <Text
                 variant="body"
                 size="small"
@@ -38,7 +47,7 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
             >
                 {Math.round(zoom * 100)}%
             </Text>
-
+            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -54,130 +63,23 @@ const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut,
 };
 
 interface FieldNavigationControlsProps {
-    disabledNext: boolean;
-    disabledOnFirstField: boolean;
-    disabledOnLastField: boolean;
-    disabledPrev: boolean;
+    isStarted: boolean;
+    disabled?: boolean;
     onNextField(): void;
-    onPrevField(): void;
-    onFirstField(): void;
-    onLastField(): void;
 }
 
-const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
-    disabledNext,
-    disabledOnFirstField,
-    disabledOnLastField,
-    disabledPrev,
-    onFirstField,
-    onLastField,
+export const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
+    disabled,
+    isStarted,
     onNextField,
-    onPrevField,
 }) => {
     return (
-        <Flex alignItems="center" gap="2" className="dte-pdf-field-navigation-controls">
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onPrevField}
-                disabled={disabledPrev}
-                aria-label="Go to previous field"
-                title="Go to previous field"
-            >
-                <Icon svg={IconNavigateBefore} size="medium" />
-            </Button>
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onNextField}
-                disabled={disabledNext}
-                aria-label="Go to next field"
-                title="Go to next field"
-            >
-                <Icon svg={IconNavigateNext} size="medium" />
-            </Button>
-            <Divider vertical style={{ height: '100%' }} />
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onFirstField}
-                disabled={disabledOnFirstField}
-                aria-label="Go to first field"
-                title="Go to first field"
-            >
-                <Icon svg={IconNavigateUp} size="medium" />
-            </Button>
-            <Button
-                size="xsmall"
-                appearance="ghost"
-                onClick={onLastField}
-                disabled={disabledOnLastField}
-                aria-label="Go to last field"
-                title="Go to last field"
-            >
-                <Icon svg={IconNavigateDown} size="medium" />
-            </Button>
-        </Flex>
-    );
-};
-
-export interface CanvasControlsProps extends ZoomControlsProps {
-    /** Show the zoom in/out/reset controls. */
-    zoomable?: boolean;
-    /** Show the previous/next fillable-field navigation controls. */
-    enableInputNavigation?: boolean;
-    disabledNext?: boolean;
-    disabledPrev?: boolean;
-    disabledOnFirstField?: boolean;
-    disabledOnLastField?: boolean;
-    onNextField?(): void;
-    onPrevField?(): void;
-    onFirstField?(): void;
-    onLastField?(): void;
-}
-
-export const CanvasControls: FC<CanvasControlsProps> = ({
-    disabledNext = false,
-    disabledOnFirstField = false,
-    disabledOnLastField = false,
-    disabledPrev = false,
-    enableInputNavigation = false,
-    onFirstField = () => {},
-    onLastField = () => {},
-    onNextField = () => {},
-    onPrevField = () => {},
-    onResetZoom,
-    onZoomIn,
-    onZoomOut,
-    zoom,
-    zoomable = false,
-}) => {
-    if (!zoomable && !enableInputNavigation) {
-        return null;
-    }
-
-    return (
-        <Flex justifyContent="center" gap={2} className="dte-pdf-canvas-controls">
-            {zoomable && (
-                <ZoomControls
-                    zoom={zoom}
-                    onZoomIn={onZoomIn}
-                    onZoomOut={onZoomOut}
-                    onResetZoom={onResetZoom}
-                />
-            )}
-            {enableInputNavigation && (
-                <FieldNavigationControls
-                    disabledOnFirstField={disabledOnFirstField}
-                    disabledOnLastField={disabledOnLastField}
-                    onFirstField={onFirstField}
-                    onLastField={onLastField}
-                    disabledNext={disabledNext}
-                    disabledPrev={disabledPrev}
-                    onNextField={onNextField}
-                    onPrevField={onPrevField}
-                />
-            )}
-        </Flex>
+        <div
+            className={`dte-pdf-field-next-controls-button ${disabled && '--disabled'} ${isStarted && '--started'}`}
+            role="button"
+            onClick={onNextField}
+        >
+            <span>{isStarted ? 'Next' : 'Start'}</span>
+        </div>
     );
 };

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

@@ -10,13 +10,13 @@ import {
     useState,
 } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { useZoom } from '../../hooks';
+import { usePinchZoom, useZoom } from '../../hooks';
 import { type PdfField } from '../../interface/types';
 import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
-import { CanvasControls } from './canvas-controls';
+import { ZoomControls, ZoomControlsProps } from './canvas-controls';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
 
-interface PdfCanvasProps {
+export interface PdfCanvasProps {
     pdfUrl: string;
     zoomable: boolean;
     errorPlaceholder?: ReactNode;
@@ -29,6 +29,10 @@ interface PdfCanvasProps {
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
     fieldWrapperClassNames?: string;
+    zoomProps?: {
+        vertical: ZoomControlsProps['vertical'];
+        position: ZoomControlsProps['position'];
+    };
     onLoadSuccess?(pageNums: number): void;
     handleAddNewField(field: PdfField): void;
     onDragOver(e: DragEvent<HTMLDivElement>): void;
@@ -61,10 +65,17 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
+    zoomProps,
     zoomable,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
-    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
+    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
+    usePinchZoom(pdfContainerRef, {
+        enabled: zoomable,
+        setZoomValue,
+        zoom,
+        zoomByFactor,
+    });
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -77,10 +88,9 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
 
     return (
         <Fragment>
-            {isPdfLoaded && (
-                <CanvasControls
-                    enableInputNavigation={false}
-                    zoomable={zoomable}
+            {isPdfLoaded && zoomable && (
+                <ZoomControls
+                    {...zoomProps}
                     zoom={zoom}
                     onZoomIn={zoomIn}
                     onZoomOut={zoomOut}

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

@@ -12,7 +12,7 @@ import {
 import { extractGroupedFieldsFromDataModel, mapColorsToRecipients } from '../../utils';
 import { FieldConfigPanelOverlay } from '../field-config-panel/field-config-panel-overlay';
 import { FieldSidebar } from '../field-sidebar/field-sidebar';
-import { PdfCanvas } from '../pdf-canvas/pdf-canvas';
+import { PdfCanvas, PdfCanvasProps } from '../pdf-canvas/pdf-canvas';
 
 import '../../styles/index.css';
 
@@ -29,6 +29,7 @@ export interface PdfEditorProps {
     hideFields?: FieldTypeEnum[];
     hideConditionalLogic?: boolean;
     forms?: FormInfo[];
+    zoomProps?: PdfCanvasProps['zoomProps'];
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
@@ -52,6 +53,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     onLoadSuccess,
     pdfUrl,
     recipients = [],
+    zoomProps,
     zoomable = true,
 }) => {
     const pdfContainerRef = useRef<HTMLDivElement>(null);
@@ -121,6 +123,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                 className="dte-pdf-editor-content-container skeleton-item"
             >
                 <PdfCanvas
+                    zoomProps={zoomProps}
                     zoomable={zoomable}
                     pdfUrl={pdfUrl}
                     fields={fields}

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

@@ -49,7 +49,7 @@ export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
                     field={field}
                     fieldWrapperClassNames={fieldWrapperClassNames}
                     onFieldConfigChange={onFieldConfigChange}
-                    error={errors[field.id]}
+                    error={errors[field.id] ?? errors[field.path ?? '']}
                     handleAddNewField={handleAddNewField}
                     onFieldMove={onFieldMove}
                     onFieldClick={onFieldClick}

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

@@ -1,3 +1,4 @@
+import { Flex } from '@servicetitan/anvil2';
 import { FC } from 'react';
 import { type PdfField } from '../../interface/types';
 
@@ -7,11 +8,12 @@ interface PdfOverlayFieldESignProps {
 
 export const PdfOverlayFieldESign: FC<PdfOverlayFieldESignProps> = ({ field }) => {
     return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
-                {field.path}
-            </div>
-        </span>
+        <Flex
+            alignItems="center"
+            className="dte-pdf-field-value"
+            style={{ fontSize: '8px', height: '100%' }}
+        >
+            {field.path} {field.required ? '*' : ''}
+        </Flex>
     );
 };