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.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<Props> = ({ onComplete }) => { const [step, setStep] = useState<TTourSteps>("welcome"); const { user } = useUser(); const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step); const currentStep = TOUR_STEPS[currentStepIndex]; return ( <> {step === "welcome" ? ( <div className="w-4/5 md:w-1/2 lg:w-2/5 h-3/4 bg-custom-background-100 rounded-[10px] overflow-hidden"> <div className="h-full overflow-hidden"> <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"> <h3 className="font-semibold sm:text-xl"> Welcome to Plane, {user?.first_name} {user?.last_name} </h3> <p className="text-custom-text-200 text-sm mt-3"> 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"> <PrimaryButton onClick={() => setStep("issues")}>Take a Product Tour</PrimaryButton> <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> ) : ( <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 type="button" className="fixed top-[19%] sm:top-[11.5%] right-[9%] md:right-[24%] lg:right-[19%] border border-custom-text-100 rounded-full p-1 translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer" onClick={onComplete} > <XMarkIcon className="h-3 w-3 text-custom-text-100" /> </button> <TourSidebar step={step} setStep={setStep} /> <div className="col-span-10 lg:col-span-7 h-full overflow-hidden"> <div className={`flex items-end h-1/2 sm:h-3/5 overflow-hidden bg-custom-primary-100 ${ currentStepIndex % 2 === 0 ? "justify-end" : "justify-start" }`} > <Image src={currentStep?.image} alt={currentStep?.title} /> </div> <div className="flex flex-col h-1/2 sm:h-2/5 p-4 overflow-y-auto"> <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3> <p className="text-custom-text-200 text-sm mt-3">{currentStep?.description}</p> <div className="h-full flex items-end justify-between gap-4 mt-3"> <div className="flex items-center gap-4"> {currentStep?.prevStep && ( <SecondaryButton onClick={() => setStep(currentStep.prevStep ?? "welcome")}> Back </SecondaryButton> )} {currentStep?.nextStep && ( <PrimaryButton onClick={() => setStep(currentStep.nextStep ?? "issues")}> Next </PrimaryButton> )} </div> {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && ( <PrimaryButton onClick={onComplete}>Create my first project</PrimaryButton> )} </div> </div> </div> </div> )} </> ); };