TicketTransferModal
ImplementedTicket transfer dialog — enter recipient email, select the ticket to transfer, add an optional message, and confirm. Composes the Modal molecule for dialog chrome (portal, scrim, footer slot). Preserves legacy transfer flow.
components/organisms/tickettransfermodal/TicketTransferModal.tsxBoîte de dialogue modale de transfert de billet (destinataire + message optionnel). FR-CA : « Transférer ce billet · Courriel du destinataire · Envoyer le transfert · Annuler ».
TicketTransferModal
Organism — Commerce family (Family 7)
Modal contrôlée avec role="dialog" et aria-modal="true". Le parent gère `open` ; la fermeture déclenche `onClose`. Le focus est piégé à l'intérieur (géré par le navigateur via autofocus).
This component supports light and dark mode.
Props
open*booleanVisibilité.
onClose*() => voidFermeture (bouton ✕, clic backdrop, Escape via footer).
ticket*{ id; eventTitle; tier; date }Billet à transférer.
locale'fr' | 'en'frBascule des libellés.
classNamestringClasse CSS additionnelle appliquée au wrapper du contenu.
Props
TicketTransferModal
openboolean—Whether the transfer dialog is visible.
onClose() => void—Called when the dialog should close (cancel, submit, or ESC).
ticket{ id: string; eventTitle: string; tier: string; date: string }—The ticket to transfer — displays event title, tier, and date in the header.
locale"fr" | "en"'fr'Locale for labels — switches between French and English strings.
classNamestring—Additional CSS class applied to the children wrapper div.
<TicketTransferModal />Accessibility
composition
1 rulebehavior
3 rulesUsage
Import
import { TicketTransferModal } from "@epasslive/design-system"Example 1
<TicketTransferModal open={true} onClose={() => {}} ticket={{ id: '1', eventTitle: 'Concert', tier: 'VIP', date: '2026-08-28' }} />Anti-patterns
— Do not reimplement dialog chrome — Modal molecule handles portal, scrim, ESC, focus trap
— Do not pass legacy isOpen/orderTickets/onTransfer props — use open/ticket/onClose