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

apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx

@@ -24,7 +24,7 @@ type AdminDocumentDetailsPageProps = {
 };
 
 export default async function AdminDocumentDetailsPage({ params }: AdminDocumentDetailsPageProps) {
-  const { i18n } = setupI18nSSR();
+  const { i18n } = await setupI18nSSR();
 
   const document = await getEntireDocument({ id: Number(params.id) });
 

apps/web/src/app/(dashboard)/admin/documents/page.tsx

@@ -4,8 +4,8 @@ import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 
 import { AdminDocumentResults } from './document-results';
 
-export default function AdminDocumentsPage() {
-  setupI18nSSR();
+export default async function AdminDocumentsPage() {
+  await setupI18nSSR();
 
   return (
     <div>

apps/web/src/app/(dashboard)/admin/layout.tsx

@@ -13,7 +13,7 @@ export type AdminSectionLayoutProps = {
 };
 
 export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/admin/site-settings/page.tsx

@@ -12,7 +12,7 @@ import { BannerForm } from './banner-form';
 // import { BannerForm } from './banner-form';
 
 export default async function AdminBannerPage() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
 

apps/web/src/app/(dashboard)/admin/stats/page.tsx

@@ -30,7 +30,7 @@ import { SignerConversionChart } from './signer-conversion-chart';
 import { UserWithDocumentChart } from './user-with-document';
 
 export default async function AdminStatsPage() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
 

apps/web/src/app/(dashboard)/admin/subscriptions/page.tsx

@@ -14,7 +14,7 @@ import {
 } from '@documenso/ui/primitives/table';
 
 export default async function Subscriptions() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const subscriptions = await findSubscriptions();
 

apps/web/src/app/(dashboard)/admin/users/page.tsx

@@ -16,7 +16,7 @@ type AdminManageUsersProps = {
 };
 
 export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 10;

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -7,6 +7,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
+import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
@@ -201,7 +202,7 @@ export const EditDocumentForm = ({
 
   const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
     try {
-      const { timezone, dateFormat, redirectUrl } = data.meta;
+      const { timezone, dateFormat, redirectUrl, language } = data.meta;
 
       await setSettingsForDocument({
         documentId: document.id,
@@ -217,6 +218,7 @@ export const EditDocumentForm = ({
           timezone,
           dateFormat,
           redirectUrl,
+          language: isValidLanguageCode(language) ? language : undefined,
         },
       });
 

apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx

@@ -8,8 +8,8 @@ export type DocumentPageProps = {
   };
 };
 
-export default function DocumentEditPage({ params }: DocumentPageProps) {
-  setupI18nSSR();
+export default async function DocumentEditPage({ params }: DocumentPageProps) {
+  await setupI18nSSR();
 
   return <DocumentEditPageView params={params} />;
 }

apps/web/src/app/(dashboard)/documents/[id]/loading.tsx

@@ -6,8 +6,8 @@ import { ChevronLeft, Loader } from 'lucide-react';
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 
-export default function Loading() {
-  setupI18nSSR();
+export default async function Loading() {
+  await setupI18nSSR();
 
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">

apps/web/src/app/(dashboard)/documents/[id]/logs/page.tsx

@@ -8,8 +8,8 @@ export type DocumentsLogsPageProps = {
   };
 };
 
-export default function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
-  setupI18nSSR();
+export default async function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
+  await setupI18nSSR();
 
   return <DocumentLogsPageView params={params} />;
 }

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -8,8 +8,8 @@ export type DocumentPageProps = {
   };
 };
 
-export default function DocumentPage({ params }: DocumentPageProps) {
-  setupI18nSSR();
+export default async function DocumentPage({ params }: DocumentPageProps) {
+  await setupI18nSSR();
 
   return <DocumentPageView params={params} />;
 }

apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx

@@ -5,8 +5,8 @@ import { ChevronLeft } from 'lucide-react';
 
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 
-export default function DocumentSentPage() {
-  setupI18nSSR();
+export default async function DocumentSentPage() {
+  await setupI18nSSR();
 
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -16,7 +16,7 @@ export const metadata: Metadata = {
 };
 
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/layout.tsx

@@ -23,7 +23,7 @@ export type AuthenticatedDashboardLayoutProps = {
 export default async function AuthenticatedDashboardLayout({
   children,
 }: AuthenticatedDashboardLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const session = await getServerSession(NEXT_AUTH_OPTIONS);
 

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -24,7 +24,7 @@ export const metadata: Metadata = {
 };
 
 export default async function BillingSettingsPage() {
-  const { i18n } = setupI18nSSR();
+  const { i18n } = await setupI18nSSR();
 
   let { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/settings/layout.tsx

@@ -11,8 +11,8 @@ export type DashboardSettingsLayoutProps = {
   children: React.ReactNode;
 };
 
-export default function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
-  setupI18nSSR();
+export default async function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
+  await setupI18nSSR();
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 };
 
 export default async function ProfileSettingsPage() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
   const { user } = await getRequiredServerComponentSession();

apps/web/src/app/(dashboard)/settings/public-profile/page.tsx

@@ -5,7 +5,7 @@ import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-p
 import { PublicProfilePageView } from './public-profile-page-view';
 
 export default async function Page() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/settings/security/activity/page.tsx

@@ -14,8 +14,8 @@ export const metadata: Metadata = {
   title: 'Security activity',
 };
 
-export default function SettingsSecurityActivityPage() {
-  setupI18nSSR();
+export default async function SettingsSecurityActivityPage() {
+  await setupI18nSSR();
 
   const { _ } = useLingui();
 

apps/web/src/app/(dashboard)/settings/security/page.tsx

@@ -21,7 +21,7 @@ export const metadata: Metadata = {
 };
 
 export default async function SecuritySettingsPage() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
   const { user } = await getRequiredServerComponentSession();

apps/web/src/app/(dashboard)/settings/security/passkeys/page.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 };
 
 export default async function SettingsManagePasskeysPage() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
   const isPasskeyEnabled = await getServerComponentFlag('app_passkey');

apps/web/src/app/(dashboard)/settings/tokens/page.tsx

@@ -10,7 +10,7 @@ import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-to
 import { ApiTokenForm } from '~/components/forms/token';
 
 export default async function ApiTokensPage() {
-  const { i18n } = setupI18nSSR();
+  const { i18n } = await setupI18nSSR();
 
   const { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
+import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
@@ -151,7 +152,10 @@ export const EditTemplateForm = ({
           globalAccessAuth: data.globalAccessAuth ?? null,
           globalActionAuth: data.globalActionAuth ?? null,
         },
-        meta: data.meta,
+        meta: {
+          ...data.meta,
+          language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
+        },
       });
 
       // Router refresh is here to clear the router cache for when navigating to /documents.

apps/web/src/app/(dashboard)/templates/[id]/page.tsx

@@ -7,8 +7,8 @@ import { TemplatePageView } from './template-page-view';
 
 type TemplatePageProps = Pick<TemplatePageViewProps, 'params'>;
 
-export default function TemplatePage({ params }: TemplatePageProps) {
-  setupI18nSSR();
+export default async function TemplatePage({ params }: TemplatePageProps) {
+  await setupI18nSSR();
 
   return <TemplatePageView params={params} />;
 }

apps/web/src/app/(dashboard)/templates/page.tsx

@@ -15,8 +15,8 @@ export const metadata: Metadata = {
   title: 'Templates',
 };
 
-export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
-  setupI18nSSR();
+export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  await setupI18nSSR();
 
   return <TemplatesPageView searchParams={searchParams} />;
 }