UJ-M-007: View Event Details

Member views comprehensive event information before deciding to register

Journey Overview

Attribute	Value
Journey ID	UJ-M-007
Actor	Member or public visitor
Goal	Review event details to decide on attendance
Trigger	Member clicks on an event from listing
Outcome	Member has full information to make registration decision

Preconditions

• Event exists and is published
• For member-only events: User is authenticated
• Event is not cancelled

Journey Flow

Event Details Page Layout

┌─────────────────────────────────────────────────────────────────┐
│ [Featured Image / Banner]                                       │
│                                                                 │
│ Event Category Badge    Share Button    Favorite Button         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│ Event Title                                                     │
│ ─────────────────────────                                       │
│                                                                 │
│ 📅 Date & Time                    💰 From $XX.XX                │
│ 📍 Location / Online              🎓 X CPD Points               │
│                                                                 │
│ [Register Now Button]                                           │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│ Tabs: [Overview] [Schedule] [Speakers] [Sponsors] [Location]    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│ Tab Content Area                                                │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Detailed Sections

1. Header Section

   Featured Image:

   • Full-width banner image
   • Fallback to category default if none

   Quick Actions:

   • Share button (copy link, social share)
   • Favorite/Save button
   • Add to calendar (preview)

   Key Details:

   • Event title (H1)
   • Category badge
   • Date and time with timezone
   • Location or “Online Event”
   • Price range or “Free”
   • CPD points (if applicable)
   • Registration deadline (if set)
2. Overview Tab

   Description:

   • Full event description (rich text)
   • Key highlights
   • What attendees will learn
   • Who should attend

   Quick Facts:

   Field	Value
   Duration	X hours
   Format	Live / Online / Hybrid
   Capacity	X spots (Y remaining)
   CPD Points	X points in [Category]
   Member Price	$XX
   Non-Member Price	$XX

3. Schedule Tab (Multi-Session Events)

   Timeline view of sessions:

   9:00 AM  ┌─────────────────────────────────┐
            │ Registration & Networking       │
            │ Foyer                           │
            └─────────────────────────────────┘
   
   9:30 AM  ┌─────────────────────────────────┐
            │ Keynote: Future of Industry     │
            │ Speaker: Jane Smith             │
            │ Main Hall • 60 min              │
            └─────────────────────────────────┘
   
   10:30 AM ┌─────────────────────────────────┐
            │ Morning Tea                     │
            │ Foyer • 30 min                  │
            └─────────────────────────────────┘
   

   Each session shows:

   • Time slot
   • Session title
   • Speaker(s)
   • Room/Location
   • Duration
   • CPD points (if per-session)
4. Speakers Tab

   Speaker cards with:

   Element	Description
   Photo	Professional headshot
   Name	Full name
   Title	Job title
   Company	Organization
   Bio	Brief biography
   Session	Which session they’re presenting
   Links	LinkedIn, Website

   Main Speaker highlighted with badge

5. Sponsors Tab (if sponsors attached)

   Sponsor logos organized by tier:

   • Platinum Sponsors - Large logos, full descriptions
   • Gold Sponsors - Medium logos, brief descriptions
   • Silver Sponsors - Small logos
   • Bronze Sponsors - Logo list

   Each sponsor links to their company profile or website

6. Location Tab (Live Events)

   Venue Information:

   • Venue name
   • Full address
   • Embedded map (Google Maps)
   • Directions link
   • Parking information
   • Public transport options
   • Accessibility information

   For Online Events:

   • “This is an online event”
   • Platform information (Zoom, Teams, etc.)
   • Note: Link provided after registration
7. Ticket Options Section

   Ticket types displayed:

   Ticket Type	Price	Availability
   Early Bird	$79	Until Dec 1
   Member	$99	Available
   Non-Member	$149	Available
   Student	$49	ID required
   Group (5+)	$89/ea	Contact us

   Shows:

   • Current best price highlighted
   • Member discount if logged in
   • “You save $XX” messaging
   • Urgency: “Only X spots left”
8. Registration CTA

   Primary call-to-action:

   Available:

   • “Register Now” button
   • Selected ticket type
   • Quantity selector
   • Total price preview

   Sold Out:

   • “Join Waitlist” button
   • Notification when spots open

   Not Yet Open:

   • “Registration opens [Date]”
   • “Notify Me” button

   Closed:

   • “Registration Closed”
   • View only mode

Additional Features

Social Proof

• “X people registered”
• “Y people interested”
• Attendee avatars (if public)

Related Events

• “You might also like”
• Same category events
• Same speaker events
• Same series events

Member Benefits

If member is logged in:

• Member pricing highlighted
• Savings displayed
• “Member Exclusive” badge if applicable

Related Entities

• Event
• Event Ticket
• Sponsorship
• CPD Category

Related Journeys

• UJ-M-006
• UJ-M-008
• UJ-M-032

Acceptance Criteria

Frontend

• Event header with featured image
• Tabbed content layout
• Schedule timeline view
• Speaker cards with photos
• Sponsor logo display by tier
• Embedded map for venue
• Ticket selection interface
• Share functionality (link, social)
• Favorite/save functionality
• Mobile-responsive design
• SEO meta tags for public events

Backend

• GET /api/events/{id} - Full event details
• Includes: sessions, speakers, sponsors, tickets
• Includes: registration count, availability
• Includes: member pricing if authenticated

Permissions

• Public events viewable by all
• Member-only events require authentication
• Online event links hidden until registered

Business Rules

• Member pricing shown only to authenticated members
• Sold out events show waitlist option
• Past events show “Event Ended” state
• Cancelled events redirect to listing

Error Handling

• Event not found → 404 page
• Private event without auth → Login prompt
• Loading state while fetching