Merge branch 'main' into staging

.github/workflows/translations-upload.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.ref }}
+          token: ${{ secrets.GH_PAT }}
 
       - uses: ./.github/actions/node-install
 

apps/marketing/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.7.2-rc.1",
+  "version": "1.7.2-rc.3",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
     "dev": "next dev -p 3001",
-    "build": "turbo run translate:extract && turbo run translate:compile && next build",
+    "build": "npm run translate:extract --prefix ../../ && turbo run translate:compile && next build",
     "start": "next start -p 3001",
     "lint": "next lint",
     "lint:fix": "next lint --fix",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/marketing/src/app/layout.tsx

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

apps/web/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@documenso/web",
-  "version": "1.7.2-rc.1",
+  "version": "1.7.2-rc.3",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
     "dev": "next dev -p 3000",
-    "build": "turbo run translate:extract && turbo run translate:compile && next build",
+    "build": "npm run translate:extract --prefix ../../ && turbo run translate:compile && next build",
     "start": "next start",
     "lint": "next lint",
     "e2e:prepare": "next build && next start",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -87,7 +87,7 @@ export const DeleteDocumentDialog = ({
 
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
-    setIsDeleteEnabled(event.target.value === 'delete');
+    setIsDeleteEnabled(event.target.value === _(msg`delete`));
   };
 
   return (

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

@@ -117,10 +117,10 @@ export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocum
 
         <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)/documents/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@lingui/macro';
+import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -77,7 +77,7 @@ export const ConfigureDirectTemplateFormPartial = ({
         if (template.Recipient.map((recipient) => recipient.email).includes(items.email)) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            message: 'Email cannot already exist in the template',
+            message: _(msg`Email cannot already exist in the template`),
             path: ['email'],
           });
         }

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

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

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

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

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

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

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

