import React, { useEffect, useState, ReactElement } from "react"; import { Controller, useForm } from "react-hook-form"; import { Disclosure, Transition } from "@headlessui/react"; // services import { FileService } from "services/file.service"; import { UserService } from "services/user.service"; // hooks import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; // layouts import { ProfileSettingsLayout } from "layouts/settings-layout"; // components import { ImagePickerPopover, UserImageUploadModal } from "components/core"; import { DeactivateAccountModal } from "components/account"; // ui import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui"; // icons import { ChevronDown, User2 } from "lucide-react"; // types import type { IUser } from "types"; import type { NextPageWithLayout } from "types/app"; // constants import { USER_ROLES } from "constants/workspace"; import { TIME_ZONES } from "constants/timezones"; const defaultValues: Partial = { avatar: "", cover_image: "", first_name: "", last_name: "", display_name: "", email: "", role: "Product / Project Manager", user_timezone: "Asia/Kolkata", }; const fileService = new FileService(); const userService = new UserService(); const ProfileSettingsPage: NextPageWithLayout = () => { const [isRemoving, setIsRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); const [deactivateAccountModal, setDeactivateAccountModal] = useState(false); // form info const { handleSubmit, reset, watch, control, formState: { errors, isSubmitting }, } = useForm({ defaultValues }); const { setToastAlert } = useToast(); const { user: myProfile, mutateUser } = useUserAuth(); useEffect(() => { reset({ ...defaultValues, ...myProfile }); }, [myProfile, reset]); const onSubmit = async (formData: IUser) => { if (formData.first_name === "" || formData.last_name === "") { setToastAlert({ type: "error", title: "Error!", message: "First and last names are required.", }); return; } const payload: Partial = { first_name: formData.first_name, last_name: formData.last_name, avatar: formData.avatar, cover_image: formData.cover_image, role: formData.role, display_name: formData.display_name, user_timezone: formData.user_timezone, }; await userService .updateUser(payload) .then((res) => { mutateUser((prevData: any) => { if (!prevData) return prevData; return { ...prevData, ...res }; }, false); setToastAlert({ type: "success", title: "Success!", message: "Profile updated successfully.", }); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "There was some error in updating your profile. Please try again.", }) ); }; const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => { if (!url) return; setIsRemoving(true); fileService.deleteUserFile(url).then(() => { if (updateUser) userService .updateUser({ avatar: "" }) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Profile picture removed successfully.", }); mutateUser((prevData: any) => { if (!prevData) return prevData; return { ...prevData, avatar: "" }; }, false); setIsRemoving(false); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "There was some error in deleting your profile picture. Please try again.", }); }) .finally(() => setIsRemoving(false)); }); }; const timeZoneOptions = TIME_ZONES.map((timeZone) => ({ value: timeZone.value, query: timeZone.label + " " + timeZone.value, content: timeZone.label, })); if (!myProfile) return (
); return ( <> ( setIsImageUploadModalOpen(false)} isRemoving={isRemoving} handleDelete={() => handleDelete(myProfile?.avatar, true)} onSuccess={(url) => { onChange(url); handleSubmit(onSubmit)(); setIsImageUploadModalOpen(false); }} value={value && value.trim() !== "" ? value : null} /> )} /> setDeactivateAccountModal(false)} />
{myProfile?.first_name
( onChange(imageUrl)} control={control} value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} /> )} />
{`${watch("first_name")} ${watch("last_name")}`}
{watch("email")}
{/* Activity Overview */}

First name

( )} />

Last name

( )} />

Email

( )} />

Role

( {USER_ROLES.map((item) => ( {item.label} ))} )} /> {errors.role && Please select a role}

Display name

{ if (value.trim().length < 1) return "Display name can't be empty."; if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces."; if (value.replace(/\s/g, "").length < 1) return "Display name must be at least 1 characters long."; if (value.replace(/\s/g, "").length > 20) return "Display name must be less than 20 characters long."; return true; }, }} render={({ field: { value, onChange, ref } }) => ( )} />

Timezone

( t.value === value)?.label ?? value : "Select a timezone"} options={timeZoneOptions} onChange={onChange} optionsClassName="w-full" buttonClassName="border-none" className="rounded-md border-[0.5px] !border-custom-border-200" input /> )} /> {errors.role && Please select a role}
{({ open }) => ( <> Deactivate account
The danger zone of the profile page is a critical area that requires careful consideration and attention. When deactivating an account, all of the data and resources within that account will be permanently removed and cannot be recovered.
)}
); }; ProfileSettingsPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default ProfileSettingsPage;