feat: web i18n (#1286)

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

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

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

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