import { useState } from "react"; import Image from "next/image"; // hooks import useUser from "hooks/use-user"; // components import { TourSidebar } from "components/onboarding"; // ui import { PrimaryButton, SecondaryButton } from "components/ui"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; // images import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg"; import IssuesTour from "public/onboarding/issues.svg"; import CyclesTour from "public/onboarding/cycles.svg"; import ModulesTour from "public/onboarding/modules.svg"; import ViewsTour from "public/onboarding/views.svg"; import PagesTour from "public/onboarding/pages.svg"; 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 think 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: "Modules break your big think into Projects or Features, to help you organize better.", image: PagesTour, prevStep: "views", }, ]; export const TourRoot: React.FC = ({ onComplete }) => { const [step, setStep] = useState("welcome"); const { user } = useUser(); const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step); const currentStep = TOUR_STEPS[currentStepIndex]; return ( <> {step === "welcome" ? (
Plane White Logo

Welcome to Plane, {user?.first_name} {user?.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.

setStep("issues")}>Take a Product Tour
) : (
{currentStep?.title}

{currentStep?.title}

{currentStep?.description}

{currentStep?.prevStep && ( setStep(currentStep.prevStep ?? "welcome")}> Back )} {currentStep?.nextStep && ( setStep(currentStep.nextStep ?? "issues")}> Next )}
{TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && ( Create my first project )}
)} ); };