Page: Session Booking
Code: SBOK Route:
/courses/[slug]/book Access: Authenticated Priority: P0 Status: In Scope Purpose
Enable students to select a Student-Teacher and schedule a tutoring session for their enrolled course.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
|---|---|---|
| CDET | "Book a Session" CTA | Course detail page |
| CDET | ST card "Book with [Name]" | Pre-selected ST |
| SDSH | "Book Session" on course card | From dashboard |
| STPR | "Book Session" button | Pre-selected ST |
| STDR | "Book Session" on ST card | Pre-selected ST |
| CCNT | "Schedule Session" | From course content |
Outgoing (users navigate to)
Data Requirements
| Entity | Fields Used | Purpose |
|---|---|---|
| student_teachers | user_id, course_id, is_active | Available STs |
| users (STs) | name, avatar, timezone | ST display |
| availability | day_of_week, start_time, end_time, timezone | Available slots |
| sessions | scheduled_start, teacher_id | Existing bookings (to exclude) |
| enrollments | student_id, course_id | Verify enrollment |
| courses | title, session_count | Course context |
Sections
Header
- • Page title: "Book a Session"
- • Course context: "for [Course Title]"
- • Back link → CDET or previous page
Step 1: Select Student-Teacher (if not pre-selected)
- • **ST Cards:**
- • **Or:** "Schedule Later" option per CD-033
Step 2: Select Date
- • **Calendar View:**
- • **Quick Options:**
Step 3: Select Time
- • **Time Slots:**
- • **Timezone Note:**
Step 4: Confirm Booking
- • **Summary:**
- • **Reminders:** Checkbox to enable session reminders
- • **Notes field:** Optional message to ST
- • **Confirm button:** "Book Session"
"Schedule Later" Flow (per CD-033)
- • Instead of selecting ST/time:
Confirmation Screen
- • Success message: "Session Booked!"
- • Session details
- • "Add to Calendar" button (Google, Apple, Outlook)
- • "Back to Dashboard" → SDSH
- • "Book Another Session"
User Stories Fulfilled
- • US-S044: Book session with Student-Teacher
- • US-S045: View available time slots
- • US-S046: Receive booking confirmation
- • US-P006: Platform enables session booking
- • US-P020: Calendar-based scheduling
- • US-P024: Session reminders
- • US-S084: Access ST calendar during enrollment
- • US-S085: "Schedule Later" option
States & Variations
| State | Description |
|---|---|
| ST Pre-selected | Skip step 1, show ST info |
| Choose ST | Multiple STs available, show selection |
| No STs Available | "No Student-Teachers available. Try later." |
| Date Selected | Show time slots for that date |
| Slot Selected | Show confirmation |
| Booking | Loading state during booking |
| Success | Confirmation screen |
| Schedule Later | Alternative flow, skips ST/time |
Mobile Considerations
- • Wizard-style flow (one step per screen)
- • Calendar is swipeable
- • Time slots are large touch targets
- • Sticky "Confirm" button at bottom
Error Handling
| Error | Display |
|---|---|
| Not enrolled | "You must be enrolled to book. [Enroll now]" |
| ST unavailable | "This time is no longer available. Select another." |
| Booking conflict | "You have another session at this time." |
| Booking fails | "Unable to book. Please try again." |
Analytics Events
| Event | Trigger | Data |
|---|---|---|
`page_view` | Page load | course_id, st_preselected |
`st_selected` | ST chosen | st_id |
`date_selected` | Date chosen | date |
`time_selected` | Slot chosen | time, st_id |
`booking_attempted` | Confirm clicked | course_id, st_id, datetime |
`booking_success` | Booking confirmed | session_id |
`booking_failed` | Booking failed | error_type |
`schedule_later` | Schedule later chosen | course_id |
Notes
- • CD-033: "Schedule Later" is key option for flexible enrollment
- • Buffer time: 15min between sessions (configurable per ST)
- • Timezone handling: All times stored UTC, displayed in user's timezone
- • VideoProvider room created on-demand at session time (not at booking)
- • Email confirmation with calendar invite via Resend + React Email
- • Race condition: Double-booking prevented via DB constraint + validation