Teddy-Praemien: zeigt jetzt WELCHE Teddys schon erhalten wurden, nicht nur wie viele

Statt "Bereits erhalten: 1x kleiner Teddy, 1x grosser Teddy" steht im Abo-Bereich jetzt eine
Liste mit dem tatsaechlichen Teddy-Namen, dem Einloesedatum und einem Link zum Produkt —
damit Kundinnen sehen, welchen Teddy sie schon besitzen, und keinen doppelt waehlen.

Dafuer haelt das Konto beim Einloesen fest, WELCHER Teddy vergeben wurde (neues Feld
abo.erhalteneTeddys mit Slug, Name und Datum). Bewusst als Verlauf gespeichert statt aus der
aktuellen Abo-Einstellung abgeleitet: VanVan kann die hinterlegten Teddy-Produkte jederzeit im
Adminbereich austauschen — eine nachtraeglich berechnete Liste wuerde dann einen Teddy
anzeigen, den die Kundin nie bekommen hat. Die Anzeige nimmt den aktuellen, uebersetzten
Produktnamen und faellt auf den gespeicherten Namen zurueck, falls das Produkt spaeter
umbenannt oder entfernt wird.

Nebenbei behoben: Beim Einloesen wanderte der Teddy in den Warenkorb, BEVOR geprueft wurde, ob
ueberhaupt eine Praemie offen ist. Bei einem zweiten Klick landete er dadurch erneut gratis im
Warenkorb, ohne im Konto gezaehlt zu werden. Jetzt wird zuerst geprueft.
Ausserdem sichert getAccount() nun auch die Listenfelder gegen kaputte Speicherwerte ab.

Getestet (Browser): Leerzustand, Einloesen beider Arten, Speicherung im Konto, zweiter Klick
ohne offene Praemie, Altkonto ohne Namensliste (ehrlicher Ersatztext) und entferntes Produkt
(gespeicherter Name greift). Beschriftungen in allen 4 Sprachen geprueft.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-04 10:27:14 +02:00
co-authored by Claude Opus 5
parent 578da49fd1
commit 915b71e43d
8 changed files with 359 additions and 55 deletions
+26 -9
View File
@@ -2752,17 +2752,34 @@ a:focus-visible, button:focus-visible {
.abo-reward-progress-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; font-weight: 600; }
.abo-reward-bar-gross { background: linear-gradient(90deg, #e3b23c, #f6dda0); }
.abo-erhalten-chip {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: rgba(126, 200, 160, 0.14);
border: 1px solid rgba(126, 200, 160, 0.35);
/* "Diese Teddys hast du schon bekommen" — nennt jeden eingelösten Teddy namentlich mit Datum,
damit die Kundin keinen doppelt auswählt (siehe erhalteneTeddys in scripts/account.ts).
Früher war das nur ein schmaler Chip mit reinen Stückzahlen. */
.abo-erhalten-box {
align-self: stretch;
padding: 0.7rem 1rem 0.8rem;
border-radius: var(--radius-m);
background: rgba(126, 200, 160, 0.12);
border: 1px solid rgba(126, 200, 160, 0.32);
font-size: 0.9rem;
}
.abo-erhalten-box.is-leer { background: rgba(244, 241, 247, 0.05); border-color: rgba(244, 241, 247, 0.14); }
.abo-erhalten-titel { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.abo-erhalten-liste { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.abo-erhalten-liste:empty { display: none; }
.abo-erhalten-eintrag {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.15rem 0.5rem;
padding-left: 1.4rem;
position: relative;
}
.abo-erhalten-eintrag::before { content: "🧸"; position: absolute; left: 0; font-size: 0.9em; }
.abo-erhalten-name { font-weight: 600; }
.abo-erhalten-datum { color: var(--c-text-muted); font-size: 0.85em; }
.abo-erhalten-link { font-size: 0.85em; text-decoration: underline; }
.abo-erhalten-eintrag-unbekannt { color: var(--c-text-muted); font-style: italic; }
.abo-praemien-block { border-top: 1px dashed rgba(244, 241, 247, 0.14); padding-top: 0.9rem; margin-top: 0.3rem; }
.abo-praemien-block h4 { margin: 0 0 0.4rem; }