feat: i18n for emails (#1442)

## Description

Support setting a document language that will control the language used
for sending emails to recipients. Additional work has been done to
convert all emails to using our i18n implementation so we can later add
controls for sending other kinds of emails in a users target language.

## Related Issue

N/A

## Changes Made

- Added `<Trans>` and `msg` macros to emails
- Introduced a new `renderEmailWithI18N` utility in the lib package
- Updated all emails to use the `<Tailwind>` component at the top level
due to rendering constraints
- Updated the `i18n.server.tsx` file to not use a top level await

## Testing Performed

- Configured document language and verified emails were sent in the
expected language
- Created a document from a template and verified that the templates
language was transferred to the document

packages/lib/jobs/definitions/emails/send-signing-email.ts

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
 
+import { msg } from '@lingui/macro';
 import { z } from 'zod';
 
 import { mailer } from '@documenso/email/mailer';
-import { render } from '@documenso/email/render';
 import DocumentInviteEmailTemplate from '@documenso/email/templates/document-invite';
 import { prisma } from '@documenso/prisma';
 import {
@@ -13,6 +13,7 @@ import {
   SendStatus,
 } from '@documenso/prisma/client';
 
+import { getI18nInstance } from '../../../client-only/providers/i18n.server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../../constants/app';
 import { FROM_ADDRESS, FROM_NAME } from '../../../constants/email';
 import {
@@ -23,6 +24,7 @@ import { DOCUMENT_AUDIT_LOG_TYPE } from '../../../types/document-audit-logs';
 import { ZRequestMetadataSchema } from '../../../universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '../../../utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '../../../utils/render-custom-email-template';
+import { renderEmailWithI18N } from '../../../utils/render-email-with-i18n';
 import { type JobDefinition } from '../../client/_internal/job';
 
 const SEND_SIGNING_EMAIL_JOB_DEFINITION_ID = 'send.signing.requested.email';
@@ -90,22 +92,32 @@ export const SEND_SIGNING_EMAIL_JOB_DEFINITION = {
     const recipientActionVerb =
       RECIPIENT_ROLES_DESCRIPTION_ENG[recipient.role].actionVerb.toLowerCase();
 
+    const i18n = await getI18nInstance(documentMeta?.language);
+
     let emailMessage = customEmail?.message || '';
-    let emailSubject = `Please ${recipientActionVerb} this document`;
+    let emailSubject = i18n._(msg`Please ${recipientActionVerb} this document`);
 
     if (selfSigner) {
-      emailMessage = `You have initiated the document ${`"${document.title}"`} that requires you to ${recipientActionVerb} it.`;
-      emailSubject = `Please ${recipientActionVerb} your document`;
+      emailMessage = i18n._(
+        msg`You have initiated the document ${`"${document.title}"`} that requires you to ${recipientActionVerb} it.`,
+      );
+      emailSubject = i18n._(msg`Please ${recipientActionVerb} your document`);
     }
 
     if (isDirectTemplate) {
-      emailMessage = `A document was created by your direct template that requires you to ${recipientActionVerb} it.`;
-      emailSubject = `Please ${recipientActionVerb} this document created by your direct template`;
+      emailMessage = i18n._(
+        msg`A document was created by your direct template that requires you to ${recipientActionVerb} it.`,
+      );
+      emailSubject = i18n._(
+        msg`Please ${recipientActionVerb} this document created by your direct template`,
+      );
     }
 
     if (isTeamDocument && team) {
-      emailSubject = `${team.name} invited you to ${recipientActionVerb} a document`;
-      emailMessage = `${user.name} on behalf of ${team.name} has invited you to ${recipientActionVerb} the document "${document.title}".`;
+      emailSubject = i18n._(msg`${team.name} invited you to ${recipientActionVerb} a document`);
+      emailMessage = i18n._(
+        msg`${user.name} on behalf of ${team.name} has invited you to ${recipientActionVerb} the document "${document.title}".`,
+      );
     }
 
     const customEmailTemplate = {
@@ -132,6 +144,14 @@ export const SEND_SIGNING_EMAIL_JOB_DEFINITION = {
     });
 
     await io.runTask('send-signing-email', async () => {
+      const [html, text] = await Promise.all([
+        renderEmailWithI18N(template, { lang: documentMeta?.language }),
+        renderEmailWithI18N(template, {
+          lang: documentMeta?.language,
+          plainText: true,
+        }),
+      ]);
+
       await mailer.sendMail({
         to: {
           name: recipient.name,
@@ -145,8 +165,8 @@ export const SEND_SIGNING_EMAIL_JOB_DEFINITION = {
           documentMeta?.subject || emailSubject,
           customEmailTemplate,
         ),
-        html: render(template),
-        text: render(template, { plainText: true }),
+        html,
+        text,
       });
     });
 

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

@@ -1,13 +1,15 @@
+import { msg } from '@lingui/macro';
 import { z } from 'zod';
 
 import { mailer } from '@documenso/email/mailer';
-import { render } from '@documenso/email/render';
 import TeamJoinEmailTemplate from '@documenso/email/templates/team-join';
 import { prisma } from '@documenso/prisma';
 import { TeamMemberRole } from '@documenso/prisma/client';
 
+import { getI18nInstance } from '../../../client-only/providers/i18n.server';
 import { WEBAPP_BASE_URL } from '../../../constants/app';
 import { FROM_ADDRESS, FROM_NAME } from '../../../constants/email';
+import { renderEmailWithI18N } from '../../../utils/render-email-with-i18n';
 import type { JobDefinition } from '../../client/_internal/job';
 
 const SEND_TEAM_MEMBER_JOINED_EMAIL_JOB_DEFINITION_ID = 'send.team-member-joined.email';
@@ -71,15 +73,23 @@ export const SEND_TEAM_MEMBER_JOINED_EMAIL_JOB_DEFINITION = {
             teamUrl: team.url,
           });
 
+          // !: Replace with the actual language of the recipient later
+          const [html, text] = await Promise.all([
+            renderEmailWithI18N(emailContent),
+            renderEmailWithI18N(emailContent, { plainText: true }),
+          ]);
+
+          const i18n = await getI18nInstance();
+
           await mailer.sendMail({
             to: member.user.email,
             from: {
               name: FROM_NAME,
               address: FROM_ADDRESS,
             },
-            subject: 'A new member has joined your team',
-            html: render(emailContent),
-            text: render(emailContent, { plainText: true }),
+            subject: i18n._(msg`A new member has joined your team`),
+            html,
+            text,
           });
         },
       );

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

@@ -1,13 +1,15 @@
+import { msg } from '@lingui/macro';
 import { z } from 'zod';
 
 import { mailer } from '@documenso/email/mailer';
-import { render } from '@documenso/email/render';
 import TeamJoinEmailTemplate from '@documenso/email/templates/team-join';
 import { prisma } from '@documenso/prisma';
 import { TeamMemberRole } from '@documenso/prisma/client';
 
+import { getI18nInstance } from '../../../client-only/providers/i18n.server';
 import { WEBAPP_BASE_URL } from '../../../constants/app';
 import { FROM_ADDRESS, FROM_NAME } from '../../../constants/email';
+import { renderEmailWithI18N } from '../../../utils/render-email-with-i18n';
 import type { JobDefinition } from '../../client/_internal/job';
 
 const SEND_TEAM_MEMBER_LEFT_EMAIL_JOB_DEFINITION_ID = 'send.team-member-left.email';
@@ -61,15 +63,22 @@ export const SEND_TEAM_MEMBER_LEFT_EMAIL_JOB_DEFINITION = {
           teamUrl: team.url,
         });
 
+        const [html, text] = await Promise.all([
+          renderEmailWithI18N(emailContent),
+          renderEmailWithI18N(emailContent, { plainText: true }),
+        ]);
+
+        const i18n = await getI18nInstance();
+
         await mailer.sendMail({
           to: member.user.email,
           from: {
             name: FROM_NAME,
             address: FROM_ADDRESS,
           },
-          subject: `A team member has left ${team.name}`,
-          html: render(emailContent),
-          text: render(emailContent, { plainText: true }),
+          subject: i18n._(msg`A team member has left ${team.name}`),
+          html,
+          text,
         });
       });
     }