import React, { useState } from "react"; import Image from "next/image"; import { Controller, useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; import { Camera, User2 } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { Button, Input } from "@plane/ui"; import { OnboardingSidebar, OnboardingStepIndicator } from "components/onboarding"; import { UserImageUploadModal } from "components/core"; // types import { IUser } from "types"; // services import { FileService } from "services/file.service"; // assets import IssuesSvg from "public/onboarding/onboarding-issues.svg"; const defaultValues: Partial = { first_name: "", avatar: "", use_case: undefined, }; type Props = { user?: IUser; setUserName: (name: string) => void; }; const USE_CASES = [ "Build Products", "Manage Feedbacks", "Service delivery", "Field force management", "Code Repository Integration", "Bug Tracking", "Test Case Management", "Resource allocation", ]; const fileService = new FileService(); export const UserDetails: React.FC = observer((props) => { const { user, setUserName } = props; const [isRemoving, setIsRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); const { user: userStore, workspace: { workspaces }, } = useMobxStore(); const workspaceName = workspaces ? workspaces[0]?.name : "New Workspace"; const { getValues, handleSubmit, control, watch, setValue, formState: { errors, isSubmitting, isValid }, } = useForm({ defaultValues, }); const onSubmit = async (formData: IUser) => { if (!user) return; const payload: Partial = { ...formData, first_name: formData.first_name.split(" ")[0], last_name: formData.first_name.split(" ")[1], use_case: formData.use_case, onboarding_step: { ...user.onboarding_step, profile_complete: true, }, }; await userStore.updateCurrentUser(payload); }; const handleDelete = (url: string | null | undefined) => { if (!url) return; setIsRemoving(true); fileService.deleteUserFile(url).finally(() => { setValue("avatar", ""); setIsRemoving(false); }); }; return (
( )} />
( setIsImageUploadModalOpen(false)} isRemoving={isRemoving} handleDelete={() => handleDelete(getValues("avatar"))} onSuccess={(url) => { onChange(url); setIsImageUploadModalOpen(false); }} value={value && value.trim() !== "" ? value : null} /> )} />

What do we call you?

( { setUserName(event.target.value); onChange(event); }} ref={ref} hasError={Boolean(errors.first_name)} placeholder="Enter your full name..." className="w-full focus:border-custom-primary-100 border-onboarding-border-100" /> )} />
(

And how will you use Plane{value.length > 0 ? ", " : ""} {value}?

)} />

Choose just one

(
{USE_CASES.map((useCase) => (
onChange(useCase)} > {useCase}
))}
)} />
issue-image
); });