​
Confirmation Experience — House of Legends

Documented: 2026-05-11 Doc Status: Excellent | ✓ All 6 checks passed

​
Overview

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

​
Confirmation Flow

After OnePay webhook confirms payment, the 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:
  • 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

FunctionPurpose
reservations.confirmOnePayPaymentWebhook confirms payment
reservations.generateQRCodeGenerate QR for reservation
notifications.sendConfirmationEmail + WhatsApp confirmation
notifications.generateInvoicePDFGenerate PDF invoice
notifications.generateCalendarEventGenerate ICS file

​
Components

ComponentPurpose
confirmation-display.tsxMain confirmation UI
qr-code-display.tsxQR code rendering
download-invoice-button.tsxPDF download
add-to-calendar-button.tsxICS download
confirmation-whatsapp.tsxWhatsApp share