plane/apps/app/components/onboarding/invite-members.tsx
guru_sainath 6f7b563712
refactor: onboarding workflow (#1286)
* chore: onboarding steps workflow verification

* chore: onboarding variable update
2023-06-14 13:17:35 +05:30

89 lines
2.6 KiB
TypeScript

// types
import { useForm } from "react-hook-form";
import useToast from "hooks/use-toast";
import workspaceService from "services/workspace.service";
import { ICurrentUserResponse, IUser } from "types";
// ui components
import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui";
type Props = {
setStep: React.Dispatch<React.SetStateAction<number | null>>;
workspace: any;
user: ICurrentUserResponse | undefined;
};
export const InviteMembers: React.FC<Props> = ({ setStep, workspace, user }) => {
const { setToastAlert } = useToast();
const {
setValue,
watch,
handleSubmit,
formState: { isSubmitting },
} = useForm<IUser>();
const onSubmit = async (formData: IUser) => {
await workspaceService
.inviteWorkspace(workspace.slug, formData, user)
.then(() => {
setToastAlert({
type: "success",
title: "Invitations sent!",
});
setStep(4);
})
.catch((err) => console.log(err));
};
const checkEmail = watch("emails") && watch("emails").length > 0;
return (
<form
className="flex w-full items-center justify-center"
onSubmit={handleSubmit(onSubmit)}
onKeyDown={(e) => {
if (e.code === "Enter") e.preventDefault();
}}
>
<div className="flex w-full max-w-xl flex-col gap-12">
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-base p-7 shadow-md">
<h2 className="text-xl font-medium">Invite co-workers to your team</h2>
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Email</span>
<div className="w-full">
<MultiInput
name="emails"
placeholder="Enter co-workers Email IDs"
watch={watch}
setValue={setValue}
className="w-full"
/>
</div>
</div>
</div>
<div className="flex w-full flex-col items-center justify-center gap-3">
<PrimaryButton
type="submit"
className="flex w-1/2 items-center justify-center text-center"
disabled={!checkEmail}
loading={isSubmitting}
size="md"
>
{isSubmitting ? "Inviting..." : "Continue"}
</PrimaryButton>
<SecondaryButton
type="button"
className="w-1/2 rounded-lg border-none bg-transparent"
size="md"
outline
onClick={() => setStep(4)}
>
Skip
</SecondaryButton>
</div>
</div>
</form>
);
};