Confirmation Experience — House of Legends

Documented: 2026-05-11

Overview

After successful payment, guest sees confirmation with QR code, booking details, and helpful next steps.

Confirmation Flow

OnePay webhook confirms payment
      │
      ▼
BookingModal shows Step 4 (ConfirmationDisplay)
      │
      ├──► QR Code displayed
      ├──► Booking details shown
      ├──► Add to calendar option
      ├──► Download invoice option
      └──► "What's next" info

ConfirmationDisplay Component

// components/booking/confirmation-display.tsx
interface ConfirmationDisplayProps {
  reservationId?: string; // From context, not URL
}

Displays

• Success message ("Booking Confirmed!")
• Guest name
• Event + date + time
• Ticket type + quantity
• QR code (scannable for check-in)
• Total paid

Actions

• Download Invoice → PDF generation
• Add to Calendar → ICS file download
• View on Map → Google Maps link
• Share → Copy link

QR Code

Generated from reservation data:

{
  "reservationId": "abc123",
  "showDate": "2026-05-15",
  "quantity": 2
}

Guest scans at venue → check-in staff sees details.

Invoice PDF

Generated via @react-pdf/renderer:

Contents:

• House of Legends header
• Invoice number + date
• Guest name
• Event details
• Ticket breakdown
• Add-ons
• Total paid
• Payment method

Add to Calendar

Generates .ics file with:

• Event title: "House of Legends — [Show Name]"
• Date + time
• Location
• Description with booking ID

"What's Next" Section

Displayed below confirmation:

What's Next?
├── Arrive 15 minutes early
├── Bring your QR code (printed or phone)
├── Free seating — first come first served
├── Questions? Contact us at [email/phone]

Email + WhatsApp Confirmation

After payment webhook confirms:

Email

• Subject: "Your booking is confirmed — [Show Name]"
• Contains: QR code, booking details, add to calendar, what's next

WhatsApp

• Sent to guest phone number
• Contains: booking summary, QR code link

Backend Functions

Components