import React, { useEffect } from "react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import { useForm, Controller, useFieldArray } from "react-hook-form"; import { ChevronDown, Plus, X } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; // hooks // ui import { Avatar, Button, CustomSelect, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui"; // helpers import { PROJECT_MEMBER_ADDED } from "@/constants/event-tracker"; import { EUserProjectRoles } from "@/constants/project"; import { ROLE } from "@/constants/workspace"; import { useEventTracker, useMember, useUser } from "@/hooks/store"; // constants type Props = { isOpen: boolean; onClose: () => void; onSuccess?: () => void; }; type member = { role: EUserProjectRoles; member_id: string; }; type FormValues = { members: member[]; }; const defaultValues: FormValues = { members: [ { role: 5, member_id: "", }, ], }; export const SendProjectInvitationModal: React.FC = observer((props) => { const { isOpen, onClose, onSuccess } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { captureEvent } = useEventTracker(); const { membership: { currentProjectRole }, } = useUser(); const { project: { projectMemberIds, bulkAddMembersToProject }, workspace: { workspaceMemberIds, getWorkspaceMemberDetails }, } = useMember(); // form info const { formState: { errors, isSubmitting }, reset, handleSubmit, control, } = useForm(); const { fields, append, remove } = useFieldArray({ control, name: "members", }); const uninvitedPeople = workspaceMemberIds?.filter((userId) => { const isInvited = projectMemberIds?.find((u) => u === userId); return !isInvited; }); const onSubmit = async (formData: FormValues) => { if (!workspaceSlug || !projectId || isSubmitting) return; const payload = { ...formData }; await bulkAddMembersToProject(workspaceSlug.toString(), projectId.toString(), payload) .then(() => { if (onSuccess) onSuccess(); onClose(); setToast({ title: "Success", type: TOAST_TYPE.SUCCESS, message: "Members added successfully.", }); captureEvent(PROJECT_MEMBER_ADDED, { members: [ ...payload.members.map((member) => ({ member_id: member.member_id, role: ROLE[member.role], })), ], state: "SUCCESS", element: "Project settings members page", }); }) .catch((error) => { console.error(error); captureEvent(PROJECT_MEMBER_ADDED, { state: "FAILED", element: "Project settings members page", }); }) .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((userId) => { const memberDetails = getWorkspaceMemberDetails(userId); if (!memberDetails?.member) return; return { value: `${memberDetails?.member.id}`, query: `${memberDetails?.member.first_name} ${memberDetails?.member .last_name} ${memberDetails?.member.display_name.toLowerCase()}`, content: (
{memberDetails?.member.display_name} ( {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
), }; }) .filter((option) => !!option) as | { value: string; query: string; content: React.JSX.Element; }[] | undefined; return (
Invite Members

Invite members to work on your project.

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