Files
online-energieausweis/src/modules/KundendatenModule.svelte
2025-04-09 20:13:52 -04:00

1169 lines
38 KiB
Svelte

<script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import Progressbar from "#components/Ausweis/Progressbar.svelte";
import Bereich from "#components/labels/Bereich.svelte";
import type { BedarfsausweisGewerbe, BedarfsausweisWohnen, Bezahlmethoden, GEGNachweisGewerbe, GEGNachweisWohnen, Unterlage, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
import { Enums } from "#lib/client/prisma.js";
import {
API_ACCESS_TOKEN_COOKIE_NAME,
PRICES,
} from "#lib/constants.js";
import Cookies from "js-cookie";
import {
AufnahmeClient,
BenutzerClient,
BildClient,
ObjektClient,
RechnungClient,
VerbrauchsausweisWohnenClient,
} from "#components/Ausweis/types.js";
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";
import { nachweisSpeichern } from "#client/lib/nachweisSpeichern.js";
import HelpLabel from "#components/labels/HelpLabel.svelte";
import InputLabel from "#components/labels/InputLabel.svelte";
import PlzSuche from "#components/PlzSuche.svelte";
import { getMaximumDevitationInPercent } from "#client/lib/helpers.js";
import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016 } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016.js";
import { endEnergieVerbrauchVerbrauchsausweis_2016_Client } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016_Client.js";
import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016_Client } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016_Client.js";
export let user: Partial<BenutzerClient>;
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
export let aufnahme: AufnahmeClient;
export let objekt: ObjektClient;
export let bilder: BildClient[];
export let unterlagen: Unterlage[];
export let rechnung: RechnungClient | null = null;
export let ausweisart: Enums.Ausweisart;
export let aktiveBezahlmethode: Bezahlmethoden = Enums.Bezahlmethoden.paypal;
export let partner_code: string;
let email: string, vorname: string, name: string, empfaenger: string, strasse: string, plz: string, ort: string, zusatzzeile: string, telefon: string;
if (user.rolle !== Enums.BenutzerRolle.ADMIN) {
// Falls der aktuelle Benutzer kein Admin ist können wir die Kundendaten aus den Stammdaten vorausfüllen.
email = rechnung?.email || localStorage.getItem("kundendaten.email") || user.email || "";
vorname = localStorage.getItem("kundendaten.vorname") || user.vorname || "";
name = localStorage.getItem("kundendaten.name") || user.name || "";
empfaenger = rechnung?.empfaenger || localStorage.getItem("kundendaten.empfaenger") || (user.vorname && user.name ? `${user.vorname} ${user.name}` : "")
strasse = rechnung?.strasse || localStorage.getItem("kundendaten.strasse") || user.adresse || "";
plz = rechnung?.plz || localStorage.getItem("kundendaten.plz") || user.plz || "";
ort = rechnung?.ort || localStorage.getItem("kundendaten.ort") || user.ort || "";
zusatzzeile = rechnung?.zusatzzeile || localStorage.getItem("kundendaten.zusatzzeile") || ""
telefon = rechnung?.telefon || localStorage.getItem("kundendaten.telefon") || user.telefon || "";
}
let abweichende_versand_adresse = JSON.parse(localStorage.getItem("kundendaten.abweichende_versand_adresse") || "false")
let versand_email: string | undefined,
versand_zusatzzeile: string | undefined,
versand_empfaenger: string | undefined,
versand_strasse: string | undefined,
versand_plz: string | undefined,
versand_ort: string | undefined;
$: {
if (!abweichende_versand_adresse) {
versand_email = email
versand_zusatzzeile = zusatzzeile
versand_empfaenger = empfaenger
versand_strasse = strasse
versand_plz = plz
versand_ort = ort
}
}
$: {
// Wir speichern jede Änderung an den Kundendaten im localStorage ab.
localStorage.setItem("kundendaten.email", email)
localStorage.setItem("kundendaten.vorname", vorname)
localStorage.setItem("kundendaten.name", name)
localStorage.setItem("kundendaten.empfaenger", empfaenger)
localStorage.setItem("kundendaten.strasse", strasse)
localStorage.setItem("kundendaten.plz", plz)
localStorage.setItem("kundendaten.ort", ort)
localStorage.setItem("kundendaten.zusatzzeile", zusatzzeile)
localStorage.setItem("kundendaten.telefon", telefon)
localStorage.setItem("kundendaten.abweichende_versand_adresse", abweichende_versand_adresse)
}
let services: {
name: string;
id: Enums.Service;
price: number;
selected: boolean;
}[] = [
{
name: "Qualitätsdruck per Post (zusätzlich zur PDF Version)",
id: Enums.Service.Qualitaetsdruck,
price: 9,
selected: false,
},
{
name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)",
id: Enums.Service.Aushang,
price: 10,
selected: false,
},
{
name: "Same Day Service - Bestellung Werktags vor <b>12:00&nbsp;Uhr</b><br>Ausstellung bis <b>18:00&nbsp;Uhr</b> am gleichen Tag",
id: Enums.Service.SameDay,
price: 29,
selected: false,
},
{
name: "Telefonische Energie-Effizienzberatung",
id: Enums.Service.Telefonberatung,
price: 75,
selected: false,
},
];
let prices = PRICES[ausweisart];
let basePrice: number = prices[ausweis.ausweistyp];
$: price =
basePrice +
services.reduce(
(acc, service) => (service.selected && acc + service.price) || acc,
0
);
const zurueck = {
[Enums.Ausweisart.VerbrauchsausweisWohnen]:
new URL("/energieausweis-erstellen/verbrauchsausweis-wohngebaeude", window.location.origin),
[Enums.Ausweisart.VerbrauchsausweisGewerbe]:
new URL("/energieausweis-erstellen/verbrauchsausweis-gewerbe", window.location.origin),
[Enums.Ausweisart.BedarfsausweisWohnen]:
new URL("/energieausweis-erstellen/bedarfsausweis-wohngebaeude", window.location.origin),
[Enums.Ausweisart.GEGNachweisWohnen]:
new URL("/angebot-anfragen/geg-nachweis-wohnen-anfragen", window.location.origin),
[Enums.Ausweisart.GEGNachweisGewerbe]:
new URL("/angebot-anfragen/geg-nachweis-gewerbe-anfragen", window.location.origin),
[Enums.Ausweisart.BedarfsausweisGewerbe]:
new URL("/angebot-anfragen/bedarfsausweis-gewerbe-anfragen", window.location.origin),
}[ausweisart];
if (ausweis.id) {
zurueck.searchParams.append("id", ausweis.id)
}
async function anfordern() {
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 = anfordern
loginOverlayHidden = false;
return
}
loginOverlayHidden = true
let result: Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
try {
result = await nachweisSpeichern(ausweis as unknown as GEGNachweisWohnen | GEGNachweisGewerbe | BedarfsausweisGewerbe, objekt, aufnahme, bilder, unterlagen, ausweisart)
} catch(e) {
addNotification({
dismissable: true,
message: "Ups... Das hat nicht geklappt.",
subtext: "Speichern ist fehlgeschlagen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
})
return;
}
if (!result) {
addNotification({
dismissable: true,
message: "Ups... Das hat nicht geklappt.",
subtext: "Speichern ist fehlgeschlagen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
})
return;
}
try {
const { id } = await api.rechnung.anfordern.PUT.fetch(
{
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_id: result.nachweis_id
},
{
headers: {
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
},
}
);
// Alle alten Ausweisdateien im localStorage löschen.
localStorage.clear();
window.location.href = `/einpreisung/success?e=${id}&a=${result.nachweis_id}`;
} catch (e) {
addNotification({
dismissable: true,
message: "Ups... Das hat nicht geklappt.",
subtext: "Beim erstellen des Nachweises ist etwas schiefgelaufen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
})
}
}
async function speichern() {
loginAction = speichern;
if (!await validateAccessTokenClient()) {
loginOverlayHidden = false;
return
}
loginOverlayHidden = true
let result: Awaited<ReturnType<typeof ausweisSpeichern>> | Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
try {
if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
result = await nachweisSpeichern(ausweis as unknown as GEGNachweisWohnen | GEGNachweisGewerbe | BedarfsausweisGewerbe, objekt, aufnahme, bilder, unterlagen, ausweisart)
} else {
result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, unterlagen, ausweisart)
}
} catch(e) {
addNotification({
dismissable: true,
message: "Ups... Das hat nicht geklappt.",
subtext: "Speichern ist fehlgeschlagen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
})
}
if (result !== null) {
window.history.pushState(
{},
"",
`${location.pathname}?uid=${ausweis.id}`
);
localStorage.clear();
window.location.href = `/speichern-erfolgreich?id=${ausweis.id}`
}
}
async function bestellen() {
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
loginOverlayHidden = false;
return
}
loginOverlayHidden = true
let result: Awaited<ReturnType<typeof ausweisSpeichern>> | Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
result = await nachweisSpeichern(ausweis as unknown as GEGNachweisWohnen, objekt, aufnahme, bilder, unterlagen, ausweisart)
} else {
result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, unterlagen, ausweisart)
}
if (result === null) {
if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
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."
})
} else {
addNotification({
dismissable: true,
message: "Ups... Das hat nicht geklappt.",
subtext: "Ihre Anfrage für einen GEG Nachweis konnte nicht gespeichert werden, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
})
}
}
if (rechnung && rechnung.status === "paid") {
window.location.href = "/dashboard"
return;
}
try {
let id: string, checkout_url: string | undefined;
if (rechnung) {
const result = await api.rechnung._id.PATCH.fetch({
bezahlmethode: aktiveBezahlmethode,
abweichende_versand_adresse: abweichende_versand_adresse,
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,
versand_zusatzzeile: versand_zusatzzeile
}, {
params: {
id: rechnung.id
},
headers: {
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
},
})
id = result.id
checkout_url = result.checkout_url
} else {
const result = await api.rechnung.PUT.fetch(
{
ausweisart,
bezahlmethode: aktiveBezahlmethode,
services: services
.filter((service) => service.selected)
.map((service) => service.id),
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_id: ausweis.id,
partner_code
},
{
headers: {
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
},
}
);
id = result.id;
checkout_url = result.checkout_url;
}
// Alle alten Ausweisdateien im localStorage löschen.
localStorage.clear();
if (aktiveBezahlmethode === Enums.Bezahlmethoden.rechnung) {
window.location.href = `/payment/success?r=${id}&a=${ausweis.id}`;
} else {
window.location.href = checkout_url as string;
}
} catch (e) {
addNotification({
dismissable: true,
message: "Ups... Das hat nicht geklappt.",
subtext: "Beim erstellen des Ausweises ist etwas schiefgelaufen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
})
}
}
const gegAnfrage =
ausweisart === Enums.Ausweisart.GEGNachweisWohnen ||
ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe ||
ausweisart === Enums.Ausweisart.GEGNachweisGewerbe;
let loginOverlayHidden = true;
let loginAction = () => {};
let form: HTMLFormElement;
</script>
<div
id="skala"
class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 px-0 sm:p-4
2xl:grid-cols-2 2xl:gap-x-8
"
>
{#if !gegAnfrage}
<PerformanceScore
bind:ausweis
bind:aufnahme
bind:objekt
{ausweisart}
/>
{/if}
{#if gegAnfrage}
<Progressbar
active={1}
steps={["Gebäudedaten", "Kundendaten", "Bestätigung"]}
{ausweisart}
ausweistyp={"ausweistyp" in ausweis ? ausweis.ausweistyp : ausweis.nachweistyp}
anliegen={"Angebot anfragen"}
/>
{:else}
<Progressbar active={1} {ausweisart} ausweistyp={ausweis.ausweistyp} anliegen={"Energieausweis erstellen"} />
{/if}
</div>
<form id="formInput-2" bind:this={form}>
<div id="formular-box" class="formular-boxen ring-0">
<Bereich
bereich="1"
title="Eingabe des Ansprechpartners"
>
<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" required />
<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">
<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}
<Bereich bereich="3" title="Bezahlmethode">
<div
id="bezahlung"
class="bereich-box grid
grid-cols-3 sm:grid-cols-5 justify-around justify-items-center items-center"
>
<PaymentOption
bezahlmethode={Enums.Bezahlmethoden.paypal}
bind:aktiveBezahlmethode
name={"PayPal"}
icon={"/images/paypal.png"}
></PaymentOption>
<PaymentOption
bezahlmethode={Enums.Bezahlmethoden.sofort}
bind:aktiveBezahlmethode
name={"Sofort"}
icon={"/images/sofort.png"}
></PaymentOption>
<PaymentOption
bezahlmethode={Enums.Bezahlmethoden.giropay}
bind:aktiveBezahlmethode
name={"Giropay"}
icon={"/images/giropay.png"}
></PaymentOption>
<PaymentOption
bezahlmethode={Enums.Bezahlmethoden.creditcard}
bind:aktiveBezahlmethode
name={"Kreditkarte"}
icon={"/images/creditcard.png"}
></PaymentOption>
<PaymentOption
bezahlmethode={Enums.Bezahlmethoden.rechnung}
bind:aktiveBezahlmethode
name={"Rechnung"}
icon={"/images/rechnung.png"}
></PaymentOption>
</div></Bereich
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 my-6">
<div class="zusaetze bereich-box bg-white">
<h3>Zusatzleistungen:</h3>
{#each services as service}
<div class="zusatz">
<input
type="checkbox"
bind:checked={service.selected}
/>
<div class="text-right pr-6">
<b>{@html service.price}</b> inkl.&nbsp;Mwst
</div>
<div>{@html service.name}</div>
</div>
{/each}
</div>
<div class=" bereich-box bg-white ring-primary/50 ring-2">
<h3>Kosten:</h3>
<div class="ProduktKostenTabelle">
<div class="zeile betrag">
{#if ausweis.ausweistyp === Enums.AusweisTyp.Standard || ausweis.ausweistyp === Enums.AusweisTyp.standardXL}
<span>Netto-Preis Energieausweis</span>
{:else if ausweis.ausweistyp === Enums.AusweisTyp.Beratung || ausweis.ausweistyp === Enums.AusweisTyp.BeratungXL}
<span>Energieausweis inkl. Beratung</span>
{:else if ausweis.ausweistyp === Enums.AusweisTyp.Offline || ausweis.ausweistyp === Enums.AusweisTyp.OfflineXL}
<span>Energieausweis Offline</span>
{/if}
<span>:</span>
<div class="text-right">
<b>{(price * 0.81).toFixed(2) + " €"}</b>
</div>
</div>
<div class="zeile betrag">
<div>Zusatzleistung (Prüfung Mehraufwand)</div>
<div>:</div>
<div class="text-right"><b>0.00 €</b></div>
</div>
<div class="zeile betrag">
<div>19% gesetzl. MwSt.</div>
<div>:</div>
<div class="text-right">
<b>{(price * 0.19).toFixed(2) + " €"}</b>
</div>
</div>
<div class="zeile betrag mt-4">
<div><b>Preis inkl. MwSt.</b></div>
<div>:</div>
<div class="text-right">
<b>{price.toFixed(2) + " €"}</b>
</div>
</div>
<div class="zeile betrag mt-4 items-center">
<div><b>Bezahlmethode</b></div>
<div>:</div>
<div class="justify-self-end">
<img
src="images/{aktiveBezahlmethode}.png"
alt={aktiveBezahlmethode}
/>
</div>
</div>
</div>
</div>
</div>
{/if}
<!-- Falls wir es mit einem Ausweis zu tun haben und der Nutzer keine Hilfe bestellt hat dann zeigen wir eine Box mit sachen an die vielleicht unklar sind. -->
{#if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen) && (ausweis.ausweistyp === Enums.AusweisTyp.Standard || ausweis.ausweistyp === Enums.AusweisTyp.standardXL)}
<div class="grid grid-cols-1 sm:grid-cols-1 gap-x-6 my-6">
<div class="pruefpunkte bereich-box bg-white">
<h3>Bitte untenstehende Punkte bestätigen. Bitte gehen Sie gegebenenfalls zurück zum Formular und überprüfen bzw. korrigieren Ihre Eingaben.</h3>
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
{@const request = ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen ? endEnergieVerbrauchVerbrauchsausweis_2016_Client(ausweis, aufnahme, objekt) : endEnergieVerbrauchVerbrauchsausweisGewerbe_2016_Client(ausweis, aufnahme, objekt)}
{#await request}
{:then berechnungen}
<!-- Verbrauchsausweis Wohnen, Gewerbe [altes System: $ausweis->baujahr_anlage < (intval(date("Y")) - 3)] -->
{#if (aufnahme.baujahr_heizung.at(-1) || new Date().getFullYear()) >= (new Date().getFullYear() - 3)}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_heizungsalter" bind:checked={ausweis.pruefpunkt_heizungsalter} required/>
<div class="text-left">
Das Heizungsalter ist jünger als 3 Jahre. Es handelt sich hier um einen Heizungstausch ohne energetische Verbesserung.
</div>
</div>
{/if}
<!-- Verbrauchsausweis Wohnen, Gewerbe -->
<!-- Bei besonders niedrigem Endenergieverbrauch [altes System: $result->endEnergieVerbrauchGesamt < 40] -->
{#if (berechnungen?.endEnergieVerbrauchGesamt || 0) < 40}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_verbrauch_niedrig" bind:checked={ausweis.pruefpunkt_verbrauch_niedrig} required/>
<div class="text-left">
Ich habe die Verbrauchsangaben nochmal kontrolliert. Der ungewöhnlich niedrige Energiekennwert ist korrekt, da es sich um ein besonders effizientes Gebäude mit z.B. Wärmepumpe handelt.
</div>
</div>
{/if}
<!-- Verbrauchsausweis Wohnen, Gewerbe -->
<!-- Bei besonders hohem Endenergieverbrauch [altes System: $result->endEnergieVerbrauchGesamt > 450] -->
{#if (berechnungen?.endEnergieVerbrauchGesamt || 0) > 450}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_verbrauch_hoch" bind:checked={ausweis.pruefpunkt_verbrauch_hoch} required/>
<div class="text-left">
Ich habe die Verbrauchsangaben nochmal kontrolliert. Der ungewöhnlich hohe Energiekennwert ist korrekt, da es sich um ein sehr altes ungedämmtes Gebäude mit z.B. Einfachverglasung handelt.
</div>
</div>
{/if}
<!-- Verbrauchsausweis Wohnen, Gewerbe [altes System: $ausweis->energieverbrauch_1_heizquelle_1 > 0 && $ausweis->energieverbrauch_2_heizquelle_1 > 0
&& $ausweis->energieverbrauch_3_heizquelle_1 > 0] -->
{#if (ausweis.verbrauch_1 == 0) || (ausweis.verbrauch_2 == 0) || (ausweis.verbrauch_3 == 0)}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_verbrauch_null" bind:checked={ausweis.pruefpunkt_verbrauch_null} required/>
<div class="text-left">
Die eingegebenen Heizverbräuche sind korrekt und alle 3 Felder wurden vollständig eingegeben.
</div>
</div>
{/if}
<!-- Verbrauchsausweis Wohnen, Gewerbe [altes System: getMaximumDevitationInPercent([$ausweis->energieverbrauch_1_heizquelle_1,
$ausweis->energieverbrauch_2_heizquelle_1, $ausweis->energieverbrauch_3_heizquelle_1]) < 50] -->
{#if getMaximumDevitationInPercent(ausweis.verbrauch_1 || 0, ausweis.verbrauch_2 || 0, ausweis.verbrauch_3 || 0) > 50}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_verbrauch_abweichung" bind:checked={ausweis.pruefpunkt_verbrauch_abweichung} required/>
<div class="text-left">
Die eingegebenen Heizverbräuche sind korrekt und die Abweichung bei den Verbrauchsjahren lässt sich begründen. Falls es Leerstand gab, wurde
dieser im Formular von mir angegeben.
</div>
</div>
{/if}
{/await}
{/if}
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
<!-- Verbrauchsausweis Wohnen und Bedarfsausweis Wohnen [altes System: $ausweis->wohnflaeche >= $ausweis->anzahl_einheiten * 30] -->
{#if (aufnahme.flaeche || 0) < (aufnahme.einheiten || 0) * 30}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_wohnflaeche_einheiten" bind:checked={ausweis.pruefpunkt_wohnflaeche_einheiten} required/>
<div class="text-left">
Die Angabe der Wohnfläche ist korrekt und bezieht sich auf das gesamte Gebäude.
</div>
</div>
{/if}
{/if}
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
<!-- Zusätzlich beim Verbrauchsausweis Gewerbe [altes System: $ausweis->vanw_strom_1 > 0 && $ausweis->vanw_strom_2 > 0 && $ausweis->vanw_strom_3 > 0] -->
{#if ausweis.strom_1 == 0 || ausweis.strom_2 == 0 || ausweis.strom_3 == 0}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_strom_null" bind:checked={ausweis.pruefpunkt_strom_null} required/>
<div class="text-left">
Die eingegebenen Stromverbräuche sind korrekt und alle 3 Felder wurden vollständig eingegeben.
</div>
</div>
{/if}
<!-- Zusätzlich beim Verbrauchsausweis Gewerbe [altes System: getMaximumDevitationInPercent([$ausweis->vanw_strom_1, $ausweis->vanw_strom_2, $ausweis->vanw_strom_3]) < 50] -->
{#if getMaximumDevitationInPercent(ausweis.strom_1 || 0, ausweis.strom_2 || 0, ausweis.strom_3 || 0) > 50}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_strom_abweichung" bind:checked={ausweis.pruefpunkt_strom_abweichung} required/>
<div class="text-left">
Die eingegebenen Stromverbräuche sind korrekt und die Abweichung bei den Verbrauchsjahren lässt sich begründen. Falls es Leerstand gab, wurde
dieser im Formular von mir angegeben.
</div>
</div>
{/if}
{/if}
<!-- Verbrauchsausweis Wohnen, Gewerbe und Bedarfsausweis Wohnen
[altes System: !!db()->one("SELECT * FROM FORM WHERE zipcode = :zipcode", ["zipcode" => $ausweis->objekt_plz])] -->
<!-- TODO -->
<!-- <div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_plz" bind:checked={ausweis.pruefpunkt_plz}/>
<div class="text-left">
Ich habe meine Postleitzahl überprüft und bestätige hiermit die Richtigkeit.
</div>
</div> -->
<!-- Verbrauchsausweis Wohnen, Gewerbe und Bedarfsausweis Wohnen [altes System: $ausweis->baujahr_anlage >= $ausweis->baujahr_gebaeude] -->
{#if (aufnahme.baujahr_heizung.at(-1) || 0) < (aufnahme.baujahr_gebaeude[0] || 0)}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_heizungsanlage" bind:checked={ausweis.pruefpunkt_heizungsanlage} required/>
<div class="text-left">
Das Baujahr der Heizungsanlage ist kleiner als das Baujahr des Gebäudes und begründet.
</div>
</div>
{/if}
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
<!-- Verbrauchsausweis Wohnen [altes System: $ausweis->anteil_warmwasser_1 < 6 OR $ausweis->anteil_warmwasser_1 > 40] -->
{#if (ausweis.anteil_warmwasser_1 < 6) || (ausweis.anteil_warmwasser_1 > 40)}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_anteil_warmwasser" bind:checked={ausweis.pruefpunkt_anteil_warmwasser} required/>
<div class="text-left">
Ich habe den Warmwasseranteil nochmal überprüft. Dieser ist korrekt und begründet.
</div>
</div>
{/if}
{/if}
{#if ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
<!-- Zusätzlich beim Bedarfsausweis [altes System: $ausweis->wohnflaeche < $ausweis->energetische_nutzfläche] -->
{#if ausweis.flaeche < ausweis.nutzflaeche}
<div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_wohnflaeche" bind:checked={ausweis.pruefpunkt_wohnflaeche} required/>
<div class="text-left">
Ich habe die Wohnfläche nochmal überprüft und bestätige die Richtigkeit. Es handelt sich lediglich um die Wohnfläche innerhalb des Gebäudes. Flächen von eventuell vorhandenen Terassen und Balkonen wurden nicht mitgezählt.
</div>
</div>
{/if}
<!-- Zusätzlich beim Bedarfsausweis [altes System: ($result->AHF / ($ausweis->volumen ?: 1)) > 1.4 OR ($result->AHF / ($ausweis->volumen ?: 1)) < 0.18] -->
<!-- TODO -->
<!-- <div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_geometrie"/>
<div class="text-left">
Ich habe die Angaben zur Gebäudegeometrie geprüft und bestätige die Richtigkeit.
</div>
</div> -->
<!-- Zusätzlich beim Bedarfsausweis [altes System: getPortionInPercent(($ausweis->fenster_flaeche_1 + $ausweis->fenster_flaeche_2), $ausweis->aussenwand_flaeche) < 5 OR
getPortionInPercent(($ausweis->fenster_flaeche_1 + $ausweis->fenster_flaeche_2), $ausweis->aussenwand_flaeche) > 70] -->
<!-- <div class="pruefpunkt">
<input type="checkbox" name="pruefpunkt_fenster"/>
<div class="text-left">
Ich habe die Angaben zu den Fensterflächen geprüft und bestätige die Richtigkeit.
</div>
</div> -->
{/if}
<!-- Für alle -->
<div class="pruefpunkt">
<input type="checkbox"/>
<div class="text-left">
Ich habe die AGB und DSGVO im <a href="/impressum#agb" target="_blank" rel="noopener noreferrer">Impressum</a> gelesen und akzeptiert.
</div>
</div>
</div>
</div>
{/if}
<div
class="grid grid-cols-1 gap-x-2 gap-y-1 self-start mt-0
sm:grid-cols-[min-content_min-content_min-content] sm:justify-self-end sm:mt-8"
>
<a class="order-3 sm:order-1 button cursor-pointer text-center sm:text-start" href={zurueck.toString()}>Zurück</a>
<button class="order-2 button" type="button" on:click={speichern}>Speichern</button>
{#if rechnung && rechnung.status === "paid"}
<!-- Von einer GEG Anfrage sollte man sowieso nicht noch mal auf die Kundendaten Seite gelangen, also brauchen wir das hier nicht. -->
<button
class="order-1 sm:order-2 button cursor-pointer"
data-cy="bestellen"
type="button"
on:click={bestellen}>Absenden</button
>
{:else}
{#if gegAnfrage}
<button
class="order-1 sm:order-2 button cursor-pointer"
type="button"
data-cy="bestellen"
on:click={anfordern}>Angebot anfordern</button
>
{:else}
<button
class="order-1 sm:order-2 button cursor-pointer"
data-cy="bestellen"
type="button"
on:click={bestellen}>Kostenpflichtig bestellen</button
>
{/if}
{/if}
{#if user.rolle === Enums.BenutzerRolle.ADMIN}
<button class="button text-sm" on:click={() => {
localStorage.clear()
window.location.href = "/dashboard/objekte/1"
}}>Zurück zum Dashboard</button>
{/if}
</div>
</div>
<Overlay bind:hidden={loginOverlayHidden}>
<div class="bg-white w-full max-w-screen-sm py-8">
<EmbeddedAuthFlowModule onLogin={loginAction} email={email}></EmbeddedAuthFlowModule>
</div>
</Overlay>
</form>
<NotificationWrapper></NotificationWrapper>
<style lang="postcss">
h3 {
@apply text-[1.25rem] ml-0 pl-0 font-bold mb-6;
}
.ProduktKostenTabelle {
@apply block mt-6 sm:mt-0;
.zeile {
@apply grid grid-cols-[9rem_1rem_5rem_1fr] sm:grid-cols-[19rem_1rem_5rem_1fr];
}
.betrag {
@apply font-bold text-[1.15rem];
}
}
.varianten {
@apply block;
.variante {
@apply grid grid-cols-[40px_8rem_1fr] items-start pb-4;
input {
@apply mt-[5px];
}
}
}
.zusaetze {
@apply block;
.zusatz {
@apply grid grid-cols-[10px_6rem_1fr] sm:grid-cols-[40px_8rem_1fr] items-start pb-3;
input {
@apply mt-[4px];
}
}
}
.pruefpunkte {
@apply block;
.pruefpunkt {
@apply grid grid-cols-[10px_1fr] sm:grid-cols-[40px_1fr] items-start pb-3;
input {
@apply mt-[4px];
}
}
}
</style>