Login Popup zu Kundendaten bewegt

src/modules/KundendatenModule.svelte

@@ -10,13 +10,13 @@
 	import LoginDialog from "#components/LoginDialog.svelte";
 	import {
 		API_ACCESS_TOKEN_COOKIE_NAME,
-		AusweisTyp,
 		PRICES,
 	} from "#lib/constants.js";
 	import Cookies from "js-cookie";
 	import {
 		AufnahmeClient,
 		BenutzerClient,
+		BildClient,
 		getAusweisartFromUUID,
 		ObjektClient,
 		RechnungClient,
@@ -25,14 +25,20 @@
 	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
 	import { api } from "astro-typesafe-api/client";
 	import PaymentOption from "#components/PaymentOption.svelte";
+	import Overlay from "#components/Overlay.svelte";
+	import EmbeddedAuthFlowModule from "./EmbeddedAuthFlowModule.svelte";
+	import { ausweisSpeichern } from "#client/lib/ausweisSpeichern.js";
+	import { addNotification } from "#components/Notifications/shared.js";
+	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
 
-	export let user: BenutzerClient;
+	export let user: Partial<BenutzerClient>;
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let aufnahme: AufnahmeClient;
 	export let objekt: ObjektClient;
+	export let bilder: BildClient[];
 	export let ausweisart: Enums.Ausweisart;
 	export let aktiveBezahlmethode: Bezahlmethoden = Enums.Bezahlmethoden.paypal;
-	export let ausweis_typ: AusweisTyp = AusweisTyp.Standard;
+	export let ausweistyp: Enums.AusweisTyp = Enums.AusweisTyp.Standard;
 
 	let rechnung: Partial<RechnungClient> = {
 		email: user.email,
@@ -81,7 +87,7 @@
 
 	let prices = PRICES[ausweisart];
 
-	let basePrice: number = prices[0];
+	let basePrice: number = prices[ausweistyp];
 
 	$: price =
 		basePrice +
@@ -135,9 +141,35 @@
 	}
 
 	async function bestellen() {
-		const ausweisart = getAusweisartFromUUID(
-			ausweis.uid
-		) as Enums.Ausweisart;
+		if (!form.checkValidity()) {
+			addNotification({
+				dismissable: true,
+				message: "Fehlende Daten.",
+				subtext: "Nicht alle notwendigen Felder sind ausgefüllt, bitte füllen sie diese aus bevor sie es erneut versuchen.."
+			})
+
+			form.reportValidity();
+			return;
+		}
+
+		if (!await validateAccessTokenClient()) {
+		loginAction = bestellen
+		rechnung = rechnung
+		loginOverlayHidden = false;
+			return
+		}
+
+		loginOverlayHidden = true
+
+		const result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, ausweisart)
+
+		if (result === null) {
+			addNotification({
+				dismissable: true,
+				message: "Ups... Das hat nicht geklappt.",
+				subtext: "Der Ausweis konnte nicht gespeichert werden, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
+			})
+		}
 
 		try {
 			const { uid, checkout_url } = await api.rechnung.PUT.fetch(
@@ -158,7 +190,7 @@
 					versand_ort: rechnung.versand_ort,
 					telefon: rechnung.telefon,
 					ausweis_uid: ausweis.uid,
-					ausweis_typ,
+					ausweistyp,
 				},
 				{
 					headers: {
@@ -209,6 +241,10 @@
 		ausweisart === Enums.Ausweisart.GEGNachweisWohnen ||
 		ausweisart === Enums.Ausweisart.GEGNachweisBedarfsausweis ||
 		ausweisart === Enums.Ausweisart.GEGNachweisGewerbe;
+
+	let loginOverlayHidden = true;
+	let loginAction = () => {};
+	let form: HTMLFormElement;
 </script>
 
 <div
@@ -239,7 +275,7 @@
 		<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
 		<h2 class="text-primary text-xl">
 			{ausweisart}
-			{prices[0]} €
+			{prices[ausweistyp]} €
 		</h2>
 		{#if gegAnfrage}
 			<Progressbar
@@ -252,7 +288,7 @@
 	</div>
 </div>
 
-<div id="formInput-2">
+<form id="formInput-2" bind:this={form}>
 	<div id="formular-box" class="formular-boxen ring-0">
 		<Bereich
 			bereich="1"
@@ -262,7 +298,7 @@
 		>
 
 		<Bereich bereich="2" title="Rechnungsadresse">
-			<Rechnungsadresse bind:user bind:rechnung /></Bereich
+			<Rechnungsadresse bind:rechnung /></Bereich
 		>
 
 		{#if !gegAnfrage}
@@ -376,11 +412,12 @@ grid-cols-5 justify-around justify-items-center items-center"
 
 			<div></div>
 
-			<button class="button">Speichern</button>
+			<button class="button" type="button">Speichern</button>
 
 			{#if gegAnfrage}
 				<button
 					class="button cursor-pointer"
+					type="button"
 					data-cy="bestellen"
 					on:click={anfordern}>Angebot anfordern</button
 				>
@@ -388,12 +425,22 @@ grid-cols-5 justify-around justify-items-center items-center"
 				<button
 					class="button cursor-pointer"
 					data-cy="bestellen"
+					type="button"
 					on:click={bestellen}>Kostenpflichtig bestellen</button
 				>
 			{/if}
 		</div>
 	</div>
-</div>
+
+	<Overlay bind:hidden={loginOverlayHidden}>
+		<div class="bg-white w-full max-w-screen-sm py-8">
+			<EmbeddedAuthFlowModule onLogin={loginAction} email={rechnung.email}></EmbeddedAuthFlowModule>
+		</div>
+	</Overlay>
+	
+</form>
+
+<NotificationWrapper></NotificationWrapper>
 
 <!--
 		<div class="bereich-box pr-12 mt-6">