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/marketing/src/app/(marketing)/[content]/page.tsx

@@ -30,8 +30,8 @@ const mdxComponents: MDXComponents = {
  *
  * Will render the document if it exists, otherwise will return a 404.
  */
-export default function ContentPage({ params }: { params: { content: string } }) {
-  setupI18nSSR();
+export default async function ContentPage({ params }: { params: { content: string } }) {
+  await setupI18nSSR();
 
   const post = allDocuments.find((post) => post._raw.flattenedPath === params.content);
 

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -48,8 +48,8 @@ const mdxComponents: MDXComponents = {
   ),
 };
 
-export default function BlogPostPage({ params }: { params: { post: string } }) {
-  setupI18nSSR();
+export default async function BlogPostPage({ params }: { params: { post: string } }) {
+  await setupI18nSSR();
 
   const post = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
 

apps/marketing/src/app/(marketing)/blog/page.tsx

@@ -9,8 +9,8 @@ export const metadata: Metadata = {
   title: 'Blog',
 };
 
-export default function BlogPage() {
-  const { i18n } = setupI18nSSR();
+export default async function BlogPage() {
+  const { i18n } = await setupI18nSSR();
 
   const blogPosts = allBlogPosts.sort((a, b) => {
     const dateA = new Date(a.date);

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 
 import { Trans, msg } from '@lingui/macro';
-import { useLingui } from '@lingui/react';
 import { z } from 'zod';
 
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
@@ -131,9 +130,9 @@ const fetchEarlyAdopters = async () => {
 };
 
 export default async function OpenPage() {
-  setupI18nSSR();
+  const { i18n } = await setupI18nSSR();
 
-  const { _ } = useLingui();
+  const { _ } = i18n;
 
   const [
     { forks_count: forksCount, stargazers_count: stargazersCount },

apps/marketing/src/app/(marketing)/page.tsx

@@ -26,7 +26,7 @@ const fontCaveat = Caveat({
 });
 
 export default async function IndexPage() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const starCount = await fetch('https://api.github.com/repos/documenso/documenso', {
     headers: {

apps/marketing/src/app/(marketing)/pricing/page.tsx

@@ -30,8 +30,8 @@ export type PricingPageProps = {
   };
 };
 
-export default function PricingPage() {
-  setupI18nSSR();
+export default async function PricingPage() {
+  await setupI18nSSR();
 
   return (
     <div className="mt-6 sm:mt-12">

apps/marketing/src/app/(marketing)/singleplayer/page.tsx

@@ -14,8 +14,8 @@ export const dynamic = 'force-dynamic';
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during
 // !: the upgrade of Next.js to v13.5.x.
-export default function SingleplayerPage() {
-  setupI18nSSR();
+export default async function SingleplayerPage() {
+  await setupI18nSSR();
 
   return <SinglePlayerClient />;
 }

apps/marketing/src/app/layout.tsx

@@ -56,7 +56,7 @@ export function generateMetadata() {
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getAllAnonymousFlags();
 
-  const { lang, locales, i18n } = setupI18nSSR();
+  const { lang, locales, i18n } = await setupI18nSSR();
 
   return (
     <html

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} />;
 }

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

@@ -14,7 +14,7 @@ type PublicProfileLayoutProps = {
 };
 
 export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { user, session } = await getServerComponentSession();
 

apps/web/src/app/(profile)/p/[url]/page.tsx

@@ -42,7 +42,7 @@ const BADGE_DATA = {
 };
 
 export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { url: profileUrl } = params;
 

apps/web/src/app/(recipient)/d/[token]/page.tsx

@@ -24,7 +24,7 @@ export type TemplatesDirectPageProps = {
 };
 
 export default async function TemplatesDirectPage({ params }: TemplatesDirectPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { token } = params;
 

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

@@ -19,7 +19,7 @@ type RecipientLayoutProps = {
  * Such as direct template access, or signing.
  */
 export default async function RecipientLayout({ children }: RecipientLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { user, session } = await getServerComponentSession();
 

apps/web/src/app/(signing)/sign/[token]/complete/layout.tsx

@@ -8,8 +8,8 @@ export type SigningLayoutProps = {
   children: React.ReactNode;
 };
 
-export default function SigningLayout({ children }: SigningLayoutProps) {
-  setupI18nSSR();
+export default async function SigningLayout({ children }: SigningLayoutProps) {
+  await setupI18nSSR();
 
   return (
     <div>

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -40,7 +40,7 @@ export type CompletedSigningPageProps = {
 export default async function CompletedSigningPage({
   params: { token },
 }: CompletedSigningPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
 

apps/web/src/app/(signing)/sign/[token]/layout.tsx

@@ -13,7 +13,7 @@ export type SigningLayoutProps = {
 };
 
 export default async function SigningLayout({ children }: SigningLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { user, session } = await getServerComponentSession();
 

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -31,7 +31,7 @@ export type SigningPageProps = {
 };
 
 export default async function SigningPage({ params: { token } }: SigningPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   if (!token) {
     return notFound();

apps/web/src/app/(signing)/sign/[token]/waiting/page.tsx

@@ -21,7 +21,7 @@ type WaitingForTurnToSignPageProps = {
 export default async function WaitingForTurnToSignPage({
   params: { token },
 }: WaitingForTurnToSignPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   if (!token) {
     return notFound();

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/edit/page.tsx

@@ -12,7 +12,7 @@ export type DocumentPageProps = {
 };
 
 export default async function TeamsDocumentEditPage({ params }: DocumentPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/logs/page.tsx

@@ -12,7 +12,7 @@ export type TeamDocumentsLogsPageProps = {
 };
 
 export default async function TeamsDocumentsLogsPage({ params }: TeamDocumentsLogsPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx

@@ -12,7 +12,7 @@ export type DocumentPageProps = {
 };
 
 export default async function DocumentPage({ params }: DocumentPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx

@@ -16,7 +16,7 @@ export default async function TeamsDocumentPage({
   params,
   searchParams = {},
 }: TeamsDocumentPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx

@@ -27,7 +27,7 @@ export default async function AuthenticatedTeamsLayout({
   children,
   params,
 }: AuthenticatedTeamsLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { session, user } = await getServerComponentSession();
 

apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx

@@ -21,7 +21,7 @@ export type TeamsSettingsBillingPageProps = {
 };
 
 export default async function TeamsSettingBillingPage({ params }: TeamsSettingsBillingPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
 

apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx

@@ -24,7 +24,7 @@ export default async function TeamsSettingsLayout({
   children,
   params: { teamUrl },
 }: TeamSettingsLayoutProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const session = await getRequiredServerComponentSession();
 

apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx

@@ -16,7 +16,7 @@ export type TeamsSettingsMembersPageProps = {
 };
 
 export default async function TeamsSettingsMembersPage({ params }: TeamsSettingsMembersPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
   const { teamUrl } = params;

apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx

@@ -28,7 +28,7 @@ export type TeamsSettingsPageProps = {
 };
 
 export default async function TeamsSettingsPage({ params }: TeamsSettingsPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/settings/public-profile/page.tsx

@@ -14,7 +14,7 @@ export type TeamsSettingsPublicProfilePageProps = {
 export default async function TeamsSettingsPublicProfilePage({
   params,
 }: TeamsSettingsPublicProfilePageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx

@@ -21,7 +21,7 @@ type ApiTokensPageProps = {
 };
 
 export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
-  const { i18n } = setupI18nSSR();
+  const { i18n } = await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/templates/[id]/page.tsx

@@ -14,7 +14,7 @@ type TeamTemplatePageProps = {
 };
 
 export default async function TeamTemplatePage({ params }: TeamTemplatePageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(teams)/t/[teamUrl]/templates/page.tsx

@@ -18,7 +18,7 @@ export default async function TeamTemplatesPage({
   searchParams = {},
   params,
 }: TeamTemplatesPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { teamUrl } = params;
 

apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx

@@ -7,8 +7,8 @@ import { Button } from '@documenso/ui/primitives/button';
 
 const SUPPORT_EMAIL = 'support@documenso.com';
 
-export default function SignatureDisclosure() {
-  setupI18nSSR();
+export default async function SignatureDisclosure() {
+  await setupI18nSSR();
 
   return (
     <div>

apps/web/src/app/(unauthenticated)/check-email/page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
   title: 'Forgot password',
 };
 
-export default function ForgotPasswordPage() {
-  setupI18nSSR();
+export default async function ForgotPasswordPage() {
+  await setupI18nSSR();
 
   return (
     <div className="w-screen max-w-lg px-4">

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -11,8 +11,8 @@ export const metadata: Metadata = {
   title: 'Forgot Password',
 };
 
-export default function ForgotPasswordPage() {
-  setupI18nSSR();
+export default async function ForgotPasswordPage() {
+  await setupI18nSSR();
 
   return (
     <div className="w-screen max-w-lg px-4">

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

@@ -9,8 +9,8 @@ type UnauthenticatedLayoutProps = {
   children: React.ReactNode;
 };
 
-export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
-  setupI18nSSR();
+export default async function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
+  await setupI18nSSR();
 
   return (
     <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">

apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx

@@ -15,7 +15,7 @@ type ResetPasswordPageProps = {
 };
 
 export default async function ResetPasswordPage({ params: { token } }: ResetPasswordPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const isValid = await getResetTokenValidity({ token });
 

apps/web/src/app/(unauthenticated)/reset-password/page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
   title: 'Reset Password',
 };
 
-export default function ResetPasswordPage() {
-  setupI18nSSR();
+export default async function ResetPasswordPage() {
+  await setupI18nSSR();
 
   return (
     <div className="w-screen max-w-lg px-4">

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -17,8 +17,8 @@ export const metadata: Metadata = {
   title: 'Sign In',
 };
 
-export default function SignInPage() {
-  setupI18nSSR();
+export default async function SignInPage() {
+  await setupI18nSSR();
 
   const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
 

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -12,8 +12,8 @@ export const metadata: Metadata = {
   title: 'Sign Up',
 };
 
-export default function SignUpPage() {
-  setupI18nSSR();
+export default async function SignUpPage() {
+  await setupI18nSSR();
 
   const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
 

apps/web/src/app/(unauthenticated)/team/decline/[token]/page.tsx

@@ -21,7 +21,7 @@ type DeclineInvitationPageProps = {
 export default async function DeclineInvitationPage({
   params: { token },
 }: DeclineInvitationPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const session = await getServerComponentSession();
 

apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx

@@ -21,7 +21,7 @@ type AcceptInvitationPageProps = {
 export default async function AcceptInvitationPage({
   params: { token },
 }: AcceptInvitationPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const session = await getServerComponentSession();
 

apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx

@@ -14,7 +14,7 @@ type VerifyTeamEmailPageProps = {
 };
 
 export default async function VerifyTeamEmailPage({ params: { token } }: VerifyTeamEmailPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const teamEmailVerification = await prisma.teamEmailVerification.findUnique({
     where: {

apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx

@@ -17,7 +17,7 @@ type VerifyTeamTransferPage = {
 export default async function VerifyTeamTransferPage({
   params: { token },
 }: VerifyTeamTransferPage) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const teamTransferVerification = await prisma.teamTransferVerification.findUnique({
     where: {

apps/web/src/app/(unauthenticated)/unverified-account/page.tsx

@@ -5,8 +5,8 @@ import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 
 import { SendConfirmationEmailForm } from '~/components/forms/send-confirmation-email';
 
-export default function UnverifiedAccount() {
-  setupI18nSSR();
+export default async function UnverifiedAccount() {
+  await setupI18nSSR();
 
   return (
     <div className="w-screen max-w-lg px-4">

apps/web/src/app/(unauthenticated)/verify-email/[token]/page.tsx

@@ -23,7 +23,7 @@ export type PageProps = {
 };
 
 export default async function VerifyEmailPage({ params: { token } }: PageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   if (!token) {
     return (

apps/web/src/app/(unauthenticated)/verify-email/page.tsx

@@ -11,8 +11,8 @@ export const metadata: Metadata = {
   title: 'Verify Email',
 };
 
-export default function EmailVerificationWithoutTokenPage() {
-  setupI18nSSR();
+export default async function EmailVerificationWithoutTokenPage() {
+  await setupI18nSSR();
 
   return (
     <div className="w-screen max-w-lg px-4">

apps/web/src/app/layout.tsx

@@ -56,7 +56,7 @@ export function generateMetadata() {
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getServerComponentAllFlags();
 
-  const { i18n, lang, locales } = setupI18nSSR();
+  const { i18n, lang, locales } = await setupI18nSSR();
 
   return (
     <html

apps/web/src/app/not-found.tsx

@@ -9,7 +9,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import NotFoundPartial from '~/components/partials/not-found';
 
 export default async function NotFound() {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { session } = await getServerComponentSession();
 

apps/web/src/app/page.tsx

@@ -1,7 +1,7 @@
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 
-export default function DashboardPage() {
-  setupI18nSSR();
+export default async function DashboardPage() {
+  await setupI18nSSR();
 
   return <div>Documenso</div>;
 }

lingui.config.ts

@@ -19,7 +19,7 @@ const config: LinguiConfig = {
     },
     {
       path: '<rootDir>/packages/lib/translations/{locale}/common',
-      include: ['packages/ui', 'packages/lib'],
+      include: ['packages/ui', 'packages/lib', 'packages/email'],
       exclude: ['**/node_modules/**'],
     },
   ],

package-lock.json

@@ -36774,6 +36774,9 @@
         "@documenso/email": "*",
         "@documenso/prisma": "*",
         "@documenso/signing": "*",
+        "@lingui/core": "^4.11.3",
+        "@lingui/macro": "^4.11.3",
+        "@lingui/react": "^4.11.3",
         "@next-auth/prisma-adapter": "1.0.7",
         "@noble/ciphers": "0.4.0",
         "@noble/hashes": "1.3.2",

packages/api/v1/implementation.ts

@@ -301,6 +301,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         dateFormat: dateFormat?.value,
         redirectUrl: body.meta.redirectUrl,
         signingOrder: body.meta.signingOrder,
+        language: body.meta.language,
         requestMetadata: extractNextApiRequestMetadata(args.req),
       });
 

packages/api/v1/schema.ts

@@ -2,6 +2,7 @@ import { extendZodWithOpenApi } from '@anatine/zod-openapi';
 import { z } from 'zod';
 
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
 import '@documenso/lib/constants/time-zones';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { ZUrlSchema } from '@documenso/lib/schemas/common';
@@ -127,6 +128,7 @@ export const ZCreateDocumentMutationSchema = z.object({
         }),
       redirectUrl: z.string(),
       signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
+      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
     })
     .partial(),
   authOptions: z
@@ -181,6 +183,7 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
       dateFormat: z.string(),
       redirectUrl: z.string(),
       signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
+      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
     })
     .partial()
     .optional(),
@@ -247,6 +250,7 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
       dateFormat: z.string(),
       redirectUrl: ZUrlSchema,
       signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
+      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
     })
     .partial()
     .optional(),

packages/email/render.ts

@@ -1 +0,0 @@
-export { render, renderAsync } from '@react-email/render';

packages/email/render.tsx

@@ -0,0 +1,39 @@
+import * as reactEmail from '@react-email/render';
+
+import config from '@documenso/tailwind-config';
+
+import { Tailwind } from './components';
+
+export const render: typeof reactEmail.render = (element, options) => {
+  return reactEmail.render(
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      {element}
+    </Tailwind>,
+    options,
+  );
+};
+
+export const renderAsync: typeof reactEmail.renderAsync = async (element, options) => {
+  return reactEmail.renderAsync(
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      {element}
+    </Tailwind>,
+    options,
+  );
+};

packages/email/template-components/template-confirmation-email.tsx

@@ -1,3 +1,6 @@
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -10,17 +13,21 @@ export const TemplateConfirmationEmail = ({
   confirmationLink,
   assetBaseUrl,
 }: TemplateConfirmationEmailProps) => {
+  const { _ } = useLingui();
+
   return (
     <>
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          Welcome to Documenso!
+          <Trans>Welcome to Documenso!</Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          Before you get started, please confirm your email address by clicking the button below:
+          <Trans>
+            Before you get started, please confirm your email address by clicking the button below:
+          </Trans>
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -28,11 +35,13 @@ export const TemplateConfirmationEmail = ({
             className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
             href={confirmationLink}
           >
-            Confirm email
+            <Trans>Confirm email</Trans>
           </Button>
           <Text className="mt-8 text-center text-sm italic text-slate-400">
-            You can also copy and paste this link into your browser: {confirmationLink} (link
-            expires in 1 hour)
+            <Trans>
+              You can also copy and paste this link into your browser: {confirmationLink} (link
+              expires in 1 hour)
+            </Trans>
           </Text>
         </Section>
       </Section>

packages/email/template-components/template-document-cancel.tsx

@@ -1,3 +1,5 @@
+import { Trans } from '@lingui/macro';
+
 import { Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -19,16 +21,18 @@ export const TemplateDocumentCancel = ({
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has cancelled the document
-          <br />"{documentName}"
+          <Trans>
+            {inviterName} has cancelled the document
+            <br />"{documentName}"
+          </Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          All signatures have been voided.
+          <Trans>All signatures have been voided.</Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          You don't need to sign it anymore.
+          <Trans>You don't need to sign it anymore.</Trans>
         </Text>
       </Section>
     </>

packages/email/template-components/template-document-completed.tsx

@@ -1,3 +1,5 @@
+import { Trans } from '@lingui/macro';
+
 import { Button, Column, Img, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -30,17 +32,17 @@ export const TemplateDocumentCompleted = ({
                 src={getAssetUrl('/static/completed.png')}
                 className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
               />
-              Completed
+              <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
-          {customBody ?? `“${documentName}” was signed by all signers`}
+          <Trans>{customBody ?? `“${documentName}” was signed by all signers`}</Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          Continue by downloading the document.
+          <Trans>Continue by downloading the document.</Trans>
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -59,7 +61,7 @@ export const TemplateDocumentCompleted = ({
               src={getAssetUrl('/static/download.png')}
               className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
             />
-            Download
+            <Trans>Download</Trans>
           </Button>
         </Section>
       </Section>

packages/email/template-components/template-document-invite.tsx

@@ -1,3 +1,6 @@
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import type { RecipientRole } from '@documenso/prisma/client';
 
@@ -26,6 +29,8 @@ export const TemplateDocumentInvite = ({
   isTeamInvite,
   teamName,
 }: TemplateDocumentInviteProps) => {
+  const { _ } = useLingui();
+
   const { actionVerb, progressiveVerb } = RECIPIENT_ROLES_DESCRIPTION_ENG[role];
 
   return (
@@ -35,28 +40,30 @@ export const TemplateDocumentInvite = ({
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           {selfSigner ? (
-            <>
-              {`Please ${actionVerb.toLowerCase()} your document`}
+            <Trans>
+              {`Please ${_(actionVerb).toLowerCase()} your document`}
               <br />
               {`"${documentName}"`}
-            </>
+            </Trans>
           ) : isTeamInvite ? (
-            <>
-              {`${inviterName} on behalf of ${teamName} has invited you to ${actionVerb.toLowerCase()}`}
+            <Trans>
+              {`${inviterName} on behalf of ${teamName} has invited you to ${_(
+                actionVerb,
+              ).toLowerCase()}`}
               <br />
               {`"${documentName}"`}
-            </>
+            </Trans>
           ) : (
-            <>
-              {`${inviterName} has invited you to ${actionVerb.toLowerCase()}`}
+            <Trans>
+              {`${inviterName} has invited you to ${_(actionVerb).toLowerCase()}`}
               <br />
               {`"${documentName}"`}
-            </>
+            </Trans>
           )}
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          Continue by {progressiveVerb.toLowerCase()} the document.
+          <Trans>Continue by {_(progressiveVerb).toLowerCase()} the document.</Trans>
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -64,7 +71,7 @@ export const TemplateDocumentInvite = ({
             className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
             href={signDocumentLink}
           >
-            {actionVerb} Document
+            <Trans>{_(actionVerb)} Document</Trans>
           </Button>
         </Section>
       </Section>

packages/email/template-components/template-document-pending.tsx

@@ -1,3 +1,5 @@
+import { Trans } from '@lingui/macro';
+
 import { Column, Img, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -26,19 +28,21 @@ export const TemplateDocumentPending = ({
                 src={getAssetUrl('/static/clock.png')}
                 className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
               />
-              Waiting for others
+              <Trans>Waiting for others</Trans>
             </Text>
           </Column>
         </Section>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
-          “{documentName}” has been signed
+          <Trans>“{documentName}” has been signed</Trans>
         </Text>
 
         <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-          We're still waiting for other signers to sign this document.
-          <br />
-          We'll notify you as soon as it's ready.
+          <Trans>
+            We're still waiting for other signers to sign this document.
+            <br />
+            We'll notify you as soon as it's ready.
+          </Trans>
         </Text>
       </Section>
     </>

packages/email/template-components/template-document-self-signed.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro';
 import { env } from 'next-runtime-env';
 
 import { Button, Column, Img, Link, Section, Text } from '../components';
@@ -32,25 +33,27 @@ export const TemplateDocumentSelfSigned = ({
                 src={getAssetUrl('/static/completed.png')}
                 className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
               />
-              Completed
+              <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
         <Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
-          You have signed “{documentName}”
+          <Trans>You have signed “{documentName}”</Trans>
         </Text>
 
         <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-          Create a{' '}
-          <Link
-            href={signUpUrl}
-            target="_blank"
-            className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
-          >
-            free account
-          </Link>{' '}
-          to access your signed documents at any time.
+          <Trans>
+            Create a{' '}
+            <Link
+              href={signUpUrl}
+              target="_blank"
+              className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+            >
+              free account
+            </Link>{' '}
+            to access your signed documents at any time.
+          </Trans>
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -62,7 +65,7 @@ export const TemplateDocumentSelfSigned = ({
               src={getAssetUrl('/static/user-plus.png')}
               className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
             />
-            Create account
+            <Trans>Create account</Trans>
           </Button>
 
           <Button
@@ -73,7 +76,7 @@ export const TemplateDocumentSelfSigned = ({
               src={getAssetUrl('/static/review.png')}
               className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
             />
-            View plans
+            <Trans>View plans</Trans>
           </Button>
         </Section>
       </Section>

packages/email/template-components/template-document-super-delete.tsx

@@ -1,3 +1,5 @@
+import { Trans } from '@lingui/macro';
+
 import { Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -18,20 +20,22 @@ export const TemplateDocumentDelete = ({
 
       <Section>
         <Text className="text-primary mb-0 mt-6 text-left text-lg font-semibold">
-          Your document has been deleted by an admin!
+          <Trans>Your document has been deleted by an admin!</Trans>
         </Text>
 
         <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
-          "{documentName}" has been deleted by an admin.
+          <Trans>"{documentName}" has been deleted by an admin.</Trans>
         </Text>
 
         <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
-          This document can not be recovered, if you would like to dispute the reason for future
-          documents please contact support.
+          <Trans>
+            This document can not be recovered, if you would like to dispute the reason for future
+            documents please contact support.
+          </Trans>
         </Text>
 
         <Text className="mx-auto mt-1 text-left text-base text-slate-400">
-          The reason provided for deletion is the following:
+          <Trans>The reason provided for deletion is the following:</Trans>
         </Text>
 
         <Text className="mx-auto mb-6 mt-1 text-left text-base italic text-slate-400">

packages/email/template-components/template-footer.tsx

@@ -1,3 +1,5 @@
+import { Trans } from '@lingui/macro';
+
 import { Link, Section, Text } from '../components';
 
 export type TemplateFooterProps = {
@@ -9,10 +11,12 @@ export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
     <Section>
       {isDocument && (
         <Text className="my-4 text-base text-slate-400">
-          This document was sent using{' '}
-          <Link className="text-[#7AC455]" href="https://documen.so/mail-footer">
-            Documenso.
-          </Link>
+          <Trans>
+            This document was sent using{' '}
+            <Link className="text-[#7AC455]" href="https://documen.so/mail-footer">
+              Documenso.
+            </Link>
+          </Trans>
         </Text>
       )}
 

packages/email/template-components/template-forgot-password.tsx

@@ -1,3 +1,5 @@
+import { Trans } from '@lingui/macro';
+
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -16,11 +18,11 @@ export const TemplateForgotPassword = ({
 
       <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          Forgot your password?
+          <Trans>Forgot your password?</Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          That's okay, it happens! Click the button below to reset your password.
+          <Trans>That's okay, it happens! Click the button below to reset your password.</Trans>
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -28,7 +30,7 @@ export const TemplateForgotPassword = ({
             className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
             href={resetPasswordLink}
           >
-            Reset Password
+            <Trans>Reset Password</Trans>
           </Button>
         </Section>
       </Section>

packages/email/template-components/template-reset-password.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro';
 import { env } from 'next-runtime-env';
 
 import { Button, Section, Text } from '../components';
@@ -18,11 +19,11 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
 
       <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          Password updated!
+          <Trans>Password updated!</Trans>
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          Your password has been updated.
+          <Trans>Your password has been updated.</Trans>
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -30,7 +31,7 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
             className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
             href={`${NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
           >
-            Sign In
+            <Trans>Sign In</Trans>
           </Button>
         </Section>
       </Section>

packages/email/templates/confirm-email.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
 import type { TemplateConfirmationEmailProps } from '../template-components/template-confirmation-email';
 import { TemplateConfirmationEmail } from '../template-components/template-confirmation-email';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -9,7 +10,9 @@ export const ConfirmEmailTemplate = ({
   confirmationLink,
   assetBaseUrl = 'http://localhost:3002',
 }: TemplateConfirmationEmailProps) => {
-  const previewText = `Please confirm your email address`;
+  const { _ } = useLingui();
+
+  const previewText = msg`Please confirm your email address`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -18,40 +21,30 @@ export const ConfirmEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto bg-white font-sans">
-          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
+      <Body className="mx-auto my-auto bg-white font-sans">
+        <Section>
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            <Section>
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-                <TemplateConfirmationEmail
-                  confirmationLink={confirmationLink}
-                  assetBaseUrl={assetBaseUrl}
-                />
-              </Section>
-            </Container>
-            <div className="mx-auto mt-12 max-w-xl" />
+              <TemplateConfirmationEmail
+                confirmationLink={confirmationLink}
+                assetBaseUrl={assetBaseUrl}
+              />
+            </Section>
+          </Container>
+          <div className="mx-auto mt-12 max-w-xl" />
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter isDocument={false} />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter isDocument={false} />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/confirm-team-email.tsx

@@ -1,5 +1,7 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { formatTeamUrl } from '@documenso/lib/utils/teams';
-import config from '@documenso/tailwind-config';
 
 import {
   Body,
@@ -11,7 +13,6 @@ import {
   Link,
   Preview,
   Section,
-  Tailwind,
   Text,
 } from '../components';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -32,97 +33,90 @@ export const ConfirmTeamEmailTemplate = ({
   teamUrl = 'demo',
   token = '',
 }: ConfirmTeamEmailProps) => {
-  const previewText = `Accept team email request for ${teamName} on Documenso`;
+  const { _ } = useLingui();
+
+  const previewText = msg`Accept team email request for ${teamName} on Documenso`;
 
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto font-sans">
-          <Section className="bg-white">
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+      <Preview>{_(previewText)}</Preview>
+
+      <Body className="mx-auto my-auto font-sans">
+        <Section className="bg-white">
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+            <TemplateImage
+              assetBaseUrl={assetBaseUrl}
+              className="mb-4 h-6 p-2"
+              staticAsset="logo.png"
+            />
+
+            <Section>
               <TemplateImage
+                className="mx-auto"
                 assetBaseUrl={assetBaseUrl}
-                className="mb-4 h-6 p-2"
-                staticAsset="logo.png"
+                staticAsset="mail-open.png"
               />
+            </Section>
 
-              <Section>
-                <TemplateImage
-                  className="mx-auto"
-                  assetBaseUrl={assetBaseUrl}
-                  staticAsset="mail-open.png"
-                />
-              </Section>
+            <Section className="p-2 text-slate-500">
+              <Text className="text-center text-lg font-medium text-black">
+                Verify your team email address
+              </Text>
 
-              <Section className="p-2 text-slate-500">
-                <Text className="text-center text-lg font-medium text-black">
-                  Verify your team email address
+              <Text className="text-center text-base">
+                <span className="font-bold">{teamName}</span> has requested to use your email
+                address for their team on Documenso.
+              </Text>
+
+              <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                {formatTeamUrl(teamUrl, baseUrl)}
+              </div>
+
+              <Section className="mt-6">
+                <Text className="my-0 text-sm">
+                  By accepting this request, you will be granting <strong>{teamName}</strong> access
+                  to:
                 </Text>
 
-                <Text className="text-center text-base">
-                  <span className="font-bold">{teamName}</span> has requested to use your email
-                  address for their team on Documenso.
+                <ul className="mb-0 mt-2">
+                  <li className="text-sm">
+                    View all documents sent to and from this email address
+                  </li>
+                  <li className="mt-1 text-sm">
+                    Allow document recipients to reply directly to this email address
+                  </li>
+                  <li className="mt-1 text-sm">
+                    Send documents on behalf of the team using the email address
+                  </li>
+                </ul>
+
+                <Text className="mt-2 text-sm">
+                  You can revoke access at any time in your team settings on Documenso{' '}
+                  <Link href={`${baseUrl}/settings/teams`}>here.</Link>
                 </Text>
-
-                <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
-                  {formatTeamUrl(teamUrl, baseUrl)}
-                </div>
-
-                <Section className="mt-6">
-                  <Text className="my-0 text-sm">
-                    By accepting this request, you will be granting <strong>{teamName}</strong>{' '}
-                    access to:
-                  </Text>
-
-                  <ul className="mb-0 mt-2">
-                    <li className="text-sm">
-                      View all documents sent to and from this email address
-                    </li>
-                    <li className="mt-1 text-sm">
-                      Allow document recipients to reply directly to this email address
-                    </li>
-                    <li className="mt-1 text-sm">
-                      Send documents on behalf of the team using the email address
-                    </li>
-                  </ul>
-
-                  <Text className="mt-2 text-sm">
-                    You can revoke access at any time in your team settings on Documenso{' '}
-                    <Link href={`${baseUrl}/settings/teams`}>here.</Link>
-                  </Text>
-                </Section>
-
-                <Section className="mb-6 mt-8 text-center">
-                  <Button
-                    className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
-                    href={`${baseUrl}/team/verify/email/${token}`}
-                  >
-                    Accept
-                  </Button>
-                </Section>
               </Section>
 
-              <Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
-            </Container>
+              <Section className="mb-6 mt-8 text-center">
+                <Button
+                  className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                  href={`${baseUrl}/team/verify/email/${token}`}
+                >
+                  Accept
+                </Button>
+              </Section>
+            </Section>
 
-            <Hr className="mx-auto mt-12 max-w-xl" />
+            <Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
+          </Container>
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter isDocument={false} />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <Hr className="mx-auto mt-12 max-w-xl" />
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter isDocument={false} />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-cancel.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Hr, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Hr, Html, Img, Preview, Section } from '../components';
 import type { TemplateDocumentCancelProps } from '../template-components/template-document-cancel';
 import { TemplateDocumentCancel } from '../template-components/template-document-cancel';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -13,7 +14,9 @@ export const DocumentCancelTemplate = ({
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentCancelEmailTemplateProps) => {
-  const previewText = `${inviterName} has cancelled the document ${documentName}, you don't need to sign it anymore.`;
+  const { _ } = useLingui();
+
+  const previewText = msg`${inviterName} has cancelled the document ${documentName}, you don't need to sign it anymore.`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -22,43 +25,34 @@ export const DocumentCancelTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto bg-white font-sans">
-          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentCancel
-                  inviterName={inviterName}
-                  inviterEmail={inviterEmail}
-                  documentName={documentName}
-                  assetBaseUrl={assetBaseUrl}
-                />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto bg-white font-sans">
+        <Section>
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            <Section>
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <Hr className="mx-auto mt-12 max-w-xl" />
+              <TemplateDocumentCancel
+                inviterName={inviterName}
+                inviterEmail={inviterEmail}
+                documentName={documentName}
+                assetBaseUrl={assetBaseUrl}
+              />
+            </Section>
+          </Container>
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <Hr className="mx-auto mt-12 max-w-xl" />
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-completed.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
 import type { TemplateDocumentCompletedProps } from '../template-components/template-document-completed';
 import { TemplateDocumentCompleted } from '../template-components/template-document-completed';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -15,7 +16,9 @@ export const DocumentCompletedEmailTemplate = ({
   assetBaseUrl = 'http://localhost:3002',
   customBody,
 }: DocumentCompletedEmailTemplateProps) => {
-  const previewText = `Completed Document`;
+  const { _ } = useLingui();
+
+  const previewText = msg`Completed Document`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -24,41 +27,32 @@ export const DocumentCompletedEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto font-sans">
-          <Section className="bg-white">
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
-              <Section className="p-2">
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentCompleted
-                  downloadLink={downloadLink}
-                  documentName={documentName}
-                  assetBaseUrl={assetBaseUrl}
-                  customBody={customBody}
-                />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto font-sans">
+        <Section className="bg-white">
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+            <Section className="p-2">
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+              <TemplateDocumentCompleted
+                downloadLink={downloadLink}
+                documentName={documentName}
+                assetBaseUrl={assetBaseUrl}
+                customBody={customBody}
+              />
+            </Section>
+          </Container>
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-created-from-direct-template.tsx

@@ -1,18 +1,9 @@
-import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
-import config from '@documenso/tailwind-config';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import {
-  Body,
-  Button,
-  Container,
-  Head,
-  Html,
-  Img,
-  Preview,
-  Section,
-  Tailwind,
-  Text,
-} from '../components';
+import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
+
+import { Body, Button, Container, Head, Html, Img, Preview, Section, Text } from '../components';
 import TemplateDocumentImage from '../template-components/template-document-image';
 import { TemplateFooter } from '../template-components/template-footer';
 import { RecipientRole } from '.prisma/client';
@@ -32,9 +23,11 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentCompletedEmailTemplateProps) => {
-  const action = RECIPIENT_ROLES_DESCRIPTION_ENG[recipientRole].actioned.toLowerCase();
+  const { _ } = useLingui();
 
-  const previewText = `Document created from direct template`;
+  const action = _(RECIPIENT_ROLES_DESCRIPTION_ENG[recipientRole].actioned).toLowerCase();
+
+  const previewText = msg`Document created from direct template`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -43,55 +36,48 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto font-sans">
-          <Section className="bg-white">
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
-              <Section className="p-2">
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+      <Body className="mx-auto my-auto font-sans">
+        <Section className="bg-white">
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+            <Section className="p-2">
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-                <Section>
-                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+              <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+              <Section>
+                <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                  <Trans>
                     {recipientName} {action} a document by using one of your direct links
-                  </Text>
+                  </Trans>
+                </Text>
 
-                  <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
-                    {documentName}
-                  </div>
+                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
+                  {documentName}
+                </div>
 
-                  <Section className="my-6 text-center">
-                    <Button
-                      className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
-                      href={documentLink}
-                    >
-                      View document
-                    </Button>
-                  </Section>
+                <Section className="my-6 text-center">
+                  <Button
+                    className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                    href={documentLink}
+                  >
+                    <Trans>View document</Trans>
+                  </Button>
                 </Section>
               </Section>
-            </Container>
+            </Section>
+          </Container>
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-invite.tsx

@@ -1,20 +1,10 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import type { RecipientRole } from '@documenso/prisma/client';
-import config from '@documenso/tailwind-config';
 
-import {
-  Body,
-  Container,
-  Head,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Section,
-  Tailwind,
-  Text,
-} from '../components';
+import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from '../components';
 import type { TemplateDocumentInviteProps } from '../template-components/template-document-invite';
 import { TemplateDocumentInvite } from '../template-components/template-document-invite';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -40,13 +30,15 @@ export const DocumentInviteEmailTemplate = ({
   isTeamInvite = false,
   teamName,
 }: DocumentInviteEmailTemplateProps) => {
-  const action = RECIPIENT_ROLES_DESCRIPTION_ENG[role].actionVerb.toLowerCase();
+  const { _ } = useLingui();
+
+  const action = _(RECIPIENT_ROLES_DESCRIPTION_ENG[role].actionVerb).toLowerCase();
 
   const previewText = selfSigner
-    ? `Please ${action} your document ${documentName}`
+    ? msg`Please ${action} your document ${documentName}`
     : isTeamInvite
-    ? `${inviterName} on behalf of ${teamName} has invited you to ${action} ${documentName}`
-    : `${inviterName} has invited you to ${action} ${documentName}`;
+    ? msg`${inviterName} on behalf of ${teamName} has invited you to ${action} ${documentName}`
+    : msg`${inviterName} has invited you to ${action} ${documentName}`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -55,67 +47,62 @@ export const DocumentInviteEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto bg-white font-sans">
-          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentInvite
-                  inviterName={inviterName}
-                  inviterEmail={inviterEmail}
-                  documentName={documentName}
-                  signDocumentLink={signDocumentLink}
-                  assetBaseUrl={assetBaseUrl}
-                  role={role}
-                  selfSigner={selfSigner}
-                  isTeamInvite={isTeamInvite}
-                  teamName={teamName}
-                />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto bg-white font-sans">
+        <Section>
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            <Section>
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <Container className="mx-auto mt-12 max-w-xl">
-              <Section>
-                <Text className="my-4 text-base font-semibold">
+              <TemplateDocumentInvite
+                inviterName={inviterName}
+                inviterEmail={inviterEmail}
+                documentName={documentName}
+                signDocumentLink={signDocumentLink}
+                assetBaseUrl={assetBaseUrl}
+                role={role}
+                selfSigner={selfSigner}
+                isTeamInvite={isTeamInvite}
+                teamName={teamName}
+              />
+            </Section>
+          </Container>
+
+          <Container className="mx-auto mt-12 max-w-xl">
+            <Section>
+              <Text className="my-4 text-base font-semibold">
+                <Trans>
                   {inviterName}{' '}
                   <Link className="font-normal text-slate-400" href="mailto:{inviterEmail}">
                     ({inviterEmail})
                   </Link>
-                </Text>
+                </Trans>
+              </Text>
 
-                <Text className="mt-2 text-base text-slate-400">
-                  {customBody ? (
-                    <pre className="font-sans text-base text-slate-400">{customBody}</pre>
-                  ) : (
+              <Text className="mt-2 text-base text-slate-400">
+                {customBody ? (
+                  <pre className="font-sans text-base text-slate-400">{customBody}</pre>
+                ) : (
+                  <Trans>
                     `${inviterName} has invited you to ${action} the document "${documentName}".`
-                  )}
-                </Text>
-              </Section>
-            </Container>
+                  </Trans>
+                )}
+              </Text>
+            </Section>
+          </Container>
 
-            <Hr className="mx-auto mt-12 max-w-xl" />
+          <Hr className="mx-auto mt-12 max-w-xl" />
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-pending.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
 import type { TemplateDocumentPendingProps } from '../template-components/template-document-pending';
 import { TemplateDocumentPending } from '../template-components/template-document-pending';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -11,7 +12,9 @@ export const DocumentPendingEmailTemplate = ({
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentPendingEmailTemplateProps) => {
-  const previewText = `Pending Document`;
+  const { _ } = useLingui();
+
+  const previewText = msg`Pending Document`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -20,36 +23,27 @@ export const DocumentPendingEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto font-sans">
-          <Section className="bg-white">
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentPending documentName={documentName} assetBaseUrl={assetBaseUrl} />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto font-sans">
+        <Section className="bg-white">
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            <Section>
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+              <TemplateDocumentPending documentName={documentName} assetBaseUrl={assetBaseUrl} />
+            </Section>
+          </Container>
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-self-signed.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
 import type { TemplateDocumentSelfSignedProps } from '../template-components/template-document-self-signed';
 import { TemplateDocumentSelfSigned } from '../template-components/template-document-self-signed';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -11,7 +12,9 @@ export const DocumentSelfSignedEmailTemplate = ({
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentSelfSignedTemplateProps) => {
-  const previewText = `Completed Document`;
+  const { _ } = useLingui();
+
+  const previewText = msg`Completed Document`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -20,39 +23,27 @@ export const DocumentSelfSignedEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto font-sans">
-          <Section className="bg-white">
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
-              <Section className="p-2">
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentSelfSigned
-                  documentName={documentName}
-                  assetBaseUrl={assetBaseUrl}
-                />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto font-sans">
+        <Section className="bg-white">
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+            <Section className="p-2">
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+              <TemplateDocumentSelfSigned documentName={documentName} assetBaseUrl={assetBaseUrl} />
+            </Section>
+          </Container>
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/document-super-delete.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Hr, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Hr, Html, Img, Preview, Section } from '../components';
 import {
   TemplateDocumentDelete,
   type TemplateDocumentDeleteProps,
@@ -14,7 +15,9 @@ export const DocumentSuperDeleteEmailTemplate = ({
   assetBaseUrl = 'http://localhost:3002',
   reason = 'Unknown',
 }: DocumentDeleteEmailTemplateProps) => {
-  const previewText = `An admin has deleted your document "${documentName}".`;
+  const { _ } = useLingui();
+
+  const previewText = msg`An admin has deleted your document "${documentName}".`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -23,42 +26,33 @@ export const DocumentSuperDeleteEmailTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto bg-white font-sans">
-          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateDocumentDelete
-                  reason={reason}
-                  documentName={documentName}
-                  assetBaseUrl={assetBaseUrl}
-                />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto bg-white font-sans">
+        <Section>
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            <Section>
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <Hr className="mx-auto mt-12 max-w-xl" />
+              <TemplateDocumentDelete
+                reason={reason}
+                documentName={documentName}
+                assetBaseUrl={assetBaseUrl}
+              />
+            </Section>
+          </Container>
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <Hr className="mx-auto mt-12 max-w-xl" />
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };

packages/email/templates/forgot-password.tsx

@@ -1,6 +1,7 @@
-import config from '@documenso/tailwind-config';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 
-import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
 import { TemplateFooter } from '../template-components/template-footer';
 import type { TemplateForgotPasswordProps } from '../template-components/template-forgot-password';
 import { TemplateForgotPassword } from '../template-components/template-forgot-password';
@@ -11,7 +12,9 @@ export const ForgotPasswordTemplate = ({
   resetPasswordLink = 'https://documenso.com',
   assetBaseUrl = 'http://localhost:3002',
 }: ForgotPasswordTemplateProps) => {
-  const previewText = `Password Reset Requested`;
+  const { _ } = useLingui();
+
+  const previewText = msg`Password Reset Requested`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -20,41 +23,32 @@ export const ForgotPasswordTemplate = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
-      <Tailwind
-        config={{
-          theme: {
-            extend: {
-              colors: config.theme.extend.colors,
-            },
-          },
-        }}
-      >
-        <Body className="mx-auto my-auto bg-white font-sans">
-          <Section>
-            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
-              <Section>
-                <Img
-                  src={getAssetUrl('/static/logo.png')}
-                  alt="Documenso Logo"
-                  className="mb-4 h-6"
-                />
+      <Preview>{_(previewText)}</Preview>
 
-                <TemplateForgotPassword
-                  resetPasswordLink={resetPasswordLink}
-                  assetBaseUrl={assetBaseUrl}
-                />
-              </Section>
-            </Container>
+      <Body className="mx-auto my-auto bg-white font-sans">
+        <Section>
+          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            <Section>
+              <Img
+                src={getAssetUrl('/static/logo.png')}
+                alt="Documenso Logo"
+                className="mb-4 h-6"
+              />
 
-            <div className="mx-auto mt-12 max-w-xl" />
+              <TemplateForgotPassword
+                resetPasswordLink={resetPasswordLink}
+                assetBaseUrl={assetBaseUrl}
+              />
+            </Section>
+          </Container>
 
-            <Container className="mx-auto max-w-xl">
-              <TemplateFooter isDocument={false} />
-            </Container>
-          </Section>
-        </Body>
-      </Tailwind>
+          <div className="mx-auto mt-12 max-w-xl" />
+
+          <Container className="mx-auto max-w-xl">
+            <TemplateFooter isDocument={false} />
+          </Container>
+        </Section>
+      </Body>
     </Html>
   );
 };