Skip to main content

📅 Session Booking Journey

This journey documents how learners book 1:1 coaching sessions with their assigned coach using the Calendly integration.

Interactive Flow Diagram​

Click any step to see detailed information, connected features, and API endpoints.

📅Learner Journey

Session Booking Journey

How learners book 1:1 coaching sessions with their assigned coach via Calendly integration.

🎯Initiate
Check Available SessionsSystem
View Book Session CardLearner
⚡
Click Book SessionLearner
📆Select
Calendly Popup OpensSystem (Calendly)
⚡
Select DateLearner
Select Time SlotLearner
Confirm DetailsLearner
✅Confirm
Submit BookingLearner
Calendly Event CreatedSystem (Calendly)
Extract Event IDSystem (Frontend)
Verify Session in BackendSystem (Backend)
🔄🔌
Show Success MessageSystem → Learner
Session Appears on DashboardLearner
Legend:
User Action
Decision Point
System Action
Notification
Milestone

Journey Summary​

AttributeValue
ActorsLearner, System, Calendly
Entry PointDashboard with assigned coach
Exit PointSession booked and visible on dashboard
Typical Duration2-5 minutes
Steps14

Phase Breakdown​

Phase 1: Initiate​

Preparation and validation:

  1. System checks session quota - noBookableCoachingSessions
  2. BookSessionCard displays if quota available
  3. Learner clicks "Book Session" button

Phase 2: Select​

Calendly scheduling process:

  1. Calendly popup opens with coach's calendar
  2. Learner selects date from available options
  3. Learner selects time slot
  4. Details pre-filled from DeepSkill profile

Phase 3: Confirm​

Booking confirmation and tracking:

  1. Learner submits booking
  2. Calendly creates event and sends invites
  3. Webhook fires to DeepSkill
  4. Backend verifies and stores session
  5. Dashboard updates with new session

Key Integration Points​

External Services​

  • Calendly: Scheduling and calendar management
    • Uses PopupModal for embedded booking
    • Webhook integration for event creation

Internal APIs​

  • POST /verify-calendly-session - Create IC session from Calendly event
  • GET /individual-coaching-sessions - Fetch user's sessions
  • GET /canceled-unscheduled-ic-sessions - Check canceled sessions

Frontend Components​

  • BookSessionCard - Booking card with coach info
  • BookASession - Main booking interface
  • CalendlyEmbed - Calendly popup wrapper
  • PopupModal - Modal from react-calendly

Data Flow​

┌────────────┐     ┌──────────┐     ┌────────────┐     ┌───────────┐
│  Learner   │────►│ Dashboard│────►│  Calendly  │────►│  Backend  │
│            │     │          │     │   Popup    │     │  (Strapi) │
└────────────┘     └──────────┘     └────────────┘     └───────────┘
                         │                 │                  │
                         │    onClick      │   onEvent        │
                         │    "Book"       │   Scheduled      │
                         ▼                 ▼                  ▼
                   ┌──────────┐     ┌──────────┐     ┌───────────┐
                   │CalendlyId│────►│ Extract  │────►│  Create   │
                   │ in Popup │     │ Event ID │     │ IC Session│
                   └──────────┘     └──────────┘     └───────────┘

Calendly URL Construction​

The Calendly URL is constructed dynamically:

const calendlyUrl = `${coach.calendlyUrl}?email=${user.email}&name=${user.firstName}%20${user.lastName}`;

This pre-fills:

  • Learner's email address
  • Learner's full name

Session Quota Logic​

const bookedSessions =
  sessions.data?.filter(() => program).length! +
  (canceledUnscheduledICSessions?.length ?? 0) <
  (user?.noBookableCoachingSessions ?? 0);

A learner can book if:

  • They have a coach assigned
  • Their total sessions (booked + canceled) < quota

← Back to Learner Hub