import { useEffect, useState, ReactElement, Fragment } 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 { 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"; import { ChevronDown } from "lucide-react"; import { Menu, Popover, Transition } from "@headlessui/react"; import DeleteAccountModal from "components/account/delete-account-modal"; import { useRouter } from "next/router"; // 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 { 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 && ( )}
{step != 1 && (

{currentUser?.first_name} {currentUser?.last_name}

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