445 lines
12 KiB
Svelte
445 lines
12 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 Ansprechpartner from "#components/Ausweis/Ansprechpartner.svelte";
|
|
import Rechnungsadresse from "#components/Ausweis/Rechnungsadresse.svelte";
|
|
import Bezahlung from "#components/Ausweis/Bezahlung.svelte";
|
|
|
|
import Pruefung from "#components/Ausweis/Pruefung.svelte";
|
|
|
|
import type { Bezahlmethoden } from "@ibcornelsen/database/client";
|
|
import { Enums } from "@ibcornelsen/database/client";
|
|
import { dialogs } from "svelte-dialogs";
|
|
import LoginDialog from "#components/LoginDialog.svelte";
|
|
import { API_ACCESS_TOKEN_COOKIE_NAME, PRICES } from "#lib/constants.js";
|
|
import Cookies from "js-cookie";
|
|
import {
|
|
AufnahmeClient,
|
|
BenutzerClient,
|
|
getAusweisartFromUUID,
|
|
ObjektClient,
|
|
RechnungClient,
|
|
VerbrauchsausweisWohnenClient,
|
|
} from "#components/Ausweis/types.js";
|
|
import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
|
|
import { api } from "astro-typesafe-api/client";
|
|
import A10WaermequellenAnlagentechnikTrinkwarmwasser from "#components/Tabellen/A10WaermequellenAnlagentechnikTrinkwarmwasser.svelte";
|
|
|
|
export let user: BenutzerClient;
|
|
export let ausweis: VerbrauchsausweisWohnenClient;
|
|
export let aufnahme: AufnahmeClient;
|
|
export let objekt: ObjektClient;
|
|
export let ausweisart: Enums.Ausweisart;
|
|
|
|
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,
|
|
}
|
|
|
|
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 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
|
|
id: Enums.Service.SameDay,
|
|
price: 29,
|
|
selected: false,
|
|
},
|
|
{
|
|
name: "Telefonische Energieeffizienzberatung",
|
|
id: Enums.Service.Telefonberatung,
|
|
price: 75,
|
|
selected: false,
|
|
},
|
|
];
|
|
|
|
export let bezahlmethode: Bezahlmethoden =
|
|
Enums.Bezahlmethoden.paypal;
|
|
|
|
let prices: number[] = [];
|
|
|
|
if (aufnahme.ausweisart) {
|
|
prices = PRICES[aufnahme.ausweisart];
|
|
}
|
|
|
|
let basePrice: number = prices[0];
|
|
|
|
$: price =
|
|
basePrice +
|
|
services.reduce(
|
|
(acc, service) => (service.selected && acc + service.price) || acc,
|
|
0
|
|
);
|
|
|
|
const zurueck = {
|
|
[Enums.Ausweisart.VerbrauchsausweisWohnen]: `/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid=${ausweis.uid}`,
|
|
[Enums.Ausweisart.VerbrauchsausweisGewerbe]: `/energieausweis-erstellen/verbrauchsausweis-gewerbe?uid=${ausweis.uid}`,
|
|
[Enums.Ausweisart.BedarfsausweisWohnen]: `/energieausweis-erstellen/bedarfsausweis-wohnen?uid=${ausweis.uid}`,
|
|
[Enums.Ausweisart.BedarfsausweisGewerbe]: `/energieausweis-erstellen/bedarfsausweis-gewerbe?uid=${ausweis.uid}`,
|
|
}[ausweisart]
|
|
|
|
async function speichern(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
|
|
// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
|
|
// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
|
|
if (!(await validateAccessTokenClient())) {
|
|
// TOOD: Auf Dialog umstellen.
|
|
const loggedIn = await dialogs.modal(LoginDialog);
|
|
|
|
if (!loggedIn) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Falls der Ausweis noch keine benutzer_id hat müssen wir ihn claimen, damit er dem jetzigen Nutzer zugewiesen wird...
|
|
// await client.v1.verbrauchsausweisWohnen.claim.mutate({
|
|
// uid: ausweis.uid,
|
|
// });
|
|
|
|
window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
|
|
}
|
|
|
|
async function bestellen() {
|
|
const ausweisart = getAusweisartFromUUID(ausweis.uid) as Enums.Ausweisart;
|
|
|
|
try {
|
|
const { uid, checkout_url } = await api.rechnung.PUT.fetch({
|
|
ausweisart,
|
|
bezahlmethode,
|
|
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,
|
|
ausweis_uid: ausweis.uid
|
|
}, {
|
|
headers: {
|
|
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
|
|
}
|
|
})
|
|
|
|
window.location.href = checkout_url;
|
|
} catch(e) {
|
|
console.log(e);
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
id="skala"
|
|
class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
|
|
|
|
2xl:grid-cols-2 2xl:gap-x-8
|
|
"
|
|
>
|
|
<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
|
|
<PerformanceScore
|
|
bind:ausweis
|
|
bind:aufnahme={aufnahme}
|
|
bind:objekt={objekt}
|
|
{ausweisart}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="progress-box"
|
|
class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
|
|
>
|
|
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
|
|
<h2 class="text-primary text-xl">
|
|
Verbrauchsausweis Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €
|
|
</h2>
|
|
<Progressbar progress={0} step1={''} step2={'step'} step3={''}/>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="formInput-2">
|
|
<div id="formular-box" class="formular-boxen ring-0">
|
|
<Bereich
|
|
bereich="1"
|
|
title="Eingabe des Ansprechpartners -> {user.email}"
|
|
>
|
|
<Ansprechpartner bind:user /></Bereich
|
|
>
|
|
|
|
<Bereich bereich="2" title="Rechnungsadresse">
|
|
<Rechnungsadresse bind:user bind:rechnung /></Bereich
|
|
>
|
|
|
|
<Bereich bereich="3" title="Bezahlmethode">
|
|
<Bezahlung bind:selectedPaymentType={bezahlmethode} /></Bereich
|
|
>
|
|
|
|
<div class="grid 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. 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">
|
|
<div>Netto-Preis Energieausweis</div>
|
|
<div>:</div>
|
|
<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/{bezahlmethode}.png"
|
|
alt={bezahlmethode}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full grid grid-cols-[min-content_1fr_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
|
|
>
|
|
<a class="button justify-self-start" href={zurueck}>Zurück</a>
|
|
|
|
<div></div>
|
|
|
|
<button class="button">Speichern</button>
|
|
|
|
<button class="button" data-cy="bestellen" on:click={bestellen}>kostenpflichtig bestellen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="bereich-box pr-12 mt-6">
|
|
<Pruefung
|
|
bereich="A"
|
|
title="Prüfung der Ausweisart"
|
|
bullets={[
|
|
["Vermietung, Verkauf oder sonstiges.", false],
|
|
[
|
|
"Baujahr Heizung nicht kleiner als Baujahr Gebäude.",
|
|
false,
|
|
],
|
|
[
|
|
"Baujahr nach 1977 oder saniert oder mehr als 4 Wohneinheiten",
|
|
false,
|
|
],
|
|
["Heizung min. 3 Jahre alt.", false],
|
|
["Verbrauchsausweis zulässig.", false],
|
|
]}
|
|
></Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="B"
|
|
title="Prüfung der Adresse, Wohnfläche, Keller und Dach"
|
|
bullets={[
|
|
["PLZ gültig.", false],
|
|
["Klimafaktorern.", false],
|
|
["Wohnfläche passt zu Wohneinheiten", false],
|
|
]}
|
|
></Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="C"
|
|
title="Prüfung der Verbrauchsangaben"
|
|
bullets={[
|
|
["Verbrauchsmenge schlüssig.", false],
|
|
["Verbrauchsabweichung im Rahmen.", false],
|
|
["Endenergieverbrauch schlüssig", false],
|
|
]}
|
|
></Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="D"
|
|
title="Prüfung Warmwasser und alternative Energieversorgung"
|
|
bullets={[
|
|
["Warmwasseranteil schlüssig.", false],
|
|
["Verbrauchsabweichung im Rahmen.", false],
|
|
["Endenergieverbrauch schlüssig", false],
|
|
]}
|
|
></Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="E"
|
|
title="Prüfung von Gebäudetyp, Lüftung, Kühlung und Leerstand"
|
|
bullets={[["Leerstand nicht größer als 30%.", false]]}
|
|
></Pruefung>
|
|
|
|
<Pruefung
|
|
bereich="F"
|
|
title="Prüfung des Sanierungsstandes und der Gebäudebilder"
|
|
bullets={[
|
|
["Mindestens ein Bild pro Abschnitt vorhanden.", false],
|
|
["Angaben zum Sanierungsstand vorhanden.", false],
|
|
[
|
|
"Bei Baujahr vor 1978 Dach oder Geschossdecke min. 12 cm gedämmt.",
|
|
false,
|
|
],
|
|
]}
|
|
></Pruefung>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="varianten bereich-box bg-white">
|
|
<h3>Hiermit bestelle ich folgende Version des Energieausweises:</h3>
|
|
|
|
<div class="variante">
|
|
<input
|
|
type="radio"
|
|
bind:group={basePrice}
|
|
value={prices[0]}
|
|
name="Preis"
|
|
checked
|
|
/>
|
|
<div class="text-right pr-4"><b>{prices[0]} €</b> inkl. MwSt.</div>
|
|
<div>Verbrauchsausweis online als PDF per E-Mail</div>
|
|
</div>
|
|
|
|
<div class="variante">
|
|
<input
|
|
type="radio"
|
|
bind:group={basePrice}
|
|
value={prices[1]}
|
|
name="Preis"
|
|
/>
|
|
<div class="text-right pr-4"><b>{prices[1]} €</b> inkl. MwSt.</div>
|
|
<div>
|
|
Verbrauchsausweis online inkl. Beratung als PDF per E-Mail
|
|
</div>
|
|
</div>
|
|
|
|
<div class="variante">
|
|
<input
|
|
type="radio"
|
|
bind:group={basePrice}
|
|
value={prices[2]}
|
|
name="Preis"
|
|
/>
|
|
<div class="text-right pr-4"><b>{prices[2]} €</b> inkl. MwSt.</div>
|
|
<div>
|
|
Verbrauchsausweis offline als PDF per E-Mail (Sie schicken uns 3
|
|
Verbrauchsabrechnungen)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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. Mwst
|
|
</div>
|
|
<div>{@html service.name}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->
|
|
|
|
<!-- <ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->
|
|
|
|
|
|
<style lang="postcss">
|
|
h3 {
|
|
@apply text-[1.25rem] ml-0 font-bold mb-6;
|
|
}
|
|
|
|
.ProduktKostenTabelle {
|
|
@apply block;
|
|
.zeile {
|
|
@apply grid 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-[40px_8rem_1fr] items-start pb-3;
|
|
input {
|
|
@apply mt-[4px];
|
|
}
|
|
}
|
|
}
|
|
</style>
|