style: onboarding screens (#1412)
* style: new onboarding screens * chore: onboarding tour screens * fix: build error * fix: build errors * style: default layout background * chor: update user auth hook logic, style: new onboarding screens * fix: component structure * chore: tab responsiveness added * fix: redirection logic * style: welcome screens responsiveness * chore: update workspace url input field * style: mobile responsiveness added * chore: complete onboarding workflow * style: create workspace page design update * style: workspace invitations page design update * chore: update steps logic * fix: step change logic * style: tour steps
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
26f0e9da00
commit
a1b09fcbc6
47 changed files with 1542 additions and 1080 deletions
|
|
@ -19,6 +19,7 @@ import {
|
|||
IssuesPieChart,
|
||||
IssuesStats,
|
||||
} from "components/workspace";
|
||||
import { TourRoot } from "components/onboarding";
|
||||
// ui
|
||||
import { PrimaryButton, ProductUpdatesModal } from "components/ui";
|
||||
// images
|
||||
|
|
@ -26,9 +27,10 @@ import emptyDashboard from "public/empty-state/dashboard.svg";
|
|||
// helpers
|
||||
import { render12HourFormatTime, renderShortDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { ICurrentUserResponse } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
|
||||
import { CURRENT_USER, USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { DAYS } from "constants/project";
|
||||
|
||||
|
|
@ -65,6 +67,28 @@ const WorkspacePage: NextPage = () => {
|
|||
setIsOpen={setIsProductUpdatesModalOpen}
|
||||
/>
|
||||
)}
|
||||
{user && !user.is_tour_completed && (
|
||||
<div className="fixed top-0 left-0 h-full w-full bg-custom-backdrop bg-opacity-50 transition-opacity z-20 grid place-items-center">
|
||||
<TourRoot
|
||||
onComplete={() => {
|
||||
mutate<ICurrentUserResponse>(
|
||||
CURRENT_USER,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
is_tour_completed: true,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
userService.updateUserTourCompleted(user).catch(() => mutate(CURRENT_USER));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{projects ? (
|
||||
projects.length > 0 ? (
|
||||
<div className="p-8">
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ import type { NextPage } from "next";
|
|||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS, USER_WORKSPACES } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { COMPANY_SIZE } from "constants/workspace";
|
||||
import { ORGANIZATION_SIZE } from "constants/workspace";
|
||||
|
||||
const defaultValues: Partial<IWorkspace> = {
|
||||
name: "",
|
||||
url: "",
|
||||
company_size: null,
|
||||
organization_size: "2-10",
|
||||
logo: null,
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ const WorkspaceSettings: NextPage = () => {
|
|||
const payload: Partial<IWorkspace> = {
|
||||
logo: formData.logo,
|
||||
name: formData.name,
|
||||
company_size: formData.company_size,
|
||||
organization_size: formData.organization_size,
|
||||
};
|
||||
|
||||
await workspaceService
|
||||
|
|
@ -281,18 +281,18 @@ const WorkspaceSettings: NextPage = () => {
|
|||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<Controller
|
||||
name="company_size"
|
||||
name="organization_size"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={value ? value.toString() : "Select company size"}
|
||||
label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select company size"}
|
||||
input
|
||||
>
|
||||
{COMPANY_SIZE?.map((item) => (
|
||||
<CustomSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
{ORGANIZATION_SIZE?.map((item) => (
|
||||
<CustomSelect.Option key={item} value={item}>
|
||||
{item}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,100 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import Image from "next/image";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
// next-themes
|
||||
import { useTheme } from "next-themes";
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// components
|
||||
import { OnboardingLogo } from "components/onboarding";
|
||||
// layouts
|
||||
import DefaultLayout from "layouts/default-layout";
|
||||
import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
|
||||
// images
|
||||
import Logo from "public/onboarding/logo.svg";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
// constants
|
||||
// components
|
||||
import { CreateWorkspaceForm } from "components/workspace";
|
||||
// images
|
||||
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, IWorkspace } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { CURRENT_USER } from "constants/fetch-keys";
|
||||
|
||||
const CreateWorkspace: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const defaultValues = {
|
||||
const [defaultValues, setDefaultValues] = useState({
|
||||
name: "",
|
||||
slug: "",
|
||||
company_size: null,
|
||||
};
|
||||
organization_size: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const onSubmit = async (workspace: IWorkspace) => {
|
||||
mutate<ICurrentUserResponse>(
|
||||
CURRENT_USER,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
last_workspace_id: workspace.id,
|
||||
workspace: {
|
||||
...prevData.workspace,
|
||||
fallback_workspace_id: workspace.id,
|
||||
fallback_workspace_slug: workspace.slug,
|
||||
last_workspace_id: workspace.id,
|
||||
last_workspace_slug: workspace.slug,
|
||||
},
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await userService
|
||||
.updateUser({ last_workspace_id: workspace.id })
|
||||
.then(() => router.push(`/${workspace.slug}`));
|
||||
};
|
||||
|
||||
return (
|
||||
<UserAuthorizationLayout>
|
||||
<DefaultLayout>
|
||||
<div className="relative grid h-full place-items-center p-5">
|
||||
<div className="h-full flex flex-col items-center justify-center w-full py-4">
|
||||
<div className="mb-7 flex items-center justify-center text-center">
|
||||
<OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
|
||||
</div>
|
||||
|
||||
<div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-custom-background-100 shadow-md">
|
||||
<div className="flex items-center justify-start gap-3 px-7 pt-7 pb-3.5 text-gray-8 text-sm">
|
||||
<div className="flex flex-col gap-2 justify-center ">
|
||||
<h3 className="text-base font-semibold text-custom-text-100">Create Workspace</h3>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Create or join the workspace to get started with Plane.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12">
|
||||
<div className="h-[30px] w-[133px]">
|
||||
{theme === "light" ? (
|
||||
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
|
||||
) : (
|
||||
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />
|
||||
)}
|
||||
</div>
|
||||
<CreateWorkspaceForm
|
||||
defaultValues={defaultValues}
|
||||
setDefaultValues={() => {}}
|
||||
onSubmit={(res) => router.push(`/${res.slug}`)}
|
||||
user={user}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
|
||||
{user?.email}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
|
||||
<span className="text-xs text-custom-text-200">Logged in:</span>
|
||||
<span className="text-sm text-custom-text-100">{user?.email}</span>
|
||||
<div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
|
||||
<div className="w-full space-y-7 sm:space-y-10">
|
||||
<h4 className="text-2xl font-semibold">Create your workspace</h4>
|
||||
<div className="sm:w-3/4 md:w-2/5">
|
||||
<CreateWorkspaceForm
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={defaultValues}
|
||||
setDefaultValues={setDefaultValues}
|
||||
user={user}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import {
|
|||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
// icons
|
||||
import Logo from "public/logo.png";
|
||||
import Logo from "public/plane-logos/blue-without-text.png";
|
||||
// types
|
||||
type EmailPasswordFormValues = {
|
||||
email: string;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import Image from "next/image";
|
||||
|
||||
import useSWR from "swr";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// next-themes
|
||||
import { useTheme } from "next-themes";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// hooks
|
||||
|
|
@ -13,36 +15,37 @@ import useToast from "hooks/use-toast";
|
|||
// layouts
|
||||
import DefaultLayout from "layouts/default-layout";
|
||||
import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
|
||||
// components
|
||||
import SingleInvitation from "components/workspace/single-invitation";
|
||||
import { OnboardingLogo } from "components/onboarding";
|
||||
// ui
|
||||
import { Spinner, EmptySpace, EmptySpaceItem, SecondaryButton, PrimaryButton } from "components/ui";
|
||||
import { SecondaryButton, PrimaryButton } from "components/ui";
|
||||
// icons
|
||||
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckCircleIcon } from "@heroicons/react/24/outline";
|
||||
// images
|
||||
import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
|
||||
import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
import type { IWorkspaceMemberInvitation } from "types";
|
||||
// fetch-keys
|
||||
import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
|
||||
const OnBoard: NextPage = () => {
|
||||
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
|
||||
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
|
||||
workspaceService.userWorkspaceInvitations()
|
||||
);
|
||||
|
||||
const { data: workspaces, mutate: mutateWorkspaces } = useSWR("USER_WORKSPACES", () =>
|
||||
workspaceService.userWorkspaces()
|
||||
);
|
||||
|
||||
const handleInvitation = (
|
||||
workspace_invitation: IWorkspaceMemberInvitation,
|
||||
action: "accepted" | "withdraw"
|
||||
|
|
@ -57,118 +60,120 @@ const OnBoard: NextPage = () => {
|
|||
};
|
||||
|
||||
const submitInvitations = () => {
|
||||
// userService.updateUserOnBoard();
|
||||
|
||||
if (invitationsRespond.length === 0) {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Please select atleast one invitation.",
|
||||
message: "Please select at least one invitation.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsJoiningWorkspaces(true);
|
||||
|
||||
workspaceService
|
||||
.joinWorkspaces({ invitations: invitationsRespond })
|
||||
.then(() => {
|
||||
mutateInvitations();
|
||||
mutateWorkspaces();
|
||||
mutate("USER_WORKSPACES");
|
||||
|
||||
setIsJoiningWorkspaces(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
.catch((err) => setIsJoiningWorkspaces(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<UserAuthorizationLayout>
|
||||
<DefaultLayout>
|
||||
<div className="relative grid h-full place-items-center p-5">
|
||||
<div className="h-full flex flex-col items-center justify-center w-full py-4">
|
||||
<div className="mb-7 flex items-center justify-center text-center">
|
||||
<OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
|
||||
</div>
|
||||
|
||||
<div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-custom-background-100 shadow-md">
|
||||
{invitations && workspaces ? (
|
||||
invitations.length > 0 ? (
|
||||
<div className="flex w-full flex-col gap-3 justify-between">
|
||||
<div className="flex flex-col gap-2 justify-center ">
|
||||
<h3 className="text-base font-semibold text-custom-text-100">
|
||||
Workspace Invitations
|
||||
</h3>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Create or join the workspace to get started with Plane.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul role="list" className="h-[255px] w-full overflow-y-auto">
|
||||
{invitations.map((invitation) => (
|
||||
<SingleInvitation
|
||||
key={invitation.id}
|
||||
invitation={invitation}
|
||||
invitationsRespond={invitationsRespond}
|
||||
handleInvitation={handleInvitation}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/">
|
||||
<a className="w-full">
|
||||
<SecondaryButton className="w-full">Go Home</SecondaryButton>
|
||||
</a>
|
||||
</Link>
|
||||
<PrimaryButton className="w-full" onClick={submitInvitations}>
|
||||
Accept and Continue
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
) : workspaces && workspaces.length > 0 ? (
|
||||
<div className="flex flex-col w-full overflow-auto gap-y-3">
|
||||
<h2 className="mb-4 text-xl font-medium">Your workspaces</h2>
|
||||
{workspaces.map((workspace) => (
|
||||
<Link key={workspace.id} href={workspace.slug}>
|
||||
<a>
|
||||
<div className="mb-2 flex items-center justify-between rounded border border-custom-border-100 px-4 py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm">
|
||||
<CubeIcon className="h-5 w-5 text-custom-text-200" />
|
||||
{workspace.name}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-2 text-xs text-custom-text-200">
|
||||
{workspace.owner.first_name}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12">
|
||||
<div className="h-[30px] w-[133px]">
|
||||
{theme === "light" ? (
|
||||
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
|
||||
) : (
|
||||
invitations.length === 0 &&
|
||||
workspaces.length === 0 && (
|
||||
<EmptySpace
|
||||
title="You don't have any workspaces yet"
|
||||
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||
>
|
||||
<EmptySpaceItem
|
||||
Icon={PlusIcon}
|
||||
title={"Create your Workspace"}
|
||||
action={() => {
|
||||
router.push("/create-workspace");
|
||||
}}
|
||||
/>
|
||||
</EmptySpace>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
|
||||
{user?.email}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
|
||||
<span className="text-xs text-custom-text-200">Logged in:</span>
|
||||
<span className="text-sm text-custom-text-100">{user?.email}</span>
|
||||
<div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
|
||||
<div className="w-full space-y-10">
|
||||
<h5 className="text-lg">We see that someone has invited you to</h5>
|
||||
<h4 className="text-2xl font-semibold">Join a workspace</h4>
|
||||
<div className="md:w-3/5 space-y-4">
|
||||
{invitations &&
|
||||
invitations.map((invitation) => {
|
||||
const isSelected = invitationsRespond.includes(invitation.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={invitation.id}
|
||||
className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
|
||||
isSelected
|
||||
? "border-custom-primary-100"
|
||||
: "border-custom-border-100 hover:bg-custom-background-80"
|
||||
}`}
|
||||
onClick={() =>
|
||||
handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
|
||||
}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<div className="grid place-items-center h-9 w-9 rounded">
|
||||
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
|
||||
<img
|
||||
src={invitation.workspace.logo}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded"
|
||||
alt={invitation.workspace.name}
|
||||
/>
|
||||
) : (
|
||||
<span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
|
||||
{invitation.workspace.name[0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium">
|
||||
{truncateText(invitation.workspace.name, 30)}
|
||||
</div>
|
||||
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`flex-shrink-0 ${
|
||||
isSelected ? "text-custom-primary-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
<CheckCircleIcon className="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
size="md"
|
||||
onClick={submitInvitations}
|
||||
disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
|
||||
>
|
||||
Accept & Join
|
||||
</PrimaryButton>
|
||||
<Link href="/">
|
||||
<a>
|
||||
<SecondaryButton size="md" outline>
|
||||
Go Home
|
||||
</SecondaryButton>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
|
|
|
|||
|
|
@ -1,134 +1,198 @@
|
|||
import { useEffect, useState } from "react";
|
||||
// next imports
|
||||
|
||||
import Router from "next/router";
|
||||
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,
|
||||
OnboardingCard,
|
||||
OnboardingLogo,
|
||||
UserDetails,
|
||||
Workspace,
|
||||
} from "components/onboarding";
|
||||
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
|
||||
// ui
|
||||
import { PrimaryButton, Spinner } from "components/ui";
|
||||
// constant
|
||||
import { ONBOARDING_CARDS } from "constants/workspace";
|
||||
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, OnboardingSteps } 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 | number>(null);
|
||||
const [userRole, setUserRole] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [step, setStep] = useState<number | null>(null);
|
||||
|
||||
const [workspace, setWorkspace] = useState();
|
||||
const { theme } = useTheme();
|
||||
|
||||
const { user, isLoading: userLoading, mutateUser } = useUserAuth("onboarding");
|
||||
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()
|
||||
);
|
||||
|
||||
const updateLastWorkspace = async () => {
|
||||
if (!userWorkspaces) return;
|
||||
|
||||
mutate<ICurrentUserResponse>(
|
||||
CURRENT_USER,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
last_workspace_id: userWorkspaces[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,
|
||||
},
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await userService.updateUser({ last_workspace_id: userWorkspaces?.[0]?.id });
|
||||
};
|
||||
|
||||
const stepChange = async (steps: Partial<OnboardingSteps>) => {
|
||||
if (!user) return;
|
||||
|
||||
const payload: Partial<IUser> = {
|
||||
onboarding_step: {
|
||||
...user.onboarding_step,
|
||||
...steps,
|
||||
},
|
||||
};
|
||||
|
||||
mutate<ICurrentUserResponse>(
|
||||
CURRENT_USER,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
...payload,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await userService.updateUser(payload);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user && step === null) {
|
||||
let currentStep: number = 1;
|
||||
if (user?.role) currentStep = 2;
|
||||
if (user?.last_workspace_id) currentStep = 4;
|
||||
setStep(() => currentStep);
|
||||
}
|
||||
}, [step, user]);
|
||||
const handleStepChange = async () => {
|
||||
if (!user || !userWorkspaces || !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 &&
|
||||
onboardingStep.workspace_create &&
|
||||
!onboardingStep.workspace_invite &&
|
||||
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]);
|
||||
|
||||
if (userLoading || step === null)
|
||||
return (
|
||||
<div className="grid h-screen place-items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
{userLoading || isLoading || step === null ? (
|
||||
<div className="grid h-screen place-items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative grid h-full place-items-center p-5">
|
||||
{step <= 3 ? (
|
||||
<div className="h-full flex flex-col justify-center w-full py-4">
|
||||
<div className="mb-7 flex items-center justify-center text-center">
|
||||
<OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
|
||||
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
|
||||
{step === 1 ? (
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
|
||||
<div className="h-[30px] w-[30px]">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
|
||||
</div>
|
||||
{step === 1 ? (
|
||||
<UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
|
||||
) : step === 2 ? (
|
||||
<Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
|
||||
) : (
|
||||
step === 3 && <InviteMembers setStep={setStep} workspace={workspace} user={user} />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full max-w-2xl flex-col gap-12">
|
||||
<div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-custom-background-100 pb-7 text-center shadow-md">
|
||||
{step === 4 ? (
|
||||
<OnboardingCard data={ONBOARDING_CARDS.welcome} />
|
||||
) : step === 5 ? (
|
||||
<OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
|
||||
) : step === 6 ? (
|
||||
<OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
|
||||
) : step === 7 ? (
|
||||
<OnboardingCard data={ONBOARDING_CARDS.module} gradient />
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
|
||||
<div className="h-[30px] w-[133px]">
|
||||
{theme === "light" ? (
|
||||
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
|
||||
) : (
|
||||
step === 8 && <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
|
||||
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />
|
||||
)}
|
||||
<div className="mx-auto flex h-1/4 items-end lg:w-1/2">
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
className="flex w-full items-center justify-center text-center "
|
||||
size="md"
|
||||
onClick={() => {
|
||||
if (step === 8) {
|
||||
setIsLoading(true);
|
||||
userService
|
||||
.updateUserOnBoard({ userRole }, user)
|
||||
.then(async () => {
|
||||
mutateUser();
|
||||
const userWorkspaces = await workspaceService.userWorkspaces();
|
||||
|
||||
const lastActiveWorkspace =
|
||||
userWorkspaces.find(
|
||||
(workspace) => workspace.id === user?.last_workspace_id
|
||||
) ?? userWorkspaces[0];
|
||||
|
||||
if (lastActiveWorkspace) {
|
||||
mutateUser();
|
||||
Router.push(`/${lastActiveWorkspace.slug}`);
|
||||
return;
|
||||
} else {
|
||||
const invitations = await workspaceService.userWorkspaceInvitations();
|
||||
if (invitations.length > 0) {
|
||||
Router.push(`/invitations`);
|
||||
return;
|
||||
} else {
|
||||
Router.push(`/create-workspace`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setIsLoading(false);
|
||||
console.log(err);
|
||||
});
|
||||
} else setStep((prevData) => (prevData != null ? prevData + 1 : prevData));
|
||||
}}
|
||||
>
|
||||
{step === 4 || step === 8 ? "Get Started" : "Next"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
|
||||
<span className="text-xs text-custom-text-200">Logged in:</span>
|
||||
<span className="text-sm text-custom-text-100">{user?.email}</span>
|
||||
<div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
|
||||
{user?.email}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
|
||||
{step === 1 ? (
|
||||
<UserDetails user={user} />
|
||||
) : step === 2 ? (
|
||||
<Workspace
|
||||
user={user}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
stepChange={stepChange}
|
||||
/>
|
||||
) : step === 3 ? (
|
||||
<InviteMembers workspace={userWorkspaces?.[0]} user={user} stepChange={stepChange} />
|
||||
) : (
|
||||
step === 4 && <JoinWorkspaces stepChange={stepChange} />
|
||||
)}
|
||||
</div>
|
||||
{step !== 4 && (
|
||||
<div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
|
||||
<div className="w-3/4 md:w-1/5 space-y-1">
|
||||
<p className="text-xs text-custom-text-200">{step} of 3 steps</p>
|
||||
<div className="relative h-1 w-full rounded bg-custom-background-80">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
|
||||
style={{
|
||||
width: `${((step / 3) * 100).toFixed(0)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import DefaultLayout from "layouts/default-layout";
|
|||
// ui
|
||||
import { Input, SecondaryButton } from "components/ui";
|
||||
// icons
|
||||
import Logo from "public/logo.png";
|
||||
import Logo from "public/plane-logos/blue-without-text.png";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import DefaultLayout from "layouts/default-layout";
|
|||
// components
|
||||
import { EmailPasswordForm } from "components/account";
|
||||
// images
|
||||
import Logo from "public/logo.png";
|
||||
import Logo from "public/plane-logos/blue-without-text.png";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
type EmailPasswordFormValues = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue