import React, { useEffect } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { useForm, Controller, useFieldArray } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; import { ChevronDown, Plus, X } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui"; // services import { ProjectMemberService } from "services/project"; // hooks import useToast from "hooks/use-toast"; // types import { IProjectMember, TUserProjectRole } from "types"; // constants import { EUserWorkspaceRoles, ROLE } from "constants/workspace"; type Props = { isOpen: boolean; members: IProjectMember[]; onClose: () => void; onSuccess: () => void; }; type member = { role: TUserProjectRole; member_id: string; }; type FormValues = { members: member[]; }; const defaultValues: FormValues = { members: [ { role: 5, member_id: "", }, ], }; // services const projectMemberService = new ProjectMemberService(); export const SendProjectInvitationModal: React.FC = observer((props) => { const { isOpen, members, onClose, onSuccess } = props; const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { user: { currentProjectRole }, workspaceMember: { workspaceMembers }, trackEvent: { postHogEventTracker }, } = useMobxStore(); const { formState: { errors, isSubmitting }, reset, handleSubmit, control, } = useForm(); const { fields, append, remove } = useFieldArray({ control, name: "members", }); const uninvitedPeople = workspaceMembers?.filter((person) => { const isInvited = members?.find((member) => member.member.id === person.member.id); return !isInvited; }); const onSubmit = async (formData: FormValues) => { if (!workspaceSlug || !projectId || isSubmitting) return; const payload = { ...formData }; await projectMemberService .bulkAddMembersToProject(workspaceSlug.toString(), projectId.toString(), payload) .then((res) => { onSuccess(); onClose(); setToastAlert({ title: "Success", type: "success", message: "Member added successfully", }); postHogEventTracker("PROJECT_MEMBER_INVITE", { ...res, state: "SUCCESS", }); }) .catch((error) => { console.log(error); postHogEventTracker("PROJECT_MEMBER_INVITE", { state: "FAILED", }); }) .finally(() => { reset(defaultValues); }); }; const handleClose = () => { onClose(); const timeout = setTimeout(() => { reset(defaultValues); clearTimeout(timeout); }, 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.display_name, content: (
{person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
), })); return (
Invite Members

Invite members to work on your project.

{fields.map((field, index) => (
{ const selectedMember = workspaceMembers?.find((p) => p.member.id === value)?.member; return ( {value && value !== "" ? (
{selectedMember?.display_name}
) : (
Select co-worker
)}
( {field.value ? ROLE[field.value] : "Select role"}
} input width="w-full" > {Object.entries(ROLE).map(([key, label]) => { if (parseInt(key) > (currentProjectRole ?? EUserWorkspaceRoles.GUEST)) return null; return ( {label} ); })} )} /> {errors.members && errors.members[index]?.role && ( {errors.members[index]?.role?.message} )}
{fields.length > 1 && ( )}
))}
); });