import { useEffect, useState } from "react"; import Image from "next/image"; import useSWR, { mutate } from "swr"; // next-themes import { useTheme } from "next-themes"; // services import userService from "services/user.service"; import workspaceService from "services/workspace.service"; // hooks import useUserAuth from "hooks/use-user-auth"; import useWorkspaces from "hooks/use-workspaces"; // layouts import DefaultLayout from "layouts/default-layout"; // components import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding"; // ui import { Spinner } from "components/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 { ICurrentUserResponse, IUser, TOnboardingSteps } from "types"; import type { NextPage } from "next"; // fetch-keys import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys"; const Onboarding: NextPage = () => { const [step, setStep] = useState(null); const { theme, setTheme } = useTheme(); const { user, isLoading: userLoading } = useUserAuth("onboarding"); const { workspaces } = useWorkspaces(); const userWorkspaces = workspaces?.filter((w) => w.created_by === user?.id); const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations() ); // update last active workspace details const updateLastWorkspace = async () => { if (!workspaces) return; await mutate( CURRENT_USER, (prevData) => { if (!prevData) return prevData; return { ...prevData, last_workspace_id: workspaces[0]?.id, workspace: { ...prevData.workspace, fallback_workspace_id: workspaces[0]?.id, fallback_workspace_slug: workspaces[0]?.slug, last_workspace_id: workspaces[0]?.id, last_workspace_slug: workspaces[0]?.slug, }, }; }, false ); await userService.updateUser({ 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, }, }; mutate( CURRENT_USER, (prevData) => { if (!prevData) return prevData; return { ...prevData, ...payload, }; }, false ); await userService.updateUser(payload); }; // complete onboarding const finishOnboarding = async () => { if (!user) return; mutate( CURRENT_USER, (prevData) => { if (!prevData) return prevData; return { ...prevData, is_onboarded: true, }; }, false ); await userService.updateUserOnBoard({ userRole: user.role }, user); }; 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]); if (userLoading || step === null) return (
); return (
{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

)}
); }; export default Onboarding;