Lantern Flows Bug Fixes - Iteration 2

Issues Addressed

1. Schedule Form Venue Selection Not Working

Problem: User couldn't click the "Select Venue" button in the schedule flow - venue picker wasn't opening.

Root Cause: Both ScheduleLightForm and VenuePicker were rendering simultaneously with the same z-index (z-50), causing the schedule form to block interaction with the venue picker below it.

Solution:

• Implemented explicit flowMode state tracking ('light', 'schedule', or null)
• Modified handleScheduleFormVenuePick() to close the schedule form before opening the venue picker
• Updated handleVenuePickerSelect() to check flowMode to determine which form to reopen after venue selection
• Ensured flowMode is cleared when flows complete or cancel

2. Confirmation Buttons Not Visible

Problem: Users couldn't see submit buttons in either light or schedule flows.

Potential Causes Addressed:

• Removed simultaneous rendering of overlapping modals that could hide buttons
• Verified button styling and positioning (buttons have proper z-index and are at bottom of viewport)
• Both LightLanternForm and ScheduleLightForm have buttons with correct conditional rendering

Impact: With forms no longer overlapping, buttons are now clearly visible and accessible.

Code Changes

Dashboard.jsx

New State Added:

const [flowMode, setFlowMode] = useState(null) // 'light' or 'schedule'

Updated Handlers:

handleLanternHubLightLantern()

• Sets flowMode = 'light' to track that user is in light flow
• Opens venue picker

handleScheduleLight()

• Sets flowMode = 'schedule' to track that user is in schedule flow
• Opens schedule form

handleScheduleFormVenuePick()

const handleScheduleFormVenuePick = () => {
  setShowScheduleForm(false)  // Close form to avoid overlap
  setShowVenuePicker(true)    // Open venue picker in front
}

handleVenuePickerSelect()

const handleVenuePickerSelect = (venue) => {
  setVenueForLight(venue)
  setShowVenuePicker(false)
  // Use flowMode to determine which form to reopen
  if (flowMode === 'schedule') {
    setShowScheduleForm(true)
  } else {
    setShowLightForm(true)
  }
}

handleVenuePickerCancel()

• Clears flowMode when user cancels venue selection

handleScheduleFormCancel() & handleLightFormCancel()

• Clear flowMode when flows are cancelled

handleLightFormConfirm()

• Clears flowMode on successful light confirmation

Flow Diagrams

Light Lantern Flow (from Hub)

User clicks "Light Lantern" 
  → flowMode = 'light'
  → VenuePicker opens
    User selects venue
      → VenuePicker closes
      → LightLanternForm opens (because flowMode === 'light')
        User fills form & clicks "Activate Lantern"
          → Light activates
          → flowMode = null

Schedule Light Flow (from Hub)

User clicks "Schedule a Light"
  → flowMode = 'schedule'
  → ScheduleLightForm opens at venue step
    User clicks "Select Venue"
      → ScheduleLightForm CLOSES (prevents overlap)
      → VenuePicker opens
        User selects venue
          → VenuePicker closes
          → ScheduleLightForm reopens at date/time step (because flowMode === 'schedule')
            User fills date/time and clicks "Continue to Set Interest"
              → Form moves to interest step (handled by parent)

Testing Checklist

• [ ] Light Lantern from Hub: Can click venue, see confirmation button, can submit
• [ ] Schedule Light from Hub: Can click "Select Venue", venue picker opens and closes properly
• [ ] Schedule venue step: Can see and click "Select Venue" button clearly
• [ ] Schedule datetime step: Can see and click "Continue" button
• [ ] Interest/mood step: Shows correct form and confirmation button
• [ ] All flows properly reset state after completion or cancellation
• [ ] No overlapping modals visible at any point

Files Modified

• src/dashboard/Dashboard.jsx - Added flowMode state, updated all handlers

Files Not Changed (but verified working)

• src/components/ScheduleLightForm.jsx - Buttons render correctly
• src/components/LightLanternForm.jsx - Buttons render correctly
• src/components/VenuePicker.jsx - No changes needed
• src/components/LanternHub.jsx - No changes needed