refactor: new onboarding workflow (#1724)
* refactor: new onboarding workflow * refactor: new onboarding workflow
This commit is contained in:
parent
e8f748a67d
commit
7ad0466d65
5 changed files with 125 additions and 102 deletions
|
|
@ -24,7 +24,7 @@ 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, OnboardingSteps } from "types";
|
||||
import { ICurrentUserResponse, IUser, TOnboardingSteps } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
|
||||
|
|
@ -43,33 +43,35 @@ const Onboarding: NextPage = () => {
|
|||
workspaceService.userWorkspaceInvitations()
|
||||
);
|
||||
|
||||
// update last active workspace details
|
||||
const updateLastWorkspace = async () => {
|
||||
if (!userWorkspaces) return;
|
||||
if (!workspaces) return;
|
||||
|
||||
mutate<ICurrentUserResponse>(
|
||||
await mutate<ICurrentUserResponse>(
|
||||
CURRENT_USER,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
last_workspace_id: userWorkspaces[0]?.id,
|
||||
last_workspace_id: workspaces[0]?.id,
|
||||
workspace: {
|
||||
...prevData.workspace,
|
||||
fallback_workspace_id: userWorkspaces[0]?.id,
|
||||
fallback_workspace_slug: userWorkspaces[0]?.slug,
|
||||
last_workspace_id: userWorkspaces[0]?.id,
|
||||
last_workspace_slug: userWorkspaces[0]?.slug,
|
||||
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: userWorkspaces?.[0]?.id });
|
||||
await userService.updateUser({ last_workspace_id: workspaces?.[0]?.id });
|
||||
};
|
||||
|
||||
const stepChange = async (steps: Partial<OnboardingSteps>) => {
|
||||
// handle step change
|
||||
const stepChange = async (steps: Partial<TOnboardingSteps>) => {
|
||||
if (!user) return;
|
||||
|
||||
const payload: Partial<IUser> = {
|
||||
|
|
@ -95,16 +97,44 @@ const Onboarding: NextPage = () => {
|
|||
await userService.updateUser(payload);
|
||||
};
|
||||
|
||||
// complete onboarding
|
||||
const finishOnboarding = async () => {
|
||||
if (!user) return;
|
||||
|
||||
mutate<ICurrentUserResponse>(
|
||||
CURRENT_USER,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
is_onboarded: true,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await userService.updateUserOnBoard({ userRole: user.role }, user);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleStepChange = async () => {
|
||||
if (!user || !userWorkspaces || !invitations) return;
|
||||
if (!user || !invitations) return;
|
||||
|
||||
const onboardingStep = user.onboarding_step;
|
||||
|
||||
if (!onboardingStep.profile_complete && step !== 1) setStep(1);
|
||||
|
||||
if (onboardingStep.profile_complete && !onboardingStep.workspace_create && step !== 2)
|
||||
setStep(2);
|
||||
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 &&
|
||||
|
|
@ -113,21 +143,10 @@ const Onboarding: NextPage = () => {
|
|||
step !== 3
|
||||
)
|
||||
setStep(3);
|
||||
|
||||
if (
|
||||
onboardingStep.profile_complete &&
|
||||
onboardingStep.workspace_create &&
|
||||
onboardingStep.workspace_invite &&
|
||||
!onboardingStep.workspace_join &&
|
||||
step !== 4
|
||||
) {
|
||||
if (invitations.length > 0) setStep(4);
|
||||
else await Router.push("/");
|
||||
}
|
||||
};
|
||||
|
||||
handleStepChange();
|
||||
}, [user, invitations, userWorkspaces, step]);
|
||||
}, [user, invitations, step]);
|
||||
|
||||
if (userLoading || step === null)
|
||||
return (
|
||||
|
|
@ -167,14 +186,27 @@ const Onboarding: NextPage = () => {
|
|||
<UserDetails user={user} />
|
||||
) : step === 2 ? (
|
||||
<Workspace
|
||||
user={user}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
user={user}
|
||||
workspaces={workspaces}
|
||||
/>
|
||||
) : step === 3 ? (
|
||||
<InviteMembers workspace={userWorkspaces?.[0]} user={user} stepChange={stepChange} />
|
||||
<InviteMembers
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
user={user}
|
||||
workspace={userWorkspaces?.[0]}
|
||||
/>
|
||||
) : (
|
||||
step === 4 && <JoinWorkspaces stepChange={stepChange} />
|
||||
step === 4 && (
|
||||
<JoinWorkspaces
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
{step !== 4 && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue