PublicEventLoader Component

PublicEventLoader Component

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

---

Overview

The PublicEventLoader is a wrapper component that handles URL parsing, data fetching, and routing for public event pages. It fetches event data from the get-public-event Edge Function and renders the appropriate child component.

Recent Updates (Feb 2026)

• Registration status passthrough: The Edge Function now returns registration_status, registration_open_date, and registration_close_date fields instead of blocking access when registration is not open. These fields are passed through to PublicEventPage for display.

Recent Updates (Apr 2026)

• Success token passthrough: Loader now reads token (and aliases t / access_token) from query params and passes it to EventRegistrationSuccess as accessToken.

Features

• URL parsing - Extracts org prefix, org slug, and event slug
• Data fetching - Calls Edge Function to get event data
• Loading state - Shows spinner while fetching
• Error handling - Displays error messages for invalid URLs
• Route handling - Routes to event page, success page, or checklist

URL Structure

/events/{orgIdPrefix}/{orgSlug}/{eventSlug}
/events/{orgIdPrefix}/{orgSlug}/{eventSlug}/success
/events/{orgIdPrefix}/{orgSlug}/{eventSlug}/checklist/{token}

Example:

/events/abc123/awakenings/guatemala-trip-2025
/events/abc123/awakenings/guatemala-trip-2025/success?registration=xxx
/events/abc123/awakenings/guatemala-trip-2025/checklist/xyz789

URL Parameters

const { orgIdPrefix, orgSlug, eventSlug } = useParams<{
  orgIdPrefix: string;
  orgSlug: string;
  eventSlug: string;
}>();

State Management

The loader uses a `viewMode` union (loading | event | success | error) plus eventConfig and error string — see PublicEventLoader.tsx.

Data fetching & success routing

• Fetches `get-public-event?org=${orgSlug}&slug=${eventSlug}` when not on a checklist sub-route and when there is no success query.
• Success page: If the URL has session_id or `registration` (query key), viewMode is set to success and `EventRegistrationSuccess` is rendered with accessToken from token/t/access_token (it calls get-registration-details). Legacy docs may say registration_id; the app uses `registration`.
• Canceled checkout: ?canceled=true is passed through to PublicEventPage as the canceled prop.

Routing logic (simplified)

// Checklist: path contains '/checklist/' → <ChecklistPortal />
// session_id or registration query → <EventRegistrationSuccess accessToken={token} />
// Else after fetch → <PublicEventPage config={eventConfig} canceled={canceled === 'true'} />

Loading / error UI

Loading uses PlainLoadingScreen, and errors use PublicStatusCard with a "Go Back" action — match PublicEventLoader.tsx for exact markup.

Security Considerations

• Org ID prefix validation - Ensures URL matches actual organization ID
• Event status check - Only shows published events (Edge Function enforces status = 'published')
• Registration status - Edge Function returns registration_status flag instead of blocking; the frontend gates registration UI accordingly
• No sensitive data - Edge Function only returns public event info

Related Components

• PublicEventPage - Registration form
• EventRegistrationSuccess - Confirmation page
• ChecklistPortal - Pre-event requirements

Related Documentation

• Main Events Doc: ../06-EVENTS-TICKETING.md
• Public Event Page: ./05-PUBLIC-EVENT-PAGE.md

Synced from IFMmvp-Frontend documentation: pages/fundraising/events/08-PUBLIC-EVENT-LOADER.md