feat: use the api routes for downloading signing certificate and audit logs

apps/remix/app/components/general/document/document-audit-log-download-button.tsx

@@ -1,13 +1,16 @@
+import { useState } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DownloadIcon } from 'lucide-react';
 
-import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useCurrentTeam } from '~/providers/team';
+
 export type DocumentAuditLogDownloadButtonProps = {
   className?: string;
   documentId: number;
@@ -19,44 +22,34 @@ export const DocumentAuditLogDownloadButton = ({
 }: DocumentAuditLogDownloadButtonProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
-
+  const [isPending, setIsPending] = useState(false);
-  const { mutateAsync: downloadAuditLogs, isPending } =
+  const team = useCurrentTeam();
-    trpc.document.auditLog.download.useMutation();
 
   const onDownloadAuditLogsClick = async () => {
+    setIsPending(true);
+
     try {
-      const { url } = await downloadAuditLogs({ documentId });
+      const response = await fetch(`/api/t/${team.url}/download/audit-logs/${documentId}`);
 
-      const iframe = Object.assign(document.createElement('iframe'), {
+      const contentDisposition = response.headers.get('Content-Disposition');
-        src: url,
+      const filename =
-      });
+        contentDisposition?.split('filename="')[1]?.split('"')[0] ||
+        `document_${documentId}_audit_logs.pdf`;
 
-      Object.assign(iframe.style, {
+      const blob = await response.blob();
-        position: 'fixed',
+      const url = URL.createObjectURL(blob);
-        top: '0',
+      const link = document.createElement('a');
-        left: '0',
-        width: '0',
-        height: '0',
-      });
 
-      const onLoaded = () => {
+      link.href = url;
-        if (iframe.contentDocument?.readyState === 'complete') {
+      link.download = filename;
-          iframe.contentWindow?.print();
 
-          iframe.contentWindow?.addEventListener('afterprint', () => {
+      document.body.appendChild(link);
-            document.body.removeChild(iframe);
+      link.click();
-          });
-        }
-      };
 
-      // When the iframe has loaded, print the iframe and remove it from the dom
+      document.body.removeChild(link);
-      iframe.addEventListener('load', onLoaded);
+      URL.revokeObjectURL(url);
-
-      document.body.appendChild(iframe);
-
-      onLoaded();
     } catch (error) {
-      console.error(error);
+      console.error('Audit logs download error:', error);
 
       toast({
         title: _(msg`Something went wrong`),
@@ -65,6 +58,8 @@ export const DocumentAuditLogDownloadButton = ({
         ),
         variant: 'destructive',
       });
+    } finally {
+      setIsPending(false);
     }
   };
 

apps/remix/app/components/general/document/document-certificate-download-button.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
@@ -5,11 +7,12 @@ import type { DocumentStatus } from '@prisma/client';
 import { DownloadIcon } from 'lucide-react';
 
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useCurrentTeam } from '~/providers/team';
+
 export type DocumentCertificateDownloadButtonProps = {
   className?: string;
   documentId: number;
@@ -23,24 +26,25 @@ export const DocumentCertificateDownloadButton = ({
 }: DocumentCertificateDownloadButtonProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
-
+  const [isPending, setIsPending] = useState(false);
-  const { mutateAsync: downloadCertificate, isPending } =
+  const team = useCurrentTeam();
-    trpc.document.downloadCertificate.useMutation();
 
   const onDownloadCertificatesClick = async () => {
+    setIsPending(true);
+
     try {
-      const { pdfData, filename } = await downloadCertificate({ documentId });
+      const response = await fetch(`/api/t/${team.url}/download/certificate/${documentId}`);
 
-      const byteCharacters = atob(pdfData);
+      if (!response.ok) {
-      const byteNumbers = new Array(byteCharacters.length);
+        throw new Error('Failed to download certificate');
-
-      for (let i = 0; i < byteCharacters.length; i++) {
-        byteNumbers[i] = byteCharacters.charCodeAt(i);
       }
 
-      const byteArray = new Uint8Array(byteNumbers);
+      const contentDisposition = response.headers.get('Content-Disposition');
-      const blob = new Blob([byteArray], { type: 'application/pdf' });
+      const filename =
+        contentDisposition?.split('filename="')[1]?.split('"')[0] ||
+        `document_${documentId}_certificate.pdf`;
 
+      const blob = await response.blob();
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
 
@@ -53,6 +57,8 @@ export const DocumentCertificateDownloadButton = ({
       document.body.removeChild(link);
       URL.revokeObjectURL(url);
     } catch (error) {
+      console.error('Certificate download error:', error);
+
       toast({
         title: _(msg`Something went wrong`),
         description: _(
@@ -60,6 +66,8 @@ export const DocumentCertificateDownloadButton = ({
         ),
         variant: 'destructive',
       });
+    } finally {
+      setIsPending(false);
     }
   };
 

apps/remix/app/routes/api+/t.$teamUrl.download.audit-logs.$documentId.ts

@@ -46,7 +46,6 @@ export async function loader({ request, params }: Route.LoaderArgs) {
         'Content-Disposition': `attachment; filename="${filename}"`,
         'Content-Length': pdfBuffer.length.toString(),
         'Cache-Control': 'no-cache, no-store, must-revalidate',
-        Pragma: 'no-cache',
         Expires: '0',
       },
     });

apps/remix/app/routes/api+/t.$teamUrl.download.certificate.$documentId.ts

@@ -54,7 +54,6 @@ export async function loader({ request, params }: Route.LoaderArgs) {
         'Content-Disposition': `attachment; filename="${filename}"`,
         'Content-Length': pdfBuffer.length.toString(),
         'Cache-Control': 'no-cache, no-store, must-revalidate',
-        Pragma: 'no-cache',
         Expires: '0',
       },
     });