import { noop } from "lodash"; import { useRouter, useSearchParams } from "next/navigation"; import type { Dispatch, SetStateAction } from "react"; import { useEffect, useState } from "react"; import classNames from "@calcom/lib/classNames"; import { Button, Steps } from "../../.."; type DefaultStep = { title: string; containerClassname?: string; contentClassname?: string; description: string; content?: ((setIsLoading: Dispatch>) => JSX.Element) | JSX.Element; isEnabled?: boolean; isLoading?: boolean; }; function WizardForm(props: { href: string; steps: T[]; disableNavigation?: boolean; containerClassname?: string; prevLabel?: string; nextLabel?: string; finishLabel?: string; stepLabel?: React.ComponentProps["stepLabel"]; }) { const searchParams = useSearchParams(); const { href, steps, nextLabel = "Next", finishLabel = "Finish", prevLabel = "Back", stepLabel } = props; const router = useRouter(); const step = parseInt((searchParams?.get("step") as string) || "1"); const currentStep = steps[step - 1]; const setStep = (newStep: number) => { router.replace(`${href}?step=${newStep || 1}`); }; const [currentStepIsLoading, setCurrentStepIsLoading] = useState(false); useEffect(() => { setCurrentStepIsLoading(false); }, [currentStep]); return (

{currentStep.title}

{currentStep.description}

{!props.disableNavigation && ( )}
{typeof currentStep.content === "function" ? currentStep.content(setCurrentStepIsLoading) : currentStep.content}
{!props.disableNavigation && (
{step > 1 && ( )}
)}
); } export default WizardForm;