fix: product tour modal bugs (#2657)

* fix: product tour

* style: product tour navigation buttons

* refactor: step logic

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,6 +101,7 @@ 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-end h-full">
                 <div className="flex items-center gap-6 mt-8">
                   <Button variant="primary" onClick={() => setStep("issues")}>
                     Take a Product Tour
@@ -114,6 +117,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
               </div>
             </div>
           </div>
+        </div>
       ) : (
         <div className="relative w-4/5 md:w-1/2 lg:w-3/5 h-3/5 sm:h-3/4 bg-custom-background-100 rounded-[10px] grid grid-cols-10 overflow-hidden">
           <button
@@ -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 }) => {
       )}
     </>
   );
-};
+});

web/components/page-views/index.ts

@@ -1 +1,2 @@
 export * from "./signin";
+export * from "./workspace-dashboard";

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";

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";