From 5e843d0810dfd78901f4dba1d20b672061f86a69 Mon Sep 17 00:00:00 2001 From: bisco Date: Tue, 5 May 2026 16:38:53 +0200 Subject: [PATCH] feat: redesign public reservation flow pages --- .../booking-placeholder-page.component.ts | 113 ++++++--------- .../reservation-confirm-page.component.ts | 67 +++++---- .../show-detail-placeholder-page.component.ts | 129 +++++++++--------- 3 files changed, 152 insertions(+), 157 deletions(-) diff --git a/frontend/src/app/pages/booking-placeholder-page.component.ts b/frontend/src/app/pages/booking-placeholder-page.component.ts index 26d9bdf..e1decb3 100644 --- a/frontend/src/app/pages/booking-placeholder-page.component.ts +++ b/frontend/src/app/pages/booking-placeholder-page.component.ts @@ -28,26 +28,14 @@ type ApiValidationErrors = Record; ], template: `
-
-

Prenotazione

-

Richiedi i tuoi posti con calma

-

- 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. -

-
- -
- - -

Come funziona

-

Ti chiediamo pochi dati e ti accompagniamo fino alla conferma.

-
    -
  • Riceverai un link di conferma all'indirizzo email che inserisci.
    • -
  • La disponibilita' viene controllata prima della conferma finale.
    • -
  • Dopo la conferma avrai il tuo QR code per l'ingresso.
    • -
- - +
+
+

Prenotazione

+

Prenota il tuo posto

+

+ Compila il modulo con i dati essenziali. Ti invieremo un'email per confermare la richiesta e completare la prenotazione con serenita'. +

+
@@ -57,8 +45,8 @@ type ApiValidationErrors = Record; mark_email_read
-

La tua richiesta e' partita

-

Controlla la tua email: con un ultimo passaggio potrai confermare la prenotazione e ricevere il QR code per l'ingresso.

+

Controlla la tua email

+

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.

mail Apri l'email che ti abbiamo inviato verified Conferma i posti con un tocco @@ -136,7 +124,7 @@ type ApiValidationErrors = Record; } @else { confirmation_number - Prenota + Conferma prenotazione } @@ -150,61 +138,36 @@ type ApiValidationErrors = Record;
`, 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; .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; .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; } .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; .status-steps { display: flex; + justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; @@ -347,8 +314,8 @@ type ApiValidationErrors = Record; } @media (max-width: 640px) { - .booking-grid { - grid-template-columns: 1fr; + h1 { + font-size: 2.3rem; } mat-card-content { diff --git a/frontend/src/app/pages/reservation-confirm-page.component.ts b/frontend/src/app/pages/reservation-confirm-page.component.ts index 9efe929..bf0be69 100644 --- a/frontend/src/app/pages/reservation-confirm-page.component.ts +++ b/frontend/src/app/pages/reservation-confirm-page.component.ts @@ -22,10 +22,11 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error' ], template: `
+

Conferma prenotazione

-

Ci siamo quasi

-

Stai completando l'ultimo passaggio: appena la conferma va a buon fine, il tuo QR code sara' pronto per accompagnarti all'ingresso.

+

Prenotazione confermata

+

Quando la conferma va a buon fine, il tuo QR code e' pronto per accompagnarti all'ingresso in sala.

@@ -71,12 +72,12 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
-

Cosa fare adesso

+

Portalo con te

Conserva il QR code sul telefono oppure stampalo. All'ingresso bastera' mostrarlo allo staff.

-

Ti serve di nuovo il link?

-

Tieni l'email di conferma: potrai riaprire questa pagina in qualsiasi momento se vorrai recuperare il QR.

+

Tieni l'email a portata di mano

+

Se ne avrai bisogno, potrai riaprire questa pagina in qualsiasi momento dal messaggio di conferma.

} @@ -119,20 +120,31 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error' - Inizio - Spettacoli + Torna agli spettacoli +
`, 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; } diff --git a/frontend/src/app/pages/show-detail-placeholder-page.component.ts b/frontend/src/app/pages/show-detail-placeholder-page.component.ts index 4ba5c16..03d19b5 100644 --- a/frontend/src/app/pages/show-detail-placeholder-page.component.ts +++ b/frontend/src/app/pages/show-detail-placeholder-page.component.ts @@ -44,28 +44,27 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows- } @else if (show()) { -
-
-

Scheda spettacolo

-

{{ show()!.title }}

-

{{ show()!.description || show()!.summary }}

-
- Programmazione pubblica - Scegli una data per continuare -
-
- @if (show()!.image_url) { +
+ @if (show()!.image_url || show()!.poster_image; as heroImage) {
- +
} -
+ +
+
+

Scheda spettacolo

+

{{ show()!.title }}

+

{{ show()!.description || show()!.summary }}

+
+
+

Prossime repliche

-

Scegli una data per proseguire verso la prenotazione.

+

Scegli la replica che preferisci e prosegui verso la prenotazione.

Torna all'elenco
@@ -86,27 +85,29 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
@for (performance of performances(); track performance.id) { - {{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }} - {{ performance.venue.name }}, {{ performance.venue.city }} +
Replica disponibile
+ {{ performance.starts_at | date: 'EEEE d MMMM' }}
-
Spazio
+
Luogo
{{ performance.venue.name }}
-
Citta'
-
{{ performance.venue.city }}
+
Data / orario
+
{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}
+ @if (performance.available_seats !== null && performance.available_seats !== undefined) {
Posti disponibili
{{ performance.available_seats }}
+ }
@if (performance.booking_enabled) { - Prenota questa data + Prenota il tuo posto } @else { } @@ -120,51 +121,43 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
`, 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,