Add team member invitation success and error messages

The code now includes success and error messages for team member invitation completion. It validates entered email addresses for duplicates and sets a limit on the number of invitations that can be sent at once to avoid server spam. Also, visual changes have been made to the form - label placement, form message, button types, etc.

apps/web/public/locales/en/teams.json

@@ -98,6 +98,8 @@
   "membersPageHeading": "Members",
   "inviteMembersButton": "Invite Members",
   "invitingMembers": "Inviting members...",
+  "inviteMembersSuccessMessage": "Members invited successfully",
+  "inviteMembersErrorMessage": "Sorry, members could not be invited. Please try again.",
   "pendingInvitesHeading": "Pending Invites",
   "pendingInvitesDescription": " Here you can manage the pending invitations to your team.",
   "noPendingInvites": "No pending invites found",

packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx

@@ -6,6 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Plus, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 
 import { Button } from '@kit/ui/button';
 import {
@@ -22,7 +23,9 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from '@kit/ui/form';
+import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
 import {
   Tooltip,
@@ -41,6 +44,12 @@ type InviteModel = ReturnType<typeof createEmptyInviteModel>;
 
 type Role = string;
 
+/**
+ * The maximum number of invites that can be sent at once.
+ * Useful to avoid spamming the server with too large payloads
+ */
+const MAX_INVITES = 5;
+
 export function InviteMembersDialogContainer({
   accountSlug,
   accountId,
@@ -53,6 +62,7 @@ export function InviteMembersDialogContainer({
 }>) {
   const [pending, startTransition] = useTransition();
   const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation('teams');
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen} modal>
@@ -79,11 +89,17 @@ export function InviteMembersDialogContainer({
               roles={roles}
               onSubmit={(data) => {
                 startTransition(async () => {
-                  await createInvitationsAction({
+                  const promise = createInvitationsAction({
                     accountSlug,
                     invitations: data.invitations,
                   });
 
+                  toast.promise(() => promise, {
+                    loading: t('invitingMembers'),
+                    success: t('inviteMembersSuccessMessage'),
+                    error: t('inviteMembersErrorMessage'),
+                  });
+
                   setIsOpen(false);
                 });
               }}
@@ -129,6 +145,8 @@ function InviteMembersForm({
       >
         <div className="flex flex-col space-y-4">
           {fieldArray.fields.map((field, index) => {
+            const isFirst = index === 0;
+
             const emailInputName = `invitations.${index}.email` as const;
             const roleInputName = `invitations.${index}.role` as const;
 
@@ -141,7 +159,9 @@ function InviteMembersForm({
                       render={({ field }) => {
                         return (
                           <FormItem>
-                            <FormLabel>{t('emailLabel')}</FormLabel>
+                            <If condition={isFirst}>
+                              <FormLabel>{t('emailLabel')}</FormLabel>
+                            </If>
 
                             <FormControl>
                               <Input
@@ -152,6 +172,8 @@ function InviteMembersForm({
                                 {...field}
                               />
                             </FormControl>
+
+                            <FormMessage />
                           </FormItem>
                         );
                       }}
@@ -164,9 +186,11 @@ function InviteMembersForm({
                       render={({ field }) => {
                         return (
                           <FormItem>
-                            <FormLabel>
+                            <If condition={isFirst}>
-                              <Trans i18nKey={'teams:roleLabel'} />
+                              <FormLabel>
-                            </FormLabel>
+                                <Trans i18nKey={'teams:roleLabel'} />
+                              </FormLabel>
+                            </If>
 
                             <FormControl>
                               <MembershipRoleSelector
@@ -177,18 +201,20 @@ function InviteMembersForm({
                                 }}
                               />
                             </FormControl>
+
+                            <FormMessage />
                           </FormItem>
                         );
                       }}
                     />
                   </div>
 
-                  <div className={'flex w-[60px] justify-end'}>
+                  <div className={'flex w-[40px] justify-end'}>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <Button
-                            variant={'outline'}
+                            variant={'ghost'}
                             size={'icon'}
                             type={'button'}
                             disabled={fieldArray.fields.length <= 1}
@@ -214,24 +240,26 @@ function InviteMembersForm({
             );
           })}
 
-          <div>
+          <If condition={fieldArray.fields.length < MAX_INVITES}>
-            <Button
+            <div>
-              data-test={'add-new-invite-button'}
+              <Button
-              type={'button'}
+                data-test={'add-new-invite-button'}
-              variant={'link'}
+                type={'button'}
-              size={'sm'}
+                variant={'link'}
-              disabled={pending}
+                size={'sm'}
-              onClick={() => {
+                disabled={pending}
-                fieldArray.append(createEmptyInviteModel());
+                onClick={() => {
-              }}
+                  fieldArray.append(createEmptyInviteModel());
-            >
+                }}
-              <Plus className={'mr-1 h-3'} />
+              >
+                <Plus className={'mr-1 h-3'} />
 
-              <span>
+                <span>
-                <Trans i18nKey={'teams:addAnotherMemberButtonLabel'} />
+                  <Trans i18nKey={'teams:addAnotherMemberButtonLabel'} />
-              </span>
+                </span>
-            </Button>
+              </Button>
-          </div>
+            </div>
+          </If>
         </div>
 
         <Button type={'submit'} disabled={pending}>

packages/features/team-accounts/src/schema/invite-members.schema.ts

@@ -2,30 +2,25 @@ import { z } from 'zod';
 
 const InviteSchema = z.object({
   email: z.string().email(),
-  role: z.string().min(1),
+  role: z.string().min(1).max(100),
 });
 
 export const InviteMembersSchema = z
   .object({
-    invitations: InviteSchema.array(),
+    invitations: InviteSchema.array().min(1).max(5),
   })
-  .refine((data) => {
+  .refine(
-    if (!data.invitations.length) {
+    (data) => {
-      return {
+      const emails = data.invitations.map((member) =>
-        message: 'At least one invite is required',
+        member.email.toLowerCase(),
-        path: ['invites'],
+      );
-      };
-    }
 
-    const emails = data.invitations.map((member) => member.email.toLowerCase());
+      const uniqueEmails = new Set(emails);
-    const uniqueEmails = new Set(emails);
 
-    if (emails.length !== uniqueEmails.size) {
+      return emails.length === uniqueEmails.size;
-      return {
+    },
-        message: 'Duplicate emails are not allowed',
+    {
-        path: ['invites'],
+      message: 'Duplicate emails are not allowed',
-      };
+      path: ['invitations'],
-    }
+    },
-
+  );
-    return true;
-  });