[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" // This is a simplified version of the toast component // In a real project, you would use the full implementation from shadcn/ui import { toast as sonnerToast } from "sonner" type ToastProps = { title?: string description?: string action?: React.ReactNode variant?: "default" | "destructive" | "success" | "warning" | "info" } export const toast = ({ title, description, action, variant = "default" }: ToastProps) => { console.log("Toast called:", { title, description, variant }) // Map our variants to Sonner's types const toastType = variant === "destructive" ? "error" : variant === "success" ? "success" : variant === "warning" ? "warning" : variant === "info" ? "info" : "default" // For default type, use the regular toast if (toastType === "default") { return sonnerToast(title, { description, action, }) } // For other types, use the specific toast method return sonnerToast[toastType](title, { description, action, }) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { Toaster } from "sonner" import "./globals.css" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/use-form-persistence.ts" "use client" import { useEffect, useState } from "react" import type { UseFormReturn } from "react-hook-form" export function useFormPersistence(form: UseFormReturn, key: string, shouldPersist = true) { const [isLoading, setIsLoading] = useState(true) const [hasPersistedData, setHasPersistedData] = useState(false) // Load form data from localStorage on initial render useEffect(() => { if (!shouldPersist) { setIsLoading(false) return } try { const savedData = localStorage.getItem(key) if (savedData) { const parsedData = JSON.parse(savedData) form.reset(parsedData) setHasPersistedData(true) } } catch (error) { console.error("Error loading saved form data:", error) } finally { setIsLoading(false) } }, [form, key, shouldPersist]) // Save form data to localStorage when values change const saveFormData = () => { if (!shouldPersist) return try { const formValues = form.getValues() localStorage.setItem(key, JSON.stringify(formValues)) } catch (error) { console.error("Error saving form data:", error) } } // Clear saved form data const clearPersistedData = () => { try { localStorage.removeItem(key) setHasPersistedData(false) } catch (error) { console.error("Error clearing form data:", error) } } return { isLoading, hasPersistedData, saveFormData, clearPersistedData, } } [V0_FILE]typescriptreact:file="components/ui/wizard.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { ChevronLeft, ChevronRight, Check, RefreshCw } from "lucide-react" import { cn } from "@/lib/utils" interface WizardContextValue { currentStep: number totalSteps: number goToStep: (step: number) => void nextStep: () => Promise prevStep: () => void isFirstStep: boolean isLastStep: boolean isComplete: boolean setComplete: (complete: boolean) => void visibleSteps: number[] registerStep: (step: number, isVisible: boolean) => void validateStep: (step: number) => Promise setStepValidator: (step: number, validator: () => Promise) => void reset: () => void submittedData: any setSubmittedData: (data: any) => void } const WizardContext = React.createContext(undefined) function useWizard() { const context = React.useContext(WizardContext) if (!context) { throw new Error("useWizard must be used within a WizardProvider") } return context } interface WizardProps { initialStep?: number totalSteps: number children: React.ReactNode className?: string } function Wizard({ initialStep = 0, totalSteps, children, className }: WizardProps) { const [currentStep, setCurrentStep] = React.useState(initialStep) const [isComplete, setIsComplete] = React.useState(false) const [visibleSteps, setVisibleSteps] = React.useState([]) const [stepValidators, setStepValidators] = React.useState<{ [key: number]: () => Promise }>({}) const [submittedData, setSubmittedData] = React.useState(null) const registerStep = React.useCallback((step: number, isVisible: boolean) => { setVisibleSteps((prev) => { if (isVisible && !prev.includes(step)) { return [...prev, step].sort((a, b) => a - b) } else if (!isVisible && prev.includes(step)) { return prev.filter((s) => s !== step) } return prev }) }, []) const setStepValidator = React.useCallback((step: number, validator: () => Promise) => { setStepValidators((prev) => ({ ...prev, [step]: validator })) }, []) const validateStep = React.useCallback( async (step: number) => { const validator = stepValidators[step] if (validator) { return await validator() } return true }, [stepValidators], ) const goToStep = React.useCallback( async (step: number) => { if (visibleSteps.includes(step)) { const isValid = await validateStep(currentStep) if (isValid) { setCurrentStep(step) } } else if (visibleSteps.length > 0) { // Find the closest visible step const closestStep = visibleSteps.reduce((prev, curr) => Math.abs(curr - step) < Math.abs(prev - step) ? curr : prev, ) setCurrentStep(closestStep) } }, [visibleSteps, validateStep, currentStep], ) const nextStep = React.useCallback(async () => { const isValid = await validateStep(currentStep) if (isValid) { const currentIndex = visibleSteps.indexOf(currentStep) if (currentIndex < visibleSteps.length - 1) { setCurrentStep(visibleSteps[currentIndex + 1]) return true } } return false }, [currentStep, visibleSteps, validateStep]) const prevStep = React.useCallback(() => { const currentIndex = visibleSteps.indexOf(currentStep) if (currentIndex > 0) { setCurrentStep(visibleSteps[currentIndex - 1]) } }, [currentStep, visibleSteps]) const setComplete = React.useCallback((complete: boolean) => { setIsComplete(complete) }, []) const reset = React.useCallback(() => { setCurrentStep(initialStep) setIsComplete(false) setSubmittedData(null) }, [initialStep]) const currentStepIndex = visibleSteps.indexOf(currentStep) const isFirstStep = currentStepIndex === 0 const isLastStep = currentStepIndex === visibleSteps.length - 1 && visibleSteps.length > 0 const value = React.useMemo( () => ({ currentStep, totalSteps, goToStep, nextStep, prevStep, isFirstStep, isLastStep, isComplete, setComplete, visibleSteps, registerStep, validateStep, setStepValidator, reset, submittedData, setSubmittedData, }), [ currentStep, totalSteps, goToStep, nextStep, prevStep, isFirstStep, isLastStep, isComplete, setComplete, visibleSteps, registerStep, validateStep, setStepValidator, reset, submittedData, ], ) return (

{isComplete ? : children}

) } interface WizardStepProps { step: number children: React.ReactNode className?: string shouldShow?: () => boolean validator?: () => Promise fieldNames?: string[] } function WizardStep({ step, children, className, shouldShow = () => true, validator, fieldNames = [], }: WizardStepProps) { const { currentStep, registerStep, setStepValidator } = useWizard() const isVisible = shouldShow() React.useEffect(() => { registerStep(step, isVisible) if (validator) { setStepValidator(step, validator) } return () => registerStep(step, false) }, [step, isVisible, registerStep, setStepValidator, validator]) if (!isVisible || step !== currentStep) { return null } return (

{children}

) } interface WizardNavigationProps { className?: string } function WizardNavigation({ className }: WizardNavigationProps) { const { currentStep, visibleSteps, goToStep } = useWizard() return (

{visibleSteps.map((step) => (

) } interface WizardProgressProps { className?: string } function WizardProgress({ className }: WizardProgressProps) { const { currentStep, visibleSteps, goToStep } = useWizard() return (

{visibleSteps.map((step, index) => { const isActive = currentStep === step const isCompleted = visibleSteps.indexOf(currentStep) > visibleSteps.indexOf(step) return (

{index > 0 && (

= index ? "bg-primary" : "bg-muted")} /> )}

) })}

) } interface WizardButtonsProps { className?: string onComplete?: (visibleSteps: number[]) => void completeText?: string nextText?: string prevText?: string } function WizardButtons({ className, onComplete, completeText = "Complete", nextText = "Next", prevText = "Back", }: WizardButtonsProps) { const { nextStep, prevStep, isFirstStep, isLastStep, validateStep, currentStep, visibleSteps, setComplete } = useWizard() const [isLoading, setIsLoading] = React.useState(false) const handleNext = async () => { setIsLoading(true) try { if (isLastStep) { const isValid = await validateStep(currentStep) console.log("Last step validation result:", isValid) if (isValid && onComplete) { console.log("Calling onComplete with visible steps:", visibleSteps) onComplete(visibleSteps) setComplete(true) // Set the wizard to complete state } else { console.log("Validation failed or no onComplete handler") } } else { await nextStep() } } catch (error) { console.error("Navigation error:", error) } finally { setIsLoading(false) } } return (

) } function WizardThankYou() { const { reset, submittedData } = useWizard() return (

Thank You!

Your project has been successfully set up. We'll be in touch soon!

{submittedData && (

Project Summary:

Name: {submittedData.projectDetails?.projectName}

Type:{" "} {submittedData.projectDetails?.projectType}

Contact: {submittedData.personalInfo?.email}

{submittedData.projectDetails?.projectType === "business" && submittedData.businessDetails && (

Company: {submittedData.businessDetails.companyName}

Industry: {submittedData.businessDetails.industry}

)} {submittedData.projectDetails?.projectType === "nonprofit" && submittedData.nonprofitDetails && (

Organization: {submittedData.nonprofitDetails.organizationName}

Cause: {submittedData.nonprofitDetails.cause}

)}

) } export { Wizard, WizardStep, WizardNavigation, WizardProgress, WizardButtons, useWizard } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { z } from "zod" import { useForm, useWatch } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { WizardForm } from "@/components/wizard-form" import { WizardStep } from "@/components/ui/wizard" import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { toast } from "@/components/ui/use-toast" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useEffect } from "react" // Define the form schema with Zod const formSchema = z.object({ personalInfo: z.object({ firstName: z.string().min(2, { message: "First name must be at least 2 characters." }), lastName: z.string().min(2, { message: "Last name must be at least 2 characters." }), email: z.string().email({ message: "Please enter a valid email address." }), }), projectDetails: z.object({ projectName: z.string().min(3, { message: "Project name must be at least 3 characters." }), description: z.string().min(10, { message: "Description must be at least 10 characters." }), projectType: z.enum(["personal", "business", "nonprofit"], { required_error: "Please select a project type.", }), }), businessDetails: z .object({ companyName: z.string().min(2, { message: "Company name must be at least 2 characters." }).optional(), industry: z.string().min(2, { message: "Industry must be at least 2 characters." }).optional(), size: z.enum(["small", "medium", "large", "enterprise"]).optional(), }) .optional(), nonprofitDetails: z .object({ organizationName: z.string().min(2, { message: "Organization name must be at least 2 characters." }).optional(), cause: z.string().min(2, { message: "Cause must be at least 2 characters." }).optional(), taxId: z.string().optional(), }) .optional(), preferences: z.object({ notifications: z.boolean().default(false), newsletter: z.boolean().default(false), terms: z.boolean().refine((val) => val === true, { message: "You must agree to the terms and conditions.", }), }), }) // Define the default values const defaultValues = { personalInfo: { firstName: "", lastName: "", email: "", }, projectDetails: { projectName: "", description: "", projectType: "personal" as const, }, businessDetails: { companyName: "", industry: "", size: "small" as const, }, nonprofitDetails: { organizationName: "", cause: "", taxId: "", }, preferences: { notifications: false, newsletter: false, terms: false, }, } // Define the fields for each step const stepFields = { 0: ["personalInfo.firstName", "personalInfo.lastName", "personalInfo.email"], 1: ["projectDetails.projectName", "projectDetails.description", "projectDetails.projectType"], 2: ["businessDetails.companyName", "businessDetails.industry", "businessDetails.size"], 3: ["nonprofitDetails.organizationName", "nonprofitDetails.cause", "nonprofitDetails.taxId"], 4: ["preferences.notifications", "preferences.newsletter", "preferences.terms"], } export default function Home() { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues, mode: "onChange", }) const projectType = useWatch({ control: form.control, name: "projectDetails.projectType", defaultValue: "personal", }) // Reset conditional fields when project type changes useEffect(() => { if (projectType === "personal") { form.setValue("businessDetails", undefined) form.setValue("nonprofitDetails", undefined) } else if (projectType === "business") { form.setValue("nonprofitDetails", undefined) // Initialize business details if they're undefined if (!form.getValues("businessDetails")) { form.setValue("businessDetails", { companyName: "", industry: "", size: "small", }) } } else if (projectType === "nonprofit") { form.setValue("businessDetails", undefined) // Initialize nonprofit details if they're undefined if (!form.getValues("nonprofitDetails")) { form.setValue("nonprofitDetails", { organizationName: "", cause: "", taxId: "", }) } } }, [projectType, form]) const onSubmit = (values: z.infer) => { console.log("Form submitted successfully:", values) toast({ title: "Form submitted!", description: "Thank you for completing the wizard form.", variant: "success", }) } const validateStep = async (stepFields: string[]) => { const result = await form.trigger(stepFields) if (!result) { toast({ title: "Validation Error", description: "Please check your inputs and try again.", variant: "destructive", }) } return result } return (

validateStep(stepFields[0])} fieldNames={stepFields[0]}>

Personal Information

( First Name )} /> ( Last Name )} /> ( Email )} />

validateStep(stepFields[1])} fieldNames={stepFields[1]}>

