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;

	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 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">

	<div></div>

	<div>
		<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
			>Hilfe anfordern</button
		>
	</div>
	
	{#if showHelp}
		<div class="col-start-1 row-start-2 col-span-4 mt-4">
			<div
				class="bereich-box grid relative
	grid-cols-1 gap-x-4 gap-y-4
	
	"
			>
				<div class="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-[30px_490px_200px_1fr] items-center">
					<input
						type="radio"
						class=" accent-secondary w-[20px] h-[20px]"
						id="Produkttb1"
						value={Enums.AusweisTyp.Beratung}
						name="Produkt"
						bind:group={ausweistyp}
					/>
	
					<div class="justify-self-stretch">
						Verbrauchsausweis online inkl. ausführlicher telefonischer
						Beratung
					</div>
	
					<div class="text-right">
						<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
					</div>
				</div>
	
				<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
					<input
						type="radio"
						class=" accent-secondary w-[20px] h-[20px]"
						id="Produktof1"
						value={Enums.AusweisTyp.Offline}
						name="Produkt"
						bind:group={ausweistyp}
					/>
	
					<div>
						Verbrauchsausweis offline (Sie schicken uns 3
						Verbrauchsabrechnungen zu)
					</div>
	
					<div class="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}
	

	<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>