generated from bisco/codex-bootstrap
feat: apply azionelab branding to frontend
This commit is contained in:
@@ -29,22 +29,22 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
template: `
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<p class="eyebrow">Booking</p>
|
||||
<h1>Reserve seats</h1>
|
||||
<p class="eyebrow">Prenotazione</p>
|
||||
<h1>Richiedi i tuoi posti</h1>
|
||||
<p class="supporting">
|
||||
Performance {{ performanceId }}. Complete the form and we will email a confirmation link before any reservation becomes active.
|
||||
Replica {{ performanceId }}. Compila il modulo: ti invieremo un link email di conferma prima che la prenotazione diventi attiva.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="booking-grid">
|
||||
<mat-card class="summary-card">
|
||||
<mat-card-content>
|
||||
<p class="summary-label">Before you submit</p>
|
||||
<h2>Reservations are activated only after email confirmation.</h2>
|
||||
<p class="summary-label">Prima di inviare</p>
|
||||
<h2>La prenotazione si attiva solo dopo la conferma via email.</h2>
|
||||
<ul class="summary-list">
|
||||
<li>Your confirmation link arrives at the email address you provide.</li>
|
||||
<li>Seat availability is checked on the server before confirmation.</li>
|
||||
<li>The QR code is generated only after the reservation becomes confirmed.</li>
|
||||
<li>Il link di conferma arriva all'indirizzo email che inserisci.</li>
|
||||
<li>La disponibilita' viene verificata sul server prima della conferma.</li>
|
||||
<li>Il QR code viene generato solo dopo la conferma della prenotazione.</li>
|
||||
</ul>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -57,11 +57,11 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
<mat-icon fontSet="material-symbols-outlined">mark_email_read</mat-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Reservation created</h2>
|
||||
<p>Check your email to confirm the booking and unlock the QR code for admission.</p>
|
||||
<h2>Richiesta inviata</h2>
|
||||
<p>Controlla la tua email per confermare la prenotazione e ottenere il QR code per l'ingresso.</p>
|
||||
<div class="status-steps">
|
||||
<span><mat-icon fontSet="material-symbols-outlined">mail</mat-icon> Open the confirmation email</span>
|
||||
<span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Confirm your reservation</span>
|
||||
<span><mat-icon fontSet="material-symbols-outlined">mail</mat-icon> Apri l'email di conferma</span>
|
||||
<span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Conferma la tua prenotazione</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,16 +69,16 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
<form [formGroup]="bookingForm" (ngSubmit)="submit()" novalidate>
|
||||
<div class="intro-note">
|
||||
<mat-icon fontSet="material-symbols-outlined">info</mat-icon>
|
||||
<p>We only ask for the essentials. Your seats are held only after email confirmation.</p>
|
||||
<p>Ti chiediamo solo l'essenziale. I posti vengono confermati solo dopo la verifica via email.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-icon matPrefix fontSet="material-symbols-outlined">person</mat-icon>
|
||||
<mat-label>Name</mat-label>
|
||||
<mat-label>Nome</mat-label>
|
||||
<input matInput type="text" formControlName="name" autocomplete="name" />
|
||||
@if (bookingForm.controls.name.touched && bookingForm.controls.name.hasError('required')) {
|
||||
<mat-error>Name is required.</mat-error>
|
||||
<mat-error>Il nome e' obbligatorio.</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@@ -86,25 +86,25 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
<mat-icon matPrefix fontSet="material-symbols-outlined">mail</mat-icon>
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="email" formControlName="email" autocomplete="email" />
|
||||
<mat-hint>We will send the confirmation link here.</mat-hint>
|
||||
<mat-hint>Invieremo qui il link di conferma.</mat-hint>
|
||||
@if (bookingForm.controls.email.touched && bookingForm.controls.email.hasError('required')) {
|
||||
<mat-error>Email is required.</mat-error>
|
||||
<mat-error>L'email e' obbligatoria.</mat-error>
|
||||
}
|
||||
@if (bookingForm.controls.email.touched && bookingForm.controls.email.hasError('email')) {
|
||||
<mat-error>Enter a valid email address.</mat-error>
|
||||
<mat-error>Inserisci un indirizzo email valido.</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-icon matPrefix fontSet="material-symbols-outlined">group</mat-icon>
|
||||
<mat-label>Number of seats</mat-label>
|
||||
<mat-label>Numero di posti</mat-label>
|
||||
<input matInput type="number" min="1" step="1" formControlName="partySize" />
|
||||
<mat-hint>Enter the total number of guests in your party.</mat-hint>
|
||||
<mat-hint>Indica il numero totale di persone della prenotazione.</mat-hint>
|
||||
@if (bookingForm.controls.partySize.touched && bookingForm.controls.partySize.hasError('required')) {
|
||||
<mat-error>Number of seats is required.</mat-error>
|
||||
<mat-error>Il numero di posti e' obbligatorio.</mat-error>
|
||||
}
|
||||
@if (bookingForm.controls.partySize.touched && bookingForm.controls.partySize.hasError('min')) {
|
||||
<mat-error>At least 1 seat is required.</mat-error>
|
||||
<mat-error>Devi richiedere almeno 1 posto.</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -120,7 +120,7 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
<div class="message-panel error field-errors" aria-live="assertive">
|
||||
<mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
|
||||
<div>
|
||||
<p class="message-title">Please check the highlighted details:</p>
|
||||
<p class="message-title">Controlla i dati evidenziati:</p>
|
||||
@for (message of fieldErrors(); track message) {
|
||||
<p>{{ message }}</p>
|
||||
}
|
||||
@@ -132,15 +132,15 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
<button mat-flat-button type="submit" [disabled]="isSubmitting()">
|
||||
@if (isSubmitting()) {
|
||||
<mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
|
||||
<span>Submitting...</span>
|
||||
<span>Invio in corso...</span>
|
||||
} @else {
|
||||
<ng-container>
|
||||
<mat-icon fontSet="material-symbols-outlined">confirmation_number</mat-icon>
|
||||
<span>Reserve</span>
|
||||
<span>Prenota</span>
|
||||
</ng-container>
|
||||
}
|
||||
</button>
|
||||
<a mat-button routerLink="/shows">Back to shows</a>
|
||||
<a mat-button routerLink="/shows">Torna agli spettacoli</a>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
@@ -413,15 +413,30 @@ export class BookingPlaceholderPageComponent {
|
||||
this.fieldErrors.set(this.flattenValidationErrors(error.error as ApiValidationErrors));
|
||||
return;
|
||||
}
|
||||
this.submitError.set('Could not create reservation. Please try again.');
|
||||
this.submitError.set('Non siamo riusciti a creare la prenotazione. Riprova.');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private flattenValidationErrors(errors: ApiValidationErrors): string[] {
|
||||
return Object.entries(errors).flatMap(([field, messages]) => {
|
||||
const label = field === 'party_size' ? 'number of seats' : field;
|
||||
return messages.map((message) => `${label}: ${message}`);
|
||||
const labelMap: Record<string, string> = {
|
||||
name: 'nome',
|
||||
email: 'email',
|
||||
party_size: 'numero di posti',
|
||||
};
|
||||
const label = labelMap[field] ?? field;
|
||||
return messages.map((message) => `${label}: ${this.translateValidationMessage(message)}`);
|
||||
});
|
||||
}
|
||||
|
||||
private translateValidationMessage(message: string): string {
|
||||
const translations: Record<string, string> = {
|
||||
'This field is required.': 'questo campo e\' obbligatorio.',
|
||||
'Enter a valid email address.': 'inserisci un indirizzo email valido.',
|
||||
'Ensure this value is greater than or equal to 1.': 'inserisci un valore maggiore o uguale a 1.',
|
||||
};
|
||||
|
||||
return translations[message] ?? message;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user