bisco/azionelab
1
0
Fork 0
generated from bisco/codex-bootstrap
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign public reservation flow pages

Browse Source
This commit is contained in:
bisco
2026-05-05 16:38:53 +02:00
parent 0c465b53cd
commit 5e843d0810
3 changed files with 152 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/app/pages/booking-placeholder-page.component.ts
View File

@@ -28,26 +28,14 @@ type ApiValidationErrors = Record<string, string[]>;
], ],
template: ` template: `
<section class="page"> <section class="page">
<header class="page-header"> <div class="booking-shell">
<p class="eyebrow">Prenotazione</p> <header class="page-header">
<h1>Richiedi i tuoi posti con calma</h1> <p class="eyebrow">Prenotazione</p>
<p class="supporting"> <h1>Prenota il tuo posto</h1>
Replica {{ performanceId }}. Compila il modulo con i dati essenziali: ti invieremo un'email per confermare la richiesta prima che i posti vengano assegnati in modo definitivo. <p class="supporting">
</p> Compila il modulo con i dati essenziali. Ti invieremo un'email per confermare la richiesta e completare la prenotazione con serenita'.
</header> </p>
</header>
<div class="booking-grid">
<mat-card class="summary-card">
<mat-card-content>
<p class="summary-label">Come funziona</p>
<h2>Ti chiediamo pochi dati e ti accompagniamo fino alla conferma.</h2>
<ul class="summary-list">
<li>Riceverai un link di conferma all'indirizzo email che inserisci.</li>
<li>La disponibilita' viene controllata prima della conferma finale.</li>
<li>Dopo la conferma avrai il tuo QR code per l'ingresso.</li>
</ul>
</mat-card-content>
</mat-card>
<mat-card class="content-card"> <mat-card class="content-card">
<mat-card-content> <mat-card-content>
@@ -57,8 +45,8 @@ type ApiValidationErrors = Record<string, string[]>;
<mat-icon fontSet="material-symbols-outlined">mark_email_read</mat-icon> <mat-icon fontSet="material-symbols-outlined">mark_email_read</mat-icon>
</div> </div>
<div> <div>
<h2>La tua richiesta e' partita</h2> <h2>Controlla la tua email</h2>
<p>Controlla la tua email: con un ultimo passaggio potrai confermare la prenotazione e ricevere il QR code per l'ingresso.</p> <p>Ti abbiamo appena inviato il link per confermare la prenotazione. Apri il messaggio, completa l'ultimo passaggio e tieni pronto il QR code che riceverai dopo la conferma.</p>
<div class="status-steps"> <div class="status-steps">
<span><mat-icon fontSet="material-symbols-outlined">mail</mat-icon> Apri l'email che ti abbiamo inviato</span> <span><mat-icon fontSet="material-symbols-outlined">mail</mat-icon> Apri l'email che ti abbiamo inviato</span>
<span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Conferma i posti con un tocco</span> <span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Conferma i posti con un tocco</span>
@@ -136,7 +124,7 @@ type ApiValidationErrors = Record<string, string[]>;
} @else { } @else {
<ng-container> <ng-container>
<mat-icon fontSet="material-symbols-outlined">confirmation_number</mat-icon> <mat-icon fontSet="material-symbols-outlined">confirmation_number</mat-icon>
<span>Prenota</span> <span>Conferma prenotazione</span>
</ng-container> </ng-container>
} }
</button> </button>
@@ -150,61 +138,36 @@ type ApiValidationErrors = Record<string, string[]>;
</section> </section>
`, `,
styles: [` styles: [`
.booking-shell {
width: min(100%, 480px);
margin: 0 auto;
}
.page-header { .page-header {
margin-bottom: 26px; margin: 0 0 28px;
text-align: center;
}
h1 {
margin: 0;
font-size: 3rem;
} }
.supporting { .supporting {
max-width: 56ch; margin: 16px auto 0;
margin: 14px 0 0; max-width: 42ch;
} }
.booking-grid {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.summary-card,
.content-card { .content-card {
border-radius: var(--azionelab-radius-lg); border-radius: var(--azionelab-radius-lg);
border: 1px solid var(--azionelab-border); border: 1px solid var(--azionelab-border);
background: var(--azionelab-surface-strong); background: var(--azionelab-surface);
box-shadow: var(--azionelab-shadow); box-shadow: var(--azionelab-shadow);
overflow: hidden; overflow: hidden;
} }
.summary-card {
background:
linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
}
mat-card-content { mat-card-content {
padding: 28px !important; padding: 32px !important;
}
.summary-label {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--azionelab-accent);
}
.summary-card h2 {
margin: 0;
max-width: 14ch;
}
.summary-list {
display: grid;
gap: 12px;
margin: 18px 0 0;
padding-left: 18px;
color: var(--azionelab-ink-soft);
line-height: 1.6;
} }
.intro-note { .intro-note {
@@ -271,14 +234,15 @@ type ApiValidationErrors = Record<string, string[]>;
.actions { .actions {
display: flex; display: flex;
align-items: center; align-items: stretch;
justify-content: center;
gap: 12px; gap: 12px;
margin-top: 18px; margin-top: 22px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.actions button[mat-flat-button] { .actions button[mat-flat-button] {
min-width: 130px; min-width: 220px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -287,9 +251,11 @@ type ApiValidationErrors = Record<string, string[]>;
.status-panel { .status-panel {
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
gap: 16px; align-items: center;
padding: 4px 0; text-align: center;
gap: 18px;
padding: 6px 0;
} }
.status-panel h2 { .status-panel h2 {
@@ -303,7 +269,7 @@ type ApiValidationErrors = Record<string, string[]>;
} }
.status-panel.success { .status-panel.success {
padding: 22px; padding: 26px 22px;
border-radius: 18px; border-radius: 18px;
background: var(--azionelab-success-bg); background: var(--azionelab-success-bg);
border: 1px solid var(--azionelab-success-border); border: 1px solid var(--azionelab-success-border);
@@ -324,6 +290,7 @@ type ApiValidationErrors = Record<string, string[]>;
.status-steps { .status-steps {
display: flex; display: flex;
justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
margin-top: 14px; margin-top: 14px;
@@ -347,8 +314,8 @@ type ApiValidationErrors = Record<string, string[]>;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.booking-grid { h1 {
grid-template-columns: 1fr; font-size: 2.3rem;
} }
mat-card-content { mat-card-content {

67
frontend/src/app/pages/reservation-confirm-page.component.ts
View File

@@ -22,10 +22,11 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
], ],
template: ` template: `
<section class="page"> <section class="page">
<div class="confirmation-shell">
<header class="page-header"> <header class="page-header">
<p class="eyebrow">Conferma prenotazione</p> <p class="eyebrow">Conferma prenotazione</p>
<h1>Ci siamo quasi</h1> <h1>Prenotazione confermata</h1>
<p class="supporting">Stai completando l'ultimo passaggio: appena la conferma va a buon fine, il tuo QR code sara' pronto per accompagnarti all'ingresso.</p> <p class="supporting">Quando la conferma va a buon fine, il tuo QR code e' pronto per accompagnarti all'ingresso in sala.</p>
</header> </header>
<mat-card class="status-card"> <mat-card class="status-card">
@@ -71,12 +72,12 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
<div class="next-steps"> <div class="next-steps">
<div> <div>
<p class="step-label">Cosa fare adesso</p> <p class="step-label">Portalo con te</p>
<p>Conserva il QR code sul telefono oppure stampalo. All'ingresso bastera' mostrarlo allo staff.</p> <p>Conserva il QR code sul telefono oppure stampalo. All'ingresso bastera' mostrarlo allo staff.</p>
</div> </div>
<div> <div>
<p class="step-label">Ti serve di nuovo il link?</p> <p class="step-label">Tieni l'email a portata di mano</p>
<p>Tieni l'email di conferma: potrai riaprire questa pagina in qualsiasi momento se vorrai recuperare il QR.</p> <p>Se ne avrai bisogno, potrai riaprire questa pagina in qualsiasi momento dal messaggio di conferma.</p>
</div> </div>
</div> </div>
} }
@@ -119,20 +120,31 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
<a mat-button routerLink="/">Inizio</a> <a mat-button routerLink="/shows">Torna agli spettacoli</a>
<a mat-button routerLink="/shows">Spettacoli</a>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
</div>
</section> </section>
`, `,
styles: [` styles: [`
.confirmation-shell {
width: min(100%, 700px);
margin: 0 auto;
}
.page-header { .page-header {
margin-bottom: 24px; margin-bottom: 28px;
text-align: center;
}
h1 {
margin: 0;
font-size: 3rem;
} }
.supporting { .supporting {
max-width: 58ch; max-width: 40ch;
margin: 14px 0 0; margin: 16px auto 0;
} }
.status-card { .status-card {
@@ -148,15 +160,17 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
} }
mat-card-actions { mat-card-actions {
padding: 0 28px 24px !important; padding: 0 28px 28px !important;
gap: 8px; justify-content: center;
} }
.status-panel { .status-panel {
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
gap: 16px; align-items: center;
padding: 20px; text-align: center;
gap: 18px;
padding: 24px;
border-radius: 18px; border-radius: 18px;
border: 1px solid transparent; border: 1px solid transparent;
} }
@@ -227,6 +241,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.success-points { .success-points {
display: flex; display: flex;
justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
margin-top: 14px; margin-top: 14px;
@@ -250,12 +265,14 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
} }
.qr-panel { .qr-panel {
margin-top: 18px; display: grid;
padding: 16px; justify-items: center;
margin: 22px auto 0;
padding: 22px;
border-radius: var(--azionelab-radius-md); border-radius: var(--azionelab-radius-md);
border: 1px solid var(--azionelab-border); border: 1px solid var(--azionelab-border);
display: inline-block; background: #ffffff;
background: white; width: min(100%, 360px);
} }
.panel-label { .panel-label {
@@ -277,10 +294,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
margin-top: 16px; margin-top: 18px;
padding: 14px 16px; padding: 14px 16px;
border-radius: var(--azionelab-radius-md); border-radius: var(--azionelab-radius-md);
background: rgba(159, 47, 40, 0.05); background: var(--azionelab-bg-strong);
color: var(--azionelab-muted); color: var(--azionelab-muted);
} }
@@ -296,8 +313,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.next-steps { .next-steps {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px; gap: 16px;
margin-top: 18px; margin-top: 22px;
} }
.next-steps > div { .next-steps > div {
@@ -323,6 +340,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
} }
@media (max-width: 640px) { @media (max-width: 640px) {
h1 {
font-size: 2.3rem;
}
mat-card-content { mat-card-content {
padding: 22px !important; padding: 22px !important;
} }

129
frontend/src/app/pages/show-detail-placeholder-page.component.ts
View File

@@ -44,28 +44,27 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
} @else if (show()) { } @else if (show()) {
<header class="page-header"> <section class="show-hero">
<div class="hero-copy"> @if (show()!.image_url || show()!.poster_image; as heroImage) {
<p class="eyebrow">Scheda spettacolo</p>
<h1>{{ show()!.title }}</h1>
<p class="supporting">{{ show()!.description || show()!.summary }}</p>
<div class="hero-note">
<span>Programmazione pubblica</span>
<span>Scegli una data per continuare</span>
</div>
</div>
@if (show()!.image_url) {
<div class="hero-image-wrap"> <div class="hero-image-wrap">
<img class="hero-image" [src]="show()!.image_url" [alt]="show()!.title" /> <img class="hero-image" [src]="heroImage" [alt]="show()!.title" />
</div> </div>
} }
</header>
<header class="page-header">
<div class="hero-copy">
<p class="eyebrow">Scheda spettacolo</p>
<h1>{{ show()!.title }}</h1>
<p class="hero-description">{{ show()!.description || show()!.summary }}</p>
</div>
</header>
</section>
<section class="section"> <section class="section">
<div class="section-heading"> <div class="section-heading">
<div> <div>
<h2>Prossime repliche</h2> <h2>Prossime repliche</h2>
<p>Scegli una data per proseguire verso la prenotazione.</p> <p>Scegli la replica che preferisci e prosegui verso la prenotazione.</p>
</div> </div>
<a mat-button routerLink="/shows">Torna all'elenco</a> <a mat-button routerLink="/shows">Torna all'elenco</a>
</div> </div>
@@ -86,27 +85,29 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
<div class="performance-grid"> <div class="performance-grid">
@for (performance of performances(); track performance.id) { @for (performance of performances(); track performance.id) {
<mat-card class="performance-card"> <mat-card class="performance-card">
<mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</mat-card-title> <div class="performance-kicker">Replica disponibile</div>
<mat-card-subtitle>{{ performance.venue.name }}, {{ performance.venue.city }}</mat-card-subtitle> <mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM' }}</mat-card-title>
<mat-card-content> <mat-card-content>
<dl class="performance-meta"> <dl class="performance-meta">
<div> <div>
<dt>Spazio</dt> <dt>Luogo</dt>
<dd>{{ performance.venue.name }}</dd> <dd>{{ performance.venue.name }}</dd>
</div> </div>
<div> <div>
<dt>Citta'</dt> <dt>Data / orario</dt>
<dd>{{ performance.venue.city }}</dd> <dd>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd>
</div> </div>
@if (performance.available_seats !== null && performance.available_seats !== undefined) {
<div> <div>
<dt>Posti disponibili</dt> <dt>Posti disponibili</dt>
<dd>{{ performance.available_seats }}</dd> <dd>{{ performance.available_seats }}</dd>
</div> </div>
}
</dl> </dl>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
@if (performance.booking_enabled) { @if (performance.booking_enabled) {
<a mat-flat-button [routerLink]="['/performances', performance.id, 'book']">Prenota questa data</a> <a mat-flat-button [routerLink]="['/performances', performance.id, 'book']">Prenota il tuo posto</a>
} @else { } @else {
<button mat-stroked-button type="button" disabled>Prenotazione non disponibile</button> <button mat-stroked-button type="button" disabled>Prenotazione non disponibile</button>
} }
@@ -120,51 +121,43 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
</section> </section>
`, `,
styles: [` styles: [`
.page-header { .show-hero {
display: grid; display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
gap: 28px; gap: 28px;
margin-bottom: 48px;
}
.page-header {
align-items: start; align-items: start;
margin-bottom: 32px;
} }
.hero-copy { .hero-copy {
min-width: 0; min-width: 0;
padding: 8px 0; max-width: 860px;
} }
.supporting { h1 {
margin: 14px 0 0; margin: 0;
max-width: 12ch;
font-size: 4rem;
line-height: 0.98;
} }
.hero-note { .hero-description {
display: flex; margin: 18px 0 0;
gap: 10px; max-width: 62ch;
flex-wrap: wrap; color: var(--azionelab-muted);
margin-top: 18px; font-size: 1.08rem;
} line-height: 1.82;
.hero-note span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 14px;
border-radius: 999px;
background: rgba(143, 51, 45, 0.08);
color: var(--azionelab-accent-strong);
font-size: 0.85rem;
font-weight: 700;
} }
.hero-image-wrap { .hero-image-wrap {
overflow: hidden; overflow: hidden;
border-radius: var(--azionelab-radius-lg); border-radius: var(--azionelab-radius-lg);
border: 1px solid var(--azionelab-border); border: 1px solid var(--azionelab-border);
background: background: var(--azionelab-bg-strong);
linear-gradient(135deg, rgba(207, 71, 51, 0.16), rgba(15, 22, 36, 0.08)),
#f8f1ea;
box-shadow: var(--azionelab-shadow-strong); box-shadow: var(--azionelab-shadow-strong);
aspect-ratio: 4 / 4.8; aspect-ratio: 16 / 8;
} }
.hero-image { .hero-image {
@@ -176,7 +169,7 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
.section { .section {
display: grid; display: grid;
gap: 20px; gap: 24px;
} }
.section-heading { .section-heading {
@@ -193,39 +186,48 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
.performance-grid { .performance-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px; gap: 24px;
} }
.performance-card, .performance-card,
.status-card { .status-card {
border-radius: var(--azionelab-radius-md); border-radius: var(--azionelab-radius-md);
border: 1px solid var(--azionelab-border); border: 1px solid var(--azionelab-border);
background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94)); background: var(--azionelab-surface);
box-shadow: var(--azionelab-shadow); box-shadow: var(--azionelab-shadow);
} }
.performance-card { .performance-card {
min-height: 280px; min-height: 320px;
} }
.performance-card mat-card-title, .performance-card mat-card-title,
.performance-card mat-card-subtitle,
.performance-card mat-card-content, .performance-card mat-card-content,
.performance-card mat-card-actions { .performance-card mat-card-actions {
padding-left: 18px; padding-left: 22px;
padding-right: 18px; padding-right: 22px;
}
.performance-kicker {
padding: 22px 22px 0;
color: var(--azionelab-accent);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
} }
.performance-card mat-card-title { .performance-card mat-card-title {
margin-top: 14px; margin-top: 10px;
font-family: var(--azionelab-serif); font-family: var(--azionelab-serif);
font-size: 1.28rem; font-size: 1.6rem;
line-height: 1.15; font-weight: 600;
line-height: 1.06;
} }
.performance-meta { .performance-meta {
display: grid; display: grid;
gap: 14px; gap: 16px;
margin: 0; margin: 0;
} }
@@ -243,7 +245,8 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
.performance-meta dd { .performance-meta dd {
margin: 0; margin: 0;
font-size: 0.98rem; font-size: 1rem;
line-height: 1.55;
} }
.status-panel, .status-panel,
@@ -276,14 +279,18 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
} }
@media (max-width: 860px) { @media (max-width: 860px) {
.page-header { h1 {
grid-template-columns: 1fr; font-size: 2.6rem;
} }
.section-heading { .section-heading {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.hero-image-wrap {
aspect-ratio: 4 / 5;
}
} }
`], `],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,