From bf48d93a251c241460b9d882f7cb657e44011fd2 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 6 Nov 2023 13:06:00 +0530
Subject: [PATCH] fix: product tour modal bugs (#2657)

* fix: product tour

* style: product tour navigation buttons

* refactor: step logic
---
 web/components/onboarding/tour/root.tsx       | 54 +++++++++++--------
 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, 34 insertions(+), 24 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 9b3384f44..713c1140e 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];
@@ -91,7 +93,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
             <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>
@@ -99,17 +101,19 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
                 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>
@@ -148,8 +152,14 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
                     </Button>
                   )}
                 </div>
-                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && (
-                  <Button variant="primary" onClick={onComplete}>
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      onComplete();
+                      commandPaletteStore.toggleCreateProjectModal(true);
+                    }}
+                  >
                     Create my first project
                   </Button>
                 )}
@@ -160,4 +170,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 717070c97..93928bede 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 c2e8cd6de..b7ebe5081 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 703882a23..daeb8aae5 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";