chore: check it build will pass

2024-11-04 16:40:45 +00:00
166 changed files with 1481 additions and 3574 deletions
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@documenso/marketing",
-  "version": "1.7.2-rc.4",
+  "version": "1.7.2-rc.3",
  "private": true,
  "license": "AGPL-3.0",
  "scripts": {
--- a/apps/marketing/src/app/(marketing)/[content]/page.tsx
+++ b/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 async function ContentPage({ params }: { params: { content: string } }) {
+export default function ContentPage({ params }: { params: { content: string } }) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const post = allDocuments.find((post) => post._raw.flattenedPath === params.content);
--- a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
@@ -48,8 +48,8 @@ const mdxComponents: MDXComponents = {
  ),
 };
-export default async function BlogPostPage({ params }: { params: { post: string } }) {
+export default function BlogPostPage({ params }: { params: { post: string } }) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const post = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
--- a/apps/marketing/src/app/(marketing)/blog/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/page.tsx
@@ -9,8 +9,8 @@ export const metadata: Metadata = {
  title: 'Blog',
 };
-export default async function BlogPage() {
+export default function BlogPage() {
-  const { i18n } = await setupI18nSSR();
+  const { i18n } = setupI18nSSR();
  const blogPosts = allBlogPosts.sort((a, b) => {
    const dateA = new Date(a.date);
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -1,6 +1,7 @@
 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';
@@ -75,9 +76,9 @@ export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 const fetchGithubStats = async () => {
  return await fetch('https://api.github.com/repos/documenso/documenso', {
-    headers: {
+    // headers: {
-      ...GITHUB_HEADERS,
+    //   ...GITHUB_HEADERS,
-    },
+    // },
  })
    .then(async (res) => res.json())
    .then((res) => ZGithubStatsResponse.parse(res));
@@ -130,9 +131,9 @@ const fetchEarlyAdopters = async () => {
 };
 export default async function OpenPage() {
-  const { i18n } = await setupI18nSSR();
+  setupI18nSSR();
-  const { _ } = i18n;
+  const { _ } = useLingui();
  const [
    { forks_count: forksCount, stargazers_count: stargazersCount },
--- a/apps/marketing/src/app/(marketing)/page.tsx
+++ b/apps/marketing/src/app/(marketing)/page.tsx
@@ -26,7 +26,7 @@ const fontCaveat = Caveat({
 });
 export default async function IndexPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const starCount = await fetch('https://api.github.com/repos/documenso/documenso', {
    headers: {
--- a/apps/marketing/src/app/(marketing)/pricing/page.tsx
+++ b/apps/marketing/src/app/(marketing)/pricing/page.tsx
@@ -30,8 +30,8 @@ export type PricingPageProps = {
  };
 };
-export default async function PricingPage() {
+export default function PricingPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="mt-6 sm:mt-12">
--- a/apps/marketing/src/app/(marketing)/singleplayer/page.tsx
+++ b/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 async function SingleplayerPage() {
+export default function SingleplayerPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <SinglePlayerClient />;
 }
--- a/apps/marketing/src/app/layout.tsx
+++ b/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 } = await setupI18nSSR();
+  const { lang, locales, i18n } = setupI18nSSR();
  return (
    <html
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@documenso/web",
-  "version": "1.7.2-rc.4",
+  "version": "1.7.2-rc.3",
  "private": true,
  "license": "AGPL-3.0",
  "scripts": {
--- a/apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx
+++ b/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 } = await setupI18nSSR();
+  const { i18n } = setupI18nSSR();
  const document = await getEntireDocument({ id: Number(params.id) });
--- a/apps/web/src/app/(dashboard)/admin/documents/page.tsx
+++ b/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 async function AdminDocumentsPage() {
+export default function AdminDocumentsPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div>
--- a/apps/web/src/app/(dashboard)/admin/layout.tsx
+++ b/apps/web/src/app/(dashboard)/admin/layout.tsx
@@ -13,7 +13,7 @@ export type AdminSectionLayoutProps = {
 };
 export default async function AdminSectionLayout({ children }: AdminSectionLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/admin/site-settings/page.tsx
+++ b/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() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
--- a/apps/web/src/app/(dashboard)/admin/stats/page.tsx
+++ b/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() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
--- a/apps/web/src/app/(dashboard)/admin/subscriptions/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/subscriptions/page.tsx
@@ -14,7 +14,7 @@ import {
 } from '@documenso/ui/primitives/table';
 export default async function Subscriptions() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const subscriptions = await findSubscriptions();
--- a/apps/web/src/app/(dashboard)/admin/users/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/users/page.tsx
@@ -16,7 +16,7 @@ type AdminManageUsersProps = {
 };
 export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const page = Number(searchParams.page) || 1;
  const perPage = Number(searchParams.perPage) || 10;
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -7,7 +7,6 @@ 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,
@@ -202,7 +201,7 @@ export const EditDocumentForm = ({
  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
    try {
-      const { timezone, dateFormat, redirectUrl, language } = data.meta;
+      const { timezone, dateFormat, redirectUrl } = data.meta;
      await setSettingsForDocument({
        documentId: document.id,
@@ -218,7 +217,6 @@ export const EditDocumentForm = ({
          timezone,
          dateFormat,
          redirectUrl,
          language: isValidLanguageCode(language) ? language : undefined,
        },
      });
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx
@@ -8,8 +8,8 @@ export type DocumentPageProps = {
  };
 };
-export default async function DocumentEditPage({ params }: DocumentPageProps) {
+export default function DocumentEditPage({ params }: DocumentPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <DocumentEditPageView params={params} />;
 }
--- a/apps/web/src/app/(dashboard)/documents/[id]/loading.tsx
+++ b/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 async function Loading() {
+export default function Loading() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/page.tsx
@@ -8,8 +8,8 @@ export type DocumentsLogsPageProps = {
  };
 };
-export default async function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
+export default function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <DocumentLogsPageView params={params} />;
 }
--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@@ -8,8 +8,8 @@ export type DocumentPageProps = {
  };
 };
-export default async function DocumentPage({ params }: DocumentPageProps) {
+export default function DocumentPage({ params }: DocumentPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <DocumentPageView params={params} />;
 }
--- a/apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx
+++ b/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 async function DocumentSentPage() {
+export default function DocumentSentPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -16,7 +16,7 @@ export const metadata: Metadata = {
 };
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/layout.tsx
+++ b/apps/web/src/app/(dashboard)/layout.tsx
@@ -23,7 +23,7 @@ export type AuthenticatedDashboardLayoutProps = {
 export default async function AuthenticatedDashboardLayout({
  children,
 }: AuthenticatedDashboardLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const session = await getServerSession(NEXT_AUTH_OPTIONS);
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -24,7 +24,7 @@ export const metadata: Metadata = {
 };
 export default async function BillingSettingsPage() {
-  const { i18n } = await setupI18nSSR();
+  const { i18n } = setupI18nSSR();
  let { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/settings/layout.tsx
+++ b/apps/web/src/app/(dashboard)/settings/layout.tsx
@@ -11,8 +11,8 @@ export type DashboardSettingsLayoutProps = {
  children: React.ReactNode;
 };
-export default async function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
+export default function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
--- a/apps/web/src/app/(dashboard)/settings/profile/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/profile/page.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 };
 export default async function ProfileSettingsPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
  const { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/settings/public-profile/page.tsx
+++ b/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() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/settings/security/activity/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/activity/page.tsx
@@ -14,8 +14,8 @@ export const metadata: Metadata = {
  title: 'Security activity',
 };
-export default async function SettingsSecurityActivityPage() {
+export default function SettingsSecurityActivityPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
--- a/apps/web/src/app/(dashboard)/settings/security/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/page.tsx
@@ -21,7 +21,7 @@ export const metadata: Metadata = {
 };
 export default async function SecuritySettingsPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
  const { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/settings/security/passkeys/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/passkeys/page.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 };
 export default async function SettingsManagePasskeysPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
  const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
--- a/apps/web/src/app/(dashboard)/settings/tokens/page.tsx
+++ b/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 } = await setupI18nSSR();
+  const { i18n } = setupI18nSSR();
  const { user } = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
@@ -7,7 +7,6 @@ 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,
@@ -152,10 +151,7 @@ export const EditTemplateForm = ({
          globalAccessAuth: data.globalAccessAuth ?? null,
          globalActionAuth: data.globalActionAuth ?? null,
        },
-        meta: {
+        meta: data.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.
--- a/apps/web/src/app/(dashboard)/templates/[id]/page.tsx
+++ b/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 async function TemplatePage({ params }: TemplatePageProps) {
+export default function TemplatePage({ params }: TemplatePageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <TemplatePageView params={params} />;
 }
--- a/apps/web/src/app/(dashboard)/templates/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/page.tsx
@@ -15,8 +15,8 @@ export const metadata: Metadata = {
  title: 'Templates',
 };
-export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <TemplatesPageView searchParams={searchParams} />;
 }
--- a/apps/web/src/app/(profile)/layout.tsx
+++ b/apps/web/src/app/(profile)/layout.tsx
@@ -14,7 +14,7 @@ type PublicProfileLayoutProps = {
 };
 export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { user, session } = await getServerComponentSession();
--- a/apps/web/src/app/(profile)/p/[url]/page.tsx
+++ b/apps/web/src/app/(profile)/p/[url]/page.tsx
@@ -42,7 +42,7 @@ const BADGE_DATA = {
 };
 export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { url: profileUrl } = params;
--- a/apps/web/src/app/(recipient)/d/[token]/page.tsx
+++ b/apps/web/src/app/(recipient)/d/[token]/page.tsx
@@ -24,7 +24,7 @@ export type TemplatesDirectPageProps = {
 };
 export default async function TemplatesDirectPage({ params }: TemplatesDirectPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { token } = params;
--- a/apps/web/src/app/(recipient)/layout.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { user, session } = await getServerComponentSession();
--- a/apps/web/src/app/(signing)/sign/[token]/complete/layout.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/complete/layout.tsx
@@ -8,8 +8,8 @@ export type SigningLayoutProps = {
  children: React.ReactNode;
 };
-export default async function SigningLayout({ children }: SigningLayoutProps) {
+export default function SigningLayout({ children }: SigningLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div>
--- a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
--- a/apps/web/src/app/(signing)/sign/[token]/layout.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/layout.tsx
@@ -13,7 +13,7 @@ export type SigningLayoutProps = {
 };
 export default async function SigningLayout({ children }: SigningLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { user, session } = await getServerComponentSession();
--- a/apps/web/src/app/(signing)/sign/[token]/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx
@@ -31,7 +31,7 @@ export type SigningPageProps = {
 };
 export default async function SigningPage({ params: { token } }: SigningPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  if (!token) {
    return notFound();
--- a/apps/web/src/app/(signing)/sign/[token]/waiting/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/waiting/page.tsx
@@ -21,7 +21,7 @@ type WaitingForTurnToSignPageProps = {
 export default async function WaitingForTurnToSignPage({
  params: { token },
 }: WaitingForTurnToSignPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  if (!token) {
    return notFound();
--- a/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/edit/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/logs/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx
@@ -16,7 +16,7 @@ export default async function TeamsDocumentPage({
  params,
  searchParams = {},
 }: TeamsDocumentPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx
@@ -27,7 +27,7 @@ export default async function AuthenticatedTeamsLayout({
  children,
  params,
 }: AuthenticatedTeamsLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { session, user } = await getServerComponentSession();
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx
@@ -24,7 +24,7 @@ export default async function TeamsSettingsLayout({
  children,
  params: { teamUrl },
 }: TeamSettingsLayoutProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const session = await getRequiredServerComponentSession();
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { _ } = useLingui();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx
@@ -28,7 +28,7 @@ export type TeamsSettingsPageProps = {
 };
 export default async function TeamsSettingsPage({ params }: TeamsSettingsPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/public-profile/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx
+++ b/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 } = await setupI18nSSR();
+  const { i18n } = setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/templates/[id]/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/templates/[id]/page.tsx
@@ -14,7 +14,7 @@ type TeamTemplatePageProps = {
 };
 export default async function TeamTemplatePage({ params }: TeamTemplatePageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(teams)/t/[teamUrl]/templates/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/templates/page.tsx
@@ -18,7 +18,7 @@ export default async function TeamTemplatesPage({
  searchParams = {},
  params,
 }: TeamTemplatesPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { teamUrl } = params;
--- a/apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx
@@ -7,8 +7,8 @@ import { Button } from '@documenso/ui/primitives/button';
 const SUPPORT_EMAIL = 'support@documenso.com';
-export default async function SignatureDisclosure() {
+export default function SignatureDisclosure() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div>
--- a/apps/web/src/app/(unauthenticated)/check-email/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/check-email/page.tsx
@@ -10,8 +10,8 @@ export const metadata: Metadata = {
  title: 'Forgot password',
 };
-export default async function ForgotPasswordPage() {
+export default function ForgotPasswordPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="w-screen max-w-lg px-4">
--- a/apps/web/src/app/(unauthenticated)/forgot-password/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/forgot-password/page.tsx
@@ -11,8 +11,8 @@ export const metadata: Metadata = {
  title: 'Forgot Password',
 };
-export default async function ForgotPasswordPage() {
+export default function ForgotPasswordPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="w-screen max-w-lg px-4">
--- a/apps/web/src/app/(unauthenticated)/layout.tsx
+++ b/apps/web/src/app/(unauthenticated)/layout.tsx
@@ -9,8 +9,8 @@ type UnauthenticatedLayoutProps = {
  children: React.ReactNode;
 };
-export default async function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
+export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
-  await setupI18nSSR();
+  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">
--- a/apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx
@@ -15,7 +15,7 @@ type ResetPasswordPageProps = {
 };
 export default async function ResetPasswordPage({ params: { token } }: ResetPasswordPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const isValid = await getResetTokenValidity({ token });
--- a/apps/web/src/app/(unauthenticated)/reset-password/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/reset-password/page.tsx
@@ -10,8 +10,8 @@ export const metadata: Metadata = {
  title: 'Reset Password',
 };
-export default async function ResetPasswordPage() {
+export default function ResetPasswordPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="w-screen max-w-lg px-4">
--- a/apps/web/src/app/(unauthenticated)/signin/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signin/page.tsx
@@ -17,8 +17,8 @@ export const metadata: Metadata = {
  title: 'Sign In',
 };
-export default async function SignInPage() {
+export default function SignInPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
--- a/apps/web/src/app/(unauthenticated)/signup/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signup/page.tsx
@@ -12,8 +12,8 @@ export const metadata: Metadata = {
  title: 'Sign Up',
 };
-export default async function SignUpPage() {
+export default function SignUpPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
--- a/apps/web/src/app/(unauthenticated)/team/decline/[token]/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/team/decline/[token]/page.tsx
@@ -21,7 +21,7 @@ type DeclineInvitationPageProps = {
 export default async function DeclineInvitationPage({
  params: { token },
 }: DeclineInvitationPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const session = await getServerComponentSession();
--- a/apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx
@@ -21,7 +21,7 @@ type AcceptInvitationPageProps = {
 export default async function AcceptInvitationPage({
  params: { token },
 }: AcceptInvitationPageProps) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const session = await getServerComponentSession();
--- a/apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const teamEmailVerification = await prisma.teamEmailVerification.findUnique({
    where: {
--- a/apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  const teamTransferVerification = await prisma.teamTransferVerification.findUnique({
    where: {
--- a/apps/web/src/app/(unauthenticated)/unverified-account/page.tsx
+++ b/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 async function UnverifiedAccount() {
+export default function UnverifiedAccount() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="w-screen max-w-lg px-4">
--- a/apps/web/src/app/(unauthenticated)/verify-email/[token]/page.tsx
+++ b/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) {
-  await setupI18nSSR();
+  setupI18nSSR();
  if (!token) {
    return (
--- a/apps/web/src/app/(unauthenticated)/verify-email/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/verify-email/page.tsx
@@ -11,8 +11,8 @@ export const metadata: Metadata = {
  title: 'Verify Email',
 };
-export default async function EmailVerificationWithoutTokenPage() {
+export default function EmailVerificationWithoutTokenPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return (
    <div className="w-screen max-w-lg px-4">
--- a/apps/web/src/app/layout.tsx
+++ b/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 } = await setupI18nSSR();
+  const { i18n, lang, locales } = setupI18nSSR();
  return (
    <html
--- a/apps/web/src/app/not-found.tsx
+++ b/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() {
-  await setupI18nSSR();
+  setupI18nSSR();
  const { session } = await getServerComponentSession();
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
-export default async function DashboardPage() {
+export default function DashboardPage() {
-  await setupI18nSSR();
+  setupI18nSSR();
  return <div>Documenso</div>;
 }
--- a/lingui.config.ts
+++ b/lingui.config.ts
@@ -19,7 +19,7 @@ const config: LinguiConfig = {
    },
    {
      path: '<rootDir>/packages/lib/translations/{locale}/common',
-      include: ['packages/ui', 'packages/lib', 'packages/email'],
+      include: ['packages/ui', 'packages/lib'],
      exclude: ['**/node_modules/**'],
    },
  ],
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@documenso/root",
-  "version": "1.7.2-rc.4",
+  "version": "1.7.2-rc.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@documenso/root",
-      "version": "1.7.2-rc.4",
+      "version": "1.7.2-rc.3",
      "workspaces": [
        "apps/*",
        "packages/*"
@@ -80,7 +80,7 @@
    },
    "apps/marketing": {
      "name": "@documenso/marketing",
-      "version": "1.7.2-rc.4",
+      "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.4",
+      "version": "1.7.2-rc.3",
      "license": "AGPL-3.0",
      "dependencies": {
        "@documenso/api": "*",
@@ -36774,9 +36774,6 @@
        "@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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "private": true,
-  "version": "1.7.2-rc.4",
+  "version": "1.7.2-rc.3",
  "scripts": {
    "build": "turbo run build",
    "build:web": "turbo run build --filter=@documenso/web",
--- a/packages/api/v1/implementation.ts
+++ b/packages/api/v1/implementation.ts
@@ -301,7 +301,6 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
        dateFormat: dateFormat?.value,
        redirectUrl: body.meta.redirectUrl,
        signingOrder: body.meta.signingOrder,
        language: body.meta.language,
        requestMetadata: extractNextApiRequestMetadata(args.req),
      });
--- a/packages/api/v1/schema.ts
+++ b/packages/api/v1/schema.ts
@@ -2,7 +2,6 @@ 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';
@@ -128,7 +127,6 @@ export const ZCreateDocumentMutationSchema = z.object({
        }),
      redirectUrl: z.string(),
      signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
    })
    .partial(),
  authOptions: z
@@ -183,7 +181,6 @@ 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(),
@@ -250,7 +247,6 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
      dateFormat: z.string(),
      redirectUrl: ZUrlSchema,
      signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
    })
    .partial()
    .optional(),
--- a/packages/email/render.ts
+++ b/packages/email/render.ts
@@ -0,0 +1 @@
 export { render, renderAsync } from '@react-email/render';
--- a/packages/email/render.tsx
+++ b/packages/email/render.tsx
@@ -1,39 +0,0 @@
 import * as reactEmail from '@react-email/render';
 import config from '@documenso/tailwind-config';
 import { Tailwind } from './components';
 export const render: typeof reactEmail.render = (element, options) => {
  return reactEmail.render(
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: config.theme.extend.colors,
          },
        },
      }}
    >
      {element}
    </Tailwind>,
    options,
  );
 };
 export const renderAsync: typeof reactEmail.renderAsync = async (element, options) => {
  return reactEmail.renderAsync(
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: config.theme.extend.colors,
          },
        },
      }}
    >
      {element}
    </Tailwind>,
    options,
  );
 };
--- a/packages/email/template-components/template-confirmation-email.tsx
+++ b/packages/email/template-components/template-confirmation-email.tsx
@@ -1,6 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -13,21 +10,17 @@ export const TemplateConfirmationEmail = ({
  confirmationLink,
  assetBaseUrl,
 }: TemplateConfirmationEmailProps) => {
  const { _ } = useLingui();
  return (
    <>
      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
      <Section className="flex-row items-center justify-center">
        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          <Trans>Welcome to Documenso!</Trans>
+          Welcome to Documenso!
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>
+          Before you get started, please confirm your email address by clicking the button below:
            Before you get started, please confirm your email address by clicking the button below:
          </Trans>
        </Text>
        <Section className="mb-6 mt-8 text-center">
@@ -35,13 +28,11 @@ export const TemplateConfirmationEmail = ({
            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
            href={confirmationLink}
          >
-            <Trans>Confirm email</Trans>
+            Confirm email
          </Button>
          <Text className="mt-8 text-center text-sm italic text-slate-400">
-            <Trans>
+            You can also copy and paste this link into your browser: {confirmationLink} (link
-              You can also copy and paste this link into your browser: {confirmationLink} (link
+            expires in 1 hour)
              expires in 1 hour)
            </Trans>
          </Text>
        </Section>
      </Section>
--- a/packages/email/template-components/template-document-cancel.tsx
+++ b/packages/email/template-components/template-document-cancel.tsx
@@ -1,5 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -21,18 +19,16 @@ export const TemplateDocumentCancel = ({
      <Section>
        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          <Trans>
+          {inviterName} has cancelled the document
-            {inviterName} has cancelled the document
+          <br />"{documentName}"
            <br />"{documentName}"
          </Trans>
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>All signatures have been voided.</Trans>
+          All signatures have been voided.
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>You don't need to sign it anymore.</Trans>
+          You don't need to sign it anymore.
        </Text>
      </Section>
    </>
--- a/packages/email/template-components/template-document-completed.tsx
+++ b/packages/email/template-components/template-document-completed.tsx
@@ -1,5 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { Button, Column, Img, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -32,17 +30,17 @@ export const TemplateDocumentCompleted = ({
                src={getAssetUrl('/static/completed.png')}
                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
              />
-              <Trans>Completed</Trans>
+              Completed
            </Text>
          </Column>
        </Section>
        <Text className="text-primary mb-0 text-center text-lg font-semibold">
-          <Trans>{customBody ?? `“${documentName}” was signed by all signers`}</Trans>
+          {customBody ?? `“${documentName}” was signed by all signers`}
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>Continue by downloading the document.</Trans>
+          Continue by downloading the document.
        </Text>
        <Section className="mb-6 mt-8 text-center">
@@ -61,7 +59,7 @@ export const TemplateDocumentCompleted = ({
              src={getAssetUrl('/static/download.png')}
              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
            />
-            <Trans>Download</Trans>
+            Download
          </Button>
        </Section>
      </Section>
--- a/packages/email/template-components/template-document-invite.tsx
+++ b/packages/email/template-components/template-document-invite.tsx
@@ -1,6 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import type { RecipientRole } from '@documenso/prisma/client';
@@ -29,8 +26,6 @@ export const TemplateDocumentInvite = ({
  isTeamInvite,
  teamName,
 }: TemplateDocumentInviteProps) => {
  const { _ } = useLingui();
  const { actionVerb, progressiveVerb } = RECIPIENT_ROLES_DESCRIPTION_ENG[role];
  return (
@@ -40,30 +35,28 @@ export const TemplateDocumentInvite = ({
      <Section>
        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
          {selfSigner ? (
-            <Trans>
+            <>
-              {`Please ${_(actionVerb).toLowerCase()} your document`}
+              {`Please ${actionVerb.toLowerCase()} your document`}
              <br />
              {`"${documentName}"`}
-            </Trans>
+            </>
          ) : isTeamInvite ? (
-            <Trans>
+            <>
-              {`${inviterName} on behalf of ${teamName} has invited you to ${_(
+              {`${inviterName} on behalf of ${teamName} has invited you to ${actionVerb.toLowerCase()}`}
                actionVerb,
              ).toLowerCase()}`}
              <br />
              {`"${documentName}"`}
-            </Trans>
+            </>
          ) : (
-            <Trans>
+            <>
-              {`${inviterName} has invited you to ${_(actionVerb).toLowerCase()}`}
+              {`${inviterName} has invited you to ${actionVerb.toLowerCase()}`}
              <br />
              {`"${documentName}"`}
-            </Trans>
+            </>
          )}
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>Continue by {_(progressiveVerb).toLowerCase()} the document.</Trans>
+          Continue by {progressiveVerb.toLowerCase()} the document.
        </Text>
        <Section className="mb-6 mt-8 text-center">
@@ -71,7 +64,7 @@ export const TemplateDocumentInvite = ({
            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
            href={signDocumentLink}
          >
-            <Trans>{_(actionVerb)} Document</Trans>
+            {actionVerb} Document
          </Button>
        </Section>
      </Section>
--- a/packages/email/template-components/template-document-pending.tsx
+++ b/packages/email/template-components/template-document-pending.tsx
@@ -1,5 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { Column, Img, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -28,21 +26,19 @@ export const TemplateDocumentPending = ({
                src={getAssetUrl('/static/clock.png')}
                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
              />
-              <Trans>Waiting for others</Trans>
+              Waiting for others
            </Text>
          </Column>
        </Section>
        <Text className="text-primary mb-0 text-center text-lg font-semibold">
-          <Trans>“{documentName}” has been signed</Trans>
+          “{documentName}” has been signed
        </Text>
        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-          <Trans>
+          We're still waiting for other signers to sign this document.
-            We're still waiting for other signers to sign this document.
+          <br />
-            <br />
+          We'll notify you as soon as it's ready.
            We'll notify you as soon as it's ready.
          </Trans>
        </Text>
      </Section>
    </>
--- a/packages/email/template-components/template-document-self-signed.tsx
+++ b/packages/email/template-components/template-document-self-signed.tsx
@@ -1,4 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { env } from 'next-runtime-env';
 import { Button, Column, Img, Link, Section, Text } from '../components';
@@ -33,27 +32,25 @@ export const TemplateDocumentSelfSigned = ({
                src={getAssetUrl('/static/completed.png')}
                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
              />
-              <Trans>Completed</Trans>
+              Completed
            </Text>
          </Column>
        </Section>
        <Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
-          <Trans>You have signed “{documentName}”</Trans>
+          You have signed “{documentName}”
        </Text>
        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-          <Trans>
+          Create a{' '}
-            Create a{' '}
+          <Link
-            <Link
+            href={signUpUrl}
-              href={signUpUrl}
+            target="_blank"
-              target="_blank"
+            className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
-              className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+          >
-            >
+            free account
-              free account
+          </Link>{' '}
-            </Link>{' '}
+          to access your signed documents at any time.
            to access your signed documents at any time.
          </Trans>
        </Text>
        <Section className="mb-6 mt-8 text-center">
@@ -65,7 +62,7 @@ export const TemplateDocumentSelfSigned = ({
              src={getAssetUrl('/static/user-plus.png')}
              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
            />
-            <Trans>Create account</Trans>
+            Create account
          </Button>
          <Button
@@ -76,7 +73,7 @@ export const TemplateDocumentSelfSigned = ({
              src={getAssetUrl('/static/review.png')}
              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
            />
-            <Trans>View plans</Trans>
+            View plans
          </Button>
        </Section>
      </Section>
--- a/packages/email/template-components/template-document-super-delete.tsx
+++ b/packages/email/template-components/template-document-super-delete.tsx
@@ -1,5 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -20,22 +18,20 @@ export const TemplateDocumentDelete = ({
      <Section>
        <Text className="text-primary mb-0 mt-6 text-left text-lg font-semibold">
-          <Trans>Your document has been deleted by an admin!</Trans>
+          Your document has been deleted by an admin!
        </Text>
        <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
-          <Trans>"{documentName}" has been deleted by an admin.</Trans>
+          "{documentName}" has been deleted by an admin.
        </Text>
        <Text className="mx-auto mb-6 mt-1 text-left text-base text-slate-400">
-          <Trans>
+          This document can not be recovered, if you would like to dispute the reason for future
-            This document can not be recovered, if you would like to dispute the reason for future
+          documents please contact support.
            documents please contact support.
          </Trans>
        </Text>
        <Text className="mx-auto mt-1 text-left text-base text-slate-400">
-          <Trans>The reason provided for deletion is the following:</Trans>
+          The reason provided for deletion is the following:
        </Text>
        <Text className="mx-auto mb-6 mt-1 text-left text-base italic text-slate-400">
--- a/packages/email/template-components/template-footer.tsx
+++ b/packages/email/template-components/template-footer.tsx
@@ -1,5 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { Link, Section, Text } from '../components';
 export type TemplateFooterProps = {
@@ -11,12 +9,10 @@ export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
    <Section>
      {isDocument && (
        <Text className="my-4 text-base text-slate-400">
-          <Trans>
+          This document was sent using{' '}
-            This document was sent using{' '}
+          <Link className="text-[#7AC455]" href="https://documen.so/mail-footer">
-            <Link className="text-[#7AC455]" href="https://documen.so/mail-footer">
+            Documenso.
-              Documenso.
+          </Link>
            </Link>
          </Trans>
        </Text>
      )}
--- a/packages/email/template-components/template-forgot-password.tsx
+++ b/packages/email/template-components/template-forgot-password.tsx
@@ -1,5 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
@@ -18,11 +16,11 @@ export const TemplateForgotPassword = ({
      <Section className="flex-row items-center justify-center">
        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          <Trans>Forgot your password?</Trans>
+          Forgot your password?
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>That's okay, it happens! Click the button below to reset your password.</Trans>
+          That's okay, it happens! Click the button below to reset your password.
        </Text>
        <Section className="mb-6 mt-8 text-center">
@@ -30,7 +28,7 @@ export const TemplateForgotPassword = ({
            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
            href={resetPasswordLink}
          >
-            <Trans>Reset Password</Trans>
+            Reset Password
          </Button>
        </Section>
      </Section>
--- a/packages/email/template-components/template-reset-password.tsx
+++ b/packages/email/template-components/template-reset-password.tsx
@@ -1,4 +1,3 @@
 import { Trans } from '@lingui/macro';
 import { env } from 'next-runtime-env';
 import { Button, Section, Text } from '../components';
@@ -19,11 +18,11 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
      <Section className="flex-row items-center justify-center">
        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          <Trans>Password updated!</Trans>
+          Password updated!
        </Text>
        <Text className="my-1 text-center text-base text-slate-400">
-          <Trans>Your password has been updated.</Trans>
+          Your password has been updated.
        </Text>
        <Section className="mb-6 mt-8 text-center">
@@ -31,7 +30,7 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
            href={`${NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
          >
-            <Trans>Sign In</Trans>
+            Sign In
          </Button>
        </Section>
      </Section>
--- a/packages/email/templates/confirm-email.tsx
+++ b/packages/email/templates/confirm-email.tsx
@@ -1,7 +1,6 @@
-import { msg } from '@lingui/macro';
+import config from '@documenso/tailwind-config';
 import { useLingui } from '@lingui/react';
-import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
 import type { TemplateConfirmationEmailProps } from '../template-components/template-confirmation-email';
 import { TemplateConfirmationEmail } from '../template-components/template-confirmation-email';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -10,9 +9,7 @@ export const ConfirmEmailTemplate = ({
  confirmationLink,
  assetBaseUrl = 'http://localhost:3002',
 }: TemplateConfirmationEmailProps) => {
-  const { _ } = useLingui();
+  const previewText = `Please confirm your email address`;
  const previewText = msg`Please confirm your email address`;
  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -21,30 +18,40 @@ export const ConfirmEmailTemplate = ({
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Tailwind
-        <Section>
+        config={{
-          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+          theme: {
-            <Section>
+            extend: {
-              <Img
+              colors: config.theme.extend.colors,
-                src={getAssetUrl('/static/logo.png')}
+            },
-                alt="Documenso Logo"
+          },
-                className="mb-4 h-6"
+        }}
-              />
+      >
        <Body className="mx-auto my-auto bg-white font-sans">
          <Section>
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
              <Section>
                <Img
                  src={getAssetUrl('/static/logo.png')}
                  alt="Documenso Logo"
                  className="mb-4 h-6"
                />
-              <TemplateConfirmationEmail
+                <TemplateConfirmationEmail
-                confirmationLink={confirmationLink}
+                  confirmationLink={confirmationLink}
-                assetBaseUrl={assetBaseUrl}
+                  assetBaseUrl={assetBaseUrl}
-              />
+                />
-            </Section>
+              </Section>
-          </Container>
+            </Container>
-          <div className="mx-auto mt-12 max-w-xl" />
+            <div className="mx-auto mt-12 max-w-xl" />
-          <Container className="mx-auto max-w-xl">
+            <Container className="mx-auto max-w-xl">
-            <TemplateFooter isDocument={false} />
+              <TemplateFooter isDocument={false} />
-          </Container>
+            </Container>
-        </Section>
+          </Section>
-      </Body>
+        </Body>
      </Tailwind>
    </Html>
  );
 };
--- a/packages/email/templates/confirm-team-email.tsx
+++ b/packages/email/templates/confirm-team-email.tsx
@@ -1,7 +1,5 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { formatTeamUrl } from '@documenso/lib/utils/teams';
 import config from '@documenso/tailwind-config';
 import {
  Body,
@@ -13,6 +11,7 @@ import {
  Link,
  Preview,
  Section,
  Tailwind,
  Text,
 } from '../components';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -33,90 +32,97 @@ export const ConfirmTeamEmailTemplate = ({
  teamUrl = 'demo',
  token = '',
 }: ConfirmTeamEmailProps) => {
-  const { _ } = useLingui();
+  const previewText = `Accept team email request for ${teamName} on Documenso`;
  const previewText = msg`Accept team email request for ${teamName} on Documenso`;
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
-
+      <Tailwind
-      <Body className="mx-auto my-auto font-sans">
+        config={{
-        <Section className="bg-white">
+          theme: {
-          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+            extend: {
-            <TemplateImage
+              colors: config.theme.extend.colors,
-              assetBaseUrl={assetBaseUrl}
+            },
-              className="mb-4 h-6 p-2"
+          },
-              staticAsset="logo.png"
+        }}
-            />
+      >
-
+        <Body className="mx-auto my-auto font-sans">
-            <Section>
+          <Section className="bg-white">
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
              <TemplateImage
                className="mx-auto"
                assetBaseUrl={assetBaseUrl}
-                staticAsset="mail-open.png"
+                className="mb-4 h-6 p-2"
                staticAsset="logo.png"
              />
            </Section>
-            <Section className="p-2 text-slate-500">
+              <Section>
-              <Text className="text-center text-lg font-medium text-black">
+                <TemplateImage
-                Verify your team email address
+                  className="mx-auto"
-              </Text>
+                  assetBaseUrl={assetBaseUrl}
-
+                  staticAsset="mail-open.png"
-              <Text className="text-center text-base">
+                />
                <span className="font-bold">{teamName}</span> has requested to use your email
                address for their team on Documenso.
              </Text>
              <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
                {formatTeamUrl(teamUrl, baseUrl)}
              </div>
              <Section className="mt-6">
                <Text className="my-0 text-sm">
                  By accepting this request, you will be granting <strong>{teamName}</strong> access
                  to:
                </Text>
                <ul className="mb-0 mt-2">
                  <li className="text-sm">
                    View all documents sent to and from this email address
                  </li>
                  <li className="mt-1 text-sm">
                    Allow document recipients to reply directly to this email address
                  </li>
                  <li className="mt-1 text-sm">
                    Send documents on behalf of the team using the email address
                  </li>
                </ul>
                <Text className="mt-2 text-sm">
                  You can revoke access at any time in your team settings on Documenso{' '}
                  <Link href={`${baseUrl}/settings/teams`}>here.</Link>
                </Text>
              </Section>
-              <Section className="mb-6 mt-8 text-center">
+              <Section className="p-2 text-slate-500">
-                <Button
+                <Text className="text-center text-lg font-medium text-black">
-                  className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                  Verify your team email address
-                  href={`${baseUrl}/team/verify/email/${token}`}
+                </Text>
-                >
+
-                  Accept
+                <Text className="text-center text-base">
-                </Button>
+                  <span className="font-bold">{teamName}</span> has requested to use your email
                  address for their team on Documenso.
                </Text>
                <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
                  {formatTeamUrl(teamUrl, baseUrl)}
                </div>
                <Section className="mt-6">
                  <Text className="my-0 text-sm">
                    By accepting this request, you will be granting <strong>{teamName}</strong>{' '}
                    access to:
                  </Text>
                  <ul className="mb-0 mt-2">
                    <li className="text-sm">
                      View all documents sent to and from this email address
                    </li>
                    <li className="mt-1 text-sm">
                      Allow document recipients to reply directly to this email address
                    </li>
                    <li className="mt-1 text-sm">
                      Send documents on behalf of the team using the email address
                    </li>
                  </ul>
                  <Text className="mt-2 text-sm">
                    You can revoke access at any time in your team settings on Documenso{' '}
                    <Link href={`${baseUrl}/settings/teams`}>here.</Link>
                  </Text>
                </Section>
                <Section className="mb-6 mt-8 text-center">
                  <Button
                    className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
                    href={`${baseUrl}/team/verify/email/${token}`}
                  >
                    Accept
                  </Button>
                </Section>
              </Section>
            </Section>
-            <Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
+              <Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
-          </Container>
+            </Container>
-          <Hr className="mx-auto mt-12 max-w-xl" />
+            <Hr className="mx-auto mt-12 max-w-xl" />
-          <Container className="mx-auto max-w-xl">
+            <Container className="mx-auto max-w-xl">
-            <TemplateFooter isDocument={false} />
+              <TemplateFooter isDocument={false} />
-          </Container>
+            </Container>
-        </Section>
+          </Section>
-      </Body>
+        </Body>
      </Tailwind>
    </Html>
  );
 };
--- a/packages/email/templates/document-cancel.tsx
+++ b/packages/email/templates/document-cancel.tsx
@@ -1,7 +1,6 @@
-import { msg } from '@lingui/macro';
+import config from '@documenso/tailwind-config';
 import { useLingui } from '@lingui/react';
-import { Body, Container, Head, Hr, Html, Img, Preview, Section } from '../components';
+import { Body, Container, Head, Hr, Html, Img, Preview, Section, Tailwind } from '../components';
 import type { TemplateDocumentCancelProps } from '../template-components/template-document-cancel';
 import { TemplateDocumentCancel } from '../template-components/template-document-cancel';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -14,9 +13,7 @@ export const DocumentCancelTemplate = ({
  documentName = 'Open Source Pledge.pdf',
  assetBaseUrl = 'http://localhost:3002',
 }: DocumentCancelEmailTemplateProps) => {
-  const { _ } = useLingui();
+  const previewText = `${inviterName} has cancelled the document ${documentName}, you don't need to sign it anymore.`;
  const previewText = msg`${inviterName} has cancelled the document ${documentName}, you don't need to sign it anymore.`;
  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -25,34 +22,43 @@ export const DocumentCancelTemplate = ({
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: config.theme.extend.colors,
            },
          },
        }}
      >
        <Body className="mx-auto my-auto bg-white font-sans">
          <Section>
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
              <Section>
                <Img
                  src={getAssetUrl('/static/logo.png')}
                  alt="Documenso Logo"
                  className="mb-4 h-6"
                />
-      <Body className="mx-auto my-auto bg-white font-sans">
+                <TemplateDocumentCancel
-        <Section>
+                  inviterName={inviterName}
-          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+                  inviterEmail={inviterEmail}
-            <Section>
+                  documentName={documentName}
-              <Img
+                  assetBaseUrl={assetBaseUrl}
-                src={getAssetUrl('/static/logo.png')}
+                />
-                alt="Documenso Logo"
+              </Section>
-                className="mb-4 h-6"
+            </Container>
              />
-              <TemplateDocumentCancel
+            <Hr className="mx-auto mt-12 max-w-xl" />
                inviterName={inviterName}
                inviterEmail={inviterEmail}
                documentName={documentName}
                assetBaseUrl={assetBaseUrl}
              />
            </Section>
          </Container>
-          <Hr className="mx-auto mt-12 max-w-xl" />
+            <Container className="mx-auto max-w-xl">
-
+              <TemplateFooter />
-          <Container className="mx-auto max-w-xl">
+            </Container>
-            <TemplateFooter />
+          </Section>
-          </Container>
+        </Body>
-        </Section>
+      </Tailwind>
      </Body>
    </Html>
  );
 };
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@@ -1,7 +1,6 @@
-import { msg } from '@lingui/macro';
+import config from '@documenso/tailwind-config';
 import { useLingui } from '@lingui/react';
-import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
 import type { TemplateDocumentCompletedProps } from '../template-components/template-document-completed';
 import { TemplateDocumentCompleted } from '../template-components/template-document-completed';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -16,9 +15,7 @@ export const DocumentCompletedEmailTemplate = ({
  assetBaseUrl = 'http://localhost:3002',
  customBody,
 }: DocumentCompletedEmailTemplateProps) => {
-  const { _ } = useLingui();
+  const previewText = `Completed Document`;
  const previewText = msg`Completed Document`;
  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -27,32 +24,41 @@ export const DocumentCompletedEmailTemplate = ({
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: config.theme.extend.colors,
            },
          },
        }}
      >
        <Body className="mx-auto my-auto font-sans">
          <Section className="bg-white">
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
              <Section className="p-2">
                <Img
                  src={getAssetUrl('/static/logo.png')}
                  alt="Documenso Logo"
                  className="mb-4 h-6"
                />
-      <Body className="mx-auto my-auto font-sans">
+                <TemplateDocumentCompleted
-        <Section className="bg-white">
+                  downloadLink={downloadLink}
-          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+                  documentName={documentName}
-            <Section className="p-2">
+                  assetBaseUrl={assetBaseUrl}
-              <Img
+                  customBody={customBody}
-                src={getAssetUrl('/static/logo.png')}
+                />
-                alt="Documenso Logo"
+              </Section>
-                className="mb-4 h-6"
+            </Container>
              />
-              <TemplateDocumentCompleted
+            <Container className="mx-auto max-w-xl">
-                downloadLink={downloadLink}
+              <TemplateFooter />
-                documentName={documentName}
+            </Container>
-                assetBaseUrl={assetBaseUrl}
+          </Section>
-                customBody={customBody}
+        </Body>
-              />
+      </Tailwind>
            </Section>
          </Container>
          <Container className="mx-auto max-w-xl">
            <TemplateFooter />
          </Container>
        </Section>
      </Body>
    </Html>
  );
 };
--- a/packages/email/templates/document-created-from-direct-template.tsx
+++ b/packages/email/templates/document-created-from-direct-template.tsx
@@ -1,9 +1,18 @@
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import config from '@documenso/tailwind-config';
-import { Body, Button, Container, Head, Html, Img, Preview, Section, Text } from '../components';
+import {
  Body,
  Button,
  Container,
  Head,
  Html,
  Img,
  Preview,
  Section,
  Tailwind,
  Text,
 } from '../components';
 import TemplateDocumentImage from '../template-components/template-document-image';
 import { TemplateFooter } from '../template-components/template-footer';
 import { RecipientRole } from '.prisma/client';
@@ -23,11 +32,9 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
  documentName = 'Open Source Pledge.pdf',
  assetBaseUrl = 'http://localhost:3002',
 }: DocumentCompletedEmailTemplateProps) => {
-  const { _ } = useLingui();
+  const action = RECIPIENT_ROLES_DESCRIPTION_ENG[recipientRole].actioned.toLowerCase();
-  const action = _(RECIPIENT_ROLES_DESCRIPTION_ENG[recipientRole].actioned).toLowerCase();
+  const previewText = `Document created from direct template`;
  const previewText = msg`Document created from direct template`;
  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -36,48 +43,55 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: config.theme.extend.colors,
            },
          },
        }}
      >
        <Body className="mx-auto my-auto font-sans">
          <Section className="bg-white">
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
              <Section className="p-2">
                <Img
                  src={getAssetUrl('/static/logo.png')}
                  alt="Documenso Logo"
                  className="mb-4 h-6"
                />
-      <Body className="mx-auto my-auto font-sans">
+                <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
        <Section className="bg-white">
          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
            <Section className="p-2">
              <Img
                src={getAssetUrl('/static/logo.png')}
                alt="Documenso Logo"
                className="mb-4 h-6"
              />
-              <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+                <Section>
-
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
              <Section>
                <Text className="text-primary mb-0 text-center text-lg font-semibold">
                  <Trans>
                    {recipientName} {action} a document by using one of your direct links
-                  </Trans>
+                  </Text>
                </Text>
-                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
+                  <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
-                  {documentName}
+                    {documentName}
-                </div>
+                  </div>
-                <Section className="my-6 text-center">
+                  <Section className="my-6 text-center">
-                  <Button
+                    <Button
-                    className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                      className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
-                    href={documentLink}
+                      href={documentLink}
-                  >
+                    >
-                    <Trans>View document</Trans>
+                      View document
-                  </Button>
+                    </Button>
                  </Section>
                </Section>
              </Section>
-            </Section>
+            </Container>
          </Container>
-          <Container className="mx-auto max-w-xl">
+            <Container className="mx-auto max-w-xl">
-            <TemplateFooter />
+              <TemplateFooter />
-          </Container>
+            </Container>
-        </Section>
+          </Section>
-      </Body>
+        </Body>
      </Tailwind>
    </Html>
  );
 };
--- a/packages/email/templates/document-invite.tsx
+++ b/packages/email/templates/document-invite.tsx
@@ -1,10 +1,20 @@
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
 import type { RecipientRole } from '@documenso/prisma/client';
 import config from '@documenso/tailwind-config';
-import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from '../components';
+import {
  Body,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Tailwind,
  Text,
 } from '../components';
 import type { TemplateDocumentInviteProps } from '../template-components/template-document-invite';
 import { TemplateDocumentInvite } from '../template-components/template-document-invite';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -30,15 +40,13 @@ export const DocumentInviteEmailTemplate = ({
  isTeamInvite = false,
  teamName,
 }: DocumentInviteEmailTemplateProps) => {
-  const { _ } = useLingui();
+  const action = RECIPIENT_ROLES_DESCRIPTION_ENG[role].actionVerb.toLowerCase();
  const action = _(RECIPIENT_ROLES_DESCRIPTION_ENG[role].actionVerb).toLowerCase();
  const previewText = selfSigner
-    ? msg`Please ${action} your document ${documentName}`
+    ? `Please ${action} your document ${documentName}`
    : isTeamInvite
-    ? msg`${inviterName} on behalf of ${teamName} has invited you to ${action} ${documentName}`
+    ? `${inviterName} on behalf of ${teamName} has invited you to ${action} ${documentName}`
-    : msg`${inviterName} has invited you to ${action} ${documentName}`;
+    : `${inviterName} has invited you to ${action} ${documentName}`;
  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -47,62 +55,67 @@ export const DocumentInviteEmailTemplate = ({
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: config.theme.extend.colors,
            },
          },
        }}
      >
        <Body className="mx-auto my-auto bg-white font-sans">
          <Section>
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
              <Section>
                <Img
                  src={getAssetUrl('/static/logo.png')}
                  alt="Documenso Logo"
                  className="mb-4 h-6"
                />
-      <Body className="mx-auto my-auto bg-white font-sans">
+                <TemplateDocumentInvite
-        <Section>
+                  inviterName={inviterName}
-          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+                  inviterEmail={inviterEmail}
-            <Section>
+                  documentName={documentName}
-              <Img
+                  signDocumentLink={signDocumentLink}
-                src={getAssetUrl('/static/logo.png')}
+                  assetBaseUrl={assetBaseUrl}
-                alt="Documenso Logo"
+                  role={role}
-                className="mb-4 h-6"
+                  selfSigner={selfSigner}
-              />
+                  isTeamInvite={isTeamInvite}
                  teamName={teamName}
                />
              </Section>
            </Container>
-              <TemplateDocumentInvite
+            <Container className="mx-auto mt-12 max-w-xl">
-                inviterName={inviterName}
+              <Section>
-                inviterEmail={inviterEmail}
+                <Text className="my-4 text-base font-semibold">
                documentName={documentName}
                signDocumentLink={signDocumentLink}
                assetBaseUrl={assetBaseUrl}
                role={role}
                selfSigner={selfSigner}
                isTeamInvite={isTeamInvite}
                teamName={teamName}
              />
            </Section>
          </Container>
          <Container className="mx-auto mt-12 max-w-xl">
            <Section>
              <Text className="my-4 text-base font-semibold">
                <Trans>
                  {inviterName}{' '}
                  <Link className="font-normal text-slate-400" href="mailto:{inviterEmail}">
                    ({inviterEmail})
                  </Link>
-                </Trans>
+                </Text>
              </Text>
-              <Text className="mt-2 text-base text-slate-400">
+                <Text className="mt-2 text-base text-slate-400">
-                {customBody ? (
+                  {customBody ? (
-                  <pre className="font-sans text-base text-slate-400">{customBody}</pre>
+                    <pre className="font-sans text-base text-slate-400">{customBody}</pre>
-                ) : (
+                  ) : (
                  <Trans>
                    `${inviterName} has invited you to ${action} the document "${documentName}".`
-                  </Trans>
+                  )}
-                )}
+                </Text>
-              </Text>
+              </Section>
-            </Section>
+            </Container>
          </Container>
-          <Hr className="mx-auto mt-12 max-w-xl" />
+            <Hr className="mx-auto mt-12 max-w-xl" />
-          <Container className="mx-auto max-w-xl">
+            <Container className="mx-auto max-w-xl">
-            <TemplateFooter />
+              <TemplateFooter />
-          </Container>
+            </Container>
-        </Section>
+          </Section>
-      </Body>
+        </Body>
      </Tailwind>
    </Html>
  );
 };
--- a/packages/email/templates/document-pending.tsx
+++ b/packages/email/templates/document-pending.tsx
@@ -1,7 +1,6 @@
-import { msg } from '@lingui/macro';
+import config from '@documenso/tailwind-config';
 import { useLingui } from '@lingui/react';
-import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
+import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from '../components';
 import type { TemplateDocumentPendingProps } from '../template-components/template-document-pending';
 import { TemplateDocumentPending } from '../template-components/template-document-pending';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -12,9 +11,7 @@ export const DocumentPendingEmailTemplate = ({
  documentName = 'Open Source Pledge.pdf',
  assetBaseUrl = 'http://localhost:3002',
 }: DocumentPendingEmailTemplateProps) => {
-  const { _ } = useLingui();
+  const previewText = `Pending Document`;
  const previewText = msg`Pending Document`;
  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@@ -23,27 +20,36 @@ export const DocumentPendingEmailTemplate = ({
  return (
    <Html>
      <Head />
-      <Preview>{_(previewText)}</Preview>
+      <Preview>{previewText}</Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: config.theme.extend.colors,
            },
          },
        }}
      >
        <Body className="mx-auto my-auto font-sans">
          <Section className="bg-white">
            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
              <Section>
                <Img
                  src={getAssetUrl('/static/logo.png')}
                  alt="Documenso Logo"
                  className="mb-4 h-6"
                />
-      <Body className="mx-auto my-auto font-sans">
+                <TemplateDocumentPending documentName={documentName} assetBaseUrl={assetBaseUrl} />
-        <Section className="bg-white">
+              </Section>
-          <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+            </Container>
            <Section>
              <Img
                src={getAssetUrl('/static/logo.png')}
                alt="Documenso Logo"
                className="mb-4 h-6"
              />
-              <TemplateDocumentPending documentName={documentName} assetBaseUrl={assetBaseUrl} />
+            <Container className="mx-auto max-w-xl">
-            </Section>
+              <TemplateFooter />
-          </Container>
+            </Container>
-
+          </Section>
-          <Container className="mx-auto max-w-xl">
+        </Body>
-            <TemplateFooter />
+      </Tailwind>
          </Container>
        </Section>
      </Body>
    </Html>
  );
 };
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							`export { render, renderAsync } from '@react-email/render';`