feat: bulk invite for project (#1466)

* feat: bulk invite for project

* feat: members dropdown updated

* fix: error message added ,style: ui improvement

* feat: added add members button for scenarios with multiple members

* chore: updated watch to fields

apps/app/components/project/send-project-invitation-modal.tsx

@@ -1,14 +1,23 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
-import { useForm, Controller } from "react-hook-form";
+import { useForm, Controller, useFieldArray } from "react-hook-form";
 
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { CustomSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import {
+  Avatar,
+  CustomSearchSelect,
+  CustomSelect,
+  PrimaryButton,
+  SecondaryButton,
+} from "components/ui";
+//icons
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -17,9 +26,9 @@ import { useProjectMyMembership } from "contexts/project-member.context";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import { ICurrentUserResponse, IProjectMemberInvitation } from "types";
+import { ICurrentUserResponse } from "types";
 // fetch-keys
-import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_MEMBERS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
 
@@ -30,17 +39,22 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-type ProjectMember = IProjectMemberInvitation & {
+type member = {
+  role: 5 | 10 | 15 | 20;
   member_id: string;
-  user_id: string;
 };
 
-const defaultValues: Partial<ProjectMember> = {
-  email: "",
-  message: "",
-  role: 5,
-  member_id: "",
-  user_id: "",
+type FormValues = {
+  members: member[];
+};
+
+const defaultValues: FormValues = {
+  members: [
+    {
+      role: 5,
+      member_id: "",
+    },
+  ],
 };
 
 const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, members, user }) => {
@@ -56,14 +70,16 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
   );
 
   const {
-    register,
     formState: { errors, isSubmitting },
-    handleSubmit,
+
     reset,
-    setValue,
+    handleSubmit,
     control,
-  } = useForm<ProjectMember>({
-    defaultValues,
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "members",
   });
 
   const uninvitedPeople = people?.filter((person) => {
@@ -71,20 +87,14 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
     return !isInvited;
   });
 
-  const onSubmit = async (formData: ProjectMember) => {
+  const onSubmit = async (formData: FormValues) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
+    const payload = { ...formData };
     await projectService
-      .inviteProject(workspaceSlug as string, projectId as string, formData, user)
-      .then((response) => {
+      .inviteProject(workspaceSlug as string, projectId as string, payload, user)
+      .then(() => {
         setIsOpen(false);
-        mutate<any[]>(
-          PROJECT_INVITATIONS,
-          (prevData) => {
-            if (!prevData) return prevData;
-            return [{ ...formData, ...response }, ...(prevData ?? [])];
-          },
-          false
-        );
+        mutate(PROJECT_MEMBERS(projectId as string));
         setToastAlert({
           title: "Success",
           type: "success",
@@ -93,6 +103,9 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
       })
       .catch((error) => {
         console.log(error);
+      })
+      .finally(() => {
+        reset(defaultValues);
       });
   };
 
@@ -104,6 +117,35 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
     }, 500);
   };
 
+  const appendField = () => {
+    append({
+      role: 5,
+      member_id: "",
+    });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append([
+        {
+          role: 5,
+          member_id: "",
+        },
+      ]);
+    }
+  }, [fields, append]);
+
+  const options = uninvitedPeople?.map((person) => ({
+    value: person.member.id,
+    query: person.member.email,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={person.member} />
+        {person.member.email}
+      </div>
+    ),
+  }));
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -116,11 +158,11 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+          <div className="flex items-center justify-center min-h-full p-4 text-center">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -130,111 +172,138 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="space-y-5">
+                  <div className="space-y-5 mb-5">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                       Invite Members
                     </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-brand-secondary">
-                        Invite members to work on your project.
-                      </p>
+                  </div>
+
+                  <div className="text-sm">
+                    <div className="grid grid-cols-12 gap-x-4 mb-3 text-sm">
+                      <h6 className="col-span-7 px-1">Email</h6>
+                      <h6 className="col-span-4 px-1">Role</h6>
                     </div>
