822bf8915f
- Add SSO login button to scanner PWA with Keycloak redirect flow via session state - Add manual scan mode via security key (16 chars) alongside QR camera scan - Add audio feedback: good (accepted), warning (already scanned), refused sounds - Add unique scan counter per reference (no double counting same ticket) - Add order details display in scan results (order number, email, total, items) - Add force validation button for refused tickets (organizer/ROLE_ROOT only), sends email notification - Add already_scanned warning only for same-day scans, exit_definitive only same day - Staff and exposant tickets always validate regardless of state API: ROLE_ROOT access to all events, categories, billets, and scan endpoints - ROLE_ROOT bypasses ownership checks on all /api/live/* endpoints - ROLE_ROOT can login via API (email/password and SSO) - Scan API accepts securityKey parameter in addition to reference - Scan response includes billetType, buyerEmail, and full order details with items Event management: tickets tab, staff/exposant accreditations, attestation PDF - Add Tickets tab listing all sold tickets with search, download PDF, resend email, cancel actions - Add Staff/Exposant accreditation form in Invitations tab, generates dedicated non-buyable billet - Add Attestation tab to generate sales certificate PDF with category/billet selection - PDF billet template shows STAFF/EXPOSANT badge with distinct colors (black/purple) - Exclude invitations from all financial stats (event stats, admin dashboard, organizer finances) - Fix sold counts to exclude invitations in categories recap - Use actual Stripe fee parameters instead of hardcoded values in commission calculations - Add commission detail breakdown (E-Ticket + Stripe) in categories and stats tabs Admin: download tickets for orders - Add download button on admin orders page (single PDF or ZIP for multiple tickets) Scanner PWA fixes: CSP (unpkg -> jsdelivr), service worker scope (/scanner/) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
484 lines
19 KiB
Twig
484 lines
19 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ ticket.reference }} - {{ event.title }}</title>
|
|
<style>
|
|
{% set is_inv = ticket.invitation ?? false %}
|
|
{% set billet_type = ticket.billet ? ticket.billet.type : 'billet' %}
|
|
{% set is_staff = billet_type == 'staff' %}
|
|
{% set is_exposant = billet_type == 'exposant' %}
|
|
{% set ac = is_staff ? '#111827' : (is_exposant ? '#7c3aed' : (is_inv ? '#d4a017' : (design ? design.accentColor : '#4f46e5'))) %}
|
|
{% set inv_color = design ? design.invitationColor : '#d4a017' %}
|
|
{% set inv_title = design ? design.invitationTitle : 'Invitation' %}
|
|
|
|
@page { size: A4; margin: 0; }
|
|
body {
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 11px;
|
|
color: #111;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
}
|
|
|
|
.main-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.main-table td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* ====== HEADER ====== */
|
|
.header {
|
|
background: {{ ac }};
|
|
color: #fff;
|
|
padding: 18px 30px;
|
|
}
|
|
.header-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.header-table td {
|
|
vertical-align: middle;
|
|
}
|
|
.header-org {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
.header-badge {
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
text-align: right;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ====== CONTENT ====== */
|
|
.content-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.content-left {
|
|
width: 62%;
|
|
padding: 24px 20px 24px 30px;
|
|
border-right: 3px solid {{ ac }};
|
|
}
|
|
.content-right {
|
|
width: 38%;
|
|
padding: 10px;
|
|
text-align: center;
|
|
background: #fafafa;
|
|
}
|
|
.content-right img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ====== EVENT INFO ====== */
|
|
.event-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin: 0 0 12px 0;
|
|
line-height: 1.2;
|
|
}
|
|
.info-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 6px;
|
|
}
|
|
.info-table td {
|
|
padding: 3px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.info-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.lbl {
|
|
width: 60px;
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #999;
|
|
}
|
|
.val {
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ====== SEPARATOR ====== */
|
|
.sep {
|
|
height: 3px;
|
|
background: {{ ac }};
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* ====== BILLET INFO ====== */
|
|
.billet-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin: 0 0 2px 0;
|
|
}
|
|
.billet-price {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: {{ ac }};
|
|
margin: 0 0 10px 0;
|
|
}
|
|
.meta-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 6px;
|
|
}
|
|
.meta-table td {
|
|
padding: 2px 6px 2px 0;
|
|
vertical-align: top;
|
|
}
|
|
.meta-lbl {
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #999;
|
|
}
|
|
.meta-val {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ====== BADGES ====== */
|
|
.badge-exit-def {
|
|
display: inline-block;
|
|
padding: 3px 6px;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 1px solid #991b1b;
|
|
}
|
|
.badge-exit-libre {
|
|
display: inline-block;
|
|
padding: 3px 6px;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #166534;
|
|
}
|
|
.badge-invitation {
|
|
display: inline-block;
|
|
padding: 3px 6px;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
.badge-staff {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
background: #111827;
|
|
color: #fff;
|
|
border: 1px solid #111827;
|
|
}
|
|
.badge-exposant {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
background: #7c3aed;
|
|
color: #fff;
|
|
border: 1px solid #7c3aed;
|
|
}
|
|
|
|
/* ====== QR ====== */
|
|
.qr-section {
|
|
margin-top: 14px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.qr-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.qr-table td {
|
|
vertical-align: bottom;
|
|
}
|
|
.qr-img {
|
|
width: 130px;
|
|
height: 130px;
|
|
}
|
|
.ref-lbl {
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #bbb;
|
|
}
|
|
.ref-val {
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
font-family: 'Courier New', monospace;
|
|
color: #666;
|
|
}
|
|
|
|
/* ====== FOOTER ====== */
|
|
.footer {
|
|
background: {{ ac }};
|
|
color: #fff;
|
|
padding: 14px 30px;
|
|
}
|
|
.footer-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.footer-table td {
|
|
vertical-align: middle;
|
|
}
|
|
.footer-logo img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.footer-org {
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.footer-details {
|
|
font-size: 8px;
|
|
opacity: 0.7;
|
|
margin-top: 2px;
|
|
}
|
|
.footer-powered {
|
|
font-size: 6px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
opacity: 0.4;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<div class="header">
|
|
<table class="header-table">
|
|
<tr>
|
|
<td>
|
|
{% set header_label = is_staff ? 'STAFF' : (is_exposant ? 'EXPOSANT' : (is_inv ? 'Invitation' : 'Billet Entree')) %}
|
|
<span class="header-org">{{ header_label }} — {{ event.title }} — {{ ticket.billetName }}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- CONTENT -->
|
|
<table class="content-table">
|
|
<tr>
|
|
<td class="content-left">
|
|
<div class="event-title">{{ event.title }}</div>
|
|
|
|
<table class="info-table">
|
|
<tr><td class="lbl">Date</td><td class="val">{{ event.startAt|date('d/m/Y') }}</td></tr>
|
|
<tr><td class="lbl">Horaires</td><td class="val">{{ event.startAt|date('H:i') }} — {{ event.endAt|date('H:i') }}</td></tr>
|
|
<tr><td class="lbl">Lieu</td><td class="val">{{ event.address }}</td></tr>
|
|
<tr><td class="lbl">Ville</td><td class="val">{{ event.zipcode }} {{ event.city }}</td></tr>
|
|
</table>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<div class="billet-name">{{ ticket.billetName }}</div>
|
|
<div class="billet-price">{{ ticket.unitPriceHTDecimal|number_format(2, ',', ' ') }} € HT</div>
|
|
|
|
<table class="meta-table">
|
|
<tr>
|
|
<td><div class="meta-lbl">Categorie</div><div class="meta-val">{{ ticket.billet.category.name }}</div></td>
|
|
<td><div class="meta-lbl">Date d'achat</div><div class="meta-val">{{ order.paidAt ? order.paidAt|date('d/m/Y H:i') : order.createdAt|date('d/m/Y H:i') }}</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="meta-lbl">Acheteur</div><div class="meta-val">{{ order.firstName }} {{ order.lastName }}</div></td>
|
|
<td><div class="meta-lbl">E-mail</div><div class="meta-val">{{ order.email }}</div></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div style="margin-top: 8px;">
|
|
{% if ticket.billet.definedExit %}
|
|
<span class="badge-exit-def">Sortie definitive</span>
|
|
{% else %}
|
|
<span class="badge-exit-libre">Sortie - Entree illimitee</span>
|
|
{% endif %}
|
|
{% if ticket.invitation %}
|
|
<span class="badge-invitation" style="background: {{ inv_color }};">{{ inv_title }}</span>
|
|
{% endif %}
|
|
{% if is_staff %}
|
|
<span class="badge-staff">STAFF</span>
|
|
{% endif %}
|
|
{% if is_exposant %}
|
|
<span class="badge-exposant">EXPOSANT</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="qr-section">
|
|
<table class="qr-table">
|
|
<tr>
|
|
<td style="width: 140px;">
|
|
<img src="{{ qrBase64 }}" alt="QR" class="qr-img">
|
|
<div style="font-size: 6px; font-weight: bold; text-align: center; color: #999; margin-top: 4px; text-transform: uppercase;">Presentez ce QR code<br>pour valider votre ticket</div>
|
|
</td>
|
|
<td style="text-align: right;">
|
|
<div class="ref-lbl">Reference billet</div>
|
|
<div class="ref-val">{{ ticket.reference }}</div>
|
|
<br>
|
|
<div class="ref-lbl">Commande</div>
|
|
<div class="ref-val">{{ order.orderNumber }}</div>
|
|
<br>
|
|
<div class="ref-lbl">Cle de securite</div>
|
|
<div class="ref-val" style="letter-spacing: 2px;">{{ ticket.securityKey }}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
<td class="content-right">
|
|
{% if posterBase64 %}
|
|
<img src="{{ posterBase64 }}" alt="{{ event.title }}">
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- BLOC ORGA + DESCRIPTION -->
|
|
<table style="width: 100%; border-collapse: collapse; border-top: 3px solid {{ ac }};">
|
|
<tr>
|
|
<td style="width: 50%; padding: 14px 15px 14px 30px; vertical-align: top; border-right: 1px solid #eee;">
|
|
<div style="font-size: 8px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 6px;">Organisateur</div>
|
|
{% if logoBase64 %}
|
|
<img src="{{ logoBase64 }}" alt="Logo" style="width: 30px; height: 30px; vertical-align: middle; margin-right: 6px;">
|
|
{% endif %}
|
|
<span style="font-size: 12px; font-weight: bold;">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</span>
|
|
{% if organizer.siret %}
|
|
<div style="font-size: 8px; color: #666; margin-top: 4px;">SIRET: {{ organizer.siret }}</div>
|
|
{% endif %}
|
|
{% if organizer.address %}
|
|
<div style="font-size: 8px; color: #666;">{{ organizer.address }}{% if organizer.postalCode %}, {{ organizer.postalCode }}{% endif %}{% if organizer.city %} {{ organizer.city }}{% endif %}</div>
|
|
{% endif %}
|
|
{% if organizer.email %}
|
|
<div style="font-size: 8px; color: #666;">{{ organizer.email }}</div>
|
|
{% endif %}
|
|
{% if organizer.phone %}
|
|
<div style="font-size: 8px; color: #666;">{{ organizer.phone }}</div>
|
|
{% endif %}
|
|
{% if organizer.website %}
|
|
<div style="font-size: 8px; color: #666;">{{ organizer.website }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td style="width: 50%; padding: 14px 30px 14px 15px; vertical-align: top;">
|
|
<div style="font-size: 8px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 6px;">A propos de l'evenement</div>
|
|
{% if event.description %}
|
|
<div style="font-size: 9px; color: #444; line-height: 1.4; max-height: 60px; overflow: hidden;">{{ event.description|striptags }}</div>
|
|
{% endif %}
|
|
<table style="margin-top: 8px; border-collapse: collapse;">
|
|
<tr>
|
|
<td style="vertical-align: middle; padding-right: 8px;">
|
|
<img src="{{ eventQrBase64 }}" alt="QR" style="width: 50px; height: 50px;">
|
|
</td>
|
|
<td style="vertical-align: middle;">
|
|
<div style="font-size: 7px; font-weight: bold; text-transform: uppercase; color: #999;">Page evenement</div>
|
|
<div style="font-size: 8px; color: {{ ac }}; word-break: break-all;">{{ eventUrl }}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- INFORMATIONS PRATIQUES + CONDITIONS -->
|
|
<div style="padding: 12px 30px; border-top: 1px solid #eee; background: #fafafa;">
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<tr>
|
|
<td style="width: 50%; vertical-align: top; padding-right: 15px;">
|
|
<div style="font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 4px;">Informations pratiques</div>
|
|
<div style="font-size: 9px; color: #555; line-height: 1.5;">
|
|
• Il est recommande d'arriver en avance.<br>
|
|
• En arrivant, preparez votre billet pour accelerer les controles a l'entree.<br>
|
|
• A l'approche des controles de securite, merci de preparer vos affaires pour faciliter la verification.
|
|
</div>
|
|
</td>
|
|
<td style="width: 50%; vertical-align: top; padding-left: 15px;">
|
|
<div style="font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 4px;">Conditions generales</div>
|
|
<div style="font-size: 9px; color: #555; line-height: 1.5;">
|
|
• Billet non remboursable conformement a l'article L. 121-21-8 12° du Code de la consommation (exception au droit de retractation pour les prestations de loisirs a date determinee).<br>
|
|
• La revente de billets est strictement interdite.<br>
|
|
• En cas d'infraction, le billet pourra etre annule sans remboursement.<br>
|
|
• En cas de force majeure (annulation de l'evenement, attentat, catastrophe naturelle, etc.), une demande de remboursement pourra etre adressee aupres de l'organisateur.<br>
|
|
• E-Ticket est une plateforme de billetterie et n'organise pas les evenements. Tout litige relatif a l'evenement, aux billets ou aux remboursements doit etre traite directement avec l'organisateur.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{% if order.paymentMethod %}
|
|
<table style="width: 100%; border-collapse: collapse; margin-top: 8px; border-top: 1px solid #eee; padding-top: 6px;">
|
|
<tr>
|
|
<td style="padding-top: 6px;">
|
|
<div style="font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 4px;">Details du paiement</div>
|
|
<div style="font-size: 9px; color: #555;">
|
|
Methode : {{ order.paymentMethod }}
|
|
{% if order.cardBrand and order.cardLast4 %}
|
|
— {{ order.cardBrand|upper }} **** {{ order.cardLast4 }}
|
|
{% endif %}
|
|
{% if order.paidAt %}
|
|
• Date : {{ order.paidAt|date('d/m/Y H:i') }}
|
|
{% endif %}
|
|
• Montant : {{ order.totalHTDecimal|number_format(2, ',', ' ') }} € HT
|
|
• Commande : {{ order.orderNumber }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<div class="footer">
|
|
<table class="footer-table">
|
|
<tr>
|
|
{% if logoBase64 %}
|
|
<td class="footer-logo" style="width: 54px; padding-right: 12px;">
|
|
<img src="{{ logoBase64 }}" alt="Logo">
|
|
</td>
|
|
{% endif %}
|
|
<td>
|
|
<div class="footer-org">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</div>
|
|
{% if organizer.siret %}
|
|
<div class="footer-details">SIRET: {{ organizer.siret }}</div>
|
|
{% endif %}
|
|
{% if organizer.address %}
|
|
<div class="footer-details">{{ organizer.address }}{% if organizer.postalCode %}, {{ organizer.postalCode }}{% endif %}{% if organizer.city %} {{ organizer.city }}{% endif %}</div>
|
|
{% endif %}
|
|
{% if organizer.email or organizer.phone %}
|
|
<div class="footer-details">{% if organizer.email %}{{ organizer.email }}{% endif %}{% if organizer.email and organizer.phone %} — {% endif %}{% if organizer.phone %}{{ organizer.phone }}{% endif %}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td class="footer-powered">E-Ticket<br>by E-Cosplay</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|