EventRegistrationSuccess Component

EventRegistrationSuccess Component

Component: src/features/events/components/EventRegistrationSuccess.tsx Route: /events/:orgIdPrefix/:orgSlug/:eventSlug/success Access: Public (no authentication required)

---

Overview

The EventRegistrationSuccess component displays a confirmation page after successful event registration. It shows registration details, next steps, and provides access to the checklist portal if applicable.

Features

• Confirmation message - Success state with checkmark
• Registration details - Event name, date, ticket info
• Confirmation number - Registration ID for reference
• Checklist link - Magic link to checklist portal (if event has checklist)
• Calendar add - Add to calendar button (future enhancement)
• Print receipt - Print-friendly view

UI Layout

┌─────────────────────────────────────────────────────────┐
│                                                         │
│                    ✓                                    │
│           Registration Confirmed!                       │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Thank you for registering for:                         │
│                                                         │
│  Event Name                                             │
│  December 25, 2025 at 6:00 PM                          │
│  Venue Name, City, State                               │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Confirmation Number: REG-ABC123                        │
│                                                         │
│  Tickets:                                               │
│  • 2x General Admission                                 │
│                                                         │
│  Amount Paid: $100.00                                   │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  📋 Complete Your Pre-Event Checklist                   │
│                                                         │
│  You have items to complete before the event.           │
│  A link has been sent to your email.                    │
│                                                         │
│  [Go to Checklist Portal]                               │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  A confirmation email has been sent to:                 │
│  john@example.com                                       │
│                                                         │
│  [Back to Event Page]                                   │
│                                                         │
└─────────────────────────────────────────────────────────┘

URL Parameters

The component receives registration data via URL query parameters:

// URL: /events/abc123/org-slug/event-slug/success?registration_id=xxx&access_token=yyy

const searchParams = new URLSearchParams(window.location.search);
const registrationId = searchParams.get('registration_id');
const accessToken = searchParams.get('access_token');

State Management

const [registration, setRegistration] = useState<Registration | null>(null);
const [event, setEvent] = useState<Event | null>(null);
const [loading, setLoading] = useState(true);

Data Fetching

useEffect(() => {
  const fetchRegistration = async () => {
    if (!registrationId) return;
    
    // Fetch registration details
    const { data } = await supabase
      .from('event_registrations')
      .select(`
        *,
        events (*),
        event_ticket_types (*)
      `)
      .eq('id', registrationId)
      .single();
    
    setRegistration(data);
    setEvent(data.events);
    setLoading(false);
  };
  
  fetchRegistration();
}, [registrationId]);

Checklist Portal Link

If the event has checklist items and the registration has an access token:

const checklistUrl = accessToken 
  ? `/checklist/${accessToken}`
  : null;

Related Components

• PublicEventPage - Registration form
• ChecklistPortal - Pre-event requirements

Related Documentation

• Main Events Doc: ../06-EVENTS-TICKETING.md
• Checklist Portal: ./07-CHECKLIST-PORTAL.md

Synced from IFMmvp-Frontend documentation: pages/marketing/events/06-EVENT-REGISTRATION-SUCCESS.md