generated from bisco/codex-bootstrap
feat(frontend): add reservation confirmation page
This commit is contained in:
bisco
210
frontend/src/app/pages/reservation-confirm-page.component.ts
Normal file
210
frontend/src/app/pages/reservation-confirm-page.component.ts
Normal file
@@ -0,0 +1,210 @@
|
||||
import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
|
||||
import { ReservationConfirmResponse, ShowsApiService } from '../services/shows-api.service';
|
||||
|
||||
type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [
|
||||
RouterLink,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
],
|
||||
template: `
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<p class="eyebrow">Reservation confirmation</p>
|
||||
<h1>Email confirmation</h1>
|
||||
</header>
|
||||
|
||||
<mat-card class="status-card">
|
||||
<mat-card-content>
|
||||
@if (state() === 'loading') {
|
||||
<div class="status-copy" aria-live="polite">
|
||||
<mat-progress-spinner mode="indeterminate" diameter="36"></mat-progress-spinner>
|
||||
<div>
|
||||
<h2>Confirming reservation...</h2>
|
||||
<p>Please wait while we validate your link.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (state() === 'success' && confirmation()) {
|
||||
<div class="status-copy success" aria-live="polite">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
<div>
|
||||
<h2>Reservation confirmed</h2>
|
||||
<p>Your seats are confirmed. Present this QR code at check-in.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (confirmation()!.qr_code_image) {
|
||||
<div class="qr-panel">
|
||||
<img [src]="confirmation()!.qr_code_image" alt="Reservation QR code" />
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (confirmation()!.qr_code_url) {
|
||||
<p class="meta">Check-in URL: <a [href]="confirmation()!.qr_code_url">{{ confirmation()!.qr_code_url }}</a></p>
|
||||
}
|
||||
}
|
||||
|
||||
@if (state() === 'invalid') {
|
||||
<div class="status-copy" aria-live="assertive">
|
||||
<mat-icon>error</mat-icon>
|
||||
<div>
|
||||
<h2>Invalid confirmation link</h2>
|
||||
<p>This token is not valid. Please use the latest email confirmation link.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (state() === 'expired') {
|
||||
<div class="status-copy" aria-live="assertive">
|
||||
<mat-icon>schedule</mat-icon>
|
||||
<div>
|
||||
<h2>Confirmation link expired</h2>
|
||||
<p>This link has expired. Please create a new reservation.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (state() === 'error') {
|
||||
<div class="status-copy" aria-live="assertive">
|
||||
<mat-icon>warning</mat-icon>
|
||||
<div>
|
||||
<h2>Could not confirm reservation</h2>
|
||||
<p>Please try again in a moment.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions>
|
||||
<a mat-button routerLink="/">Home</a>
|
||||
<a mat-button routerLink="/shows">Shows</a>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.status-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.status-copy {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.status-copy h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.status-copy p {
|
||||
margin: 0;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.status-copy.success mat-icon {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.qr-panel {
|
||||
margin-top: 18px;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
display: inline-block;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.qr-panel img {
|
||||
width: min(280px, 100%);
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 14px 0 0;
|
||||
word-break: break-word;
|
||||
color: var(--azionelab-muted);
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ReservationConfirmPageComponent {
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly showsApi = inject(ShowsApiService);
|
||||
|
||||
protected readonly state = signal<ConfirmationState>('loading');
|
||||
protected readonly confirmation = signal<ReservationConfirmResponse | null>(null);
|
||||
|
||||
constructor() {
|
||||
const token = this.route.snapshot.queryParamMap.get('token')?.trim() ?? '';
|
||||
|
||||
if (!token) {
|
||||
this.state.set('invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
this.showsApi.confirmReservation(token)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
this.confirmation.set(response);
|
||||
this.state.set('success');
|
||||
},
|
||||
error: (error: HttpErrorResponse) => {
|
||||
if (error.status === 404 || error.status === 400) {
|
||||
this.state.set('invalid');
|
||||
return;
|
||||
}
|
||||
if (error.status === 410) {
|
||||
this.state.set('expired');
|
||||
return;
|
||||
}
|
||||
this.state.set('error');
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user