@servicetitan/dte-pdf-editor 1.2.0 → 1.3.0

package/src/components/pdf-view.tsx

@@ -0,0 +1,99 @@
+import { Flex } from '@servicetitan/anvil2';
+import { FC, ReactNode, useRef, useState } from 'react';
+import { BASE_PAGE_WIDTH } from '../constants';
+import { FieldTypeEnum, PdfField } from '../interface/pdf-editor';
+import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../utils';
+import { PdfDocumentRenderer } from './pdf-document-renderer';
+import { RecipientInfo } from './pdf-editor';
+import { FillableFieldView, ViewDataModel, ViewEsign } from './pdf-view-fields';
+
+interface PdfViewProps {
+    fields: PdfField[];
+    data?: Record<string, any>;
+    pdfUrl: string;
+    loading?: boolean;
+    fillingBy?: string[];
+    loadingPlaceholder?: ReactNode;
+    errorPlaceholder?: ReactNode;
+    recipients?: RecipientInfo[];
+    onDataChange?(changedData: { [path: string]: string | boolean }): void;
+}
+
+export const PdfView: FC<PdfViewProps> = ({
+    data,
+    errorPlaceholder,
+    fields,
+    fillingBy,
+    loading = false,
+    loadingPlaceholder,
+    onDataChange,
+    pdfUrl,
+    recipients,
+}) => {
+    const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
+    const pdfWrapperRef = useRef<HTMLDivElement>(null);
+
+    const onDocumentLoadSuccess = (_: number) => {
+        setIsPdfLoaded(true);
+    };
+
+    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">
+                <PdfDocumentRenderer
+                    pdfUrl={pdfUrl}
+                    loading={loading}
+                    pageWidth={BASE_PAGE_WIDTH}
+                    errorPlaceholder={errorPlaceholder}
+                    loadingPlaceholder={loadingPlaceholder}
+                    onDocumentLoadSuccess={onDocumentLoadSuccess}
+                />
+                {isPdfLoaded && fields && fields.length > 0 && (
+                    <div className="dte-pdf-field-overlay --view-mode">
+                        {fields.map(field => {
+                            const pagePos = getPagePosition(field.page, pdfWrapperRef);
+                            const bgColor = getFieldBackgroundColor(
+                                field.recipient,
+                                recipientsColors,
+                            );
+
+                            return (
+                                <div
+                                    key={field.id}
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        position: 'absolute',
+                                        padding: '4px',
+                                        background: bgColor,
+                                        left: `${pagePos.left + field.x}px`,
+                                        top: `${pagePos.top + field.y}px`,
+                                        width: `${field.width}px`,
+                                        height: `${field.height}px`,
+                                    }}
+                                >
+                                    {field.type === FieldTypeEnum.dataModel && (
+                                        <ViewDataModel field={field} data={data} />
+                                    )}
+                                    {field.type === FieldTypeEnum.eSign && (
+                                        <ViewEsign field={field} data={data} />
+                                    )}
+                                    {field.type === FieldTypeEnum.fillable && (
+                                        <FillableFieldView
+                                            data={data}
+                                            field={field}
+                                            fillingBy={fillingBy}
+                                            onDataChange={onDataChange}
+                                        />
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+        </Flex>
+    );
+};

package/src/components/resize-handle.tsx

@@ -0,0 +1,8 @@
+import { FC, MouseEvent } from 'react';
+
+interface ResizeHandleProps {
+    handleResizeStart(e: MouseEvent<HTMLDivElement>): void;
+}
+export const ResizeHandle: FC<ResizeHandleProps> = ({ handleResizeStart }) => {
+    return <div className="dte-pdf-field-resize-handle" onMouseDown={handleResizeStart} />;
+};

package/src/constants/field.constants.ts

@@ -1,14 +1,26 @@
-import { ESignFieldType, FieldTypeEnum, FieldTypeOption } from '../interface/pdf-editor';
+import {
+    ESignFieldType,
+    FieldTypeEnum,
+    FieldTypeOption,
+    FillableFieldType,
+} from '../interface/pdf-editor';
 
 export const FIELD_CONSTANTS = {
     defaultWidth: 200,
-    defaultHeight: 30,
-    minWidth: 50,
+    defaultHeight: 25,
+    minWidth: 20,
     minHeight: 20,
     dropOffsetX: 75,
     dropOffsetY: 15,
 } as const;
 
+export const FILLABLE_FIELD_DEFAULT_SIZES = {
+    text: { width: 200, height: 25 },
+    date: { width: 200, height: 25 },
+    radio: { width: 20, height: 20 },
+    checkbox: { width: 20, height: 20 },
+} as Record<FillableFieldType | ESignFieldType, { width: number; height: number }>;
+
 export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] = [
     { name: 'Signature', id: ESignFieldType.signature },
     { name: 'Initials', id: ESignFieldType.initials },
@@ -20,6 +32,7 @@ export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
     { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text' },
     { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date' },
     { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox' },
+    { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio' },
 ];
 
 export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [

package/src/hooks/useFieldResize.ts

@@ -12,7 +12,7 @@ interface UseFieldResizeOptions {
     ) => void;
 }
 
-interface UseFieldResizeReturn {
+export interface UseFieldResizeReturn {
     isResizing: boolean;
     handleResizeStart: (e: MouseEvent<HTMLDivElement>, field: PdfField) => void;
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export type * from './interface/pdf-editor';
 export * from './components/pdf-editor';
+export * from './components/pdf-view';

package/src/interface/pdf-editor.ts

@@ -11,7 +11,7 @@ export enum ESignFieldType {
     fullName = 'fullName',
 }
 
-export type FillableFieldType = 'text' | 'date' | 'checkbox';
+export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio';
 
 export interface PdfField {
     id: string;

package/src/styles/pdf-field-overlay.css

@@ -7,15 +7,18 @@
     pointer-events: none;
 }
 
+.dte-pdf-field-overlay.--view-mode {
+    pointer-events: auto;
+}
+
 .dte-pdf-field {
     position: absolute;
     border: 1px dashed #999;
     display: flex;
     align-items: center;
-    justify-content: center;
     font-size: var(--typescale-1, 14px);
     padding: var(--spacing-half, 4px);
-    box-sizing: border-box;
+    box-sizing: content-box;
     pointer-events: auto;
 }
 
@@ -32,23 +35,45 @@
     opacity: 0.5;
 }
 
-.dte-pdf-field-path {
-    margin-top: 2px;
-}
-
 .dte-pdf-field-resize-handle {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 12px;
     height: 12px;
-    background-color: var(--border-color-active);
-    border: 1px solid var(--border-color-active);
+    border: 2px dashed var(--border-color-active);
     cursor: nwse-resize;
     z-index: 10;
     box-sizing: border-box;
 }
 
 .dte-pdf-field-resize-handle:hover {
-    background-color: var(--border-color-active);
+    border-color: var(--border-color-active);
+}
+
+.dte-pdf-field-view {
+    border: none;
+    cursor: default;
+    overflow: hidden;
+    white-space: nowrap;
+    pointer-events: none;
+    justify-content: left;
+    text-overflow: ellipsis;
+}
+
+.dte-pdf-field-value {
+    font-weight: normal;
+    color: #333;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dte-pdf-field-fillable {
+    width: 100%;
+    height: 100%;
+    background: inherit;
+    border: none;
+    pointer-events: none;
+    margin: var(--spacing-0, 0);
 }

package/src/utils/generate-fillable-path.ts

@@ -0,0 +1,3 @@
+export const generateFillablePath = (recipient: string, name: string): string => {
+    return `fillable_${recipient}_${name}`;
+};

package/src/utils/get-field-background-color.ts

@@ -0,0 +1,6 @@
+export const getFieldBackgroundColor = (
+    recipient: string | undefined,
+    recipientsColors: Record<string, string>,
+): string => {
+    return recipient && recipientsColors[recipient] ? recipientsColors[recipient] : 'none';
+};

package/src/utils/get-field-placeholder-text.ts

@@ -0,0 +1,8 @@
+import { PdfField } from '../interface/pdf-editor';
+
+export const getFieldPlaceholderText = (field: PdfField, prefix?: string): string => {
+    const requiredIndicator = field.required ? '*' : '';
+    const label = field.label || '';
+    const parts = [prefix, label, requiredIndicator].filter(Boolean);
+    return parts.join(' ');
+};

package/src/utils/index.ts

@@ -10,3 +10,8 @@ export * from './is-drag-over-canvas.utils';
 export * from './map-colors-to-recipients';
 export * from './pdfjs-init';
 export * from './generate-e-sign-path';
+export * from './resolve-pdf-data-values';
+export * from './generate-fillable-path';
+export * from './get-field-background-color';
+export * from './get-field-placeholder-text';
+export * from './parse-fillable-path';

package/src/utils/parse-fillable-path.ts

@@ -0,0 +1,8 @@
+export const parseFillablePathName = (path: string | undefined): string => {
+    if (!path) {
+        return '';
+    }
+    const parts = path.split('_');
+    // Path format: fillable_{recipient}_{name}
+    return parts.length >= 3 ? parts[2] : '';
+};

package/src/utils/resolve-pdf-data-values.ts

@@ -0,0 +1,34 @@
+export const resolvePdfDataValues = (
+    data: Record<string, any> | undefined,
+    path: string | undefined,
+): string => {
+    if (!data || !path) {
+        return '';
+    }
+
+    const keys = path.split('.');
+    let value: any = data;
+
+    for (const key of keys) {
+        if (value === null || value === undefined || typeof value !== 'object') {
+            return '';
+        }
+        value = value[key];
+    }
+
+    if (value === null || value === undefined) {
+        return '';
+    }
+
+    if (typeof value === 'object') {
+        if ('Amount' in value && 'Currency' in value) {
+            return `${value.Currency} ${value.Amount}`;
+        }
+        if ('Value' in value) {
+            return String(value.Value);
+        }
+        return JSON.stringify(value);
+    }
+
+    return String(value);
+};