feat: "download all" zip + scrollable list for envelope downloads

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

@@ -5,6 +5,7 @@ import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, type EnvelopeItem } from '@prisma/client';
 import { DownloadIcon, FileTextIcon } from 'lucide-react';
 
+import { downloadEnvelopeZip } from '@documenso/lib/client-only/download-envelope-zip';
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -28,6 +29,11 @@ type EnvelopeDownloadDialogProps = {
   envelopeStatus: DocumentStatus;
   envelopeItems?: EnvelopeItemToDownload[];
 
+  /**
+   * The envelope title, used to name the "download all" ZIP archive.
+   */
+  envelopeTitle?: string;
+
   /**
    * The recipient token to download the document.
    *
@@ -48,6 +54,7 @@ export const EnvelopeDownloadDialog = ({
   envelopeId,
   envelopeStatus,
   envelopeItems: initialEnvelopeItems,
+  envelopeTitle,
   token,
   canDownloadPartial = false,
   trigger,
@@ -61,6 +68,8 @@ export const EnvelopeDownloadDialog = ({
     [envelopeItemIdAndVersion: string]: boolean;
   }>({});
 
+  const [isDownloadingAll, setIsDownloadingAll] = useState(false);
+
   const generateDownloadKey = (envelopeItemId: string, version: DownloadVersion) =>
     `${envelopeItemId}-${version}`;
 
@@ -121,6 +130,34 @@ export const EnvelopeDownloadDialog = ({
     }
   };
 
+  const onDownloadAll = async () => {
+    if (isDownloadingAll) {
+      return;
+    }
+
+    setIsDownloadingAll(true);
+
+    try {
+      await downloadEnvelopeZip({
+        envelopeId,
+        token,
+        fileName: envelopeTitle,
+        version: envelopeStatus === DocumentStatus.COMPLETED ? 'signed' : 'original',
+      });
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: t`Something went wrong`,
+        description: t`These documents could not be downloaded at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    } finally {
+      setIsDownloadingAll(false);
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
@@ -135,7 +172,20 @@ export const EnvelopeDownloadDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex w-full flex-col gap-4 overflow-hidden">
+        {!isLoadingEnvelopeItems && envelopeItems.length > 1 && (
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-muted-foreground text-xs">
+              {t`${envelopeItems.length} documents`}
+            </p>
+
+            <Button variant="default" size="sm" onClick={onDownloadAll} loading={isDownloadingAll}>
+              {!isDownloadingAll && <DownloadIcon className="mr-2 h-4 w-4" />}
+              <Trans>Download all</Trans>
+            </Button>
+          </div>
+        )}
+
+        <div className="-mx-1 flex max-h-[60vh] w-full flex-col gap-4 overflow-y-auto px-1">
           {isLoadingEnvelopeItems ? (
             <>
               {Array.from({ length: 1 }).map((_, index) => (

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -74,6 +74,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
         envelopeId={envelope.id}
         envelopeStatus={envelope.status}
         envelopeItems={envelope.envelopeItems}
+        envelopeTitle={envelope.title}
         token={recipient?.token}
         trigger={
           <Button className="w-full">

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -106,6 +106,7 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           envelopeStatus={envelope.status}
           token={recipient?.token}
           envelopeItems={envelope.envelopeItems}
+          envelopeTitle={envelope.title}
           canDownloadPartial={canManageDocument}
           trigger={
             <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -103,6 +103,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
       <EnvelopeDownloadDialog
         envelopeId={row.envelopeId}
         envelopeStatus={row.status}
+        envelopeTitle={row.title}
         token={recipient?.token}
         trigger={
           <Button className="w-32">

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -152,6 +152,7 @@ export const DocumentsTableActionDropdown = ({
         <EnvelopeDownloadDialog
           envelopeId={row.envelopeId}
           envelopeStatus={row.status}
+          envelopeTitle={row.title}
           token={recipient?.token}
           canDownloadPartial={canManageDocument}
           trigger={

apps/remix/app/components/tables/inbox-table.tsx

@@ -334,6 +334,7 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
       <EnvelopeDownloadDialog
         envelopeId={row.envelopeId}
         envelopeStatus={row.status}
+        envelopeTitle={row.title}
         token={recipient?.token}
         trigger={
           <Button className="w-32">

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -255,6 +255,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 envelopeId={document.envelopeId}
                 envelopeStatus={document.status}
                 envelopeItems={document.envelopeItems}
+                envelopeTitle={document.title}
                 token={recipient?.token}
                 trigger={
                   <Button type="button" variant="outline" className="flex-1 md:flex-initial">

apps/remix/server/api/files/files.helpers.ts

@@ -12,6 +12,7 @@ import { generatePartialDocumentPdf } from '@documenso/lib/server-only/pdf/gener
 import { getTeamById } from '@documenso/lib/server-only/team/get-team';
 import { sha256 } from '@documenso/lib/universal/crypto';
 import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
+import { type ZipFile, createZip } from '@documenso/lib/universal/zip';
 import { prisma } from '@documenso/prisma';
 
 import type { HonoEnv } from '../../router';
@@ -130,6 +131,112 @@ export const handleEnvelopeItemFileRequest = async ({
   return c.body(file);
 };
 
+type EnvelopeZipItem = {
+  title: string;
+  documentData: {
+    type: DocumentDataType;
+    data: string;
+    initialData: string;
+  } | null;
+};
+
+type BuildEnvelopeZipResponseOptions = {
+  envelopeTitle: string;
+  items: EnvelopeZipItem[];
+  version: 'signed' | 'original';
+  context: Context<HonoEnv>;
+};
+
+/**
+ * Ensures every entry in the archive has a unique name. PDF titles within an
+ * envelope are not guaranteed to be unique, so colliding names get a numeric
+ * suffix (e.g. "report (2).pdf") to avoid silently overwriting an entry.
+ */
+const dedupeFileName = (name: string, usedNames: Set<string>): string => {
+  if (!usedNames.has(name)) {
+    usedNames.add(name);
+
+    return name;
+  }
+
+  const extensionMatch = /\.[^.]+$/.exec(name);
+  const extension = extensionMatch ? extensionMatch[0] : '';
+  const base = extension ? name.slice(0, -extension.length) : name;
+
+  let counter = 2;
+  let candidate = `${base} (${counter})${extension}`;
+
+  while (usedNames.has(candidate)) {
+    counter += 1;
+    candidate = `${base} (${counter})${extension}`;
+  }
+
+  usedNames.add(candidate);
+
+  return candidate;
+};
+
+/**
+ * Bundles every document in an envelope into a single ZIP archive and returns
+ * it as a download. Used by the "Download all" action so a user does not have
+ * to download each document in a multi-document envelope individually.
+ */
+export const buildEnvelopeZipResponse = async ({
+  envelopeTitle,
+  items,
+  version,
+  context: c,
+}: BuildEnvelopeZipResponseOptions) => {
+  const usedNames = new Set<string>();
+  const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
+
+  const files: ZipFile[] = [];
+
+  for (const item of items) {
+    if (!item.documentData) {
+      continue;
+    }
+
+    const documentDataToUse =
+      version === 'signed' ? item.documentData.data : item.documentData.initialData;
+
+    const file = await getFileServerSide({
+      type: item.documentData.type,
+      data: documentDataToUse,
+    }).catch((error) => {
+      console.error(error);
+
+      return null;
+    });
+
+    if (!file) {
+      continue;
+    }
+
+    const baseTitle = item.title.replace(/\.pdf$/, '');
+    const name = dedupeFileName(`${baseTitle}${suffix}`, usedNames);
+
+    files.push({ name, data: file });
+  }
+
+  if (files.length === 0) {
+    return c.json({ error: 'No files available to download' }, 404);
+  }
+
+  const zip = createZip(files);
+
+  const baseZipTitle = envelopeTitle.replace(/\.pdf$/, '') || 'documents';
+  const zipFilename = `${baseZipTitle}.zip`;
+
+  c.header('Content-Type', 'application/zip');
+  c.header('Content-Disposition', contentDisposition(zipFilename));
+  c.header('Cache-Control', 'no-cache, no-store, must-revalidate');
+  c.header('Pragma', 'no-cache');
+  c.header('Expires', '0');
+
+  return c.body(zip);
+};
+
 type CheckEnvelopeFileAccessOptions = {
   userId: number;
   teamId: number;

apps/remix/server/api/files/files.ts

@@ -11,9 +11,15 @@ import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-action
 import { prisma } from '@documenso/prisma';
 
 import type { HonoEnv } from '../../router';
-import { checkEnvelopeFileAccess, handleEnvelopeItemFileRequest } from './files.helpers';
+import {
+  buildEnvelopeZipResponse,
+  checkEnvelopeFileAccess,
+  handleEnvelopeItemFileRequest,
+} from './files.helpers';
 import {
   type TGetPresignedPostUrlResponse,
+  ZDownloadAllEnvelopeFilesRequestParamsSchema,
+  ZDownloadAllEnvelopeFilesTokenRequestParamsSchema,
   ZGetEnvelopeItemFileDownloadRequestParamsSchema,
   ZGetEnvelopeItemFileRequestParamsSchema,
   ZGetEnvelopeItemFileRequestQuerySchema,
@@ -216,6 +222,60 @@ export const filesRoute = new Hono<HonoEnv>()
       });
     },
   )
