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 showWeiter: boolean = true;

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

	async function ausweisAbschicken() {
		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}
	<div>
		<Overlay bind:hidden={loginOverlayHidden}>
			<div class="bg-white w-full max-w-screen-sm py-8">
				<EmbeddedAuthFlowModule onLogin={loginAction} email={""}></EmbeddedAuthFlowModule>
			</div>
		</Overlay>
		
		<button on:click={ausweisAbschicken} type="button" class="button" data-cy="weiter">Weiter</button>
	</div>
	{/if}
</div>

{#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">
				Verbrauchsausweis online<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">
				Verbrauchsausweis offline 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" 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}