Matt
c4450dd852
- PlacedField gains optional defaultValue + fieldMeta carriers. The field-placement submit threads fieldMeta verbatim through the FormData payload (only when populated), where the API route + service + Documenso client already accepted it (v2 field/create-many honours fieldMeta per row). - FieldSidePanel grows a FieldMetaSubPanel that renders per-type controls in the right rail: - TEXT — default text, label, required toggle - NUMBER — format string, min, max, required - CHECKBOX — multi-select option editor with per-option `checked` - RADIO — single-select option editor (mutually-exclusive default) - DROPDOWN — single-select option editor Each writes shallowly into field.fieldMeta so Documenso v2's create-many endpoint receives the shape it expects. SIGNATURE / INITIALS / DATE / EMAIL / NAME render nothing (no per-instance config today). - ChoiceMetaEditor extracted as a top-level component so the option list doesn't recreate its DOM subtree on every keystroke (react-hooks/static-components rule). Verified: tsc clean, 1493/1493 vitest. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1664 lines
60 KiB
TypeScript
1664 lines
60 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||
import { Document, Page, pdfjs } from 'react-pdf';
|
||
import { toast } from 'sonner';
|
||
import {
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
Loader2,
|
||
Plus,
|
||
Trash2,
|
||
X,
|
||
Pen,
|
||
Calendar as CalendarIcon,
|
||
Type,
|
||
CheckSquare,
|
||
Mail,
|
||
User as UserIcon,
|
||
} from 'lucide-react';
|
||
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select';
|
||
import { apiFetch } from '@/lib/api/client';
|
||
import { toastError } from '@/lib/api/toast-error';
|
||
|
||
import 'react-pdf/dist/Page/AnnotationLayer.css';
|
||
import 'react-pdf/dist/Page/TextLayer.css';
|
||
|
||
pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
|
||
|
||
/**
|
||
* Phase 4 - Upload-for-Documenso-signing dialog.
|
||
*
|
||
* Four-step flow inside one dialog:
|
||
* 1. select-file - drag/drop or click to upload a PDF
|
||
* 2. configure-recipients - name/email/role per signer, with
|
||
* client + developer + approver prefilled from port + interest
|
||
* 3. place-fields - render the PDF page-by-page, run
|
||
* auto-detect, let the rep drag/place/delete fields per signer
|
||
* 4. sending - POST to /upload-for-signing, show spinner
|
||
*
|
||
* The implementation is intentionally compact - the field-overlay
|
||
* uses native DOM drag rather than dnd-kit so the coordinate math
|
||
* stays obvious. Auto-detect lives on the server (uses pdfjs-dist) so
|
||
* the same parser ships once.
|
||
*/
|
||
|
||
interface Recipient {
|
||
name: string;
|
||
email: string;
|
||
role: 'SIGNER' | 'APPROVER' | 'CC';
|
||
signingOrder: number;
|
||
}
|
||
|
||
type FieldType =
|
||
| 'SIGNATURE'
|
||
| 'FREE_SIGNATURE'
|
||
| 'INITIALS'
|
||
| 'DATE'
|
||
| 'EMAIL'
|
||
| 'NAME'
|
||
| 'TEXT'
|
||
| 'NUMBER'
|
||
| 'CHECKBOX'
|
||
| 'DROPDOWN'
|
||
| 'RADIO';
|
||
|
||
interface PlacedField {
|
||
/** Client-side id only - server doesn't see this. */
|
||
id: string;
|
||
type: FieldType;
|
||
recipientIndex: number;
|
||
pageNumber: number;
|
||
/** All 0..100 percent of page dimensions. */
|
||
pageX: number;
|
||
pageY: number;
|
||
pageWidth: number;
|
||
pageHeight: number;
|
||
/** Per-instance default value the signer sees on render. For TEXT/NUMBER
|
||
* this is the prefilled string; for DROPDOWN it's the option `value`
|
||
* string; for CHECKBOX/RADIO the meta.values entries carry their own
|
||
* `checked` flags so this is left null. */
|
||
defaultValue?: string | null;
|
||
/** Documenso v2 fieldMeta passed through verbatim. Per-type shape:
|
||
* TEXT/SIGNATURE/INITIALS: { text?, label?, required?, readOnly? }
|
||
* NUMBER: { numberFormat?, min?, max?, required? }
|
||
* DATE: { dateFormat?, required? }
|
||
* CHECKBOX/RADIO: { values: [{ value, checked? }] }
|
||
* DROPDOWN: { values: [{ value }], defaultValue? }
|
||
* Ignored on v1 instances. */
|
||
fieldMeta?: Record<string, unknown>;
|
||
}
|
||
|
||
interface DetectedFieldResponse {
|
||
type: FieldType;
|
||
pageNumber: number;
|
||
pageX: number;
|
||
pageY: number;
|
||
pageWidth: number;
|
||
pageHeight: number;
|
||
confidence: number;
|
||
anchorText?: string;
|
||
inferredRecipientLabel?: string | null;
|
||
}
|
||
|
||
interface SigningDefaults {
|
||
developer: { name: string; email: string; label: string };
|
||
approver: { name: string; email: string; label: string };
|
||
sendMode: 'auto' | 'manual';
|
||
}
|
||
|
||
const FIELD_DEFAULTS: Record<
|
||
FieldType,
|
||
{ widthPct: number; heightPct: number; label: string; icon: typeof Pen }
|
||
> = {
|
||
SIGNATURE: { widthPct: 20, heightPct: 5, label: 'Signature', icon: Pen },
|
||
FREE_SIGNATURE: { widthPct: 20, heightPct: 5, label: 'Free signature', icon: Pen },
|
||
INITIALS: { widthPct: 8, heightPct: 5, label: 'Initials', icon: Pen },
|
||
DATE: { widthPct: 12, heightPct: 3, label: 'Date', icon: CalendarIcon },
|
||
EMAIL: { widthPct: 25, heightPct: 3, label: 'Email', icon: Mail },
|
||
NAME: { widthPct: 20, heightPct: 3, label: 'Name', icon: UserIcon },
|
||
TEXT: { widthPct: 25, heightPct: 3, label: 'Text', icon: Type },
|
||
NUMBER: { widthPct: 15, heightPct: 3, label: 'Number', icon: Type },
|
||
CHECKBOX: { widthPct: 3, heightPct: 3, label: 'Checkbox', icon: CheckSquare },
|
||
DROPDOWN: { widthPct: 20, heightPct: 3, label: 'Dropdown', icon: Type },
|
||
RADIO: { widthPct: 3, heightPct: 3, label: 'Radio', icon: CheckSquare },
|
||
};
|
||
|
||
const RECIPIENT_COLORS = [
|
||
'rgb(59 130 246)', // blue-500
|
||
'rgb(168 85 247)', // purple-500
|
||
'rgb(34 197 94)', // green-500
|
||
'rgb(249 115 22)', // orange-500
|
||
'rgb(239 68 68)', // red-500
|
||
'rgb(20 184 166)', // teal-500
|
||
];
|
||
|
||
export interface UploadForSigningEntity {
|
||
type: 'client' | 'company' | 'yacht';
|
||
id: string;
|
||
/** Display label only — used in the dialog header so the rep can
|
||
* see which entity the doc will be filed under. */
|
||
label?: string;
|
||
}
|
||
|
||
interface UploadForSigningDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
/** Required for eoi / contract / reservation_agreement (the pipeline
|
||
* side effects need it). MUST be null for documentType='generic' —
|
||
* in that case the upload routes through the generic endpoint and
|
||
* optionally files the doc against the supplied `entity`. */
|
||
interestId: string | null;
|
||
documentType: 'eoi' | 'contract' | 'reservation_agreement' | 'generic';
|
||
/** Optional: client name/email to prefill the first recipient.
|
||
* When omitted the dialog fetches from the interest (interest-scoped
|
||
* flows) or leaves the recipient blank (generic flow). */
|
||
clientPrefill?: { name: string; email: string };
|
||
/** Generic flow only: routes the resulting file/document row to the
|
||
* entity's FK column + auto-files it into the entity's system
|
||
* folder. Ignored when `interestId` is set. */
|
||
entity?: UploadForSigningEntity;
|
||
/** Generic flow only: explicit folder placement (e.g. rep is
|
||
* uploading from within a Documents Hub folder). */
|
||
folderId?: string | null;
|
||
/** Generic flow only: caller-supplied success hook. Receives the
|
||
* new documentId and can invalidate caches / show a toast. */
|
||
onCreated?: (result: { documentId: string }) => void;
|
||
}
|
||
|
||
export function UploadForSigningDialog({
|
||
open,
|
||
onOpenChange,
|
||
interestId,
|
||
documentType,
|
||
clientPrefill,
|
||
entity,
|
||
folderId,
|
||
onCreated,
|
||
}: UploadForSigningDialogProps) {
|
||
// Re-mount the body on every open so all state resets cleanly. Same
|
||
// pattern as hard-delete-dialog (set-state-in-effect avoidance).
|
||
if (!open) return null;
|
||
const draftKey = interestId ?? entity?.id ?? 'generic';
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-[1400px] w-[95vw] max-h-[90vh] overflow-hidden p-0 flex flex-col">
|
||
<DialogBody
|
||
key={`${draftKey}:${documentType}`}
|
||
interestId={interestId}
|
||
documentType={documentType}
|
||
clientPrefill={clientPrefill}
|
||
entity={entity}
|
||
folderId={folderId ?? null}
|
||
onCreated={onCreated}
|
||
onClose={() => onOpenChange(false)}
|
||
/>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
type Step = 'select-file' | 'configure-recipients' | 'place-fields';
|
||
|
||
/**
|
||
* localStorage key for draft persistence. Versioned (`v1`) so a future
|
||
* shape change can invalidate stale drafts without crashing the parser.
|
||
* Scoped per interest+documentType so a rep can have an in-flight
|
||
* contract upload AND reservation upload in the same browser session
|
||
* without them clobbering each other.
|
||
*/
|
||
function draftStorageKey(scopeId: string, documentType: string): string {
|
||
return `pn-crm.upload-for-signing.draft.v1:${scopeId}:${documentType}`;
|
||
}
|
||
|
||
interface PersistedDraft {
|
||
step: Step;
|
||
title: string;
|
||
recipients: Recipient[];
|
||
fields: PlacedField[];
|
||
invitationMessage: string;
|
||
/** Saved at timestamp - surfaces in the UI as "Draft saved <relative>". */
|
||
savedAt: string;
|
||
}
|
||
|
||
function loadDraft(scopeId: string, documentType: string): PersistedDraft | null {
|
||
if (typeof window === 'undefined') return null;
|
||
try {
|
||
const raw = window.localStorage.getItem(draftStorageKey(scopeId, documentType));
|
||
if (!raw) return null;
|
||
const parsed = JSON.parse(raw) as PersistedDraft;
|
||
// Defensive shape check - drop drafts that look malformed rather
|
||
// than crashing the dialog.
|
||
if (
|
||
typeof parsed.title !== 'string' ||
|
||
!Array.isArray(parsed.recipients) ||
|
||
!Array.isArray(parsed.fields)
|
||
) {
|
||
return null;
|
||
}
|
||
return parsed;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function saveDraft(scopeId: string, documentType: string, draft: PersistedDraft): void {
|
||
if (typeof window === 'undefined') return;
|
||
try {
|
||
window.localStorage.setItem(draftStorageKey(scopeId, documentType), JSON.stringify(draft));
|
||
} catch {
|
||
// localStorage may throw on private mode or quota - swallow.
|
||
}
|
||
}
|
||
|
||
function clearDraft(scopeId: string, documentType: string): void {
|
||
if (typeof window === 'undefined') return;
|
||
try {
|
||
window.localStorage.removeItem(draftStorageKey(scopeId, documentType));
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
function DialogBody({
|
||
interestId,
|
||
documentType,
|
||
clientPrefill,
|
||
entity,
|
||
folderId,
|
||
onCreated,
|
||
onClose,
|
||
}: {
|
||
interestId: string | null;
|
||
documentType: 'eoi' | 'contract' | 'reservation_agreement' | 'generic';
|
||
clientPrefill?: { name: string; email: string };
|
||
entity?: UploadForSigningEntity;
|
||
folderId?: string | null;
|
||
onCreated?: (result: { documentId: string }) => void;
|
||
onClose: () => void;
|
||
}) {
|
||
// Draft scope: interestId when scoped to a deal, otherwise the
|
||
// entity id (so the rep can have one in-flight upload per entity),
|
||
// else 'generic' for the root Documents Hub flow.
|
||
const draftScopeId = interestId ?? entity?.id ?? 'generic';
|
||
|
||
// Hydrate from the persisted draft once on mount. The `key` prop on
|
||
// the parent re-mounts this body on every open, so this useState
|
||
// initializer runs once per dialog session.
|
||
const initialDraft = useMemo(
|
||
() => loadDraft(draftScopeId, documentType),
|
||
[draftScopeId, documentType],
|
||
);
|
||
|
||
const [step, setStep] = useState<Step>(initialDraft?.step ?? 'select-file');
|
||
const [file, setFile] = useState<File | null>(null);
|
||
const [title, setTitle] = useState(initialDraft?.title ?? '');
|
||
const [recipients, setRecipients] = useState<Recipient[]>(initialDraft?.recipients ?? []);
|
||
const [fields, setFields] = useState<PlacedField[]>(initialDraft?.fields ?? []);
|
||
const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
|
||
// Phase 6 polish - optional rep-authored note that appears above the
|
||
// CTA in every invitation email for this doc. Empty string means
|
||
// "no custom note - use the template default copy".
|
||
const [invitationMessage, setInvitationMessage] = useState(initialDraft?.invitationMessage ?? '');
|
||
const [draftSavedAt, setDraftSavedAt] = useState<string | null>(initialDraft?.savedAt ?? null);
|
||
|
||
const docLabel =
|
||
documentType === 'contract'
|
||
? 'Sales Contract'
|
||
: documentType === 'eoi'
|
||
? 'Expression of Interest'
|
||
: documentType === 'reservation_agreement'
|
||
? 'Reservation Agreement'
|
||
: 'Document';
|
||
|
||
// Defaults endpoint - drives the developer/approver prefill.
|
||
const { data: defaults } = useQuery<{ data: SigningDefaults }>({
|
||
queryKey: ['documents', 'signing-defaults'],
|
||
queryFn: () => apiFetch<{ data: SigningDefaults }>('/api/v1/documents/signing-defaults'),
|
||
});
|
||
|
||
// Interest endpoint - used to prefill the client recipient when the
|
||
// caller didn't supply one. Cached so the same dialog open/reopen
|
||
// hits the cache. Skipped entirely on the generic path (no interest).
|
||
const { data: interestData } = useQuery<{
|
||
data: { client: { fullName: string; email: string | null } };
|
||
}>({
|
||
queryKey: ['interest', interestId, 'prefill'],
|
||
queryFn: () =>
|
||
apiFetch<{ data: { client: { fullName: string; email: string | null } } }>(
|
||
`/api/v1/interests/${interestId}`,
|
||
),
|
||
enabled: Boolean(interestId) && !clientPrefill,
|
||
});
|
||
|
||
/**
|
||
* Build the prefill recipient list from the async query data. The
|
||
* dialog reads this on the "Next" button click in the file-picker
|
||
* step to seed `recipients` - keeping the seeding as a user-event
|
||
* handler rather than an effect avoids the cascading-render lint
|
||
* (react-hooks/set-state-in-effect, Wave 3) that earlier versions
|
||
* tripped. Returns an empty array until the defaults query resolves;
|
||
* the file-picker step's Next button stays clickable so the rep can
|
||
* still proceed and add recipients manually if the defaults endpoint
|
||
* is slow.
|
||
*/
|
||
const prefillRecipients = useMemo<Recipient[]>(() => {
|
||
if (!defaults?.data) return [];
|
||
const client = clientPrefill ?? {
|
||
name: interestData?.data?.client?.fullName ?? '',
|
||
email: interestData?.data?.client?.email ?? '',
|
||
};
|
||
const next: Recipient[] = [];
|
||
if (client.name && client.email) {
|
||
next.push({ name: client.name, email: client.email, role: 'SIGNER', signingOrder: 1 });
|
||
}
|
||
if (defaults.data.developer.email) {
|
||
next.push({
|
||
name: defaults.data.developer.name || defaults.data.developer.label,
|
||
email: defaults.data.developer.email,
|
||
role: 'SIGNER',
|
||
signingOrder: next.length + 1,
|
||
});
|
||
}
|
||
if (defaults.data.approver.email) {
|
||
next.push({
|
||
name: defaults.data.approver.name || defaults.data.approver.label,
|
||
email: defaults.data.approver.email,
|
||
role: 'APPROVER',
|
||
signingOrder: next.length + 1,
|
||
});
|
||
}
|
||
return next;
|
||
}, [defaults, interestData, clientPrefill]);
|
||
|
||
// We previously passed an object URL into react-pdf, but PDF.js runs
|
||
// its parser in a Web Worker loaded from unpkg.com (a different
|
||
// origin from localhost). Cross-origin workers can't fetch blob URLs
|
||
// minted on the main page - the worker XHR returns response (0) and
|
||
// the preview surfaces "Unexpected server response (0)". Reading the
|
||
// file into an ArrayBuffer once and handing PDF.js the raw bytes via
|
||
// `{ data: ... }` sidesteps the fetch entirely, so the cross-origin
|
||
// worker has nothing to retrieve.
|
||
const [fileBytes, setFileBytes] = useState<Uint8Array | null>(null);
|
||
useEffect(() => {
|
||
if (!file) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect -- clear preview bytes when caller drops the file
|
||
setFileBytes(null);
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
void file.arrayBuffer().then((buf) => {
|
||
if (!cancelled) setFileBytes(new Uint8Array(buf));
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [file]);
|
||
|
||
// Persist the rep's progress to localStorage as they work. Debounced
|
||
// at 500ms so a flurry of state updates (typing a long invitation
|
||
// message, dragging a field across the page) doesn't hammer storage.
|
||
// We DO NOT persist the File object itself - the rep has to re-pick
|
||
// the PDF after a refresh. Everything else (title, signers,
|
||
// placements, custom note) round-trips. The `step` is restored too
|
||
// so the dialog reopens on the same screen the rep left.
|
||
const draftDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
useEffect(() => {
|
||
if (draftDebounceRef.current) clearTimeout(draftDebounceRef.current);
|
||
draftDebounceRef.current = setTimeout(() => {
|
||
// Skip persistence in the pristine "no progress yet" state so
|
||
// dismissing the dialog without touching anything doesn't leave
|
||
// a phantom draft behind.
|
||
const hasProgress =
|
||
title.length > 0 ||
|
||
recipients.length > 0 ||
|
||
fields.length > 0 ||
|
||
invitationMessage.length > 0;
|
||
if (!hasProgress) {
|
||
clearDraft(draftScopeId, documentType);
|
||
return;
|
||
}
|
||
const now = new Date().toISOString();
|
||
saveDraft(draftScopeId, documentType, {
|
||
step,
|
||
title,
|
||
recipients,
|
||
fields,
|
||
invitationMessage,
|
||
savedAt: now,
|
||
});
|
||
|
||
setDraftSavedAt(now);
|
||
}, 500);
|
||
return () => {
|
||
if (draftDebounceRef.current) clearTimeout(draftDebounceRef.current);
|
||
};
|
||
}, [step, title, recipients, fields, invitationMessage, draftScopeId, documentType]);
|
||
|
||
function discardDraft() {
|
||
clearDraft(draftScopeId, documentType);
|
||
setTitle('');
|
||
setRecipients([]);
|
||
setFields([]);
|
||
setInvitationMessage('');
|
||
setStep('select-file');
|
||
setDraftSavedAt(null);
|
||
}
|
||
|
||
const autoDetect = useMutation({
|
||
mutationFn: async (uploadedFile: File) => {
|
||
const form = new FormData();
|
||
form.append('file', uploadedFile);
|
||
// apiFetch JSON-encodes the body when set, so we go raw here.
|
||
const res = await fetch('/api/v1/documents/auto-detect-fields', {
|
||
method: 'POST',
|
||
body: form,
|
||
credentials: 'include',
|
||
});
|
||
if (!res.ok) throw new Error('Auto-detect failed');
|
||
return (await res.json()) as { data: { fields: DetectedFieldResponse[] } };
|
||
},
|
||
onSuccess: (res) => {
|
||
// Drop detected fields onto a temporary "unassigned" recipient
|
||
// (index 0). Rep reassigns via the side panel.
|
||
const placed: PlacedField[] = res.data.fields.map((f) => ({
|
||
id: `det-${Math.random().toString(36).slice(2, 10)}`,
|
||
type: f.type,
|
||
recipientIndex: 0,
|
||
pageNumber: f.pageNumber,
|
||
pageX: f.pageX,
|
||
pageY: f.pageY,
|
||
pageWidth: f.pageWidth,
|
||
pageHeight: f.pageHeight,
|
||
}));
|
||
setFields((existing) => [...existing, ...placed]);
|
||
if (placed.length > 0) {
|
||
toast.success(
|
||
`Auto-detect placed ${placed.length} field${placed.length === 1 ? '' : 's'}.`,
|
||
);
|
||
} else {
|
||
toast.info('No fields auto-detected - place them manually.');
|
||
}
|
||
},
|
||
onError: () => {
|
||
toast.info('Auto-detect skipped - place fields manually.');
|
||
},
|
||
});
|
||
|
||
const queryClient = useQueryClient();
|
||
const sendMutation = useMutation({
|
||
mutationFn: async () => {
|
||
if (!file) throw new Error('No file selected');
|
||
const form = new FormData();
|
||
form.append('file', file);
|
||
form.append('documentType', documentType);
|
||
form.append('title', title || file.name.replace(/\.pdf$/i, ''));
|
||
form.append('recipients', JSON.stringify(recipients));
|
||
if (invitationMessage.trim()) {
|
||
form.append('invitationMessage', invitationMessage.trim());
|
||
}
|
||
// Strip the client-side `id` from each placed field - the server
|
||
// assigns its own ids on the documenso side.
|
||
form.append(
|
||
'fields',
|
||
JSON.stringify(
|
||
fields.map((f) => ({
|
||
type: f.type,
|
||
recipientIndex: f.recipientIndex,
|
||
pageNumber: f.pageNumber,
|
||
pageX: f.pageX,
|
||
pageY: f.pageY,
|
||
pageWidth: f.pageWidth,
|
||
pageHeight: f.pageHeight,
|
||
...(f.fieldMeta && Object.keys(f.fieldMeta).length > 0
|
||
? { fieldMeta: f.fieldMeta }
|
||
: {}),
|
||
})),
|
||
),
|
||
);
|
||
// Generic envelopes go to the cross-cutting endpoint; the
|
||
// entity / folder context piggybacks on the form so the file
|
||
// row lands under the right system folder. Interest-scoped
|
||
// flows keep their dedicated route so the pipeline-stage
|
||
// advance + doc-status flip side effects fire.
|
||
if (interestId) {
|
||
if (documentType === 'generic') {
|
||
throw new Error('Generic documentType requires interestId=null');
|
||
}
|
||
} else {
|
||
if (entity) form.append('entity', JSON.stringify({ type: entity.type, id: entity.id }));
|
||
if (folderId) form.append('folderId', folderId);
|
||
}
|
||
const endpoint = interestId
|
||
? `/api/v1/interests/${interestId}/upload-for-signing`
|
||
: `/api/v1/upload-for-signing`;
|
||
const res = await fetch(endpoint, {
|
||
method: 'POST',
|
||
body: form,
|
||
credentials: 'include',
|
||
});
|
||
if (!res.ok) {
|
||
const body = (await res.json().catch(() => ({}))) as {
|
||
error?: string;
|
||
requestId?: string;
|
||
};
|
||
const err = new Error(body.error ?? 'Upload failed');
|
||
// Tack the requestId onto the Error so toastError can surface it.
|
||
(err as Error & { requestId?: string }).requestId = body.requestId;
|
||
throw err;
|
||
}
|
||
return res.json() as Promise<{
|
||
data: { documentId: string; signingUrls: Record<string, string> };
|
||
}>;
|
||
},
|
||
onSuccess: (res) => {
|
||
toast.success(
|
||
defaults?.data?.sendMode === 'auto'
|
||
? 'Document sent for signing - first signer has been invited.'
|
||
: 'Document uploaded and ready to send. Use the Send button on the doc to email the first signer.',
|
||
);
|
||
queryClient.invalidateQueries({ predicate: (q) => q.queryKey[0] === 'documents' });
|
||
queryClient.invalidateQueries({ predicate: (q) => q.queryKey[0] === 'interest' });
|
||
queryClient.invalidateQueries({ predicate: (q) => q.queryKey[0] === 'files' });
|
||
if (onCreated && res?.data?.documentId) {
|
||
onCreated({ documentId: res.data.documentId });
|
||
}
|
||
// Clear the draft on successful submission - the in-flight upload
|
||
// is now an actual document; the localStorage shouldn't keep its
|
||
// shadow around.
|
||
clearDraft(draftScopeId, documentType);
|
||
onClose();
|
||
},
|
||
onError: (err) => toastError(err, 'Upload failed'),
|
||
});
|
||
|
||
// ─── Step renderers ─────────────────────────────────────────────
|
||
return (
|
||
<>
|
||
<DialogHeader className="px-6 pt-6 pb-2 flex-shrink-0">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="min-w-0 flex-1">
|
||
<DialogTitle>Send {docLabel.toLowerCase()} for signing</DialogTitle>
|
||
<DialogDescription>
|
||
{step === 'select-file' && 'Upload the draft PDF to send via Documenso.'}
|
||
{step === 'configure-recipients' && 'Confirm who needs to sign and in what order.'}
|
||
{step === 'place-fields' &&
|
||
'Place signing fields where each recipient needs to sign, date, or fill in. Click a palette button then click on the PDF to place a field.'}
|
||
</DialogDescription>
|
||
</div>
|
||
{/* Draft-saved indicator + Discard button. Renders when there's
|
||
a persisted draft so the rep knows progress is saved across
|
||
dialog open / close cycles. Discard wipes the draft and
|
||
resets to the file-picker step. The file itself isn't
|
||
persisted (large blobs + browser quota), so on reopen the
|
||
rep needs to re-pick the PDF - the rest of the state
|
||
(title, signers, placements, custom note) survives. */}
|
||
{draftSavedAt ? (
|
||
<div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
|
||
<span title={`Draft auto-saved ${new Date(draftSavedAt).toLocaleString()}`}>
|
||
Draft saved
|
||
</span>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-6 px-2 text-[11px] text-muted-foreground hover:text-destructive"
|
||
onClick={discardDraft}
|
||
>
|
||
Discard
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</DialogHeader>
|
||
|
||
<div className="flex-1 overflow-hidden flex flex-col">
|
||
{step === 'select-file' && (
|
||
<FilePickerStep
|
||
onFileSelected={(f) => {
|
||
setFile(f);
|
||
setTitle(f.name.replace(/\.pdf$/i, ''));
|
||
// Seed recipients from the prefill snapshot when the rep
|
||
// first lands a file - only if they haven't already
|
||
// edited the list. This pattern keeps the prefill
|
||
// synchronization in user-event handlers (no setState-
|
||
// in-effect lint trip).
|
||
if (recipients.length === 0 && prefillRecipients.length > 0) {
|
||
setRecipients(prefillRecipients);
|
||
}
|
||
setStep('configure-recipients');
|
||
autoDetect.mutate(f);
|
||
}}
|
||
title={title}
|
||
onTitleChange={setTitle}
|
||
/>
|
||
)}
|
||
{step === 'configure-recipients' && (
|
||
<RecipientsStep
|
||
recipients={recipients}
|
||
onChange={setRecipients}
|
||
title={title}
|
||
onTitleChange={setTitle}
|
||
invitationMessage={invitationMessage}
|
||
onInvitationMessageChange={setInvitationMessage}
|
||
/>
|
||
)}
|
||
{step === 'place-fields' && fileBytes && (
|
||
<FieldPlacementStep
|
||
fileBytes={fileBytes}
|
||
fields={fields}
|
||
onFieldsChange={setFields}
|
||
recipients={recipients}
|
||
selectedFieldId={selectedFieldId}
|
||
onSelectField={setSelectedFieldId}
|
||
isDetecting={autoDetect.isPending}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
<DialogFooter className="px-6 py-4 border-t flex-shrink-0 flex items-center gap-2">
|
||
<StepIndicator step={step} />
|
||
<div className="ml-auto flex gap-2">
|
||
{step === 'configure-recipients' && (
|
||
<Button variant="outline" onClick={() => setStep('select-file')}>
|
||
Back
|
||
</Button>
|
||
)}
|
||
{step === 'place-fields' && (
|
||
<Button variant="outline" onClick={() => setStep('configure-recipients')}>
|
||
Back
|
||
</Button>
|
||
)}
|
||
{step !== 'place-fields' && (
|
||
<Button
|
||
onClick={() => {
|
||
if (step === 'select-file') {
|
||
if (!file) {
|
||
toast.error('Pick a PDF first');
|
||
return;
|
||
}
|
||
if (recipients.length === 0 && prefillRecipients.length > 0) {
|
||
setRecipients(prefillRecipients);
|
||
}
|
||
setStep('configure-recipients');
|
||
} else if (step === 'configure-recipients') {
|
||
if (recipients.length === 0) {
|
||
toast.error('Add at least one recipient');
|
||
return;
|
||
}
|
||
if (recipients.some((r) => !r.email || !r.name)) {
|
||
toast.error('Every recipient needs a name and email');
|
||
return;
|
||
}
|
||
setStep('place-fields');
|
||
}
|
||
}}
|
||
>
|
||
Next
|
||
</Button>
|
||
)}
|
||
{step === 'place-fields' && (
|
||
<Button
|
||
onClick={() => sendMutation.mutate()}
|
||
disabled={sendMutation.isPending || fields.length === 0}
|
||
>
|
||
{sendMutation.isPending && <Loader2 className="size-4 mr-2 animate-spin" />}
|
||
{defaults?.data?.sendMode === 'auto' ? 'Send for signing' : 'Send'}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</DialogFooter>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function StepIndicator({ step }: { step: Step }) {
|
||
const dots = [
|
||
{ key: 'select-file', label: 'File' },
|
||
{ key: 'configure-recipients', label: 'Recipients' },
|
||
{ key: 'place-fields', label: 'Fields' },
|
||
] as const;
|
||
const activeIdx = dots.findIndex((d) => d.key === step);
|
||
return (
|
||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||
{dots.map((d, i) => (
|
||
<span key={d.key} className="flex items-center gap-1.5">
|
||
<span
|
||
className={
|
||
'size-2 rounded-full ' + (i <= activeIdx ? 'bg-foreground' : 'bg-muted-foreground/30')
|
||
}
|
||
aria-hidden
|
||
/>
|
||
<span className={i === activeIdx ? 'font-medium text-foreground' : ''}>{d.label}</span>
|
||
{i < dots.length - 1 && <span className="text-muted-foreground/40">›</span>}
|
||
</span>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Step 1: file picker ──────────────────────────────────────────
|
||
|
||
function FilePickerStep({
|
||
onFileSelected,
|
||
title,
|
||
onTitleChange,
|
||
}: {
|
||
onFileSelected: (file: File) => void;
|
||
title: string;
|
||
onTitleChange: (t: string) => void;
|
||
}) {
|
||
const [dragging, setDragging] = useState(false);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
function handleFile(f: File) {
|
||
if (!f.name.toLowerCase().endsWith('.pdf') && f.type !== 'application/pdf') {
|
||
toast.error('Only PDF files are accepted');
|
||
return;
|
||
}
|
||
onFileSelected(f);
|
||
}
|
||
|
||
return (
|
||
<div className="px-6 py-4 space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="doc-title">Document title</Label>
|
||
<Input
|
||
id="doc-title"
|
||
value={title}
|
||
onChange={(e) => onTitleChange(e.target.value)}
|
||
placeholder="e.g. Berth A-12 Sales Contract - John Smith"
|
||
/>
|
||
</div>
|
||
<div
|
||
onDragOver={(e) => {
|
||
e.preventDefault();
|
||
setDragging(true);
|
||
}}
|
||
onDragLeave={() => setDragging(false)}
|
||
onDrop={(e) => {
|
||
e.preventDefault();
|
||
setDragging(false);
|
||
const f = e.dataTransfer.files[0];
|
||
if (f) handleFile(f);
|
||
}}
|
||
className={
|
||
'rounded-lg border-2 border-dashed p-12 text-center transition-colors cursor-pointer ' +
|
||
(dragging
|
||
? 'border-foreground bg-muted/40'
|
||
: 'border-muted-foreground/30 hover:border-muted-foreground/60')
|
||
}
|
||
onClick={() => inputRef.current?.click()}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
inputRef.current?.click();
|
||
}
|
||
}}
|
||
>
|
||
<p className="text-sm text-foreground font-medium">Drop a PDF here, or click to browse</p>
|
||
<p className="text-xs text-muted-foreground mt-1">Max 50 MB.</p>
|
||
<input
|
||
ref={inputRef}
|
||
type="file"
|
||
accept="application/pdf,.pdf"
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const f = e.target.files?.[0];
|
||
if (f) handleFile(f);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Step 2: recipient configurator ───────────────────────────────
|
||
|
||
function RecipientsStep({
|
||
recipients,
|
||
onChange,
|
||
title,
|
||
onTitleChange,
|
||
invitationMessage,
|
||
onInvitationMessageChange,
|
||
}: {
|
||
recipients: Recipient[];
|
||
onChange: (next: Recipient[]) => void;
|
||
title: string;
|
||
onTitleChange: (t: string) => void;
|
||
invitationMessage: string;
|
||
onInvitationMessageChange: (next: string) => void;
|
||
}) {
|
||
function update(i: number, patch: Partial<Recipient>) {
|
||
const next = [...recipients];
|
||
next[i] = { ...next[i]!, ...patch };
|
||
onChange(next);
|
||
}
|
||
function remove(i: number) {
|
||
const next = recipients.filter((_, idx) => idx !== i);
|
||
// Reflow signingOrder
|
||
onChange(next.map((r, idx) => ({ ...r, signingOrder: idx + 1 })));
|
||
}
|
||
function add() {
|
||
onChange([
|
||
...recipients,
|
||
{
|
||
name: '',
|
||
email: '',
|
||
role: 'SIGNER',
|
||
signingOrder: recipients.length + 1,
|
||
},
|
||
]);
|
||
}
|
||
return (
|
||
<div className="px-6 py-4 space-y-4 overflow-y-auto">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="doc-title-step2">Document title</Label>
|
||
<Input id="doc-title-step2" value={title} onChange={(e) => onTitleChange(e.target.value)} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>Recipients (in signing order)</Label>
|
||
<div className="space-y-2">
|
||
{recipients.map((r, i) => (
|
||
<div key={i} className="flex gap-2 items-center">
|
||
<span className="w-8 shrink-0 text-xs text-center text-muted-foreground tabular-nums">
|
||
#{r.signingOrder}
|
||
</span>
|
||
<Input
|
||
className="flex-1 min-w-0"
|
||
placeholder="Name"
|
||
value={r.name}
|
||
onChange={(e) => update(i, { name: e.target.value })}
|
||
/>
|
||
<Input
|
||
className="flex-[2] min-w-0"
|
||
placeholder="email@example.com"
|
||
type="email"
|
||
value={r.email}
|
||
onChange={(e) => update(i, { email: e.target.value })}
|
||
/>
|
||
<Select
|
||
value={r.role}
|
||
onValueChange={(v) => update(i, { role: v as Recipient['role'] })}
|
||
>
|
||
<SelectTrigger className="w-40 shrink-0">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="SIGNER">Signer</SelectItem>
|
||
<SelectItem value="APPROVER">Approver</SelectItem>
|
||
<SelectItem value="CC">CC (no signing)</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => remove(i)}
|
||
aria-label="Remove recipient"
|
||
className="shrink-0"
|
||
>
|
||
<Trash2 className="size-4" aria-hidden />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Button type="button" variant="outline" size="sm" onClick={add} className="gap-1.5">
|
||
<Plus className="size-4" aria-hidden /> Add recipient
|
||
</Button>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="invitation-message">
|
||
Optional message to include in the signing invitation
|
||
</Label>
|
||
<textarea
|
||
id="invitation-message"
|
||
value={invitationMessage}
|
||
onChange={(e) => onInvitationMessageChange(e.target.value)}
|
||
placeholder="Hi John, please review the attached contract before signing. Reach out if anything needs adjusting."
|
||
rows={6}
|
||
maxLength={1000}
|
||
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
Appears above the Sign button in every recipient’s invitation email. Plain text
|
||
only; 1000 characters max.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Step 3: field placement overlay ──────────────────────────────
|
||
|
||
function FieldPlacementStep({
|
||
fileBytes,
|
||
fields,
|
||
onFieldsChange,
|
||
recipients,
|
||
selectedFieldId,
|
||
onSelectField,
|
||
isDetecting,
|
||
}: {
|
||
fileBytes: Uint8Array;
|
||
fields: PlacedField[];
|
||
onFieldsChange: (next: PlacedField[]) => void;
|
||
recipients: Recipient[];
|
||
selectedFieldId: string | null;
|
||
onSelectField: (id: string | null) => void;
|
||
isDetecting: boolean;
|
||
}) {
|
||
const [numPages, setNumPages] = useState(1);
|
||
const [pageNumber, setPageNumber] = useState(1);
|
||
const [placingType, setPlacingType] = useState<FieldType | null>(null);
|
||
// PDF render zoom - defaults to 1 (the historical fixed scale). Buttons
|
||
// below the page-nav let reps zoom out for an overview or zoom in for
|
||
// tight placement work. Field coordinates stay in % of page dimensions
|
||
// so the placed-field overlay scales automatically with the PDF.
|
||
const [pdfScale, setPdfScale] = useState(1);
|
||
// Surfaces a useful error message when the PDF fails to load (CORS
|
||
// mismatch, malformed file, worker init failure). Previously the
|
||
// dialog showed an infinite spinner that gave reps no signal to act on.
|
||
const [pdfLoadError, setPdfLoadError] = useState<string | null>(null);
|
||
const pageContainerRef = useRef<HTMLDivElement>(null);
|
||
|
||
// react-pdf re-creates its internal PDF document whenever the `file`
|
||
// prop's reference identity changes, so the `{ data }` object MUST
|
||
// be memoized - otherwise every render restarts parsing from scratch
|
||
// and flickers the placeholder.
|
||
const pdfFileSource = useMemo(() => ({ data: fileBytes }), [fileBytes]);
|
||
|
||
const pageFields = useMemo(
|
||
() => fields.filter((f) => f.pageNumber === pageNumber),
|
||
[fields, pageNumber],
|
||
);
|
||
|
||
function placeFieldAt(clientX: number, clientY: number, container: HTMLElement) {
|
||
if (!placingType) return;
|
||
const rect = container.getBoundingClientRect();
|
||
const pageX = ((clientX - rect.left) / rect.width) * 100;
|
||
const pageY = ((clientY - rect.top) / rect.height) * 100;
|
||
const defaults = FIELD_DEFAULTS[placingType];
|
||
const newField: PlacedField = {
|
||
id: `f-${Math.random().toString(36).slice(2, 10)}`,
|
||
type: placingType,
|
||
recipientIndex: 0,
|
||
pageNumber,
|
||
pageX: Math.max(0, Math.min(100 - defaults.widthPct, pageX - defaults.widthPct / 2)),
|
||
pageY: Math.max(0, Math.min(100 - defaults.heightPct, pageY - defaults.heightPct / 2)),
|
||
pageWidth: defaults.widthPct,
|
||
pageHeight: defaults.heightPct,
|
||
};
|
||
onFieldsChange([...fields, newField]);
|
||
onSelectField(newField.id);
|
||
setPlacingType(null);
|
||
}
|
||
|
||
function updateField(id: string, patch: Partial<PlacedField>) {
|
||
onFieldsChange(fields.map((f) => (f.id === id ? { ...f, ...patch } : f)));
|
||
}
|
||
function removeField(id: string) {
|
||
onFieldsChange(fields.filter((f) => f.id !== id));
|
||
if (selectedFieldId === id) onSelectField(null);
|
||
}
|
||
|
||
// Keyboard shortcuts on the placement canvas - Delete / Backspace
|
||
// removes the selected field; arrow keys nudge it by 0.5% (Shift = 5%
|
||
// for coarser moves). Listens at document level so the handler still
|
||
// fires when the rep's focus is on the PDF canvas (which doesn't take
|
||
// text input).
|
||
useEffect(() => {
|
||
function onKey(e: KeyboardEvent) {
|
||
if (!selectedFieldId) return;
|
||
// Ignore when the focus is on a real input / textarea so the
|
||
// shortcuts never steal typing.
|
||
const tgt = e.target as HTMLElement | null;
|
||
if (
|
||
tgt &&
|
||
(tgt.tagName === 'INPUT' ||
|
||
tgt.tagName === 'TEXTAREA' ||
|
||
tgt.tagName === 'SELECT' ||
|
||
tgt.isContentEditable)
|
||
) {
|
||
return;
|
||
}
|
||
const field = fields.find((f) => f.id === selectedFieldId);
|
||
if (!field) return;
|
||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||
e.preventDefault();
|
||
removeField(selectedFieldId);
|
||
return;
|
||
}
|
||
if (e.key.startsWith('Arrow')) {
|
||
const step = e.shiftKey ? 5 : 0.5;
|
||
const patch: Partial<PlacedField> = {};
|
||
if (e.key === 'ArrowUp') patch.pageY = Math.max(0, field.pageY - step);
|
||
if (e.key === 'ArrowDown')
|
||
patch.pageY = Math.min(100 - field.pageHeight, field.pageY + step);
|
||
if (e.key === 'ArrowLeft') patch.pageX = Math.max(0, field.pageX - step);
|
||
if (e.key === 'ArrowRight')
|
||
patch.pageX = Math.min(100 - field.pageWidth, field.pageX + step);
|
||
if (Object.keys(patch).length > 0) {
|
||
e.preventDefault();
|
||
updateField(selectedFieldId, patch);
|
||
}
|
||
}
|
||
}
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [selectedFieldId, fields, onFieldsChange]); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
return (
|
||
<div className="flex-1 flex overflow-hidden">
|
||
{/* Field palette */}
|
||
<div className="w-44 border-r p-3 flex-shrink-0 overflow-y-auto bg-muted/30">
|
||
<p className="text-xs font-medium text-muted-foreground mb-2">Field palette</p>
|
||
<div className="space-y-1">
|
||
{(Object.keys(FIELD_DEFAULTS) as FieldType[])
|
||
.filter((t) => t !== 'FREE_SIGNATURE') // collapsed with SIGNATURE for the palette
|
||
.map((t) => {
|
||
const def = FIELD_DEFAULTS[t];
|
||
const Icon = def.icon;
|
||
return (
|
||
<button
|
||
key={t}
|
||
type="button"
|
||
onClick={() => setPlacingType(t === placingType ? null : t)}
|
||
className={
|
||
'w-full text-left text-xs px-2 py-1.5 rounded flex items-center gap-2 transition ' +
|
||
(placingType === t
|
||
? 'bg-foreground text-background'
|
||
: 'hover:bg-background border border-transparent hover:border-border')
|
||
}
|
||
>
|
||
<Icon className="size-3.5" aria-hidden />
|
||
{def.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
{placingType && (
|
||
<p className="mt-3 text-xs text-muted-foreground">
|
||
Click on the PDF to place a {FIELD_DEFAULTS[placingType].label.toLowerCase()}.
|
||
</p>
|
||
)}
|
||
<hr className="my-3 border-muted-foreground/20" />
|
||
<p className="text-xs font-medium text-muted-foreground mb-2">Recipients</p>
|
||
<div className="space-y-1">
|
||
{recipients.map((r, i) => (
|
||
<div key={i} className="text-xs flex items-center gap-2">
|
||
<span
|
||
className="size-2 rounded-full shrink-0"
|
||
style={{ backgroundColor: RECIPIENT_COLORS[i % RECIPIENT_COLORS.length] }}
|
||
aria-hidden
|
||
/>
|
||
<span className="truncate">{r.name || r.email || `#${r.signingOrder}`}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* PDF + overlay */}
|
||
<div className="flex-1 flex flex-col overflow-hidden">
|
||
<div className="flex items-center gap-2 border-b bg-muted/20 px-3 py-2 text-sm">
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
disabled={pageNumber <= 1}
|
||
onClick={() => setPageNumber((p) => Math.max(1, p - 1))}
|
||
aria-label="Previous page"
|
||
>
|
||
<ChevronLeft className="size-4" />
|
||
</Button>
|
||
<span className="min-w-[80px] text-center tabular-nums">
|
||
{pageNumber} / {numPages}
|
||
</span>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
disabled={pageNumber >= numPages}
|
||
onClick={() => setPageNumber((p) => Math.min(numPages, p + 1))}
|
||
aria-label="Next page"
|
||
>
|
||
<ChevronRight className="size-4" />
|
||
</Button>
|
||
{/* Zoom controls - render zoom only, field coordinates stay
|
||
in % so placements scale automatically with the canvas. */}
|
||
<div className="ml-3 flex items-center gap-1 border-l pl-3">
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
disabled={pdfScale <= 0.5}
|
||
onClick={() => setPdfScale((s) => Math.max(0.5, Math.round((s - 0.25) * 100) / 100))}
|
||
aria-label="Zoom out"
|
||
>
|
||
<span className="text-base font-bold leading-none">−</span>
|
||
</Button>
|
||
<span className="min-w-[44px] text-center text-xs tabular-nums text-muted-foreground">
|
||
{Math.round(pdfScale * 100)}%
|
||
</span>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
disabled={pdfScale >= 2}
|
||
onClick={() => setPdfScale((s) => Math.min(2, Math.round((s + 0.25) * 100) / 100))}
|
||
aria-label="Zoom in"
|
||
>
|
||
<span className="text-base font-bold leading-none">+</span>
|
||
</Button>
|
||
</div>
|
||
{isDetecting && (
|
||
<span className="ml-3 flex items-center gap-1.5 text-xs text-muted-foreground">
|
||
<Loader2 className="size-3 animate-spin" /> Auto-detecting fields…
|
||
</span>
|
||
)}
|
||
<span className="ml-auto text-xs text-muted-foreground tabular-nums">
|
||
{fields.length} {fields.length === 1 ? 'field' : 'fields'} placed
|
||
</span>
|
||
</div>
|
||
<div className="flex-1 overflow-auto bg-muted/30 p-4">
|
||
<div
|
||
ref={pageContainerRef}
|
||
className="relative mx-auto bg-white shadow"
|
||
style={{ width: 'fit-content', cursor: placingType ? 'crosshair' : 'default' }}
|
||
onClick={(e) => {
|
||
if (!placingType) return;
|
||
if (!pageContainerRef.current) return;
|
||
// Bail when the click landed on an existing field (we
|
||
// handle those via the field's own onClick).
|
||
if ((e.target as HTMLElement).closest('[data-field-id]')) return;
|
||
placeFieldAt(e.clientX, e.clientY, pageContainerRef.current);
|
||
}}
|
||
>
|
||
{pdfLoadError ? (
|
||
<div className="flex h-96 w-[600px] flex-col items-center justify-center gap-2 text-center text-sm text-muted-foreground">
|
||
<p className="font-medium text-destructive">PDF preview failed to load</p>
|
||
<p className="font-mono text-xs break-all">{pdfLoadError}</p>
|
||
<p className="text-xs">
|
||
Field placement still works once the file is uploaded; placements drag onto a
|
||
blank canvas. Re-pick the file from step 1 to retry.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<Document
|
||
// Passing { data } gives PDF.js the raw bytes directly,
|
||
// so its (cross-origin) Web Worker doesn't have to fetch
|
||
// anything - this is the only way to make react-pdf work
|
||
// when the worker is loaded from a CDN.
|
||
file={pdfFileSource}
|
||
onLoadSuccess={({ numPages: n }) => {
|
||
setNumPages(n);
|
||
setPdfLoadError(null);
|
||
}}
|
||
onLoadError={(err) => {
|
||
setPdfLoadError(err instanceof Error ? err.message : 'Unknown error');
|
||
}}
|
||
loading={
|
||
<div className="flex h-64 w-96 items-center justify-center text-sm text-muted-foreground">
|
||
<Loader2 className="size-4 mr-2 animate-spin" /> Loading PDF…
|
||
</div>
|
||
}
|
||
>
|
||
<Page
|
||
pageNumber={pageNumber}
|
||
scale={pdfScale}
|
||
renderAnnotationLayer={false}
|
||
renderTextLayer={false}
|
||
/>
|
||
</Document>
|
||
)}
|
||
{/* Overlay layer */}
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
{pageFields.map((field) => (
|
||
<FieldOverlay
|
||
key={field.id}
|
||
field={field}
|
||
selected={selectedFieldId === field.id}
|
||
recipients={recipients}
|
||
onSelect={() => onSelectField(field.id)}
|
||
onUpdate={(patch) => updateField(field.id, patch)}
|
||
onRemove={() => removeField(field.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Side panel for selected field */}
|
||
{selectedFieldId && (
|
||
<FieldSidePanel
|
||
field={fields.find((f) => f.id === selectedFieldId)!}
|
||
recipients={recipients}
|
||
onUpdate={(patch) => updateField(selectedFieldId, patch)}
|
||
onRemove={() => removeField(selectedFieldId)}
|
||
onClose={() => onSelectField(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FieldOverlay({
|
||
field,
|
||
selected,
|
||
recipients,
|
||
onSelect,
|
||
onUpdate,
|
||
onRemove,
|
||
}: {
|
||
field: PlacedField;
|
||
selected: boolean;
|
||
recipients: Recipient[];
|
||
onSelect: () => void;
|
||
onUpdate: (patch: Partial<PlacedField>) => void;
|
||
onRemove: () => void;
|
||
}) {
|
||
const Icon = FIELD_DEFAULTS[field.type].icon;
|
||
const color = RECIPIENT_COLORS[field.recipientIndex % RECIPIENT_COLORS.length];
|
||
const recipient = recipients[field.recipientIndex];
|
||
|
||
// Drag handler - translate mouse-move pixels into percent deltas
|
||
// against the parent container's bounding rect.
|
||
function startDrag(e: React.MouseEvent) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onSelect();
|
||
const container = (e.currentTarget.parentElement?.parentElement as HTMLElement) ?? null;
|
||
if (!container) return;
|
||
const rect = container.getBoundingClientRect();
|
||
const startX = e.clientX;
|
||
const startY = e.clientY;
|
||
const startPageX = field.pageX;
|
||
const startPageY = field.pageY;
|
||
|
||
function onMove(ev: MouseEvent) {
|
||
const dxPct = ((ev.clientX - startX) / rect.width) * 100;
|
||
const dyPct = ((ev.clientY - startY) / rect.height) * 100;
|
||
onUpdate({
|
||
pageX: Math.max(0, Math.min(100 - field.pageWidth, startPageX + dxPct)),
|
||
pageY: Math.max(0, Math.min(100 - field.pageHeight, startPageY + dyPct)),
|
||
});
|
||
}
|
||
function onUp() {
|
||
window.removeEventListener('mousemove', onMove);
|
||
window.removeEventListener('mouseup', onUp);
|
||
}
|
||
window.addEventListener('mousemove', onMove);
|
||
window.addEventListener('mouseup', onUp);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
data-field-id={field.id}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onSelect();
|
||
}}
|
||
onMouseDown={startDrag}
|
||
className={
|
||
'absolute pointer-events-auto cursor-move rounded border-2 text-xs flex items-center gap-1 px-1 ' +
|
||
(selected ? 'ring-2 ring-offset-1 ring-foreground' : '')
|
||
}
|
||
style={{
|
||
left: `${field.pageX}%`,
|
||
top: `${field.pageY}%`,
|
||
width: `${field.pageWidth}%`,
|
||
height: `${field.pageHeight}%`,
|
||
backgroundColor: color + '22',
|
||
borderColor: color,
|
||
}}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label={`${FIELD_DEFAULTS[field.type].label} for ${recipient?.name ?? 'unassigned'}`}
|
||
>
|
||
<Icon className="size-3 shrink-0" aria-hidden style={{ color }} />
|
||
<span className="truncate" style={{ color }}>
|
||
{FIELD_DEFAULTS[field.type].label}
|
||
</span>
|
||
{selected && (
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onRemove();
|
||
}}
|
||
className="ml-auto rounded p-0.5 hover:bg-background/60"
|
||
aria-label="Delete field"
|
||
>
|
||
<X className="size-3" aria-hidden />
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FieldSidePanel({
|
||
field,
|
||
recipients,
|
||
onUpdate,
|
||
onRemove,
|
||
onClose,
|
||
}: {
|
||
field: PlacedField;
|
||
recipients: Recipient[];
|
||
onUpdate: (patch: Partial<PlacedField>) => void;
|
||
onRemove: () => void;
|
||
onClose: () => void;
|
||
}) {
|
||
return (
|
||
<div className="w-64 border-l p-4 flex-shrink-0 bg-background space-y-3 overflow-y-auto">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-sm font-medium">Field properties</p>
|
||
<Button variant="ghost" size="icon" onClick={onClose} aria-label="Close panel">
|
||
<X className="size-4" aria-hidden />
|
||
</Button>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label className="text-xs">Type</Label>
|
||
<Select value={field.type} onValueChange={(v) => onUpdate({ type: v as FieldType })}>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{(Object.keys(FIELD_DEFAULTS) as FieldType[]).map((t) => (
|
||
<SelectItem key={t} value={t}>
|
||
{FIELD_DEFAULTS[t].label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label className="text-xs">Recipient</Label>
|
||
<Select
|
||
value={String(field.recipientIndex)}
|
||
onValueChange={(v) => onUpdate({ recipientIndex: Number(v) })}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{recipients.map((r, i) => (
|
||
<SelectItem key={i} value={String(i)}>
|
||
#{r.signingOrder} {r.name || r.email}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Width %</Label>
|
||
<Input
|
||
type="number"
|
||
value={field.pageWidth.toFixed(1)}
|
||
onChange={(e) => onUpdate({ pageWidth: Number(e.target.value) })}
|
||
step="0.5"
|
||
min="1"
|
||
max="100"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Height %</Label>
|
||
<Input
|
||
type="number"
|
||
value={field.pageHeight.toFixed(1)}
|
||
onChange={(e) => onUpdate({ pageHeight: Number(e.target.value) })}
|
||
step="0.5"
|
||
min="1"
|
||
max="100"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<FieldMetaSubPanel field={field} onUpdate={onUpdate} />
|
||
|
||
<Button variant="destructive" size="sm" onClick={onRemove} className="w-full gap-1.5">
|
||
<Trash2 className="size-4" aria-hidden /> Delete field
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Editable list for CHECKBOX / RADIO / DROPDOWN options. Kept top-level
|
||
* so React doesn't recreate the component subtree on every keystroke
|
||
* (react-hooks/static-components rule). Single-select variants render
|
||
* radio inputs that mutually exclude defaults; multi-select renders
|
||
* checkboxes.
|
||
*/
|
||
function ChoiceMetaEditor({
|
||
options,
|
||
onChange,
|
||
singleSelect,
|
||
}: {
|
||
options: Array<{ value: string; checked?: boolean }>;
|
||
onChange: (next: Array<{ value: string; checked?: boolean }>) => void;
|
||
singleSelect: boolean;
|
||
}) {
|
||
return (
|
||
<div className="space-y-1.5">
|
||
<div className="flex items-center justify-between">
|
||
<Label className="text-xs">Options</Label>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-6 text-xs"
|
||
onClick={() =>
|
||
onChange([...options, { value: `Option ${options.length + 1}`, checked: false }])
|
||
}
|
||
>
|
||
+ Add
|
||
</Button>
|
||
</div>
|
||
{options.length === 0 ? (
|
||
<p className="text-xs text-muted-foreground">No options yet, add at least one.</p>
|
||
) : (
|
||
<ul className="space-y-1">
|
||
{options.map((opt, idx) => (
|
||
<li key={idx} className="flex items-center gap-1.5">
|
||
<input
|
||
type={singleSelect ? 'radio' : 'checkbox'}
|
||
name="choice-meta"
|
||
checked={!!opt.checked}
|
||
onChange={() => {
|
||
const next = options.map((o, i) =>
|
||
singleSelect
|
||
? { ...o, checked: i === idx }
|
||
: i === idx
|
||
? { ...o, checked: !o.checked }
|
||
: o,
|
||
);
|
||
onChange(next);
|
||
}}
|
||
aria-label={`${opt.value} default ${singleSelect ? 'selection' : 'checked'}`}
|
||
className="size-3.5 shrink-0"
|
||
/>
|
||
<Input
|
||
value={opt.value}
|
||
onChange={(e) => {
|
||
const next = options.map((o, i) =>
|
||
i === idx ? { ...o, value: e.target.value } : o,
|
||
);
|
||
onChange(next);
|
||
}}
|
||
className="h-7 text-xs"
|
||
/>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-6 w-6 p-0 shrink-0"
|
||
onClick={() => onChange(options.filter((_, i) => i !== idx))}
|
||
aria-label="Remove option"
|
||
>
|
||
<X className="size-3" aria-hidden />
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Per-field-type config (Documenso v2 fieldMeta). Surfaces inputs only
|
||
* when the field type carries per-instance config; SIGNATURE / INITIALS /
|
||
* DATE / EMAIL / NAME fields render nothing here. Edits write into
|
||
* `field.fieldMeta` shallowly so the v2 create-many payload receives
|
||
* the shape Documenso expects.
|
||
*/
|
||
function FieldMetaSubPanel({
|
||
field,
|
||
onUpdate,
|
||
}: {
|
||
field: PlacedField;
|
||
onUpdate: (patch: Partial<PlacedField>) => void;
|
||
}) {
|
||
const meta: Record<string, unknown> = (field.fieldMeta as Record<string, unknown>) ?? {};
|
||
function patchMeta(diff: Record<string, unknown>) {
|
||
onUpdate({ fieldMeta: { ...meta, ...diff } });
|
||
}
|
||
|
||
if (field.type === 'TEXT') {
|
||
return (
|
||
<div className="space-y-2 rounded-md border bg-muted/30 p-2">
|
||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||
Text settings
|
||
</p>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Default text</Label>
|
||
<Input
|
||
value={typeof meta.text === 'string' ? meta.text : ''}
|
||
onChange={(e) => patchMeta({ text: e.target.value })}
|
||
className="h-7 text-xs"
|
||
placeholder="Pre-filled value the signer sees"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Label</Label>
|
||
<Input
|
||
value={typeof meta.label === 'string' ? meta.label : ''}
|
||
onChange={(e) => patchMeta({ label: e.target.value })}
|
||
className="h-7 text-xs"
|
||
placeholder="Helper text above the field"
|
||
/>
|
||
</div>
|
||
<label className="flex items-center gap-2 text-xs">
|
||
<input
|
||
type="checkbox"
|
||
checked={meta.required === true}
|
||
onChange={(e) => patchMeta({ required: e.target.checked })}
|
||
className="size-3.5"
|
||
/>
|
||
Required
|
||
</label>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (field.type === 'NUMBER') {
|
||
return (
|
||
<div className="space-y-2 rounded-md border bg-muted/30 p-2">
|
||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||
Number settings
|
||
</p>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Format</Label>
|
||
<Input
|
||
value={typeof meta.numberFormat === 'string' ? meta.numberFormat : ''}
|
||
onChange={(e) => patchMeta({ numberFormat: e.target.value })}
|
||
className="h-7 text-xs"
|
||
placeholder="e.g. 0.00, $#,##0"
|
||
/>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-1.5">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Min</Label>
|
||
<Input
|
||
type="number"
|
||
value={typeof meta.min === 'number' ? meta.min : ''}
|
||
onChange={(e) =>
|
||
patchMeta({ min: e.target.value === '' ? undefined : Number(e.target.value) })
|
||
}
|
||
className="h-7 text-xs"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">Max</Label>
|
||
<Input
|
||
type="number"
|
||
value={typeof meta.max === 'number' ? meta.max : ''}
|
||
onChange={(e) =>
|
||
patchMeta({ max: e.target.value === '' ? undefined : Number(e.target.value) })
|
||
}
|
||
className="h-7 text-xs"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<label className="flex items-center gap-2 text-xs">
|
||
<input
|
||
type="checkbox"
|
||
checked={meta.required === true}
|
||
onChange={(e) => patchMeta({ required: e.target.checked })}
|
||
className="size-3.5"
|
||
/>
|
||
Required
|
||
</label>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (field.type === 'CHECKBOX' || field.type === 'RADIO' || field.type === 'DROPDOWN') {
|
||
const rawValues = (meta.values as Array<{ value: string; checked?: boolean }>) ?? [];
|
||
return (
|
||
<div className="space-y-2 rounded-md border bg-muted/30 p-2">
|
||
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
||
{field.type === 'CHECKBOX'
|
||
? 'Checkbox options'
|
||
: field.type === 'RADIO'
|
||
? 'Radio options'
|
||
: 'Dropdown options'}
|
||
</p>
|
||
<ChoiceMetaEditor
|
||
options={rawValues}
|
||
onChange={(next) => patchMeta({ values: next })}
|
||
singleSelect={field.type !== 'CHECKBOX'}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// SIGNATURE / INITIALS / DATE / EMAIL / NAME carry no per-instance
|
||
// configuration in Documenso v2 today.
|
||
return null;
|
||
}
|