+  .get(
+    '/envelope/:envelopeId/download-all/:version?',
+    sValidator('param', ZDownloadAllEnvelopeFilesRequestParamsSchema),
+    async (c) => {
+      const { envelopeId, version } = c.req.valid('param');
+
+      const session = await getOptionalSession(c);
+
+      if (!session.user) {
+        return c.json({ error: 'Unauthorized' }, 401);
+      }
+
+      const envelope = await prisma.envelope.findFirst({
+        where: {
+          id: envelopeId,
+        },
+        include: {
+          envelopeItems: {
+            orderBy: {
+              order: 'asc',
+            },
+            include: {
+              documentData: true,
+            },
+          },
+        },
+      });
+
+      if (!envelope) {
+        return c.json({ error: 'Envelope not found' }, 404);
+      }
+
+      const hasDownloadAccess = await checkEnvelopeFileAccess({
+        userId: session.user.id,
+        teamId: envelope.teamId,
+        envelopeType: envelope.type,
+        templateType: envelope.templateType,
+      });
+
+      if (!hasDownloadAccess) {
+        return c.json(
+          { error: 'User does not have access to the team that this envelope is associated with' },
+          403,
+        );
+      }
+
+      return await buildEnvelopeZipResponse({
+        envelopeTitle: envelope.title,
+        items: envelope.envelopeItems,
+        version,
+        context: c,
+      });
+    },
+  )
   .get(
     '/token/:token/envelopeItem/:envelopeItemId',
     sValidator('param', ZGetEnvelopeItemFileTokenRequestParamsSchema),
@@ -323,6 +383,52 @@ export const filesRoute = new Hono<HonoEnv>()
         context: c,
       });
     },
+  )
+  .get(
+    '/token/:token/download-all/:version?',
+    sValidator('param', ZDownloadAllEnvelopeFilesTokenRequestParamsSchema),
+    async (c) => {
+      const { token, version } = c.req.valid('param');
+
+      let envelopeWhereQuery: Prisma.EnvelopeWhereInput = {
+        recipients: {
+          some: {
+            token,
+          },
+        },
+      };
+
+      if (token.startsWith('qr_')) {
+        envelopeWhereQuery = {
+          qrToken: token,
+        };
+      }
+
+      const envelope = await prisma.envelope.findFirst({
+        where: envelopeWhereQuery,
+        include: {
+          envelopeItems: {
+            orderBy: {
+              order: 'asc',
+            },
+            include: {
+              documentData: true,
+            },
+          },
+        },
+      });
+
+      if (!envelope) {
+        return c.json({ error: 'Envelope not found' }, 404);
+      }
+
+      return await buildEnvelopeZipResponse({
+        envelopeTitle: envelope.title,
+        items: envelope.envelopeItems,
+        version,
+        context: c,
+      });
+    },
   );
 
 // PDF routes for both tokens and auth based