EventRegistrationSuccess Component

EventRegistrationSuccess Component

Component: src/features/events/components/EventRegistrationSuccess.tsx Route: /events/:orgIdPrefix/:orgSlug/:eventSlug/success Access: Public (no authentication required) Last updated: April 13, 2026

---

Overview

Post-registration confirmation for paid/free event flows. Uses English-only copy from the RS object (no i18n), consistent with other public routes.

Data is loaded via `GET .../functions/v1/get-registration-details` (not direct Supabase from the browser). The page polls until isFinalized: true when registration or session_id query params are present.

> Waiver note: Required waivers are completed on PublicEventPage before payment. The success page checklist block is for other checklist items / legacy cases.

---

URL parameters

Set by PublicEventLoader from the query string:

| Param | Source |

|-------|--------|

| `registration` | Embedded flow: `navigate('.../success?registration=' + registrationId)` |

| `session_id` | Legacy / redirect Checkout return (optional) |

| `token` / `t` / `access_token` | Access token from checkout/success redirect (required for verification API) |

/events/{prefix}/{orgSlug}/{eventSlug}/success?registration={uuid}&token={accessToken}

---

States

1. Loading / finalizing — Spinner; polls get-registration-details every 2s (max ~30 attempts). 2. Stalled / error — Top bar: Return to Event Page (left), Retry status check (right). Stalled copy may mention email as a possibility; hard errors do not promise email. 3. Success — Full confirmation UI (below). No back button here; users use browser chrome or a bookmark if needed.

If registration/session_id is present but token is missing, the page enters error state immediately and does not call the verification endpoint.

---

Success UI (confirmed)

• Layout: min-h-screen flex flex-col bg-background; `main` is flex-1 with py-8 sm:py-10, content max-w-2xl mx-auto px-4 sm:px-6 (tokenized spacing per STYLING-GUIDE — border-border, text-muted-foreground, Card + shadow-sm).
• Header: Checkmark, “You’re registered!”, confirmation email line.
• Card: Confirmation number, event name, fund/org name (organizationName from API = org for events.organization_id), date/time/location, registrant, tickets + amount, optional QR block (api.qrserver.com, same pattern as elsewhere).
• Actions: Add to Calendar (ICS), Share only. Share uses the canonical event page URL (/events/.../{eventSlug}), not the tokenized success URL.
• Checklist optional second Card if hasChecklist.
• Fund footer strip: border-t border-border bg-card mt-auto, max-w-6xl mx-auto px-4 py-8 sm:px-6 — copy: *For questions about this event, contact {fundName}.* (fundName = organizationName or fallback “the event organizer”). Matches the giving page pattern (org strip above platform footer).
• `PublicFooter` pageType="success" immediately below (see PUBLIC-FOOTER-SEO.md). Container uses `max-w-6xl` / sm:px-6 to align with DonorLandingPage.

---

Backend contract

get-registration-details returns JSON shaped like EventSuccessConfig (event fields, organizationName, isFinalized, payment/registration status, etc.). The request must include a token (token/t/access_token) plus either registration_id or session_id. See `EVENTS-EDGE-FUNCTIONS.md` § get-registration-details — including the `organizations!events_organization_id_fkey` embed requirement.

---

Related Stripe UI

PublicEventPage wraps the payment form in `StripeProvider` (src/components/shared/StripeProvider.tsx). The Stripe **stripe prop passed to <Elements> must be a stable loadStripe promise for the app lifetime; do not swap Promise.resolve(null) → loadStripe in useEffect (React warning: unsupported stripe prop change).

---

Related docs

• 05-PUBLIC-EVENT-PAGE.md — checkout + polling behavior
• 08-PUBLIC-EVENT-LOADER.md — route + query keys
• ../06-EVENTS-TICKETING.md — feature index
• ../../../backend/EVENTS-EDGE-FUNCTIONS.md — edge functions

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