From cc249357b3210059e3e1be66cb98b9d05acb2813 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Tue, 5 Nov 2024 18:25:23 +0900
Subject: [PATCH] feat: add certificate translations (#1440)

Add translations for audit logs and certificates.
---
 .../document-page-view-recent-activity.tsx    |  10 +-
 .../[id]/logs/document-logs-data-table.tsx    |   8 +-
 .../%5F%5Fhtmltopdf/audit-log/data-table.tsx  |  21 ++-
 .../%5F%5Fhtmltopdf/audit-log/page.tsx        |  49 ++++--
 .../%5F%5Fhtmltopdf/certificate/page.tsx      |  84 +++++++----
 .../document/document-history-sheet.tsx       |   6 +-
 packages/lib/constants/document.ts            |  18 +++
 packages/lib/constants/recipient-roles.ts     |  10 --
 packages/lib/utils/document-audit-logs.ts     | 140 ++++++++----------
 9 files changed, 188 insertions(+), 158 deletions(-)
 create mode 100644 packages/lib/constants/document.ts

diff --git a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx
index f1f6838aa..b44175d51 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx
@@ -143,17 +143,11 @@ export const DocumentPageViewRecentActivity = ({
                     ))}
                 </div>
 
-                {/* Todo: Translations. */}
                 <p
                   className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
-                  title={`${formatDocumentAuditLogAction(auditLog, userId).prefix} ${
-                    formatDocumentAuditLogAction(auditLog, userId).description
-                  }`}
+                  title={formatDocumentAuditLogAction(_, auditLog, userId).description}
                 >
-                  <span className="text-foreground font-medium">
-                    {formatDocumentAuditLogAction(auditLog, userId).prefix}
-                  </span>{' '}
-                  {formatDocumentAuditLogAction(auditLog, userId).description}
+                  {formatDocumentAuditLogAction(_, auditLog, userId).description}
                 </p>
 
                 <time className="text-muted-foreground dark:text-muted-foreground/70 flex-none py-0.5 text-xs leading-5">
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx
index 953dbec35..3058518a7 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx
@@ -58,10 +58,6 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
     });
   };
 
