From e867a74478faea5f8287c5d26506452938c96149 Mon Sep 17 00:00:00 2001
From: Moritz Utcke <letsmoe1404@gmail.com>
Date: Wed, 5 Mar 2025 22:25:00 -0300
Subject: [PATCH] Kundendaten werden lokal gespeichert

---
 src/client/lib/helpers.ts                     |  19 +-
 src/components/Ausweis/Ansprechpartner.svelte |  61 ---
 .../Ausweis/Rechnungsadresse.svelte           | 297 ------------
 src/modules/KundendatenModule.svelte          | 435 ++++++++++++++++--
 src/pages/kundendaten.astro                   |   2 +-
 5 files changed, 413 insertions(+), 401 deletions(-)
 delete mode 100644 src/components/Ausweis/Ansprechpartner.svelte
 delete mode 100644 src/components/Ausweis/Rechnungsadresse.svelte

diff --git a/src/client/lib/helpers.ts b/src/client/lib/helpers.ts
index aef33eaf..e20fc762 100644
--- a/src/client/lib/helpers.ts
+++ b/src/client/lib/helpers.ts
@@ -1,7 +1,22 @@
 import { writable, Writable } from "svelte/store";
 import { ZodEffects, ZodNullable, ZodOptional, ZodType } from "zod";
 