-                    <div className="space-y-3">
-                      <div>
-                        <Controller
-                          control={control}
-                          name="user_id"
-                          rules={{ required: "Please select a member" }}
-                          render={({ field: { value, onChange } }) => (
-                            <CustomSelect
-                              value={value}
-                              label={
-                                <div
-                                  className={`${errors.user_id ? "border-red-500 bg-red-50" : ""}`}
-                                >
-                                  {value && value !== ""
-                                    ? people?.find((p) => p.member.id === value)?.member.email
-                                    : "Select email"}
-                                </div>
-                              }
-                              onChange={(val: string) => {
-                                onChange(val);
-                                const person = uninvitedPeople?.find((p) => p.member.id === val);
 
-                                setValue("member_id", val);
-                                setValue("email", person?.member.email ?? "");
-                              }}
-                              input
-                              width="w-full"
-                            >
-                              {uninvitedPeople && uninvitedPeople.length > 0 ? (
-                                <>
-                                  {uninvitedPeople?.map((person) => (
-                                    <CustomSelect.Option
-                                      key={person.member.id}
-                                      value={person.member.id}
-                                    >
-                                      {person.member.email}
-                                    </CustomSelect.Option>
-                                  ))}
-                                </>
-                              ) : (
-                                <div className="text-center text-sm py-5">
-                                  Invite members to workspace before adding them to a project.
-                                </div>
+                    <div className="space-y-4 mb-3">
+                      {fields.map((field, index) => (
+                        <div
+                          key={field.id}
+                          className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start"
+                        >
+                          <div className="flex flex-col gap-1 col-span-7">
+                            <Controller
+                              control={control}
+                              name={`members.${index}.member_id`}
+                              rules={{ required: "Please select a member" }}
+                              render={({ field: { value, onChange } }) => (
+                                <CustomSearchSelect
+                                  value={value}
+                                  customButton={
+                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 text-brand-secondary hover:text-brand-base hover:bg-brand-surface-2 focus:outline-none px-3 py-2 text-sm text-left">
+                                      {value && value !== "" ? (
+                                        <div className="flex items-center gap-2">
+                                          <Avatar
+                                            user={
+                                              people?.find((p) => p.member.id === value)?.member
+                                            }
+                                          />
+                                          {people?.find((p) => p.member.id === value)?.member.email}
+                                        </div>
+                                      ) : (
+                                        <div>Select co-worker&rsquo;s email</div>
+                                      )}
+                                      <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                                    </button>
+                                  }
+                                  onChange={(val: string) => {
+                                    onChange(val);
+                                  }}
+                                  options={options}
+                                  position="left"
+                                  dropdownWidth="w-full min-w-[12rem]"
+                                />
                               )}
-                            </CustomSelect>
-                          )}
-                        />
-                      </div>
-                      <div>
-                        <h6 className="text-brand-secondary">Role</h6>
-                        <Controller
-                          name="role"
-                          control={control}
-                          render={({ field }) => (
-                            <CustomSelect
-                              {...field}
-                              label={
-                                <span className="capitalize">
-                                  {field.value ? ROLE[field.value] : "Select role"}
-                                </span>
-                              }
-                              input
-                              width="w-full"
-                            >
-                              {Object.entries(ROLE).map(([key, label]) => {
-                                if (parseInt(key) > (memberDetails?.role ?? 5)) return null;
+                            />
+                            {errors.members && errors.members[index]?.member_id && (
+                              <span className="text-sm px-1 text-red-500">
+                                {errors.members[index]?.member_id?.message}
+                              </span>
+                            )}
+                          </div>
 
-                                return (
-                                  <CustomSelect.Option key={key} value={key}>
-                                    {label}
-                                  </CustomSelect.Option>
-                                );
-                              })}
-                            </CustomSelect>
-                          )}
-                        />
-                      </div>
-                      <div>
-                        <TextArea
-                          id="message"
-                          name="message"
-                          label="Message"
-                          placeholder="Enter message"
-                          error={errors.message}
-                          register={register}
-                        />
-                      </div>
+                          <div className="flex items-center justify-between gap-2 col-span-5">
+                            <div className="flex flex-col gap-1 w-full">
+                              <Controller
+                                name={`members.${index}.role`}
+                                control={control}
+                                rules={{ required: "Select Role" }}
+                                render={({ field }) => (
+                                  <CustomSelect
+                                    {...field}
+                                    label={
+                                      <span className="capitalize">
+                                        {field.value ? ROLE[field.value] : "Select role"}
+                                      </span>
+                                    }
+                                    input
+                                    width="w-full"
+                                  >
+                                    {Object.entries(ROLE).map(([key, label]) => {
+                                      if (parseInt(key) > (memberDetails?.role ?? 5)) return null;
+
+                                      return (
+                                        <CustomSelect.Option key={key} value={key}>
+                                          {label}
+                                        </CustomSelect.Option>
+                                      );
+                                    })}
+                                  </CustomSelect>
+                                )}
+                              />
+                              {errors.members && errors.members[index]?.role && (
+                                <span className="text-sm px-1 text-red-500">
+                                  {errors.members[index]?.role?.message}
+                                </span>
+                              )}
+                            </div>
+                            <div className="flex flex-item w-6">
+                              {fields.length > 1 && (
+                                <button
+                                  type="button"
+                                  className="self-center place-items-center rounded"
+                                  onClick={() => remove(index)}
+                                >
+                                  <XMarkIcon className="h-4 w-4 text-brand-secondary" />
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
                     </div>
                   </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
-                    </PrimaryButton>
+
+                  <div className="mt-5 flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      className="flex items-center gap-2 outline-brand-accent bg-transparent text-brand-accent text-sm font-medium py-2 pr-3"
+                      onClick={appendField}
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      Add more
+                    </button>
+                    <div className="flex items-center gap-2">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton type="submit" loading={isSubmitting}>
+                        {isSubmitting
+                          ? `${
+                              fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."
+                            }`
+                          : `${fields && fields.length > 1 ? "Add Members" : "Add Member"}`}
+                      </PrimaryButton>
+                    </div>
                   </div>
                 </form>
               </Dialog.Panel>

apps/app/services/project.service.ts

@@ -8,6 +8,7 @@ import type {
   ICurrentUserResponse,
   IFavoriteProject,
   IProject,
+  IProjectBulkInviteFormData,
   IProjectMember,
   IProjectMemberInvitation,
   ISearchIssueResponse,
@@ -102,7 +103,7 @@ class ProjectServices extends APIService {
   async inviteProject(
     workspaceSlug: string,
     projectId: string,
-    data: any,
+    data: IProjectBulkInviteFormData,
     user: ICurrentUserResponse | undefined
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)

apps/app/types/projects.d.ts

@@ -113,6 +113,10 @@ export interface IProjectMemberInvitation {
   updated_by: string;
 }
 
+export interface IProjectBulkInviteFormData {
+  members: { role: 5 | 10 | 15 | 20; member_id: string }[];
+}
+
 export interface IGithubRepository {
   id: string;
   full_name: string;