plane/apps/app/components/onboarding/user-details.tsx
2023-03-30 17:47:49 +05:30

134 lines
3.9 KiB
TypeScript

import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
// hooks
import useToast from "hooks/use-toast";
// services
import userService from "services/user.service";
// ui
import { CustomSelect, Input, PrimaryButton } from "components/ui";
// types
import { IUser } from "types";
// constant
import { USER_ROLES } from "constants/workspace";
const defaultValues: Partial<IUser> = {
first_name: "",
last_name: "",
role: "",
};
type Props = {
user?: IUser;
setStep: React.Dispatch<React.SetStateAction<number>>;
};
export const UserDetails: React.FC<Props> = ({ user, setStep }) => {
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
control,
reset,
formState: { errors, isSubmitting },
} = useForm<IUser>({
defaultValues,
});
const onSubmit = async (formData: IUser) => {
await userService
.updateUser(formData)
.then(() => {
setToastAlert({
title: "User details updated successfully!",
type: "success",
});
setStep(2);
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
if (user)
reset({
first_name: user.first_name,
last_name: user.last_name,
role: user.role,
});
}, [user, reset]);
return (
<form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full max-w-xl flex-col gap-12">
<div className="flex flex-col rounded-[10px] bg-white shadow-md">
<div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
<div className="flex flex-col items-start justify-center gap-2.5">
<span>First name</span>
<Input
name="first_name"
autoComplete="off"
register={register}
validations={{
required: "First name is required",
}}
error={errors.first_name}
/>
</div>
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Last name</span>
<Input
name="last_name"
autoComplete="off"
register={register}
validations={{
required: "Last name is required",
}}
error={errors.last_name}
/>
</div>
</div>
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-10 py-7">
<span>What is your role?</span>
<div className="w-full">
<Controller
name="role"
control={control}
rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
input
width="w-full"
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
</div>
</div>
<div className="flex w-full items-center justify-center ">
<PrimaryButton
type="submit"
className="flex w-1/2 items-center justify-center text-center"
size="md"
disabled={isSubmitting}
>
{isSubmitting ? "Updating..." : "Continue"}
</PrimaryButton>
</div>
</div>
</form>
);
};