Skip to main content

TicketWallet

Implemented

The buyer's ticket wallet: one row per ticket with a Code-128 barcode (Barcode atom, decorative) or an empty slot, event title, venue · date, door/section/seat detail, a status pill across four wallet statuses (active / used / transferred / expired) and a transfer button enabled only on active tickets.

Categoryorganisms
Sourcecomponents/organisms/ticketwallet/TicketWallet.tsx
AI HintUse for the buyer's saved-ticket list (wallet/account pages). Composes the Barcode and Button atoms. Transfer is an opt-in callback — wire onTransfer to navigate or open the transfer flow.

Portefeuille de billets : une rangée par billet avec un vrai barcode Code-128 (atome Barcode, décoratif), titre, lieu · date, porte/section/siège, pill de statut (Actif / Utilisé / Transféré / Expiré) et bouton Transféré actif seulement sur les billets actifs. FR-CA : « Mon portefeuille de billets · Porte 4 · Transférer ».

TicketWallet

Organism — Wallet family (Family 5)

Carte par billet. Le bouton Transférer est désactivé pour les billets non actifs et porte un nom accessible distinct par billet (« Transférer — {titre} »). Le barcode Code-128 est décoratif — l'intégration Wallet/scan est faite côté scanner.

Mon portefeuille de billets

  • Festival Jazz MTL — Quartet

    Actif

    Place des Festivals · 24 juin 2026 · 20 h

    Porte 4 · Section Orchestre · Siège B12

  • OSM — Symphonie n° 5

    Actif

    Maison symphonique · 18 avril 2026 · 19 h 30

    Porte 2 · Section Première balcon · Siège C7

  • Lion d'Or — Gala Jazz

    Utilisé

    Lion d'Or · 2 mai 2026 · 21 h

    Porte 1

  • Salle Wilfrid-Pelletier — Récital

    Transféré

    Salle Wilfrid-Pelletier · 22 avril 2026 · 20 h

    Porte 1 · Section Parterre · Siège K14

  • Mutek — Session 5

    Expiré

    Quartier des spectacles · 25 août 2025 · 21 h

    Porte D

This component supports light and dark mode.

Props

Prop
Type
Default
Description
tickets*
WalletTicket[]
—

Billets à afficher (peut être vide).

heading
string
—

Titre de la section (défaut par locale : « Mon portefeuille de billets » / « My ticket wallet »).

locale
'fr' | 'en'
fr

Localise tous les libellés internes (pills, heading, bouton, préfixes porte/section/siège).

onTransfer
(ticketId: string) => void
—

Callback de transfert, émis par le bouton d’un billet actif.

className
string
—

Classes additionnelles sur la racine <section>.

Props

Preview

TicketWallet

Prop
Type
Required
Default
Description
tickets
WalletTicket[]
Required
—

Tickets to render. `WalletTicket` carries id, eventTitle, venue, pre-formatted date, door, optional section/seat, status (active | used | transferred | expired) and an optional qrPayload rendered as a Code-128 barcode.

heading
string
Optional
locale-dependent ('Mon portefeuille de billets' / 'My ticket wallet')

Section heading text; defaults per locale.

locale
"fr" | "en"
Optional
'fr'

Localizes every built-in label (heading, status pills, transfer button, door/section/seat prefixes).

onTransfer
(ticketId: string) => void
Optional
—

Transfer callback; fired only from the per-ticket button (enabled on active tickets, distinct accessible name per ticket).

className
string
Optional
—

Appended to the root section element.

Quick use:<TicketWallet />

Accessibility

ARIA roleregion

Type

1 rule

NASA Rule 7

Every WalletTicket.status must be one of the four wallet statuses

ARIA

1 rule

WCAG 1.3.1 / 2.4.4

section aria-labelledby + h2; ul role='list'; transfer buttons expose a distinct accessible name per ticket

Contrast

1 rule

WCAG 1.4.3

Status pill pairs are AA-verified in both themes (success/info/error tint+fg, text-body on bg-3)

Usage

Import

tsxSnippet
import { TicketWallet } from "@epasslive/design-system"

Example 1

tsxSnippet
<TicketWallet tickets={tickets} />

Example 2

tsxSnippet
<TicketWallet tickets={tickets} locale="en" onTransfer={(id) => router.push(`/transfer/${id}`)} />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

Design System v4.1.0 | ePassLive