feat: duplicate document (#633)

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -32,6 +32,7 @@ import {
 } from '@documenso/ui/primitives/dropdown-menu';
 
 import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';
+import { DuplicateDocumentDialog } from './duplicate-document-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
@@ -44,6 +45,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
 
   if (!session) {
     return null;
@@ -122,7 +124,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Download
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
@@ -165,6 +167,13 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           onOpenChange={setDeleteDialogOpen}
         />
       )}
+      {isDuplicateDialogOpen && (
+        <DuplicateDocumentDialog
+          id={row.id}
+          open={isDuplicateDialogOpen}
+          onOpenChange={setDuplicateDialogOpen}
+        />
+      )}
     </DropdownMenu>
   );
 };

apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx

@@ -0,0 +1,101 @@
+import { useRouter } from 'next/navigation';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DuplicateDocumentDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DuplicateDocumentDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: DuplicateDocumentDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const { data, isLoading } = trpcReact.document.getDocumentById.useQuery({
+    id,
+  });
+  const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
+    trpcReact.document.duplicateDocument.useMutation({
+      onSuccess: (newId) => {
+        router.push(`/documents/${newId}`);
+        toast({
+          title: 'Document Duplicated',
+          description: 'Your document has been successfully duplicated.',
+          duration: 5000,
+        });
+
+        onOpenChange(false);
+      },
+    });
+
+  const onDuplicate = async () => {
+    try {
+      await duplicateDocument({ id });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'This document could not be duplicated at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Duplicate</DialogTitle>
+        </DialogHeader>
+        {!data?.documentData || isLoading ? (
+          <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+            <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
+              Loading Document...
+            </h1>
+          </div>
+        ) : (
+          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll  ">
+            <LazyPDFViewer key={data?.documentMeta?.documentId} documentData={data?.documentData} />
+          </div>
+        )}
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+
+            <Button
+              type="button"
+              disabled={isDuplicateLoading || isLoading}
+              loading={isDuplicateLoading}
+              onClick={onDuplicate}
+              className="flex-1"
+            >
+              Duplicate
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/lib/server-only/document/duplicate-document-by-id.ts

@@ -0,0 +1,56 @@
+import { prisma } from '@documenso/prisma';
+
+export interface DuplicateDocumentByIdOptions {
+  id: number;
+  userId: number;
+}
+
+export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByIdOptions) => {
+  const document = await prisma.document.findUniqueOrThrow({
+    where: {
+      id,
+      userId: userId,
+    },
+    select: {
+      title: true,
+      userId: true,
+      documentData: {
+        select: {
+          data: true,
+          initialData: true,
+          type: true,
+        },
+      },
+      documentMeta: {
+        select: {
+          message: true,
+          subject: true,
+        },
+      },
+    },
+  });
+
+  const createdDocument = await prisma.document.create({
+    data: {
+      title: document.title,
+      User: {
+        connect: {
+          id: document.userId,
+        },
+      },
+      documentData: {
+        create: {
+          ...document.documentData,
+          data: document.documentData.initialData,
+        },
+      },
+      documentMeta: {
+        create: {
+          ...document.documentMeta,
+        },
+      },
+    },
+  });
+
+  return createdDocument.id;
+};

packages/trpc/server/document-router/router.ts

@@ -3,6 +3,7 @@ import { TRPCError } from '@trpc/server';
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
 import { deleteDraftDocument } from '@documenso/lib/server-only/document/delete-draft-document';
+import { duplicateDocumentById } from '@documenso/lib/server-only/document/duplicate-document-by-id';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
@@ -172,4 +173,23 @@ export const documentRouter = router({
         });
       }
     }),
+
+  duplicateDocument: authenticatedProcedure
+    .input(ZGetDocumentByIdQuerySchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await duplicateDocumentById({
+          id,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        console.log(err);
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We are unable to duplicate this document. Please try again later.',
+        });
+      }
+    }),
 });