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

apps/app/pages/onboarding.tsx

@@ -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>
   );
 };