Booking Flow Builder Overview
The Booking Flow Builder is a visual canvas-based editor that allows users to design and configure booking flows for service businesses. Built on ReactFlow, it provides an intuitive drag-and-drop interface for creating complex booking workflows.
Key Concepts
Canvas Architecture
The Booking Flow Builder uses a command-driven mutation tracking system that captures all user interactions and aggregates them into optimized database operations on save.
Node Types
The canvas supports several node types representing different entities in a booking flow:
| Node Type | Description | Entity |
|---|---|---|
| Step Nodes | Flow steps (service selection, timeslot, customer info, etc.) | BookingFlowStep |
| Question Nodes | Questions within SERVICE_SELECTION steps | BookingQuestion |
| Answer Nodes | Answers to questions (plain text or service reference) | BookingQuestionAnswer |
| Category Nodes | Groupings for organizing answers | BookingAnswerCategory |
Edge Types
Edges represent relationships between nodes:
| Edge Type | Purpose |
|---|---|
| Step Edges | Connect steps in sequence |
| Question-Answer Edges | Link questions to their answers |
| Category-Answer Edges | Group answers under categories |
| Phantom Edges | UI-only extension points (not persisted) |
Documentation Structure
- Single Interactions - Individual canvas operations (create, update, delete)
- Interaction Sequences - Complex multi-step user workflows
- Mutation Tracking - How changes are captured and optimized
Quick Reference
User Capabilities
- ✅ Create nodes from the flow palette
- ✅ Update node content via inline forms
- ✅ Delete nodes with cascade cleanup
- ✅ Connect nodes by dragging edges
- ✅ Reroute edges to different targets
- ✅ Undo/redo all operations
- ✅ Multi-select and batch operations
Technical Highlights
- Command Stack: All interactions create commands enabling undo/redo
- Strategy Pattern: Each interaction type has a dedicated strategy
- Per-Entity Optimization: Mutations are aggregated per entity on save
- Canvas Data Separation: Position/viewport stored separately from entity data