-export function localStorageSync<T>(initial: T, name: string, modifier: (stored: any) => T = (stored) => JSON.parse(stored), reverseModifier: (value: T) => string = (value) => JSON.stringify(value)): Writable<T> {
+/**
+ * Synchronisiert den ersten Writable in den zweiten.
+ */
+export function writableSync<T>(source: Writable<T>) {
+	let $val;
+	source.subscribe($ => $val = $)();
+	const target = writable<T>($val)
+
+	source.subscribe((value) => {
+		target.set(value);
+	})
+
+	return target;
+}
+
+export function localStorageSync<T>(initial: T, name: string, modifier: (stored: any) => T = (stored) => stored, reverseModifier: (value: T) => string = (value) => value as string): Writable<T> {
 	const stored = localStorage.getItem(name) as T
 	let value = initial;
 	if (stored) {
@@ -29,7 +44,7 @@ export function isZodInstanceOf<T extends ZodType<any>>(
   if (schema instanceof ZodOptional || schema instanceof ZodNullable) {
     return isZodInstanceOf(schema._def.innerType, targetType);
   }else if (schema instanceof ZodEffects) {
-		return getZodBaseType(schema._def.schema)
+		return isZodInstanceOf(getZodBaseType(schema._def.schema), targetType)
 	}
 
   return false;
diff --git a/src/components/Ausweis/Ansprechpartner.svelte b/src/components/Ausweis/Ansprechpartner.svelte
deleted file mode 100644
index 90eeca02..00000000
--- a/src/components/Ausweis/Ansprechpartner.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import HelpLabel from "#components/labels/HelpLabel.svelte";
-	import Inputlabel from "#components/labels/InputLabel.svelte";
-	import { BenutzerClient } from "./types.js";
-
-	export let user: BenutzerClient;
-</script>
-
-<div
-	id="ansprechpartner"
-	class="bereich-box grid
-grid-cols-1 gap-x-4 gap-y-8
-sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
-xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
-"
->
-
-	<!-- Vorname * -->
-
-	<div class="input-standard order-1 md:order-1 xl:order-1">
-		<Inputlabel title="Vorname *"></Inputlabel>
-
-		<input name="vorname" type="text" bind:value={user.vorname} required />
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte Geben Sie hier den Vornamen des Ansprechpartners&nbsp;ein.
-			</HelpLabel>
-		</div>
-	</div>
-
-	<!-- Nachname * -->
-
-	<div class="input-standard order-2 md:order-2 xl:order-2">
-		<Inputlabel title="Nachname *"></Inputlabel>
-
-		<input name="name" type="text" bind:value={user.name} required />
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte Geben Sie hier den Nachnamen des
-				Ansprechpartners&nbsp;ein.
-			</HelpLabel>
-		</div>
-	</div>
-
-	<!-- Telefon & Email * -->
-
-	<div class="input-standard order-3 md:order-3 xl:order-3">
-		<Inputlabel title="Telefonnummer *"></Inputlabel>
-
-		<input name="telefon" bind:value={user.telefon} type="text" />
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte Geben Sie hier die Telefonnummer des
-				Ansprechpartners&nbsp;ein.
-			</HelpLabel>
-		</div>
-	</div>
-</div>
diff --git a/src/components/Ausweis/Rechnungsadresse.svelte b/src/components/Ausweis/Rechnungsadresse.svelte
deleted file mode 100644
index 1d689dd0..00000000
--- a/src/components/Ausweis/Rechnungsadresse.svelte
+++ /dev/null
@@ -1,297 +0,0 @@
-<script lang="ts">
-	import HelpLabel from "#components/labels/HelpLabel.svelte";
-	import Inputlabel from "#components/labels/InputLabel.svelte";
-	import ZipSearch from "#components/PlzSuche.svelte";
-	import { BenutzerClient, RechnungClient } from "./types.js";
-
-	export let rechnung: Partial<RechnungClient>;
-
-	$: {
-		if (!rechnung.abweichende_versand_adresse) {
-			rechnung.versand_empfaenger = rechnung.empfaenger
-			rechnung.versand_ort = rechnung.ort
-			rechnung.versand_plz = rechnung.plz
-			rechnung.versand_strasse = rechnung.strasse
-			rechnung.versand_zusatzzeile = rechnung.zusatzzeile
-		}
-	}
-</script>
-
-<div
-	id="rechnungsadresse"
-	class="bereich-box grid 
-grid-cols-1 gap-x-4 gap-y-8
-sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
-xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
-">
-	<!-- Empfänger * -->
-
-	<div class="input-standard order-1 md:order-1 xl:order-1">
-		<Inputlabel title="Rechnungs-Empfänger *"></Inputlabel>
-
-		<input
-			name="rechnung_empfaenger"
-			type="text"
-			bind:value={rechnung.empfaenger}
-			required
-			data-rule-maxlength="100"
-			data-msg-maxlength="max. 100 Zeichen"
-		/>
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte geben Sie den Empfänger ein, auf den die Rechnung
-				ausgestellt wird.
-			</HelpLabel>
-		</div>
-	</div>
-
-	<!-- Straße, Hausnummer * -->
-
-	<div class="input-standard order-2 md:order-2 xl:order-2">
-		<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
-
-		<input
-			name="rechnung_strasse"
-			bind:value={rechnung.strasse}
-			type="text"
-			required
-			data-rule-maxlength="40"
-			data-msg-maxlength="max. 40 Zeichen"
-		/>
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der
-				Rechnung erscheinen soll, ein.
-			</HelpLabel>
-		</div>
-	</div>
-
-	<!-- PLZ / ORT -->
-
-	<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
-		<div class="input-noHelp">
-			<Inputlabel title="PLZ *"></Inputlabel>
-			<ZipSearch
-				name="rechnung_plz"
-				bind:zip={rechnung.plz}
-				bind:city={rechnung.ort}
-			/>
-		</div>
-
-		<div class="input-standard">
-			<Inputlabel title="Ort *"></Inputlabel>
-
-			<input
-				name="rechnung_ort"
-				type="text"
-				required
-				bind:value={rechnung.ort}
-			/>
-
-			<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie die PLZ des Ortes, so wie Sie auf der
-					Rechnung erscheinen soll, ein.
-				</HelpLabel>
-			</div>
-		</div>
-	</div>
-
-	<!-- Zusatzzeile -->
-
-	<div class="input-standard order-4 md:order-4 xl:order-4">
-		<Inputlabel title="Zusatzzeile"></Inputlabel>
-
-		<input
-			name="rechnung_zusatzzeile"
-			bind:value={rechnung.zusatzzeile}
-			type="text"
-			data-rule-maxlength="80"
-			data-msg-maxlength="max. 80 Zeichen"
-		/>
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte geben Sie, falls erforderlich, zusätzliche nformationen
-				ein.
-			</HelpLabel>
-		</div>
-	</div>
-
-	<!-- E-mail -->
-
-	<div class="input-standard order-5 md:order-5 xl:order-5">
-		<Inputlabel title="E-mail *"></Inputlabel>
-
-		<input name="rechnung_email" bind:value={rechnung.email} type="email" />
-
-		<div class="help-label">
-			<HelpLabel>
-				Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
-			</HelpLabel>
-		</div>
-	</div>
-
-
-	<div class="sm:col-span-3 order-7 md:order-7 xl:order-7">
-		<div
-			class="grid grid-cols-[25px_max-content] items-center justify-items-start"
-		>
-			<input
-				id="abweichende_versand_adresse"
-				class="w-[15px] h-[15px]"
-				type="checkbox"
-				name="abweichende_versand_adresse"
-				bind:checked={rechnung.abweichende_versand_adresse}
-			/>
-
-			<label for="abweichende_versand_adresse" class="cursor-pointer"
-				>abweichende Versandadresse</label
-			>
-		</div>
-	</div>
-
-	{#if rechnung.abweichende_versand_adresse}
-		<!-- Versand Empfänger * -->
-
-		<div class="input-standard order-8 md:order-8 xl:order-8">
-			<Inputlabel title="Versand-Empfänger *"></Inputlabel>
-
-			<input
-				name="versand_empfaenger"
-				type="text"
-				readonly={!rechnung.abweichende_versand_adresse}
-				bind:value={rechnung.versand_empfaenger}
-				required
-				data-rule-maxlength="100"
-				data-msg-maxlength="max. 100 Zeichen"
-			/>
-
-			<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie den Namen des Versand-Empfängers ein.
-				</HelpLabel>
-			</div>
-		</div>
-
-		<!-- Versand Straße, Hausnummer * -->
-
-		<div class="input-standard order-9 md:order-9 xl:order-9">
-			<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
-
-			<input
-				name="versand_strasse"
-				type="text"
-				readonly={!rechnung.abweichende_versand_adresse}
-				bind:value={rechnung.versand_strasse}
-				required
-				data-rule-maxlength="40"
-				data-msg-maxlength="max. 40 Zeichen"
-			/>
-
-			<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer
-					ein, an die die Rechnung versandt wird.
-				</HelpLabel>
-			</div>
-		</div>
-
-		<!-- PLZ / ORT -->
-
-		<div
-			class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10"
-		>
-			<div class="input-noHelp">
-				<Inputlabel title="PLZ *"></Inputlabel>
-				<ZipSearch
-					name="versand_plz"
-					readonly={!rechnung.abweichende_versand_adresse}
-					bind:zip={rechnung.versand_plz}
-					bind:city={rechnung.versand_ort}
-				/>
-			</div>
-
-			<div class="input-standard">
-				<Inputlabel title="Ort *"></Inputlabel>
-
-				<input
-					name="versand_ort"
-					type="text"
-					readonly
-					required
-					bind:value={rechnung.versand_ort}
-				/>
-
-				<div class="help-label">
-					<HelpLabel>
-						Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein,
-						an den die Rechnung versandt wird.
-					</HelpLabel>
-				</div>
-			</div>
-		</div>
-
-		<!-- Zusatzzeile -->
-
-		<div class="input-standard order-11 md:order-11 xl:order-11">
-			<Inputlabel title="Zusatzzeile"></Inputlabel>
-
-			<input
-				name="versand_zusatzzeile"
-				type="text"
-				readonly={!rechnung.abweichende_versand_adresse}
-				bind:value={rechnung.versand_zusatzzeile}
-				data-rule-maxlength="80"
-				data-msg-maxlength="max. 80 Zeichen"
-			/>
-
-			<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie, falls erforderlich, zusätzliche
-					nformationen ein.
-				</HelpLabel>
-			</div>
-		</div>
-
-		<!-- E-mail -->
-
-		<div class="input-standard order-12 md:order-12 xl:order-12">
-			<Inputlabel title="E-mail *"></Inputlabel>
-
-			<input
-				name="rechnung_email"
-				bind:value={rechnung.email}
-				type="email"
-			/>
-
-			<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie die E-Mail Adresse des Versand-Empfängers
-					ein.
-				</HelpLabel>
-			</div>
-		</div>
-
-		<!-- Telefon 
-
-<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
-	<Inputlabel title="Telefon *"></Inputlabel>
-
-    <input
-    name="rechnung_telefon"
-    bind:value={rechnung.telefon}
-    type="text"
-/>
-
-		<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
-				</HelpLabel>
-			</div>
-</div>
--->
-	{/if}
-</div>
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index e6d0fc65..5ddee285 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -2,8 +2,6 @@
 	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
 	import Progressbar from "#components/Ausweis/Progressbar.svelte";
 	import Bereich from "#components/labels/Bereich.svelte";
-	import Ansprechpartner from "#components/Ausweis/Ansprechpartner.svelte";
-	import Rechnungsadresse from "#components/Ausweis/Rechnungsadresse.svelte";
 	import type { Bezahlmethoden } from "#lib/client/prisma.js";
 	import { Enums } from "#lib/client/prisma.js";
 	import {
@@ -29,6 +27,11 @@
 	import { addNotification } from "#components/Notifications/shared.js";
 	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
 	import { nachweisSpeichern } from "#client/lib/nachweisSpeichern.js";
+	import { localStorageSync, writableSync } from "#client/lib/helpers.js";
+	import HelpLabel from "#components/labels/HelpLabel.svelte";
+	import InputLabel from "#components/labels/InputLabel.svelte";
+	import PlzSuche from "#components/PlzSuche.svelte";
+	import { writable } from "svelte/store";
 	
 	export let user: Partial<BenutzerClient>;
 	export let ausweis: VerbrauchsausweisWohnenClient;
@@ -40,18 +43,41 @@
 	export let aktiveBezahlmethode: Bezahlmethoden = Enums.Bezahlmethoden.paypal;
 	export let ausweistyp: Enums.AusweisTyp = Enums.AusweisTyp.Standard;
 
-	let rechnung: Partial<RechnungClient> = {
-		email: user.email,
-		empfaenger: user.vorname + " " + user.name,
-		strasse: user.adresse,
-		plz: user.plz,
-		ort: user.ort,
-		versand_empfaenger: user.vorname + " " + user.name,
-		versand_strasse: user.adresse,
-		versand_plz: user.plz,
-		versand_ort: user.ort,
-		telefon: user.telefon,
-	};
+	const email = localStorageSync(user.email || "", "kundendaten.email")
+	const vorname = localStorageSync(user.vorname || "", "kundendaten.vorname")
+	const name = localStorageSync(user.name || "", "kundendaten.name")
+	const empfaenger = localStorageSync(`${user.vorname} ${user.name}`, "kundendaten.empfaenger", JSON.parse, JSON.stringify)
+	const strasse = localStorageSync(user.adresse || "", "kundendaten.strasse")
+	const plz = localStorageSync(user.plz || "", "kundendaten.plz")
+	const ort = localStorageSync(user.ort || "", "kundendaten.ort")
+	const zusatzzeile = localStorageSync("", "kundendaten.zusatzzeile")
+	const telefon = localStorageSync(user.telefon || "", "kundendaten.telefon")
+
+	const abweichende_versand_adresse = localStorageSync(false, "kundendaten.abweichende_versand_adresse", JSON.parse, JSON.stringify)
+
+	let versand_email,
+			versand_zusatzzeile,
+			versand_empfaenger,
+			versand_strasse,
+			versand_plz,
+			versand_ort;
+	$: {
+		if ($abweichende_versand_adresse) {
+			versand_email = writable($email)
+			versand_zusatzzeile = writable($zusatzzeile)
+			versand_empfaenger = writable($empfaenger)
+			versand_strasse = writable($strasse)
+			versand_plz = writable($plz)
+			versand_ort = writable($ort)
+		} else {
+			versand_email = writableSync(email)
+			versand_zusatzzeile = writableSync(zusatzzeile)
+			versand_empfaenger = writableSync(empfaenger)
+			versand_strasse = writableSync(strasse)
+			versand_plz = writableSync(plz)
+			versand_ort = writableSync(ort)
+		}
+	}
 
 	let services: {
 		name: string;
@@ -127,7 +153,6 @@
 
 		if (!await validateAccessTokenClient()) {
 		loginAction = bestellen
-		rechnung = rechnung
 		loginOverlayHidden = false;
 			return
 		}
@@ -152,16 +177,16 @@
 		try {
 			const { uid } = await api.rechnung.anfordern.PUT.fetch(
 				{
-					email: rechnung.email,
-					empfaenger: rechnung.empfaenger,
-					strasse: rechnung.strasse,
-					plz: rechnung.plz,
-					ort: rechnung.ort,
-					versand_empfaenger: rechnung.versand_empfaenger,
-					versand_strasse: rechnung.versand_strasse,
-					versand_plz: rechnung.versand_plz,
-					versand_ort: rechnung.versand_ort,
-					telefon: rechnung.telefon,
+					email: $email,
+					empfaenger: $empfaenger,
+					strasse: $strasse,
+					plz: $plz,
+					ort: $ort,
+					versand_empfaenger: $versand_empfaenger,
+					versand_strasse: $versand_strasse,
+					versand_plz: $versand_plz,
+					versand_ort: $versand_ort,
+					telefon: $telefon,
 					nachweis_uid: ausweis.uid,
 				},
 				{
@@ -226,7 +251,6 @@
 
 		if (!await validateAccessTokenClient()) {
 			loginAction = bestellen
-			rechnung = rechnung
 			loginOverlayHidden = false;
 			return
 		}
@@ -264,16 +288,16 @@
 					services: services
 						.filter((service) => service.selected)
 						.map((service) => service.id),
-					email: rechnung.email,
-					empfaenger: rechnung.empfaenger,
-					strasse: rechnung.strasse,
-					plz: rechnung.plz,
-					ort: rechnung.ort,
-					versand_empfaenger: rechnung.versand_empfaenger,
-					versand_strasse: rechnung.versand_strasse,
-					versand_plz: rechnung.versand_plz,
-					versand_ort: rechnung.versand_ort,
-					telefon: rechnung.telefon,
+					email: $email,
+					empfaenger: $empfaenger,
+					strasse: $strasse,
+					plz: $plz,
+					ort: $ort,
+					versand_empfaenger: $versand_empfaenger,
+					versand_strasse: $versand_strasse,
+					versand_plz: $versand_plz,
+					versand_ort: $versand_ort,
+					telefon: $telefon,
 					ausweis_uid: ausweis.uid,
 					ausweistyp,
 				},
@@ -373,13 +397,344 @@
 	<div id="formular-box" class="formular-boxen ring-0">
 		<Bereich
 			bereich="1"
-			title="Eingabe des Ansprechpartners -> {user.email}"
+			title="Eingabe des Ansprechpartners"
 		>
-			<Ansprechpartner bind:user /></Bereich
+		<div
+		id="ansprechpartner"
+		class="bereich-box grid
+	grid-cols-1 gap-x-4 gap-y-8
+	sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+	xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
+	"
+	>
+	
+		<!-- Vorname * -->
+	
+		<div class="input-standard order-1 md:order-1 xl:order-1">
+			<InputLabel title="Vorname *"></InputLabel>
+	
+			<input name="vorname" type="text" bind:value={$vorname} required />
+	
+			<div class="help-label">
+				<HelpLabel>
+					Bitte Geben Sie hier den Vornamen des Ansprechpartners&nbsp;ein.
+				</HelpLabel>
+			</div>
+		</div>
+	
+		<!-- Nachname * -->
+	
+		<div class="input-standard order-2 md:order-2 xl:order-2">
+			<InputLabel title="Nachname *"></InputLabel>
+	
+			<input name="name" type="text" bind:value={$name} required />
+	
+			<div class="help-label">
+				<HelpLabel>
+					Bitte Geben Sie hier den Nachnamen des
+					Ansprechpartners&nbsp;ein.
+				</HelpLabel>
+			</div>
+		</div>
+	
+		<!-- Telefon & Email * -->
+	
+		<div class="input-standard order-3 md:order-3 xl:order-3">
+			<InputLabel title="Telefonnummer *"></InputLabel>
+	
+			<input name="telefon" bind:value={$telefon} type="text" />
+	
+			<div class="help-label">
+				<HelpLabel>
+					Bitte Geben Sie hier die Telefonnummer des
+					Ansprechpartners&nbsp;ein.
+				</HelpLabel>
+			</div>
+		</div>
+	</div>
+	</Bereich
 		>
 
 		<Bereich bereich="2" title="Rechnungsadresse">
-			<Rechnungsadresse bind:rechnung /></Bereich
+			<div
+	id="rechnungsadresse"
+	class="bereich-box grid 
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
+">
+	<!-- Empfänger * -->
+
+	<div class="input-standard order-1 md:order-1 xl:order-1">
+		<InputLabel title="Rechnungs-Empfänger *"></InputLabel>
+
+		<input
+			name="rechnung_empfaenger"
+			type="text"
+			bind:value={$empfaenger}
+			required
+			data-rule-maxlength="100"
+			data-msg-maxlength="max. 100 Zeichen"
+		/>
+
+		<div class="help-label">
+			<HelpLabel>
+				Bitte geben Sie den Empfänger ein, auf den die Rechnung
+				ausgestellt wird.
+			</HelpLabel>
+		</div>
+	</div>
+
+	<!-- Straße, Hausnummer * -->
+
+	<div class="input-standard order-2 md:order-2 xl:order-2">
+		<InputLabel title="Straße, Hausnummer *"></InputLabel>
+
+		<input
+			name="rechnung_strasse"
+			bind:value={$strasse}
+			type="text"
+			required
+			data-rule-maxlength="40"
+			data-msg-maxlength="max. 40 Zeichen"
+		/>
+
+		<div class="help-label">
+			<HelpLabel>
+				Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der
+				Rechnung erscheinen soll, ein.
+			</HelpLabel>
+		</div>
+	</div>
+
+	<!-- PLZ / ORT -->
+
+	<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
+		<div class="input-noHelp">
+			<InputLabel title="PLZ *"></InputLabel>
+			<PlzSuche
+				name="rechnung_plz"
+				bind:zip={$plz}
+				bind:city={$ort}
+			/>
+		</div>
+
+		<div class="input-standard">
+			<InputLabel title="Ort *"></InputLabel>
+
+			<input
+				name="rechnung_ort"
+				type="text"
+				required
+				bind:value={$ort}
+			/>
+
+			<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die PLZ des Ortes, so wie Sie auf der
+					Rechnung erscheinen soll, ein.
+				</HelpLabel>
+			</div>
+		</div>
+	</div>
+
+	<!-- Zusatzzeile -->
+
+	<div class="input-standard order-4 md:order-4 xl:order-4">
+		<InputLabel title="Zusatzzeile"></InputLabel>
+
+		<input
+			name="rechnung_zusatzzeile"
+			bind:value={$zusatzzeile}
+			type="text"
+			data-rule-maxlength="80"
+			data-msg-maxlength="max. 80 Zeichen"
+		/>
+
+		<div class="help-label">
+			<HelpLabel>
+				Bitte geben Sie, falls erforderlich, zusätzliche nformationen
+				ein.
+			</HelpLabel>
+		</div>
+	</div>
+
+	<!-- E-mail -->
+
+	<div class="input-standard order-5 md:order-5 xl:order-5">
+		<InputLabel title="E-mail *"></InputLabel>
+
+		<input name="rechnung_email" bind:value={$email} type="email" />
+
+		<div class="help-label">
+			<HelpLabel>
+				Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
+			</HelpLabel>
+		</div>
+	</div>
+
+
+	<div class="sm:col-span-3 order-7 md:order-7 xl:order-7">
+		<div
+			class="grid grid-cols-[25px_max-content] items-center justify-items-start"
+		>
+			<input
+				id="abweichende_versand_adresse"
+				class="w-[15px] h-[15px]"
+				type="checkbox"
+				name="abweichende_versand_adresse"
+				bind:checked={$abweichende_versand_adresse}
+			/>
+
+			<label for="abweichende_versand_adresse" class="cursor-pointer"
+				>abweichende Versandadresse</label
+			>
+		</div>
+	</div>
+
+	{#if $abweichende_versand_adresse}
+		<!-- Versand Empfänger * -->
+
+		<div class="input-standard order-8 md:order-8 xl:order-8">
+			<InputLabel title="Versand-Empfänger *"></InputLabel>
+
+			<input
+				name="versand_empfaenger"
+				type="text"
+				readonly={!$abweichende_versand_adresse}
+				bind:value={$versand_empfaenger}
+				required
+				data-rule-maxlength="100"
+				data-msg-maxlength="max. 100 Zeichen"
+			/>
+
+			<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie den Namen des Versand-Empfängers ein.
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- Versand Straße, Hausnummer * -->
+
+		<div class="input-standard order-9 md:order-9 xl:order-9">
+			<InputLabel title="Straße, Hausnummer *"></InputLabel>
+
+			<input
+				name="versand_strasse"
+				type="text"
+				readonly={!$abweichende_versand_adresse}
+				bind:value={$versand_strasse}
+				required
+				data-rule-maxlength="40"
+				data-msg-maxlength="max. 40 Zeichen"
+			/>
+
+			<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer
+					ein, an die die Rechnung versandt wird.
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- PLZ / ORT -->
+
+		<div
+			class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10"
+		>
+			<div class="input-noHelp">
+				<InputLabel title="PLZ *"></InputLabel>
+				<PlzSuche
+					name="versand_plz"
+					readonly={!$abweichende_versand_adresse}
+					bind:zip={$versand_plz}
+					bind:city={$versand_ort}
+				/>
+			</div>
+
+			<div class="input-standard">
+				<InputLabel title="Ort *"></InputLabel>
+
+				<input
+					name="versand_ort"
+					type="text"
+					readonly
+					required
+					bind:value={$versand_ort}
+				/>
+
+				<div class="help-label">
+					<HelpLabel>
+						Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein,
+						an den die Rechnung versandt wird.
+					</HelpLabel>
+				</div>
+			</div>
+		</div>
+
+		<!-- Zusatzzeile -->
+
+		<div class="input-standard order-11 md:order-11 xl:order-11">
+			<InputLabel title="Zusatzzeile"></InputLabel>
+
+			<input
+				name="versand_zusatzzeile"
+				type="text"
+				readonly={!$abweichende_versand_adresse}
+				bind:value={$versand_zusatzzeile}
+				data-rule-maxlength="80"
+				data-msg-maxlength="max. 80 Zeichen"
+			/>
+
+			<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie, falls erforderlich, zusätzliche
+					nformationen ein.
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- E-mail -->
+
+		<div class="input-standard order-12 md:order-12 xl:order-12">
+			<InputLabel title="E-mail *"></InputLabel>
+
+			<input
+				name="versand_email"
+				bind:value={$versand_email}
+				type="email"
+			/>
+
+			<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die E-Mail Adresse des Versand-Empfängers
+					ein.
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- Telefon 
+
+<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
+	<Inputlabel title="Telefon *"></Inputlabel>
+
+    <input
+    name="rechnung_telefon"
+    bind:value={rechnung.telefon}
+    type="text"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
+				</HelpLabel>
+			</div>
+</div>
+-->
+	{/if}
+</div>
+</Bereich
 		>
 
 		{#if !gegAnfrage}
@@ -522,7 +877,7 @@ sm:grid-cols-[min-content_min-content_min-content] sm:justify-self-end sm:mt-8"
 
 	<Overlay bind:hidden={loginOverlayHidden}>
 		<div class="bg-white w-full max-w-screen-sm py-8">
-			<EmbeddedAuthFlowModule onLogin={loginAction} email={rechnung.email}></EmbeddedAuthFlowModule>
+			<EmbeddedAuthFlowModule onLogin={loginAction} email={$email}></EmbeddedAuthFlowModule>
 		</div>
 	</Overlay>
 	
diff --git a/src/pages/kundendaten.astro b/src/pages/kundendaten.astro
index 1409477f..53531f5f 100644
--- a/src/pages/kundendaten.astro
+++ b/src/pages/kundendaten.astro
@@ -34,6 +34,6 @@ try {
 ---
 
 <AusweisLayout title="Kundendaten Aufnehmen - IBCornelsen">
-	<KundendatenModule {user} {ausweis} {objekt} {aufnahme} {bilder} {ausweisart} {ausweistyp} aktiveBezahlmethode={Enums.Bezahlmethoden.paypal} client:load></KundendatenModule>
+	<KundendatenModule {user} {ausweis} {objekt} {aufnahme} {bilder} {ausweisart} {ausweistyp} aktiveBezahlmethode={Enums.Bezahlmethoden.paypal} client:only></KundendatenModule>
 </AusweisLayout>