import { useState } from "react"; import Image from "next/image"; import { observer } from "mobx-react-lite"; import { X } from "lucide-react"; // hooks import { useApplication, useEventTracker, useUser } from "hooks/store"; // components import { TourSidebar } from "components/onboarding"; // ui import { Button } from "@plane/ui"; // assets import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg"; import IssuesTour from "public/onboarding/issues.webp"; import CyclesTour from "public/onboarding/cycles.webp"; import ModulesTour from "public/onboarding/modules.webp"; import ViewsTour from "public/onboarding/views.webp"; import PagesTour from "public/onboarding/pages.webp"; type Props = { onComplete: () => void; }; export type TTourSteps = "welcome" | "issues" | "cycles" | "modules" | "views" | "pages"; const TOUR_STEPS: { key: TTourSteps; title: string; description: string; image: any; prevStep?: TTourSteps; nextStep?: TTourSteps; }[] = [ { key: "issues", title: "Plan with issues", description: "The issue is the building block of the Plane. Most concepts in Plane are either associated with issues 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: "issues", 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 issues 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 issues when you're in a meeting or starting a day.", image: PagesTour, prevStep: "views", }, ]; export const TourRoot: React.FC = observer((props) => { const { onComplete } = props; // states const [step, setStep] = useState("welcome"); // store hooks const { commandPalette: commandPaletteStore } = useApplication(); const { setTrackElement } = useEventTracker(); const { currentUser } = useUser(); const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step); const currentStep = TOUR_STEPS[currentStepIndex]; return ( <> {step === "welcome" ? (
Plane White Logo

Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}

We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get started by creating a project.

) : (
{currentStep?.title}

{currentStep?.title}

{currentStep?.description}

{currentStep?.prevStep && ( )} {currentStep?.nextStep && ( )}
{currentStepIndex === TOUR_STEPS.length - 1 && ( )}
)} ); });