Passer au contenu principal

OrderConfirmation

Implemented

Post-purchase confirmation — success state with role="status" + aria-live="polite". Displays order ID, buyer identity (name + email), event card (title / venue / date / issued tickets), total paid, and ticket actions (download + add to Apple/Google Wallet). Uncontrolled organism; FR + EN via locale prop (default fr).

Categoryorganisms
Sourcecomponents/organisms/orderconfirmation/OrderConfirmation.tsx
AI HintCompose for the post-payment success screen of a checkout flow. Render once when payment confirmation is received. Use the success-tint palette (ep-semantic-success-tint/-fg/-tint-border) — never repurpose other semantic tints (error/warning/info). Do not add callback props in this cascade (ADR follow-up).

Confirmation post-paiement (succès, numéro de commande, billets émis, total payé, téléchargement, ajout au portefeuille). FR-CA : « Achat confirmé · Vos billets sont prêts · Numéro de commande · Télécharger les billets · Ajouter à Apple/Google Wallet ».

OrderConfirmation

Organism — Commerce family (Family 7)

Composant non contrôlé avec role="status" + aria-live="polite". Affiché à l'utilisateur après paiement réussi pour confirmer visuellement la transaction.

Achat confirmé

Vos billets sont prêts.

Numéro de commande: EPL-2026-00001

Nom
Marie Tremblay

Festival Jazz MTL — Quartet

Lieu : Place des Festivals

Date : 24 juin 2026 · 20 h

  • Admission générale× 2
  • Première balcon× 1

Total payé : 222,52 $

This component supports light and dark mode.

Props

Prop
Type
Default
Description
orderId*
string
—

Identifiant de la commande (EPL-2026-XXXXX).

buyerName*
string
—

Nom complet de l'acheteur.

buyerEmail*
string
—

Courriel.

eventTitle*
string
—

Titre de l'événement.

venue*
string
—

Lieu.

date*
string
—

Date pré-formatée par l'appelant.

tickets*
{ tier: string; quantity: number }[]
—

Billets émis.

total*
string
—

Total payé pré-formaté.

locale
"fr" | "en"
—

Pilote 12 libellés FR/EN (défaut « fr »).

className
string
—

Classes additionnelles fusionnées sur la <section> racine.

Props

Preview

OrderConfirmation

Prop
Type
Required
Default
Description
orderId
string
Required
—

Identifiant de la commande (ex. EPL-2026-00001).

buyerName
string
Required
—

Nom complet de l'acheteur.

buyerEmail
string
Required
—

Courriel de l'acheteur.

eventTitle
string
Required
—

Titre de l'événement associé à la commande.

venue
string
Required
—

Lieu de l'événement.

date
string
Required
—

Date de l'événement, pré-formatée par l'appelant (le composant n'applique aucun format).

tickets
{ tier: string; quantity: number }[]
Required
—

Billets émis : un objet { tier, quantity } par ligne de billet.

total
string
Required
—

Montant total payé, pré-formaté par l'appelant (ex. « 222,52 $ »).

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

Pilote 11 libellés localisés (heading, name, email, download, wallet…). Known issue : le label « Total payé » / « Total paid » n'était pas couvert avant le fix ; désormais inclus via locale.

className
string
Optional
—

Classes CSS additionnelles fusionnées sur la <section> racine.

Quick use:<OrderConfirmation />

Accessibility

ARIA rolestatus

Type

1 rule

TypeScript strict mode

orderId, buyerName, buyerEmail, eventTitle, venue, date, tickets, total all required; locale, className optional

i18n

1 rule

DS i18n convention (locale prop)

11 libellés FR/EN miroirés via locale prop ; Total payé / Total paid inclus

ARIA

1 rule

WCAG 4.1.3 (Status Messages)

role="status" + aria-live="polite" announces confirmation to assistive tech

Contrast

1 rule

WCAG 1.4.3

Light theme: ≥4.5:1 partout. Dark theme: muted-on-success-tint 4.37:1 — résolu par Step 6 (swap muted → success-fg ADR-027)

Usage

Import

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

Example 1

tsxSnippet
<OrderConfirmation
  orderId="EPL-2026-00001"
  buyerName="Marie Tremblay"
  buyerEmail="[email protected]"
  eventTitle="Festival Jazz MTL — Quartet"
  venue="Place des Festivals"
  date="24 juin 2026 · 20 h"
  tickets={[{ tier: "Admission générale", quantity: 2 }]}
  total="222,52 $"
/>

Example 2

tsxSnippet
<OrderConfirmation {...props} locale="en" />

Anti-patterns

— Do not hardcode FR strings in JSX — all copy must live in the locale labels object

— Do not use muted text directly on success-tint backgrounds (WCAG AA fail in dark) — use the ADR-027 success-fg token

— Do not place focusable interactive elements inside role="status" live regions (WAI-ARIA authoring)

Design System v4.1.0 | ePassLive