feat: web i18n (#1286)

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

@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -40,9 +42,11 @@ export type DeleteWebhookDialogProps = {
 };
 
 export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogProps) => {
-  const router = useRouter();
+  const { _ } = useLingui();
   const { toast } = useToast();
 
+  const router = useRouter();
+
   const team = useOptionalCurrentTeam();
 
   const [open, setOpen] = useState(false);
@@ -51,7 +55,7 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
 
   const ZDeleteWebhookFormSchema = z.object({
     webhookUrl: z.literal(deleteMessage, {
-      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+      errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
     }),
   });
 
@@ -71,9 +75,9 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
       await deleteWebhook({ id: webhook.id, teamId: team?.id });
 
       toast({
-        title: 'Webhook deleted',
+        title: _(msg`Webhook deleted`),
+        description: _(msg`The webhook has been successfully deleted.`),
         duration: 5000,
-        description: 'The webhook has been successfully deleted.',
       });
 
       setOpen(false);
@@ -81,11 +85,12 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
       router.refresh();
     } catch (error) {
       toast({
-        title: 'An unknown error occurred',
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to delete it. Please try again later.`,
+        ),
         variant: 'destructive',
         duration: 5000,
-        description:
-          'We encountered an unknown error while attempting to delete it. Please try again later.',
       });
     }
   };
@@ -101,18 +106,22 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
       <DialogTrigger asChild>
         {children ?? (
           <Button className="mr-4" variant="destructive">
-            Delete
+            <Trans>Delete</Trans>
           </Button>
         )}
       </DialogTrigger>
 
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Delete Webhook</DialogTitle>
+          <DialogTitle>
+            <Trans>Delete Webhook</Trans>
+          </DialogTitle>
 
           <DialogDescription>
-            Please note that this action is irreversible. Once confirmed, your webhook will be
-            permanently deleted.
+            <Trans>
+              Please note that this action is irreversible. Once confirmed, your webhook will be
+              permanently deleted.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -128,10 +137,12 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>
-                      Confirm by typing:{' '}
-                      <span className="font-sm text-destructive font-semibold">
-                        {deleteMessage}
-                      </span>
+                      <Trans>
+                        Confirm by typing:{' '}
+                        <span className="font-sm text-destructive font-semibold">
+                          {deleteMessage}
+                        </span>
+                      </Trans>
                     </FormLabel>
                     <FormControl>
                       <Input className="bg-background" type="text" {...field} />
@@ -149,7 +160,7 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
                     className="flex-1"
                     onClick={() => setOpen(false)}
                   >
-                    Cancel
+                    <Trans>Cancel</Trans>
                   </Button>
 
                   <Button
@@ -159,7 +170,7 @@ export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogPr
                     disabled={!form.formState.isValid}
                     loading={form.formState.isSubmitting}
                   >
-                    I'm sure! Delete it
+                    <Trans>I'm sure! Delete it</Trans>
                   </Button>
                 </div>
               </DialogFooter>