online-energieausweis/src/components/Ausweis/ButtonWeiterHilfe.svelte

<script lang="ts">
	import { ausweisSpeichern } from "#client/lib/ausweisSpeichern.js";
	import { validateAccessTokenClient } from "#client/lib/validateAccessToken.js";
	import { AufnahmeClient, BedarfsausweisWohnenClient, BenutzerClient, GEGNachweisWohnenClient, ObjektClient, UnterlageClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
	import Overlay from "#components/Overlay.svelte";
	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";

	import { AusweisTyp, Enums } from "#lib/client/prisma.js";
	import { openWindowWithPost } from "#lib/helpers/window.js";
	import { PRICES } from "#lib/constants.js";
	import { nachweisSpeichern } from "#client/lib/nachweisSpeichern.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient | GEGNachweisWohnenClient;
	export let bilder: UploadedGebaeudeBild[];
	export let unterlagen: UnterlageClient[] = [];
	export let user: BenutzerClient;
	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let ausweisart: Enums.Ausweisart
	export let form: HTMLFormElement;
	export let skala: HTMLDivElement;

	export let showWeiter: boolean = true;

	export let ausweistyp: AusweisTyp = Enums.AusweisTyp.Standard;

	async function ausweisAbschicken() {
		if (!form.checkValidity()) {
    // Entferne die Klasse "2xl:mt-[370px]" falls vorhanden
    document.getElementById("formInput-1")?.classList.remove("2xl:mt-[370px]");

    // Verhindere das Scrollen (falls erforderlich)
    skala.classList.add("no-scroll");

    // Zeige die Validierungsmeldungen
    form.reportValidity();

    // Finde das erste ungültige Feld und scrolle sanft darauf
    let firstInvalidField = form.querySelector(":invalid");
    if (firstInvalidField) {
        let offset = 150; // Abstand für bessere Sichtbarkeit
        let fieldPosition = firstInvalidField.getBoundingClientRect().top + window.scrollY;
        window.scrollTo({ top: fieldPosition - offset, behavior: "smooth" });
    }

    return;
}


		openWindowWithPost("/kundendaten", {
			ausweis,
			objekt,
			aufnahme,
			bilder,
			unterlagen,
			ausweisart,
			ausweistyp
		}, "")
	}

	let loginAction: () => any = ausweisAbschicken;

	async function spaeterWeitermachen() {
		loginAction = spaeterWeitermachen;
		if (!(await validateAccessTokenClient())) {
			loginOverlayHidden = false;
			return
		}

		loginOverlayHidden = true

		let result: Awaited<ReturnType<typeof ausweisSpeichern>> | null = null;
		if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.GEGNachweisBedarfsausweis) {
			result = await nachweisSpeichern(ausweis, objekt, aufnahme, bilder, unterlagen, ausweisart)
		} else {
			result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, ausweisart)
		}

		if (result !== null) {
			window.history.pushState(
				{},
				"",
				`${location.pathname}?uid=${ausweis.uid}`
			);

			localStorage.clear()
			window.location.href = `/speichern-erfolgreich?uid=${ausweis.uid}`
		}
	}

	async function hilfeBestellen() {
		openWindowWithPost("/kundendaten", {
			ausweis,
			objekt,
			aufnahme,
			bilder,
			ausweisart,
			ausweistyp
		}, "")
	}

	let showHelp: boolean = false;
	let loginOverlayHidden = true;
</script>

<div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">

	<div></div>

	<div>
		<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
			>Hilfe anfordern</button
		>
	</div>
	
	<button class="button" type="button" on:click={spaeterWeitermachen}
		>Später Weitermachen
	</button>


	{#if showWeiter}
		<button on:click={ausweisAbschicken} type="button" class="button" data-cy="weiter">Weiter</button>
	{/if}
</div>

<Overlay bind:hidden={loginOverlayHidden}>
	<div class="bg-white w-full max-w-screen-sm py-8">
		<EmbeddedAuthFlowModule onLogin={loginAction} email={""}></EmbeddedAuthFlowModule>
	</div>
</Overlay>

{#if showHelp}
<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
	<div
		class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
grid-cols-1 gap-x-2 gap-y-4

"
	>
		<div class="pr-4 xs:pr-12">
			Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
			haben. Kurze Fragen zum Formular oder der Ausweisart werden
			kostenfrei telefonisch unter <a href="tel:+4940209339850"
				>040/209339850</a
			> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
			benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
			lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
			Auswahl und klicken auf weiter:
		</div>

		<hr class="m-0" />

		<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
			<input
				type="radio"
				class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
				id="Produkttb1"
				value={Enums.AusweisTyp.Beratung}
				name="Produkt"
				bind:group={ausweistyp}
			/>

			<div class="text-center xs:text-left justify-self-stretch">
				<b>Verbrauchsausweis online</b><br>inkl. ausführlicher&nbsp;telefonischer
				Beratung
			</div>

			<div class="text-center xs:text-right">
				<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
			</div>
		</div>

		<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
			<input
				type="radio"
				class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
				id="Produktof1"
				value={Enums.AusweisTyp.Offline}
				name="Produkt"
				bind:group={ausweistyp}
			/>

			<div class="text-center xs:text-left justify-self-stretch">
				<b>Verbrauchsausweis offline</b><br>Sie schicken uns 3&nbsp;Verbrauchsabrechnungen&nbsp;zu)
			</div>

			<div class="text-center xs:text-right">
				<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
			</div>
		</div>

		<hr class="m-0" />

		<button class="button" type="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>

		<button
			class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
			type="button"
			on:click={() => (showHelp = !showHelp)}>X</button
		>
	</div>
</div>
{/if}