[V0_FILE]typescript:file="types.ts" isEdit="true" isMerged="true" export interface Option { label: string value: string } export interface Question { id: string question: string type: "text" | "email" | "tel" | "select" | "multiselect" | "checkbox" | "textarea" required: boolean options?: Option[] } export interface Page { data: { heading: string subheading: string button: string } questions: Question[] } [V0_FILE]typescript:file="initial-config.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { Page } from "./types" export const initialPages: Page[] = [ // Page 1: Personal Information { data: { heading: "Contact Havelock Wool", subheading: "Tell us about yourself.", button: "Next", }, questions: [ { id: "firstname-409cc67b-ba66-4c70-99ed-206a1668305f", question: "First Name", type: "text", required: true, }, { id: "lastname-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Last Name", type: "text", required: true, }, { id: "email-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Email", type: "email", required: true, }, { id: "phone-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Phone Number", type: "tel", required: true, }, ], }, // Page 2: Project Details { data: { heading: "Project Details", subheading: "Tell us about your project.", button: "Next", }, questions: [ { id: "type_of_project-409cc67b-ba66-4c70-99ed-206a1668305f", question: "I am a...", type: "select", required: true, options: [ { label: "Homeowner", value: "Residential" }, { label: "Builder", value: "Builder" }, { label: "Installer", value: "Installer" }, { label: "Sound panel", value: "sound panel distributor" }, { label: "Duct Wrap", value: "duct distributor" }, { label: "#vanlifer", value: "#vanlife" }, ], }, { id: "i_am_building_a___-409cc67b-ba66-4c70-99ed-206a1668305f", question: "I am building a...", type: "select", required: true, options: [ { label: "New house", value: "New house" }, { label: "Renovation project", value: "Renovation project" }, { label: "ADU", value: "ADU" }, { label: "Tinyhouse", value: "Tinyhouse" }, { label: "Shed / Hut", value: "Shed / Hut" }, { label: "Barn", value: "Barn" }, { label: "Attic/Crawl House", value: "Attic/Crawl House" }, { label: "Others (Please explain in the message section)", value: "Others" }, ], }, { id: "what_is_your_budget_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "What are your expected insulation costs?", type: "select", required: true, options: [ { label: "Under $1,000", value: "Under $1,000" }, { label: "$1,000-$5,000", value: "$1,000-$5,000" }, { label: "$5,000-$10,000", value: "$5,000-$10,000" }, { label: "$10,000+", value: "$10,000+" }, ], }, { id: "expected_project_date_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Expected Project Date:", type: "select", required: true, options: [ { label: "I am desperate for sustainable, high-performance insulation now", value: "I am desperate for sustainable, high-performance insulation now", }, { label: "New construction in progress", value: "New construction in progress" }, { label: "Renovation in progress", value: "Renovation in progress" }, { label: "Project planning work to begin in the next 3 months", value: "Project planning work to begin in the next 3 months", }, { label: "Unsure when construction will start", value: "Unsure when construction will start" }, ], }, ], }, // Page 3: Installation Details { data: { heading: "Installation Details", subheading: "Tell us about your installation plans.", button: "Next", }, questions: [ { id: "who_will_be_installing_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Who will be installing? (if a residential project)", type: "select", required: true, options: [ { label: "I will!", value: "I will!" }, { label: "Professional", value: "Professional" }, { label: "Handywoman / Handyman", value: "Handywoman / Handyman" }, { label: "I don't know", value: "I don't know" }, ], }, { id: "zip-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Project Postal Code", type: "text", required: true, }, { id: "country-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Country/Region", type: "text", required: true, }, ], }, // Page 4: Additional Information { data: { heading: "Additional Information", subheading: "Any extra details?", button: "Submit", }, questions: [ { id: "where_did_you_hear_about_us_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Where did you hear about us?", type: "select", required: true, options: [ { label: "News Article", value: "PR Article" }, { label: "Google", value: "Google" }, { label: "Facebook", value: "Facebook" }, { label: "Instagram", value: "Instagram" }, { label: "YouTube", value: "YouTube" }, { label: "Word of Mouth", value: "Word of Mouth" }, { label: "Other", value: "Other" }, ], }, { id: "have_you_already_purchased_from_us_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Have you already purchased from us?", type: "select", required: true, options: [ { label: "Yes", value: "Yes" }, { label: "No", value: "No" }, ], }, { id: "message_cloned_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Message", type: "textarea", required: false, }, ], }, ] [V0_FILE]typescriptreact:file="providers.tsx" isMerged="true" import type React from "react" import { ToastProvider } from "@/components/ui/toast" interface ProvidersProps { children: React.ReactNode } export function Providers({ children }: ProvidersProps) { return {children} } [V0_FILE]typescriptreact:file="app.tsx" isMerged="true" import { Providers } from "./providers" import FormManager from "./form-manager" export default function App() { return ( ) } [V0_FILE]typescriptreact:file="form-manager.tsx" isEdit="true" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" import PageEditor from "./page-editor" import type { Page } from "./types" import { initialPages } from "./initial-config" export default function FormManager() { const [pages, setPages] = useState(initialPages) const [currentPageIndex, setCurrentPageIndex] = useState(0) const { toast } = useToast() const addPage = () => { setPages([ ...pages, { data: { heading: "New Page", subheading: "", button: "Next" }, questions: [], }, ]) setCurrentPageIndex(pages.length) } const updatePage = (updatedPage: Page) => { const newPages = [...pages] newPages[currentPageIndex] = updatedPage setPages(newPages) } const deletePage = () => { if (pages.length > 1) { const newPages = pages.filter((_, i) => i !== currentPageIndex) setPages(newPages) setCurrentPageIndex(Math.min(currentPageIndex, newPages.length - 1)) } } const exportConfig = () => { const config = JSON.stringify(pages, null, 2) const script = `` navigator.clipboard.writeText(script).then(() => { toast({ title: "Configuration Exported", description: "The form configuration has been copied to your clipboard.", }) }) } return (

