feat: web i18n (#1286)

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

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

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

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