\n );\n }\n\n if (!presentation) {\n return (\n

Presentation not found

\n );\n }\n\n return (\n

\n {presentation.name}\n

\n by {presentation.presenter}\n

\n \n ← Back\n \n \n Present →\n \n

\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {deletingStepId && (\n

\n ⚠️\n \n Are you sure you want to delete this step? This cannot be\n undone.\n \n

\n \n Delete\n \n setDeletingStepId(null)}\n className=\"px-4 py-1 bg-white/50 text-gray-700 rounded-lg font-semibold hover:bg-white/80 transition-colors text-sm\"\n >\n Cancel\n \n

\n )}\n\n

\n Steps\n

\n {\n setShowCreateForm(!showCreateForm);\n setEditingStep(null);\n }}\n className=\"glass-button px-6 py-2 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all\"\n >\n {showCreateForm ? \"Cancel\" : \"+ Add Step\"}\n \n

\n\n {(showCreateForm || editingStep) && (\n \n handleUpdateStep(editingStep.id, data)\n : handleCreateStep\n }\n onCancel={() => {\n setShowCreateForm(false);\n setEditingStep(null);\n }}\n />\n

\n )}\n\n {steps.length === 0 ? (\n

📝

\n No steps yet\n

\n Add steps to create interactive activities for your presentation\n

\n ) : (\n

\n {steps.map((step, index) => (\n {\n setEditingStep(step);\n setShowCreateForm(false);\n }}\n onDelete={() => handleDeleteStep(step.id)}\n onMoveUp={() => handleMoveStep(step.id, \"up\")}\n onMoveDown={() => handleMoveStep(step.id, \"down\")}\n onDragStart={() => handleDragStart(step.id)}\n onDragOver={(e) => handleDragOver(e, index)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, index)}\n onDragEnd={handleDragEnd}\n />\n ))}\n

\n )}\n

\n \n );\n}\n\ninterface StepCardProps {\n step: Step;\n index: number;\n totalSteps: number;\n isDragging?: boolean;\n isDragOver?: boolean;\n onEdit: () => void;\n onDelete: () => void;\n onMoveUp: () => void;\n onMoveDown: () => void;\n onDragStart: () => void;\n onDragOver: (e: React.DragEvent) => void;\n onDragLeave: () => void;\n onDrop: (e: React.DragEvent) => void;\n onDragEnd: () => void;\n}\n\nfunction StepCard({ \n step, \n index, \n totalSteps, \n isDragging = false,\n isDragOver = false,\n onEdit, \n onDelete, \n onMoveUp, \n onMoveDown,\n onDragStart,\n onDragOver,\n onDragLeave,\n onDrop,\n onDragEnd,\n}: StepCardProps) {\n const config = JSON.parse(step.widget_config);\n\n return (\n

e.stopPropagation()}\n title=\"Drag to reorder\"\n >\n \n

\n \n {step.name || `Step ${step.step_number}`}\n \n \n {step.widget_type}\n \n {step.is_active === 1 && (\n \n Active\n \n )}\n

\n\n {step.widget_type === \"poll\" && (\n

\n {(config as PollWidgetConfig).question}\n

{option}

\n )}\n\n {step.widget_type === \"chat\" && (\n

\n {(config as ChatWidgetConfig).title || \"Chat\"}\n

\n \"\n {(config as ChatWidgetConfig).placeholder ||\n \"Type your message...\"}\n \"\n

\n )}\n\n {step.widget_type === \"poll2d\" && (\n

\n {(config as Poll2DWidgetConfig).question1}\n

\n {(config as Poll2DWidgetConfig).question2}\n

\n Journey stages:{\" \"}\n {(config as Poll2DWidgetConfig).journeyStages.join(\", \")}\n

\n Risk scale: {(config as Poll2DWidgetConfig).riskScaleMin} -{\" \"}\n {(config as Poll2DWidgetConfig).riskScaleMax}\n

\n )}\n\n {step.widget_type === \"multivote\" && (\n

\n {(config as MultivoteWidgetConfig).question}\n

\n )}\n\n {step.widget_type === \"prototype_demo\" && (\n

\n Prototype Demo Carousel\n

6 Interactive Mockups

\n )}\n\n {step.widget_type === \"vibe_coding\" && (\n

Vibe Coding

What should we build?

\n )}\n\n {step.widget_type === \"connect\" && (\n

\n {(config as EmailCollectionWidgetConfig).title || \"Connect\"}\n

\n {(config as EmailCollectionWidgetConfig).description || \"Email collection form\"}\n

\n )}\n

\n\n

\n e.stopPropagation()}\n disabled={index === 0}\n className=\"px-3 py-2 glass-button-secondary rounded-lg font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n aria-label=\"Move up\"\n title=\"Move up\"\n >\n ↑\n \n e.stopPropagation()}\n disabled={index === totalSteps - 1}\n className=\"px-3 py-2 glass-button-secondary rounded-lg font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n aria-label=\"Move down\"\n title=\"Move down\"\n >\n ↓\n \n

