import { useEffect } from "react"; import { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // hooks import useToast from "hooks/use-toast"; // services import userService from "services/user.service"; // ui import { CustomSearchSelect, CustomSelect, Input, PrimaryButton } from "components/ui"; // types import { ICurrentUserResponse, IUser } from "types"; // fetch-keys import { CURRENT_USER } from "constants/fetch-keys"; // helpers import { getUserTimeZoneFromWindow } from "helpers/date-time.helper"; // constants import { USER_ROLES } from "constants/workspace"; import { TIME_ZONES } from "constants/timezones"; const defaultValues: Partial = { first_name: "", last_name: "", role: "", }; type Props = { user?: IUser; }; const timeZoneOptions = TIME_ZONES.map((timeZone) => ({ value: timeZone.value, query: timeZone.label + " " + timeZone.value, content: timeZone.label, })); export const UserDetails: React.FC = ({ user }) => { const { setToastAlert } = useToast(); const { register, handleSubmit, control, reset, formState: { errors, isSubmitting, isValid }, } = useForm({ defaultValues, }); const onSubmit = async (formData: IUser) => { if (!user) return; const payload: Partial = { ...formData, onboarding_step: { ...user.onboarding_step, profile_complete: true, }, }; await userService .updateUser(payload) .then(() => { mutate( CURRENT_USER, (prevData) => { if (!prevData) return prevData; return { ...prevData, ...payload, }; }, false ); setToastAlert({ type: "success", title: "Success!", message: "Details updated successfully.", }); }) .catch((err) => { mutate(CURRENT_USER); }); }; useEffect(() => { if (user) { reset({ first_name: user.first_name, last_name: user.last_name, role: user.role, user_timezone: getUserTimeZoneFromWindow(), }); } }, [user, reset]); return (
{'"'}
Hey there 👋🏻
Let{"'"}s get you onboard!

Set up your Plane profile.

What{"'"}s your role?
( onChange(val)} label={ value ? ( value.toString() ) : ( Select your role... ) } input width="w-full" > {USER_ROLES.map((item) => ( {item.label} ))} )} /> {errors.role && {errors.role.message}}
What time zone are you in?
( t.value === value)?.label ?? value : "Select a timezone" } options={timeZoneOptions} onChange={onChange} optionsClassName="w-full" input /> )} /> {errors?.user_timezone && ( {errors.user_timezone.message} )}
{isSubmitting ? "Updating..." : "Continue"}
); };