diff --git a/src/components/flows/flow-builder.tsx b/src/components/flows/flow-builder.tsx index 23e00c2..1faab17 100644 --- a/src/components/flows/flow-builder.tsx +++ b/src/components/flows/flow-builder.tsx @@ -1217,6 +1217,24 @@ function SendListForm({ ), }); }; + const addSection = () => + onUpdateConfig({ + sections: [ + ...sections, + { + title: "", + rows: [ + { + reply_id: `row_${totalRows + 1}`, + title: `Option ${totalRows + 1}`, + next_node_key: "", + }, + ], + }, + ], + }); + const removeSection = (sIdx: number) => + onUpdateConfig({ sections: sections.filter((_, i) => i !== sIdx) }); const updateRow = ( sIdx: number, rIdx: number, @@ -1290,14 +1308,27 @@ function SendListForm({ key={sIdx} className="mb-3 rounded-md border border-slate-800 bg-slate-800/40 p-3" > - - updateSection(sIdx, { title: e.target.value }) - } - placeholder="Section title (optional)" - className="mb-2 bg-slate-800 text-xs" - /> +
+ + updateSection(sIdx, { title: e.target.value }) + } + placeholder={`Section ${sIdx + 1} title (optional)`} + className="bg-slate-800 text-xs" + /> + {sections.length > 1 && ( + + )} +
{section.rows.map((row, rIdx) => (
))} + {/* WhatsApp's interactive-list spec caps sections at 10. Group rows + by category (Billing / Support / Sales etc.) to give customers a + scannable menu. */} + {sections.length < 10 && ( + + )}
);