Project Details

( Project Name )} /> ( Description

</FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="projectDetails.projectType"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Project Type</FormLabel>
                  <FormControl>
                    <RadioGroup
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                      className="flex flex-col space-y-1"
                    >
                      <FormItem className="flex items-center space-x-3 space-y-0">
                        <FormControl>
                          <RadioGroupItem value="personal" />
                        </FormControl>
                        <FormLabel className="font-normal">Personal</FormLabel>
                      </FormItem>
                      <FormItem className="flex items-center space-x-3 space-y-0">
                        <FormControl>
                          <RadioGroupItem value="business" />
                        </FormControl>
                        <FormLabel className="font-normal">Business</FormLabel>
                      </FormItem>
                      <FormItem className="flex items-center space-x-3 space-y-0">
                        <FormControl>
                          <RadioGroupItem value="nonprofit" />
                        </FormControl>
                        <FormLabel className="font-normal">Nonprofit</FormLabel>
                      </FormItem>
                    </RadioGroup>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </WizardStep>

{/* Conditional Business Details Step */}
        <WizardStep
          step={2}
          shouldShow={() => projectType === "business"}
          validator={() => validateStep(stepFields[2])}
          fieldNames={stepFields[2]}
        >
          <div className="space-y-6">
            <h2 className="text-xl font-semibold">Business Details</h2>
            <FormField
              control={form.control}
              name="businessDetails.companyName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Company Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Acme Inc." {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="businessDetails.industry"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Industry</FormLabel>
                  <FormControl>
                    <Input placeholder="Technology" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="businessDetails.size"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Company Size</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select company size" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="small">Small (1-50 employees)</SelectItem>
                      <SelectItem value="medium">Medium (51-250 employees)</SelectItem>
                      <SelectItem value="large">Large (251-1000 employees)</SelectItem>
                      <SelectItem value="enterprise">Enterprise (1000+ employees)</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </WizardStep>

{/* Conditional Nonprofit Details Step */}
        <WizardStep
          step={3}
          shouldShow={() => projectType === "nonprofit"}
          validator={() => validateStep(stepFields[3])}
          fieldNames={stepFields[3]}
        >
          <div className="space-y-6">
            <h2 className="text-xl font-semibold">Nonprofit Details</h2>
            <FormField
              control={form.control}
              name="nonprofitDetails.organizationName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Organization Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Helping Hands Foundation" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="nonprofitDetails.cause"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Cause</FormLabel>
                  <FormControl>
                    <Input placeholder="Education" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="nonprofitDetails.taxId"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Tax ID (optional)</FormLabel>
                  <FormControl>
                    <Input placeholder="501(c)(3) ID" {...field} />
                  </FormControl>
                  <FormDescription>For US organizations, enter your 501(c)(3) tax ID</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </WizardStep>

<WizardStep step={4} validator={() => validateStep(stepFields[4])} fieldNames={stepFields[4]}>
          <div className="space-y-6">
            <h2 className="text-xl font-semibold">Preferences</h2>
            <FormField
              control={form.control}
              name="preferences.notifications"
              render={({ field }) => (
                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                  <FormControl>
                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                  </FormControl>
                  <div className="space-y-1 leading-none">
                    <FormLabel>Enable notifications</FormLabel>
                    <FormDescription>Receive notifications about updates and activity.</FormDescription>
                  </div>
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="preferences.newsletter"
              render={({ field }) => (
                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                  <FormControl>
                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                  </FormControl>
                  <div className="space-y-1 leading-none">
                    <FormLabel>Subscribe to newsletter</FormLabel>
                    <FormDescription>Get the latest news and updates in your inbox.</FormDescription>
                  </div>
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="preferences.terms"
              render={({ field }) => (
                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                  <FormControl>
                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                  </FormControl>
                  <div className="space-y-1 leading-none">
                    <FormLabel>Terms and Conditions</FormLabel>
                    <FormDescription>I agree to the terms of service and privacy policy.</FormDescription>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </WizardStep>
      </WizardForm>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/wizard-form.tsx" isEdit="true" isQuickEdit="true"
"use client"

import * as React from "react"
import type { UseFormReturn } from "react-hook-form"
import type { z } from "zod"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Form } from "@/components/ui/form"
import { Wizard, WizardProgress, WizardButtons, useWizard } from "@/components/ui/wizard"
import { toast } from "@/components/ui/use-toast"
import { useFormPersistence } from "@/lib/use-form-persistence"
import { Loader2 } from "lucide-react"

interface WizardFormProps<T extends z.ZodType> {
  title: string
  description?: string
  schema: T
  defaultValues: z.infer<T>
  onSubmit: (values: z.infer<T>) => void
  children: React.ReactNode
  className?: string
  form: UseFormReturn<z.infer<T>>
  stepFields?: { [key: number]: string[] }
  persistenceKey?: string
  persistForm?: boolean
}

export function WizardForm<T extends z.ZodType>({
  title,
  description,
  schema,
  defaultValues,
  onSubmit,
  children,
  className,
  form,
  stepFields = {},
  persistenceKey = "wizard-form-data",
  persistForm = true,
}: WizardFormProps<T>) {
  const { isLoading, hasPersistedData, saveFormData, clearPersistedData } = useFormPersistence(
    form,
    persistenceKey,
    persistForm,
  )

const handleClearData = () => {
    clearPersistedData()
    form.reset(defaultValues)
    toast({
      title: "Form reset",
      description: "Your saved progress has been cleared.",
      variant: "info",
    })
  }

if (isLoading) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle>{title}</CardTitle>
          {description && <CardDescription>{description}</CardDescription>}
        </CardHeader>
        <CardContent className="flex justify-center items-center py-12">
          <div className="flex flex-col items-center space-y-4">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
            <p className="text-sm text-muted-foreground">Loading your saved progress...</p>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        {description && <CardDescription>{description}</CardDescription>}
        {hasPersistedData && (
          <div className="mt-2 flex items-center justify-between">
            <span className="bg-green-100 text-green-800 px-2 py-1 rounded-md text-xs font-medium">
              Restored from saved progress
            </span>
            <button onClick={handleClearData} className="text-xs text-muted-foreground hover:text-destructive">
              Clear saved data
            </button>
          </div>
        )}
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={(e) => e.preventDefault()}>
            <Wizard totalSteps={React.Children.count(children)}>
              <WizardFormContent
                onSubmit={onSubmit}
                form={form}
                stepFields={stepFields}
                onStepChange={saveFormData}
                clearPersistedData={clearPersistedData}
              >
                <WizardProgress className="mb-8" />
                {children}
              </WizardFormContent>
            </Wizard>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}

interface WizardFormContentProps<T> {
  onSubmit: (values: T) => void
  form: UseFormReturn<T>
  stepFields: { [key: number]: string[] }
  children: React.ReactNode
  onStepChange?: () => void
  clearPersistedData?: () => void
}

function WizardFormContent<T>({
  onSubmit,
  form,
  stepFields,
  children,
  onStepChange,
  clearPersistedData,
}: WizardFormContentProps<T>) {
  const { setSubmittedData, currentStep } = useWizard()

// Save form data when step changes
  React.useEffect(() => {
    if (onStepChange) {
      onStepChange()
    }
  }, [onStepChange])

// Handle form completion with visible steps
  const handleComplete = (visibleSteps: number[]) => {
    // Only validate fields from visible steps
    const fieldsToValidate = visibleSteps.flatMap((step) => stepFields[step] || [])

// Custom submit handler that only validates visible fields
    const customSubmit = async () => {
      try {
        console.log("Submitting form with visible steps:", visibleSteps)
        console.log("Fields to validate:", fieldsToValidate)

// If there are fields to validate, trigger validation
        if (fieldsToValidate.length > 0) {
          const isValid = await form.trigger(fieldsToValidate as any)
          console.log("Validation result:", isValid)

if (!isValid) {
            toast({
              title: "Validation Error",
              description: "Please check your inputs and try again.",
              variant: "destructive",
            })
            return
          }
        }

// Get the form values and submit
        const values = form.getValues()
        console.log("Form values:", values)

// Store the submitted data in the wizard context
        setSubmittedData(values)

// Call the onSubmit function directly
        onSubmit(values)

// Clear persisted data after successful submission
        if (clearPersistedData) {
          clearPersistedData()
        }

// Show a success toast
        toast({
          title: "Form submitted!",
          description: "Thank you for completing the wizard form.",
          variant: "success",
        })
      } catch (error) {
        console.error("Form submission error:", error)
        toast({
          title: "Error",
          description: "There was a problem submitting the form.",
          variant: "destructive",
        })
      }
    }

// Execute the submit handler
    customSubmit()
  }

return (
    <>
      {children}
      <WizardButtons onComplete={handleComplete} />
    </>
  )
}
</article></body></html>

About

About