-  const uppercaseFistLetter = (text: string) => {
-    return text.charAt(0).toUpperCase() + text.slice(1);
-  };
-
   const results = data ?? {
     data: [],
     perPage: 10,
@@ -103,9 +99,7 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
       {
         header: _(msg`Action`),
         accessorKey: 'type',
-        cell: ({ row }) => (
-          <span>{uppercaseFistLetter(formatDocumentAuditLogAction(row.original).description)}</span>
-        ),
+        cell: ({ row }) => <span>{formatDocumentAuditLogAction(_, row.original).description}</span>,
       },
       {
         header: 'IP Address',
diff --git a/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx b/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx
index 69b72bb17..a3c77c15e 100644
--- a/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx
+++ b/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx
@@ -1,5 +1,5 @@
-'use client';
-
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 import type { DateTimeFormatOptions } from 'luxon';
 import { UAParser } from 'ua-parser-js';
@@ -25,7 +25,12 @@ const dateFormat: DateTimeFormatOptions = {
   hourCycle: 'h12',
 };
 
+/**
+ * DO NOT USE TRANS. YOU MUST USE _ FOR THIS FILE AND ALL CHILDREN COMPONENTS.
+ */
 export const AuditLogDataTable = ({ logs }: AuditLogDataTableProps) => {
+  const { _ } = useLingui();
+
   const parser = new UAParser();
 
   const uppercaseFistLetter = (text: string) => {
@@ -36,11 +41,11 @@ export const AuditLogDataTable = ({ logs }: AuditLogDataTableProps) => {
     <Table overflowHidden>
       <TableHeader>
         <TableRow>
-          <TableHead>Time</TableHead>
-          <TableHead>User</TableHead>
-          <TableHead>Action</TableHead>
-          <TableHead>IP Address</TableHead>
-          <TableHead>Browser</TableHead>
+          <TableHead>{_(msg`Time`)}</TableHead>
+          <TableHead>{_(msg`User`)}</TableHead>
+          <TableHead>{_(msg`Action`)}</TableHead>
+          <TableHead>{_(msg`IP Address`)}</TableHead>
+          <TableHead>{_(msg`Browser`)}</TableHead>
         </TableRow>
       </TableHeader>
 
@@ -74,7 +79,7 @@ export const AuditLogDataTable = ({ logs }: AuditLogDataTableProps) => {
             </TableCell>
 
             <TableCell>
-              {uppercaseFistLetter(formatDocumentAuditLogAction(log).description)}
+              {uppercaseFistLetter(formatDocumentAuditLogAction(_, log).description)}
             </TableCell>
 
             <TableCell>{log.ipAddress}</TableCell>
diff --git a/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx b/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx
index 3466b1b1c..f8e510e65 100644
--- a/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx
+++ b/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx
@@ -2,13 +2,18 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 
-import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
-import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+import { DOCUMENT_STATUS } from '@documenso/lib/constants/document';
+import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 import { Logo } from '~/components/branding/logo';
@@ -21,7 +26,17 @@ type AuditLogProps = {
   };
 };
 
+/**
+ * DO NOT USE TRANS. YOU MUST USE _ FOR THIS FILE AND ALL CHILDREN COMPONENTS.
+ *
+ * Cannot use dynamicActivate by itself to translate this specific page and all
+ * children components because `not-found.tsx` page runs and overrides the i18n.
+ */
 export default async function AuditLog({ searchParams }: AuditLogProps) {
+  const { i18n } = await setupI18nSSR();
+
+  const { _ } = useLingui();
+
   const { d } = searchParams;
 
   if (typeof d !== 'string' || !d) {
@@ -44,6 +59,10 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
     return redirect('/');
   }
 
+  const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
+
+  await dynamicActivate(i18n, documentLanguage);
+
   const { data: auditLogs } = await findDocumentAuditLogs({
     documentId: documentId,
     userId: document.userId,
@@ -53,31 +72,35 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
   return (
     <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
       <div className="flex items-center">
-        <h1 className="my-8 text-2xl font-bold">Version History</h1>
+        <h1 className="my-8 text-2xl font-bold">{_(msg`Version History`)}</h1>
       </div>
 
       <Card>
         <CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs">
           <p>
-            <span className="font-medium">Document ID</span>
+            <span className="font-medium">{_(msg`Document ID`)}</span>
 
             <span className="mt-1 block break-words">{document.id}</span>
           </p>
 
           <p>
-            <span className="font-medium">Enclosed Document</span>
+            <span className="font-medium">{_(msg`Enclosed Document`)}</span>
 
             <span className="mt-1 block break-words">{document.title}</span>
           </p>
 
           <p>
-            <span className="font-medium">Status</span>
+            <span className="font-medium">{_(msg`Status`)}</span>
 
-            <span className="mt-1 block">{document.deletedAt ? 'DELETED' : document.status}</span>
+            <span className="mt-1 block">
+              {_(
+                document.deletedAt ? msg`Deleted` : DOCUMENT_STATUS[document.status].description,
+              ).toUpperCase()}
+            </span>
           </p>
 
           <p>
-            <span className="font-medium">Owner</span>
+            <span className="font-medium">{_(msg`Owner`)}</span>
 
             <span className="mt-1 block break-words">
               {document.User.name} ({document.User.email})
@@ -85,7 +108,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
           </p>
 
           <p>
-            <span className="font-medium">Created At</span>
+            <span className="font-medium">{_(msg`Created At`)}</span>
 
             <span className="mt-1 block">
               {DateTime.fromJSDate(document.createdAt)
@@ -95,7 +118,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
           </p>
 
           <p>
-            <span className="font-medium">Last Updated</span>
+            <span className="font-medium">{_(msg`Last Updated`)}</span>
 
             <span className="mt-1 block">
               {DateTime.fromJSDate(document.updatedAt)
@@ -105,7 +128,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
           </p>
 
           <p>
-            <span className="font-medium">Time Zone</span>
+            <span className="font-medium">{_(msg`Time Zone`)}</span>
 
             <span className="mt-1 block break-words">
               {document.documentMeta?.timezone ?? 'N/A'}
@@ -113,13 +136,13 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
           </p>
 
           <div>
-            <p className="font-medium">Recipients</p>
+            <p className="font-medium">{_(msg`Recipients`)}</p>
 
             <ul className="mt-1 list-inside list-disc">
               {document.Recipient.map((recipient) => (
                 <li key={recipient.id}>
                   <span className="text-muted-foreground">
-                    [{RECIPIENT_ROLES_DESCRIPTION_ENG[recipient.role].roleName}]
+                    [{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}]
                   </span>{' '}
                   {recipient.name} ({recipient.email})
                 </li>
diff --git a/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx b/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx
index 8c69de2e9..35c0d0542 100644
--- a/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx
+++ b/apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx
@@ -2,20 +2,24 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 
-import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
-  RECIPIENT_ROLES_DESCRIPTION_ENG,
-  RECIPIENT_ROLE_SIGNING_REASONS_ENG,
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_SIGNING_REASONS,
 } from '@documenso/lib/constants/recipient-roles';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { FieldType } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
@@ -36,11 +40,21 @@ type SigningCertificateProps = {
 };
 
 const FRIENDLY_SIGNING_REASONS = {
-  ['__OWNER__']: `I am the owner of this document`,
-  ...RECIPIENT_ROLE_SIGNING_REASONS_ENG,
+  ['__OWNER__']: msg`I am the owner of this document`,
+  ...RECIPIENT_ROLE_SIGNING_REASONS,
 };
 
+/**
+ * DO NOT USE TRANS. YOU MUST USE _ FOR THIS FILE AND ALL CHILDREN COMPONENTS.
+ *
+ * Cannot use dynamicActivate by itself to translate this specific page and all
+ * children components because `not-found.tsx` page runs and overrides the i18n.
+ */
 export default async function SigningCertificate({ searchParams }: SigningCertificateProps) {
+  const { i18n } = await setupI18nSSR();
+
+  const { _ } = useLingui();
+
   const { d } = searchParams;
 
   if (typeof d !== 'string' || !d) {
@@ -63,6 +77,10 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
     return redirect('/');
   }
 
+  const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
+
+  await dynamicActivate(i18n, documentLanguage);
+
   const auditLogs = await getDocumentCertificateAuditLogs({
     id: documentId,
   });
@@ -98,17 +116,17 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
     });
 
     let authLevel = match(extractedAuthMethods.derivedRecipientActionAuth)
-      .with('ACCOUNT', () => 'Account Re-Authentication')
-      .with('TWO_FACTOR_AUTH', () => 'Two-Factor Re-Authentication')
-      .with('PASSKEY', () => 'Passkey Re-Authentication')
-      .with('EXPLICIT_NONE', () => 'Email')
+      .with('ACCOUNT', () => _(msg`Account Re-Authentication`))
+      .with('TWO_FACTOR_AUTH', () => _(msg`Two-Factor Re-Authentication`))
+      .with('PASSKEY', () => _(msg`Passkey Re-Authentication`))
+      .with('EXPLICIT_NONE', () => _(msg`Email`))
       .with(null, () => null)
       .exhaustive();
 
     if (!authLevel) {
       authLevel = match(extractedAuthMethods.derivedRecipientAccessAuth)
-        .with('ACCOUNT', () => 'Account Authentication')
-        .with(null, () => 'Email')
+        .with('ACCOUNT', () => _(msg`Account Authentication`))
+        .with(null, () => _(msg`Email`))
         .exhaustive();
     }
 
@@ -147,7 +165,7 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
   return (
     <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
       <div className="flex items-center">
-        <h1 className="my-8 text-2xl font-bold">Signing Certificate</h1>
+        <h1 className="my-8 text-2xl font-bold">{_(msg`Signing Certificate`)}</h1>
       </div>
 
       <Card>
@@ -155,9 +173,9 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
           <Table overflowHidden>
             <TableHeader>
               <TableRow>
-                <TableHead>Signer Events</TableHead>
-                <TableHead>Signature</TableHead>
-                <TableHead>Details</TableHead>
+                <TableHead>{_(msg`Signer Events`)}</TableHead>
+                <TableHead>{_(msg`Signature`)}</TableHead>
+                <TableHead>{_(msg`Details`)}</TableHead>
                 {/* <TableHead>Security</TableHead> */}
               </TableRow>
             </TableHeader>
@@ -173,11 +191,11 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
                       <div className="hyphens-auto break-words font-medium">{recipient.name}</div>
                       <div className="break-all">{recipient.email}</div>
                       <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        {RECIPIENT_ROLES_DESCRIPTION_ENG[recipient.role].roleName}
+                        {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                       </p>
 
                       <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        <span className="font-medium">Authentication Level:</span>{' '}
+                        <span className="font-medium">{_(msg`Authentication Level`)}:</span>{' '}
                         <span className="block">{getAuthenticationLevel(recipient.id)}</span>
                       </p>
                     </TableCell>
@@ -199,21 +217,21 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
                           </div>
 
                           <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                            <span className="font-medium">Signature ID:</span>{' '}
+                            <span className="font-medium">{_(msg`Signature ID`)}:</span>{' '}
                             <span className="block font-mono uppercase">
                               {signature.secondaryId}
                             </span>
                           </p>
 
                           <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                            <span className="font-medium">IP Address:</span>{' '}
+                            <span className="font-medium">{_(msg`IP Address`)}:</span>{' '}
                             <span className="inline-block">
-                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? 'Unknown'}
+                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.ipAddress ?? _(msg`Unknown`)}
                             </span>
                           </p>
 
                           <p className="text-muted-foreground mt-1 text-sm print:text-xs">
-                            <span className="font-medium">Device:</span>{' '}
+                            <span className="font-medium">{_(msg`Device`)}:</span>{' '}
                             <span className="inline-block">
                               {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0]?.userAgent)}
                             </span>
@@ -227,44 +245,46 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
                     <TableCell truncate={false} className="w-[min-content] align-top">
                       <div className="space-y-1">
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Sent:</span>{' '}
+                          <span className="font-medium">{_(msg`Sent`)}:</span>{' '}
                           <span className="inline-block">
                             {logs.EMAIL_SENT[0]
                               ? DateTime.fromJSDate(logs.EMAIL_SENT[0].createdAt)
                                   .setLocale(APP_I18N_OPTIONS.defaultLocale)
                                   .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
-                              : 'Unknown'}
+                              : _(msg`Unknown`)}
                           </span>
                         </p>
 
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Viewed:</span>{' '}
+                          <span className="font-medium">{_(msg`Viewed`)}:</span>{' '}
                           <span className="inline-block">
                             {logs.DOCUMENT_OPENED[0]
                               ? DateTime.fromJSDate(logs.DOCUMENT_OPENED[0].createdAt)
                                   .setLocale(APP_I18N_OPTIONS.defaultLocale)
                                   .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
-                              : 'Unknown'}
+                              : _(msg`Unknown`)}
                           </span>
                         </p>
 
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Signed:</span>{' '}
+                          <span className="font-medium">{_(msg`Signed`)}:</span>{' '}
                           <span className="inline-block">
                             {logs.DOCUMENT_RECIPIENT_COMPLETED[0]
                               ? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt)
                                   .setLocale(APP_I18N_OPTIONS.defaultLocale)
                                   .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
-                              : 'Unknown'}
+                              : _(msg`Unknown`)}
                           </span>
                         </p>
 
                         <p className="text-muted-foreground text-sm print:text-xs">
-                          <span className="font-medium">Reason:</span>{' '}
+                          <span className="font-medium">{_(msg`Reason`)}:</span>{' '}
                           <span className="inline-block">
-                            {isOwner(recipient.email)
-                              ? FRIENDLY_SIGNING_REASONS['__OWNER__']
-                              : FRIENDLY_SIGNING_REASONS[recipient.role]}
+                            {_(
+                              isOwner(recipient.email)
+                                ? FRIENDLY_SIGNING_REASONS['__OWNER__']
+                                : FRIENDLY_SIGNING_REASONS[recipient.role],
+                            )}
                           </span>
                         </p>
                       </div>
@@ -280,7 +300,7 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
       <div className="my-8 flex-row-reverse">
         <div className="flex items-end justify-end gap-x-4">
           <p className="flex-shrink-0 text-sm font-medium print:text-xs">
-            Signing certificate provided by:
+            {_(msg`Signing certificate provided by`)}:
           </p>
 
           <Logo className="max-h-6 print:max-h-4" />
diff --git a/apps/web/src/components/document/document-history-sheet.tsx b/apps/web/src/components/document/document-history-sheet.tsx
index 8ca8fa2ff..92f4a4cf1 100644
--- a/apps/web/src/components/document/document-history-sheet.tsx
+++ b/apps/web/src/components/document/document-history-sheet.tsx
@@ -12,7 +12,7 @@ import { UAParser } from 'ua-parser-js';
 import { DOCUMENT_AUDIT_LOG_EMAIL_FORMAT } from '@documenso/lib/constants/document-audit-logs';
 import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
-import { formatDocumentAuditLogActionString } from '@documenso/lib/utils/document-audit-logs';
+import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
@@ -37,7 +37,7 @@ export const DocumentHistorySheet = ({
   onMenuOpenChange,
   children,
 }: DocumentHistorySheetProps) => {
-  const { i18n } = useLingui();
+  const { _, i18n } = useLingui();
 
   const [isUserDetailsVisible, setIsUserDetailsVisible] = useState(false);
 
@@ -152,7 +152,7 @@ export const DocumentHistorySheet = ({
 
                   <div>
                     <p className="text-foreground text-xs font-bold">
-                      {formatDocumentAuditLogActionString(auditLog, userId)}
+                      {formatDocumentAuditLogAction(_, auditLog, userId).description}
                     </p>
                     <p className="text-foreground/50 text-xs">
                       {DateTime.fromJSDate(auditLog.createdAt)
diff --git a/packages/lib/constants/document.ts b/packages/lib/constants/document.ts
new file mode 100644
index 000000000..69bd62093
--- /dev/null
+++ b/packages/lib/constants/document.ts
@@ -0,0 +1,18 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/macro';
+
+import { DocumentStatus } from '@documenso/prisma/client';
+
+export const DOCUMENT_STATUS: {
+  [status in DocumentStatus]: { description: MessageDescriptor };
+} = {
+  [DocumentStatus.COMPLETED]: {
+    description: msg`Completed`,
+  },
+  [DocumentStatus.DRAFT]: {
+    description: msg`Draft`,
+  },
+  [DocumentStatus.PENDING]: {
+    description: msg`Pending`,
+  },
+};
diff --git a/packages/lib/constants/recipient-roles.ts b/packages/lib/constants/recipient-roles.ts
index 9a3eefe1c..51b890268 100644
--- a/packages/lib/constants/recipient-roles.ts
+++ b/packages/lib/constants/recipient-roles.ts
@@ -78,13 +78,3 @@ export const RECIPIENT_ROLE_SIGNING_REASONS = {
   [RecipientRole.CC]: msg`I am required to receive a copy of this document`,
   [RecipientRole.VIEWER]: msg`I am a viewer of this document`,
 } satisfies Record<keyof typeof RecipientRole, MessageDescriptor>;
-
-/**
- * Raw english descriptions for certificates.
- */
-export const RECIPIENT_ROLE_SIGNING_REASONS_ENG = {
-  [RecipientRole.SIGNER]: `I am a signer of this document`,
-  [RecipientRole.APPROVER]: `I am an approver of this document`,
-  [RecipientRole.CC]: `I am required to receive a copy of this document`,
-  [RecipientRole.VIEWER]: `I am a viewer of this document`,
-} satisfies Record<keyof typeof RecipientRole, string>;
diff --git a/packages/lib/utils/document-audit-logs.ts b/packages/lib/utils/document-audit-logs.ts
index 7ae9483d4..09d5548ff 100644
--- a/packages/lib/utils/document-audit-logs.ts
+++ b/packages/lib/utils/document-audit-logs.ts
@@ -1,14 +1,10 @@
+import type { I18n } from '@lingui/core';
+import { msg } from '@lingui/macro';
 import { match } from 'ts-pattern';
 
-import type {
-  DocumentAuditLog,
-  DocumentMeta,
-  Field,
-  Recipient,
-  RecipientRole,
-} from '@documenso/prisma/client';
+import type { DocumentAuditLog, DocumentMeta, Field, Recipient } from '@documenso/prisma/client';
+import { RecipientRole } from '@documenso/prisma/client';
 
-import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '../constants/recipient-roles';
 import type {
   TDocumentAuditLog,
   TDocumentAuditLogDocumentMetaDiffSchema,
@@ -254,129 +250,119 @@ export const diffDocumentMetaChanges = (
  *
  * Provide a userId to prefix the action with the user, example 'X did Y'.
  */
-export const formatDocumentAuditLogActionString = (
+export const formatDocumentAuditLogAction = (
+  _: I18n['_'],
   auditLog: TDocumentAuditLog,
   userId?: number,
 ) => {
-  const { prefix, description } = formatDocumentAuditLogAction(auditLog, userId);
-
-  return prefix ? `${prefix} ${description}` : description;
-};
-
-/**
- * Formats the audit log into a description of the action.
- *
- * Provide a userId to prefix the action with the user, example 'X did Y'.
- */
-// Todo: Translations.
-export const formatDocumentAuditLogAction = (auditLog: TDocumentAuditLog, userId?: number) => {
-  let prefix = userId === auditLog.userId ? 'You' : auditLog.name || auditLog.email || '';
+  const prefix = userId === auditLog.userId ? _(msg`You`) : auditLog.name || auditLog.email || '';
 
   const description = match(auditLog)
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED }, () => ({
-      anonymous: 'A field was added',
-      identified: 'added a field',
+      anonymous: msg`A field was added`,
+      identified: msg`${prefix} added a field`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED }, () => ({
-      anonymous: 'A field was removed',
-      identified: 'removed a field',
+      anonymous: msg`A field was removed`,
+      identified: msg`${prefix} removed a field`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED }, () => ({
-      anonymous: 'A field was updated',
-      identified: 'updated a field',
+      anonymous: msg`A field was updated`,
+      identified: msg`${prefix} updated a field`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED }, () => ({
-      anonymous: 'A recipient was added',
-      identified: 'added a recipient',
+      anonymous: msg`A recipient was added`,
+      identified: msg`${prefix} added a recipient`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED }, () => ({
-      anonymous: 'A recipient was removed',
-      identified: 'removed a recipient',
+      anonymous: msg`A recipient was removed`,
+      identified: msg`${prefix} removed a recipient`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED }, () => ({
-      anonymous: 'A recipient was updated',
-      identified: 'updated a recipient',
+      anonymous: msg`A recipient was updated`,
+      identified: msg`${prefix} updated a recipient`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED }, () => ({
-      anonymous: 'Document created',
-      identified: 'created the document',
+      anonymous: msg`Document created`,
+      identified: msg`${prefix} created the document`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED }, () => ({
-      anonymous: 'Document deleted',
-      identified: 'deleted the document',
+      anonymous: msg`Document deleted`,
+      identified: msg`${prefix} deleted the document`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, () => ({
-      anonymous: 'Field signed',
-      identified: 'signed a field',
+      anonymous: msg`Field signed`,
+      identified: msg`${prefix} signed a field`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED }, () => ({
-      anonymous: 'Field unsigned',
-      identified: 'unsigned a field',
+      anonymous: msg`Field unsigned`,
+      identified: msg`${prefix} unsigned a field`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_VISIBILITY_UPDATED }, () => ({
-      anonymous: 'Document visibility updated',
-      identified: 'updated the document visibility',
+      anonymous: msg`Document visibility updated`,
+      identified: msg`${prefix} updated the document visibility`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_GLOBAL_AUTH_ACCESS_UPDATED }, () => ({
-      anonymous: 'Document access auth updated',
-      identified: 'updated the document access auth requirements',
+      anonymous: msg`Document access auth updated`,
+      identified: msg`${prefix} updated the document access auth requirements`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_GLOBAL_AUTH_ACTION_UPDATED }, () => ({
-      anonymous: 'Document signing auth updated',
-      identified: 'updated the document signing auth requirements',
+      anonymous: msg`Document signing auth updated`,
+      identified: msg`${prefix} updated the document signing auth requirements`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED }, () => ({
-      anonymous: 'Document updated',
-      identified: 'updated the document',
+      anonymous: msg`Document updated`,
+      identified: msg`${prefix} updated the document`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED }, () => ({
-      anonymous: 'Document opened',
-      identified: 'opened the document',
+      anonymous: msg`Document opened`,
+      identified: msg`${prefix} opened the document`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED }, () => ({
-      anonymous: 'Document title updated',
-      identified: 'updated the document title',
+      anonymous: msg`Document title updated`,
+      identified: msg`${prefix} updated the document title`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_EXTERNAL_ID_UPDATED }, () => ({
-      anonymous: 'Document external ID updated',
-      identified: 'updated the document external ID',
+      anonymous: msg`Document external ID updated`,
+      identified: msg`${prefix} updated the document external ID`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT }, () => ({
-      anonymous: 'Document sent',
-      identified: 'sent the document',
+      anonymous: msg`Document sent`,
+      identified: msg`${prefix} sent the document`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_MOVED_TO_TEAM }, () => ({
-      anonymous: 'Document moved to team',
-      identified: 'moved the document to team',
+      anonymous: msg`Document moved to team`,
+      identified: msg`${prefix} moved the document to team`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED }, ({ data }) => {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const action = RECIPIENT_ROLES_DESCRIPTION_ENG[data.recipientRole as RecipientRole]?.actioned;
+      const userName = prefix || _(msg`Recipient`);
 
-      const value = action ? `${action.toLowerCase()} the document` : 'completed their task';
+      const result = match(data.recipientRole)
+        .with(RecipientRole.SIGNER, () => msg`${userName} signed the document`)
+        .with(RecipientRole.VIEWER, () => msg`${userName} viewed the document`)
+        .with(RecipientRole.APPROVER, () => msg`${userName} approved the document`)
+        .with(RecipientRole.CC, () => msg`${userName} CC'd the document`)
+        .otherwise(() => msg`${userName} completed their task`);
 
       return {
-        anonymous: `Recipient ${value}`,
-        identified: value,
+        anonymous: result,
+        identified: result,
       };
     })
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => ({
-      anonymous: `Email ${data.isResending ? 'resent' : 'sent'}`,
-      identified: `${data.isResending ? 'resent' : 'sent'} an email to ${data.recipientEmail}`,
+      anonymous: data.isResending ? msg`Email resent` : msg`Email sent`,
+      identified: data.isResending
+        ? msg`${prefix} resent an email to ${data.recipientEmail}`
+        : msg`${prefix} sent an email to ${data.recipientEmail}`,
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED }, () => ({
+      anonymous: msg`Document completed`,
+      identified: msg`Document completed`,
     }))
-    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED }, () => {
-      // Clear the prefix since this should be considered an 'anonymous' event.
-      prefix = '';
-
-      return {
-        anonymous: 'Document completed',
-        identified: 'Document completed',
-      };
-    })
     .exhaustive();
 
   return {
     prefix,
-    description: prefix ? description.identified : description.anonymous,
+    description: _(prefix ? description.identified : description.anonymous),
   };
 };