DrawComponent added

frontend/angular.json

@@ -96,7 +96,10 @@
 						"ssl": true,
 						"sslCert": ".certs/cert.pem",
 						"sslKey": ".certs/key.pem",
-						"proxyConfig": "proxy.conf.json"
+						"proxyConfig": "proxy.conf.json",
+						"prebundle": {
+							"exclude": ["@postnord/web-components/loader"]
+						}
 					},
 					"configurations": {
 						"production": {

frontend/src/app/app.component.html

@@ -4,6 +4,6 @@
 	</main>
 
 	<footer class="flex items-center justify-center p-4">
-		<p class="text-sm">Copyright &copy; {{ currentYear }}</p>
+		<p class="text-sm text-pn-blue-700">Copyright &copy; {{ currentYear }}</p>
 	</footer>
 </div>

frontend/src/app/app.component.ts

@@ -1,21 +1,13 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { ConfettiService } from './confetti/confetti.service';
 
 @Component({
 	selector: 'app-root',
 	imports: [RouterOutlet],
-	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	templateUrl: './app.component.html',
 	styleUrl: './app.component.css'
 })
 export class App {
-	private readonly confettiService = inject(ConfettiService);
-
-	protected readonly title = signal('PostNordLotteriet');
+	// protected readonly title = 'PostNordLotteriet';
 	protected readonly currentYear = new Date().getFullYear();
-
-	protected celebrate(): void {
-		this.confettiService.celebrate();
-	}
 }

frontend/src/app/app.routes.ts

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+import { DrawComponent } from './draw/draw.component';
+
+export const routes: Routes = [
+	{
+		path: '',
+		component: DrawComponent
+	}
+];

frontend/src/app/draw/draw.component.html

@@ -0,0 +1,23 @@
+<div class="relative flex w-[calc(100vw-2rem)] justify-center">
+	<div class="absolute inset-x-0 bottom-full mb-8 flex flex-col gap-4 text-center">
+		<h1 class="text-[2rem] leading-none font-bold text-pn-gray-900">Sveriges största lotteri</h1>
+		<p class="text-lg leading-none text-pn-gray-700">Kanske är det du som får post idag</p>
+	</div>
+
+	<pn-button [loading]="loading()" [disabled]="loading()" (click)="check()">Kolla</pn-button>
+
+	@if (result(); as result) {
+		<div class="absolute inset-x-0 top-full mt-8 flex justify-center">
+			<pn-toast
+				class="max-w-full"
+				[appearance]="result.appearance"
+				[text]="result.message"
+				closable
+				temporary
+				language="sv"
+				(hidden)="dismissResult()"
+			>
+			</pn-toast>
+		</div>
+	}
+</div>

frontend/src/app/draw/draw.component.ts

@@ -0,0 +1,80 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { dematerialize, finalize, forkJoin, map, materialize, take, timer } from 'rxjs';
+
+import { ConfettiService } from '../confetti/confetti.service';
+import { ShipmentService } from '../shipment/shipment.service';
+
+type DrawResult =
+	| { appearance: 'success'; message: string }
+	| { appearance: 'warning'; message: string }
+	| { appearance: 'error'; message: string };
+
+@Component({
+	selector: 'app-draw',
+	imports: [],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	templateUrl: './draw.component.html',
+	styleUrl: './draw.component.css'
+})
+export class DrawComponent {
+	private readonly confettiService = inject(ConfettiService);
+	private readonly shipmentService = inject(ShipmentService);
+
+	private readonly minimumLoadingTimeMs = 2000;
+
+	protected readonly loading = signal(false);
+	protected readonly result = signal<DrawResult | null>(null);
+
+	protected check(): void {
+		if (this.loading()) {
+			return;
+		}
+
+		this.loading.set(true);
+		this.result.set(null);
+
+		forkJoin([this.shipmentService.trackAndTrace().pipe(materialize(), take(1)), timer(this.minimumLoadingTimeMs)])
+			.pipe(
+				map(([notification]) => notification),
+				dematerialize(),
+				finalize(() => this.loading.set(false))
+			)
+			.subscribe({
+				next: (response) => {
+					this.result.set({
+						appearance: 'success',
+						message: response.message
+					});
+
+					this.confettiService.celebrate();
+				},
+				error: (error: HttpErrorResponse) => {
+					this.handleError(error);
+				}
+			});
+	}
+
+	protected dismissResult(): void {
+		this.result.set(null);
+	}
+
+	private handleError(error: HttpErrorResponse): void {
+		switch (error.status) {
+			case 400:
+			case 429:
+			case 503:
+				this.result.set({
+					appearance: 'warning',
+					message: error.error?.message ?? 'Försöket kunde inte genomföras.'
+				});
+				break;
+
+			default:
+				this.result.set({
+					appearance: 'error',
+					message: 'Något gick fel. Försök igen senare.'
+				});
+		}
+	}
+}

frontend/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="sv">
 	<head>
 		<meta charset="utf-8" />
 		<title>PostNordLotteriet</title>
@@ -7,7 +7,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
-	<body>
+	<body class="bg-linear-to-b/srgb from-white from-0% via-[#f2fcff] via-40% to-pn-blue-25 to-100%">
 		<app-root></app-root>
 	</body>
 </html>