onDocumentLoaded(d)}
externalLinkTarget="_blank"
@@ -74,9 +132,13 @@ export const PDFViewer = ({ className, document, ...props }: PDFViewerProps) =>
.map((_, i) => (
-
+
onDocumentPageClick(e, i + 1)}
+ />
diff --git a/apps/web/src/components/forms/edit-document.tsx b/apps/web/src/components/forms/edit-document.tsx
new file mode 100644
index 000000000..d89892de4
--- /dev/null
+++ b/apps/web/src/components/forms/edit-document.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+import { Document, User } 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';
+
+import { AddFieldsFormPartial } from './edit-document/add-fields';
+import { AddSignersFormPartial } from './edit-document/add-signers';
+import { TEditDocumentFormSchema, ZEditDocumentFormSchema } from './edit-document/types';
+
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+ ssr: false,
+ loading: () => (
+
+
+
+
Loading document...
+
+ ),
+});
+
+const MAX_STEP = 2;
+
+export type EditDocumentFormProps = {
+ className?: string;
+ user: User;
+ document: Document;
+};
+
+export const EditDocumentForm = ({ className, document, user: _user }: EditDocumentFormProps) => {
+ const documentUrl = `data:application/pdf;base64,${document.document}`;
+
+ const [step, setStep] = useState(0);
+
+ const {
+ control,
+ // handleSubmit,
+ watch,
+ formState: { errors, isSubmitting, isValid },
+ } = useForm
({
+ mode: 'onBlur',
+ defaultValues: {
+ signers: [
+ {
+ name: '',
+ email: '',
+ },
+ ],
+ },
+ resolver: zodResolver(ZEditDocumentFormSchema),
+ });
+
+ const canGoBack = step > 0;
+ const canGoNext = isValid && step < MAX_STEP;
+
+ const onGoBackClick = () => setStep((prev) => Math.max(0, prev - 1));
+ const onGoNextClick = () => setStep((prev) => Math.min(MAX_STEP, prev + 1));
+
+ return (
+
+
+
+
+
+
+
+
+
+ {step === 0 && (
+
+ )}
+
+ {step === 1 && (
+
+ )}
+
+
+
+ Add Signers ({step + 1}/{MAX_STEP + 1})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Edit Document
+
+
Add all relevant fields for each recipient.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {signers.map((signer, index) => (
+ setSelectedSigner(signer)}>
+
+ {signer.name && (
+
+ {signer.name} ({signer.email})
+
+ )}
+
+ {!signer.name && {signer.email}}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Add Signers
+
+
Add the people who will sign the document.
+
+
+
+
+
+
+ {signers.map((field, index) => (
+
+
+
+
+ (
+
+ )}
+ />
+
+
+
+
+
+ (
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+