\n e.stopPropagation()}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n Edit\n \n e.stopPropagation()}\n className=\"px-4 py-2 bg-red-50/50 text-red-600 border border-red-100 rounded-lg font-semibold hover:bg-red-100 transition-colors text-sm\"\n >\n Delete\n \n

\n );\n}\n\ninterface StepFormProps {\n step?: Step | null;\n onSubmit: (data: {\n widget_type: string;\n widget_config: Record;\n step_number?: number;\n name?: string | null;\n }) => Promise;\n onCancel: () => void;\n}\n\nfunction StepForm({ step, onSubmit, onCancel }: StepFormProps) {\n const [widgetType, setWidgetType] = useState(\n step?.widget_type || \"poll\"\n );\n const [stepName, setStepName] = useState(step?.name || \"\");\n const [question, setQuestion] = useState(\n step && step.widget_type === \"poll\"\n ? (JSON.parse(step.widget_config) as PollWidgetConfig).question\n : \"\"\n );\n const [options, setOptions] = useState(\n step && step.widget_type === \"poll\"\n ? (JSON.parse(step.widget_config) as PollWidgetConfig).options\n : [\"\"]\n );\n const [chatTitle, setChatTitle] = useState(\n step && step.widget_type === \"chat\"\n ? (JSON.parse(step.widget_config) as ChatWidgetConfig).title || \"\"\n : \"\"\n );\n const [chatPlaceholder, setChatPlaceholder] = useState(\n step && step.widget_type === \"chat\"\n ? (JSON.parse(step.widget_config) as ChatWidgetConfig).placeholder || \"\"\n : \"\"\n );\n const [poll2dQuestion1, setPoll2dQuestion1] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).question1\n : \"\"\n );\n const [poll2dQuestion2, setPoll2dQuestion2] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).question2\n : \"\"\n );\n const [journeyStages, setJourneyStages] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).journeyStages\n : [\n \"Exploring ideas\",\n \"Internal pilot with staff only\",\n \"Limited member-facing pilot\",\n \"Production, low stakes\",\n \"Production, high stakes (like claims / advice)\",\n ]\n );\n const [riskScaleMin, setRiskScaleMin] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskScaleMin\n : 1\n );\n const [riskScaleMax, setRiskScaleMax] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskScaleMax\n : 5\n );\n const [riskLabels, setRiskLabels] = useState(\n step &&\n step.widget_type === \"poll2d\" &&\n (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskLabels\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskLabels!\n : []\n );\n const [multivoteQuestion, setMultivoteQuestion] = useState(\n step && step.widget_type === \"multivote\"\n ? (JSON.parse(step.widget_config) as MultivoteWidgetConfig).question\n : \"\"\n );\n const [boxesAndLinesTitle, setBoxesAndLinesTitle] = useState(\n step && step.widget_type === \"boxes_and_lines\"\n ? (JSON.parse(step.widget_config) as BoxesAndLinesWidgetConfig).title ||\n \"\"\n : \"\"\n );\n const [emailCollectionTitle, setEmailCollectionTitle] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).title ||\n \"\"\n : \"\"\n );\n const [emailCollectionDescription, setEmailCollectionDescription] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).description ||\n \"\"\n : \"\"\n );\n const [emailCollectionSuccessTitle, setEmailCollectionSuccessTitle] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).successTitle ||\n \"\"\n : \"\"\n );\n const [emailCollectionSuccessMessage, setEmailCollectionSuccessMessage] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).successMessage ||\n \"\"\n : \"\"\n );\n const [emailCollectionSubmitButtonText, setEmailCollectionSubmitButtonText] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).submitButtonText ||\n \"\"\n : \"\"\n );\n const [emailCollectionCheckboxOptions, setEmailCollectionCheckboxOptions] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).checkboxOptions || [\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n ]\n : [\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n ]\n );\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n setLoading(true);\n try {\n if (widgetType === \"poll\") {\n if (!question.trim() || options.filter((o) => o.trim()).length < 2) {\n return;\n }\n await onSubmit({\n widget_type: \"poll\",\n widget_config: {\n question: question.trim(),\n options: options.filter((o) => o.trim()),\n } as PollWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setQuestion(\"\");\n setOptions([\"\"]);\n setStepName(\"\");\n } else if (widgetType === \"chat\") {\n await onSubmit({\n widget_type: \"chat\",\n widget_config: {\n title: chatTitle.trim() || undefined,\n placeholder: chatPlaceholder.trim() || undefined,\n } as ChatWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setChatTitle(\"\");\n setChatPlaceholder(\"\");\n setStepName(\"\");\n } else if (widgetType === \"poll2d\") {\n if (\n !poll2dQuestion1.trim() ||\n !poll2dQuestion2.trim() ||\n journeyStages.filter((s) => s.trim()).length < 2\n ) {\n return;\n }\n const expectedRiskLabelCount = riskScaleMax - riskScaleMin + 1;\n const validRiskLabels =\n riskLabels.filter((l) => l.trim()).length === expectedRiskLabelCount\n ? riskLabels.filter((l) => l.trim())\n : undefined;\n\n await onSubmit({\n widget_type: \"poll2d\",\n widget_config: {\n question1: poll2dQuestion1.trim(),\n question2: poll2dQuestion2.trim(),\n journeyStages: journeyStages.filter((s) => s.trim()),\n riskScaleMin,\n riskScaleMax,\n riskLabels: validRiskLabels,\n } as Poll2DWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setPoll2dQuestion1(\"\");\n setPoll2dQuestion2(\"\");\n setJourneyStages([\n \"Exploring ideas\",\n \"Internal pilot with staff only\",\n \"Limited member-facing pilot\",\n \"Production, low stakes\",\n \"Production, high stakes (like claims / advice)\",\n ]);\n setRiskScaleMin(1);\n setRiskScaleMax(5);\n setRiskLabels([]);\n setStepName(\"\");\n } else if (widgetType === \"multivote\") {\n if (!multivoteQuestion.trim()) {\n return;\n }\n await onSubmit({\n widget_type: \"multivote\",\n widget_config: {\n question: multivoteQuestion.trim(),\n } as MultivoteWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setMultivoteQuestion(\"\");\n setStepName(\"\");\n } else if (widgetType === \"prototype_demo\") {\n await onSubmit({\n widget_type: \"prototype_demo\",\n widget_config: {\n title: \"Prototype Demos\",\n } as PrototypeDemoWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setStepName(\"\");\n } else if (widgetType === \"vibe_coding\") {\n await onSubmit({\n widget_type: \"vibe_coding\",\n widget_config: {\n title: \"Vibe Coding\",\n } as VibeCodingWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setStepName(\"\");\n } else if (widgetType === \"boxes_and_lines\") {\n await onSubmit({\n widget_type: \"boxes_and_lines\",\n widget_config: {\n title: boxesAndLinesTitle.trim() || undefined,\n } as BoxesAndLinesWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setBoxesAndLinesTitle(\"\");\n setStepName(\"\");\n } else if (widgetType === \"connect\") {\n await onSubmit({\n widget_type: \"connect\",\n widget_config: {\n title: emailCollectionTitle.trim() || undefined,\n description: emailCollectionDescription.trim() || undefined,\n successTitle: emailCollectionSuccessTitle.trim() || undefined,\n successMessage: emailCollectionSuccessMessage.trim() || undefined,\n submitButtonText: emailCollectionSubmitButtonText.trim() || undefined,\n checkboxOptions: emailCollectionCheckboxOptions.filter((o) => o.trim()).length > 0\n ? emailCollectionCheckboxOptions.filter((o) => o.trim())\n : undefined,\n } as EmailCollectionWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setEmailCollectionTitle(\"\");\n setEmailCollectionDescription(\"\");\n setEmailCollectionSuccessTitle(\"\");\n setEmailCollectionSuccessMessage(\"\");\n setEmailCollectionSubmitButtonText(\"\");\n setEmailCollectionCheckboxOptions([\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n ]);\n setStepName(\"\");\n }\n } finally {\n setLoading(false);\n }\n };\n\n const addOption = () => {\n setOptions([...options, \"\"]);\n };\n\n const updateOption = (index: number, value: string) => {\n const newOptions = [...options];\n newOptions[index] = value;\n setOptions(newOptions);\n };\n\n const removeOption = (index: number) => {\n if (options.length > 1) {\n setOptions(options.filter((_, i) => i !== index));\n }\n };\n\n const addJourneyStage = () => {\n setJourneyStages([...journeyStages, \"\"]);\n };\n\n const updateJourneyStage = (index: number, value: string) => {\n const newStages = [...journeyStages];\n newStages[index] = value;\n setJourneyStages(newStages);\n };\n\n const removeJourneyStage = (index: number) => {\n if (journeyStages.length > 1) {\n setJourneyStages(journeyStages.filter((_, i) => i !== index));\n }\n };\n\n const addCheckboxOption = () => {\n setEmailCollectionCheckboxOptions([...emailCollectionCheckboxOptions, \"\"]);\n };\n\n const updateCheckboxOption = (index: number, value: string) => {\n const newOptions = [...emailCollectionCheckboxOptions];\n newOptions[index] = value;\n setEmailCollectionCheckboxOptions(newOptions);\n };\n\n const removeCheckboxOption = (index: number) => {\n if (emailCollectionCheckboxOptions.length > 1) {\n setEmailCollectionCheckboxOptions(\n emailCollectionCheckboxOptions.filter((_, i) => i !== index)\n );\n }\n };\n\n // Update risk labels when scale changes\n useEffect(() => {\n if (widgetType === \"poll2d\") {\n const expectedCount = riskScaleMax - riskScaleMin + 1;\n if (riskLabels.length !== expectedCount) {\n // Initialize or adjust risk labels\n const newLabels = Array.from({ length: expectedCount }, (_, i) => {\n if (i < riskLabels.length && riskLabels[i]) {\n return riskLabels[i];\n }\n return \"\";\n });\n setRiskLabels(newLabels);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [riskScaleMin, riskScaleMax, widgetType]);\n\n const updateRiskLabel = (index: number, value: string) => {\n const newLabels = [...riskLabels];\n newLabels[index] = value;\n setRiskLabels(newLabels);\n };\n\n return (\n

\n {step ? \"Edit Step\" : \"Create New Step\"}\n

\n\n

\n \n Step Name (optional)\n \n setStepName(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder={`e.g., Introduction, Q&A, Poll 1`}\n />\n

\n Leave empty to use default \"Step {step?.step_number || \"N\"}\"\n

\n\n

\n \n Widget Type *\n \n setWidgetType(e.target.value)}\n disabled={!!step}\n className=\"w-full px-4 py-2 glass-input disabled:opacity-50 disabled:bg-gray-50/20\"\n >\n \n \n \n \n \n \n \n \n \n {step && (\n

\n Widget type cannot be changed after creation\n

\n )}\n

\n\n {widgetType === \"poll\" && (\n <>\n

\n \n Question *\n \n setQuestion(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., What is your favourite programming language?\"\n />\n

\n\n

\n \n Options * (at least 2 required)\n \n

\n {options.map((option, index) => (\n

\n updateOption(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Option ${index + 1}`}\n />\n {options.length > 1 && (\n removeOption(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove option\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Option\n \n

\n \n )}\n\n {widgetType === \"chat\" && (\n <>\n

\n \n Title (optional)\n \n setChatTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Q&A Session\"\n />\n

\n Leave empty to use default title\n

\n\n

\n \n Input Placeholder (optional)\n \n setChatPlaceholder(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Ask a question...\"\n />\n

\n Leave empty to use default placeholder\n

\n \n )}\n\n {widgetType === \"poll2d\" && (\n <>\n

\n \n Journey Question *\n \n setPoll2dQuestion1(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Where are you on this journey?\"\n />\n

\n\n

\n \n Journey Stages * (at least 2 required)\n \n

\n {journeyStages.map((stage, index) => (\n

\n updateJourneyStage(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Stage ${index + 1}`}\n />\n {journeyStages.length > 1 && (\n removeJourneyStage(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove stage\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Stage\n \n

\n\n

\n \n Risk Aversion Question *\n \n setPoll2dQuestion2(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., How risk averse is your organisation?\"\n />\n

\n\n

\n \n Risk Scale Minimum *\n \n setRiskScaleMin(parseInt(e.target.value) || 1)}\n required\n min=\"1\"\n max=\"10\"\n className=\"w-full px-4 py-2 glass-input\"\n />\n

\n \n Risk Scale Maximum *\n \n setRiskScaleMax(parseInt(e.target.value) || 5)}\n required\n min=\"2\"\n max=\"10\"\n className=\"w-full px-4 py-2 glass-input\"\n />\n

\n\n

\n \n Risk Labels (optional) - One label per risk level\n \n

\n If provided, these labels will be shown instead of numbers. You\n need {riskScaleMax - riskScaleMin + 1} labels.\n

\n {riskLabels.map((label, index) => {\n const value = riskScaleMin + index;\n return (\n

\n \n {value}:\n \n updateRiskLabel(index, e.target.value)}\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Label for ${value} (optional)`}\n />\n

\n );\n })}\n

\n Leave labels empty to use numbers ({riskScaleMin}-{riskScaleMax})\n

\n \n )}\n\n {widgetType === \"multivote\" && (\n <>\n

\n \n Question *\n \n setMultivoteQuestion(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., What topics would you like to discuss?\"\n />\n

\n Participants can add their own options and vote on multiple\n options\n

\n \n )}\n\n {widgetType === \"prototype_demo\" && (\n

\n This widget displays a carousel of 6 interactive prototypes (Claims\n Support, Chat Assistant, Call-back Request, Process Overview,\n Requirements Letter, Claims Portal).\n
\n
\n No configuration is required.\n

\n )}\n\n {widgetType === \"vibe_coding\" && (\n

\n This widget displays \"What should we build?\" for collaborative coding\n sessions.\n
\n
\n No configuration is required.\n

\n )}\n\n {widgetType === \"boxes_and_lines\" && (\n <>\n

\n \n Title (optional)\n \n setBoxesAndLinesTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., System Architecture Diagram\"\n />\n

\n Participants can create diagrams by adding boxes, labelling them,\n and connecting them with lines.\n

\n \n )}\n\n {widgetType === \"connect\" && (\n <>\n

\n \n Title (optional)\n \n setEmailCollectionTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Send me the slides\"\n />\n

\n Default: \"Send me the slides\"\n

\n\n

\n \n Description (optional)\n \n setEmailCollectionDescription(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Enter your details to receive the presentation slides\"\n rows={3}\n />\n

\n\n

\n \n Success Title (optional)\n \n setEmailCollectionSuccessTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Thank you!\"\n />\n

\n Default: \"Thank you!\"\n

\n\n

\n \n Success Message (optional)\n \n setEmailCollectionSuccessMessage(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., We'll send you the slides shortly.\"\n rows={2}\n />\n

\n Default: \"We'll send you the slides shortly.\"\n

\n\n

\n \n Submit Button Text (optional)\n \n setEmailCollectionSubmitButtonText(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Submit\"\n />\n

\n Default: \"Submit\"\n

\n\n

\n \n Checkbox Options * (at least 1 required)\n \n

\n Users must select at least one checkbox option to submit the form.\n

\n {emailCollectionCheckboxOptions.map((option, index) => (\n

\n updateCheckboxOption(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Checkbox option ${index + 1}`}\n />\n {emailCollectionCheckboxOptions.length > 1 && (\n removeCheckboxOption(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove checkbox option\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Checkbox Option\n \n

\n \n )}\n\n

\n o.trim()).length < 2)) ||\n (widgetType === \"poll2d\" &&\n (!poll2dQuestion1.trim() ||\n !poll2dQuestion2.trim() ||\n journeyStages.filter((s) => s.trim()).length < 2))\n }\n className=\"flex-1 glass-button px-6 py-2 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed transition-all\"\n >\n {loading\n ? step\n ? \"Updating...\"\n : \"Creating...\"\n : step\n ? \"Update Step\"\n : \"Create Step\"}\n \n \n Cancel\n \n

\n );\n}\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/fwfben/live-talk/code/frontend/components/StepManagement.tsx","extension","actionData","errors"]