998 lines
27 KiB
Svelte
998 lines
27 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, Bezahlmethoden, GEGNachweisGewerbe, GEGNachweisWohnen, Unterlage } 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,
|
|
UnterlageClient,
|
|
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";
|
|
|
|
export let user: Partial<BenutzerClient>;
|
|
export let ausweis: VerbrauchsausweisWohnenClient;
|
|
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;
|
|
|
|
|
|
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 = localStorage.getItem("kundendaten.email") || user.email || "";
|
|
vorname = localStorage.getItem("kundendaten.vorname") || user.vorname || "";
|
|
name = localStorage.getItem("kundendaten.name") || user.name || "";
|
|
empfaenger = localStorage.getItem("kundendaten.empfaenger") || (user.vorname && user.name ? `${user.vorname} ${user.name}` : "")
|
|
strasse = localStorage.getItem("kundendaten.strasse") || user.adresse || "";
|
|
plz = localStorage.getItem("kundendaten.plz") || user.plz || "";
|
|
ort = localStorage.getItem("kundendaten.ort") || user.ort || "";
|
|
zusatzzeile = localStorage.getItem("kundendaten.zusatzzeile") || ""
|
|
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 Uhr</b><br>Ausstellung bis <b>18:00 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, 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;
|
|
}
|
|
|
|
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, 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, objekt, aufnahme, bilder, unterlagen, ausweisart)
|
|
} else {
|
|
result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, 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
|
|
},
|
|
{
|
|
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."
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* TODO
|
|
* Ausschlusskriterien: Neubau, Modernisierung
|
|
Baujahr vor 1978, unsaniert und bis 4 Wohneinheiten /
|
|
Heizung jünger als 3 Jahre / Verbrauchsjahre unvollständig / Verbrauchsjahre nicht aktuell genug /
|
|
Klimafaktoren unvollständig /
|
|
Leerstand größer 30% /
|
|
Fehlende oder unvollständige Bilder (pro Abschnitt mindestens ein Bild) /
|
|
Fehlende Angaben zum Sanierungsstand (Bei F mindestens 2 Haken), (Bei G mindestens 1 Haken)
|
|
*/
|
|
let bestellenNichtMoeglich = false;
|
|
if (
|
|
((ausweis.ausstellgrund === "Neubau" ||
|
|
ausweis.ausstellgrund === "Modernisierung") &&
|
|
aufnahme.baujahr_gebaeude[0] < 1978 &&
|
|
aufnahme.saniert === false &&
|
|
aufnahme.einheiten &&
|
|
aufnahme.einheiten > 4) ||
|
|
new Date().getFullYear() - aufnahme.baujahr_heizung[0] < 3 ||
|
|
!ausweis.verbrauch_1 ||
|
|
!ausweis.verbrauch_2 ||
|
|
!ausweis.verbrauch_3 ||
|
|
(aufnahme.leerstand && aufnahme.leerstand > 30)
|
|
) {
|
|
bestellenNichtMoeglich = true;
|
|
}
|
|
|
|
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 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 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 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. 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}
|
|
<span>Netto-Preis Energieausweis</span>
|
|
{:else if ausweis.ausweistyp === Enums.AusweisTyp.Beratung}
|
|
<span>Energieausweis inkl. Beratung</span>
|
|
{:else if ausweis.ausweistyp === Enums.AusweisTyp.Offline}
|
|
<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}
|
|
|
|
<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];
|
|
}
|
|
}
|
|
}
|
|
</style>
|