feat: web i18n (#1286)

apps/marketing/package.json

@@ -20,7 +20,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/macro": "^4.11.1",
     "@lingui/react": "^4.11.1",
     "@openstatus/react": "^0.0.3",
     "cmdk": "^0.2.1",

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

@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
@@ -46,8 +48,8 @@ export const SinglePlayerClient = () => {
 
   const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
     fields: {
-      title: 'Add document',
+      title: msg`Add document`,
-      description: 'Upload a document and add fields.',
+      description: msg`Upload a document and add fields.`,
       stepIndex: 1,
       onBackStep: uploadedFile
         ? () => {
@@ -58,8 +60,8 @@ export const SinglePlayerClient = () => {
       onNextStep: () => setStep('sign'),
     },
     sign: {
-      title: 'Sign',
+      title: msg`Sign`,
-      description: 'Enter your details.',
+      description: msg`Enter your details.`,
       stepIndex: 2,
       onBackStep: () => setStep('fields'),
     },

apps/web/lingui.config.ts

@@ -8,7 +8,7 @@ const config: LinguiConfig = {
   locales: APP_I18N_OPTIONS.supportedLangs as unknown as string[],
   catalogs: [
     {
-      path: '<rootDir>/../../packages/lib/translations/web/{locale}',
+      path: '<rootDir>/../../packages/lib/translations/{locale}/web',
       include: ['<rootDir>/apps/web/src'],
     },
     {

apps/web/package.json

@@ -23,7 +23,6 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
-    "@lingui/macro": "^4.11.1",
     "@lingui/react": "^4.11.1",
     "@simplewebauthn/browser": "^9.0.1",
     "@simplewebauthn/server": "^9.0.3",
@@ -60,9 +59,9 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@documenso/tailwind-config": "*",
     "@lingui/loader": "^4.11.1",
     "@lingui/swc-plugin": "4.0.6",
-    "@documenso/tailwind-config": "*",
     "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",

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

@@ -2,6 +2,9 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { Recipient } from '@documenso/prisma/client';
 import { type Document, SigningStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -22,20 +25,21 @@ export type AdminActionsProps = {
 };
 
 export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
     trpc.admin.resealDocument.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Document resealed',
+          description: _(msg`Document resealed`),
         });
       },
       onError: () => {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
-          description: 'Failed to reseal document',
+          description: _(msg`Failed to reseal document`),
           variant: 'destructive',
         });
       },
@@ -54,19 +58,23 @@ export const AdminActions = ({ className, document, recipients }: AdminActionsPr
               )}
               onClick={() => resealDocument({ id: document.id })}
             >
-              Reseal document
+              <Trans>Reseal document</Trans>
             </Button>
           </TooltipTrigger>
 
           <TooltipContent className="max-w-[40ch]">
+            <Trans>
               Attempts sealing the document again, useful for after a code change has occurred to
               resolve an erroneous document.
+            </Trans>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
 
       <Button variant="outline" asChild>
-        <Link href={`/admin/users/${document.userId}`}>Go to owner</Link>
+        <Link href={`/admin/users/${document.userId}`}>
+          <Trans>Go to owner</Trans>
+        </Link>
       </Button>
     </div>
   );

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

@@ -1,5 +1,7 @@
+import { Trans } from '@lingui/macro';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import {
   Accordion,
@@ -23,6 +25,8 @@ type AdminDocumentDetailsPageProps = {
 };
 
 export default async function AdminDocumentDetailsPage({ params }: AdminDocumentDetailsPageProps) {
+  setupI18nSSR();
+
   const document = await getEntireDocument({ id: Number(params.id) });
 
   return (
@@ -35,28 +39,34 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
         {document.deletedAt && (
           <Badge size="large" variant="destructive">
-            Deleted
+            <Trans>Deleted</Trans>
           </Badge>
         )}
       </div>
 
       <div className="text-muted-foreground mt-4 text-sm">
         <div>
-          Created on: <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
+          <Trans>Created on</Trans>:{' '}
+          <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
         </div>
         <div>
-          Last updated at: <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
+          <Trans>Last updated at</Trans>:{' '}
+          <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
         </div>
       </div>
 
       <hr className="my-4" />
 
-      <h2 className="text-lg font-semibold">Admin Actions</h2>
+      <h2 className="text-lg font-semibold">
+        <Trans>Admin Actions</Trans>
+      </h2>
 
       <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
 
       <hr className="my-4" />
-      <h2 className="text-lg font-semibold">Recipients</h2>
+      <h2 className="text-lg font-semibold">
+        <Trans>Recipients</Trans>
+      </h2>
 
       <div className="mt-4">
         <Accordion type="multiple" className="space-y-4">

apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx

@@ -2,6 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -43,7 +45,9 @@ export type RecipientItemProps = {
 };
 
 export const RecipientItem = ({ recipient }: RecipientItemProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const form = useForm<TAdminUpdateRecipientFormSchema>({
@@ -64,14 +68,14 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
       });
 
       toast({
-        title: 'Recipient updated',
+        title: _(msg`Recipient updated`),
-        description: 'The recipient has been updated successfully',
+        description: _(msg`The recipient has been updated successfully`),
       });
 
       router.refresh();
     } catch (error) {
       toast({
-        title: 'Failed to update recipient',
+        title: _(msg`Failed to update recipient`),
         description: error.message,
         variant: 'destructive',
       });
@@ -93,7 +97,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
               name="name"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel required>Name</FormLabel>
+                  <FormLabel required>
+                    <Trans>Name</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input {...field} />
@@ -109,7 +115,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
               name="email"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel required>Email</FormLabel>
+                  <FormLabel required>
+                    <Trans>Email</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input type="email" {...field} />
@@ -122,7 +130,7 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
             <div>
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update Recipient
+                <Trans>Update Recipient</Trans>
               </Button>
             </div>
           </fieldset>
@@ -131,7 +139,9 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
 
       <hr className="my-4" />
 
-      <h2 className="mb-4 text-lg font-semibold">Fields</h2>
+      <h2 className="mb-4 text-lg font-semibold">
+        <Trans>Fields</Trans>
+      </h2>
 
       <DataTable
         data={recipient.Field}
@@ -142,22 +152,22 @@ export const RecipientItem = ({ recipient }: RecipientItemProps) => {
             cell: ({ row }) => <div>{row.original.id}</div>,
           },
           {
-            header: 'Type',
+            header: _(msg`Type`),
             accessorKey: 'type',
             cell: ({ row }) => <div>{row.original.type}</div>,
           },
           {
-            header: 'Inserted',
+            header: _(msg`Inserted`),
             accessorKey: 'inserted',
             cell: ({ row }) => <div>{row.original.inserted ? 'True' : 'False'}</div>,
           },
           {
-            header: 'Value',
+            header: _(msg`Value`),
             accessorKey: 'customText',
             cell: ({ row }) => <div>{row.original.customText}</div>,
           },
           {
-            header: 'Signature',
+            header: _(msg`Signature`),
             accessorKey: 'signature',
             cell: ({ row }) => (
               <div>

apps/web/src/app/(dashboard)/admin/documents/[id]/super-delete-document-dialog.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { Document } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@@ -26,7 +29,9 @@ export type SuperDeleteDocumentDialogProps = {
 };
 
 export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialogProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const [reason, setReason] = useState('');
@@ -43,7 +48,7 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
       await deleteDocument({ id: document.id, reason });
 
       toast({
-        title: 'Document deleted',
+        title: _(msg`Document deleted`),
         description: 'The Document has been deleted successfully.',
         duration: 5000,
       });
@@ -52,13 +57,13 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
           description:
             err.message ??
@@ -76,31 +81,41 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
           variant="neutral"
         >
           <div>
-            <AlertTitle>Delete Document</AlertTitle>
+            <AlertTitle>
+              <Trans>Delete Document</Trans>
+            </AlertTitle>
             <AlertDescription className="mr-2">
+              <Trans>
                 Delete the document. This action is irreversible so proceed with caution.
+              </Trans>
             </AlertDescription>
           </div>
 
           <div className="flex-shrink-0">
             <Dialog>
               <DialogTrigger asChild>
-                <Button variant="destructive">Delete Document</Button>
+                <Button variant="destructive">
+                  <Trans>Delete Document</Trans>
+                </Button>
               </DialogTrigger>
 
               <DialogContent>
                 <DialogHeader className="space-y-4">
-                  <DialogTitle>Delete Document</DialogTitle>
+                  <DialogTitle>
+                    <Trans>Delete Document</Trans>
+                  </DialogTitle>
 
                   <Alert variant="destructive">
                     <AlertDescription className="selection:bg-red-100">
-                      This action is not reversible. Please be certain.
+                      <Trans>This action is not reversible. Please be certain.</Trans>
                     </AlertDescription>
                   </Alert>
                 </DialogHeader>
 
                 <div>
-                  <DialogDescription>To confirm, please enter the reason</DialogDescription>
+                  <DialogDescription>
+                    <Trans>To confirm, please enter the reason</Trans>
+                  </DialogDescription>
 
                   <Input
                     className="mt-2"
@@ -117,7 +132,7 @@ export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialo
                     variant="destructive"
                     disabled={!reason}
                   >
-                    {isDeletingDocument ? 'Deleting document...' : 'Delete Document'}
+                    <Trans>Delete document</Trans>
                   </Button>
                 </DialogFooter>
               </DialogContent>

apps/web/src/app/(dashboard)/admin/documents/document-results.tsx

@@ -5,6 +5,8 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
@@ -23,6 +25,8 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 // export type AdminDocumentResultsProps = {};
 
 export const AdminDocumentResults = () => {
+  const { _ } = useLingui();
+
   const searchParams = useSearchParams();
 
   const updateSearchParams = useUpdateSearchParams();
@@ -56,7 +60,7 @@ export const AdminDocumentResults = () => {
     <div>
       <Input
         type="search"
-        placeholder="Search by document title"
+        placeholder={_(msg`Search by document title`)}
         value={term}
         onChange={(e) => setTerm(e.target.value)}
       />
@@ -65,12 +69,12 @@ export const AdminDocumentResults = () => {
         <DataTable
           columns={[
             {
-              header: 'Created',
+              header: _(msg`Created`),
               accessorKey: 'createdAt',
               cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
             },
             {
-              header: 'Title',
+              header: _(msg`Title`),
               accessorKey: 'title',
               cell: ({ row }) => {
                 return (
@@ -84,12 +88,12 @@ export const AdminDocumentResults = () => {
               },
             },
             {
-              header: 'Status',
+              header: _(msg`Status`),
               accessorKey: 'status',
               cell: ({ row }) => <DocumentStatus status={row.original.status} />,
             },
             {
-              header: 'Owner',
+              header: _(msg`Owner`),
               accessorKey: 'owner',
               cell: ({ row }) => {
                 const avatarFallbackText = row.original.User.name

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

@@ -1,9 +1,17 @@
+import { Trans } from '@lingui/macro';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { AdminDocumentResults } from './document-results';
 
 export default function AdminDocumentsPage() {
+  setupI18nSSR();
+
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage documents</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage documents</Trans>
+      </h2>
 
       <div className="mt-8">
         <AdminDocumentResults />

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 
@@ -12,6 +13,8 @@ export type AdminSectionLayoutProps = {
 };
 
 export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
 
   if (!isAdmin(user)) {

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

@@ -5,6 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { BarChart3, FileStack, Settings, Users, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -33,7 +34,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/stats">
           <BarChart3 className="mr-2 h-5 w-5" />
-          Stats
+          <Trans>Stats</Trans>
         </Link>
       </Button>
 
@@ -47,7 +48,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/users">
           <Users className="mr-2 h-5 w-5" />
-          Users
+          <Trans>Users</Trans>
         </Link>
       </Button>
 
@@ -61,7 +62,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/documents">
           <FileStack className="mr-2 h-5 w-5" />
-          Documents
+          <Trans>Documents</Trans>
         </Link>
       </Button>
 
@@ -75,7 +76,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/subscriptions">
           <Wallet2 className="mr-2 h-5 w-5" />
-          Subscriptions
+          <Trans>Subscriptions</Trans>
         </Link>
       </Button>
 
@@ -89,7 +90,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
       >
         <Link href="/admin/site-settings">
           <Settings className="mr-2 h-5 w-5" />
-          Site Settings
+          <Trans>Site Settings</Trans>
         </Link>
       </Button>
     </div>

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

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -37,8 +39,10 @@ export type BannerFormProps = {
 };
 
 export function BannerForm({ banner }: BannerFormProps) {
-  const router = useRouter();
   const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const router = useRouter();
 
   const form = useForm<TBannerFormSchema>({
     resolver: zodResolver(ZBannerFormSchema),
@@ -67,8 +71,8 @@ export function BannerForm({ banner }: BannerFormProps) {
       });
 
       toast({
-        title: 'Banner Updated',
+        title: _(msg`Banner Updated`),
-        description: 'Your banner has been updated successfully.',
+        description: _(msg`Your banner has been updated successfully.`),
         duration: 5000,
       });
 
@@ -76,16 +80,17 @@ export function BannerForm({ banner }: BannerFormProps) {
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
-          description:
+          description: _(
-            'We encountered an unknown error while attempting to update the banner. Please try again later.',
+            msg`We encountered an unknown error while attempting to update the banner. Please try again later.`,
+          ),
         });
       }
     }
@@ -93,10 +98,14 @@ export function BannerForm({ banner }: BannerFormProps) {
 
   return (
     <div>
-      <h2 className="font-semibold">Site Banner</h2>
+      <h2 className="font-semibold">
+        <Trans>Site Banner</Trans>
+      </h2>
       <p className="text-muted-foreground mt-2 text-sm">
-        The site banner is a message that is shown at the top of the site. It can be used to display
+        <Trans>
-        important information to your users.
+          The site banner is a message that is shown at the top of the site. It can be used to
+          display important information to your users.
+        </Trans>
       </p>
 
       <Form {...form}>
@@ -110,7 +119,9 @@ export function BannerForm({ banner }: BannerFormProps) {
               name="enabled"
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>Enabled</FormLabel>
+                  <FormLabel>
+                    <Trans>Enabled</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <div>
@@ -131,7 +142,9 @@ export function BannerForm({ banner }: BannerFormProps) {
                 name="data.bgColor"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Background Color</FormLabel>
+                    <FormLabel>
+                      <Trans>Background Color</Trans>
+                    </FormLabel>
 
                     <FormControl>
                       <div>
@@ -149,7 +162,9 @@ export function BannerForm({ banner }: BannerFormProps) {
                 name="data.textColor"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Text Color</FormLabel>
+                    <FormLabel>
+                      <Trans>Text Color</Trans>
+                    </FormLabel>
 
                     <FormControl>
                       <div>
@@ -170,14 +185,16 @@ export function BannerForm({ banner }: BannerFormProps) {
               name="data.content"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Content</FormLabel>
+                  <FormLabel>
+                    <Trans>Content</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Textarea className="h-32 resize-none" {...field} />
                   </FormControl>
 
                   <FormDescription>
-                    The content to show in the banner, HTML is allowed
+                    <Trans>The content to show in the banner, HTML is allowed</Trans>
                   </FormDescription>
 
                   <FormMessage />
@@ -191,7 +208,7 @@ export function BannerForm({ banner }: BannerFormProps) {
             loading={isUpdateSiteSettingLoading}
             className="mt-4 justify-end self-end"
           >
-            Update Banner
+            <Trans>Update Banner</Trans>
           </Button>
         </form>
       </Form>

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

@@ -1,3 +1,7 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
 import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
 
@@ -8,13 +12,20 @@ import { BannerForm } from './banner-form';
 // import { BannerForm } from './banner-form';
 
 export default async function AdminBannerPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
+
   const banner = await getSiteSettings().then((settings) =>
     settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
   );
 
   return (
     <div>
-      <SettingsHeader title="Site Settings" subtitle="Manage your site settings here" />
+      <SettingsHeader
+        title={_(msg`Site Settings`)}
+        subtitle={_(msg`Manage your site settings here`)}
+      />
 
       <div className="mt-8">
         <BannerForm banner={banner} />

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

@@ -1,3 +1,5 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import {
   File,
   FileCheck,
@@ -12,6 +14,7 @@ import {
   Users,
 } from 'lucide-react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
@@ -27,6 +30,10 @@ import { SignerConversionChart } from './signer-conversion-chart';
 import { UserWithDocumentChart } from './user-with-document';
 
 export default async function AdminStatsPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
+
   const [
     usersCount,
     usersWithSubscriptionsCount,
@@ -49,64 +56,98 @@ export default async function AdminStatsPage() {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Instance Stats</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Instance Stats</Trans>
+      </h2>
 
       <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <CardMetric icon={Users} title="Total Users" value={usersCount} />
+        <CardMetric icon={Users} title={_(msg`Total Users`)} value={usersCount} />
-        <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
+        <CardMetric icon={File} title={_(msg`Total Documents`)} value={docStats.ALL} />
         <CardMetric
           icon={UserPlus}
-          title="Active Subscriptions"
+          title={_(msg`Active Subscriptions`)}
           value={usersWithSubscriptionsCount}
         />
 
-        <CardMetric icon={FileCog} title="App Version" value={`v${process.env.APP_VERSION}`} />
+        <CardMetric
+          icon={FileCog}
+          title={_(msg`App Version`)}
+          value={`v${process.env.APP_VERSION}`}
+        />
       </div>
 
       <div className="mt-16 gap-8">
         <div>
-          <h3 className="text-3xl font-semibold">Document metrics</h3>
+          <h3 className="text-3xl font-semibold">
+            <Trans>Document metrics</Trans>
+          </h3>
 
           <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
-            <CardMetric icon={FileEdit} title="Drafted Documents" value={docStats.DRAFT} />
+            <CardMetric icon={FileEdit} title={_(msg`Drafted Documents`)} value={docStats.DRAFT} />
-            <CardMetric icon={FileClock} title="Pending Documents" value={docStats.PENDING} />
+            <CardMetric
-            <CardMetric icon={FileCheck} title="Completed Documents" value={docStats.COMPLETED} />
+              icon={FileClock}
+              title={_(msg`Pending Documents`)}
+              value={docStats.PENDING}
+            />
+            <CardMetric
+              icon={FileCheck}
+              title={_(msg`Completed Documents`)}
+              value={docStats.COMPLETED}
+            />
           </div>
         </div>
 
         <div>
-          <h3 className="text-3xl font-semibold">Recipients metrics</h3>
+          <h3 className="text-3xl font-semibold">
+            <Trans>Recipients metrics</Trans>
+          </h3>
 
           <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
             <CardMetric
               icon={UserSquare2}
-              title="Total Recipients"
+              title={_(msg`Total Recipients`)}
               value={recipientStats.TOTAL_RECIPIENTS}
             />
-            <CardMetric icon={Mail} title="Documents Received" value={recipientStats.SENT} />
+            <CardMetric
-            <CardMetric icon={MailOpen} title="Documents Viewed" value={recipientStats.OPENED} />
+              icon={Mail}
-            <CardMetric icon={PenTool} title="Signatures Collected" value={recipientStats.SIGNED} />
+              title={_(msg`Documents Received`)}
+              value={recipientStats.SENT}
+            />
+            <CardMetric
+              icon={MailOpen}
+              title={_(msg`Documents Viewed`)}
+              value={recipientStats.OPENED}
+            />
+            <CardMetric
+              icon={PenTool}
+              title={_(msg`Signatures Collected`)}
+              value={recipientStats.SIGNED}
+            />
           </div>
         </div>
       </div>
 
       <div className="mt-16">
-        <h3 className="text-3xl font-semibold">Charts</h3>
+        <h3 className="text-3xl font-semibold">
+          <Trans>Charts</Trans>
+        </h3>
         <div className="mt-5 grid grid-cols-2 gap-8">
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
-            title="MAU (created document)"
+            title={_(msg`MAU (created document)`)}
-            tooltip="Monthly Active Users: Users that created at least one Document"
+            tooltip={_(msg`Monthly Active Users: Users that created at least one Document`)}
           />
           <UserWithDocumentChart
             data={MONTHLY_USERS_SIGNED}
             completed
-            title="MAU (had document completed)"
+            title={_(msg`MAU (had document completed)`)}
-            tooltip="Monthly Active Users: Users that had at least one of their documents completed"
+            tooltip={_(
+              msg`Monthly Active Users: Users that had at least one of their documents completed`,
+            )}
           />
           <SignerConversionChart title="Signers that Signed Up" data={signerConversionMonthly} />
           <SignerConversionChart
-            title="Total Signers that Signed Up"
+            title={_(msg`Total Signers that Signed Up`)}
             data={signerConversionMonthly}
             cummulative
           />

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

@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { findSubscriptions } from '@documenso/lib/server-only/admin/get-all-subscriptions';
 import {
   Table,
@@ -11,20 +14,32 @@ import {
 } from '@documenso/ui/primitives/table';
 
 export default async function Subscriptions() {
+  setupI18nSSR();
+
   const subscriptions = await findSubscriptions();
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage subscriptions</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage subscriptions</Trans>
+      </h2>
       <div className="mt-8">
         <Table>
           <TableHeader>
             <TableRow>
               <TableHead>ID</TableHead>
-              <TableHead>Status</TableHead>
+              <TableHead>
-              <TableHead>Created At</TableHead>
+                <Trans>Status</Trans>
-              <TableHead>Ends On</TableHead>
+              </TableHead>
-              <TableHead>User ID</TableHead>
+              <TableHead>
+                <Trans>Created At</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>Ends On</Trans>
+              </TableHead>
+              <TableHead>
+                <Trans>User ID</Trans>
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

apps/web/src/app/(dashboard)/admin/users/[id]/delete-user-dialog.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@@ -27,8 +30,10 @@ export type DeleteUserDialogProps = {
 };
 
 export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) => {
-  const router = useRouter();
   const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const router = useRouter();
 
   const [email, setEmail] = useState('');
 
@@ -43,8 +48,8 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
       });
 
       toast({
-        title: 'Account deleted',
+        title: _(msg`Account deleted`),
-        description: 'The account has been deleted successfully.',
+        description: _(msg`The account has been deleted successfully.`),
         duration: 5000,
       });
 
@@ -52,17 +57,19 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
           description:
             err.message ??
-            'We encountered an unknown error while attempting to delete your account. Please try again later.',
+            _(
+              msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
+            ),
         });
       }
     }
@@ -77,31 +84,39 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
         <div>
           <AlertTitle>Delete Account</AlertTitle>
           <AlertDescription className="mr-2">
+            <Trans>
               Delete the users account and all its contents. This action is irreversible and will
               cancel their subscription, so proceed with caution.
+            </Trans>
           </AlertDescription>
         </div>
 
         <div className="flex-shrink-0">
           <Dialog>
             <DialogTrigger asChild>
-              <Button variant="destructive">Delete Account</Button>
+              <Button variant="destructive">
+                <Trans>Delete Account</Trans>
+              </Button>
             </DialogTrigger>
 
             <DialogContent>
               <DialogHeader className="space-y-4">
-                <DialogTitle>Delete Account</DialogTitle>
+                <DialogTitle>
+                  <Trans>Delete Account</Trans>
+                </DialogTitle>
 
                 <Alert variant="destructive">
                   <AlertDescription className="selection:bg-red-100">
-                    This action is not reversible. Please be certain.
+                    <Trans>This action is not reversible. Please be certain.</Trans>
                   </AlertDescription>
                 </Alert>
               </DialogHeader>
 
               <div>
                 <DialogDescription>
+                  <Trans>
                     To confirm, please enter the accounts email address <br />({user.email}).
+                  </Trans>
                 </DialogDescription>
 
                 <Input
@@ -119,7 +134,7 @@ export const DeleteUserDialog = ({ className, user }: DeleteUserDialogProps) =>
                   variant="destructive"
                   disabled={email !== user.email}
                 >
-                  {isDeletingUser ? 'Deleting account...' : 'Delete Account'}
+                  <Trans>Delete account</Trans>
                 </Button>
               </DialogFooter>
             </DialogContent>

apps/web/src/app/(dashboard)/admin/users/[id]/multiselect-role-combobox.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Trans } from '@lingui/macro';
 import { Check, ChevronsUpDown } from 'lucide-react';
 
 import { Role } from '@documenso/prisma/client';
@@ -59,7 +60,9 @@ const MultiSelectRoleCombobox = ({ listValues, onChange }: ComboboxProps) => {
       <PopoverContent className="w-[200px] p-0">
         <Command>
           <CommandInput placeholder={selectedValues.join(', ')} />
-          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandEmpty>
+            <Trans>No value found.</Trans>
+          </CommandEmpty>
           <CommandGroup>
             {allRoles.map((value: string, i: number) => (
               <CommandItem key={i} onSelect={() => handleSelect(value)}>

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

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -28,7 +30,9 @@ const ZUserFormSchema = ZAdminUpdateProfileMutationSchema.omit({ id: true });
 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
 
 export default function UserPage({ params }: { params: { id: number } }) {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const { data: user } = trpc.profile.getUser.useQuery(
@@ -65,14 +69,14 @@ export default function UserPage({ params }: { params: { id: number } }) {
       router.refresh();
 
       toast({
-        title: 'Profile updated',
+        title: _(msg`Profile updated`),
-        description: 'Your profile has been updated.',
+        description: _(msg`Your profile has been updated.`),
         duration: 5000,
       });
     } catch (e) {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while updating your profile.',
+        description: _(msg`An error occurred while updating your profile.`),
         variant: 'destructive',
       });
     }
@@ -80,7 +84,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage {user?.name}'s profile</Trans>
+      </h2>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <fieldset className="mt-6 flex w-full flex-col gap-y-4">
@@ -89,7 +95,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-muted-foreground">Name</FormLabel>
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Name</Trans>
+                  </FormLabel>
                   <FormControl>
                     <Input type="text" {...field} value={field.value ?? ''} />
                   </FormControl>
@@ -102,7 +110,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-muted-foreground">Email</FormLabel>
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Email</Trans>
+                  </FormLabel>
                   <FormControl>
                     <Input type="text" {...field} />
                   </FormControl>
@@ -117,7 +127,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
               render={({ field: { onChange } }) => (
                 <FormItem>
                   <fieldset className="flex flex-col gap-2">
-                    <FormLabel className="text-muted-foreground">Roles</FormLabel>
+                    <FormLabel className="text-muted-foreground">
+                      <Trans>Roles</Trans>
+                    </FormLabel>
                     <FormControl>
                       <MultiSelectRoleCombobox
                         listValues={roles}
@@ -132,7 +144,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
             <div className="mt-4">
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update user
+                <Trans>Update user</Trans>
               </Button>
             </div>
           </fieldset>

apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState, useTransition } from 'react';
 
 import Link from 'next/link';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Edit, Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
@@ -45,6 +47,8 @@ export const UsersDataTable = ({
   page,
   individualPriceIds,
 }: UsersDataTableProps) => {
+  const { _ } = useLingui();
+
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
   const [searchString, setSearchString] = useState('');
@@ -79,7 +83,7 @@ export const UsersDataTable = ({
       <Input
         className="my-6 flex flex-row gap-4"
         type="text"
-        placeholder="Search by name or email"
+        placeholder={_(msg`Search by name or email`)}
         value={searchString}
         onChange={handleChange}
       />
@@ -91,22 +95,22 @@ export const UsersDataTable = ({
             cell: ({ row }) => <div>{row.original.id}</div>,
           },
           {
-            header: 'Name',
+            header: _(msg`Name`),
             accessorKey: 'name',
             cell: ({ row }) => <div>{row.original.name}</div>,
           },
           {
-            header: 'Email',
+            header: _(msg`Email`),
             accessorKey: 'email',
             cell: ({ row }) => <div>{row.original.email}</div>,
           },
           {
-            header: 'Roles',
+            header: _(msg`Roles`),
             accessorKey: 'roles',
             cell: ({ row }) => row.original.roles.join(', '),
           },
           {
-            header: 'Subscription',
+            header: _(msg`Subscription`),
             accessorKey: 'subscription',
             cell: ({ row }) => {
               const foundIndividualSubscription = (row.original.Subscription ?? []).find((sub) =>
@@ -117,7 +121,7 @@ export const UsersDataTable = ({
             },
           },
           {
-            header: 'Documents',
+            header: _(msg`Documents`),
             accessorKey: 'documents',
             cell: ({ row }) => {
               return <div>{row.original.Document.length}</div>;

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

@@ -1,4 +1,7 @@
+import { Trans } from '@lingui/macro';
+
 import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 
 import { UsersDataTable } from './data-table-users';
@@ -13,6 +16,8 @@ type AdminManageUsersProps = {
 };
 
 export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) {
+  setupI18nSSR();
+
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 10;
   const searchString = searchParams.search || '';
@@ -26,7 +31,10 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">Manage users</h2>
+      <h2 className="text-4xl font-semibold">
+        <Trans>Manage users</Trans>
+      </h2>
+
       <UsersDataTable
         users={users}
         individualPriceIds={individualPriceIds}

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

@@ -2,6 +2,8 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
@@ -26,6 +28,7 @@ export type DocumentPageViewButtonProps = {
 export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   if (!session) {
     return null;
@@ -57,8 +60,8 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
       await downloadPDF({ documentData, fileName: documentWithData.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -77,19 +80,19 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
             .with(RecipientRole.SIGNER, () => (
               <>
                 <Pencil className="-ml-1 mr-2 h-4 w-4" />
-                Sign
+                <Trans>Sign</Trans>
               </>
             ))
             .with(RecipientRole.APPROVER, () => (
               <>
                 <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
-                Approve
+                <Trans>Approve</Trans>
               </>
             ))
             .otherwise(() => (
               <>
                 <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-                View
+                <Trans>View</Trans>
               </>
             ))}
         </Link>
@@ -97,13 +100,15 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
     ))
     .with({ isComplete: false }, () => (
       <Button className="w-full" asChild>
-        <Link href={`${documentsPath}/${document.id}/edit`}>Edit</Link>
+        <Link href={`${documentsPath}/${document.id}/edit`}>
+          <Trans>Edit</Trans>
+        </Link>
       </Button>
     ))
     .with({ isComplete: true }, () => (
       <Button className="w-full" onClick={onDownloadClick}>
         <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        Download
+        <Trans>Download</Trans>
       </Button>
     ))
     .otherwise(() => null);

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

@@ -4,6 +4,8 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import {
   Copy,
   Download,
@@ -47,6 +49,7 @@ export type DocumentPageViewDropdownProps = {
 export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -82,8 +85,8 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
       await downloadPDF({ documentData, fileName: document.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -98,13 +101,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="end" forceMount>
-        <DropdownMenuLabel>Action</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
 
         {(isOwner || isCurrentTeamDocument) && !isComplete && (
           <DropdownMenuItem asChild>
             <Link href={`${documentsPath}/${document.id}/edit`}>
               <Edit className="mr-2 h-4 w-4" />
-              Edit
+              <Trans>Edit</Trans>
             </Link>
           </DropdownMenuItem>
         )}
@@ -112,20 +117,20 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
         {isComplete && (
           <DropdownMenuItem onClick={onDownloadClick}>
             <Download className="mr-2 h-4 w-4" />
-            Download
+            <Trans>Download</Trans>
           </DropdownMenuItem>
         )}
 
         <DropdownMenuItem asChild>
           <Link href={`${documentsPath}/${document.id}/logs`}>
             <ScrollTextIcon className="mr-2 h-4 w-4" />
-            Audit Log
+            <Trans>Audit Log</Trans>
           </Link>
         </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
-          Duplicate
+          <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem
@@ -133,10 +138,12 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
           disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          <Trans>Delete</Trans>
         </DropdownMenuItem>
 
-        <DropdownMenuLabel>Share</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Share</Trans>
+        </DropdownMenuLabel>
 
         <ResendDocumentActionItem
           document={document}
@@ -151,7 +158,7 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share Signing Card
+                <Trans>Share Signing Card</Trans>
               </div>
             </DropdownMenuItem>
           )}

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

@@ -2,6 +2,8 @@
 
 import { useMemo } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
@@ -23,6 +25,7 @@ export const DocumentPageViewInformation = ({
   const isMounted = useIsMounted();
 
   const { locale } = useLocale();
+  const { _ } = useLingui();
 
   const documentInformation = useMemo(() => {
     let createdValue = DateTime.fromJSDate(document.createdAt).toFormat('MMMM d, yyyy');
@@ -38,31 +41,34 @@ export const DocumentPageViewInformation = ({
 
     return [
       {
-        description: 'Uploaded by',
+        description: msg`Uploaded by`,
-        value: userId === document.userId ? 'You' : document.User.name ?? document.User.email,
+        value: userId === document.userId ? _(msg`You`) : document.User.name ?? document.User.email,
       },
       {
-        description: 'Created',
+        description: msg`Created`,
         value: createdValue,
       },
       {
-        description: 'Last modified',
+        description: msg`Last modified`,
         value: lastModifiedValue,
       },
     ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, document, locale, userId]);
 
   return (
     <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
-      <h1 className="px-4 py-3 font-medium">Information</h1>
+      <h1 className="px-4 py-3 font-medium">
+        <Trans>Information</Trans>
+      </h1>
 
       <ul className="divide-y border-t">
-        {documentInformation.map((item) => (
+        {documentInformation.map((item, i) => (
           <li
-            key={item.description}
+            key={i}
             className="flex items-center justify-between px-4 py-2.5 text-sm last:border-b"
           >
-            <span className="text-muted-foreground">{item.description}</span>
+            <span className="text-muted-foreground">{_(item.description)}</span>
             <span>{item.value}</span>
           </li>
         ))}

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx

@@ -2,6 +2,8 @@
 
 import { useMemo } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckCheckIcon, CheckIcon, Loader, MailOpen } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { match } from 'ts-pattern';
@@ -21,6 +23,8 @@ export const DocumentPageViewRecentActivity = ({
   documentId,
   userId,
 }: DocumentPageViewRecentActivityProps) => {
+  const { _ } = useLingui();
+
   const {
     data,
     isLoading,
@@ -49,7 +53,9 @@ export const DocumentPageViewRecentActivity = ({
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
       <div className="flex flex-row items-center justify-between border-b px-4 py-3">
-        <h1 className="text-foreground font-medium">Recent activity</h1>
+        <h1 className="text-foreground font-medium">
+          <Trans>Recent activity</Trans>
+        </h1>
 
         {/* Can add dropdown menu here for additional options. */}
       </div>
@@ -62,12 +68,14 @@ export const DocumentPageViewRecentActivity = ({
 
       {isLoadingError && (
         <div className="flex h-full flex-col items-center justify-center py-16">
-          <p className="text-foreground/80 text-sm">Unable to load document history</p>
+          <p className="text-foreground/80 text-sm">
+            <Trans>Unable to load document history</Trans>
+          </p>
           <button
             onClick={async () => refetch()}
             className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
           >
-            Click here to retry
+            <Trans>Click here to retry</Trans>
           </button>
         </div>
       )}
@@ -89,14 +97,16 @@ export const DocumentPageViewRecentActivity = ({
                   onClick={async () => fetchNextPage()}
                   className="text-foreground/70 hover:text-muted-foreground text-xs"
                 >
-                  {isFetchingNextPage ? 'Loading...' : 'Load older activity'}
+                  {isFetchingNextPage ? _(msg`Loading...`) : _(msg`Load older activity`)}
                 </button>
               </li>
             )}
 
             {documentAuditLogs.length === 0 && (
               <div className="flex items-center justify-center py-4">
-                <p className="text-muted-foreground/70 text-sm">No recent activity</p>
+                <p className="text-muted-foreground/70 text-sm">
+                  <Trans>No recent activity</Trans>
+                </p>
               </div>
             )}
 
@@ -133,6 +143,7 @@ export const DocumentPageViewRecentActivity = ({
                     ))}
                 </div>
 
+                {/* Todo: Translations. */}
                 <p
                   className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
                   title={`${formatDocumentAuditLogAction(auditLog, userId).prefix} ${

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

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckIcon, Clock, MailIcon, MailOpenIcon, PenIcon, PlusIcon } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -21,17 +23,21 @@ export const DocumentPageViewRecipients = ({
   document,
   documentRootPath,
 }: DocumentPageViewRecipientsProps) => {
+  const { _ } = useLingui();
+
   const recipients = document.Recipient;
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="text-foreground font-medium">Recipients</h1>
+        <h1 className="text-foreground font-medium">
+          <Trans>Recipients</Trans>
+        </h1>
 
         {document.status !== DocumentStatus.COMPLETED && (
           <Link
             href={`${documentRootPath}/${document.id}/edit?step=signers`}
-            title="Modify recipients"
+            title={_(msg`Modify recipients`)}
             className="flex flex-row items-center justify-between"
           >
             {recipients.length === 0 ? (
@@ -45,7 +51,9 @@ export const DocumentPageViewRecipients = ({
 
       <ul className="text-muted-foreground divide-y border-t">
         {recipients.length === 0 && (
-          <li className="flex flex-col items-center justify-center py-6 text-sm">No recipients</li>
+          <li className="flex flex-col items-center justify-center py-6 text-sm">
+            <Trans>No recipients</Trans>
+          </li>
         )}
 
         {recipients.map((recipient) => (
@@ -55,7 +63,7 @@ export const DocumentPageViewRecipients = ({
               primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
               secondaryText={
                 <p className="text-muted-foreground/70 text-xs">
-                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                  {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }
             />
@@ -67,19 +75,19 @@ export const DocumentPageViewRecipients = ({
                     .with(RecipientRole.APPROVER, () => (
                       <>
                         <CheckIcon className="mr-1 h-3 w-3" />
-                        Approved
+                        <Trans>Approved</Trans>
                       </>
                     ))
                     .with(RecipientRole.CC, () =>
                       document.status === DocumentStatus.COMPLETED ? (
                         <>
                           <MailIcon className="mr-1 h-3 w-3" />
-                          Sent
+                          <Trans>Sent</Trans>
                         </>
                       ) : (
                         <>
                           <CheckIcon className="mr-1 h-3 w-3" />
-                          Ready
+                          <Trans>Ready</Trans>
                         </>
                       ),
                     )
@@ -87,13 +95,13 @@ export const DocumentPageViewRecipients = ({
                     .with(RecipientRole.SIGNER, () => (
                       <>
                         <SignatureIcon className="mr-1 h-3 w-3" />
-                        Signed
+                        <Trans>Signed</Trans>
                       </>
                     ))
                     .with(RecipientRole.VIEWER, () => (
                       <>
                         <MailOpenIcon className="mr-1 h-3 w-3" />
-                        Viewed
+                        <Trans>Viewed</Trans>
                       </>
                     ))
                     .exhaustive()}
@@ -104,7 +112,7 @@ export const DocumentPageViewRecipients = ({
               recipient.signingStatus === SigningStatus.NOT_SIGNED && (
                 <Badge variant="secondary">
                   <Clock className="mr-1 h-3 w-3" />
-                  Pending
+                  <Trans>Pending</Trans>
                 </Badge>
               )}
           </li>

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

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Plural, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -42,6 +44,7 @@ export type DocumentPageViewProps = {
 
 export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
   const { id } = params;
+  const { _ } = useLingui();
 
   const documentId = Number(id);
 
@@ -107,7 +110,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <div className="flex flex-row justify-between truncate">
@@ -132,12 +135,18 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
                   documentStatus={document.status}
                   position="bottom"
                 >
-                  <span>{recipients.length} Recipient(s)</span>
+                  <span>
+                    <Trans>{recipients.length} Recipient(s)</Trans>
+                  </span>
                 </StackAvatarsWithTooltip>
               </div>
             )}
 
-            {document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
+            {document.deletedAt && (
+              <Badge variant="destructive">
+                <Trans>Document deleted</Trans>
+              </Badge>
+            )}
           </div>
         </div>
 
@@ -146,7 +155,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
             <DocumentHistorySheet documentId={document.id} userId={user.id}>
               <Button variant="outline">
                 <Clock9 className="mr-1.5 h-4 w-4" />
-                Document history
+                <Trans>Document history</Trans>
               </Button>
             </DocumentHistorySheet>
           </div>
@@ -172,7 +181,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
             <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
               <div className="flex flex-row items-center justify-between px-4">
                 <h3 className="text-foreground text-2xl font-semibold">
-                  Document {FRIENDLY_STATUS_MAP[document.status].label.toLowerCase()}
+                  {_(FRIENDLY_STATUS_MAP[document.status].labelExtended)}
                 </h3>
 
                 <DocumentPageViewDropdown document={documentWithRecipients} team={team} />
@@ -180,22 +189,24 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
 
               <p className="text-muted-foreground mt-2 px-4 text-sm ">
                 {match(document.status)
-                  .with(
+                  .with(DocumentStatus.COMPLETED, () => (
-                    DocumentStatus.COMPLETED,
+                    <Trans>This document has been signed by all recipients</Trans>
-                    () => 'This document has been signed by all recipients',
+                  ))
-                  )
+                  .with(DocumentStatus.DRAFT, () => (
-                  .with(
+                    <Trans>This document is currently a draft and has not been sent</Trans>
-                    DocumentStatus.DRAFT,
+                  ))
-                    () => 'This document is currently a draft and has not been sent',
-                  )
                   .with(DocumentStatus.PENDING, () => {
                     const pendingRecipients = recipients.filter(
                       (recipient) => recipient.signingStatus === 'NOT_SIGNED',
                     );
 
-                    return `Waiting on ${pendingRecipients.length} recipient${
+                    return (
-                      pendingRecipients.length > 1 ? 's' : ''
+                      <Plural
-                    }`;
+                        value={pendingRecipients.length}
+                        one="Waiting on 1 recipient"
+                        other="Waiting on # recipients"
+                      />
+                    );
                   })
                   .exhaustive()}
               </p>

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

@@ -4,6 +4,9 @@ import { useEffect, useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
@@ -45,6 +48,7 @@ export const EditDocumentForm = ({
   isDocumentEnterprise,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -125,23 +129,23 @@ export const EditDocumentForm = ({
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     settings: {
-      title: 'General',
+      title: msg`General`,
-      description: 'Configure general settings for the document.',
+      description: msg`Configure general settings for the document.`,
       stepIndex: 1,
     },
     signers: {
-      title: 'Add Signers',
+      title: msg`Add Signers`,
-      description: 'Add the people who will sign the document.',
+      description: msg`Add the people who will sign the document.`,
       stepIndex: 2,
     },
     fields: {
-      title: 'Add Fields',
+      title: msg`Add Fields`,
-      description: 'Add all relevant fields for each recipient.',
+      description: msg`Add all relevant fields for each recipient.`,
       stepIndex: 3,
     },
     subject: {
-      title: 'Add Subject',
+      title: msg`Add Subject`,
-      description: 'Add the subject and message you wish to send to signers.',
+      description: msg`Add the subject and message you wish to send to signers.`,
       stepIndex: 4,
     },
   };
@@ -191,8 +195,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while updating the document settings.',
+        description: _(msg`An error occurred while updating the document settings.`),
         variant: 'destructive',
       });
     }
@@ -218,8 +222,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding signers.',
+        description: _(msg`An error occurred while adding signers.`),
         variant: 'destructive',
       });
     }
@@ -248,8 +252,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding the fields.',
+        description: _(msg`An error occurred while adding the fields.`),
         variant: 'destructive',
       });
     }
@@ -269,8 +273,8 @@ export const EditDocumentForm = ({
       });
 
       toast({
-        title: 'Document sent',
+        title: _(msg`Document sent`),
-        description: 'Your document has been sent successfully.',
+        description: _(msg`Your document has been sent successfully.`),
         duration: 5000,
       });
 
@@ -279,8 +283,8 @@ export const EditDocumentForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while sending the document.',
+        description: _(msg`An error occurred while sending the document.`),
         variant: 'destructive',
       });
     }

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

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Plural, Trans } from '@lingui/macro';
 import { ChevronLeft, Users2 } from 'lucide-react';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
@@ -78,7 +79,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
@@ -97,7 +98,9 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
               documentStatus={document.status}
               position="bottom"
             >
-              <span>{recipients.length} Recipient(s)</span>
+              <span>
+                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+              </span>
             </StackAvatarsWithTooltip>
           </div>
         )}

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

@@ -1,3 +1,5 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DocumentEditPageView } from './document-edit-page-view';
 
 export type DocumentPageProps = {
@@ -7,5 +9,7 @@ export type DocumentPageProps = {
 };
 
 export default function DocumentEditPage({ params }: DocumentPageProps) {
+  setupI18nSSR();
+
   return <DocumentEditPageView params={params} />;
 }

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

@@ -1,19 +1,23 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 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();
+
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
       <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
-        Loading Document...
+        <Trans>Loading Document...</Trans>
       </h1>
 
       <div className="flex h-10 items-center">
@@ -25,7 +29,9 @@ export default function Loading() {
           <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />
 
-            <p className="text-muted-foreground mt-4">Loading document...</p>
+            <p className="text-muted-foreground mt-4">
+              <Trans>Loading document...</Trans>
+            </p>
           </div>
         </div>
 

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

@@ -2,6 +2,8 @@
 
 import { useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 import type { DateTimeFormatOptions } from 'luxon';
 import { UAParser } from 'ua-parser-js';
@@ -27,6 +29,8 @@ const dateFormat: DateTimeFormatOptions = {
 };
 
 export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps) => {
+  const { _ } = useLingui();
+
   const parser = new UAParser();
 
   const searchParams = useSearchParams();
@@ -70,12 +74,12 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
     <DataTable
       columns={[
         {
-          header: 'Time',
+          header: _(msg`Time`),
           accessorKey: 'createdAt',
           cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
         },
         {
-          header: 'User',
+          header: _(msg`User`),
           accessorKey: 'name',
           cell: ({ row }) =>
             row.original.name || row.original.email ? (
@@ -97,7 +101,7 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
             ),
         },
         {
-          header: 'Action',
+          header: _(msg`Action`),
           accessorKey: 'type',
           cell: ({ row }) => (
             <span>

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

@@ -1,6 +1,9 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import type { MessageDescriptor } from '@lingui/core';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ChevronLeft } from 'lucide-react';
 import { DateTime } from 'luxon';
 
@@ -29,6 +32,8 @@ export type DocumentLogsPageViewProps = {
 };
 
 export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
+  const { _ } = useLingui();
+
   const locale = getLocale();
 
   const { id } = params;
@@ -60,39 +65,39 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     redirect(documentRootPath);
   }
 
-  const documentInformation: { description: string; value: string }[] = [
+  const documentInformation: { description: MessageDescriptor; value: string }[] = [
     {
-      description: 'Document title',
+      description: msg`Document title`,
       value: document.title,
     },
     {
-      description: 'Document ID',
+      description: msg`Document ID`,
       value: document.id.toString(),
     },
     {
-      description: 'Document status',
+      description: msg`Document status`,
-      value: FRIENDLY_STATUS_MAP[document.status].label,
+      value: _(FRIENDLY_STATUS_MAP[document.status].label),
     },
     {
-      description: 'Created by',
+      description: msg`Created by`,
       value: document.User.name
         ? `${document.User.name} (${document.User.email})`
         : document.User.email,
     },
     {
-      description: 'Date created',
+      description: msg`Date created`,
       value: DateTime.fromJSDate(document.createdAt)
         .setLocale(locale)
         .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
-      description: 'Last updated',
+      description: msg`Last updated`,
       value: DateTime.fromJSDate(document.updatedAt)
         .setLocale(locale)
         .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
-      description: 'Time zone',
+      description: msg`Time zone`,
       value: document.documentMeta?.timezone ?? 'N/A',
     },
   ];
@@ -114,7 +119,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         className="flex items-center text-[#7AC455] hover:opacity-80"
       >
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Document
+        <Trans>Document</Trans>
       </Link>
 
       <div className="flex flex-col justify-between truncate sm:flex-row">
@@ -147,7 +152,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
           {documentInformation.map((info, i) => (
             <div className="text-foreground text-sm" key={i}>
-              <h3 className="font-semibold">{info.description}</h3>
+              <h3 className="font-semibold">{_(info.description)}</h3>
               <p className="text-muted-foreground">{info.value}</p>
             </div>
           ))}

apps/web/src/app/(dashboard)/documents/[id]/logs/download-audit-log-button.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DownloadIcon } from 'lucide-react';
 
 import { trpc } from '@documenso/trpc/react';
@@ -19,6 +21,7 @@ export const DownloadAuditLogButton = ({
   documentId,
 }: DownloadAuditLogButtonProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { mutateAsync: downloadAuditLogs, isLoading } =
     trpc.document.downloadAuditLogs.useMutation();
@@ -59,8 +62,10 @@ export const DownloadAuditLogButton = ({
       console.error(error);
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Sorry, we were unable to download the audit logs. Please try again later.',
+        description: _(
+          msg`Sorry, we were unable to download the audit logs. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -73,7 +78,7 @@ export const DownloadAuditLogButton = ({
       onClick={() => void onDownloadAuditLogsClick()}
     >
       {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Audit Logs
+      <Trans>Download Audit Logs</Trans>
     </Button>
   );
 };

apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DownloadIcon } from 'lucide-react';
 
 import { DocumentStatus } from '@documenso/prisma/client';
@@ -20,6 +22,7 @@ export const DownloadCertificateButton = ({
   documentStatus,
 }: DownloadCertificateButtonProps) => {
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { mutateAsync: downloadCertificate, isLoading } =
     trpc.document.downloadCertificate.useMutation();
@@ -60,8 +63,10 @@ export const DownloadCertificateButton = ({
       console.error(error);
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Sorry, we were unable to download the certificate. Please try again later.',
+        description: _(
+          msg`Sorry, we were unable to download the certificate. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -76,7 +81,7 @@ export const DownloadCertificateButton = ({
       onClick={() => void onDownloadCertificatesClick()}
     >
       {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
-      Download Certificate
+      <Trans>Download Certificate</Trans>
     </Button>
   );
 };

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

@@ -1,3 +1,5 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DocumentLogsPageView } from './document-logs-page-view';
 
 export type DocumentsLogsPageProps = {
@@ -7,5 +9,7 @@ export type DocumentsLogsPageProps = {
 };
 
 export default function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
+  setupI18nSSR();
+
   return <DocumentLogsPageView params={params} />;
 }

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

@@ -1,3 +1,5 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DocumentPageView } from './document-page-view';
 
 export type DocumentPageProps = {
@@ -7,5 +9,7 @@ export type DocumentPageProps = {
 };
 
 export default function DocumentPage({ params }: DocumentPageProps) {
+  setupI18nSSR();
+
   return <DocumentPageView params={params} />;
 }

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

@@ -1,17 +1,22 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 export default function DocumentSentPage() {
+  setupI18nSSR();
+
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
       <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Documents
+        <Trans>Documents</Trans>
       </Link>
 
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
-        Loading Document...
+        <Trans>Loading Document...</Trans>
       </h1>
     </div>
   );

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { History } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -62,6 +64,7 @@ export const ResendDocumentActionItem = ({
 }: ResendDocumentActionItemProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isOpen, setIsOpen] = useState(false);
   const isOwner = document.userId === session?.user?.id;
@@ -91,16 +94,16 @@ export const ResendDocumentActionItem = ({
       await resendDocument({ documentId: document.id, recipients, teamId: team?.id });
 
       toast({
-        title: 'Document re-sent',
+        title: _(msg`Document re-sent`),
-        description: 'Your document has been re-sent successfully.',
+        description: _(msg`Your document has been re-sent successfully.`),
         duration: 5000,
       });
 
       setIsOpen(false);
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This document could not be re-sent at this time. Please try again.',
+        description: _(msg`This document could not be re-sent at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -112,14 +115,16 @@ export const ResendDocumentActionItem = ({
       <DialogTrigger asChild>
         <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
           <History className="mr-2 h-4 w-4" />
-          Resend
+          <Trans>Resend</Trans>
         </DropdownMenuItem>
       </DialogTrigger>
 
       <DialogContent className="sm:max-w-sm" hideClose>
         <DialogHeader>
           <DialogTitle asChild>
-            <h1 className="text-center text-xl">Who do you want to remind?</h1>
+            <h1 className="text-center text-xl">
+              <Trans>Who do you want to remind?</Trans>
+            </h1>
           </DialogTitle>
         </DialogHeader>
 
@@ -178,12 +183,12 @@ export const ResendDocumentActionItem = ({
                 variant="secondary"
                 disabled={isSubmitting}
               >
-                Cancel
+                <Trans>Cancel</Trans>
               </Button>
             </DialogClose>
 
             <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
-              Send reminder
+              <Trans>Send reminder</Trans>
             </Button>
           </div>
         </DialogFooter>

apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx

@@ -2,6 +2,8 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
@@ -27,6 +29,7 @@ export type DataTableActionButtonProps = {
 export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   if (!session) {
     return null;
@@ -69,8 +72,8 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
       await downloadPDF({ documentData, fileName: row.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -96,7 +99,7 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
         <Button className="w-32" asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="-ml-1 mr-2 h-4 w-4" />
-            Edit
+            <Trans>Edit</Trans>
           </Link>
         </Button>
       ),
@@ -108,19 +111,19 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
             .with(RecipientRole.SIGNER, () => (
               <>
                 <Pencil className="-ml-1 mr-2 h-4 w-4" />
-                Sign
+                <Trans>Sign</Trans>
               </>
             ))
             .with(RecipientRole.APPROVER, () => (
               <>
                 <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
-                Approve
+                <Trans>Approve</Trans>
               </>
             ))
             .otherwise(() => (
               <>
                 <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-                View
+                <Trans>View</Trans>
               </>
             ))}
         </Link>
@@ -129,13 +132,13 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
     .with({ isPending: true, isSigned: true }, () => (
       <Button className="w-32" disabled={true}>
         <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-        View
+        <Trans>View</Trans>
       </Button>
     ))
     .with({ isComplete: true }, () => (
       <Button className="w-32" onClick={onDownloadClick}>
         <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        Download
+        <Trans>Download</Trans>
       </Button>
     ))
     .otherwise(() => <div></div>);

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -4,6 +4,8 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import {
   CheckCircle,
   Copy,
@@ -52,6 +54,7 @@ export type DataTableActionDropdownProps = {
 export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -98,8 +101,8 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       await downloadPDF({ documentData, fileName: row.title });
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while downloading your document.',
+        description: _(msg`An error occurred while downloading your document.`),
         variant: 'destructive',
       });
     }
@@ -114,7 +117,9 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
-        <DropdownMenuLabel>Action</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
 
         {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
@@ -122,21 +127,21 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
               {recipient?.role === RecipientRole.VIEWER && (
                 <>
                   <EyeIcon className="mr-2 h-4 w-4" />
-                  View
+                  <Trans>View</Trans>
                 </>
               )}
 
               {recipient?.role === RecipientRole.SIGNER && (
                 <>
                   <Pencil className="mr-2 h-4 w-4" />
-                  Sign
+                  <Trans>Sign</Trans>
                 </>
               )}
 
               {recipient?.role === RecipientRole.APPROVER && (
                 <>
                   <CheckCircle className="mr-2 h-4 w-4" />
-                  Approve
+                  <Trans>Approve</Trans>
                 </>
               )}
             </Link>
@@ -146,25 +151,25 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
-            Edit
+            <Trans>Edit</Trans>
           </Link>
         </DropdownMenuItem>
 
         <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
           <Download className="mr-2 h-4 w-4" />
-          Download
+          <Trans>Download</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
-          Duplicate
+          <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
         {/* We don't want to allow teams moving documents across at the moment. */}
         {!team && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
-            Move to Team
+            <Trans>Move to Team</Trans>
           </DropdownMenuItem>
         )}
 
@@ -179,10 +184,12 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           disabled={Boolean(!canManageDocument && team?.teamEmail)}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          {canManageDocument ? 'Delete' : 'Hide'}
+          {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
         </DropdownMenuItem>
 
-        <DropdownMenuLabel>Share</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Trans>Share</Trans>
+        </DropdownMenuLabel>
 
         <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} team={team} />
 
@@ -193,7 +200,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share Signing Card
+                <Trans>Share Signing Card</Trans>
               </div>
             </DropdownMenuItem>
           )}

apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx

@@ -2,6 +2,9 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { trpc } from '@documenso/trpc/react';
@@ -12,6 +15,8 @@ type DataTableSenderFilterProps = {
 };
 
 export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) => {
+  const { _ } = useLingui();
+
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -49,11 +54,13 @@ export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) =>
     <MultiSelectCombobox
       emptySelectionPlaceholder={
         <p className="text-muted-foreground font-normal">
+          <Trans>
             <span className="text-muted-foreground/70">Sender:</span> All
+          </Trans>
         </p>
       }
       enableClearAllButton={true}
-      inputPlaceholder="Search"
+      inputPlaceholder={msg`Search`}
       loading={!isMounted || isInitialLoading}
       options={comboBoxOptions}
       selectedValues={senderIds}

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -2,6 +2,8 @@
 
 import { useTransition } from 'react';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
@@ -39,6 +41,8 @@ export const DocumentsDataTable = ({
   team,
 }: DocumentsDataTableProps) => {
   const { data: session } = useSession();
+  const { _ } = useLingui();
+
   const [isPending, startTransition] = useTransition();
 
   const updateSearchParams = useUpdateSearchParams();
@@ -61,7 +65,7 @@ export const DocumentsDataTable = ({
       <DataTable
         columns={[
           {
-            header: 'Created',
+            header: _(msg`Created`),
             accessorKey: 'createdAt',
             cell: ({ row }) => (
               <LocaleDate
@@ -71,16 +75,16 @@ export const DocumentsDataTable = ({
             ),
           },
           {
-            header: 'Title',
+            header: _(msg`Title`),
             cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
           },
           {
             id: 'sender',
-            header: 'Sender',
+            header: _(msg`Sender`),
             cell: ({ row }) => row.original.User.name ?? row.original.User.email,
           },
           {
-            header: 'Recipient',
+            header: _(msg`Recipient`),
             accessorKey: 'recipient',
             cell: ({ row }) => (
               <StackAvatarsWithTooltip
@@ -90,13 +94,13 @@ export const DocumentsDataTable = ({
             ),
           },
           {
-            header: 'Status',
+            header: _(msg`Status`),
             accessorKey: 'status',
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
             size: 140,
           },
           {
-            header: 'Actions',
+            header: _(msg`Actions`),
             cell: ({ row }) =>
               (!row.original.deletedAt ||
                 row.original.status === ExtendedDocumentStatus.COMPLETED) && (

apps/web/src/app/(dashboard)/documents/delete-document-dialog.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -43,6 +45,7 @@ export const DeleteDocumentDialog = ({
 
   const { toast } = useToast();
   const { refreshLimits } = useLimits();
+  const { _ } = useLingui();
 
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
@@ -53,8 +56,8 @@ export const DeleteDocumentDialog = ({
       void refreshLimits();
 
       toast({
-        title: 'Document deleted',
+        title: _(msg`Document deleted`),
-        description: `"${documentTitle}" has been successfully deleted`,
+        description: _(msg`"${documentTitle}" has been successfully deleted`),
         duration: 5000,
       });
 
@@ -74,8 +77,8 @@ export const DeleteDocumentDialog = ({
       await deleteDocument({ id, teamId });
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This document could not be deleted at this time. Please try again.',
+        description: _(msg`This document could not be deleted at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -91,11 +94,20 @@ export const DeleteDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
 
           <DialogDescription>
-            You are about to {canManageDocument ? 'delete' : 'hide'}{' '}
+            {canManageDocument ? (
-            <strong>"{documentTitle}"</strong>
+              <Trans>
+                You are about to delete <strong>"{documentTitle}"</strong>
+              </Trans>
+            ) : (
+              <Trans>
+                You are about to hide <strong>"{documentTitle}"</strong>
+              </Trans>
+            )}
           </DialogDescription>
         </DialogHeader>
 
@@ -104,33 +116,53 @@ export const DeleteDocumentDialog = ({
             {match(status)
               .with(DocumentStatus.DRAFT, () => (
                 <AlertDescription>
+                  <Trans>
                     Please note that this action is <strong>irreversible</strong>. Once confirmed,
                     this document will be permanently deleted.
+                  </Trans>
                 </AlertDescription>
               ))
               .with(DocumentStatus.PENDING, () => (
                 <AlertDescription>
                   <p>
+                    <Trans>
                       Please note that this action is <strong>irreversible</strong>.
+                    </Trans>
                   </p>
 
-                  <p className="mt-1">Once confirmed, the following will occur:</p>
+                  <p className="mt-1">
+                    <Trans>Once confirmed, the following will occur:</Trans>
+                  </p>
 
                   <ul className="mt-0.5 list-inside list-disc">
-                    <li>Document will be permanently deleted</li>
+                    <li>
-                    <li>Document signing process will be cancelled</li>
+                      <Trans>Document will be permanently deleted</Trans>
-                    <li>All inserted signatures will be voided</li>
+                    </li>
-                    <li>All recipients will be notified</li>
+                    <li>
+                      <Trans>Document signing process will be cancelled</Trans>
+                    </li>
+                    <li>
+                      <Trans>All inserted signatures will be voided</Trans>
+                    </li>
+                    <li>
+                      <Trans>All recipients will be notified</Trans>
+                    </li>
                   </ul>
                 </AlertDescription>
               ))
               .with(DocumentStatus.COMPLETED, () => (
                 <AlertDescription>
-                  <p>By deleting this document, the following will occur:</p>
+                  <p>
+                    <Trans>By deleting this document, the following will occur:</Trans>
+                  </p>
 
                   <ul className="mt-0.5 list-inside list-disc">
-                    <li>The document will be hidden from your account</li>
+                    <li>
-                    <li>Recipients will still retain their copy of the document</li>
+                      <Trans>The document will be hidden from your account</Trans>
+                    </li>
+                    <li>
+                      <Trans>Recipients will still retain their copy of the document</Trans>
+                    </li>
                   </ul>
                 </AlertDescription>
               ))
@@ -139,7 +171,7 @@ export const DeleteDocumentDialog = ({
         ) : (
           <Alert variant="warning" className="-mt-1">
             <AlertDescription>
-              Please contact support if you would like to revert this action.
+              <Trans>Please contact support if you would like to revert this action.</Trans>
             </AlertDescription>
           </Alert>
         )}
@@ -149,13 +181,13 @@ export const DeleteDocumentDialog = ({
             type="text"
             value={inputValue}
             onChange={onInputChange}
-            placeholder="Type 'delete' to confirm"
+            placeholder={_(msg`Type 'delete' to confirm`)}
           />
         )}
 
         <DialogFooter>
           <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
 
           <Button
@@ -165,7 +197,7 @@ export const DeleteDocumentDialog = ({
             disabled={!isDeleteEnabled && canManageDocument}
             variant="destructive"
           >
-            {canManageDocument ? 'Delete' : 'Hide'}
+            {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
@@ -104,7 +106,9 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
             </Avatar>
           )}
 
-          <h1 className="text-4xl font-semibold">Documents</h1>
+          <h1 className="text-4xl font-semibold">
+            <Trans>Documents</Trans>
+          </h1>
         </div>
 
         <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">

apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx

@@ -1,5 +1,8 @@
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -28,7 +31,9 @@ export const DuplicateDocumentDialog = ({
   team,
 }: DuplicateDocumentDialogProps) => {
   const router = useRouter();
+
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
     id,
@@ -50,8 +55,8 @@ export const DuplicateDocumentDialog = ({
         router.push(`${documentsPath}/${newId}/edit`);
 
         toast({
-          title: 'Document Duplicated',
+          title: _(msg`Document Duplicated`),
-          description: 'Your document has been successfully duplicated.',
+          description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
@@ -64,8 +69,8 @@ export const DuplicateDocumentDialog = ({
       await duplicateDocument({ id, teamId: team?.id });
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This document could not be duplicated at this time. Please try again.',
+        description: _(msg`This document could not be duplicated at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -76,12 +81,14 @@ export const DuplicateDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Duplicate</DialogTitle>
+          <DialogTitle>
+            <Trans>Duplicate</Trans>
+          </DialogTitle>
         </DialogHeader>
         {!documentData || isLoading ? (
           <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
             <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
-              Loading Document...
+              <Trans>Loading Document...</Trans>
             </h1>
           </div>
         ) : (
@@ -98,7 +105,7 @@ export const DuplicateDocumentDialog = ({
               onClick={() => onOpenChange(false)}
               className="flex-1"
             >
-              Cancel
+              <Trans>Cancel</Trans>
             </Button>
 
             <Button
@@ -108,7 +115,7 @@ export const DuplicateDocumentDialog = ({
               onClick={onDuplicate}
               className="flex-1"
             >
-              Duplicate
+              <Trans>Duplicate</Trans>
             </Button>
           </div>
         </DialogFooter>

apps/web/src/app/(dashboard)/documents/empty-state.tsx

@@ -1,3 +1,5 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Bird, CheckCircle2 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -6,33 +8,31 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 export type EmptyDocumentProps = { status: ExtendedDocumentStatus };
 
 export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
+  const { _ } = useLingui();
+
   const {
     title,
     message,
     icon: Icon,
   } = match(status)
     .with(ExtendedDocumentStatus.COMPLETED, () => ({
-      title: 'Nothing to do',
+      title: msg`Nothing to do`,
-      message:
+      message: msg`There are no completed documents yet. Documents that you have created or received will appear here once completed.`,
-        'There are no completed documents yet. Documents that you have created or received will appear here once completed.',
       icon: CheckCircle2,
     }))
     .with(ExtendedDocumentStatus.DRAFT, () => ({
-      title: 'No active drafts',
+      title: msg`No active drafts`,
-      message:
+      message: msg`There are no active drafts at the current moment. You can upload a document to start drafting.`,
-        'There are no active drafts at the current moment. You can upload a document to start drafting.',
       icon: CheckCircle2,
     }))
     .with(ExtendedDocumentStatus.ALL, () => ({
-      title: "We're all empty",
+      title: msg`We're all empty`,
-      message:
+      message: msg`You have not yet created or received any documents. To create a document please upload one.`,
-        'You have not yet created or received any documents. To create a document please upload one.',
       icon: Bird,
     }))
     .otherwise(() => ({
-      title: 'Nothing to do',
+      title: msg`Nothing to do`,
-      message:
+      message: msg`All documents have been processed. Any new documents that are sent or received will show here.`,
-        'All documents have been processed. Any new documents that are sent or received will show here.',
       icon: CheckCircle2,
     }));
 
@@ -44,9 +44,9 @@ export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
       <Icon className="h-12 w-12" strokeWidth={1.5} />
 
       <div className="text-center">
-        <h3 className="text-lg font-semibold">{title}</h3>
+        <h3 className="text-lg font-semibold">{_(title)}</h3>
 
-        <p className="mt-2 max-w-[60ch]">{message}</p>
+        <p className="mt-2 max-w-[60ch]">{_(message)}</p>
       </div>
     </div>
   );

apps/web/src/app/(dashboard)/documents/move-document-dialog.tsx

@@ -2,6 +2,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -30,25 +33,29 @@ type MoveDocumentDialogProps = {
 };
 
 export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocumentDialogProps) => {
-  const router = useRouter();
+  const { _ } = useLingui();
   const { toast } = useToast();
+
+  const router = useRouter();
+
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
   const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+
   const { mutateAsync: moveDocument, isLoading } = trpc.document.moveDocumentToTeam.useMutation({
     onSuccess: () => {
       router.refresh();
       toast({
-        title: 'Document moved',
+        title: _(msg`Document moved`),
-        description: 'The document has been successfully moved to the selected team.',
+        description: _(msg`The document has been successfully moved to the selected team.`),
         duration: 5000,
       });
       onOpenChange(false);
     },
     onError: (error) => {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: error.message || 'An error occurred while moving the document.',
+        description: error.message || _(msg`An error occurred while moving the document.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -56,7 +63,10 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
   });
 
   const onMove = async () => {
-    if (!selectedTeamId) return;
+    if (!selectedTeamId) {
+      return;
+    }
+
     await moveDocument({ documentId, teamId: selectedTeamId });
   };
 
@@ -64,20 +74,22 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Move Document to Team</DialogTitle>
+          <DialogTitle>
+            <Trans>Move Document to Team</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Select a team to move this document to. This action cannot be undone.
+            <Trans>Select a team to move this document to. This action cannot be undone.</Trans>
           </DialogDescription>
         </DialogHeader>
 
         <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
           <SelectTrigger>
-            <SelectValue placeholder="Select a team" />
+            <SelectValue placeholder={_(msg`Select a team`)} />
           </SelectTrigger>
           <SelectContent>
             {isLoadingTeams ? (
               <SelectItem value="loading" disabled>
-                Loading teams...
+                <Trans>Loading teams...</Trans>
               </SelectItem>
             ) : (
               teams?.map((team) => (

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

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import type { DocumentsPageViewProps } from './documents-page-view';
@@ -15,7 +16,10 @@ export const metadata: Metadata = {
 };
 
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
+
   return (
     <>
       <UpcomingProfileClaimTeaser user={user} />

apps/web/src/app/(dashboard)/documents/upcoming-profile-claim-teaser.tsx

@@ -2,6 +2,9 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { User } from '@documenso/prisma/client';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -12,6 +15,7 @@ export type UpcomingProfileClaimTeaserProps = {
 };
 
 export const UpcomingProfileClaimTeaser = ({ user }: UpcomingProfileClaimTeaserProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [open, setOpen] = useState(false);
@@ -21,14 +25,17 @@ export const UpcomingProfileClaimTeaser = ({ user }: UpcomingProfileClaimTeaserP
     (open: boolean) => {
       if (!open && !claimed) {
         toast({
-          title: 'Claim your profile later',
+          title: _(msg`Claim your profile later`),
-          description: 'You can claim your profile later on by going to your profile settings!',
+          description: _(
+            msg`You can claim your profile later on by going to your profile settings!`,
+          ),
         });
       }
 
       setOpen(open);
       localStorage.setItem('app.hasShownProfileClaimDialog', 'true');
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [claimed, toast],
   );
 

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -4,6 +4,8 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -34,6 +36,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
   const { data: session } = useSession();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { quota, remaining, refreshLimits } = useLimits();
@@ -45,13 +48,14 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
   const disabledMessage = useMemo(() => {
     if (remaining.documents === 0) {
       return team
-        ? 'Document upload disabled due to unpaid invoices'
+        ? msg`Document upload disabled due to unpaid invoices`
-        : 'You have reached your document limit.';
+        : msg`You have reached your document limit.`;
     }
 
     if (!session?.user.emailVerified) {
-      return 'Verify your email to upload documents.';
+      return msg`Verify your email to upload documents.`;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [remaining.documents, session?.user.emailVerified, team]);
 
   const onFileDrop = async (file: File) => {
@@ -74,8 +78,8 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
       void refreshLimits();
 
       toast({
-        title: 'Document uploaded',
+        title: _(msg`Document uploaded`),
-        description: 'Your document has been uploaded successfully.',
+        description: _(msg`Your document has been uploaded successfully.`),
         duration: 5000,
       });
 
@@ -93,20 +97,20 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
       if (error.code === 'INVALID_DOCUMENT_FILE') {
         toast({
-          title: 'Invalid file',
+          title: _(msg`Invalid file`),
-          description: 'You cannot upload encrypted PDFs',
+          description: _(msg`You cannot upload encrypted PDFs`),
           variant: 'destructive',
         });
       } else if (err instanceof TRPCClientError) {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
-          description: 'An error occurred while uploading your document.',
+          description: _(msg`An error occurred while uploading your document.`),
           variant: 'destructive',
         });
       }
@@ -117,8 +121,8 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
   const onFileDropRejected = () => {
     toast({
-      title: 'Your document failed to upload.',
+      title: _(msg`Your document failed to upload.`),
-      description: `File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
       duration: 5000,
       variant: 'destructive',
     });
@@ -139,7 +143,9 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
           remaining.documents > 0 &&
           Number.isFinite(remaining.documents) && (
             <p className="text-muted-foreground/60 text-xs">
+              <Trans>
                 {remaining.documents} of {quota.documents} documents remaining this month.
+              </Trans>
             </p>
           )}
       </div>

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

@@ -5,6 +5,7 @@ import { redirect } from 'next/navigation';
 import { getServerSession } from 'next-auth';
 
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
@@ -22,6 +23,8 @@ export type AuthenticatedDashboardLayoutProps = {
 export default async function AuthenticatedDashboardLayout({
   children,
 }: AuthenticatedDashboardLayoutProps) {
+  setupI18nSSR();
+
   const session = await getServerSession(NEXT_AUTH_OPTIONS);
 
   if (!session) {

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

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import type { MessageDescriptor } from '@lingui/core';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
@@ -21,11 +24,11 @@ const INTERVALS: Interval[] = ['day', 'week', 'month', 'year'];
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 const isInterval = (value: unknown): value is Interval => INTERVALS.includes(value as Interval);
 
-const FRIENDLY_INTERVALS: Record<Interval, string> = {
+const FRIENDLY_INTERVALS: Record<Interval, MessageDescriptor> = {
-  day: 'Daily',
+  day: msg`Daily`,
-  week: 'Weekly',
+  week: msg`Weekly`,
-  month: 'Monthly',
+  month: msg`Monthly`,
-  year: 'Yearly',
+  year: msg`Yearly`,
 };
 
 const MotionCard = motion(Card);
@@ -35,6 +38,7 @@ export type BillingPlansProps = {
 };
 
 export const BillingPlans = ({ prices }: BillingPlansProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const isMounted = useIsMounted();
@@ -55,8 +59,8 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
       window.open(url);
     } catch (_err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'An error occurred while trying to create a checkout session.',
+        description: _(msg`An error occurred while trying to create a checkout session.`),
         variant: 'destructive',
       });
     } finally {
@@ -72,7 +76,7 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
             (interval) =>
               prices[interval].length > 0 && (
                 <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
-                  {FRIENDLY_INTERVALS[interval]}
+                  {_(FRIENDLY_INTERVALS[interval])}
                 </TabsTrigger>
               ),
           )}
@@ -121,7 +125,7 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
                   loading={isFetchingCheckoutSession}
                   onClick={() => void onSubscribeClick(price.id)}
                 >
-                  Subscribe
+                  <Trans>Subscribe</Trans>
                 </Button>
               </CardContent>
             </MotionCard>

apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -12,6 +15,7 @@ export type BillingPortalButtonProps = {
 };
 
 export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isFetchingPortalUrl, setIsFetchingPortalUrl] = useState(false);
@@ -32,16 +36,18 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
 
       window.open(sessionUrl, '_blank');
     } catch (e) {
-      let description =
+      let description = _(
-        'We are unable to proceed to the billing portal at this time. Please try again, or contact support.';
+        msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
+      );
 
       if (e.message === 'CUSTOMER_NOT_FOUND') {
-        description =
+        description = _(
-          'You do not currently have a customer record, this should not happen. Please contact support for assistance.';
+          msg`You do not currently have a customer record, this should not happen. Please contact support for assistance.`,
+        );
       }
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
         description,
         variant: 'destructive',
         duration: 10000,
@@ -57,7 +63,7 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
       onClick={async () => handleFetchPortalUrl()}
       loading={isFetchingPortalUrl}
     >
-      Manage Subscription
+      <Trans>Manage Subscription</Trans>
     </Button>
   );
 };

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

@@ -1,12 +1,14 @@
 import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { match } from 'ts-pattern';
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
@@ -24,6 +26,8 @@ export const metadata: Metadata = {
 };
 
 export default async function BillingSettingsPage() {
+  setupI18nSSR();
+
   let { user } = await getRequiredServerComponentSession();
 
   const isBillingEnabled = await getServerComponentFlag('app_billing');
@@ -66,15 +70,20 @@ export default async function BillingSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Billing</h3>
+      <h3 className="text-2xl font-semibold">
+        <Trans>Billing</Trans>
+      </h3>
 
       <div className="text-muted-foreground mt-2 text-sm">
         {isMissingOrInactiveOrFreePlan && (
           <p>
+            <Trans>
               You are currently on the <span className="font-semibold">Free Plan</span>.
+            </Trans>
           </p>
         )}
 
+        {/* Todo: Translation */}
         {!isMissingOrInactiveOrFreePlan &&
           match(subscription.status)
             .with('ACTIVE', () => (
@@ -108,7 +117,11 @@ export default async function BillingSettingsPage() {
               </p>
             ))
             .with('PAST_DUE', () => (
-              <p>Your current plan is past due. Please update your payment information.</p>
+              <p>
+                <Trans>
+                  Your current plan is past due. Please update your payment information.
+                </Trans>
+              </p>
             ))
             .otherwise(() => null)}
       </div>

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

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import { Trans } from '@lingui/macro';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { DesktopNav } from '~/components/(dashboard)/settings/layout/desktop-nav';
 import { MobileNav } from '~/components/(dashboard)/settings/layout/mobile-nav';
 
@@ -8,9 +12,13 @@ export type DashboardSettingsLayoutProps = {
 };
 
 export default function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
+  setupI18nSSR();
+
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="text-4xl font-semibold">Settings</h1>
+      <h1 className="text-4xl font-semibold">
+        <Trans>Settings</Trans>
+      </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
         <DesktopNav className="hidden md:col-span-3 md:flex" />

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { signOut } from 'next-auth/react';
 
 import type { User } from '@documenso/prisma/client';
@@ -28,6 +30,7 @@ export type DeleteAccountDialogProps = {
 };
 
 export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const hasTwoFactorAuthentication = user.twoFactorEnabled;
@@ -42,8 +45,8 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
       await deleteAccount();
 
       toast({
-        title: 'Account deleted',
+        title: _(msg`Account deleted`),
-        description: 'Your account has been deleted successfully.',
+        description: _(msg`Your account has been deleted successfully.`),
         duration: 5000,
       });
 
@@ -51,17 +54,19 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({
-          title: 'An error occurred',
+          title: _(msg`An error occurred`),
           description: err.message,
           variant: 'destructive',
         });
       } else {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
           variant: 'destructive',
           description:
             err.message ??
-            'We encountered an unknown error while attempting to delete your account. Please try again later.',
+            _(
+              msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
+            ),
         });
       }
     }
@@ -74,50 +79,63 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
         variant="neutral"
       >
         <div>
-          <AlertTitle>Delete Account</AlertTitle>
+          <AlertTitle>
+            <Trans>Delete Account</Trans>
+          </AlertTitle>
           <AlertDescription className="mr-2">
-            Delete your account and all its contents, including completed documents. This action is
+            <Trans>
-            irreversible and will cancel your subscription, so proceed with caution.
+              Delete your account and all its contents, including completed documents. This action
+              is irreversible and will cancel your subscription, so proceed with caution.
+            </Trans>
           </AlertDescription>
         </div>
 
         <div className="flex-shrink-0">
           <Dialog onOpenChange={() => setEnteredEmail('')}>
             <DialogTrigger asChild>
-              <Button variant="destructive">Delete Account</Button>
+              <Button variant="destructive">
+                <Trans>Delete Account</Trans>
+              </Button>
             </DialogTrigger>
 
             <DialogContent>
               <DialogHeader className="space-y-4">
-                <DialogTitle>Delete Account</DialogTitle>
+                <DialogTitle>
+                  <Trans>Delete Account</Trans>
+                </DialogTitle>
 
                 <Alert variant="destructive">
                   <AlertDescription className="selection:bg-red-100">
-                    This action is not reversible. Please be certain.
+                    <Trans>This action is not reversible. Please be certain.</Trans>
                   </AlertDescription>
                 </Alert>
 
                 {hasTwoFactorAuthentication && (
                   <Alert variant="destructive">
                     <AlertDescription className="selection:bg-red-100">
-                      Disable Two Factor Authentication before deleting your account.
+                      <Trans>Disable Two Factor Authentication before deleting your account.</Trans>
                     </AlertDescription>
                   </Alert>
                 )}
 
                 <DialogDescription>
-                  Documenso will delete <span className="font-semibold">all of your documents</span>
+                  <Trans>
-                  , along with all of your completed documents, signatures, and all other resources
+                    Documenso will delete{' '}
-                  belonging to your Account.
+                    <span className="font-semibold">all of your documents</span>, along with all of
+                    your completed documents, signatures, and all other resources belonging to your
+                    Account.
+                  </Trans>
                 </DialogDescription>
               </DialogHeader>
 
               {!hasTwoFactorAuthentication && (
                 <div className="mt-4">
                   <Label>
+                    <Trans>
                       Please type{' '}
                       <span className="text-muted-foreground font-semibold">{user.email}</span> to
                       confirm.
+                    </Trans>
                   </Label>
 
                   <Input
@@ -136,7 +154,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
                   variant="destructive"
                   disabled={hasTwoFactorAuthentication || enteredEmail !== user.email}
                 >
-                  {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'}
+                  {isDeletingAccount ? _(msg`Deleting account...`) : _(msg`Confirm Deletion`)}
                 </Button>
               </DialogFooter>
             </DialogContent>

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

@@ -1,5 +1,9 @@
 import type { Metadata } from 'next';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
@@ -13,11 +17,17 @@ export const metadata: Metadata = {
 };
 
 export default async function ProfileSettingsPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
   const { user } = await getRequiredServerComponentSession();
 
   return (
     <div>
-      <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
+      <SettingsHeader
+        title={_(msg`Profile`)}
+        subtitle={_(msg`Here you can edit your personal details.`)}
+      />
 
       <AvatarImageForm className="mb-8 max-w-xl" user={user} />
       <ProfileForm className="mb-8 max-w-xl" user={user} />

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

@@ -1,9 +1,12 @@
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-public-profile';
 
 import { PublicProfilePageView } from './public-profile-page-view';
 
 export default async function Page() {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
 
   const { profile } = await getUserPublicProfile({

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

@@ -2,6 +2,9 @@
 
 import { useEffect, useMemo, useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import type {
   Team,
@@ -36,22 +39,21 @@ type DirectTemplate = FindTemplateRow & {
 };
 
 const userProfileText = {
-  settingsTitle: 'Public Profile',
+  settingsTitle: msg`Public Profile`,
-  settingsSubtitle: 'You can choose to enable or disable your profile for public view.',
+  settingsSubtitle: msg`You can choose to enable or disable your profile for public view.`,
-  templatesTitle: 'My templates',
+  templatesTitle: msg`My templates`,
-  templatesSubtitle:
+  templatesSubtitle: msg`Show templates in your public profile for your audience to sign and get started quickly`,
-    'Show templates in your public profile for your audience to sign and get started quickly',
 };
 
 const teamProfileText = {
-  settingsTitle: 'Team Public Profile',
+  settingsTitle: msg`Team Public Profile`,
-  settingsSubtitle: 'You can choose to enable or disable your team profile for public view.',
+  settingsSubtitle: msg`You can choose to enable or disable your team profile for public view.`,
-  templatesTitle: 'Team templates',
+  templatesTitle: msg`Team templates`,
-  templatesSubtitle:
+  templatesSubtitle: msg`Show templates in your team public profile for your audience to sign and get started quickly`,
-    'Show templates in your team public profile for your audience to sign and get started quickly',
 };
 
 export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePageViewOptions) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
@@ -104,7 +106,7 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
     if (isVisible && !user.url) {
       toast({
-        title: 'You must set a profile URL before enabling your public profile.',
+        title: _(msg`You must set a profile URL before enabling your public profile.`),
         variant: 'destructive',
       });
 
@@ -119,8 +121,8 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
       });
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'We were unable to set your public profile to public. Please try again.',
+        description: _(msg`We were unable to set your public profile to public. Please try again.`),
         variant: 'destructive',
       });
 
@@ -134,7 +136,10 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
   return (
     <div className="max-w-2xl">
-      <SettingsHeader title={profileText.settingsTitle} subtitle={profileText.settingsSubtitle}>
+      <SettingsHeader
+        title={_(profileText.settingsTitle)}
+        subtitle={_(profileText.settingsSubtitle)}
+      >
         <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
           <TooltipTrigger asChild>
             <div
@@ -146,13 +151,17 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
                 },
               )}
             >
-              <span>Hide</span>
+              <span>
+                <Trans>Hide</Trans>
+              </span>
               <Switch
                 disabled={isUpdating}
                 checked={isPublicProfileVisible}
                 onCheckedChange={togglePublicProfileVisibility}
               />
-              <span>Show</span>
+              <span>
+                <Trans>Show</Trans>
+              </span>
             </div>
           </TooltipTrigger>
 
@@ -160,18 +169,26 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
             {isPublicProfileVisible ? (
               <>
                 <p>
+                  <Trans>
                     Profile is currently <strong>visible</strong>.
+                  </Trans>
                 </p>
 
-                <p>Toggle the switch to hide your profile from the public.</p>
+                <p>
+                  <Trans>Toggle the switch to hide your profile from the public.</Trans>
+                </p>
               </>
             ) : (
               <>
                 <p>
+                  <Trans>
                     Profile is currently <strong>hidden</strong>.
+                  </Trans>
                 </p>
 
-                <p>Toggle the switch to show your profile to the public.</p>
+                <p>
+                  <Trans>Toggle the switch to show your profile to the public.</Trans>
+                </p>
               </>
             )}
           </TooltipContent>
@@ -187,14 +204,18 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
       <div className="mt-4">
         <SettingsHeader
-          title={profileText.templatesTitle}
+          title={_(profileText.templatesTitle)}
-          subtitle={profileText.templatesSubtitle}
+          subtitle={_(profileText.templatesSubtitle)}
           hideDivider={true}
           className="mt-8 [&>*>h3]:text-base"
         >
           <ManagePublicTemplateDialog
             directTemplates={enabledPrivateDirectTemplates}
-            trigger={<Button variant="outline">Link template</Button>}
+            trigger={
+              <Button variant="outline">
+                <Trans>Link template</Trans>
+              </Button>
+            }
           />
         </SettingsHeader>
 

apps/web/src/app/(dashboard)/settings/public-profile/public-templates-data-table.tsx

@@ -2,6 +2,8 @@
 
 import { useMemo, useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { EditIcon, FileIcon, LinkIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
@@ -30,6 +32,7 @@ type DirectTemplate = FindTemplateRow & {
 export const PublicTemplatesDataTable = () => {
   const team = useOptionalCurrentTeam();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [, copy] = useCopyToClipboard();
@@ -71,8 +74,8 @@ export const PublicTemplatesDataTable = () => {
   const onCopyClick = async (token: string) =>
     copy(formatDirectTemplatePath(token)).then(() => {
       toast({
-        title: 'Copied to clipboard',
+        title: _(msg`Copied to clipboard`),
-        description: 'The direct link has been copied to your clipboard',
+        description: _(msg`The direct link has been copied to your clipboard`),
       });
     });
 
@@ -105,26 +108,26 @@ export const PublicTemplatesDataTable = () => {
 
             {isLoadingError && (
               <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
-                Unable to load your public profile templates at this time
+                <Trans>Unable to load your public profile templates at this time</Trans>
                 <button
                   onClick={(e) => {
                     e.preventDefault();
                     void refetch();
                   }}
                 >
-                  Click here to retry
+                  <Trans>Click here to retry</Trans>
                 </button>
               </div>
             )}
 
             {!isInitialLoading && (
               <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
-                No public profile templates found
+                <Trans>No public profile templates found</Trans>
                 <ManagePublicTemplateDialog
                   directTemplates={privateDirectTemplates}
                   trigger={
                     <button className="hover:text-muted-foreground/80 mt-1 text-xs">
-                      Click here to get started
+                      <Trans>Click here to get started</Trans>
                     </button>
                   }
                 />
@@ -157,11 +160,13 @@ export const PublicTemplatesDataTable = () => {
               </DropdownMenuTrigger>
 
               <DropdownMenuContent className="w-52" align="center" side="left">
-                <DropdownMenuLabel>Action</DropdownMenuLabel>
+                <DropdownMenuLabel>
+                  <Trans>Action</Trans>
+                </DropdownMenuLabel>
 
                 <DropdownMenuItem onClick={() => void onCopyClick(template.directLink.token)}>
                   <LinkIcon className="mr-2 h-4 w-4" />
-                  Copy sharable link
+                  <Trans>Copy sharable link</Trans>
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
@@ -173,7 +178,7 @@ export const PublicTemplatesDataTable = () => {
                   }}
                 >
                   <EditIcon className="mr-2 h-4 w-4" />
-                  Update
+                  <Trans>Update</Trans>
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
@@ -185,7 +190,7 @@ export const PublicTemplatesDataTable = () => {
                   }
                 >
                   <Trash2Icon className="mr-2 h-4 w-4" />
-                  Remove
+                  <Trans>Remove</Trans>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>

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

@@ -1,5 +1,10 @@
 import type { Metadata } from 'next';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 
 import ActivityPageBackButton from '../../../../../components/(dashboard)/settings/layout/activity-back';
@@ -10,11 +15,15 @@ export const metadata: Metadata = {
 };
 
 export default function SettingsSecurityActivityPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
+
   return (
     <div>
       <SettingsHeader
-        title="Security activity"
+        title={_(msg`Security activity`)}
-        subtitle="View all recent security activity related to your account."
+        subtitle={_(msg`View all security activity related to your account.`)}
         hideDivider={true}
       >
         <ActivityPageBackButton />

apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx

@@ -2,6 +2,8 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import type { DateTimeFormatOptions } from 'luxon';
 import { DateTime } from 'luxon';
 import { UAParser } from 'ua-parser-js';
@@ -23,6 +25,8 @@ const dateFormat: DateTimeFormatOptions = {
 };
 
 export const UserSecurityActivityDataTable = () => {
+  const { _ } = useLingui();
+
   const parser = new UAParser();
 
   const pathname = usePathname();
@@ -63,12 +67,12 @@ export const UserSecurityActivityDataTable = () => {
     <DataTable
       columns={[
         {
-          header: 'Date',
+          header: _(msg`Date`),
           accessorKey: 'createdAt',
           cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
         },
         {
-          header: 'Device',
+          header: _(msg`Device`),
           cell: ({ row }) => {
             if (!row.original.userAgent) {
               return 'N/A';
@@ -92,7 +96,7 @@ export const UserSecurityActivityDataTable = () => {
           },
         },
         {
-          header: 'Browser',
+          header: _(msg`Browser`),
           cell: ({ row }) => {
             if (!row.original.userAgent) {
               return 'N/A';
@@ -111,7 +115,7 @@ export const UserSecurityActivityDataTable = () => {
           cell: ({ row }) => row.original.ipAddress ?? 'N/A',
         },
         {
-          header: 'Action',
+          header: _(msg`Action`),
           accessorKey: 'type',
           cell: ({ row }) => USER_SECURITY_AUDIT_LOG_MAP[row.original.type],
         },

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

@@ -1,6 +1,10 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -17,6 +21,9 @@ export const metadata: Metadata = {
 };
 
 export default async function SecuritySettingsPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
   const { user } = await getRequiredServerComponentSession();
 
   const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
@@ -24,8 +31,8 @@ export default async function SecuritySettingsPage() {
   return (
     <div>
       <SettingsHeader
-        title="Security"
+        title={_(msg`Security`)}
-        subtitle="Here you can manage your password and security settings."
+        subtitle={_(msg`Here you can manage your password and security settings.`)}
       />
 
       {user.identityProvider === 'DOCUMENSO' && (
@@ -41,13 +48,22 @@ export default async function SecuritySettingsPage() {
         variant="neutral"
       >
         <div className="mb-4 sm:mb-0">
-          <AlertTitle>Two factor authentication</AlertTitle>
+          <AlertTitle>
+            <Trans>Two factor authentication</Trans>
+          </AlertTitle>
 
           <AlertDescription className="mr-4">
-            Add an authenticator to serve as a secondary authentication method{' '}
+            {user.identityProvider === 'DOCUMENSO' ? (
-            {user.identityProvider === 'DOCUMENSO'
+              <Trans>
-              ? 'when signing in, or when signing documents.'
+                Add an authenticator to serve as a secondary authentication method when signing in,
-              : 'for signing documents.'}
+                or when signing documents.
+              </Trans>
+            ) : (
+              <Trans>
+                Add an authenticator to serve as a secondary authentication method for signing
+                documents.
+              </Trans>
+            )}
           </AlertDescription>
         </div>
 
@@ -64,11 +80,15 @@ export default async function SecuritySettingsPage() {
           variant="neutral"
         >
           <div className="mb-4 sm:mb-0">
-            <AlertTitle>Recovery codes</AlertTitle>
+            <AlertTitle>
+              <Trans>Recovery codes</Trans>
+            </AlertTitle>
 
             <AlertDescription className="mr-4">
-              Two factor authentication recovery codes are used to access your account in the event
+              <Trans>
-              that you lose access to your authenticator app.
+                Two factor authentication recovery codes are used to access your account in the
+                event that you lose access to your authenticator app.
+              </Trans>
             </AlertDescription>
           </div>
 
@@ -82,15 +102,21 @@ export default async function SecuritySettingsPage() {
           variant="neutral"
         >
           <div className="mb-4 sm:mb-0">
-            <AlertTitle>Passkeys</AlertTitle>
+            <AlertTitle>
+              <Trans>Passkeys</Trans>
+            </AlertTitle>
 
             <AlertDescription className="mr-4">
+              <Trans>
                 Allows authenticating using biometrics, password managers, hardware keys, etc.
+              </Trans>
             </AlertDescription>
           </div>
 
           <Button asChild variant="outline" className="bg-background">
-            <Link href="/settings/security/passkeys">Manage passkeys</Link>
+            <Link href="/settings/security/passkeys">
+              <Trans>Manage passkeys</Trans>
+            </Link>
           </Button>
         </Alert>
       )}
@@ -100,15 +126,19 @@ export default async function SecuritySettingsPage() {
         variant="neutral"
       >
         <div className="mb-4 mr-4 sm:mb-0">
-          <AlertTitle>Recent activity</AlertTitle>
+          <AlertTitle>
+            <Trans>Recent activity</Trans>
+          </AlertTitle>
 
           <AlertDescription className="mr-2">
-            View all recent security activity related to your account.
+            <Trans>View all recent security activity related to your account.</Trans>
           </AlertDescription>
         </div>
 
         <Button asChild variant="outline" className="bg-background">
-          <Link href="/settings/security/activity">View activity</Link>
+          <Link href="/settings/security/activity">
+            <Trans>View activity</Trans>
+          </Link>
         </Button>
       </Alert>
     </div>

apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { startRegistration } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
@@ -53,6 +55,7 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
   const [open, setOpen] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const form = useForm<TCreatePasskeyFormSchema>({
@@ -81,7 +84,7 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
       });
 
       toast({
-        description: 'Successfully created passkey',
+        description: _(msg`Successfully created passkey`),
         duration: 5000,
       });
 
@@ -140,17 +143,22 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
         {trigger ?? (
           <Button variant="secondary" loading={isLoading}>
             <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />
-            Add passkey
+            <Trans>Add passkey</Trans>
           </Button>
         )}
       </DialogTrigger>
 
       <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>Add passkey</DialogTitle>
+          <DialogTitle>
+            <Trans>Add passkey</Trans>
+          </DialogTitle>
 
           <DialogDescription className="mt-4">
-            Passkeys allow you to sign in and authenticate using biometrics, password managers, etc.
+            <Trans>
+              Passkeys allow you to sign in and authenticate using biometrics, password managers,
+              etc.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -165,7 +173,9 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
                 name="passkeyName"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel required>Passkey name</FormLabel>
+                    <FormLabel required>
+                      <Trans>Passkey name</Trans>
+                    </FormLabel>
                     <FormControl>
                       <Input className="bg-background" placeholder="eg. Mac" {...field} />
                     </FormControl>
@@ -176,13 +186,17 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
 
               <Alert variant="neutral">
                 <AlertDescription>
+                  <Trans>
                     When you click continue, you will be prompted to add the first available
                     authenticator on your system.
+                  </Trans>
                 </AlertDescription>
 
                 <AlertDescription className="mt-2">
-                  If you do not want to use the authenticator prompted, you can close it, which will
+                  <Trans>
-                  then display the next available authenticator.
+                    If you do not want to use the authenticator prompted, you can close it, which
+                    will then display the next available authenticator.
+                  </Trans>
                 </AlertDescription>
               </Alert>
 
@@ -190,30 +204,40 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
                 <Alert variant="destructive">
                   {match(formError)
                     .with('ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED', () => (
-                      <AlertDescription>This passkey has already been registered.</AlertDescription>
+                      <AlertDescription>
+                        <Trans>This passkey has already been registered.</Trans>
+                      </AlertDescription>
                     ))
                     .with('TOO_MANY_PASSKEYS', () => (
                       <AlertDescription>
-                        You cannot have more than {MAXIMUM_PASSKEYS} passkeys.
+                        <Trans>You cannot have more than {MAXIMUM_PASSKEYS} passkeys.</Trans>
                       </AlertDescription>
                     ))
                     .with('InvalidStateError', () => (
                       <>
                         <AlertTitle className="text-sm">
+                          <Trans>
                             Passkey creation cancelled due to one of the following reasons:
+                          </Trans>
                         </AlertTitle>
                         <AlertDescription>
                           <ul className="mt-1 list-inside list-disc">
-                            <li>Cancelled by user</li>
+                            <li>
-                            <li>Passkey already exists for the provided authenticator</li>
+                              <Trans>Cancelled by user</Trans>
-                            <li>Exceeded timeout</li>
+                            </li>
+                            <li>
+                              <Trans>Passkey already exists for the provided authenticator</Trans>
+                            </li>
+                            <li>
+                              <Trans>Exceeded timeout</Trans>
+                            </li>
                           </ul>
                         </AlertDescription>
                       </>
                     ))
                     .otherwise(() => (
                       <AlertDescription>
-                        Something went wrong. Please try again or contact support.
+                        <Trans>Something went wrong. Please try again or contact support.</Trans>
                       </AlertDescription>
                     ))}
                 </Alert>
@@ -221,11 +245,11 @@ export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePass
 
               <DialogFooter>
                 <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                  Cancel
+                  <Trans>Cancel</Trans>
                 </Button>
 
                 <Button type="submit" loading={form.formState.isSubmitting}>
-                  Continue
+                  <Trans>Continue</Trans>
                 </Button>
               </DialogFooter>
             </fieldset>

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

@@ -1,6 +1,10 @@
 import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
@@ -13,6 +17,9 @@ export const metadata: Metadata = {
 };
 
 export default async function SettingsManagePasskeysPage() {
+  setupI18nSSR();
+
+  const { _ } = useLingui();
   const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
 
   if (!isPasskeyEnabled) {
@@ -21,7 +28,11 @@ export default async function SettingsManagePasskeysPage() {
 
   return (
     <div>
-      <SettingsHeader title="Passkeys" subtitle="Manage your passkeys." hideDivider={true}>
+      <SettingsHeader
+        title={_(msg`Passkeys`)}
+        subtitle={_(msg`Manage your passkeys.`)}
+        hideDivider={true}
+      >
         <CreatePasskeyDialog />
       </SettingsHeader>
 

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -45,6 +47,7 @@ export const UserPasskeysDataTableActions = ({
   passkeyId,
   passkeyName,
 }: UserPasskeysDataTableActionsProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -61,15 +64,16 @@ export const UserPasskeysDataTableActions = ({
     trpc.auth.updatePasskey.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Passkey has been updated',
+          description: _(msg`Passkey has been updated`),
         });
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
-          description:
+          description: _(
-            'We are unable to update this passkey at the moment. Please try again later.',
+            msg`We are unable to update this passkey at the moment. Please try again later.`,
+          ),
           duration: 10000,
           variant: 'destructive',
         });
@@ -80,15 +84,16 @@ export const UserPasskeysDataTableActions = ({
     trpc.auth.deletePasskey.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Passkey has been removed',
+          description: _(msg`Passkey has been removed`),
         });
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
-          description:
+          description: _(
-            'We are unable to remove this passkey at the moment. Please try again later.',
+            msg`We are unable to remove this passkey at the moment. Please try again later.`,
+          ),
           duration: 10000,
           variant: 'destructive',
         });
@@ -102,15 +107,21 @@ export const UserPasskeysDataTableActions = ({
         onOpenChange={(value) => !isUpdatingPasskey && setIsUpdateDialogOpen(value)}
       >
         <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
-          <Button variant="outline">Edit</Button>
+          <Button variant="outline">
+            <Trans>Edit</Trans>
+          </Button>
         </DialogTrigger>
 
         <DialogContent position="center">
           <DialogHeader>
-            <DialogTitle>Update passkey</DialogTitle>
+            <DialogTitle>
+              <Trans>Update passkey</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
+              <Trans>
                 You are currently updating the <strong>{passkeyName}</strong> passkey.
+              </Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -129,7 +140,9 @@ export const UserPasskeysDataTableActions = ({
                   name="name"
                   render={({ field }) => (
                     <FormItem className="w-full">
-                      <FormLabel required>Name</FormLabel>
+                      <FormLabel required>
+                        <Trans>Name</Trans>
+                      </FormLabel>
                       <FormControl>
                         <Input {...field} />
                       </FormControl>
@@ -141,12 +154,12 @@ export const UserPasskeysDataTableActions = ({
                 <DialogFooter className="mt-4">
                   <DialogClose asChild>
                     <Button type="button" variant="secondary">
-                      Cancel
+                      <Trans>Cancel</Trans>
                     </Button>
                   </DialogClose>
 
                   <Button type="submit" loading={isUpdatingPasskey}>
-                    Update
+                    <Trans>Update</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>
@@ -160,15 +173,21 @@ export const UserPasskeysDataTableActions = ({
         onOpenChange={(value) => !isDeletingPasskey && setIsDeleteDialogOpen(value)}
       >
         <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
-          <Button variant="destructive">Delete</Button>
+          <Button variant="destructive">
+            <Trans>Delete</Trans>
+          </Button>
         </DialogTrigger>
 
         <DialogContent position="center">
           <DialogHeader>
-            <DialogTitle>Delete passkey</DialogTitle>
+            <DialogTitle>
+              <Trans>Delete passkey</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
+              <Trans>
                 Are you sure you want to remove the <strong>{passkeyName}</strong> passkey.
+              </Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -176,7 +195,7 @@ export const UserPasskeysDataTableActions = ({
             <DialogFooter>
               <DialogClose asChild>
                 <Button type="button" variant="secondary">
-                  Cancel
+                  <Trans>Cancel</Trans>
                 </Button>
               </DialogClose>
 
@@ -189,7 +208,7 @@ export const UserPasskeysDataTableActions = ({
                 variant="destructive"
                 loading={isDeletingPasskey}
               >
-                Delete
+                <Trans>Delete</Trans>
               </Button>
             </DialogFooter>
           </fieldset>

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx

@@ -2,6 +2,8 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
@@ -15,6 +17,8 @@ import { TableCell } from '@documenso/ui/primitives/table';
 import { UserPasskeysDataTableActions } from './user-passkeys-data-table-actions';
 
 export const UserPasskeysDataTable = () => {
+  const { _ } = useLingui();
+
   const pathname = usePathname();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -52,22 +56,22 @@ export const UserPasskeysDataTable = () => {
     <DataTable
       columns={[
         {
-          header: 'Name',
+          header: _(msg`Name`),
           accessorKey: 'name',
         },
         {
-          header: 'Created',
+          header: _(msg`Created`),
           accessorKey: 'createdAt',
           cell: ({ row }) => DateTime.fromJSDate(row.original.createdAt).toRelative(),
         },
 
         {
-          header: 'Last used',
+          header: _(msg`Last used`),
           accessorKey: 'updatedAt',
           cell: ({ row }) =>
             row.original.lastUsedAt
               ? DateTime.fromJSDate(row.original.lastUsedAt).toRelative()
-              : 'Never',
+              : msg`Never`,
         },
         {
           id: 'actions',

apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -9,6 +12,7 @@ export type AcceptTeamInvitationButtonProps = {
 };
 
 export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButtonProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const {
@@ -18,17 +22,17 @@ export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButto
   } = trpc.team.acceptTeamInvitation.useMutation({
     onSuccess: () => {
       toast({
-        title: 'Success',
+        title: _(msg`Success`),
-        description: 'Accepted team invitation',
+        description: _(msg`Accepted team invitation`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to join this team at this time.`),
         variant: 'destructive',
         duration: 10000,
-        description: 'Unable to join this team at this time.',
       });
     },
   });
@@ -39,7 +43,7 @@ export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButto
       loading={isLoading}
       disabled={isLoading || isSuccess}
     >
-      Accept
+      <Trans>Accept</Trans>
     </Button>
   );
 };

apps/web/src/app/(dashboard)/settings/teams/decline-team-invitation-button.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -9,6 +12,7 @@ export type DeclineTeamInvitationButtonProps = {
 };
 
 export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationButtonProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const {
@@ -18,17 +22,17 @@ export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationBut
   } = trpc.team.declineTeamInvitation.useMutation({
     onSuccess: () => {
       toast({
-        title: 'Success',
+        title: _(msg`Success`),
-        description: 'Declined team invitation',
+        description: _(msg`Declined team invitation`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to decline this team invitation at this time.`),
         variant: 'destructive',
         duration: 10000,
-        description: 'Unable to decline this team invitation at this time.',
       });
     },
   });
@@ -40,7 +44,7 @@ export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationBut
       disabled={isLoading || isSuccess}
       variant="ghost"
     >
-      Decline
+      <Trans>Decline</Trans>
     </Button>
   );
 };

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { AnimatePresence } from 'framer-motion';
 
 import { trpc } from '@documenso/trpc/react';
@@ -13,11 +15,16 @@ import { TeamEmailUsage } from './team-email-usage';
 import { TeamInvitations } from './team-invitations';
 
 export default function TeamsSettingsPage() {
+  const { _ } = useLingui();
+
   const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
 
   return (
     <div>
-      <SettingsHeader title="Teams" subtitle="Manage all teams you are currently associated with.">
+      <SettingsHeader
+        title={_(msg`Teams`)}
+        subtitle={_(msg`Manage all teams you are currently associated with.`)}
+      >
         <CreateTeamDialog />
       </SettingsHeader>
 

apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import type { TeamEmail } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -24,24 +27,26 @@ export type TeamEmailUsageProps = {
 export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
   const [open, setOpen] = useState(false);
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
     trpc.team.deleteTeamEmail.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'You have successfully revoked access.',
+          description: _(msg`You have successfully revoked access.`),
           duration: 5000,
         });
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
+          description: _(
+            msg`We encountered an unknown error while attempting to revoke access. Please try again or contact support.`,
+          ),
           variant: 'destructive',
           duration: 10000,
-          description:
-            'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
         });
       },
     });
@@ -49,43 +54,59 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
   return (
     <Alert variant="neutral" className="flex flex-row items-center justify-between p-6">
       <div>
-        <AlertTitle className="mb-0">Team Email</AlertTitle>
+        <AlertTitle className="mb-0">
+          <Trans>Team Email</Trans>
+        </AlertTitle>
         <AlertDescription>
           <p>
+            <Trans>
               Your email is currently being used by team{' '}
               <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
               ).
+            </Trans>
           </p>
 
-          <p className="mt-1">They have permission on your behalf to:</p>
+          <p className="mt-1">
+            <Trans>They have permission on your behalf to:</Trans>
+          </p>
 
           <ul className="mt-0.5 list-inside list-disc">
-            <li>Display your name and email in documents</li>
+            <li>
-            <li>View all documents sent to your account</li>
+              <Trans>Display your name and email in documents</Trans>
+            </li>
+            <li>
+              <Trans>View all documents sent to your account</Trans>
+            </li>
           </ul>
         </AlertDescription>
       </div>
 
       <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
         <DialogTrigger asChild>
-          <Button variant="destructive">Revoke access</Button>
+          <Button variant="destructive">
+            <Trans>Revoke access</Trans>
+          </Button>
         </DialogTrigger>
 
         <DialogContent position="center">
           <DialogHeader>
-            <DialogTitle>Are you sure?</DialogTitle>
+            <DialogTitle>
+              <Trans>Are you sure?</Trans>
+            </DialogTitle>
 
             <DialogDescription className="mt-4">
+              <Trans>
                 You are about to revoke access for team{' '}
-              <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}) to
+                <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url})
-              use your email.
+                to use your email.
+              </Trans>
             </DialogDescription>
           </DialogHeader>
 
           <fieldset disabled={isDeletingTeamEmail}>
             <DialogFooter>
               <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-                Cancel
+                <Trans>Cancel</Trans>
               </Button>
 
               <Button
@@ -94,7 +115,7 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
                 loading={isDeletingTeamEmail}
                 onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
               >
-                Revoke
+                <Trans>Revoke</Trans>
               </Button>
             </DialogFooter>
           </fieldset>

apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Plural, Trans } from '@lingui/macro';
 import { AnimatePresence } from 'framer-motion';
 import { BellIcon } from 'lucide-react';
 
@@ -33,23 +34,48 @@ export const TeamInvitations = () => {
               <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
 
               <AlertDescription className="mr-2">
-                You have <strong>{data.length}</strong> pending team invitation
+                <Plural
-                {data.length > 1 ? 's' : ''}.
+                  value={data.length}
+                  one={
+                    <span>
+                      You have <strong>1</strong> pending team invitation
+                    </span>
+                  }
+                  other={
+                    <span>
+                      You have <strong>#</strong> pending team invitations
+                    </span>
+                  }
+                />
               </AlertDescription>
 
               <Dialog>
                 <DialogTrigger asChild>
                   <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
-                    View invites
+                    <Trans>View invites</Trans>
                   </button>
                 </DialogTrigger>
 
                 <DialogContent position="center">
                   <DialogHeader>
-                    <DialogTitle>Pending invitations</DialogTitle>
+                    <DialogTitle>
+                      <Trans>Pending invitations</Trans>
+                    </DialogTitle>
 
                     <DialogDescription className="mt-4">
-                      You have {data.length} pending team invitation{data.length > 1 ? 's' : ''}.
+                      <Plural
+                        value={data.length}
+                        one={
+                          <span>
+                            You have <strong>1</strong> pending team invitation
+                          </span>
+                        }
+                        other={
+                          <span>
+                            You have <strong>#</strong> pending team invitations
+                          </span>
+                        }
+                      />
                     </DialogDescription>
                   </DialogHeader>
 

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

@@ -1,5 +1,7 @@
+import { Trans } from '@lingui/macro';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
 import { Button } from '@documenso/ui/primitives/button';
@@ -9,15 +11,20 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 import { ApiTokenForm } from '~/components/forms/token';
 
 export default async function ApiTokensPage() {
+  setupI18nSSR();
+
   const { user } = await getRequiredServerComponentSession();
 
   const tokens = await getUserTokens({ userId: user.id });
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">API Tokens</h3>
+      <h3 className="text-2xl font-semibold">
+        <Trans>API Tokens</Trans>
+      </h3>
 
       <p className="text-muted-foreground mt-2 text-sm">
+        <Trans>
           On this page, you can create new API tokens and manage the existing ones. <br />
           Also see our{' '}
           <a
@@ -28,6 +35,7 @@ export default async function ApiTokensPage() {
             Documentation
           </a>
           .
+        </Trans>
       </p>
 
       <hr className="my-4" />
@@ -36,12 +44,14 @@ export default async function ApiTokensPage() {
 
       <hr className="mb-4 mt-8" />
 
-      <h4 className="text-xl font-medium">Your existing tokens</h4>
+      <h4 className="text-xl font-medium">
+        <Trans>Your existing tokens</Trans>
+      </h4>
 
       {tokens.length === 0 && (
         <div className="mb-4">
           <p className="text-muted-foreground mt-2 text-sm italic">
-            Your tokens will be shown here once you create them.
+            <Trans>Your tokens will be shown here once you create them.</Trans>
           </p>
         </div>
       )}
@@ -55,22 +65,30 @@ export default async function ApiTokensPage() {
                   <h5 className="text-base">{token.name}</h5>
 
                   <p className="text-muted-foreground mt-2 text-xs">
-                    Created on <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                    <Trans>
+                      Created on{' '}
+                      <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                    </Trans>
                   </p>
                   {token.expires ? (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      Expires on <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                      <Trans>
+                        Expires on{' '}
+                        <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                      </Trans>
                     </p>
                   ) : (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      Token doesn't have an expiration date
+                      <Trans>Token doesn't have an expiration date</Trans>
                     </p>
                   )}
                 </div>
 
                 <div>
                   <DeleteTokenDialog token={token}>
-                    <Button variant="destructive">Delete</Button>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
                   </DeleteTokenDialog>
                 </div>
               </div>

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

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
@@ -38,6 +40,7 @@ export type WebhookPageOptions = {
 };
 
 export default function WebhookPage({ params }: WebhookPageOptions) {
+  const { _ } = useLingui();
   const { toast } = useToast();
   const router = useRouter();
 
@@ -68,16 +71,18 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
       });
 
       toast({
-        title: 'Webhook updated',
+        title: _(msg`Webhook updated`),
-        description: 'The webhook has been updated successfully.',
+        description: _(msg`The webhook has been updated successfully.`),
         duration: 5000,
       });
 
       router.refresh();
     } catch (err) {
       toast({
-        title: 'Failed to update webhook',
+        title: _(msg`Failed to update webhook`),
-        description: 'We encountered an error while updating the webhook. Please try again later.',
+        description: _(
+          msg`We encountered an error while updating the webhook. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -86,8 +91,8 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
   return (
     <div>
       <SettingsHeader
-        title="Edit webhook"
+        title={_(msg`Edit webhook`)}
-        subtitle="On this page, you can edit the webhook and its settings."
+        subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
       />
 
       {isLoading && (
@@ -108,13 +113,15 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                 name="webhookUrl"
                 render={({ field }) => (
                   <FormItem className="flex-1">
-                    <FormLabel required>Webhook URL</FormLabel>
+                    <FormLabel required>
+                      <Trans>Webhook URL</Trans>
+                    </FormLabel>
                     <FormControl>
                       <Input className="bg-background" {...field} />
                     </FormControl>
 
                     <FormDescription>
-                      The URL for Documenso to send webhook events to.
+                      <Trans>The URL for Documenso to send webhook events to.</Trans>
                     </FormDescription>
 
                     <FormMessage />
@@ -127,7 +134,9 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                 name="enabled"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Enabled</FormLabel>
+                    <FormLabel>
+                      <Trans>Enabled</Trans>
+                    </FormLabel>
 
                     <div>
                       <FormControl>
@@ -150,7 +159,9 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
               name="eventTriggers"
               render={({ field: { onChange, value } }) => (
                 <FormItem className="flex flex-col gap-2">
-                  <FormLabel required>Triggers</FormLabel>
+                  <FormLabel required>
+                    <Trans>Triggers</Trans>
+                  </FormLabel>
                   <FormControl>
                     <TriggerMultiSelectCombobox
                       listValues={value}
@@ -161,7 +172,7 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                   </FormControl>
 
                   <FormDescription>
-                    The events that will trigger a webhook to be sent to your URL.
+                    <Trans> The events that will trigger a webhook to be sent to your URL.</Trans>
                   </FormDescription>
 
                   <FormMessage />
@@ -174,14 +185,18 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
               name="secret"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Secret</FormLabel>
+                  <FormLabel>
+                    <Trans>Secret</Trans>
+                  </FormLabel>
                   <FormControl>
                     <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
                   </FormControl>
 
                   <FormDescription>
+                    <Trans>
                       A secret that will be sent to your URL so you can verify that the request has
                       been sent by Documenso.
+                    </Trans>
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -190,7 +205,7 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
 
             <div className="mt-4">
               <Button type="submit" loading={form.formState.isSubmitting}>
-                Update webhook
+                <Trans>Update webhook</Trans>
               </Button>
             </div>
           </fieldset>

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

@@ -2,6 +2,8 @@
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 import { DateTime } from 'luxon';
 
@@ -17,13 +19,15 @@ import { DeleteWebhookDialog } from '~/components/(dashboard)/settings/webhooks/
 import { LocaleDate } from '~/components/formatter/locale-date';
 
 export default function WebhookPage() {
+  const { _ } = useLingui();
+
   const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
 
   return (
     <div>
       <SettingsHeader
-        title="Webhooks"
+        title={_(msg`Webhooks`)}
-        subtitle="On this page, you can create new Webhooks and manage the existing ones."
+        subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
       >
         <CreateWebhookDialog />
       </SettingsHeader>
@@ -38,7 +42,9 @@ export default function WebhookPage() {
         // TODO: Perhaps add some illustrations here to make the page more engaging
         <div className="mb-4">
           <p className="text-muted-foreground mt-2 text-sm italic">
+            <Trans>
               You have no webhooks yet. Your webhooks will be shown here once you create them.
+            </Trans>
           </p>
         </div>
       )}
@@ -66,29 +72,37 @@ export default function WebhookPage() {
                     </h5>
 
                     <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
-                      {webhook.enabled ? 'Enabled' : 'Disabled'}
+                      {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
                     </Badge>
                   </div>
 
                   <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>
                       Listening to{' '}
                       {webhook.eventTriggers
                         .map((trigger) => toFriendlyWebhookEventName(trigger))
                         .join(', ')}
+                    </Trans>
                   </p>
 
                   <p className="text-muted-foreground mt-2 text-xs">
+                    <Trans>
                       Created on{' '}
                       <LocaleDate date={webhook.createdAt} format={DateTime.DATETIME_FULL} />
+                    </Trans>
                   </p>
                 </div>
 
                 <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
                   <Button asChild variant="outline">
-                    <Link href={`/settings/webhooks/${webhook.id}`}>Edit</Link>
+                    <Link href={`/settings/webhooks/${webhook.id}`}>
+                      <Trans>Edit</Trans>
+                    </Link>
                   </Button>
                   <DeleteWebhookDialog webhook={webhook}>
-                    <Button variant="destructive">Delete</Button>
+                    <Button variant="destructive">
+                      <Trans>Delete</Trans>
+                    </Button>
                   </DeleteWebhookDialog>
                 </div>
               </div>

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

@@ -4,6 +4,9 @@ import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import {
   DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
   SKIP_QUERY_BATCH_META,
@@ -42,7 +45,9 @@ export const EditTemplateForm = ({
   isEnterprise,
   templateRootPath,
 }: EditTemplateFormProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
+
   const router = useRouter();
 
   const team = useOptionalCurrentTeam();
@@ -68,18 +73,18 @@ export const EditTemplateForm = ({
 
   const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
     settings: {
-      title: 'General',
+      title: msg`General`,
-      description: 'Configure general settings for the template.',
+      description: msg`Configure general settings for the template.`,
       stepIndex: 1,
     },
     signers: {
-      title: 'Add Placeholders',
+      title: msg`Add Placeholders`,
-      description: 'Add all relevant placeholders for each recipient.',
+      description: msg`Add all relevant placeholders for each recipient.`,
       stepIndex: 2,
     },
     fields: {
-      title: 'Add Fields',
+      title: msg`Add Fields`,
-      description: 'Add all relevant fields for each recipient.',
+      description: msg`Add all relevant fields for each recipient.`,
       stepIndex: 3,
     },
   };
@@ -144,8 +149,8 @@ export const EditTemplateForm = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while updating the document settings.',
+        description: _(msg`An error occurred while updating the document settings.`),
         variant: 'destructive',
       });
     }
@@ -167,8 +172,8 @@ export const EditTemplateForm = ({
       setStep('fields');
     } catch (err) {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding signers.',
+        description: _(msg`An error occurred while adding signers.`),
         variant: 'destructive',
       });
     }
@@ -190,8 +195,8 @@ export const EditTemplateForm = ({
       }
 
       toast({
-        title: 'Template saved',
+        title: _(msg`Template saved`),
-        description: 'Your templates has been saved successfully.',
+        description: _(msg`Your templates has been saved successfully.`),
         duration: 5000,
       });
 
@@ -201,8 +206,8 @@ export const EditTemplateForm = ({
       router.push(templateRootPath);
     } catch (err) {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while adding signers.',
+        description: _(msg`An error occurred while adding signers.`),
         variant: 'destructive',
       });
     }

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

@@ -1,10 +1,14 @@
 import React from 'react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import type { TemplatePageViewProps } from './template-page-view';
 import { TemplatePageView } from './template-page-view';
 
 type TemplatePageProps = Pick<TemplatePageViewProps, 'params'>;
 
 export default function TemplatePage({ params }: TemplatePageProps) {
+  setupI18nSSR();
+
   return <TemplatePageView params={params} />;
 }

apps/web/src/app/(dashboard)/templates/[id]/template-direct-link-dialog-wrapper.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 
+import { Trans } from '@lingui/macro';
 import { LinkIcon } from 'lucide-react';
 
 import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
@@ -27,7 +28,12 @@ export const TemplateDirectLinkDialogWrapper = ({ template }: TemplatePageViewPr
         }}
       >
         <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
-        {template.directLink ? 'Manage' : 'Create'} Direct Link
+
+        {template.directLink ? (
+          <Trans>Manage Direct Link</Trans>
+        ) : (
+          <Trans>Create Direct Link</Trans>
+        )}
       </Button>
 
       <TemplateDirectLinkDialog

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

@@ -3,6 +3,7 @@ import React from 'react';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
@@ -56,7 +57,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
         <div>
           <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
             <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-            Templates
+            <Trans>Templates</Trans>
           </Link>
 
           <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>

apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -58,7 +59,7 @@ export const DataTableActionDropdown = ({
         <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
           <Link href={`${templateRootPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
-            Edit
+            <Trans>Edit</Trans>
           </Link>
         </DropdownMenuItem>
 
@@ -67,18 +68,18 @@ export const DataTableActionDropdown = ({
           onClick={() => setDuplicateDialogOpen(true)}
         >
           <Copy className="mr-2 h-4 w-4" />
-          Duplicate
+          <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
         <DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
           <Share2Icon className="mr-2 h-4 w-4" />
-          Direct link
+          <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
         {!teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
-            Move to Team
+            <Trans>Move to Team</Trans>
           </DropdownMenuItem>
         )}
 
@@ -87,7 +88,7 @@ export const DataTableActionDropdown = ({
           onClick={() => setDeleteDialogOpen(true)}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          <Trans>Delete</Trans>
         </DropdownMenuItem>
       </DropdownMenuContent>
 

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -4,6 +4,8 @@ import { useTransition } from 'react';
 
 import Link from 'next/link';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from 'lucide-react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -45,6 +47,7 @@ export const TemplatesDataTable = ({
 
   const updateSearchParams = useUpdateSearchParams();
 
+  const { _ } = useLingui();
   const { remaining } = useLimits();
 
   const onPaginationChange = (page: number, perPage: number) => {
@@ -61,12 +64,16 @@ export const TemplatesDataTable = ({
       {remaining.documents === 0 && (
         <Alert variant="warning" className="mb-4">
           <AlertTriangle className="h-4 w-4" />
-          <AlertTitle>Document Limit Exceeded!</AlertTitle>
+          <AlertTitle>
+            <Trans>Document Limit Exceeded!</Trans>
+          </AlertTitle>
           <AlertDescription className="mt-2">
+            <Trans>
               You have reached your document limit.{' '}
               <Link className="underline underline-offset-4" href="/settings/billing">
                 Upgrade your account to continue!
               </Link>
+            </Trans>
           </AlertDescription>
         </Alert>
       )}
@@ -74,18 +81,18 @@ export const TemplatesDataTable = ({
       <DataTable
         columns={[
           {
-            header: 'Created',
+            header: _(msg`Created`),
             accessorKey: 'createdAt',
             cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
           },
           {
-            header: 'Title',
+            header: _(msg`Title`),
             cell: ({ row }) => <DataTableTitle row={row.original} />,
           },
           {
             header: () => (
               <div className="flex flex-row items-center">
-                Type
+                <Trans>Type</Trans>
                 <Tooltip>
                   <TooltipTrigger>
                     <InfoIcon className="mx-2 h-4 w-4" />
@@ -96,36 +103,45 @@ export const TemplatesDataTable = ({
                       <li>
                         <h2 className="mb-2 flex flex-row items-center font-semibold">
                           <Globe2Icon className="mr-2 h-5 w-5 text-green-500 dark:text-green-300" />
-                          Public
+                          <Trans>Public</Trans>
                         </h2>
 
                         <p>
+                          <Trans>
                             Public templates are connected to your public profile. Any modifications
                             to public templates will also appear in your public profile.
+                          </Trans>
                         </p>
                       </li>
                       <li>
                         <div className="mb-2 flex w-fit flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600">
                           <Link2Icon className="mr-1 h-3 w-3" />
-                          direct link
+                          <Trans>direct link</Trans>
                         </div>
 
                         <p>
+                          <Trans>
                             Direct link templates contain one dynamic recipient placeholder. Anyone
-                          with access to this link can sign the document, and it will then appear on
+                            with access to this link can sign the document, and it will then appear
-                          your documents page.
+                            on your documents page.
+                          </Trans>
                         </p>
                       </li>
                       <li>
                         <h2 className="mb-2 flex flex-row items-center font-semibold">
                           <LockIcon className="mr-2 h-5 w-5 text-blue-600 dark:text-blue-300" />
-                          {teamId ? 'Team Only' : 'Private'}
+                          {teamId ? <Trans>Team Only</Trans> : <Trans>Private</Trans>}
                         </h2>
 
                         <p>
-                          {teamId
+                          {teamId ? (
-                            ? 'Team only templates are not linked anywhere and are visible only to your team.'
+                            <Trans>
-                            : 'Private templates can only be modified and viewed by you.'}
+                              Team only templates are not linked anywhere and are visible only to
+                              your team.
+                            </Trans>
+                          ) : (
+                            <Trans>Private templates can only be modified and viewed by you.</Trans>
+                          )}
                         </p>
                       </li>
                     </ul>
@@ -149,7 +165,7 @@ export const TemplatesDataTable = ({
             ),
           },
           {
-            header: 'Actions',
+            header: _(msg`Actions`),
             accessorKey: 'actions',
             cell: ({ row }) => {
               return (

apps/web/src/app/(dashboard)/templates/delete-template-dialog.tsx

@@ -1,5 +1,8 @@
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -27,6 +30,7 @@ export const DeleteTemplateDialog = ({
 }: DeleteTemplateDialogProps) => {
   const router = useRouter();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTemplate, isLoading } = trpcReact.template.deleteTemplate.useMutation({
@@ -34,8 +38,8 @@ export const DeleteTemplateDialog = ({
       router.refresh();
 
       toast({
-        title: 'Template deleted',
+        title: _(msg`Template deleted`),
-        description: 'Your template has been successfully deleted.',
+        description: _(msg`Your template has been successfully deleted.`),
         duration: 5000,
       });
 
@@ -43,8 +47,8 @@ export const DeleteTemplateDialog = ({
     },
     onError: () => {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'This template could not be deleted at this time. Please try again.',
+        description: _(msg`This template could not be deleted at this time. Please try again.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -55,11 +59,15 @@ export const DeleteTemplateDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Do you want to delete this template?</DialogTitle>
+          <DialogTitle>
+            <Trans>Do you want to delete this template?</Trans>
+          </DialogTitle>
 
           <DialogDescription>
+            <Trans>
               Please note that this action is irreversible. Once confirmed, your template will be
               permanently deleted.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -70,7 +78,7 @@ export const DeleteTemplateDialog = ({
             disabled={isLoading}
             onClick={() => onOpenChange(false)}
           >
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
 
           <Button
@@ -79,7 +87,7 @@ export const DeleteTemplateDialog = ({
             loading={isLoading}
             onClick={async () => deleteTemplate({ id, teamId })}
           >
-            Delete
+            <Trans>Delete</Trans>
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/duplicate-template-dialog.tsx

@@ -1,5 +1,8 @@
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -27,6 +30,7 @@ export const DuplicateTemplateDialog = ({
 }: DuplicateTemplateDialogProps) => {
   const router = useRouter();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: duplicateTemplate, isLoading } =
@@ -35,8 +39,8 @@ export const DuplicateTemplateDialog = ({
         router.refresh();
 
         toast({
-          title: 'Template duplicated',
+          title: _(msg`Template duplicated`),
-          description: 'Your template has been duplicated successfully.',
+          description: _(msg`Your template has been duplicated successfully.`),
           duration: 5000,
         });
 
@@ -44,8 +48,8 @@ export const DuplicateTemplateDialog = ({
       },
       onError: () => {
         toast({
-          title: 'Error',
+          title: _(msg`Error`),
-          description: 'An error occurred while duplicating template.',
+          description: _(msg`An error occurred while duplicating template.`),
           variant: 'destructive',
         });
       },
@@ -55,9 +59,13 @@ export const DuplicateTemplateDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Do you want to duplicate this template?</DialogTitle>
+          <DialogTitle>
+            <Trans>Do you want to duplicate this template?</Trans>
+          </DialogTitle>
 
-          <DialogDescription className="pt-2">Your template will be duplicated.</DialogDescription>
+          <DialogDescription className="pt-2">
+            <Trans>Your template will be duplicated.</Trans>
+          </DialogDescription>
         </DialogHeader>
 
         <DialogFooter>
@@ -67,7 +75,7 @@ export const DuplicateTemplateDialog = ({
             variant="secondary"
             onClick={() => onOpenChange(false)}
           >
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
 
           <Button
@@ -80,7 +88,7 @@ export const DuplicateTemplateDialog = ({
               })
             }
           >
-            Duplicate
+            <Trans>Duplicate</Trans>
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/empty-state.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro';
 import { Bird } from 'lucide-react';
 
 export const EmptyTemplateState = () => {
@@ -6,10 +7,14 @@ export const EmptyTemplateState = () => {
       <Bird className="h-12 w-12" strokeWidth={1.5} />
 
       <div className="text-center">
-        <h3 className="text-lg font-semibold">We're all empty</h3>
+        <h3 className="text-lg font-semibold">
+          <Trans>We're all empty</Trans>
+        </h3>
 
         <p className="mt-2 max-w-[50ch]">
+          <Trans>
             You have not yet created any templates. To create a template please upload one.
+          </Trans>
         </p>
       </div>
     </div>

apps/web/src/app/(dashboard)/templates/move-template-dialog.tsx

@@ -2,6 +2,9 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -31,7 +34,10 @@ type MoveTemplateDialogProps = {
 
 export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTemplateDialogProps) => {
   const router = useRouter();
+
   const { toast } = useToast();
+  const { _ } = useLingui();
+
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
   const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
@@ -39,16 +45,16 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
     onSuccess: () => {
       router.refresh();
       toast({
-        title: 'Template moved',
+        title: _(msg`Template moved`),
-        description: 'The template has been successfully moved to the selected team.',
+        description: _(msg`The template has been successfully moved to the selected team.`),
         duration: 5000,
       });
       onOpenChange(false);
     },
     onError: (error) => {
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: error.message || 'An error occurred while moving the template.',
+        description: error.message || _(msg`An error occurred while moving the template.`),
         variant: 'destructive',
         duration: 7500,
       });
@@ -67,20 +73,22 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Move Template to Team</DialogTitle>
+          <DialogTitle>
+            <Trans>Move Template to Team</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Select a team to move this template to. This action cannot be undone.
+            <Trans>Select a team to move this template to. This action cannot be undone.</Trans>
           </DialogDescription>
         </DialogHeader>
 
         <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
           <SelectTrigger>
-            <SelectValue placeholder="Select a team" />
+            <SelectValue placeholder={_(msg`Select a team`)} />
           </SelectTrigger>
           <SelectContent>
             {isLoadingTeams ? (
               <SelectItem value="loading" disabled>
-                Loading teams...
+                <Trans>Loading teams...</Trans>
               </SelectItem>
             ) : (
               teams?.map((team) => (
@@ -108,10 +116,10 @@ export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTempl
 
         <DialogFooter>
           <Button variant="secondary" onClick={() => onOpenChange(false)}>
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
           <Button onClick={onMove} loading={isLoading} disabled={!selectedTeamId || isLoading}>
-            {isLoading ? 'Moving...' : 'Move'}
+            {isLoading ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -4,6 +4,8 @@ import React, { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { FilePlus, Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -34,6 +36,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
   const { data: session } = useSession();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
@@ -61,9 +64,10 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       });
 
       toast({
-        title: 'Template document uploaded',
+        title: _(msg`Template document uploaded`),
-        description:
+        description: _(
-          'Your document has been uploaded successfully. You will be redirected to the template page.',
+          msg`Your document has been uploaded successfully. You will be redirected to the template page.`,
+        ),
         duration: 5000,
       });
 
@@ -72,8 +76,8 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       router.push(`${templateRootPath}/${id}`);
     } catch {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Please try again later.',
+        description: _(msg`Please try again later.`),
         variant: 'destructive',
       });
 
@@ -89,15 +93,20 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       <DialogTrigger asChild>
         <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
           <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-          New Template
+          <Trans>New Template</Trans>
         </Button>
       </DialogTrigger>
 
       <DialogContent className="w-full max-w-xl">
         <DialogHeader>
-          <DialogTitle>New Template</DialogTitle>
+          <DialogTitle>
+            <Trans>New Template</Trans>
+          </DialogTitle>
           <DialogDescription>
-            Templates allow you to quickly generate documents with pre-filled recipients and fields.
+            <Trans>
+              Templates allow you to quickly generate documents with pre-filled recipients and
+              fields.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -114,7 +123,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
         <DialogFooter>
           <DialogClose asChild>
             <Button type="button" variant="secondary" disabled={isUploadingFile}>
-              Close
+              <Trans>Close</Trans>
             </Button>
           </DialogClose>
         </DialogFooter>

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { Metadata } from 'next';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
 import { TemplatesPageView } from './templates-page-view';
 import type { TemplatesPageViewProps } from './templates-page-view';
 
@@ -14,5 +16,7 @@ export const metadata: Metadata = {
 };
 
 export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  setupI18nSSR();
+
   return <TemplatesPageView searchParams={searchParams} />;
 }

apps/web/src/app/(dashboard)/templates/template-direct-link-badge.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Link2Icon } from 'lucide-react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
@@ -19,13 +21,15 @@ export const TemplateDirectLinkBadge = ({
   className,
 }: TemplateDirectLinkBadgeProps) => {
   const [, copy] = useCopyToClipboard();
+
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const onCopyClick = async (token: string) =>
     copy(formatDirectTemplatePath(token)).then(() => {
       toast({
-        title: 'Copied to clipboard',
+        title: _(msg`Copied to clipboard`),
-        description: 'The direct link has been copied to your clipboard',
+        description: _(msg`The direct link has been copied to your clipboard`),
       });
     });
 
@@ -39,7 +43,7 @@ export const TemplateDirectLinkBadge = ({
       onClick={async () => onCopyClick(token)}
     >
       <Link2Icon className="mr-1 h-3 w-3" />
-      direct link {!enabled && 'disabled'}
+      {enabled ? <Trans>direct link</Trans> : <Trans>direct link disabled</Trans>}
     </button>
   );
 };

apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx

@@ -3,16 +3,16 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
-import {
+import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
-  DIRECT_TEMPLATE_DOCUMENTATION,
-  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
-} from '@documenso/lib/constants/template';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import {
   type Recipient,
@@ -66,6 +66,7 @@ export const TemplateDirectLinkDialog = ({
 }: TemplateDirectLinkDialogProps) => {
   const { toast } = useToast();
   const { quota, remaining } = useLimits();
+  const { _ } = useLingui();
 
   const team = useOptionalCurrentTeam();
 
@@ -100,8 +101,8 @@ export const TemplateDirectLinkDialog = ({
       setSelectedRecipientId(null);
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'Unable to create direct template access. Please try again later.',
+        description: _(msg`Unable to create direct template access. Please try again later.`),
         variant: 'destructive',
       });
     },
@@ -110,17 +111,21 @@ export const TemplateDirectLinkDialog = ({
   const { mutateAsync: toggleTemplateDirectLink, isLoading: isTogglingTemplateAccess } =
     trpcReact.template.toggleTemplateDirectLink.useMutation({
       onSuccess: (data) => {
+        const enabledDescription = msg`Direct link signing has been enabled`;
+        const disabledDescription = msg`Direct link signing has been disabled`;
+
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: `Direct link signing has been ${data.enabled ? 'enabled' : 'disabled'}`,
+          description: _(data.enabled ? enabledDescription : disabledDescription),
         });
       },
       onError: (_ctx, data) => {
+        const enabledDescription = msg`An error occurred while enabling direct link signing.`;
+        const disabledDescription = msg`An error occurred while disabling direct link signing.`;
+
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
-          description: `An error occurred while ${
+          description: _(data.enabled ? enabledDescription : disabledDescription),
-            data.enabled ? 'enabling' : 'disabling'
-          } direct link signing.`,
           variant: 'destructive',
         });
       },
@@ -133,8 +138,8 @@ export const TemplateDirectLinkDialog = ({
         setToken(null);
 
         toast({
-          title: 'Success',
+          title: _(msg`Success`),
-          description: 'Direct template link deleted',
+          description: _(msg`Direct template link deleted`),
           duration: 5000,
         });
 
@@ -143,9 +148,10 @@ export const TemplateDirectLinkDialog = ({
       },
       onError: () => {
         toast({
-          title: 'Something went wrong',
+          title: _(msg`Something went wrong`),
-          description:
+          description: _(
-            'We encountered an error while removing the direct template link. Please try again later.',
+            msg`We encountered an error while removing the direct template link. Please try again later.`,
+          ),
           variant: 'destructive',
         });
       },
@@ -154,8 +160,8 @@ export const TemplateDirectLinkDialog = ({
   const onCopyClick = async (token: string) =>
     copy(formatDirectTemplatePath(token)).then(() => {
       toast({
-        title: 'Copied to clipboard',
+        title: _(msg`Copied to clipboard`),
-        description: 'The direct link has been copied to your clipboard',
+        description: _(msg`The direct link has been copied to your clipboard`),
       });
     });
 
@@ -192,9 +198,13 @@ export const TemplateDirectLinkDialog = ({
             .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
               <DialogContent>
                 <DialogHeader>
-                  <DialogTitle>Create Direct Signing Link</DialogTitle>
+                  <DialogTitle>
+                    <Trans>Create Direct Signing Link</Trans>
+                  </DialogTitle>
 
-                  <DialogDescription>Here's how it works:</DialogDescription>
+                  <DialogDescription>
+                    <Trans>Here's how it works:</Trans>
+                  </DialogDescription>
                 </DialogHeader>
 
                 <ul className="mt-4 space-y-4 pl-12">
@@ -206,8 +216,8 @@ export const TemplateDirectLinkDialog = ({
                         </div>
                       </div>
 
-                      <h3 className="font-semibold">{step.title}</h3>
+                      <h3 className="font-semibold">{_(step.title)}</h3>
-                      <p className="text-muted-foreground mt-1 text-sm">{step.description}</p>
+                      <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
                     </li>
                   ))}
                 </ul>
@@ -215,10 +225,13 @@ export const TemplateDirectLinkDialog = ({
                 {remaining.directTemplates === 0 && (
                   <Alert variant="warning">
                     <AlertTitle>
+                      <Trans>
                         Direct template link usage exceeded ({quota.directTemplates}/
                         {quota.directTemplates})
+                      </Trans>
                     </AlertTitle>
                     <AlertDescription>
+                      <Trans>
                         You have reached the maximum limit of {quota.directTemplates} direct
                         templates.{' '}
                         <Link
@@ -227,6 +240,7 @@ export const TemplateDirectLinkDialog = ({
                         >
                           Upgrade your account to continue!
                         </Link>
+                      </Trans>
                     </AlertDescription>
                   </Alert>
                 )}
@@ -234,7 +248,7 @@ export const TemplateDirectLinkDialog = ({
                 {remaining.directTemplates !== 0 && (
                   <DialogFooter className="mx-auto mt-4">
                     <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
-                      Enable direct link signing
+                      <Trans> Enable direct link signing</Trans>
                     </Button>
                   </DialogFooter>
                 )}
@@ -249,10 +263,12 @@ export const TemplateDirectLinkDialog = ({
                 )}
 
                 <DialogHeader>
-                  <DialogTitle>Choose Direct Link Recipient</DialogTitle>
+                  <DialogTitle>
+                    <Trans>Choose Direct Link Recipient</Trans>
+                  </DialogTitle>
 
                   <DialogDescription>
-                    Choose an existing recipient from below to continue
+                    <Trans>Choose an existing recipient from below to continue</Trans>
                   </DialogDescription>
                 </DialogHeader>
 
@@ -260,8 +276,12 @@ export const TemplateDirectLinkDialog = ({
                   <Table>
                     <TableHeader>
                       <TableRow>
-                        <TableHead>Recipient</TableHead>
+                        <TableHead>
-                        <TableHead>Role</TableHead>
+                          <Trans>Recipient</Trans>
+                        </TableHead>
+                        <TableHead>
+                          <Trans>Role</Trans>
+                        </TableHead>
                         <TableHead></TableHead>
                       </TableRow>
                     </TableHeader>
@@ -269,7 +289,9 @@ export const TemplateDirectLinkDialog = ({
                       {validDirectTemplateRecipients.length === 0 && (
                         <TableRow>
                           <TableCell colSpan={3} className="h-16 text-center">
-                            <p className="text-muted-foreground">No valid recipients found</p>
+                            <p className="text-muted-foreground">
+                              <Trans>No valid recipients found</Trans>
+                            </p>
                           </TableCell>
                         </TableRow>
                       )}
@@ -288,7 +310,7 @@ export const TemplateDirectLinkDialog = ({
                           </TableCell>
 
                           <TableCell className="text-muted-foreground text-sm">
-                            {RECIPIENT_ROLES_DESCRIPTION[row.role].roleName}
+                            {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
                           </TableCell>
 
                           <TableCell>
@@ -311,7 +333,9 @@ export const TemplateDirectLinkDialog = ({
                   <DialogFooter className="mx-auto">
                     <div className="flex flex-col items-center justify-center">
                       {validDirectTemplateRecipients.length !== 0 && (
-                        <p className="text-muted-foreground text-sm">Or</p>
+                        <p className="text-muted-foreground text-sm">
+                          <Trans>Or</Trans>
+                        </p>
                       )}
 
                       <Button
@@ -325,7 +349,7 @@ export const TemplateDirectLinkDialog = ({
                           })
                         }
                       >
-                        Create one automatically
+                        <Trans>Create one automatically</Trans>
                       </Button>
                     </div>
                   </DialogFooter>
@@ -335,23 +359,28 @@ export const TemplateDirectLinkDialog = ({
             .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
               <DialogContent className="relative">
                 <DialogHeader>
-                  <DialogTitle>Direct Link Signing</DialogTitle>
+                  <DialogTitle>
+                    <Trans>Direct Link Signing</Trans>
+                  </DialogTitle>
 
                   <DialogDescription>
-                    Manage the direct link signing for this template
+                    <Trans>Manage the direct link signing for this template</Trans>
                   </DialogDescription>
                 </DialogHeader>
 
                 <div>
                   <div className="flex flex-row items-center justify-between">
                     <Label className="flex flex-row">
-                      Enable Direct Link Signing
+                      <Trans>Enable Direct Link Signing</Trans>
                       <Tooltip>
                         <TooltipTrigger tabIndex={-1} className="ml-2">
                           <InfoIcon className="h-4 w-4" />
                         </TooltipTrigger>
                         <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                          Disabling direct link signing will prevent anyone from accessing the link.
+                          <Trans>
+                            Disabling direct link signing will prevent anyone from accessing the
+                            link.
+                          </Trans>
                         </TooltipContent>
                       </Tooltip>
                     </Label>
@@ -364,7 +393,9 @@ export const TemplateDirectLinkDialog = ({
                   </div>
 
                   <div className="mt-2">
-                    <Label htmlFor="copy-direct-link">Copy Shareable Link</Label>
+                    <Label htmlFor="copy-direct-link">
+                      <Trans>Copy Shareable Link</Trans>
+                    </Label>
 
                     <div className="relative mt-1">
                       <Input
@@ -397,7 +428,7 @@ export const TemplateDirectLinkDialog = ({
                     loading={isDeletingTemplateDirectLink}
                     onClick={() => setCurrentStep('CONFIRM_DELETE')}
                   >
-                    Remove
+                    <Trans>Remove</Trans>
                   </Button>
 
                   <Button
@@ -410,7 +441,7 @@ export const TemplateDirectLinkDialog = ({
                       })
                     }
                   >
-                    Save
+                    <Trans>Save</Trans>
                   </Button>
                 </DialogFooter>
               </DialogContent>
@@ -418,11 +449,15 @@ export const TemplateDirectLinkDialog = ({
             .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
               <DialogContent className="relative">
                 <DialogHeader>
-                  <DialogTitle>Are you sure?</DialogTitle>
+                  <DialogTitle>
+                    <Trans>Are you sure?</Trans>
+                  </DialogTitle>
 
                   <DialogDescription>
+                    <Trans>
                       Please note that proceeding will remove direct linking recipient and turn it
                       into a placeholder.
+                    </Trans>
                   </DialogDescription>
                 </DialogHeader>
 
@@ -432,7 +467,7 @@ export const TemplateDirectLinkDialog = ({
                     variant="secondary"
                     onClick={() => setCurrentStep('MANAGE')}
                   >
-                    Cancel
+                    <Trans>Cancel</Trans>
                   </Button>
 
                   <Button
@@ -441,7 +476,7 @@ export const TemplateDirectLinkDialog = ({
                     loading={isDeletingTemplateDirectLink}
                     onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
                   >
-                    Confirm
+                    <Trans>Confirm</Trans>
                   </Button>
                 </DialogFooter>
               </DialogContent>

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Trans } from '@lingui/macro';
+
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
@@ -49,7 +51,9 @@ export const TemplatesPageView = async ({ searchParams = {}, team }: TemplatesPa
             </Avatar>
           )}
 
-          <h1 className="truncate text-2xl font-semibold md:text-3xl">Templates</h1>
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
         </div>
 
         <div>

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -3,6 +3,8 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { InfoIcon, Plus } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';
@@ -94,7 +96,9 @@ export function UseTemplateDialog({
   templateId,
 }: UseTemplateDialogProps) {
   const router = useRouter();
+
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const [open, setOpen] = useState(false);
 
@@ -135,8 +139,8 @@ export function UseTemplateDialog({
       });
 
       toast({
-        title: 'Document created',
+        title: _(msg`Document created`),
-        description: 'Your document has been created from the template successfully.',
+        description: _(msg`Your document has been created from the template successfully.`),
         duration: 5000,
       });
 
@@ -145,13 +149,15 @@ export function UseTemplateDialog({
       const error = AppError.parseError(err);
 
       const toastPayload: Toast = {
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while creating document from template.',
+        description: _(msg`An error occurred while creating document from template.`),
         variant: 'destructive',
       };
 
       if (error.code === 'DOCUMENT_SEND_FAILED') {
-        toastPayload.description = 'The document was created but could not be sent to recipients.';
+        toastPayload.description = _(
+          msg`The document was created but could not be sent to recipients.`,
+        );
       }
 
       toast(toastPayload);
@@ -174,16 +180,20 @@ export function UseTemplateDialog({
       <DialogTrigger asChild>
         <Button variant="outline" className="bg-background">
           <Plus className="-ml-1 mr-2 h-4 w-4" />
-          Use Template
+          <Trans>Use Template</Trans>
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Create document from template</DialogTitle>
+          <DialogTitle>
+            <Trans>Create document from template</Trans>
+          </DialogTitle>
           <DialogDescription>
-            {recipients.length === 0
+            {recipients.length === 0 ? (
-              ? 'A draft document will be created'
+              <Trans>A draft document will be created</Trans>
-              : 'Add the recipients to create the document with'}
+            ) : (
+              <Trans>Add the recipients to create the document with</Trans>
+            )}
           </DialogDescription>
         </DialogHeader>
 
@@ -198,10 +208,17 @@ export function UseTemplateDialog({
                       name={`recipients.${index}.email`}
                       render={({ field }) => (
                         <FormItem className="w-full">
-                          {index === 0 && <FormLabel required>Email</FormLabel>}
+                          {index === 0 && (
+                            <FormLabel required>
+                              <Trans>Email</Trans>
+                            </FormLabel>
+                          )}
 
                           <FormControl>
-                            <Input {...field} placeholder={recipients[index].email || 'Email'} />
+                            <Input
+                              {...field}
+                              placeholder={recipients[index].email || _(msg`Email`)}
+                            />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -213,10 +230,17 @@ export function UseTemplateDialog({
                       name={`recipients.${index}.name`}
                       render={({ field }) => (
                         <FormItem className="w-full">
-                          {index === 0 && <FormLabel>Name</FormLabel>}
+                          {index === 0 && (
+                            <FormLabel>
+                              <Trans>Name</Trans>
+                            </FormLabel>
+                          )}
 
                           <FormControl>
-                            <Input {...field} placeholder={recipients[index].name || 'Name'} />
+                            <Input
+                              {...field}
+                              placeholder={recipients[index].name || _(msg`Name`)}
+                            />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -246,7 +270,7 @@ export function UseTemplateDialog({
                             className="text-muted-foreground ml-2 flex items-center text-sm"
                             htmlFor="sendDocument"
                           >
-                            Send document
+                            <Trans>Send document</Trans>
                             <Tooltip>
                               <TooltipTrigger type="button">
                                 <InfoIcon className="mx-1 h-4 w-4" />
@@ -254,11 +278,16 @@ export function UseTemplateDialog({
 
                               <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
                                 <p>
+                                  <Trans>
+                                    {' '}
                                     The document will be immediately sent to recipients if this is
                                     checked.
+                                  </Trans>
                                 </p>
 
-                                <p>Otherwise, the document will be created as a draft.</p>
+                                <p>
+                                  <Trans>Otherwise, the document will be created as a draft.</Trans>
+                                </p>
                               </TooltipContent>
                             </Tooltip>
                           </label>
@@ -272,12 +301,16 @@ export function UseTemplateDialog({
               <DialogFooter>
                 <DialogClose asChild>
                   <Button type="button" variant="secondary">
-                    Close
+                    <Trans>Close</Trans>
                   </Button>
                 </DialogClose>
 
                 <Button type="submit" loading={form.formState.isSubmitting}>
-                  {form.getValues('sendDocument') ? 'Create and send' : 'Create as draft'}
+                  {form.getValues('sendDocument') ? (
+                    <Trans>Create and send</Trans>
+                  ) : (
+                    <Trans>Create as draft</Trans>
+                  )}
                 </Button>
               </DialogFooter>
             </fieldset>

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import { redirect } from 'next/navigation';
 
-import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
@@ -20,6 +21,8 @@ type AuditLogProps = {
 };
 
 export default async function AuditLog({ searchParams }: AuditLogProps) {
+  setupI18nSSR();
+
   const { d } = searchParams;
 
   if (typeof d !== 'string' || !d) {
@@ -113,7 +116,7 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
               {document.Recipient.map((recipient) => (
                 <li key={recipient.id}>
                   <span className="text-muted-foreground">
-                    [{RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}]
+                    [{RECIPIENT_ROLES_DESCRIPTION_ENG[recipient.role].roleName}]
                   </span>{' '}
                   {recipient.name} ({recipient.email})
                 </li>

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx

@@ -5,9 +5,10 @@ import { redirect } from 'next/navigation';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import {
-  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLES_DESCRIPTION_ENG,
-  RECIPIENT_ROLE_SIGNING_REASONS,
+  RECIPIENT_ROLE_SIGNING_REASONS_ENG,
 } from '@documenso/lib/constants/recipient-roles';
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
@@ -35,11 +36,13 @@ type SigningCertificateProps = {
 };
 
 const FRIENDLY_SIGNING_REASONS = {
-  ['__OWNER__']: 'I am the owner of this document',
+  ['__OWNER__']: `I am the owner of this document`,
-  ...RECIPIENT_ROLE_SIGNING_REASONS,
+  ...RECIPIENT_ROLE_SIGNING_REASONS_ENG,
 };
 
 export default async function SigningCertificate({ searchParams }: SigningCertificateProps) {
+  setupI18nSSR();
+
   const { d } = searchParams;
 
   if (typeof d !== 'string' || !d) {
@@ -172,7 +175,7 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
                       <div className="hyphens-auto break-words font-medium">{recipient.name}</div>
                       <div className="break-all">{recipient.email}</div>
                       <p className="text-muted-foreground mt-2 text-sm print:text-xs">
-                        {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                        {RECIPIENT_ROLES_DESCRIPTION_ENG[recipient.role].roleName}
                       </p>
 
                       <p className="text-muted-foreground mt-2 text-sm print:text-xs">

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
@@ -13,6 +14,8 @@ type PublicProfileLayoutProps = {
 };
 
 export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
+  setupI18nSSR();
+
   const { user, session } = await getServerComponentSession();
 
   // I wouldn't typically do this but it's better than the `let` statement

apps/web/src/app/(profile)/p/[url]/not-found.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 
 import { Button } from '@documenso/ui/primitives/button';
@@ -10,19 +11,23 @@ export default function NotFound() {
   return (
     <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
       <div>
-        <p className="text-muted-foreground font-semibold">404 Profile not found</p>
+        <p className="text-muted-foreground font-semibold">
+          <Trans>404 Profile not found</Trans>
+        </p>
 
-        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">
+          <Trans>Oops! Something went wrong.</Trans>
+        </h1>
 
         <p className="text-muted-foreground mt-4 text-sm">
-          The profile you are looking for could not be found.
+          <Trans>The profile you are looking for could not be found.</Trans>
         </p>
 
         <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
           <Button asChild className="w-32">
             <Link href="/">
               <ChevronLeft className="mr-2 h-4 w-4" />
-              Go Back
+              <Trans>Go Back</Trans>
             </Link>
           </Button>
         </div>

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

@@ -2,9 +2,11 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, redirect } from 'next/navigation';
 
+import { Trans } from '@lingui/macro';
 import { FileIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
@@ -40,6 +42,8 @@ const BADGE_DATA = {
 };
 
 export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
+  setupI18nSSR();
+
   const { url: profileUrl } = params;
 
   if (!profileUrl) {
@@ -102,7 +106,9 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
                     {BADGE_DATA[publicProfile.badge.type].name}
                   </p>
                   <p className="text-muted-foreground mt-0.5 text-sm">
+                    <Trans>
                       Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                    </Trans>
                   </p>
                 </div>
               </TooltipContent>
@@ -125,20 +131,26 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
       {templates.length === 0 && (
         <div className="mt-4 w-full max-w-xl border-t pt-4">
           <p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
-            It looks like {publicProfile.name} hasn't added any documents to their profile yet.{' '}
+            <Trans>
+              It looks like {publicProfile.name} hasn't added any documents to their profile yet.
+            </Trans>{' '}
             {!user?.id && (
               <span className="mt-2 inline-block">
+                <Trans>
                   While waiting for them to do so you can create your own Documenso account and get
                   started with document signing right away.
+                </Trans>
               </span>
             )}
             {'userId' in profile && user?.id === profile.userId && (
               <span className="mt-2 inline-block">
+                <Trans>
                   Go to your{' '}
                   <Link href="/settings/public-profile" className="underline">
                     public profile settings
                   </Link>{' '}
                   to add documents.
+                </Trans>
               </span>
             )}
           </p>
@@ -151,7 +163,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
             <TableHeader>
               <TableRow>
                 <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
-                  Documents
+                  <Trans>Documents</Trans>
                 </TableHead>
               </TableRow>
             </TableHeader>
@@ -177,7 +189,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
 
                         <Button asChild className="w-20">
                           <Link href={formatDirectTemplatePath(template.directLink.token)}>
-                            Sign
+                            <Trans>Sign</Trans>
                           </Link>
                         </Button>
                       </div>

apps/web/src/app/(profile)/profile-header.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
 import { PlusIcon } from 'lucide-react';
 
 import LogoIcon from '@documenso/assets/logo_icon.png';
@@ -63,9 +64,11 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
 
         <div className="flex flex-row items-center justify-center">
           <p className="text-muted-foreground mr-4">
-            <span className="text-sm sm:hidden">Want your own public profile?</span>
+            <span className="text-sm sm:hidden">
+              <Trans>Want your own public profile?</Trans>
+            </span>
             <span className="hidden text-sm sm:block">
-              Like to have your own public profile with agreements?
+              <Trans>Like to have your own public profile with agreements?</Trans>
             </span>
           </p>
 
@@ -73,10 +76,12 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
             <Link href="/signup">
               <div className="hidden flex-row items-center sm:flex">
                 <PlusIcon className="mr-1 h-5 w-5" />
-                Create now
+                <Trans>Create now</Trans>
               </div>
 
-              <span className="sm:hidden">Create</span>
+              <span className="sm:hidden">
+                <Trans>Create</Trans>
+              </span>
             </Link>
           </Button>
         </div>

apps/web/src/app/(recipient)/d/[token]/configure-direct-template.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -52,9 +54,11 @@ export const ConfigureDirectTemplateFormPartial = ({
   initialEmail,
   onSubmit,
 }: ConfigureDirectTemplateFormProps) => {
+  const { _ } = useLingui();
+  const { data: session } = useSession();
+
   const { Recipient } = template;
   const { derivedRecipientAccessAuth } = useRequiredDocumentAuthContext();
-  const { data: session } = useSession();
 
   const recipientsWithBlankDirectRecipientEmail = Recipient.map((recipient) => {
     if (recipient.id === directTemplateRecipient.id) {
@@ -110,7 +114,9 @@ export const ConfigureDirectTemplateFormPartial = ({
               name="email"
               render={({ field, fieldState }) => (
                 <FormItem>
-                  <FormLabel required>Email</FormLabel>
+                  <FormLabel required>
+                    <Trans>Email</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Input
@@ -126,7 +132,7 @@ export const ConfigureDirectTemplateFormPartial = ({
 
                   {!fieldState.error && (
                     <p className="text-muted-foreground text-xs">
-                      Enter your email address to receive the completed document.
+                      <Trans>Enter your email address to receive the completed document.</Trans>
                     </p>
                   )}
 
@@ -139,11 +145,7 @@ export const ConfigureDirectTemplateFormPartial = ({
       </DocumentFlowFormContainerContent>
 
       <DocumentFlowFormContainerFooter>
-        <DocumentFlowFormContainerStep
+        <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
-          title={flowStep.title}
-          step={currentStep}
-          maxStep={totalSteps}
-        />
 
         <DocumentFlowFormContainerActions
           loading={form.formState.isSubmitting}

apps/web/src/app/(recipient)/d/[token]/direct-template.tsx

@@ -4,7 +4,10 @@ import { useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
-import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import type { Field } from '@documenso/prisma/client';
 import { type Recipient } from '@documenso/prisma/client';
 import type { TemplateWithDetails } from '@documenso/prisma/types/template';
@@ -41,6 +44,7 @@ export const DirectTemplatePageView = ({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { email, fullName, setEmail } = useRequiredSigningContext();
@@ -49,17 +53,18 @@ export const DirectTemplatePageView = ({
   const [step, setStep] = useState<DirectTemplateStep>('configure');
   const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
 
-  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role];
+  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION_ENG[directTemplateRecipient.role];
 
   const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
     configure: {
-      title: 'General',
+      title: msg`General`,
-      description: 'Preview and configure template.',
+      description: msg`Preview and configure template.`,
       stepIndex: 1,
     },
     sign: {
-      title: `${recipientRoleDescription.actionVerb} document`,
+      // Todo: Translations
-      description: `${recipientRoleDescription.actionVerb} the document to complete the process.`,
+      title: msg`${recipientRoleDescription.actionVerb} document`,
+      description: msg`${recipientRoleDescription.actionVerb} the document to complete the process.`,
       stepIndex: 2,
     },
   };
@@ -109,8 +114,10 @@ export const DirectTemplatePageView = ({
       redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${token}/complete`);
     } catch (err) {
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
-        description: 'We were unable to submit this document at this time. Please try again later.',
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
         variant: 'destructive',
       });