forked from github/plane
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
// types
|
|
import { useForm } from "react-hook-form";
|
|
import useToast from "hooks/use-toast";
|
|
import workspaceService from "services/workspace.service";
|
|
import { IUser } from "types";
|
|
// ui components
|
|
import { MultiInput, OutlineButton } from "components/ui";
|
|
|
|
type Props = {
|
|
setStep: React.Dispatch<React.SetStateAction<number>>;
|
|
workspace: any;
|
|
};
|
|
|
|
const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
|
|
const { setToastAlert } = useToast();
|
|
|
|
const {
|
|
setValue,
|
|
watch,
|
|
handleSubmit,
|
|
formState: { isSubmitting },
|
|
} = useForm<IUser>();
|
|
|
|
const onSubmit = async (formData: IUser) => {
|
|
await workspaceService
|
|
.inviteWorkspace(workspace.slug, formData)
|
|
.then((res) => {
|
|
console.log(res);
|
|
setToastAlert({
|
|
type: "success",
|
|
title: "Invitations sent!",
|
|
});
|
|
setStep(4);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form
|
|
className="grid w-full place-items-center space-y-8"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
onKeyDown={(e) => {
|
|
if (e.code === "Enter") e.preventDefault();
|
|
}}
|
|
>
|
|
<div className="w-full space-y-8 rounded-lg bg-white p-8 md:w-2/5">
|
|
<div className="space-y-4">
|
|
<h2 className="text-2xl font-medium">Invite co-workers to your team</h2>
|
|
<div className="space-y-4">
|
|
<div className="col-span-2 space-y-2">
|
|
<MultiInput
|
|
label="Enter e-mails to invite"
|
|
name="emails"
|
|
placeholder="dummy@plane.so"
|
|
watch={watch}
|
|
setValue={setValue}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto flex h-1/4 gap-2 lg:w-1/2">
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-md bg-gray-200 px-4 py-2 text-sm"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? "Inviting..." : "Invite"}
|
|
</button>
|
|
<OutlineButton theme="secondary" className="w-full" onClick={() => setStep(4)}>
|
|
Skip
|
|
</OutlineButton>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default InviteMembers;
|