<seva-my-registrations>

The <seva-my-registrations> component renders a trigger button and a modal overlay that shows the authenticated user’s event registration history.

Overview

When opened, the modal fetches registrations from the API and displays summary stats (registration count, guest count, total paid), period filter tabs, and an expandable list of registrations with guest details and check-in status. If the user is not authenticated, the modal shows a sign-in prompt with an embedded <seva-auth> form.

This is a modal component — it self-manages authentication from localStorage and does not require a glue script to propagate auth tokens. See Inline vs. modal components for details.

Quick Example

<script
  type="module"
  src="YOUR_COMPONENTS_URL/seva-my-registrations.js"
></script>

<seva-my-registrations tenant-slug="my-club" api-url="https://api.seva.tools">
</seva-my-registrations>

<!-- The element above includes a built-in trigger button.
     You can also open the modal from your own button: -->
<button
  onclick="document.dispatchEvent(new CustomEvent('seva:open-my-registrations'))"
>
  My Registrations
</button>

The <seva-my-registrations> element must be in the DOM — it listens for the seva:open-my-registrations event. The element renders its own “My Registrations” trigger button, but you can also open the modal from a custom button by dispatching the event on document.

Attributes

Attribute	Type	Default	Description
tenant-slug	string	''	Required. Your organization’s tenant slug.
api-url	string	'https://api.seva.tools'	Base URL of the Seva API.
theme	'light' | 'dark'	'light'	Color theme.
auth-token	string	''	Session token. Modal components typically self-manage this from localStorage, so you rarely need to set it manually.
no-trigger	boolean	false	Hide the built-in “My Registrations” trigger button. Use this when you want to open the modal exclusively from your own button via the seva:open-my-registrations event.

Events emitted

Event	Effect
seva:signed-out	Dispatched on document if the API returns 401/403 while loading registrations. Other Seva components listening for this event will clear their auth state.

Events listened for

The component listens on document for:

Event	Effect
seva:authenticated	Stores the token, refreshes data if the modal is open.
seva:signed-out	Clears auth state and registration data.
seva:open-my-registrations	Opens the modal.

UI features

Period filter tabs

Three tabs filter registrations by time period:

Tab	Description
Upcoming (default)	Events that haven’t happened yet.
Past	Events that have already occurred.
All	All registrations regardless of date.

Switching tabs re-fetches data from the API with the selected period.

Summary stats

Three cards appear above the registration list:

• Registrations — Total count for the selected period.
• Guests — Total guest count across all registrations.
• Total — Sum of all amounts paid, formatted as currency.

Registration rows

Each registration shows:

• Event name and date
• Check-in status — A checkmark (✓) if checked in, a dash (—) if not. Cancelled or declined registrations show a status badge instead.
• Guest count — e.g., “+2 guests”
• Amount paid

Expandable guest details

Click a registration row with guests to expand it and see each guest’s name, ticket type, and individual check-in/cancelled status.

Status badges

Registrations with cancelled or declined status display a colored badge instead of the check-in indicator.

Opening the modal

The modal can be opened in three ways:

1. Built-in trigger button — The component renders a “My Registrations” button automatically.
2. Custom event — Dispatch seva:open-my-registrations on document:

   document.dispatchEvent(new CustomEvent("seva:open-my-registrations"));

3. Direct method call — Call openModal() on the element:

   document.querySelector("seva-my-registrations").openModal();

Key types

type RegistrationPeriod = "upcoming" | "past" | "all";

interface MyRegistrationItem {
  id: string;
  status: string;
  createdAt: string;
  event: {
    id: string;
    name: string;
    slug: string;
    eventStart: string | null;
    eventEnd: string | null;
    location: string | null;
  };
  selfAttendee: MyRegistrationsAttendee | null;
  guests: MyRegistrationsAttendee[];
  totalPaidCents: number;
}

interface MyRegistrationsAttendee {
  id: string;
  firstName: string | null;
  lastName: string | null;
  ticketName: string;
  ticketPriceCents: number;
  status: string;
  checkedIn: boolean;
}

interface MyRegistrationsResponse {
  summary: {
    registrationCount: number;
    guestCount: number;
    totalPaidCents: number;
  };
  registrations: MyRegistrationItem[];
}

Full Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Registrations</title>
    <script
      type="module"
      src="YOUR_COMPONENTS_URL/seva-my-registrations.js"
    ></script>
    <style>
      body {
        font-family: system-ui, sans-serif;
        max-width: 400px;
        margin: 2rem auto;
      }
    </style>
  </head>
  <body>
    <h1>My Account</h1>

    <seva-my-registrations
      tenant-slug="my-club"
      api-url="https://api.seva.tools"
    >
    </seva-my-registrations>

    <!-- Or use a custom button -->
    <button
      onclick="document.dispatchEvent(new CustomEvent('seva:open-my-registrations'))"
    >
      View Registrations
    </button>
  </body>
</html>