feat: allow adding audit logs to compeleted document

apps/remix/app/components/forms/team-document-preferences-form.tsx

@@ -44,6 +44,7 @@ const ZTeamDocumentPreferencesFormSchema = z.object({
   documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES),
   includeSenderDetails: z.boolean(),
   includeSigningCertificate: z.boolean(),
+  includeAuditLog: z.boolean(),
   signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
     message: msg`At least one signature type must be enabled`.id,
   }),
@@ -77,6 +78,7 @@ export const TeamDocumentPreferencesForm = ({
         : 'en',
       includeSenderDetails: settings?.includeSenderDetails ?? false,
       includeSigningCertificate: settings?.includeSigningCertificate ?? true,
+      includeAuditLog: settings?.includeAuditLog ?? false,
       signatureTypes: extractTeamSignatureSettings(settings),
     },
     resolver: zodResolver(ZTeamDocumentPreferencesFormSchema),
@@ -91,6 +93,7 @@ export const TeamDocumentPreferencesForm = ({
         documentLanguage,
         includeSenderDetails,
         includeSigningCertificate,
+        includeAuditLog,
         signatureTypes,
       } = data;
 
@@ -101,6 +104,7 @@ export const TeamDocumentPreferencesForm = ({
           documentLanguage,
           includeSenderDetails,
           includeSigningCertificate,
+          includeAuditLog,
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
@@ -307,7 +311,7 @@ export const TeamDocumentPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls whether the signing certificate will be included in the document when
+                    Controls whether the signing certificate will be included with the document when
                     it is downloaded. The signing certificate can still be downloaded from the logs
                     page separately.
                   </Trans>
@@ -316,6 +320,36 @@ export const TeamDocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="includeAuditLog"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Include the Audit Log in the Document</Trans>
+                </FormLabel>
+
+                <div>
+                  <FormControl className="block">
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the audit log will be included with the document when it is
+                    downloaded. The audit log can still be downloaded from the logs page separately.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>

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

@@ -12,7 +12,14 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import {
+  SplitButton,
+  SplitButtonAction,
+  SplitButtonDropdown,
+  SplitButtonDropdownItem,
+} from '@documenso/ui/primitives/split-button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewButtonProps = {
@@ -42,6 +49,12 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
     ? `${documentsPath}/f/${document.folderId}/${document.id}/edit`
     : `${documentsPath}/${document.id}/edit`;
 
+  const { mutateAsync: downloadCertificate, isPending: isDownloadingCertificate } =
+    trpc.document.downloadCertificate.useMutation();
+
+  const { mutateAsync: downloadAuditLogs, isPending: isDownloadingAuditLogs } =
+    trpc.document.downloadAuditLogs.useMutation();
+
   const onDownloadClick = async () => {
     try {
       const documentWithData = await trpcClient.document.getDocumentById.query(
@@ -71,6 +84,125 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
     }
   };
 
+  const onDownloadOriginalClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query(
+        {
+          documentId: document.id,
+        },
+        {
+          context: {
+            teamId: document.team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        throw new Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: documentWithData.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDownloadCertificateClick = async () => {
+    try {
+      const { url } = await downloadCertificate({ documentId: document.id });
+
+      const iframe = Object.assign(window.document.createElement('iframe'), {
+        src: url,
+      });
+
+      Object.assign(iframe.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '0',
+        height: '0',
+      });
+
+      const onLoaded = () => {
+        if (iframe.contentDocument?.readyState === 'complete') {
+          iframe.contentWindow?.print();
+
+          iframe.contentWindow?.addEventListener('afterprint', () => {
+            window.document.body.removeChild(iframe);
+          });
+        }
+      };
+
+      // When the iframe has loaded, print the iframe and remove it from the dom
+      iframe.addEventListener('load', onLoaded);
+
+      window.document.body.appendChild(iframe);
+
+      onLoaded();
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`Sorry, we were unable to download the certificate. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDownloadAuditLogClick = async () => {
+    try {
+      const { url } = await downloadAuditLogs({ documentId: document.id });
+
+      const iframe = Object.assign(window.document.createElement('iframe'), {
+        src: url,
+      });
+
+      Object.assign(iframe.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '0',
+        height: '0',
+      });
+
+      const onLoaded = () => {
+        if (iframe.contentDocument?.readyState === 'complete') {
+          iframe.contentWindow?.print();
+
+          iframe.contentWindow?.addEventListener('afterprint', () => {
+            window.document.body.removeChild(iframe);
+          });
+        }
+      };
+
+      // When the iframe has loaded, print the iframe and remove it from the dom
+      iframe.addEventListener('load', onLoaded);
+
+      window.document.body.appendChild(iframe);
+
+      onLoaded();
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`Sorry, we were unable to download the audit logs. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
   return match({
     isRecipient,
     isPending,
@@ -110,10 +242,26 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
       </Button>
     ))
     .with({ isComplete: true }, () => (
-      <Button className="w-full" onClick={onDownloadClick}>
-        <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        <Trans>Download</Trans>
-      </Button>
+      <SplitButton className="w-full">
+        <SplitButtonAction onClick={onDownloadClick}>
+          <Download className="-ml-1 mr-2 inline h-4 w-4" />
+          <Trans>Download</Trans>
+        </SplitButtonAction>
+
+        <SplitButtonDropdown>
+          <SplitButtonDropdownItem onClick={onDownloadOriginalClick}>
+            <Trans>Download Original Document</Trans>
+          </SplitButtonDropdownItem>
+
+          <SplitButtonDropdownItem onClick={onDownloadCertificateClick}>
+            <Trans>Download Document Certificate</Trans>
+          </SplitButtonDropdownItem>
+
+          <SplitButtonDropdownItem onClick={onDownloadAuditLogClick}>
+            <Trans>Download Audit Log</Trans>
+          </SplitButtonDropdownItem>
+        </SplitButtonDropdown>
+      </SplitButton>
     ))
     .otherwise(() => null);
 };

packages/lib/jobs/definitions/emails/send-team-deleted-email.ts

@@ -16,6 +16,7 @@ const SEND_TEAM_DELETED_EMAIL_JOB_DEFINITION_SCHEMA = z.object({
         documentLanguage: z.string(),
         includeSenderDetails: z.boolean(),
         includeSigningCertificate: z.boolean(),
+        includeAuditLog: z.boolean(),
         brandingEnabled: z.boolean(),
         brandingLogo: z.string(),
         brandingUrl: z.string(),

packages/lib/jobs/definitions/internal/seal-document.handler.ts

@@ -9,6 +9,7 @@ import { signPdf } from '@documenso/signing';
 import { AppError, AppErrorCode } from '../../../errors/app-error';
 import { sendCompletedEmail } from '../../../server-only/document/send-completed-email';
 import PostHogServerClient from '../../../server-only/feature-flags/get-post-hog-server-client';
+import { getAuditLogPdf } from '../../../server-only/htmltopdf/get-audit-log-pdf';
 import { getCertificatePdf } from '../../../server-only/htmltopdf/get-certificate-pdf';
 import { addRejectionStampToPdf } from '../../../server-only/pdf/add-rejection-stamp-to-pdf';
 import { flattenAnnotations } from '../../../server-only/pdf/flatten-annotations';
@@ -52,6 +53,7 @@ export const run = async ({
           teamGlobalSettings: {
             select: {
               includeSigningCertificate: true,
+              includeAuditLog: true,
             },
           },
         },
@@ -152,6 +154,13 @@ export const run = async ({
         }).catch(() => null)
       : null;
 
+  const auditLogData =
+    (document.team?.teamGlobalSettings?.includeAuditLog ?? false)
+      ? await getAuditLogPdf({
+          documentId,
+        }).catch(() => null)
+      : null;
+
   const newDataId = await io.runTask('decorate-and-sign-pdf', async () => {
     const pdfDoc = await PDFDocument.load(pdfData);
 
@@ -178,6 +187,16 @@ export const run = async ({
       });
     }
 
+    if (auditLogData) {
+      const auditLogDoc = await PDFDocument.load(auditLogData);
+
+      const auditLogPages = await pdfDoc.copyPages(auditLogDoc, auditLogDoc.getPageIndices());
+
+      auditLogPages.forEach((page) => {
+        pdfDoc.addPage(page);
+      });
+    }
+
     for (const field of fields) {
       if (field.inserted) {
         document.useLegacyFieldInsertion

packages/lib/server-only/document/seal-document.ts

@@ -17,6 +17,7 @@ import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFileServerSide } from '../../universal/upload/get-file.server';
 import { putPdfFileServerSide } from '../../universal/upload/put-file.server';
 import { fieldsContainUnsignedRequiredField } from '../../utils/advanced-fields-helpers';
+import { getAuditLogPdf } from '../htmltopdf/get-audit-log-pdf';
 import { getCertificatePdf } from '../htmltopdf/get-certificate-pdf';
 import { addRejectionStampToPdf } from '../pdf/add-rejection-stamp-to-pdf';
 import { flattenAnnotations } from '../pdf/flatten-annotations';
@@ -53,6 +54,7 @@ export const sealDocument = async ({
           teamGlobalSettings: {
             select: {
               includeSigningCertificate: true,
+              includeAuditLog: true,
             },
           },
         },
@@ -124,6 +126,13 @@ export const sealDocument = async ({
         }).catch(() => null)
       : null;
 
+  const auditLogData =
+    (document.team?.teamGlobalSettings?.includeAuditLog ?? false)
+      ? await getAuditLogPdf({
+          documentId,
+        }).catch(() => null)
+      : null;
+
   const doc = await PDFDocument.load(pdfData);
 
   // Normalize and flatten layers that could cause issues with the signature
@@ -146,6 +155,16 @@ export const sealDocument = async ({
     });
   }
 
+  if (auditLogData) {
+    const auditLog = await PDFDocument.load(auditLogData);
+
+    const auditLogPages = await doc.copyPages(auditLog, auditLog.getPageIndices());
+
+    auditLogPages.forEach((page) => {
+      doc.addPage(page);
+    });
+  }
+
   for (const field of fields) {
     document.useLegacyFieldInsertion
       ? await legacy_insertFieldInPDF(doc, field)

packages/lib/server-only/htmltopdf/get-audit-log-pdf.ts

@@ -0,0 +1,69 @@
+import { DateTime } from 'luxon';
+import type { Browser } from 'playwright';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { type SupportedLanguageCodes, isValidLanguageCode } from '../../constants/i18n';
+import { env } from '../../utils/env';
+import { encryptSecondaryData } from '../crypto/encrypt';
+
+export type GetAuditLogPdfOptions = {
+  documentId: number;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  language?: SupportedLanguageCodes | (string & {});
+};
+
+export const getAuditLogPdf = async ({ documentId, language }: GetAuditLogPdfOptions) => {
+  const { chromium } = await import('playwright');
+
+  const encryptedId = encryptSecondaryData({
+    data: documentId.toString(),
+    expiresAt: DateTime.now().plus({ minutes: 5 }).toJSDate().valueOf(),
+  });
+
+  let browser: Browser;
+
+  const browserlessUrl = env('NEXT_PRIVATE_BROWSERLESS_URL');
+
+  if (browserlessUrl) {
+    // !: Use CDP rather than the default `connect` method to avoid coupling to the playwright version.
+    // !: Previously we would have to keep the playwright version in sync with the browserless version to avoid errors.
+    browser = await chromium.connectOverCDP(browserlessUrl);
+  } else {
+    browser = await chromium.launch();
+  }
+
+  if (!browser) {
+    throw new Error(
+      'Failed to establish a browser, please ensure you have either a Browserless.io url or chromium browser installed',
+    );
+  }
+
+  const browserContext = await browser.newContext();
+
+  const page = await browserContext.newPage();
+
+  const lang = isValidLanguageCode(language) ? language : 'en';
+
+  await page.context().addCookies([
+    {
+      name: 'language',
+      value: lang,
+      url: NEXT_PUBLIC_WEBAPP_URL(),
+    },
+  ]);
+
+  await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/audit-log?d=${encryptedId}`, {
+    waitUntil: 'networkidle',
+    timeout: 10_000,
+  });
+
+  const result = await page.pdf({
+    format: 'A4',
+  });
+
+  await browserContext.close();
+
+  void browser.close();
+
+  return result;
+};

packages/prisma/migrations/20250515060302_add_audit_log_team_preference/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "TeamGlobalSettings" ADD COLUMN     "includeAuditLog" BOOLEAN NOT NULL DEFAULT false;

packages/prisma/schema.prisma

@@ -582,11 +582,13 @@ enum TeamMemberInviteStatus {
 }
 
 model TeamGlobalSettings {
-  teamId                    Int                @unique
-  documentVisibility        DocumentVisibility @default(EVERYONE)
-  documentLanguage          String             @default("en")
-  includeSenderDetails      Boolean            @default(true)
-  includeSigningCertificate Boolean            @default(true)
+  teamId               Int                @unique
+  documentVisibility   DocumentVisibility @default(EVERYONE)
+  documentLanguage     String             @default("en")
+  includeSenderDetails Boolean            @default(true)
+
+  includeSigningCertificate Boolean @default(true)
+  includeAuditLog           Boolean @default(false)
 
   typedSignatureEnabled  Boolean @default(true)
   uploadSignatureEnabled Boolean @default(true)

packages/trpc/server/team-router/update-team-document-settings.ts

@@ -23,6 +23,7 @@ export const updateTeamDocumentSettingsRoute = authenticatedProcedure
       documentLanguage,
       includeSenderDetails,
       includeSigningCertificate,
+      includeAuditLog,
       typedSignatureEnabled,
       uploadSignatureEnabled,
       drawSignatureEnabled,
@@ -54,6 +55,7 @@ export const updateTeamDocumentSettingsRoute = authenticatedProcedure
         documentLanguage,
         includeSenderDetails,
         includeSigningCertificate,
+        includeAuditLog,
         typedSignatureEnabled,
         uploadSignatureEnabled,
         drawSignatureEnabled,
@@ -63,6 +65,7 @@ export const updateTeamDocumentSettingsRoute = authenticatedProcedure
         documentLanguage,
         includeSenderDetails,
         includeSigningCertificate,
+        includeAuditLog,
         typedSignatureEnabled,
         uploadSignatureEnabled,
         drawSignatureEnabled,

packages/trpc/server/team-router/update-team-document-settings.types.ts

@@ -14,6 +14,7 @@ export const ZUpdateTeamDocumentSettingsRequestSchema = z.object({
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).optional().default('en'),
     includeSenderDetails: z.boolean().optional().default(false),
     includeSigningCertificate: z.boolean().optional().default(true),
+    includeAuditLog: z.boolean().optional().default(false),
     typedSignatureEnabled: z.boolean().optional().default(true),
     uploadSignatureEnabled: z.boolean().optional().default(true),
     drawSignatureEnabled: z.boolean().optional().default(true),

packages/ui/primitives/split-button.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+
+const SplitButtonContext = React.createContext<{
+  variant?: React.ComponentProps<typeof Button>['variant'];
+  size?: React.ComponentProps<typeof Button>['size'];
+}>({});
+
+const SplitButton = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    variant?: React.ComponentProps<typeof Button>['variant'];
+    size?: React.ComponentProps<typeof Button>['size'];
+  }
+>(({ className, children, variant = 'default', size = 'default', ...props }, ref) => {
+  return (
+    <SplitButtonContext.Provider value={{ variant, size }}>
+      <div ref={ref} className={cn('inline-flex', className)} {...props}>
+        {children}
+      </div>
+    </SplitButtonContext.Provider>
+  );
+});
+SplitButton.displayName = 'SplitButton';
+
+const SplitButtonAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+  const { variant, size } = React.useContext(SplitButtonContext);
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn('flex-1 rounded-r-none border-r-0', className)}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});
+
+SplitButtonAction.displayName = 'SplitButtonAction';
+
+const SplitButtonDropdown = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => {
+    const { variant, size } = React.useContext(SplitButtonContext);
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant={variant}
+            size={size}
+            className="rounded-l-none px-2 focus-visible:ring-offset-0"
+          >
+            <ChevronDown className="h-4 w-4" />
+            <span className="sr-only">More options</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" {...props} ref={ref}>
+          {children}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+);
+
+SplitButtonDropdown.displayName = 'SplitButtonDropdown';
+
+const SplitButtonDropdownItem = DropdownMenuItem;
+
+export { SplitButton, SplitButtonAction, SplitButtonDropdown, SplitButtonDropdownItem };