Konto: Rechnung direkt auf der Seite ansehen statt nur Download-Platzhalter

Der bisherige "Rechnung (PDF)"-Knopf war ein toter Link (href="#"). Jetzt
öffnet "Rechnung ansehen" pro Bestellung ein natives Dialog-Fenster direkt
auf der Seite mit vollständiger Rechnung: Rechnungsnummer/-datum,
Verkäufer, Rechnungsempfänger (live mit dem aktuellen Kontonamen befüllt),
Artikeltabelle mit Einzel-/Gesamtpreisen und dem §19-UStG-Hinweis — kein
Herunterladen nötig, schließbar per Kreuz, Schließen-Knopf oder Klick auf
den abgedunkelten Hintergrund.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/pages/en/konto/angemeldet.astro

@@ -141,13 +141,72 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
               <span class="order-total">{t.accountDash.orderTotal}: <strong>{formatPrice(b.summe, lang)}</strong></span>
               <div class="order-actions">
                 {b.tracking && <a class="btn btn-outline btn-sm" href={`https://www.dhl.de/de/privatkunden/dhl-sendungsverfolgung.html?piececode=${b.tracking}`} target="_blank" rel="noopener">{t.accountDash.trackingBtn}</a>}
-                <a class="btn btn-outline btn-sm" href="#">{t.accountDash.invoiceBtn}</a>
+                <button type="button" class="btn btn-outline btn-sm" data-open-invoice={`invoice-${b.nummer}`}>{t.accountDash.invoiceBtn}</button>
                 <a class="btn btn-outline btn-sm" href="/en/shop/">{t.accountDash.reorderBtn}</a>
               </div>
             </div>
             {b.tracking && (
               <p class="small order-tracking-no">{t.accountDash.trackingLabel}: <code>{b.tracking}</code></p>
             )}
+
+            {/* Rechnung direkt auf der Seite ansehen (natives <dialog>, siehe Skript unten) —
+                kein Download nötig. Empfängername wird beim Öffnen live aus dem Konto befüllt
+                (siehe .invoice-billto-name), Adresse ist bewusst dieselbe Platzhalter-Adresse
+                wie oben unter "Meine Daten". */}
+            <dialog class="invoice-dialog" id={`invoice-${b.nummer}`}>
+              <div class="invoice-card">
+                <div class="invoice-head">
+                  <div>
+                    <h3>{t.accountDash.invoiceTitle}</h3>
+                    <p class="invoice-meta">{t.accountDash.invoiceNumberLabel}: {b.nummer}</p>
+                    <p class="invoice-meta">{t.accountDash.invoiceDateLabel}: {b.datum}</p>
+                  </div>
+                  <button type="button" class="invoice-close" data-close-invoice aria-label={t.accountDash.invoiceCloseBtn}>✕</button>
+                </div>
+
+                <div class="invoice-parties">
+                  <div>
+                    <h4>{t.accountDash.invoiceSellerLabel}</h4>
+                    <p>Van's DIY &amp; Bastelbedarf</p>
+                  </div>
+                  <div>
+                    <h4>{t.accountDash.invoiceBillToLabel}</h4>
+                    <p><span class="invoice-billto-name">–</span><br />Musterstraße 1<br />10115 Berlin<br />Deutschland</p>
+                  </div>
+                </div>
+
+                <table class="invoice-table">
+                  <thead>
+                    <tr>
+                      <th>{t.accountDash.invoiceItemLabel}</th>
+                      <th>{t.accountDash.invoiceQtyLabel}</th>
+                      <th>{t.accountDash.invoiceUnitPriceLabel}</th>
+                      <th>{t.accountDash.invoiceSumLabel}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {b.artikel.map((a) => (
+                      <tr>
+                        <td>{a.name}</td>
+                        <td>{a.menge}</td>
+                        <td>{formatPrice(a.preis, lang)}</td>
+                        <td>{formatPrice(a.preis * a.menge, lang)}</td>
+                      </tr>
+                    ))}
+                    <tr class="invoice-total-row">
+                      <td colspan="3">{t.accountDash.orderTotal}</td>
+                      <td>{formatPrice(b.summe, lang)}</td>
+                    </tr>
+                  </tbody>
+                </table>
+
+                <p class="invoice-vat-note">{t.common.vatNote}</p>
+
+                <div class="invoice-foot">
+                  <button type="button" class="btn btn-outline btn-sm" data-close-invoice>{t.accountDash.invoiceCloseBtn}</button>
+                </div>
+              </div>
+            </dialog>
           </div>
         ))}
       </div>
@@ -316,6 +375,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
         el.style.backgroundImage = bg;
         el.textContent = text;
       });
+      // Empfängername in allen (schon gerenderten) Rechnungs-Dialogen live mit aktualisieren.
+      document.querySelectorAll<HTMLElement>(".invoice-billto-name").forEach((el) => {
+        el.textContent = anzeigeName(a) || fallbackName;
+      });
     }
     renderProfil();
     window.addEventListener("account:changed", renderProfil);
@@ -351,6 +414,25 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
       window.location.href = loginPath;
     });
 
+    // Rechnung direkt auf der Seite ansehen: natives <dialog> pro Bestellung, geöffnet/geschlossen
+    // per Button — kein Download nötig, kein Verlassen der Seite.
+    document.querySelectorAll<HTMLButtonElement>("[data-open-invoice]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const id = btn.dataset.openInvoice;
+        const dialog = id ? (document.getElementById(id) as HTMLDialogElement | null) : null;
+        dialog?.showModal();
+      });
+    });
+    document.querySelectorAll<HTMLDialogElement>(".invoice-dialog").forEach((dialog) => {
+      dialog.querySelectorAll<HTMLButtonElement>("[data-close-invoice]").forEach((btn) => {
+        btn.addEventListener("click", () => dialog.close());
+      });
+      // Klick auf den abgedunkelten Hintergrund schließt den Dialog ebenfalls.
+      dialog.addEventListener("click", (e) => {
+        if (e.target === dialog) dialog.close();
+      });
+    });
+
     // Pro Bestellposition: Button "Rezension schreiben" durch "✓ Bewertet" ersetzen, sobald für
     // genau diese Bestellung+Produkt schon eine Rezension existiert (siehe scripts/reviews.ts,
     // wird beim Absenden des Formulars auf der Produktseite markiert).