Multi-Step Form Manager

) } [V0_FILE]typescriptreact:file="page-editor.tsx" isEdit="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import QuestionEditor from "./question-editor" import type { Page, Question } from "./types" interface PageEditorProps { page: Page onUpdate: (updatedPage: Page) => void onDelete: () => void } export default function PageEditor({ page, onUpdate, onDelete }: PageEditorProps) { const updatePageData = (field: keyof Page["data"], value: string) => { onUpdate({ ...page, data: { ...page.data, [field]: value }, }) } const addQuestion = () => { onUpdate({ ...page, questions: [ ...page.questions, { id: `question-${Date.now()}`, question: "New Question", type: "text", required: false, }, ], }) } const updateQuestion = (index: number, updatedQuestion: Question) => { const newQuestions = [...page.questions] newQuestions[index] = updatedQuestion onUpdate({ ...page, questions: newQuestions }) } const deleteQuestion = (index: number) => { onUpdate({ ...page, questions: page.questions.filter((_, i) => i !== index), }) } return (

Heading updatePageData("heading", e.target.value)} />

Subheading updatePageData("subheading", e.target.value)} />

Button Text updatePageData("button", e.target.value)} />

Questions

{page.questions.map((question, index) => ( updateQuestion(index, updatedQuestion)} onDelete={() => deleteQuestion(index)} /> ))}

) } [V0_FILE]typescriptreact:file="question-editor.tsx" isEdit="true" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import type { Question, Option } from "./types" interface QuestionEditorProps { question: Question onUpdate: (updatedQuestion: Question) => void onDelete: () => void } export default function QuestionEditor({ question, onUpdate, onDelete }: QuestionEditorProps) { const [newOptionLabel, setNewOptionLabel] = useState("") const [newOptionValue, setNewOptionValue] = useState("") const updateField = (field: keyof Question, value: string | boolean) => { onUpdate({ ...question, [field]: value }) } const addOption = () => { if (newOptionLabel && newOptionValue) { const newOption: Option = { label: newOptionLabel, value: newOptionValue } const updatedOptions = [...(question.options || []), newOption] onUpdate({ ...question, options: updatedOptions }) setNewOptionLabel("") setNewOptionValue("") } } const removeOption = (index: number) => { const updatedOptions = question.options?.filter((_, i) => i !== index) onUpdate({ ...question, options: updatedOptions }) } const showOptions = question.type === "select" || question.type === "multiselect" return (

Question updateField("question", e.target.value)} />

Type

updateField("required", checked)} /> Required

{showOptions && (

Options

{question.options?.map((option, index) => (

))}

setNewOptionLabel(e.target.value)} /> setNewOptionValue(e.target.value)} />

)} ) }

About

About