import React, { useEffect } from "react"; import { observer } from "mobx-react-lite"; import { Controller, useFieldArray, useForm } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; import { Plus, X } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Button, CustomSelect, Input } from "@plane/ui"; // types import { IWorkspaceBulkInviteFormData, TUserWorkspaceRole } from "types"; // constants import { ROLE } from "constants/workspace"; type Props = { isOpen: boolean; onClose: () => void; onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise | undefined; }; type EmailRole = { email: string; role: TUserWorkspaceRole; }; type FormValues = { emails: EmailRole[]; }; const defaultValues: FormValues = { emails: [ { email: "", role: 15, }, ], }; export const SendWorkspaceInvitationModal: React.FC = observer((props) => { const { isOpen, onClose, onSubmit } = props; // mobx store const { user: { currentWorkspaceRole }, } = useMobxStore(); // form info const { control, reset, handleSubmit, formState: { isSubmitting, errors }, } = useForm(); const { fields, append, remove } = useFieldArray({ control, name: "emails", }); const handleClose = () => { onClose(); const timeout = setTimeout(() => { reset(defaultValues); clearTimeout(timeout); }, 350); }; const appendField = () => { append({ email: "", role: 15 }); }; const onSubmitForm = async (data: FormValues) => { await onSubmit(data)?.then(() => { reset(defaultValues); }); }; useEffect(() => { if (fields.length === 0) append([{ email: "", role: 15 }]); }, [fields, append]); return (
{ if (e.code === "Enter") e.preventDefault(); }} >
Invite people to collaborate

Invite members to work on your workspace.

{fields.map((field, index) => (
( <> {errors.emails?.[index]?.email && ( {errors.emails?.[index]?.email?.message} )} )} />
( {ROLE[value]}} onChange={onChange} width="w-full" input > {Object.entries(ROLE).map(([key, value]) => { if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key)) return ( {value} ); })} )} />
{fields.length > 1 && ( )}
))}
); });