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: `
<section class="page">
<header class="page-header">
<p class="eyebrow">Prenotazione</p>
<h1>Richiedi i tuoi posti con calma</h1>
<p class="supporting">
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>
</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>
<div class="booking-shell">
<header class="page-header">
<p class="eyebrow">Prenotazione</p>
<h1>Prenota il tuo posto</h1>
<p class="supporting">
Compila il modulo con i dati essenziali. Ti invieremo un'email per confermare la richiesta e completare la prenotazione con serenita'.
</p>
</header>
<mat-card class="content-card">
<mat-card-content>
@@ -57,8 +45,8 @@ type ApiValidationErrors = Record<string, string[]>;
<mat-icon fontSet="material-symbols-outlined">mark_email_read</mat-icon>
</div>
<div>
<h2>La tua richiesta e' partita</h2>
<p>Controlla la tua email: con un ultimo passaggio potrai confermare la prenotazione e ricevere il QR code per l'ingresso.</p>
<h2>Controlla la tua email</h2>
<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">
<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>
@@ -136,7 +124,7 @@ type ApiValidationErrors = Record<string, string[]>;
} @else {
<ng-container>
<mat-icon fontSet="material-symbols-outlined">confirmation_number</mat-icon>
<span>Prenota</span>
<span>Conferma prenotazione</span>
</ng-container>
}
</button>
@@ -150,61 +138,36 @@ type ApiValidationErrors = Record<string, string[]>;
</section>
`,
styles: [`
.booking-shell {
width: min(100%, 480px);
margin: 0 auto;
}
.page-header {
margin-bottom: 26px;
margin: 0 0 28px;
text-align: center;
}
h1 {
margin: 0;
font-size: 3rem;
}
.supporting {
max-width: 56ch;
margin: 14px 0 0;
margin: 16px auto 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 {
border-radius: var(--azionelab-radius-lg);
border: 1px solid var(--azionelab-border);
background: var(--azionelab-surface-strong);
background: var(--azionelab-surface);
box-shadow: var(--azionelab-shadow);
overflow: hidden;
}
.summary-card {
background:
linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
}
mat-card-content {
padding: 28px !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;
padding: 32px !important;
}
.intro-note {
@@ -271,14 +234,15 @@ type ApiValidationErrors = Record<string, string[]>;
.actions {
display: flex;
align-items: center;
align-items: stretch;
justify-content: center;
gap: 12px;
margin-top: 18px;
margin-top: 22px;
flex-wrap: wrap;
}
.actions button[mat-flat-button] {
min-width: 130px;
min-width: 220px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -287,9 +251,11 @@ type ApiValidationErrors = Record<string, string[]>;
.status-panel {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 4px 0;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 6px 0;
}
.status-panel h2 {
@@ -303,7 +269,7 @@ type ApiValidationErrors = Record<string, string[]>;
}
.status-panel.success {
padding: 22px;
padding: 26px 22px;
border-radius: 18px;
background: var(--azionelab-success-bg);
border: 1px solid var(--azionelab-success-border);
@@ -324,6 +290,7 @@ type ApiValidationErrors = Record<string, string[]>;
.status-steps {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
@@ -347,8 +314,8 @@ type ApiValidationErrors = Record<string, string[]>;
}
@media (max-width: 640px) {
.booking-grid {
grid-template-columns: 1fr;
h1 {
font-size: 2.3rem;
}
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: `
<section class="page">
<div class="confirmation-shell">
<header class="page-header">
<p class="eyebrow">Conferma prenotazione</p>
<h1>Ci siamo quasi</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>
<h1>Prenotazione confermata</h1>
<p class="supporting">Quando la conferma va a buon fine, il tuo QR code e' pronto per accompagnarti all'ingresso in sala.</p>
</header>
<mat-card class="status-card">
@@ -71,12 +72,12 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
<div class="next-steps">
<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>
</div>
<div>
<p class="step-label">Ti serve di nuovo il link?</p>
<p>Tieni l'email di conferma: potrai riaprire questa pagina in qualsiasi momento se vorrai recuperare il QR.</p>
<p class="step-label">Tieni l'email a portata di mano</p>
<p>Se ne avrai bisogno, potrai riaprire questa pagina in qualsiasi momento dal messaggio di conferma.</p>
</div>
</div>
}
@@ -119,20 +120,31 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
</mat-card-content>
<mat-card-actions>
<a mat-button routerLink="/">Inizio</a>
<a mat-button routerLink="/shows">Spettacoli</a>
<a mat-button routerLink="/shows">Torna agli spettacoli</a>
</mat-card-actions>
</mat-card>
</div>
</section>
`,
styles: [`
.confirmation-shell {
width: min(100%, 700px);
margin: 0 auto;
}
.page-header {
margin-bottom: 24px;
margin-bottom: 28px;
text-align: center;
}
h1 {
margin: 0;
font-size: 3rem;
}
.supporting {
max-width: 58ch;
margin: 14px 0 0;
max-width: 40ch;
margin: 16px auto 0;
}
.status-card {
@@ -148,15 +160,17 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
}
mat-card-actions {
padding: 0 28px 24px !important;
gap: 8px;
padding: 0 28px 28px !important;
justify-content: center;
}
.status-panel {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 24px;
border-radius: 18px;
border: 1px solid transparent;
}
@@ -227,6 +241,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.success-points {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
@@ -250,12 +265,14 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
}
.qr-panel {
margin-top: 18px;
padding: 16px;
display: grid;
justify-items: center;
margin: 22px auto 0;
padding: 22px;
border-radius: var(--azionelab-radius-md);
border: 1px solid var(--azionelab-border);
display: inline-block;
background: white;
background: #ffffff;
width: min(100%, 360px);
}
.panel-label {
@@ -277,10 +294,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 16px;
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--azionelab-radius-md);
background: rgba(159, 47, 40, 0.05);
background: var(--azionelab-bg-strong);
color: var(--azionelab-muted);
}
@@ -296,8 +313,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.next-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
gap: 16px;
margin-top: 22px;
}
.next-steps > div {
@@ -323,6 +340,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
}
@media (max-width: 640px) {
h1 {
font-size: 2.3rem;
}
mat-card-content {
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>
} @else if (show()) {
<header class="page-header">
<div class="hero-copy">
<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) {
<section class="show-hero">
@if (show()!.image_url || show()!.poster_image; as heroImage) {
<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>
}
</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">
<div class="section-heading">
<div>
<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>
<a mat-button routerLink="/shows">Torna all'elenco</a>
</div>
@@ -86,27 +85,29 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
<div class="performance-grid">
@for (performance of performances(); track performance.id) {
<mat-card class="performance-card">
<mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</mat-card-title>
<mat-card-subtitle>{{ performance.venue.name }}, {{ performance.venue.city }}</mat-card-subtitle>
<div class="performance-kicker">Replica disponibile</div>
<mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM' }}</mat-card-title>
<mat-card-content>
<dl class="performance-meta">
<div>
<dt>Spazio</dt>
<dt>Luogo</dt>
<dd>{{ performance.venue.name }}</dd>
</div>
<div>
<dt>Citta'</dt>
<dd>{{ performance.venue.city }}</dd>
<dt>Data / orario</dt>
<dd>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd>
</div>
@if (performance.available_seats !== null && performance.available_seats !== undefined) {
<div>
<dt>Posti disponibili</dt>
<dd>{{ performance.available_seats }}</dd>
</div>
}
</dl>
</mat-card-content>
<mat-card-actions>
@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 {
<button mat-stroked-button type="button" disabled>Prenotazione non disponibile</button>
}
@@ -120,51 +121,43 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
</section>
`,
styles: [`
.page-header {
.show-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
gap: 28px;
margin-bottom: 48px;
}
.page-header {
align-items: start;
margin-bottom: 32px;
}
.hero-copy {
min-width: 0;
padding: 8px 0;
max-width: 860px;
}
.supporting {
margin: 14px 0 0;
h1 {
margin: 0;
max-width: 12ch;
font-size: 4rem;
line-height: 0.98;
}
.hero-note {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.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-description {
margin: 18px 0 0;
max-width: 62ch;
color: var(--azionelab-muted);
font-size: 1.08rem;
line-height: 1.82;
}
.hero-image-wrap {
overflow: hidden;
border-radius: var(--azionelab-radius-lg);
border: 1px solid var(--azionelab-border);
background:
linear-gradient(135deg, rgba(207, 71, 51, 0.16), rgba(15, 22, 36, 0.08)),
#f8f1ea;
background: var(--azionelab-bg-strong);
box-shadow: var(--azionelab-shadow-strong);
aspect-ratio: 4 / 4.8;
aspect-ratio: 16 / 8;
}
.hero-image {
@@ -176,7 +169,7 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
.section {
display: grid;
gap: 20px;
gap: 24px;
}
.section-heading {
@@ -193,39 +186,48 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
.performance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
gap: 24px;
}
.performance-card,
.status-card {
border-radius: var(--azionelab-radius-md);
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);
}
.performance-card {
min-height: 280px;
min-height: 320px;
}
.performance-card mat-card-title,
.performance-card mat-card-subtitle,
.performance-card mat-card-content,
.performance-card mat-card-actions {
padding-left: 18px;
padding-right: 18px;
padding-left: 22px;
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 {
margin-top: 14px;
margin-top: 10px;
font-family: var(--azionelab-serif);
font-size: 1.28rem;
line-height: 1.15;
font-size: 1.6rem;
font-weight: 600;
line-height: 1.06;
}
.performance-meta {
display: grid;
gap: 14px;
gap: 16px;
margin: 0;
}
@@ -243,7 +245,8 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
.performance-meta dd {
margin: 0;
font-size: 0.98rem;
font-size: 1rem;
line-height: 1.55;
}
.status-panel,
@@ -276,14 +279,18 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
}
@media (max-width: 860px) {
.page-header {
grid-template-columns: 1fr;
h1 {
font-size: 2.6rem;
}
.section-heading {
align-items: flex-start;
flex-direction: column;
}
.hero-image-wrap {
aspect-ratio: 4 / 5;
}
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,