import { useEffect, useState, ReactElement, Fragment } from "react"; import Image from "next/image"; import { useTheme } from "next-themes"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; import { ChevronDown } from "lucide-react"; import { Menu, Transition } from "@headlessui/react"; import { Controller, useForm } from "react-hook-form"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { WorkspaceService } from "services/workspace.service"; // hooks import useUserAuth from "hooks/use-user-auth"; // layouts import DefaultLayout from "layouts/default-layout"; import { UserAuthWrapper } from "layouts/auth-layout"; // components import { InviteMembers, JoinWorkspaces, UserDetails } from "components/onboarding"; import { DeactivateAccountModal } from "components/account"; // ui import { Avatar, Spinner } from "@plane/ui"; // images import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; // types import { IUser, TOnboardingSteps } from "types"; import { NextPageWithLayout } from "types/app"; // services const workspaceService = new WorkspaceService(); const OnboardingPage: NextPageWithLayout = observer(() => { const [step, setStep] = useState(null); const [showDeleteModal, setShowDeleteModal] = useState(false); const { user: { currentUser, updateCurrentUser, updateUserOnBoard }, workspace: workspaceStore, } = useMobxStore(); const router = useRouter(); const user = currentUser ?? undefined; const workspaces = workspaceStore.workspaces; const { setTheme } = useTheme(); const {} = useUserAuth("onboarding"); const { control, setValue } = useForm<{ full_name: string }>({ defaultValues: { full_name: "", }, }); const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () => workspaceService.userWorkspaceInvitations() ); // handle step change const stepChange = async (steps: Partial) => { if (!user) return; const payload: Partial = { onboarding_step: { ...user.onboarding_step, ...steps, }, }; await updateCurrentUser(payload); }; // complete onboarding const finishOnboarding = async () => { if (!user || !workspaces) return; await updateUserOnBoard(); router.replace(`/${workspaces[0].slug}`); }; useEffect(() => { setTheme("system"); }, [setTheme]); useEffect(() => { const handleStepChange = async () => { if (!user || !invitations) return; const onboardingStep = user.onboarding_step; if (!onboardingStep.workspace_join && !onboardingStep.workspace_create && step !== 1) setStep(1); if (onboardingStep.workspace_join || onboardingStep.workspace_create) { if (!onboardingStep.profile_complete && step !== 2) setStep(2); } if ( onboardingStep.profile_complete && (onboardingStep.workspace_join || onboardingStep.workspace_create) && !onboardingStep.workspace_invite && step !== 3 ) setStep(3); }; handleStepChange(); }, [user, invitations, step]); return ( <> setShowDeleteModal(false)} /> {user && step !== null ? (
Plane Logo Plane
(
{step != 1 && ( 0 ? value : currentUser?.email } src={currentUser?.avatar} size={35} shape="square" fallbackBackgroundColor="#FCBE1D" className="!text-base capitalize" /> )}
{step != 1 && (

{currentUser?.first_name ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}` : value.length > 0 ? value : null}

)} {user.email}
{ setShowDeleteModal(true); }} > Delete
)} />
{step === 1 ? ( { setShowDeleteModal(true); }} finishOnboarding={finishOnboarding} stepChange={stepChange} /> ) : step === 2 ? ( setValue("full_name", value)} user={user} /> ) : ( )}
) : (
)} ); }); OnboardingPage.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default OnboardingPage;