@@ -40,7 +40,7 @@ export type CompletedSigningPageProps = {
 export default async function CompletedSigningPage({
   params: { token },
 }: CompletedSigningPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   const { _ } = useLingui();
 
@@ -222,7 +222,7 @@ export default async function CompletedSigningPage({
           )}
 
           {isLoggedIn && (
-            <Link href="/documents" className="text-documenso-700 hover:text-documenso-600">
+            <Link href="/documents" className="text-documenso-700 hover:text-documenso-600 mt-2">
               <Trans>Go Back Home</Trans>
             </Link>
           )}

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

@@ -124,9 +124,9 @@ export const SigningForm = ({
       >
         <div className={cn('flex flex-1 flex-col')}>
           <h3 className="text-foreground text-2xl font-semibold">
-            {recipient.role === RecipientRole.VIEWER && 'View Document'}
+            {recipient.role === RecipientRole.VIEWER && <Trans>View Document</Trans>}
-            {recipient.role === RecipientRole.SIGNER && 'Sign Document'}
+            {recipient.role === RecipientRole.SIGNER && <Trans>Sign Document</Trans>}
-            {recipient.role === RecipientRole.APPROVER && 'Approve Document'}
+            {recipient.role === RecipientRole.APPROVER && <Trans>Approve Document</Trans>}
           </h3>
 
           {recipient.role === RecipientRole.VIEWER ? (
@@ -166,7 +166,7 @@ export const SigningForm = ({
           ) : (
             <>
               <p className="text-muted-foreground mt-2 text-sm">
-                Please review the document before signing.
+                <Trans>Please review the document before signing.</Trans>
               </p>
 
               <hr className="border-border mb-8 mt-4" />
@@ -174,7 +174,9 @@ export const SigningForm = ({
               <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
                 <div className="flex flex-1 flex-col gap-y-4">
                   <div>
-                    <Label htmlFor="full-name">Full Name</Label>
+                    <Label htmlFor="full-name">
+                      <Trans>Full Name</Trans>
+                    </Label>
 
                     <Input
                       type="text"
@@ -186,7 +188,9 @@ export const SigningForm = ({
                   </div>
 
                   <div>
-                    <Label htmlFor="Signature">Signature</Label>
+                    <Label htmlFor="Signature">
+                      <Trans>Signature</Trans>
+                    </Label>
 
                     <Card className="mt-2" gradient degrees={-120}>
                       <CardContent className="p-0">
@@ -213,7 +217,7 @@ export const SigningForm = ({
                     disabled={typeof window !== 'undefined' && window.history.length <= 1}
                     onClick={() => router.back()}
                   >
-                    Cancel
+                    <Trans>Cancel</Trans>
                   </Button>
 
                   <SignDialog

apps/web/src/app/(signing)/sign/[token]/initials-field.tsx

@@ -4,6 +4,8 @@ import { useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Loader } from 'lucide-react';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -37,6 +39,7 @@ export const InitialsField = ({
 }: InitialsFieldProps) => {
   const router = useRouter();
   const { toast } = useToast();
+  const { _ } = useLingui();
 
   const { fullName } = useRequiredSigningContext();
   const initials = extractInitials(fullName);
@@ -83,8 +86,8 @@ export const InitialsField = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while signing the document.',
+        description: _(msg`An error occurred while signing the document.`),
         variant: 'destructive',
       });
     }
@@ -109,8 +112,8 @@ export const InitialsField = ({
       console.error(err);
 
       toast({
-        title: 'Error',
+        title: _(msg`Error`),
-        description: 'An error occurred while removing the signature.',
+        description: _(msg`An error occurred while removing the field.`),
         variant: 'destructive',
       });
     }
@@ -126,7 +129,7 @@ export const InitialsField = ({
 
       {!field.inserted && (
         <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
-          Initials
+          <Trans>Initials</Trans>
         </p>
       )}
 

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

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

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

@@ -31,7 +31,7 @@ export type SigningPageProps = {
 };
 
 export default async function SigningPage({ params: { token } }: SigningPageProps) {
-  setupI18nSSR();
+  await setupI18nSSR();
 
   if (!token) {
     return notFound();
@@ -43,12 +43,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
 
-  const isRecipientsTurn = await getIsRecipientsTurnToSign({ token });
-
-  if (!isRecipientsTurn) {
-    return redirect(`/sign/${token}/waiting`);
-  }
-
   const [document, fields, recipient, completedFields] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
@@ -69,6 +63,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const isRecipientsTurn = await getIsRecipientsTurnToSign({ token });
+
+  if (!isRecipientsTurn) {
+    return redirect(`/sign/${token}/waiting`);
+  }
+
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
     recipientAuth: recipient.authOptions,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -21,7 +21,7 @@ type ApiTokensPageProps = {
 };
 
 export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
-  const { i18n } = setupI18nSSR();
+  const { i18n } = await setupI18nSSR();
 
   const { teamUrl } = params;
 
@@ -97,17 +97,11 @@ export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
                   <h5 className="text-base">{token.name}</h5>
 
                   <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>
+                    <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
-                      Created on
-                      {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}
-                    </Trans>
                   </p>
                   {token.expires ? (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      <Trans>
+                      <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
-                        Expires on
-                        {i18n.date(token.expires, DateTime.DATETIME_FULL)}
-                      </Trans>
                     </p>
                   ) : (
                     <p className="text-muted-foreground mt-1 text-xs">

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

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

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

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

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

@@ -5,101 +5,156 @@ import { Trans } from '@lingui/macro';
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 import { Button } from '@documenso/ui/primitives/button';
 
-export default function SignatureDisclosure() {
+const SUPPORT_EMAIL = 'support@documenso.com';
-  setupI18nSSR();
+
+export default async function SignatureDisclosure() {
+  await setupI18nSSR();
 
   return (
     <div>
       <article className="prose dark:prose-invert">
-        <h1>Electronic Signature Disclosure</h1>
+        <h1>
+          <Trans>Electronic Signature Disclosure</Trans>
+        </h1>
 
-        <h2>Welcome</h2>
+        <h2>
+          <Trans>Welcome</Trans>
+        </h2>
         <p>
-          Thank you for using Documenso to perform your electronic document signing. The purpose of
+          <Trans>
-          this disclosure is to inform you about the process, legality, and your rights regarding
+            Thank you for using Documenso to perform your electronic document signing. The purpose
-          the use of electronic signatures on our platform. By opting to use an electronic
+            of this disclosure is to inform you about the process, legality, and your rights
-          signature, you are agreeing to the terms and conditions outlined below.
+            regarding the use of electronic signatures on our platform. By opting to use an
+            electronic signature, you are agreeing to the terms and conditions outlined below.
+          </Trans>
         </p>
 
-        <h2>Acceptance and Consent</h2>
+        <h2>
+          <Trans>Acceptance and Consent</Trans>
+        </h2>
         <p>
-          When you use our platform to affix your electronic signature to documents, you are
+          <Trans>
-          consenting to do so under the Electronic Signatures in Global and National Commerce Act
+            When you use our platform to affix your electronic signature to documents, you are
-          (E-Sign Act) and other applicable laws. This action indicates your agreement to use
+            consenting to do so under the Electronic Signatures in Global and National Commerce Act
-          electronic means to sign documents and receive notifications.
+            (E-Sign Act) and other applicable laws. This action indicates your agreement to use
+            electronic means to sign documents and receive notifications.
+          </Trans>
         </p>
 
-        <h2>Legality of Electronic Signatures</h2>
+        <h2>
+          <Trans>Legality of Electronic Signatures</Trans>
+        </h2>
         <p>
-          An electronic signature provided by you on our platform, achieved through clicking through
+          <Trans>
-          to a document and entering your name, or any other electronic signing method we provide,
+            An electronic signature provided by you on our platform, achieved through clicking
-          is legally binding. It carries the same weight and enforceability as a manual signature
+            through to a document and entering your name, or any other electronic signing method we
-          written with ink on paper.
+            provide, is legally binding. It carries the same weight and enforceability as a manual
+            signature written with ink on paper.
+          </Trans>
         </p>
 
-        <h2>System Requirements</h2>
+        <h2>
-        <p>To use our electronic signature service, you must have access to:</p>
+          <Trans>System Requirements</Trans>
+        </h2>
+        <p>
+          <Trans>To use our electronic signature service, you must have access to:</Trans>
+        </p>
         <ul>
-          <li>A stable internet connection</li>
+          <li>
-          <li>An email account</li>
+            <Trans>A stable internet connection</Trans>
-          <li>A device capable of accessing, opening, and reading documents</li>
+          </li>
-          <li>A means to print or download documents for your records</li>
+          <li>
+            <Trans>An email account</Trans>
+          </li>
+          <li>
+            <Trans>A device capable of accessing, opening, and reading documents</Trans>
+          </li>
+          <li>
+            <Trans>A means to print or download documents for your records</Trans>
+          </li>
         </ul>
 
-        <h2>Electronic Delivery of Documents</h2>
+        <h2>
+          <Trans>Electronic Delivery of Documents</Trans>
+        </h2>
         <p>
-          All documents related to the electronic signing process will be provided to you
+          <Trans>
-          electronically through our platform or via email. It is your responsibility to ensure that
+            All documents related to the electronic signing process will be provided to you
-          your email address is current and that you can receive and open our emails.
+            electronically through our platform or via email. It is your responsibility to ensure
+            that your email address is current and that you can receive and open our emails.
+          </Trans>
         </p>
 
-        <h2>Consent to Electronic Transactions</h2>
+        <h2>
+          <Trans>Consent to Electronic Transactions</Trans>
+        </h2>
         <p>
-          By using the electronic signature feature, you are consenting to conduct transactions and
+          <Trans>
-          receive disclosures electronically. You acknowledge that your electronic signature on
+            By using the electronic signature feature, you are consenting to conduct transactions
-          documents is binding and that you accept the terms outlined in the documents you are
+            and receive disclosures electronically. You acknowledge that your electronic signature
-          signing.
+            on documents is binding and that you accept the terms outlined in the documents you are
+            signing.
+          </Trans>
         </p>
 
-        <h2>Withdrawing Consent</h2>
+        <h2>
+          <Trans>Withdrawing Consent</Trans>
+        </h2>
         <p>
-          You have the right to withdraw your consent to use electronic signatures at any time
+          <Trans>
-          before completing the signing process. To withdraw your consent, please contact the sender
+            You have the right to withdraw your consent to use electronic signatures at any time
-          of the document. In failing to contact the sender you may reach out to{' '}
+            before completing the signing process. To withdraw your consent, please contact the
-          <a href="mailto:support@documenso.com">support@documenso.com</a> for assistance. Be aware
+            sender of the document. In failing to contact the sender you may reach out to{' '}
-          that withdrawing consent may delay or halt the completion of the related transaction or
+            <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> for assistance. Be aware that
-          service.
+            withdrawing consent may delay or halt the completion of the related transaction or
+            service.
+          </Trans>
         </p>
 
-        <h2>Updating Your Information</h2>
+        <h2>
+          <Trans>Updating Your Information</Trans>
+        </h2>
         <p>
-          It is crucial to keep your contact information, especially your email address, up to date
+          <Trans>
-          with us. Please notify us immediately of any changes to ensure that you continue to
+            It is crucial to keep your contact information, especially your email address, up to
-          receive all necessary communications.
+            date with us. Please notify us immediately of any changes to ensure that you continue to
+            receive all necessary communications.
+          </Trans>
         </p>
 
-        <h2>Retention of Documents</h2>
+        <h2>
+          <Trans>Retention of Documents</Trans>
+        </h2>
         <p>
-          After signing a document electronically, you will be provided the opportunity to view,
+          <Trans>
-          download, and print the document for your records. It is highly recommended that you
+            After signing a document electronically, you will be provided the opportunity to view,
-          retain a copy of all electronically signed documents for your personal records. We will
+            download, and print the document for your records. It is highly recommended that you
-          also retain a copy of the signed document for our records however we may not be able to
+            retain a copy of all electronically signed documents for your personal records. We will
-          provide you with a copy of the signed document after a certain period of time.
+            also retain a copy of the signed document for our records however we may not be able to
+            provide you with a copy of the signed document after a certain period of time.
+          </Trans>
         </p>
 
-        <h2>Acknowledgment</h2>
+        <h2>
+          <Trans>Acknowledgment</Trans>
+        </h2>
         <p>
-          By proceeding to use the electronic signature service provided by Documenso, you affirm
+          <Trans>
-          that you have read and understood this disclosure. You agree to all terms and conditions
+            By proceeding to use the electronic signature service provided by Documenso, you affirm
-          related to the use of electronic signatures and electronic transactions as outlined
+            that you have read and understood this disclosure. You agree to all terms and conditions
-          herein.
+            related to the use of electronic signatures and electronic transactions as outlined
+            herein.
+          </Trans>
         </p>
 
-        <h2>Contact Information</h2>
+        <h2>
+          <Trans>Contact Information</Trans>
+        </h2>
         <p>
-          For any questions regarding this disclosure, electronic signatures, or any related
+          <Trans>
-          process, please contact us at:{' '}
+            For any questions regarding this disclosure, electronic signatures, or any related
-          <a href="mailto:support@documenso.com">support@documenso.com</a>
+            process, please contact us at: <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>
+          </Trans>
         </p>
       </article>
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/web/src/app/embed/direct/[[...url]]/client.tsx

@@ -318,6 +318,7 @@ export const EmbedDirectTemplateClientPage = ({
 
         {/* Widget */}
         <div
+          key={isExpanded ? 'expanded' : 'collapsed'}
           className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
@@ -367,7 +368,7 @@ export const EmbedDirectTemplateClientPage = ({
                     className="bg-background mt-2"
                     disabled={isNameLocked}
                     value={fullName}
-                    onChange={(e) => !isNameLocked && setFullName(e.target.value.trim())}
+                    onChange={(e) => !isNameLocked && setFullName(e.target.value)}
                   />
                 </div>
 
@@ -394,13 +395,17 @@ export const EmbedDirectTemplateClientPage = ({
                   <Card className="mt-2" gradient degrees={-120}>
                     <CardContent className="p-0">
                       <SignaturePad
-                        key={signature}
                         className="h-44 w-full"
                         disabled={isThrottled || isSubmitting}
                         defaultValue={signature ?? undefined}
                         onChange={(value) => {
                           setSignature(value);
                         }}
+                        allowTypedSignature={Boolean(
+                          metadata &&
+                            'typedSignatureEnabled' in metadata &&
+                            metadata.typedSignatureEnabled,
+                        )}
                       />
                     </CardContent>
                   </Card>

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -198,6 +198,7 @@ export const EmbedSignDocumentClientPage = ({
 
         {/* Widget */}
         <div
+          key={isExpanded ? 'expanded' : 'collapsed'}
           className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
@@ -247,7 +248,7 @@ export const EmbedSignDocumentClientPage = ({
                     className="bg-background mt-2"
                     disabled={isNameLocked}
                     value={fullName}
-                    onChange={(e) => !isNameLocked && setFullName(e.target.value.trim())}
+                    onChange={(e) => !isNameLocked && setFullName(e.target.value)}
                   />
                 </div>
 
@@ -273,13 +274,17 @@ export const EmbedSignDocumentClientPage = ({
                   <Card className="mt-2" gradient degrees={-120}>
                     <CardContent className="p-0">
                       <SignaturePad
-                        key={signature}
                         className="h-44 w-full"
                         disabled={isThrottled || isSubmitting}
                         defaultValue={signature ?? undefined}
                         onChange={(value) => {
                           setSignature(value);
                         }}
+                        allowTypedSignature={Boolean(
+                          metadata &&
+                            'typedSignatureEnabled' in metadata &&
+                            metadata.typedSignatureEnabled,
+                        )}
                       />
                     </CardContent>
                   </Card>

apps/web/src/app/layout.tsx

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

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

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

apps/web/src/app/page.tsx

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

apps/web/src/components/(dashboard)/document-search/document-search.tsx

@@ -4,12 +4,18 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 
 export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string }) => {
+  const { _ } = useLingui();
+
   const router = useRouter();
   const searchParams = useSearchParams();
+
   const [searchTerm, setSearchTerm] = useState(initialValue);
   const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
 
@@ -33,7 +39,7 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })
   return (
     <Input
       type="search"
-      placeholder="Search documents..."
+      placeholder={_(msg`Search documents...`)}
       value={searchTerm}
       onChange={(e) => setSearchTerm(e.target.value)}
     />

apps/web/src/components/(dashboard)/settings/token/contants.ts

@@ -1,7 +1,9 @@
+import { msg } from '@lingui/macro';
+
 export const EXPIRATION_DATES = {
-  ONE_WEEK: '7 days',
+  ONE_WEEK: msg`7 days`,
-  ONE_MONTH: '1 month',
+  ONE_MONTH: msg`1 month`,
-  THREE_MONTHS: '3 months',
+  THREE_MONTHS: msg`3 months`,
-  SIX_MONTHS: '6 months',
+  SIX_MONTHS: msg`6 months`,
-  ONE_YEAR: '12 months',
+  ONE_YEAR: msg`12 months`,
 } as const;

apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx

@@ -53,7 +53,7 @@ export default function DeleteTokenDialog({
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const deleteMessage = `delete ${token.name}`;
+  const deleteMessage = _(msg`delete ${token.name}`);
 
   const ZDeleteTokenDialogSchema = z.object({
     tokenName: z.literal(deleteMessage, {

apps/web/src/components/(dashboard)/settings/webhooks/delete-webhook-dialog.tsx

@@ -51,7 +51,7 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
 
   const [open, setOpen] = useState(false);
 
-  const deleteMessage = `delete ${webhook.webhookUrl}`;
+  const deleteMessage = _(msg`delete ${webhook.webhookUrl}`);
 
   const ZDeleteWebhookFormSchema = z.object({
     webhookUrl: z.literal(deleteMessage, {

apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx

@@ -47,7 +47,7 @@ export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialog
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const deleteMessage = `delete ${teamName}`;
+  const deleteMessage = _(msg`delete ${teamName}`);
 
   const ZDeleteTeamFormSchema = z.object({
     teamName: z.literal(deleteMessage, {

apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx

@@ -73,7 +73,7 @@ export const TransferTeamDialog = ({
     teamId,
   });
 
-  const confirmTransferMessage = `transfer ${teamName}`;
+  const confirmTransferMessage = _(msg`transfer ${teamName}`);
 
   const ZTransferTeamFormSchema = z.object({
     teamName: z.literal(confirmTransferMessage, {

apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx

@@ -83,7 +83,7 @@ export const CurrentUserTeamsDataTable = () => {
         accessorKey: 'role',
         cell: ({ row }) =>
           row.original.ownerUserId === row.original.currentTeamMember.userId
-            ? 'Owner'
+            ? _(msg`Owner`)
             : _(TEAM_MEMBER_ROLE_MAP[row.original.currentTeamMember.role]),
       },
       {

apps/web/src/components/(teams)/tables/team-members-data-table.tsx

@@ -106,7 +106,7 @@ export const TeamMembersDataTable = ({
         accessorKey: 'role',
         cell: ({ row }) =>
           teamOwnerUserId === row.original.userId
-            ? 'Owner'
+            ? _(msg`Owner`)
             : _(TEAM_MEMBER_ROLE_MAP[row.original.role]),
       },
       {

apps/web/src/components/document/document-read-only-fields.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import { useLingui } from '@lingui/react';
 import { EyeOffIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
@@ -12,6 +13,7 @@ import {
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { DocumentMeta } from '@documenso/prisma/client';
 import { FieldType, SigningStatus } from '@documenso/prisma/client';
@@ -28,6 +30,8 @@ export type DocumentReadOnlyFieldsProps = {
 };
 
 export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
   const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
 
   const handleHideField = (fieldId: string) => {
@@ -59,7 +63,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                 >
                   <p className="font-semibold">
                     {field.Recipient.signingStatus === SigningStatus.SIGNED ? 'Signed' : 'Pending'}{' '}
-                    {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()} field
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type]).toLowerCase()} field
                   </p>
 
                   <p className="text-muted-foreground text-xs">
@@ -127,7 +131,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                         field.type === FieldType.FREE_SIGNATURE,
                     })}
                   >
-                    {FRIENDLY_FIELD_TYPE[field.type]}
+                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
                   </p>
                 )}
               </div>

apps/web/src/components/forms/token.tsx

@@ -202,7 +202,7 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
                           <SelectContent>
                             {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
                               <SelectItem key={key} value={key}>
-                                {date}
+                                {_(date)}
                               </SelectItem>
                             ))}
                           </SelectContent>

apps/web/src/components/general/signing-disclosure.tsx

@@ -2,6 +2,8 @@ import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 
+import { Trans } from '@lingui/macro';
+
 import { cn } from '@documenso/ui/lib/utils';
 
 export type SigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
@@ -9,20 +11,24 @@ export type SigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
 export const SigningDisclosure = ({ className, ...props }: SigningDisclosureProps) => {
   return (
     <p className={cn('text-muted-foreground text-xs', className)} {...props}>
-      By proceeding with your electronic signature, you acknowledge and consent that it will be used
+      <Trans>
-      to sign the given document and holds the same legal validity as a handwritten signature. By
+        By proceeding with your electronic signature, you acknowledge and consent that it will be
-      completing the electronic signing process, you affirm your understanding and acceptance of
+        used to sign the given document and holds the same legal validity as a handwritten
-      these conditions.
+        signature. By completing the electronic signing process, you affirm your understanding and
+        acceptance of these conditions.
+      </Trans>
       <span className="mt-2 block">
-        Read the full{' '}
+        <Trans>
-        <Link
+          Read the full{' '}
-          className="text-documenso-700 underline"
+          <Link
-          href="/articles/signature-disclosure"
+            className="text-documenso-700 underline"
-          target="_blank"
+            href="/articles/signature-disclosure"
-        >
+            target="_blank"
-          signature disclosure
+          >
-        </Link>
+            signature disclosure
-        .
+          </Link>
+          .
+        </Trans>
       </span>
     </p>
   );

lingui.config.ts

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.7.2-rc.1",
+  "version": "1.7.2-rc.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.7.2-rc.1",
+      "version": "1.7.2-rc.3",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -80,7 +80,7 @@
     },
     "apps/marketing": {
       "name": "@documenso/marketing",
-      "version": "1.7.2-rc.1",
+      "version": "1.7.2-rc.3",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/assets": "*",
@@ -441,7 +441,7 @@
     },
     "apps/web": {
       "name": "@documenso/web",
-      "version": "1.7.2-rc.1",
+      "version": "1.7.2-rc.3",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/api": "*",
@@ -36774,6 +36774,9 @@
         "@documenso/email": "*",
         "@documenso/prisma": "*",
         "@documenso/signing": "*",
+        "@lingui/core": "^4.11.3",
+        "@lingui/macro": "^4.11.3",
+        "@lingui/react": "^4.11.3",
         "@next-auth/prisma-adapter": "1.0.7",
         "@noble/ciphers": "0.4.0",
         "@noble/hashes": "1.3.2",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.7.2-rc.1",
+  "version": "1.7.2-rc.3",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",

packages/api/v1/implementation.ts

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

packages/api/v1/schema.ts

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