import React from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { useForm, Controller } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; // ui import { CustomSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; // services import projectService from "services/project.service"; import workspaceService from "services/workspace.service"; // contexts import { useProjectMyMembership } from "contexts/project-member.context"; // hooks import useToast from "hooks/use-toast"; // types import { ICurrentUserResponse, IProjectMemberInvitation } from "types"; // fetch-keys import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // constants import { ROLE } from "constants/workspace"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; members: any[]; user: ICurrentUserResponse | undefined; }; type ProjectMember = IProjectMemberInvitation & { member_id: string; user_id: string; }; const defaultValues: Partial = { email: "", message: "", role: 5, member_id: "", user_id: "", }; const SendProjectInvitationModal: React.FC = ({ isOpen, setIsOpen, members, user }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { memberDetails } = useProjectMyMembership(); const { data: people } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); const { register, formState: { errors, isSubmitting }, handleSubmit, reset, setValue, control, } = useForm({ defaultValues, }); const uninvitedPeople = people?.filter((person) => { const isInvited = members?.find((member) => member.email === person.member.email); return !isInvited; }); const onSubmit = async (formData: ProjectMember) => { if (!workspaceSlug || !projectId || isSubmitting) return; await projectService .inviteProject(workspaceSlug as string, projectId as string, formData, user) .then((response) => { setIsOpen(false); mutate( PROJECT_INVITATIONS, (prevData) => { if (!prevData) return prevData; return [{ ...formData, ...response }, ...(prevData ?? [])]; }, false ); setToastAlert({ title: "Success", type: "success", message: "Member added successfully", }); }) .catch((error) => { console.log(error); }); }; const handleClose = () => { setIsOpen(false); const timeout = setTimeout(() => { reset(defaultValues); clearTimeout(timeout); }, 500); }; return (
Invite Members

Invite members to work on your project.

( {value && value !== "" ? people?.find((p) => p.member.id === value)?.member.email : "Select email"}
} 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) => ( {person.member.email} ))} ) : (
Invite members to workspace before adding them to a project.
)} )} />
Role
( {field.value ? ROLE[field.value] : "Select role"} } input width="w-full" > {Object.entries(ROLE).map(([key, label]) => { if (parseInt(key) > (memberDetails?.role ?? 5)) return null; return ( {label} ); })} )} />