From 8ce1efbbe0ef22881bc7f13a8ef1e2ecc788e484 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 3 Nov 2023 22:05:03 +0530
Subject: [PATCH 1/3] fix: product tour

---
 web/components/onboarding/tour/root.tsx       | 26 ++++++++++++-------
 web/components/page-views/index.ts            |  1 +
 .../workspace-dashboard.tsx                   |  0
 web/components/views/index.ts                 |  1 -
 web/pages/[workspaceSlug]/index.tsx           |  2 +-
 5 files changed, 19 insertions(+), 11 deletions(-)
 rename web/components/{views => page-views}/workspace-dashboard.tsx (100%)

diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 9b3384f442f..70dcb02cf88 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -1,16 +1,15 @@
 import { useState } from "react";
-
 import Image from "next/image";
-
-// hooks
-import useUser from "hooks/use-user";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { TourSidebar } from "components/onboarding";
 // ui
 import { Button } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
-// images
+// assets
 import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
 import IssuesTour from "public/onboarding/issues.webp";
 import CyclesTour from "public/onboarding/cycles.webp";
@@ -75,10 +74,13 @@ const TOUR_STEPS: {
   },
 ];
 
-export const TourRoot: React.FC<Props> = ({ onComplete }) => {
+export const TourRoot: React.FC<Props> = observer((props) => {
+  const { onComplete } = props;
+  // states
   const [step, setStep] = useState<TTourSteps>("welcome");
 
-  const { user } = useUser();
+  const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const user = userStore.currentUser;
 
   const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
   const currentStep = TOUR_STEPS[currentStepIndex];
@@ -149,7 +151,13 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
                   )}
                 </div>
                 {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && (
-                  <Button variant="primary" onClick={onComplete}>
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      onComplete();
+                      commandPaletteStore.toggleCreateProjectModal();
+                    }}
+                  >
                     Create my first project
                   </Button>
                 )}
@@ -160,4 +168,4 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
       )}
     </>
   );
-};
+});
diff --git a/web/components/page-views/index.ts b/web/components/page-views/index.ts
index 717070c9786..93928bede3f 100644
--- a/web/components/page-views/index.ts
+++ b/web/components/page-views/index.ts
@@ -1 +1,2 @@
 export * from "./signin";
+export * from "./workspace-dashboard";
diff --git a/web/components/views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
similarity index 100%
rename from web/components/views/workspace-dashboard.tsx
rename to web/components/page-views/workspace-dashboard.tsx
diff --git a/web/components/views/index.ts b/web/components/views/index.ts
index c2e8cd6dec7..b7ebe50817a 100644
--- a/web/components/views/index.ts
+++ b/web/components/views/index.ts
@@ -3,4 +3,3 @@ export * from "./form";
 export * from "./modal";
 export * from "./view-list-item";
 export * from "./views-list";
-export * from "./workspace-dashboard";
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
index 703882a236f..daeb8aae5a1 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
-import { WorkspaceDashboardView } from "components/views";
+import { WorkspaceDashboardView } from "components/page-views";
 import { WorkspaceDashboardHeader } from "components/headers/workspace-dashboard";
 // types
 import { NextPageWithLayout } from "types/app";

From 144bc6a2e6d755ae3ffea739cb053aa4d11a548b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 3 Nov 2023 23:54:27 +0530
Subject: [PATCH 2/3] style: product tour navigation buttons

---
 web/components/onboarding/tour/root.tsx | 26 +++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 70dcb02cf88..81f133f6e78 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -93,7 +93,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
             <div className="h-3/5 bg-custom-primary-100 grid place-items-center">
               <Image src={PlaneWhiteLogo} alt="Plane White Logo" />
             </div>
-            <div className="h-2/5 overflow-y-auto p-6">
+            <div className="h-2/5 flex flex-col overflow-y-auto p-6">
               <h3 className="font-semibold sm:text-xl">
                 Welcome to Plane, {user?.first_name} {user?.last_name}
               </h3>
@@ -101,17 +101,19 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                 We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
                 started by creating a project.
               </p>
-              <div className="flex items-center gap-6 mt-8">
-                <Button variant="primary" onClick={() => setStep("issues")}>
-                  Take a Product Tour
-                </Button>
-                <button
-                  type="button"
-                  className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
-                  onClick={onComplete}
-                >
-                  No thanks, I will explore it myself
-                </button>
+              <div className="flex items-end h-full">
+                <div className="flex items-center gap-6 mt-8">
+                  <Button variant="primary" onClick={() => setStep("issues")}>
+                    Take a Product Tour
+                  </Button>
+                  <button
+                    type="button"
+                    className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
+                    onClick={onComplete}
+                  >
+                    No thanks, I will explore it myself
+                  </button>
+                </div>
               </div>
             </div>
           </div>

From 4940601b4011fbc72cbb0e66578af3b6dba9f4d9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sun, 5 Nov 2023 12:05:26 +0530
Subject: [PATCH 3/3] refactor: step logic

---
 web/components/onboarding/tour/root.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 81f133f6e78..713c1140ec3 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -152,12 +152,12 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                     </Button>
                   )}
                 </div>
-                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && (
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
                   <Button
                     variant="primary"
                     onClick={() => {
                       onComplete();
-                      commandPaletteStore.toggleCreateProjectModal();
+                      commandPaletteStore.toggleCreateProjectModal(true);
                     }}
                   >
                     Create my first project