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"; // hooks import { useEventTracker, useUser, useWorkspace } from "hooks/store"; import useUserAuth from "hooks/use-user-auth"; // services import { WorkspaceService } from "services/workspace.service"; // layouts import DefaultLayout from "layouts/default-layout"; import { UserAuthWrapper } from "layouts/auth-layout"; // components import { InviteMembers, JoinWorkspaces, UserDetails, SwitchOrDeleteAccountModal } from "components/onboarding"; import { PageHead } from "components/core"; // ui import { Avatar, Spinner } from "@plane/ui"; // images import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; // types import { IUser, TOnboardingSteps } from "@plane/types"; import { NextPageWithLayout } from "lib/types"; // constants import { USER_ONBOARDING_COMPLETED } from "constants/event-tracker"; // services const workspaceService = new WorkspaceService(); const OnboardingPage: NextPageWithLayout = observer(() => { // states const [step, setStep] = useState(null); const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false); // router const router = useRouter(); // store hooks const { captureEvent } = useEventTracker(); const { currentUser, currentUserLoader, updateCurrentUser, updateUserOnBoard } = useUser(); const { workspaces, fetchWorkspaces } = useWorkspace(); // custom hooks const {} = useUserAuth({ routeAuth: "onboarding", user: currentUser, isLoading: currentUserLoader }); const user = currentUser ?? undefined; const workspacesList = Object.values(workspaces ?? {}); const { setTheme } = useTheme(); const { control, setValue } = useForm<{ full_name: string }>({ defaultValues: { full_name: "", }, }); useSWR(`USER_WORKSPACES_LIST`, () => 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 || !workspacesList) return; await updateUserOnBoard() .then(() => { captureEvent(USER_ONBOARDING_COMPLETED, { user_role: user.role, email: user.email, user_id: user.id, status: "SUCCESS", }); }) .catch((error) => { console.log(error); }); router.replace(`/${workspacesList[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 && workspacesList && workspacesList?.length > 0 ) { await updateCurrentUser({ onboarding_step: { ...user.onboarding_step, workspace_join: true, workspace_create: true, }, last_workspace_id: workspacesList[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, updateCurrentUser, workspacesList]); 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;