Abosystem mit dauerhaften Rabatten und Teddy-Prämien
Drei Mitgliedschaftsstufen (Klein 4,99€/5%, Mittel 9,99€/10%, Groß 19,99€/20%) mit automatischem Bestellrabatt und Teddy-Prämien nach Meilensteinen (12-Monats- Rhythmus bzw. 6+12 bei Groß). Preise/Rabatte und alle Admin-Regeln (Kombinier- barkeit mit anderen Rabatten, Fortsetzung bei Wiederanmeldung, Monate über Stufen zusammenzählen, kostenloser Versand bei Prämie) sind über Decap CMS einstellbar (src/content/abo-einstellungen.json). Neuer "Mein Abo"-Bereich im Kundenkonto (6. Nav-Kachel) mit Plan-Vergleich, Live-Status (Laufzeit, nächste Zahlung, Rabatt, Fortschritt bis zur nächsten Prämie), Einlösen-Buttons für freigeschaltete Teddys, Kündigen/Wechseln sowie einer übersetzten Benachrichtigungsliste. Dazu ein extra hervorgehobener "Mein Abo verwalten"-Button neben Abmelden in der Kopfkarte. Warenkorb/Checkout rechnen den Abo-Rabatt korrekt in die Summe ein und stellen eingelöste Teddys als 0€-Gratisposition dar. Alles in 4 Sprachen (DE/EN/CH/FR). Unterwegs zwei echte Bugs gefunden und behoben: addMonateISO() vermischte lokale Zeit mit toISOString() (UTC) und verlor dadurch bei jeder Monats- verlängerung reproduzierbar einen Tag; die Checkout-Positionsliste zeigte für Gratis-Prämien fälschlich den vollen Preis statt 0€. Wie beim Treuebonus gilt: Speicherung aktuell im localStorage des Geräts (Phase 1) statt einer echten geräteübergreifenden Datenbank — folgt mit der Zahlungsanbindung in Phase 2. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
0cb7d3ca65
commit
208d995941
@@ -5,6 +5,7 @@ import { products, getProduct } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
import { formatPrice } from "../../../i18n/format";
|
||||
import { ABO_STUFEN, aboStufenKonfig, type AboStufe } from "../../../data/abo";
|
||||
|
||||
const lang: Locale = "ch";
|
||||
const t = useTranslations(lang);
|
||||
@@ -49,6 +50,14 @@ const statusLabel = {
|
||||
abgeschlossen: t.accountDash.statusAbgeschlossen,
|
||||
} as const;
|
||||
|
||||
// Abo-Pläne: Namen/Vorteilstexte kommen aus i18n, Preis/Rabatt aus den admin-editierbaren
|
||||
// Einstellungen (src/content/abo-einstellungen.json). Reihenfolge fest klein → mittel → groß.
|
||||
const aboPlanLabels: Record<AboStufe, { name: string; vorteil: string }> = {
|
||||
klein: { name: t.accountDash.aboNameKlein, vorteil: t.accountDash.aboVorteilKlein },
|
||||
mittel: { name: t.accountDash.aboNameMittel, vorteil: t.accountDash.aboVorteilMittel },
|
||||
gross: { name: t.accountDash.aboNameGross, vorteil: t.accountDash.aboVorteilGross },
|
||||
};
|
||||
|
||||
// "Zuletzt angesehen" zeigt in dieser Vorschau einfach die ersten echten Produkte aus dem Shop —
|
||||
// in Phase 2 kommt hier die tatsächliche Verlaufs-Historie der angemeldeten Person hin.
|
||||
const zuletztAngesehen = products.slice(0, 3);
|
||||
@@ -79,7 +88,13 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
<p class="lead">{t.accountDash.lead}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
|
||||
<div class="account-head-actions">
|
||||
<button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
|
||||
<span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
|
||||
{t.accountDash.aboHeaderBtn}
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
|
||||
@@ -115,6 +130,12 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
<span class="account-nav-value" id="loyalty-nav-value">–</span>
|
||||
<span class="account-nav-label">{t.accountDash.statLoyalty}</span>
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-abo" data-tab="abo">
|
||||
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
|
||||
<span class="account-nav-icon" aria-hidden="true">🎫</span>
|
||||
<span class="account-nav-value" id="abo-nav-value">–</span>
|
||||
<span class="account-nav-label">{t.accountDash.statAbo}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -314,10 +335,83 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Abosystem: drei Mitgliedschaftsstufen mit dauerhaftem Rabatt + Teddy-Prämien. Preise/Rabatte
|
||||
kommen aus src/content/abo-einstellungen.json (admin-editierbar via Decap CMS), Status/
|
||||
Fortschritt/Benachrichtigungen komplett aus dem Konto (siehe scripts/account.ts) und werden
|
||||
per JS befüllt (Skript unten) — hier nur das Gerüst mit sinnvollen Leerzuständen. */}
|
||||
<section class="section-tight" id="abo">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.aboTitle}</h2>
|
||||
<p class="lead">{t.accountDash.aboIntro}</p>
|
||||
|
||||
<div class="abo-plans grid grid-3">
|
||||
{ABO_STUFEN.map((stufe) => {
|
||||
const cfg = aboStufenKonfig(stufe);
|
||||
const labels = aboPlanLabels[stufe];
|
||||
return (
|
||||
<div class={`card abo-plan-card abo-plan-${stufe}`} data-abo-plan={stufe}>
|
||||
<span class="abo-plan-badge" data-abo-active-badge style="display:none;">{t.accountDash.aboAktivesLabel}</span>
|
||||
<h3>{labels.name}</h3>
|
||||
<p class="abo-plan-price">{formatPrice(cfg.preis, lang)} <span class="small">{t.accountDash.aboPreisSuffix}</span></p>
|
||||
<p class="small abo-plan-vorteil">{labels.vorteil}</p>
|
||||
<button type="button" class="btn btn-primary btn-sm abo-plan-btn" data-abo-choose={stufe}>{t.accountDash.aboAbschliessenBtn}</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div class="card loyalty-card abo-status-card" id="abo-status-card" style="display:none;">
|
||||
<span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
|
||||
<span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
|
||||
<h3>{t.accountDash.aboStatusTitle} <span class="badge" id="abo-active-badge"></span></h3>
|
||||
<table class="specs">
|
||||
<tbody>
|
||||
<tr><th>{t.accountDash.aboFieldStufe}</th><td id="abo-field-stufe">–</td></tr>
|
||||
<tr><th>{t.accountDash.aboFieldPreis}</th><td id="abo-field-preis">–</td></tr>
|
||||
<tr><th>{t.accountDash.aboFieldRabatt}</th><td id="abo-field-rabatt">–</td></tr>
|
||||
<tr><th>{t.accountDash.aboFieldStart}</th><td id="abo-field-start">–</td></tr>
|
||||
<tr><th>{t.accountDash.aboFieldNaechsteZahlung}</th><td id="abo-field-naechste">–</td></tr>
|
||||
<tr><th>{t.accountDash.aboFieldLaufzeit}</th><td id="abo-field-laufzeit">–</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p id="abo-fortschritt-klein" style="display:none;"></p>
|
||||
<p id="abo-fortschritt-gross" style="display:none;"></p>
|
||||
<p id="abo-praemien-erhalten"></p>
|
||||
<p id="abo-gekuendigt-hinweis" class="small" style="display:none;"></p>
|
||||
|
||||
<div class="abo-praemien-block">
|
||||
<h4>{t.accountDash.aboPraemienVerfuegbarTitle}</h4>
|
||||
<p class="small" id="abo-keine-praemien">{t.accountDash.aboKeinePraemienVerfuegbar}</p>
|
||||
<div class="abo-praemien-row">
|
||||
<button type="button" class="btn btn-outline btn-sm" id="abo-einloesen-klein" style="display:none;" data-einloesen="klein">🧸 {t.accountDash.aboEinloesenKleinLabel} — {t.accountDash.aboEinloesenBtn}</button>
|
||||
<button type="button" class="btn btn-outline btn-sm" id="abo-einloesen-gross" style="display:none;" data-einloesen="gross">🧸 {t.accountDash.aboEinloesenGrossLabel} — {t.accountDash.aboEinloesenBtn}</button>
|
||||
</div>
|
||||
<p class="small" id="abo-eingeloest-hinweis" style="display:none; color: var(--c-accent);">{t.accountDash.aboEingeloestHinweis}</p>
|
||||
</div>
|
||||
|
||||
<div class="abo-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm" id="abo-zahlung-sim-btn">{t.accountDash.aboZahlungSimBtn}</button>
|
||||
<button type="button" class="btn btn-outline btn-sm abo-cancel-btn" id="abo-kuendigen-btn">{t.accountDash.aboKuendigenBtn}</button>
|
||||
</div>
|
||||
<p class="small loyalty-explainer">{t.accountDash.aboZahlungSimHinweis}</p>
|
||||
</div>
|
||||
|
||||
<div class="card" id="abo-benachrichtigungen-card">
|
||||
<h3>{t.accountDash.aboBenachrichtigungenTitle}</h3>
|
||||
<ul class="abo-notif-list" id="abo-notif-list">
|
||||
<li class="small" id="abo-notif-empty">{t.accountDash.aboKeineBenachrichtigungen}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="small loyalty-explainer">{t.accountDash.aboExplainer}</p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script define:vars={{ loginPath: "/ch/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge , invoiceLang: lang, invoiceLabels: { title: t.accountDash.invoiceTitle, numberLabel: t.accountDash.invoiceNumberLabel, dateLabel: t.accountDash.invoiceDateLabel, sellerLabel: t.accountDash.invoiceSellerLabel, billToLabel: t.accountDash.invoiceBillToLabel, itemLabel: t.accountDash.invoiceItemLabel, qtyLabel: t.accountDash.invoiceQtyLabel, unitPriceLabel: t.accountDash.invoiceUnitPriceLabel, sumLabel: t.accountDash.invoiceSumLabel, totalLabel: t.accountDash.orderTotal, vatNote: t.common.vatNote }, loyaltyProgressTemplate: t.accountDash.loyaltyProgressTemplate, loyaltyRemainingOne: t.accountDash.loyaltyRemainingOne, loyaltyRemainingOther: t.accountDash.loyaltyRemainingOther, loyaltyUnlockedTitle: t.accountDash.loyaltyUnlockedTitle, loyaltyUnlockedText: t.accountDash.loyaltyUnlockedText}}>
|
||||
window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText, invoiceLang, invoiceLabels , loyaltyProgressTemplate, loyaltyRemainingOne, loyaltyRemainingOther, loyaltyUnlockedTitle, loyaltyUnlockedText };
|
||||
<script define:vars={{ loginPath: "/ch/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge , invoiceLang: lang, invoiceLabels: { title: t.accountDash.invoiceTitle, numberLabel: t.accountDash.invoiceNumberLabel, dateLabel: t.accountDash.invoiceDateLabel, sellerLabel: t.accountDash.invoiceSellerLabel, billToLabel: t.accountDash.invoiceBillToLabel, itemLabel: t.accountDash.invoiceItemLabel, qtyLabel: t.accountDash.invoiceQtyLabel, unitPriceLabel: t.accountDash.invoiceUnitPriceLabel, sumLabel: t.accountDash.invoiceSumLabel, totalLabel: t.accountDash.orderTotal, vatNote: t.common.vatNote }, loyaltyProgressTemplate: t.accountDash.loyaltyProgressTemplate, loyaltyRemainingOne: t.accountDash.loyaltyRemainingOne, loyaltyRemainingOther: t.accountDash.loyaltyRemainingOther, loyaltyUnlockedTitle: t.accountDash.loyaltyUnlockedTitle, loyaltyUnlockedText: t.accountDash.loyaltyUnlockedText, aboLang: lang, aboLabels: { nameKlein: t.accountDash.aboNameKlein, nameMittel: t.accountDash.aboNameMittel, nameGross: t.accountDash.aboNameGross, preisSuffix: t.accountDash.aboPreisSuffix, monateSuffix: t.accountDash.aboMonateSuffix, fortschrittKleinTemplate: t.accountDash.aboFortschrittKleinTemplate, fortschrittGrossTemplate: t.accountDash.aboFortschrittGrossTemplate, praemienErhaltenTemplate: t.accountDash.aboPraemienErhaltenTemplate, aktivBadge: t.accountDash.aboAktivesLabel, nichtAktivBadge: t.accountDash.aboNichtAktivBadge, gekuendigtHinweisTemplate: t.accountDash.aboGekuendigtHinweisTemplate, kuendigenConfirm: t.accountDash.aboKuendigenConfirm, abschliessenBtn: t.accountDash.aboAbschliessenBtn, wechselnBtn: t.accountDash.aboWechselnBtn, keineBenachrichtigungen: t.accountDash.aboKeineBenachrichtigungen, notifKeyLabels: { abo_abgeschlossen: t.accountDash.notifAboAbgeschlossen, abo_gewechselt: t.accountDash.notifAboGewechselt, abo_zahlung_erfolgreich: t.accountDash.notifAboZahlungErfolgreich, abo_teddy_klein_frei: t.accountDash.notifAboTeddyKleinFrei, abo_teddy_gross_frei: t.accountDash.notifAboTeddyGrossFrei, abo_bald_praemie: t.accountDash.notifAboBaldPraemie, abo_gekuendigt: t.accountDash.notifAboGekuendigt, abo_teddy_klein_eingeloest: t.accountDash.notifAboTeddyKleinEingeloest, abo_teddy_gross_eingeloest: t.accountDash.notifAboTeddyGrossEingeloest } } }}>
|
||||
window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText, invoiceLang, invoiceLabels, loyaltyProgressTemplate, loyaltyRemainingOne, loyaltyRemainingOther, loyaltyUnlockedTitle, loyaltyUnlockedText, aboLang, aboLabels };
|
||||
</script>
|
||||
<script>
|
||||
// Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
|
||||
@@ -331,6 +425,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
const recentSection = document.getElementById("zuletzt-angesehen");
|
||||
const datenSection = document.getElementById("meine-daten");
|
||||
const treuebonusSection = document.getElementById("treuebonus");
|
||||
const aboSection = document.getElementById("abo");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note") as HTMLElement | null;
|
||||
|
||||
@@ -343,6 +438,7 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
if (datenSection) datenSection.style.display = "none";
|
||||
if (treuebonusSection) treuebonusSection.style.display = "none";
|
||||
if (aboSection) aboSection.style.display = "none";
|
||||
if (recentSection) recentSection.style.display = "none";
|
||||
|
||||
if (tab === null) {
|
||||
@@ -365,6 +461,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === "abo") {
|
||||
if (aboSection) aboSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
@@ -387,12 +488,20 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
// Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
|
||||
document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
|
||||
setActiveTab("abo");
|
||||
aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
|
||||
setActiveTab(null);
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setUsername, setPhoto, hatBestellungBewertet, anzeigeName, treueFortschritt } from "../../../scripts/account";
|
||||
import { getAccount, isLoggedIn, logout, setUsername, setPhoto, hatBestellungBewertet, anzeigeName, treueFortschritt, aboStatus, aboAbschliessen, aboZahlungSimulieren, aboKuendigen, teddyEinloesen } from "../../../scripts/account";
|
||||
import { rechnungAlsPdfHerunterladen } from "../../../scripts/invoice-pdf";
|
||||
const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText, invoiceLang, invoiceLabels, loyaltyProgressTemplate, loyaltyRemainingOne, loyaltyRemainingOther, loyaltyUnlockedTitle, loyaltyUnlockedText } = (window as any).__accountDashVars;
|
||||
import { fuegeTeddyGratisHinzu } from "../../../scripts/cart";
|
||||
import { formatPrice } from "../../../i18n/format";
|
||||
const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText, invoiceLang, invoiceLabels, loyaltyProgressTemplate, loyaltyRemainingOne, loyaltyRemainingOther, loyaltyUnlockedTitle, loyaltyUnlockedText, aboLang, aboLabels } = (window as any).__accountDashVars;
|
||||
|
||||
// Zugriffsschutz: diese Seite ist nur für angemeldete Kund:innen gedacht. Es gibt noch kein
|
||||
// echtes Backend, das den Zugriff serverseitig verweigern könnte (Phase 2) — deshalb hier per
|
||||
@@ -466,6 +575,146 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
|
||||
renderLoyalty();
|
||||
window.addEventListener("account:changed", renderLoyalty);
|
||||
|
||||
// Abosystem: Pläne, Status, Fortschritt, Prämien und Benachrichtigungen live aus dem Konto
|
||||
// rendern (Nav-Kachel + Planvergleich + Statuskarte + Benachrichtigungsliste).
|
||||
const aboNameMap: Record<string, string> = { klein: aboLabels.nameKlein, mittel: aboLabels.nameMittel, gross: aboLabels.nameGross };
|
||||
|
||||
function renderAbo() {
|
||||
const a = getAccount();
|
||||
const status = aboStatus(a);
|
||||
|
||||
const navValue = document.getElementById("abo-nav-value");
|
||||
if (navValue) navValue.textContent = status.stufe ? (status.aktiv ? "✓" : "⏸") : "–";
|
||||
document.querySelector(".account-nav-abo")?.classList.toggle("is-ready", status.aktiv);
|
||||
|
||||
// Planvergleichs-Karten: aktive Stufe markieren, Buttons entsprechend beschriften.
|
||||
document.querySelectorAll<HTMLElement>("[data-abo-plan]").forEach((card) => {
|
||||
const stufe = card.dataset.aboPlan;
|
||||
const isCurrent = status.stufe === stufe && !a.abo.gekuendigt;
|
||||
const badge = card.querySelector("[data-abo-active-badge]") as HTMLElement | null;
|
||||
if (badge) badge.style.display = isCurrent ? "" : "none";
|
||||
card.classList.toggle("is-current-plan", isCurrent);
|
||||
const btn = card.querySelector("[data-abo-choose]") as HTMLButtonElement | null;
|
||||
if (btn) {
|
||||
btn.disabled = isCurrent;
|
||||
btn.textContent = isCurrent
|
||||
? aboLabels.aktivBadge
|
||||
: (status.stufe && status.aktiv && !a.abo.gekuendigt ? aboLabels.wechselnBtn : aboLabels.abschliessenBtn);
|
||||
}
|
||||
});
|
||||
|
||||
const statusCard = document.getElementById("abo-status-card");
|
||||
if (!status.stufe) {
|
||||
if (statusCard) statusCard.style.display = "none";
|
||||
return;
|
||||
}
|
||||
if (statusCard) statusCard.style.display = "";
|
||||
|
||||
const setText = (id: string, text: string) => { const el = document.getElementById(id); if (el) el.textContent = text; };
|
||||
setText("abo-field-stufe", aboNameMap[status.stufe] ?? status.stufe);
|
||||
setText("abo-field-preis", `${formatPrice(status.preis, aboLang)} ${aboLabels.preisSuffix}`);
|
||||
setText("abo-field-rabatt", `${status.rabattProzent} %`);
|
||||
setText("abo-field-start", a.abo.startDatum ?? "–");
|
||||
setText("abo-field-naechste", a.abo.gekuendigt ? "–" : (a.abo.bezahltBisDatum ?? "–"));
|
||||
setText("abo-field-laufzeit", `${status.bezahlteMonate} ${aboLabels.monateSuffix}`);
|
||||
|
||||
const activeBadge = document.getElementById("abo-active-badge");
|
||||
if (activeBadge) {
|
||||
activeBadge.textContent = status.aktiv ? aboLabels.aktivBadge : aboLabels.nichtAktivBadge;
|
||||
activeBadge.className = "badge " + (status.aktiv ? "abo-badge-active" : "abo-badge-inactive");
|
||||
}
|
||||
|
||||
const fortschrittKlein = document.getElementById("abo-fortschritt-klein");
|
||||
if (fortschrittKlein) {
|
||||
if (status.naechsterKleinIn != null) {
|
||||
fortschrittKlein.style.display = "block";
|
||||
fortschrittKlein.textContent = aboLabels.fortschrittKleinTemplate.replace("{n}", String(status.naechsterKleinIn));
|
||||
} else fortschrittKlein.style.display = "none";
|
||||
}
|
||||
const fortschrittGross = document.getElementById("abo-fortschritt-gross");
|
||||
if (fortschrittGross) {
|
||||
if (status.naechsterGrossIn != null) {
|
||||
fortschrittGross.style.display = "block";
|
||||
fortschrittGross.textContent = aboLabels.fortschrittGrossTemplate.replace("{n}", String(status.naechsterGrossIn));
|
||||
} else fortschrittGross.style.display = "none";
|
||||
}
|
||||
|
||||
setText("abo-praemien-erhalten", aboLabels.praemienErhaltenTemplate
|
||||
.replace("{klein}", String(a.abo.kleinTeddyEingeloest))
|
||||
.replace("{gross}", String(a.abo.grossTeddyEingeloest)));
|
||||
|
||||
const gekuendigtHinweis = document.getElementById("abo-gekuendigt-hinweis");
|
||||
if (gekuendigtHinweis) {
|
||||
if (a.abo.gekuendigt && a.abo.gekuendigtAm) {
|
||||
gekuendigtHinweis.style.display = "block";
|
||||
gekuendigtHinweis.textContent = aboLabels.gekuendigtHinweisTemplate.replace("{datum}", a.abo.gekuendigtAm);
|
||||
} else gekuendigtHinweis.style.display = "none";
|
||||
}
|
||||
|
||||
const hasKlein = status.kleinVerfuegbar > 0;
|
||||
const hasGross = status.grossVerfuegbar > 0;
|
||||
const einloesenKlein = document.getElementById("abo-einloesen-klein") as HTMLElement | null;
|
||||
const einloesenGross = document.getElementById("abo-einloesen-gross") as HTMLElement | null;
|
||||
const keinePraemien = document.getElementById("abo-keine-praemien") as HTMLElement | null;
|
||||
if (einloesenKlein) einloesenKlein.style.display = hasKlein ? "inline-flex" : "none";
|
||||
if (einloesenGross) einloesenGross.style.display = hasGross ? "inline-flex" : "none";
|
||||
if (keinePraemien) keinePraemien.style.display = hasKlein || hasGross ? "none" : "block";
|
||||
|
||||
const kuendigenBtn = document.getElementById("abo-kuendigen-btn") as HTMLElement | null;
|
||||
if (kuendigenBtn) kuendigenBtn.style.display = a.abo.gekuendigt ? "none" : "inline-flex";
|
||||
|
||||
const list = document.getElementById("abo-notif-list");
|
||||
if (list) {
|
||||
list.innerHTML = "";
|
||||
if (a.benachrichtigungen.length === 0) {
|
||||
const li = document.createElement("li");
|
||||
li.className = "small";
|
||||
li.id = "abo-notif-empty";
|
||||
li.textContent = aboLabels.keineBenachrichtigungen;
|
||||
list.appendChild(li);
|
||||
} else {
|
||||
a.benachrichtigungen.forEach((n) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "small abo-notif-item" + (n.gelesen ? "" : " abo-notif-unread");
|
||||
let text = aboLabels.notifKeyLabels[n.key] ?? n.key;
|
||||
if (n.stufe) text = text.replace("{stufe}", aboNameMap[n.stufe] ?? n.stufe);
|
||||
li.textContent = `${n.datum} — ${text}`;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
renderAbo();
|
||||
window.addEventListener("account:changed", renderAbo);
|
||||
|
||||
document.querySelectorAll<HTMLButtonElement>("[data-abo-choose]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const stufe = btn.dataset.aboChoose as "klein" | "mittel" | "gross" | undefined;
|
||||
if (!stufe) return;
|
||||
aboAbschliessen(stufe);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("abo-zahlung-sim-btn")?.addEventListener("click", () => { aboZahlungSimulieren(); });
|
||||
|
||||
document.getElementById("abo-kuendigen-btn")?.addEventListener("click", () => {
|
||||
if (window.confirm(aboLabels.kuendigenConfirm)) aboKuendigen();
|
||||
});
|
||||
|
||||
document.querySelectorAll<HTMLButtonElement>("[data-einloesen]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const art = btn.dataset.einloesen as "klein" | "gross" | undefined;
|
||||
if (!art) return;
|
||||
teddyEinloesen(art);
|
||||
fuegeTeddyGratisHinzu(art);
|
||||
const hinweis = document.getElementById("abo-eingeloest-hinweis");
|
||||
if (hinweis) {
|
||||
hinweis.style.display = "block";
|
||||
setTimeout(() => { hinweis.style.display = "none"; }, 2500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Benutzername ändern
|
||||
const saveBtn = document.getElementById("profile-username-save");
|
||||
const usernameInput = document.getElementById("profile-username") as HTMLInputElement | null;
|
||||
|
||||
Reference in New Issue
Block a user