[WEB-5491] refactor: onboarding tour components show business plan feature for cloud instance. (#4844)

- Introduced `TourRoot` and `TourSidebar` components to facilitate a guided onboarding experience for new users.
- Implemented a structured tour with multiple steps, including descriptions and images for each step.
- Added `BusinessPlanFeatures` component to display features based on the user's subscription plan.
- Updated imports in the home component to integrate the new onboarding tour functionality.

apps/web/ce/components/onboarding/tour/root.tsx

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { CloseIcon, PlaneLockup } from "@plane/propel/icons";
+// assets
+import CyclesTour from "@/app/assets/onboarding/cycles.webp?url";
+import IssuesTour from "@/app/assets/onboarding/issues.webp?url";
+import ModulesTour from "@/app/assets/onboarding/modules.webp?url";
+import PagesTour from "@/app/assets/onboarding/pages.webp?url";
+import ViewsTour from "@/app/assets/onboarding/views.webp?url";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUser } from "@/hooks/store/user";
+// local imports
+import { TourSidebar } from "./sidebar";
+
+export type TOnboardingTourProps = {
+  onComplete: () => void;
+};
+
+export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
+
+const TOUR_STEPS: {
+  key: TTourSteps;
+  title: string;
+  description: string;
+  image: string;
+  prevStep?: TTourSteps;
+  nextStep?: TTourSteps;
+}[] = [
+  {
+    key: "work-items",
+    title: "Plan with work items",
+    description:
+      "The work item is the building block of the Plane. Most concepts in Plane are either associated with work items and their properties.",
+    image: IssuesTour,
+    nextStep: "cycles",
+  },
+  {
+    key: "cycles",
+    title: "Move with cycles",
+    description:
+      "Cycles help you and your team to progress faster, similar to the sprints commonly used in agile development.",
+    image: CyclesTour,
+    prevStep: "work-items",
+    nextStep: "modules",
+  },
+  {
+    key: "modules",
+    title: "Break into modules",
+    description: "Modules break your big thing into Projects or Features, to help you organize better.",
+    image: ModulesTour,
+    prevStep: "cycles",
+    nextStep: "views",
+  },
+  {
+    key: "views",
+    title: "Views",
+    description:
+      "Create custom filters to display only the work items that matter to you. Save and share your filters in just a few clicks.",
+    image: ViewsTour,
+    prevStep: "modules",
+    nextStep: "pages",
+  },
+  {
+    key: "pages",
+    title: "Document with pages",
+    description: "Use Pages to quickly jot down work items when you're in a meeting or starting a day.",
+    image: PagesTour,
+    prevStep: "views",
+  },
+];
+
+export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps) {
+  const { onComplete } = props;
+  // states
+  const [step, setStep] = useState<TTourSteps>("welcome");
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { data: currentUser } = useUser();
+
+  const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
+  const currentStep = TOUR_STEPS[currentStepIndex];
+
+  return (
+    <>
+      {step === "welcome" ? (
+        <div className="w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
+          <div className="h-full overflow-hidden">
+            <div className="grid h-64 place-items-center bg-custom-primary-100">
+              <PlaneLockup className="h-10 w-auto text-white" />
+            </div>
+            <div className="flex flex-col overflow-y-auto p-6">
+              <h3 className="font-semibold sm:text-xl">
+                Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
+              </h3>
+              <p className="mt-3 text-sm text-custom-text-200">
+                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 h-full items-end">
+                <div className="mt-12 flex items-center gap-6">
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      captureClick({
+                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.START_BUTTON,
+                      });
+                      setStep("work-items");
+                    }}
+                  >
+                    Take a Product Tour
+                  </Button>
+                  <button
+                    type="button"
+                    className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
+                    onClick={() => {
+                      captureClick({
+                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
+                      });
+                      onComplete();
+                    }}
+                  >
+                    No thanks, I will explore it myself
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-custom-background-100 sm:h-3/4 md:w-1/2 lg:w-3/5">
+          <button
+            type="button"
+            className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            onClick={onComplete}
+          >
+            <CloseIcon className="h-3 w-3 text-custom-text-100" />
+          </button>
+          <TourSidebar step={step} setStep={setStep} />
+          <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
+            <div
+              className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${
+                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
+              }`}
+            >
+              <img src={currentStep?.image} className="w-full h-full object-cover" alt={currentStep?.title} />
+            </div>
+            <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
+              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
+              <p className="mt-3 text-sm text-custom-text-200">{currentStep?.description}</p>
+              <div className="mt-3 flex h-full items-end justify-between gap-4">
+                <div className="flex items-center gap-4">
+                  {currentStep?.prevStep && (
+                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                      Back
+                    </Button>
+                  )}
+                  {currentStep?.nextStep && (
+                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "work-items")}>
+                      Next
+                    </Button>
+                  )}
+                </div>
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      captureClick({
+                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.CREATE_PROJECT_BUTTON,
+                      });
+                      onComplete();
+                      toggleCreateProjectModal(true);
+                    }}
+                  >
+                    Create your first project
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});

apps/web/ce/components/onboarding/tour/sidebar.tsx

@@ -1,12 +1,13 @@
-// icons
+// plane imports
 import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 // types
 import type { TTourSteps } from "./root";
 
 const sidebarOptions: {
   key: TTourSteps;
   label: string;
-  Icon: any;
+  Icon: React.FC<ISvgIcons>;
 }[] = [
   {
     key: "work-items",

apps/web/core/components/home/root.tsx

@@ -4,15 +4,14 @@ import useSWR from "swr";
 // plane imports
 import { PRODUCT_TOUR_TRACKER_EVENTS } from "@plane/constants";
 import { ContentWrapper } from "@plane/ui";
-// components
-import { TourRoot } from "@/components/onboarding/tour";
 // helpers
 import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useUserProfile, useUser } from "@/hooks/store/user";
-// plane web components
+// plane web imports
 import { HomePeekOverviewsRoot } from "@/plane-web/components/home";
+import { TourRoot } from "@/plane-web/components/onboarding/tour/root";
 // local imports
 import { DashboardWidgets } from "./home-dashboard-widgets";
 import { UserGreetingsView } from "./user-greetings";

apps/web/core/components/onboarding/tour/index.ts

@@ -1 +0,0 @@
-export * from "./root";

apps/web/ee/components/onboarding/tour/business-plan-features.tsx

@@ -10,8 +10,6 @@ import { getFileURL } from "@plane/utils";
 import tourImage from "@/app/assets/onboarding/tour.webp?url";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 
-export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
-
 const BUSINESS_FEATURES = [
   {
     free: "12 Seats",
@@ -43,7 +41,7 @@ type Props = {
   onComplete: () => void;
 };
 
-export const TourRoot: React.FC<Props> = observer((props) => {
+export const BusinessPlanFeatures = observer(function BusinessPlanFeatures(props: Props) {
   const { onComplete } = props;
   const { workspaceSlug } = useParams();
   const { getWorkspaceBySlug } = useWorkspace();

apps/web/ee/components/onboarding/tour/root.tsx

@@ -0,0 +1,21 @@
+import { observer } from "mobx-react";
+// ce imports
+import type { TOnboardingTourProps } from "@/ce/components/onboarding/tour/root";
+import { TourRoot as CETourRoot } from "@/ce/components/onboarding/tour/root";
+// plane web imports
+import { useWorkspaceSubscription } from "@/plane-web/hooks/store";
+// local imports
+import { BusinessPlanFeatures } from "./business-plan-features";
+
+export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps) {
+  // store hooks
+  const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail } = useWorkspaceSubscription();
+  // derived values
+  const isSelfHosted = !!subscriptionDetail?.is_self_managed;
+
+  if (!isSelfHosted) {
+    return <BusinessPlanFeatures onComplete={props.onComplete} />;
+  }
+
+  return <CETourRoot onComplete={props.onComplete} />;
+});