From d0af7d1d02349aa1f93dbe0eb2ce9f1500b524d0 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Sun, 31 May 2026 12:33:53 +0200
Subject: [PATCH] feat(konto): 'Abo verwalten'-Button (Stripe Portal) +
 past_due-Hinweis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Abo verwalten → /billing/portal (Stripe Customer Portal)
- bei past_due: roter Hinweis 'Zahlung fehlgeschlagen'

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/js/hosting-app.js | 9 +++++++++
 static/js/hosting-app.js | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/public/js/hosting-app.js b/public/js/hosting-app.js
index 80e4fbb..8a76a1b 100644
--- a/public/js/hosting-app.js
+++ b/public/js/hosting-app.js
@@ -171,11 +171,14 @@
       h += '<div class="hosting-msg ok">Zahlung erfolgreich — Ihre Instanz wird bereitgestellt.</div>';
 
     if (subscription) {
+      const pastDue = subscription.status === "past_due";
+      if (pastDue) h += '<div class="hosting-msg err">Letzte Zahlung fehlgeschlagen — bitte Zahlungsmittel im Abo-Portal aktualisieren.</div>';
       h += '<div class="hosting-row"><span class="muted">Abo</span><b>' +
         esc(subscription.plan) + " · " + esc(subscription.status) + "</b></div>";
       if (subscription.current_period_end)
         h += '<div class="hosting-row"><span class="muted">Nächste Verlängerung</span><span>' +
           esc(new Date(subscription.current_period_end).toLocaleDateString("de-CH")) + "</span></div>";
+      h += '<div style="margin-top:14px"><button class="hosting-btn hosting-btn-dark" id="managePlan" style="width:auto;padding:9px 18px">Abo verwalten</button></div>';
     }
 
     if (instances && instances.length) {
@@ -235,6 +238,12 @@
       );
       const add = root.querySelector("#addInstance");
       if (add) add.onclick = () => alert("Weitere Instanzen kommen bald. Kontaktieren Sie uns für ein Mehrfach-Abo.");
+      const manage = root.querySelector("#managePlan");
+      if (manage) manage.onclick = async () => {
+        manage.disabled = true;
+        try { const { url } = await api("POST", "/billing/portal"); go(url); }
+        catch (err) { alert(err.message); manage.disabled = false; }
+      };
     }
     if (acctTab === "profile") {
       root.querySelector("#saveProfile").onclick = async (e) => {
diff --git a/static/js/hosting-app.js b/static/js/hosting-app.js
index 80e4fbb..8a76a1b 100644
--- a/static/js/hosting-app.js
+++ b/static/js/hosting-app.js
@@ -171,11 +171,14 @@
       h += '<div class="hosting-msg ok">Zahlung erfolgreich — Ihre Instanz wird bereitgestellt.</div>';
 
     if (subscription) {
+      const pastDue = subscription.status === "past_due";
+      if (pastDue) h += '<div class="hosting-msg err">Letzte Zahlung fehlgeschlagen — bitte Zahlungsmittel im Abo-Portal aktualisieren.</div>';
       h += '<div class="hosting-row"><span class="muted">Abo</span><b>' +
         esc(subscription.plan) + " · " + esc(subscription.status) + "</b></div>";
       if (subscription.current_period_end)
         h += '<div class="hosting-row"><span class="muted">Nächste Verlängerung</span><span>' +
           esc(new Date(subscription.current_period_end).toLocaleDateString("de-CH")) + "</span></div>";
+      h += '<div style="margin-top:14px"><button class="hosting-btn hosting-btn-dark" id="managePlan" style="width:auto;padding:9px 18px">Abo verwalten</button></div>';
     }
 
     if (instances && instances.length) {
@@ -235,6 +238,12 @@
       );
       const add = root.querySelector("#addInstance");
       if (add) add.onclick = () => alert("Weitere Instanzen kommen bald. Kontaktieren Sie uns für ein Mehrfach-Abo.");
+      const manage = root.querySelector("#managePlan");
+      if (manage) manage.onclick = async () => {
+        manage.disabled = true;
+        try { const { url } = await api("POST", "/billing/portal"); go(url); }
+        catch (err) { alert(err.message); manage.disabled = false; }
+      };
     }
     if (acctTab === "profile") {
       root.querySelector("#saveProfile").onclick = async (e) => {