feat: add envelopes api (#2105)

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -19,13 +19,15 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
-  id: number;
+  id: string;
+  token?: string;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DocumentDuplicateDialog = ({
   id,
+  token,
   open,
   onOpenChange,
 }: DocumentDuplicateDialogProps) => {
@@ -36,27 +38,23 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const { data: document, isLoading } = trpcReact.document.get.useQuery(
-    {
-      documentId: id,
-    },
-    {
-      queryHash: `document-duplicate-dialog-${id}`,
-      enabled: open === true,
-    },
-  );
+  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
+    trpcReact.envelope.item.getManyByToken.useQuery(
+      {
+        envelopeId: id,
+        access: token ? { type: 'recipient', token } : { type: 'user' },
+      },
+      {
+        enabled: open,
+      },
+    );
 
-  const documentData = document?.documentData
-    ? {
-        ...document.documentData,
-        data: document.documentData.initialData,
-      }
-    : undefined;
+  const envelopeItems = envelopeItemsPayload?.data || [];
 
   const documentsPath = formatDocumentsPath(team.url);
 
-  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
-    trpcReact.document.duplicate.useMutation({
+  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
+    trpcReact.envelope.duplicate.useMutation({
       onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
@@ -71,7 +69,7 @@ export const DocumentDuplicateDialog = ({
 
   const onDuplicate = async () => {
     try {
-      await duplicateDocument({ documentId: id });
+      await duplicateEnvelope({ envelopeId: id });
     } catch {
       toast({
         title: _(msg`Something went wrong`),
@@ -83,14 +81,14 @@ export const DocumentDuplicateDialog = ({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
             <Trans>Duplicate</Trans>
           </DialogTitle>
         </DialogHeader>
-        {!documentData || isLoading ? (
+        {isLoadingEnvelopeItems || !envelopeItems || envelopeItems.length === 0 ? (
           <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">
               <Trans>Loading Document...</Trans>
@@ -98,7 +96,12 @@ export const DocumentDuplicateDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer key={document?.id} documentData={documentData} />
+            <PDFViewer
+              key={envelopeItems[0].id}
+              envelopeItem={envelopeItems[0]}
+              token={undefined}
+              version="original"
+            />
           </div>
         )}
 
@@ -115,8 +118,8 @@ export const DocumentDuplicateDialog = ({
 
             <Button
               type="button"
-              disabled={isDuplicateLoading || isLoading}
-              loading={isDuplicateLoading}
+              disabled={isDuplicating}
+              loading={isDuplicating}
               onClick={onDuplicate}
               className="flex-1"
             >

apps/remix/app/components/dialogs/envelope-download-dialog.tsx

@@ -2,11 +2,10 @@ import { useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
+import { DocumentStatus, type EnvelopeItem } from '@prisma/client';
 import { DownloadIcon, FileTextIcon } from 'lucide-react';
 
-import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -20,9 +19,7 @@ import {
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'title' | 'order'> & {
-  documentData: DocumentData;
-};
+type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'envelopeId' | 'title' | 'order'>;
 
 type EnvelopeDownloadDialogProps = {
   envelopeId: string;
@@ -64,12 +61,12 @@ export const EnvelopeDownloadDialog = ({
         access: token ? { type: 'recipient', token } : { type: 'user' },
       },
       {
-        initialData: initialEnvelopeItems ? { envelopeItems: initialEnvelopeItems } : undefined,
+        initialData: initialEnvelopeItems ? { data: initialEnvelopeItems } : undefined,
         enabled: open,
       },
     );
 
-  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
+  const envelopeItems = envelopeItemsPayload?.data || [];
 
   const onDownload = async (
     envelopeItem: EnvelopeItemToDownload,
@@ -87,25 +84,11 @@ export const EnvelopeDownloadDialog = ({
     }));
 
     try {
-      const data = await getFile({
-        type: envelopeItem.documentData.type,
-        data:
-          version === 'signed'
-            ? envelopeItem.documentData.data
-            : envelopeItem.documentData.initialData,
-      });
-
-      const blob = new Blob([data], {
-        type: 'application/pdf',
-      });
-
-      const baseTitle = envelopeItem.title.replace(/\.pdf$/, '');
-      const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
-      const filename = `${baseTitle}${suffix}`;
-
-      downloadFile({
-        filename,
-        data: blob,
+      await downloadPDF({
+        envelopeItem,
+        token,
+        fileName: envelopeItem.title,
+        version,
       });
 
       setIsDownloadingState((prev) => ({
@@ -146,7 +129,7 @@ export const EnvelopeDownloadDialog = ({
         <div className="flex flex-col gap-4">
           {isLoadingEnvelopeItems ? (
             <>
-              {Array.from({ length: 2 }).map((_, index) => (
+              {Array.from({ length: 1 }).map((_, index) => (
                 <div
                   key={index}
                   className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
@@ -175,6 +158,7 @@ export const EnvelopeDownloadDialog = ({
                 </div>
 
                 <div className="min-w-0 flex-1">
+                  {/* Todo: Envelopes - Fix overflow */}
                   <h4 className="text-foreground truncate text-sm font-medium">{item.title}</h4>
                   <p className="text-muted-foreground mt-0.5 text-xs">
                     <Trans>PDF Document</Trans>

apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx

@@ -43,7 +43,7 @@ export const EnvelopeDuplicateDialog = ({
 
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpc.envelope.duplicate.useMutation({
-      onSuccess: async ({ duplicatedEnvelopeId }) => {
+      onSuccess: async ({ id }) => {
         toast({
           title: t`Envelope Duplicated`,
           description: t`Your envelope has been successfully duplicated.`,
@@ -55,7 +55,7 @@ export const EnvelopeDuplicateDialog = ({
             ? formatDocumentsPath(team.url)
             : formatTemplatesPath(team.url);
 
-        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
+        await navigate(`${path}/${id}/edit`);
         setOpen(false);
       },
     });

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -7,9 +7,9 @@ import { FilePlus, Loader } from 'lucide-react';
 import { useNavigate } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -54,13 +54,17 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
     setIsUploadingFile(true);
 
     try {
-      const response = await putPdfFile(file);
-
-      const { legacyTemplateId: id } = await createTemplate({
+      const payload = {
         title: file.name,
-        templateDocumentDataId: response.id,
         folderId: folderId,
-      });
+      } satisfies TCreateTemplatePayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createTemplate(formData);
 
       toast({
         title: _(msg`Template document uploaded`),

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -143,7 +143,7 @@ export function TemplateUseDialog({
     },
   );
 
-  const envelopeItems = response?.envelopeItems ?? [];
+  const envelopeItems = response?.data ?? [];
 
   const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();