diff --git a/apps/web/package.json b/apps/web/package.json index c7db16aa6..d493b92d9 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -21,6 +21,7 @@ "framer-motion": "^10.12.8", "lucide-react": "^0.214.0", "micro": "^10.0.1", + "nanoid": "^4.0.2", "next": "13.4.1", "next-auth": "^4.22.1", "next-plausible": "^3.7.2", @@ -32,6 +33,7 @@ "react-hook-form": "^7.43.9", "react-icons": "^4.8.0", "react-pdf": "^7.1.1", + "react-rnd": "^10.4.1", "typescript": "5.0.4", "zod": "^3.21.4" }, diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx index a83e2949a..7f3b76909 100644 --- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx +++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx @@ -5,6 +5,8 @@ import { ChevronLeft } from 'lucide-react'; import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session'; import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id'; +import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document'; +import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document'; import { EditDocumentForm } from '~/components/forms/edit-document'; @@ -34,6 +36,17 @@ export default async function DocumentPage({ params }: DocumentPageProps) { redirect('/documents'); } + const [recipients, fields] = await Promise.all([ + await getRecipientsForDocument({ + documentId, + userId: session.id, + }), + await getFieldsForDocument({ + documentId, + userId: session.id, + }), + ]); + return (
@@ -48,7 +61,13 @@ export default async function DocumentPage({ params }: DocumentPageProps) { {document.title} - +
); } diff --git a/apps/web/src/components/form/form-error-message.tsx b/apps/web/src/components/form/form-error-message.tsx index 059a2eb83..6fa7c32b0 100644 --- a/apps/web/src/components/form/form-error-message.tsx +++ b/apps/web/src/components/form/form-error-message.tsx @@ -1,11 +1,10 @@ import { AnimatePresence, motion } from 'framer-motion'; -import { FieldError } from 'react-hook-form'; import { cn } from '@documenso/ui/lib/utils'; export type FormErrorMessageProps = { className?: string; - error: FieldError | undefined; + error: { message?: string } | undefined; }; export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => { diff --git a/apps/web/src/components/forms/edit-document.tsx b/apps/web/src/components/forms/edit-document.tsx index 25dda7695..482c63fae 100644 --- a/apps/web/src/components/forms/edit-document.tsx +++ b/apps/web/src/components/forms/edit-document.tsx @@ -1,21 +1,22 @@ 'use client'; -import { useState } from 'react'; +import { useId, useState } from 'react'; import dynamic from 'next/dynamic'; import { zodResolver } from '@hookform/resolvers/zod'; import { Loader } from 'lucide-react'; -import { useTheme } from 'next-themes'; import { useForm } from 'react-hook-form'; -import { Document, User } from '@documenso/prisma/client'; +import { Document, Field, Recipient, User } from '@documenso/prisma/client'; +import { trpc } from '@documenso/trpc/react'; import { cn } from '@documenso/ui/lib/utils'; import { Button } from '@documenso/ui/primitives/button'; import { Card, CardContent } from '@documenso/ui/primitives/card'; import { AddFieldsFormPartial } from './edit-document/add-fields'; import { AddSignersFormPartial } from './edit-document/add-signers'; +import { AddSubjectFormPartial } from './edit-document/add-subject'; import { TEditDocumentFormSchema, ZEditDocumentFormSchema } from './edit-document/types'; const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), { @@ -35,57 +36,143 @@ export type EditDocumentFormProps = { className?: string; user: User; document: Document; + recipients: Recipient[]; + fields: Field[]; }; -export const EditDocumentForm = ({ className, document, user: _user }: EditDocumentFormProps) => { - const documentUrl = `data:application/pdf;base64,${document.document}`; +export const EditDocumentForm = ({ + className, + document, + recipients, + fields, + user: _user, +}: EditDocumentFormProps) => { + const initialId = useId(); const [step, setStep] = useState(0); + const [nextStepLoading, setNextStepLoading] = useState(false); + + const documentUrl = `data:application/pdf;base64,${document.document}`; + const defaultSigners = + recipients.length > 0 + ? recipients.map((recipient) => ({ + nativeId: recipient.id, + formId: `${recipient.id}-${recipient.documentId}`, + name: recipient.name, + email: recipient.email, + })) + : [ + { + formId: initialId, + name: '', + email: '', + }, + ]; + + const defaultFields = fields.map((field) => ({ + nativeId: field.id, + formId: `${field.id}-${field.documentId}`, + pageNumber: field.page, + type: field.type, + pageX: Number(field.positionX), + pageY: Number(field.positionY), + pageWidth: Number(field.width), + pageHeight: Number(field.height), + signerEmail: recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '', + })); + + const { mutateAsync: setRecipientsForDocument } = + trpc.document.setRecipientsForDocument.useMutation(); + + const { mutateAsync: setFieldsForDocument } = trpc.document.setFieldsForDocument.useMutation(); const { control, - // handleSubmit, + handleSubmit, watch, - formState: { errors, isSubmitting, isValid }, + trigger, + formState: { errors, isSubmitting }, } = useForm({ mode: 'onBlur', defaultValues: { - signers: [ - { - name: '', - email: '', - }, - ], + signers: defaultSigners, + fields: defaultFields, + email: { + subject: '', + message: '', + }, }, resolver: zodResolver(ZEditDocumentFormSchema), }); - const { theme } = useTheme(); + const signersFormValue = watch('signers'); + const fieldsFormValue = watch('fields'); + + console.log({ state: watch(), errors }); const canGoBack = step > 0; - const canGoNext = isValid && step < MAX_STEP; + const canGoNext = step < MAX_STEP; const onGoBackClick = () => setStep((prev) => Math.max(0, prev - 1)); - const onGoNextClick = () => setStep((prev) => Math.min(MAX_STEP, prev + 1)); + const onGoNextClick = async () => { + setNextStepLoading(true); + + const passes = await trigger(); + + if (step === 0) { + await setRecipientsForDocument({ + documentId: document.id, + recipients: signersFormValue.map((signer) => ({ + id: signer.nativeId ?? undefined, + name: signer.name, + email: signer.email, + })), + }).catch((err: unknown) => console.error(err)); + } + + if (step === 1) { + await setFieldsForDocument({ + documentId: document.id, + fields: fieldsFormValue.map((field) => ({ + id: field.nativeId ?? undefined, + type: field.type, + signerEmail: field.signerEmail, + pageNumber: field.pageNumber, + pageX: field.pageX, + pageY: field.pageY, + pageWidth: field.pageWidth, + pageHeight: field.pageHeight, + })), + }).catch((err: unknown) => console.error(err)); + } + + if (passes) { + setStep((prev) => Math.min(MAX_STEP, prev + 1)); + } + + console.log({ passes }); + + setNextStepLoading(false); + }; return (
- + -
-
+
+
{step === 0 && ( @@ -98,7 +185,16 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum watch={watch} errors={errors} isSubmitting={isSubmitting} - theme={theme || 'dark'} + /> + )} + + {step === 2 && ( + )} @@ -118,6 +214,7 @@ export const EditDocumentForm = ({ className, document, user: _user }: EditDocum
+ {step < MAX_STEP && ( + + )} + + {step === MAX_STEP && ( + + )}
-
+
); diff --git a/apps/web/src/components/forms/edit-document/add-fields.tsx b/apps/web/src/components/forms/edit-document/add-fields.tsx index edad9de68..cf48b1f1d 100644 --- a/apps/web/src/components/forms/edit-document/add-fields.tsx +++ b/apps/web/src/components/forms/edit-document/add-fields.tsx @@ -1,12 +1,14 @@ 'use client'; -import { useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { Caveat } from 'next/font/google'; import { Check, ChevronsUpDown } from 'lucide-react'; -import { Control, FieldErrors, UseFormWatch } from 'react-hook-form'; +import { nanoid } from 'nanoid'; +import { Control, FieldErrors, UseFormWatch, useFieldArray } from 'react-hook-form'; +import { FieldType } from '@documenso/prisma/client'; import { cn } from '@documenso/ui/lib/utils'; import { Button } from '@documenso/ui/primitives/button'; import { Card, CardContent } from '@documenso/ui/primitives/card'; @@ -19,7 +21,10 @@ import { } from '@documenso/ui/primitives/command'; import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover'; -import { TEditDocumentFormSchema } from './types'; +import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types'; + +import { FieldItem } from './field-item'; +import { FRIENDLY_FIELD_TYPE, TEditDocumentFormSchema } from './types'; const fontCaveat = Caveat({ weight: ['500'], @@ -28,30 +33,285 @@ const fontCaveat = Caveat({ variable: '--font-caveat', }); +const DEFAULT_HEIGHT_PERCENT = 5; +const DEFAULT_WIDTH_PERCENT = 15; + +const MIN_HEIGHT_PX = 60; +const MIN_WIDTH_PX = 200; + export type AddFieldsFormProps = { className?: string; control: Control; watch: UseFormWatch; errors: FieldErrors; isSubmitting: boolean; - theme: string; }; export const AddFieldsFormPartial = ({ className, - control: _control, + control: control, watch, errors: _errors, isSubmitting: _isSubmitting, - theme, }: AddFieldsFormProps) => { const signers = watch('signers'); + const fields = watch('fields'); + + const { append, remove, update } = useFieldArray({ + control, + name: 'fields', + }); const [selectedSigner, setSelectedSigner] = useState(() => signers[0]); + const [selectedField, setSelectedField] = useState(null); + + const [visible, setVisible] = useState(false); + const [coords, setCoords] = useState({ + x: 0, + y: 0, + }); + + const fieldBounds = useRef({ + height: 0, + width: 0, + }); + + const isWithinPageBounds = useCallback((event: MouseEvent) => { + if (!(event.target instanceof HTMLElement)) { + return false; + } + + const target = event.target; + const $page = + target.closest(PDF_VIEWER_PAGE_SELECTOR) ?? target.querySelector(PDF_VIEWER_PAGE_SELECTOR); + + if (!$page) { + return false; + } + + const { top, left, height, width } = $page.getBoundingClientRect(); + + if (event.clientY > top + height || event.clientY < top) { + return false; + } + + if (event.clientX > left + width || event.clientX < left) { + return false; + } + + return true; + }, []); + + const onMouseMove = useCallback( + (event: MouseEvent) => { + if (!isWithinPageBounds(event)) { + setVisible(false); + return; + } + + setVisible(true); + setCoords({ + x: event.clientX - fieldBounds.current.width / 2, + y: event.clientY - fieldBounds.current.height / 2, + }); + }, + [isWithinPageBounds], + ); + + const onMouseClick = useCallback( + (event: MouseEvent) => { + if (!selectedField) { + return; + } + + if (!(event.target instanceof HTMLElement)) { + return; + } + + const target = event.target; + + const $page = + target.closest(PDF_VIEWER_PAGE_SELECTOR) ?? + target.querySelector(PDF_VIEWER_PAGE_SELECTOR); + + if (!$page || !isWithinPageBounds(event)) { + return; + } + + const { height, width } = $page.getBoundingClientRect(); + + const top = $page.offsetTop; + const left = $page.offsetLeft; + + const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10); + + // Calculate x and y as a percentage of the page width and height + let pageX = ((event.pageX - left) / width) * 100; + let pageY = ((event.pageY - top) / height) * 100; + + // Get the bounds as a percentage of the page width and height + const fieldPageWidth = (fieldBounds.current.width / width) * 100; + const fieldPageHeight = (fieldBounds.current.height / height) * 100; + + // And center it based on the bounds + pageX -= fieldPageWidth / 2; + pageY -= fieldPageHeight / 2; + + append({ + formId: nanoid(12), + type: selectedField, + pageNumber, + pageX, + pageY, + pageWidth: fieldPageWidth, + pageHeight: fieldPageHeight, + signerEmail: selectedSigner.email, + }); + + setVisible(false); + setSelectedField(null); + }, + [append, isWithinPageBounds, selectedField, selectedSigner.email], + ); + + const onFieldResize = useCallback( + (node: HTMLElement, index: number) => { + const field = fields[index]; + + const $page = document.querySelector( + `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`, + ); + + if (!$page) { + return; + } + + const { height: pageHeight, width: pageWidth } = $page.getBoundingClientRect(); + + const pageTop = $page.offsetTop; + const pageLeft = $page.offsetLeft; + + let { top: nodeTop, left: nodeLeft } = node.getBoundingClientRect(); + const { height, width } = node.getBoundingClientRect(); + + nodeTop += window.scrollY; + nodeLeft += window.scrollX; + + // Calculate width and height as a percentage of the page width and height + const newWidth = (width / pageWidth) * 100; + const newHeight = (height / pageHeight) * 100; + + // Calculate the new position as a percentage of the page width and height + const newX = ((nodeLeft - pageLeft) / pageWidth) * 100; + const newY = ((nodeTop - pageTop) / pageHeight) * 100; + + update(index, { + ...field, + pageX: newX, + pageY: newY, + pageWidth: newWidth, + pageHeight: newHeight, + }); + }, + [fields, update], + ); + + const onFieldMove = useCallback( + (node: HTMLElement, index: number) => { + const field = fields[index]; + + const $page = document.querySelector( + `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`, + ); + + if (!$page || !($page instanceof HTMLElement)) { + return; + } + + const { height: pageHeight, width: pageWidth } = $page.getBoundingClientRect(); + + const pageTop = $page.offsetTop; + const pageLeft = $page.offsetLeft; + + let { top: nodeTop, left: nodeLeft } = node.getBoundingClientRect(); + + nodeTop += window.scrollY; + nodeLeft += window.scrollX; + + // Calculate the new position as a percentage of the page width and height + const newX = ((nodeLeft - pageLeft) / pageWidth) * 100; + const newY = ((nodeTop - pageTop) / pageHeight) * 100; + + update(index, { + ...field, + pageX: newX, + pageY: newY, + }); + }, + [fields, update], + ); + + useEffect(() => { + if (selectedField) { + window.addEventListener('mousemove', onMouseMove); + window.addEventListener('click', onMouseClick); + } + + return () => { + window.removeEventListener('mousemove', onMouseMove); + window.removeEventListener('click', onMouseClick); + }; + }, [onMouseClick, onMouseMove, selectedField]); + + useEffect(() => { + const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR); + + if (!$page) { + return; + } + + const { height, width } = $page.getBoundingClientRect(); + + fieldBounds.current = { + height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX), + width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX), + }; + }, []); + return (
-

Edit Document

+ {selectedField && visible && ( + + + {FRIENDLY_FIELD_TYPE[selectedField]} + + + )} + + {fields.map((field, index) => ( + onFieldResize(options, index)} + onMove={(options) => onFieldMove(options, index)} + onRemove={() => remove(index)} + /> + ))} + +

Add Fields

Add all relevant fields for each recipient. @@ -62,6 +322,7 @@ export const AddFieldsFormPartial = ({ - - - @@ -106,17 +150,10 @@ export const AddSignersFormPartial = ({

+ +
- diff --git a/apps/web/src/components/forms/edit-document/add-subject.tsx b/apps/web/src/components/forms/edit-document/add-subject.tsx new file mode 100644 index 000000000..2aedb0127 --- /dev/null +++ b/apps/web/src/components/forms/edit-document/add-subject.tsx @@ -0,0 +1,111 @@ +'use client'; + +import { Control, Controller, FieldErrors, UseFormWatch } from 'react-hook-form'; + +import { cn } from '@documenso/ui/lib/utils'; +import { Input } from '@documenso/ui/primitives/input'; +import { Label } from '@documenso/ui/primitives/label'; +import { Textarea } from '@documenso/ui/primitives/textarea'; + +import { FormErrorMessage } from '~/components/form/form-error-message'; + +import { TEditDocumentFormSchema } from './types'; + +export type AddSubjectFormProps = { + className?: string; + control: Control; + watch: UseFormWatch; + errors: FieldErrors; + isSubmitting: boolean; +}; + +export const AddSubjectFormPartial = ({ + className, + control, + errors, + isSubmitting, +}: AddSubjectFormProps) => { + return ( +
+

Add Subject

+ +

+ Add the subject and message you wish to send to signers. +

+ +
+ +
+
+ + + ( + + )} + /> + + +
+ +
+ + + ( +