import { useEffect, useState, ReactElement } 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, SwitchOrDeleteAccountModal } from "components/onboarding"; // 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 [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false); const { user: { currentUser, updateCurrentUser, updateUserOnBoard }, workspace: workspaceStore, trackEvent: { postHogEventTracker } } = 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: "", }, }); useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces(), { shouldRetryOnError: false, }); 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().then(() => { postHogEventTracker( "USER_ONBOARDING_COMPLETE", { user_role: user.role, email: user.email, user_id: user.id, status: "SUCCESS" } ) }).catch((error) => { console.log(error); }) 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 && workspaces && workspaces?.length > 0) { await updateCurrentUser({ onboarding_step: { ...user.onboarding_step, workspace_join: true, workspace_create: true, }, last_workspace_id: workspaces[0].id, }); setStep(2); return; } 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 ( <> setShowDeleteAccountModal(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}
{ setShowDeleteAccountModal(true); }} > Wrong e-mail address?
)} />
{step === 1 ? ( { setShowDeleteAccountModal(true); }} finishOnboarding={finishOnboarding} stepChange={stepChange} /> ) : step === 2 ? ( setValue("full_name", value)} user={user} /> ) : ( )}
) : (
)} ); }); OnboardingPage.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default OnboardingPage;