import { useEffect, useState, ReactElement } from "react"; import Image from "next/image"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; import { useTheme } from "next-themes"; // 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, Workspace } from "components/onboarding"; // ui import { Spinner } from "@plane/ui"; // images import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; // 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 { user: userStore, workspace: workspaceStore } = useMobxStore(); const user = userStore.currentUser ?? undefined; const workspaces = workspaceStore.workspaces; const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser; const { theme, setTheme } = useTheme(); const {} = useUserAuth("onboarding"); const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () => workspaceService.userWorkspaceInvitations() ); // update last active workspace details const updateLastWorkspace = async () => { if (!workspaces) return; await userStore.updateCurrentUser({ last_workspace_id: workspaces[0]?.id, }); }; // handle step change const stepChange = async (steps: Partial) => { if (!user) return; const payload: Partial = { onboarding_step: { ...user.onboarding_step, ...steps, }, }; await userStore.updateCurrentUser(payload); }; // complete onboarding const finishOnboarding = async () => { if (!user) return; await userStore.updateUserOnBoard(); }; useEffect(() => { setTheme("system"); }, [setTheme]); useEffect(() => { const handleStepChange = async () => { if (!user || !invitations) return; const onboardingStep = user.onboarding_step; if (!onboardingStep.profile_complete && step !== 1) setStep(1); if (onboardingStep.profile_complete) { if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4); else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2) setStep(2); } if ( onboardingStep.profile_complete && onboardingStep.workspace_create && !onboardingStep.workspace_invite && step !== 3 ) setStep(3); }; handleStepChange(); }, [user, invitations, step]); return ( <> {user && step !== null ? (
{step === 1 ? (
Plane logo
) : (
{theme === "light" ? ( Plane black logo ) : ( Plane white logo )}
)}
{user?.email}
{step === 1 ? ( ) : step === 2 ? ( ) : step === 3 ? ( ) : ( step === 4 && ( ) )}
{step !== 4 && (

{step} of 3 steps

)}
) : (
)} ); }); OnboardingPage.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default OnboardingPage;