@servicetitan/dte-pdf-editor 1.92.0 → 1.92.2

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

@@ -1,32 +1,23 @@
 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';
 
-export interface ZoomControlsProps {
+interface ZoomControlsProps {
     zoom: number;
-    vertical?: boolean;
-    position?: 'right-center' | 'right-bottom';
     onZoomIn(): void;
     onZoomOut(): void;
     onResetZoom(): void;
 }
 
-export const ZoomControls: FC<ZoomControlsProps> = ({
-    onResetZoom,
-    onZoomIn,
-    onZoomOut,
-    position = 'right-center',
-    vertical,
-    zoom,
-}) => {
+const ZoomControls: FC<ZoomControlsProps> = ({ onResetZoom, onZoomIn, onZoomOut, zoom }) => {
     return (
-        <Flex
-            alignItems="center"
-            gap={1}
-            className={`dte-pdf-zoom-controls ${vertical ? '--vertical' : '--horizontal'} --${position}`}
-        >
+        <Flex alignItems="center" gap={1} className="dte-pdf-zoom-controls">
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -37,7 +28,7 @@ export const ZoomControls: FC<ZoomControlsProps> = ({
             >
                 <Icon svg={IconZoomOut} size="medium" />
             </Button>
-            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
+
             <Text
                 variant="body"
                 size="small"
@@ -47,7 +38,7 @@ export const ZoomControls: FC<ZoomControlsProps> = ({
             >
                 {Math.round(zoom * 100)}%
             </Text>
-            <Divider vertical={!vertical} style={vertical ? { width: 20 } : { height: 20 }} />
+
             <Button
                 size="xsmall"
                 appearance="ghost"
@@ -63,23 +54,130 @@ export const ZoomControls: FC<ZoomControlsProps> = ({
 };
 
 interface FieldNavigationControlsProps {
-    isStarted: boolean;
-    disabled?: boolean;
+    disabledNext: boolean;
+    disabledOnFirstField: boolean;
+    disabledOnLastField: boolean;
+    disabledPrev: boolean;
     onNextField(): void;
+    onPrevField(): void;
+    onFirstField(): void;
+    onLastField(): void;
 }
 
-export const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
-    disabled,
-    isStarted,
+const FieldNavigationControls: FC<FieldNavigationControlsProps> = ({
+    disabledNext,
+    disabledOnFirstField,
+    disabledOnLastField,
+    disabledPrev,
+    onFirstField,
+    onLastField,
     onNextField,
+    onPrevField,
 }) => {
     return (
-        <div
-            className={`dte-pdf-field-next-controls-button ${disabled && '--disabled'} ${isStarted && '--started'}`}
-            role="button"
-            onClick={onNextField}
-        >
-            <span>{isStarted ? 'Next' : 'Start'}</span>
-        </div>
+        <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>
     );
 };

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

@@ -10,13 +10,13 @@ import {
     useState,
 } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { usePinchZoom, useZoom } from '../../hooks';
+import { useZoom } from '../../hooks';
 import { type PdfField } from '../../interface/types';
 import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
-import { ZoomControls, ZoomControlsProps } from './canvas-controls';
+import { CanvasControls } from './canvas-controls';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
 
-export interface PdfCanvasProps {
+interface PdfCanvasProps {
     pdfUrl: string;
     zoomable: boolean;
     errorPlaceholder?: ReactNode;
@@ -29,10 +29,6 @@ export 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;
@@ -65,17 +61,10 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
     pdfWrapperRef,
     recipientsColors,
     selectedField,
-    zoomProps,
     zoomable,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
-    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
-    usePinchZoom(pdfContainerRef, {
-        enabled: zoomable,
-        setZoomValue,
-        zoom,
-        zoomByFactor,
-    });
+    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -88,9 +77,10 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
 
     return (
         <Fragment>
-            {isPdfLoaded && zoomable && (
-                <ZoomControls
-                    {...zoomProps}
+            {isPdfLoaded && (
+                <CanvasControls
+                    enableInputNavigation={false}
+                    zoomable={zoomable}
                     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, PdfCanvasProps } from '../pdf-canvas/pdf-canvas';
+import { PdfCanvas } from '../pdf-canvas/pdf-canvas';
 
 import '../../styles/index.css';
 
@@ -29,7 +29,6 @@ export interface PdfEditorProps {
     hideFields?: FieldTypeEnum[];
     hideConditionalLogic?: boolean;
     forms?: FormInfo[];
-    zoomProps?: PdfCanvasProps['zoomProps'];
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
@@ -53,13 +52,12 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     onLoadSuccess,
     pdfUrl,
     recipients = [],
-    zoomProps,
     zoomable = true,
 }) => {
     const pdfContainerRef = useRef<HTMLDivElement>(null);
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
     const pdfFieldSelection = usePdfFieldSelection(fields, onFieldsChange);
-    const formFields = useFormFields(fields, onFormSelect);
+    const formFields = useFormFields(fields, onFormSelect, forms);
     const pdfFieldDnd = usePdfFieldDnD({
         fields,
         recipients,
@@ -90,7 +88,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     dataModel={dataModel}
                     documentFields={fields}
                     formFieldsByFormId={formFields.formFieldsByFormId}
-                    forms={forms ?? []}
+                    forms={formFields.formsWithFields}
                     formulaLoadingFormId={formFields.formulaLoadingFormId}
                     selectedField={pdfFieldSelection.selectedField}
                     onFieldConfigChange={pdfFieldSelection.updateField}
@@ -108,7 +106,8 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     hideFields={hideFields}
                     dataModelGroups={dataModelGroups}
                     formFieldOptions={formFields.formFieldOptions}
-                    forms={forms}
+                    forms={formFields.formsWithFields}
+                    loadingFormsCount={formFields.isLoadingForms ? (forms?.length ?? 0) : 0}
                     isLoadingFormFields={formFields.isLoading}
                     onDragStart={pdfFieldDnd.handleDragStart}
                     onDragEnd={pdfFieldDnd.handleDragEnd}
@@ -123,7 +122,6 @@ 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] ?? errors[field.path ?? '']}
+                    error={errors[field.id]}
                     handleAddNewField={handleAddNewField}
                     onFieldMove={onFieldMove}
                     onFieldClick={onFieldClick}

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

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

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

@@ -1,14 +1,8 @@
-import { Icon } from '@servicetitan/anvil2';
 import { FC, MouseEvent, RefObject } from 'react';
 import { DISABLE_FIELD_RESIZE } from '../../constants';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, type PdfField } from '../../interface/types';
-import {
-    getFieldBackgroundColor,
-    getFieldBoundsStyle,
-    getFieldTypeOption,
-    getPagePosition,
-} from '../../utils';
+import { getFieldBackgroundColor, getFieldBoundsStyle, 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';
@@ -91,8 +85,6 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
         .filter(Boolean)
         .join(' ');
 
-    const fieldTypeOption = getFieldTypeOption(field);
-
     return (
         <div
             title={field.description}
@@ -104,14 +96,6 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             className={className}
             style={style}
         >
-            {fieldTypeOption && (
-                <div className="dte-pdf-field-label">
-                    {fieldTypeOption.icon && (
-                        <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
-                    )}
-                    {fieldTypeOption.label}
-                </div>
-            )}
             {field.type === FieldTypeEnum.calculated && (
                 <PdfOverlayFieldCalculated field={field} pathToLabel={pathToLabel} />
             )}

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

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

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

@@ -1,11 +1,9 @@
-import { Icon } from '@servicetitan/anvil2';
 import { FC, Fragment, PropsWithChildren, RefObject } from 'react';
 import { type DataModelValues, type PdfField } from '../../interface/types';
 import {
     evaluateDisplayCondition,
     getFieldBackgroundColor,
     getFieldBoundsStyle,
-    getFieldTypeOption,
     getPagePosition,
 } from '../../utils';
 
@@ -38,8 +36,6 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
 
     const pagePos = getPagePosition(field.page, pdfWrapperRef);
     const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
-    const fieldTypeOption = getFieldTypeOption(field);
-
     return (
         <Fragment>
             <div
@@ -49,28 +45,13 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
                 style={getFieldBoundsStyle(field, {
                     pageOffset: pagePos,
                     backgroundColor: bgColor,
-                    borderColor: error ? 'red' : bgColor.replace('1f', '7d'),
+                    borderColor: error ? 'red' : undefined,
                     zoom,
                 })}
                 onFocus={() => onFocus?.(field.id)}
             >
                 {children}
             </div>
-            {fieldTypeOption && (
-                <div
-                    className="dte-pdf-field-label"
-                    style={{
-                        top: pagePos.top + field.y * zoom - 10,
-                        left: pagePos.left + field.x * zoom + 3,
-                        position: 'absolute',
-                    }}
-                >
-                    {fieldTypeOption.icon && (
-                        <Icon svg={fieldTypeOption.icon} size="small" color="inherit" />
-                    )}
-                    {fieldTypeOption.label}
-                </div>
-            )}
             {error && (
                 <span
                     style={{
@@ -78,7 +59,6 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
                         top: pagePos.top + (field.y + field.height) * zoom + 8,
                         left: pagePos.left + field.x * zoom,
                         minWidth: '100px',
-                        fontSize: '10px',
                         position: 'absolute',
                     }}
                 >

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

@@ -31,7 +31,7 @@ interface FillableTextInputProps {
 }
 
 const fillableTextStyles = {
-    background: 'transparent',
+    background: 'inherit',
     width: '100%',
     height: '100%',
     border: 'none',