feat: web i18n (#1286)

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

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
 import { trpc } from '@documenso/trpc/react';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -36,14 +39,15 @@ export const DeleteTeamMemberDialog = ({
 }: DeleteTeamMemberDialogProps) => {
   const [open, setOpen] = useState(false);
 
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTeamMembers, isLoading: isDeletingTeamMember } =
     trpc.team.deleteTeamMembers.useMutation({
       onSuccess: () => {
         toast({
-          title: 'Success',
-          description: 'You have successfully removed this user from the team.',
+          title: _(msg`Success`),
+          description: _(msg`You have successfully removed this user from the team.`),
           duration: 5000,
         });
 
@@ -51,11 +55,12 @@ export const DeleteTeamMemberDialog = ({
       },
       onError: () => {
         toast({
-          title: 'An unknown error occurred',
+          title: _(msg`An unknown error occurred`),
+          description: _(
+            msg`We encountered an unknown error while attempting to remove this user. Please try again later.`,
+          ),
           variant: 'destructive',
           duration: 10000,
-          description:
-            'We encountered an unknown error while attempting to remove this user. Please try again later.',
         });
       },
     });
@@ -63,16 +68,24 @@ export const DeleteTeamMemberDialog = ({
   return (
     <Dialog open={open} onOpenChange={(value) => !isDeletingTeamMember && setOpen(value)}>
       <DialogTrigger asChild>
-        {trigger ?? <Button variant="secondary">Delete team member</Button>}
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete team member</Trans>
+          </Button>
+        )}
       </DialogTrigger>
 
       <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
 
           <DialogDescription className="mt-4">
-            You are about to remove the following user from{' '}
-            <span className="font-semibold">{teamName}</span>.
+            <Trans>
+              You are about to remove the following user from{' '}
+              <span className="font-semibold">{teamName}</span>.
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -88,7 +101,7 @@ export const DeleteTeamMemberDialog = ({
         <fieldset disabled={isDeletingTeamMember}>
           <DialogFooter>
             <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-              Cancel
+              <Trans>Cancel</Trans>
             </Button>
 
             <Button
@@ -97,7 +110,7 @@ export const DeleteTeamMemberDialog = ({
               loading={isDeletingTeamMember}
               onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
             >
-              Delete
+              <Trans>Delete</Trans>
             </Button>
           </DialogFooter>
         </fieldset>