Wartungs-Abo v2: Rechtsrunde umgesetzt

- Bestellseite: Pflichtangaben direkt ueber dem Button, Zahlungsarten, Wahl des Leistungsbeginns (sofort / nach Widerrufsfrist via 15 Tage Stripe-Probezeit), keine Vorauswahl - Zustimmungsnachweis: Zeitpunkt, Version, Wahl, IP, Browser in Stripe- Metadaten und Appwrite (neue Attribute, Setup-Skript ergaenzt) - Checkout: Karte + SEPA (Fallback nur Karte), korrigierter Hinweistext - Vertragsbestaetigung mit PDF der Vertragsunterlagen statt HTML - Kuendigen/Widerrufen: Formular direkt (keine Zwischenseite), Wunsch- termin, Druck/PDF der Bestaetigung, Vorbefuellung bei Login - Widerrufsbutton im Abo waehrend der Frist, 'beginnt am'-Status - Pilotbetrieb per ABO_PILOT_EMAILS - Vertragsbedingungen v2, Datenschutzerklaerung, Kalkulator ohne MwSt und mit 100/80 EUR Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-25 14:10:21 +00:00
1 parent c0214725c0
commit 4ab154bfa2
@@ -579,10 +579,10 @@ async function pollChatBadge() {
 // ---------------------------------------------------------------------------

 const ABO_FEATURES = [
-  ['Betrieb &amp; Pflege Ihrer Website/Anwendung', 'Server, Updates, Sicherheit, Backups, Monitoring – damit sie online bleibt'],
+  ['Betrieb &amp; Pflege Ihrer Website/Anwendung', 'Server in Deutschland, Updates, Sicherheit, tägliche Datensicherung, Überwachung'],
  ['1 Domain inklusive', 'Registrierung auf Ihren Namen, DNS- und Zertifikatsverwaltung'],
-  ['1 E-Mail-Postfach', 'mit Ihrer eigenen Domain'],
-  ['1 Stunde Arbeitszeit pro Monat', 'sammelt sich an, jede Stunde ist 12 Monate gültig'],
+  ['1 E-Mail-Postfach', 'mit Ihrer eigenen Domain, 5 GB Speicher'],
+  ['1 Stunde Arbeitszeit pro Monat', 'nicht genutzte Zeit bleibt 12 Monate verfügbar'],
 ]

 function fmtHours(min) {
@@ -598,6 +598,13 @@ function aboFeaturesHtml() {
  ).join('')}</ul>`
 }

+function lateStartDate() {
+  // Beginn nach der 14-tägigen Widerrufsfrist = 15 Tage nach heute
+  const d = new Date()
+  d.setDate(d.getDate() + 15)
+  return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
 function renderAboOffer(card, data, { ended } = {}) {
  const available = data.available
  card.innerHTML = `
@@ -612,25 +619,38 @@ function renderAboOffer(card, data, { ended } = {}) {
    <div class="abo-actions">
      <button type="button" class="abo-btn" id="abo-start" ${available ? '' : 'disabled'}>Abo abschließen</button>
      <span class="abo-note">${available
-        ? 'Keine Mindestlaufzeit. Gemäß § 19 UStG ohne Umsatzsteuer.'
+        ? 'Keine Mindestlaufzeit. Zahlung per Kreditkarte oder SEPA-Lastschrift. Gemäß § 19 UStG ohne Umsatzsteuer.'
        : 'Die Online-Bestellung wird gerade eingerichtet – schreiben Sie uns gern im Chat.'}</span>
    </div>
    <div class="abo-order hidden" id="abo-order">
      <h3>Ihre Bestellung</h3>
-      <table class="abo-summary">
-        <tr><td>Webklar Wartungs-Abo<br><span class="muted">Leistungen laut <a href="/abo-bedingungen.html" target="_blank" rel="noopener">Leistungsbeschreibung</a></span></td><td>50,00 € / Monat</td></tr>
-        <tr><td>Laufzeit</td><td>unbestimmt, monatlich kündbar</td></tr>
-        <tr><td>Zahlung</td><td>monatlich im Voraus (Karte, SEPA u. a. über Stripe)</td></tr>
-        <tr><td><strong>Gesamt heute</strong><br><span class="muted">Kein Umsatzsteuerausweis (§ 19 UStG)</span></td><td><strong>50,00 €</strong></td></tr>
-      </table>
      <label class="abo-check"><input type="checkbox" id="abo-terms">
-        <span>Ich habe die <a href="/abo-bedingungen.html" target="_blank" rel="noopener">Abo-Bedingungen inkl. Leistungsbeschreibung</a> und die <a href="/abo-bedingungen.html#widerruf" target="_blank" rel="noopener">Widerrufsbelehrung</a> gelesen und stimme ihnen zu.</span></label>
-      <label class="abo-check"><input type="checkbox" id="abo-early">
-        <span>Ich verlange ausdrücklich, dass Webklar vor Ablauf der Widerrufsfrist mit der Leistung beginnt. Mir ist bekannt, dass ich bei einem Widerruf Wertersatz für die bis dahin erbrachten Leistungen schulde.</span></label>
+        <span>Ich habe die <a href="/abo-bedingungen.html" target="_blank" rel="noopener">Vertragsbedingungen mit Leistungsbeschreibung und Auftragsverarbeitungsvertrag</a> gelesen und stimme ihnen zu. Die <a href="/abo-bedingungen.html#widerruf" target="_blank" rel="noopener">Widerrufsbelehrung</a> habe ich zur Kenntnis genommen.</span></label>
+
+      <fieldset class="abo-start-choice">
+        <legend>Wann sollen wir mit der Leistung beginnen?</legend>
+        <label class="abo-check"><input type="radio" name="abo-start-choice" value="sofort">
+          <span><strong>Sofort.</strong> Ich verlange ausdrücklich, dass WEBklar vor Ablauf der Widerrufsfrist mit der Leistung beginnt. Mir ist bekannt, dass ich bei einem Widerruf einen angemessenen Betrag für die bis dahin erbrachten Leistungen zahle.</span></label>
+        <label class="abo-check"><input type="radio" name="abo-start-choice" value="nach_frist">
+          <span><strong>Nach Ablauf der 14-tägigen Widerrufsfrist</strong> (am ${lateStartDate()}). Bis dahin erbringt WEBklar keine Leistungen und bucht nichts ab.</span></label>
+        <p class="abo-note">Firmenkunden haben kein Widerrufsrecht und wählen am besten „Sofort“.</p>
+      </fieldset>
+
+      <div class="abo-summary-box">
+        <table class="abo-summary">
+          <tr><td>Leistung</td><td>WEBklar Wartungs-Abo: Betrieb &amp; Pflege Ihrer Website bzw. Web-Anwendung, 1 Domain, 1 E-Mail-Postfach (5 GB), 1 Stunde Arbeitszeit je bezahltem Monat (12 Monate nutzbar)</td></tr>
+          <tr><td>Preis</td><td><strong>50,00 € pro Monat</strong> (Gesamtpreis, gemäß § 19 UStG ohne Umsatzsteuer), keine weiteren Kosten</td></tr>
+          <tr><td>Abrechnung</td><td>monatlich im Voraus, erstmals zum Leistungsbeginn</td></tr>
+          <tr><td>Laufzeit</td><td>unbestimmt, keine Mindestlaufzeit, jederzeit zum Ende des Abrechnungsmonats kündbar</td></tr>
+          <tr><td>Zahlung</td><td>Kreditkarte oder SEPA-Lastschrift über Stripe</td></tr>
+          <tr><td>Anbieter</td><td>WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · kenso.gri@gmail.com</td></tr>
+        </table>
+        <p class="abo-note">Es gilt das gesetzliche Mängelhaftungsrecht. Einzelheiten: <a href="/abo-bedingungen.html" target="_blank" rel="noopener">Vertragsbedingungen</a> · <a href="/datenschutz.html" target="_blank" rel="noopener">Datenschutz</a></p>
+      </div>
      <p class="error hidden" id="abo-error"></p>
      <div class="abo-actions">
        <button type="button" class="abo-btn" id="abo-buy">Zahlungspflichtig bestellen</button>
-        <span class="abo-note">Danach hinterlegen Sie bei unserem Zahlungsdienstleister Stripe Ihre Zahlungsart.</span>
+        <span class="abo-note">Danach hinterlegen Sie bei unserem Zahlungsdienstleister Stripe Ihre Zahlungsart. Bis zum Abschluss dort können Sie jederzeit abbrechen.</span>
      </div>
    </div>`

@@ -647,9 +667,13 @@ function renderAboOffer(card, data, { ended } = {}) {
    const errEl = card.querySelector('#abo-error')
    hideError(errEl)
    const acceptTerms = card.querySelector('#abo-terms').checked
-    const earlyStart = card.querySelector('#abo-early').checked
-    if (!acceptTerms || !earlyStart) {
-      showError(errEl, 'Bitte bestätigen Sie beide Punkte, um zu bestellen.')
+    const startChoice = card.querySelector('input[name="abo-start-choice"]:checked')?.value || ''
+    if (!acceptTerms) {
+      showError(errEl, 'Bitte stimmen Sie den Vertragsbedingungen zu.')
+      return
+    }
+    if (!startChoice) {
+      showError(errEl, 'Bitte wählen Sie, wann wir mit der Leistung beginnen sollen.')
      return
    }
    btn.disabled = true
@@ -657,7 +681,7 @@ function renderAboOffer(card, data, { ended } = {}) {
    try {
      const { url } = await api('/api/abo/checkout', {
        method: 'POST',
-        body: JSON.stringify({ acceptTerms, earlyStart, termsVersion: data.termsVersion }),
+        body: JSON.stringify({ acceptTerms, startChoice, termsVersion: data.termsVersion }),
      })
      window.location.href = url
    } catch (err) {
@@ -671,45 +695,52 @@ function renderAboOffer(card, data, { ended } = {}) {
 function renderAboActive(card, data) {
  const sub = data.subscription
  const l = data.ledger || { balanceMinutes: 0, credits: [], usage: [] }
-  const statusLine = sub.cancelAtPeriodEnd
-    ? `<span class="pill pill-muted">gekündigt zum ${fmtDateShort(sub.currentPeriodEnd)}</span>`
-    : sub.paymentProblem
-      ? '<span class="pill pill-red">Zahlung offen</span>'
-      : `<span class="pill pill-ok">aktiv</span> <span class="abo-note">nächste Abbuchung ${fmtDateShort(sub.currentPeriodEnd)}</span>`
+  let statusLine
+  if (sub.serviceStartsAt) {
+    statusLine = `<span class="pill pill-muted">beginnt am ${fmtDateShort(sub.serviceStartsAt)}</span>`
+  } else if (sub.cancelAtPeriodEnd) {
+    statusLine = `<span class="pill pill-muted">gekündigt zum ${fmtDateShort(sub.currentPeriodEnd)}</span>`
+  } else if (sub.paymentProblem) {
+    statusLine = '<span class="pill pill-red">Zahlung offen</span>'
+  } else {
+    statusLine = `<span class="pill pill-ok">aktiv</span> <span class="abo-note">nächste Abbuchung ${fmtDateShort(sub.currentPeriodEnd)}</span>`
+  }

  const usageRows = (l.usage || []).map((u) => `
    <tr><td>${fmtDateShort(u.date)}</td>
    <td>${escapeHtml(u.topic || u.details || 'Arbeitszeit')}${u.woid ? ` <span class="muted">#${escapeHtml(u.woid)}</span>` : ''}</td>
-    <td>−${fmtHours(u.minutes)}${u.overageMinutes ? ` <span class="pill pill-warn" title="Über das Guthaben hinaus">+${fmtHours(u.overageMinutes)} extra</span>` : ''}</td></tr>`).join('')
+    <td>−${fmtHours(u.minutes)}${u.overageMinutes ? ` <span class="pill pill-warn" title="Über das Kontingent hinaus">+${fmtHours(u.overageMinutes)} extra</span>` : ''}</td></tr>`).join('')
  const creditRows = (l.credits || []).slice().reverse().map((c) => `
-    <tr><td>${fmtDateShort(c.grantedAt)}</td><td>Monatliche Gutschrift</td>
-    <td>+${fmtHours(c.minutes)} <span class="muted">${c.expired ? 'abgelaufen' : `gültig bis ${fmtDateShort(c.expiresAt)}`}</span></td></tr>`).join('')
+    <tr><td>${fmtDateShort(c.grantedAt)}</td><td>Monatskontingent</td>
+    <td>+${fmtHours(c.minutes)} <span class="muted">${c.expired ? 'abgelaufen' : `nutzbar bis ${fmtDateShort(c.expiresAt)}`}</span></td></tr>`).join('')

  card.innerHTML = `
    <div class="abo-head">
      <div>
        <p class="abo-kicker">Ihr Wartungs-Abo</p>
-        <h2 class="abo-title">Stundenkonto</h2>
+        <h2 class="abo-title">Stundenkontingent</h2>
      </div>
      <div>${statusLine}</div>
    </div>
    ${sub.paymentProblem ? '<div class="abo-alert">Die letzte Abbuchung ist fehlgeschlagen. Bitte aktualisieren Sie Ihre Zahlungsart, damit Ihre Website online bleibt.</div>' : ''}
+    ${sub.serviceStartsAt ? `<div class="abo-alert">Wie gewählt beginnen wir nach Ablauf der Widerrufsfrist am ${fmtDateShort(sub.serviceStartsAt)}. Dann wird auch zum ersten Mal abgebucht, und Ihre erste Stunde steht bereit.</div>` : ''}
    <div class="abo-balance">
-      <div class="abo-stat"><strong>${fmtHours(l.balanceMinutes)}</strong><span>verfügbares Guthaben</span></div>
+      <div class="abo-stat"><strong>${fmtHours(l.balanceMinutes)}</strong><span>verfügbare Zeit</span></div>
      <div class="abo-stat"><strong>${fmtHours(l.usedMinutes)}</strong><span>bisher genutzt</span></div>
      ${l.nextExpiry ? `<div class="abo-stat"><strong>${fmtHours(l.nextExpiry.minutes)}</strong><span>verfallen am ${fmtDateShort(l.nextExpiry.at)}</span></div>` : ''}
    </div>
-    <p class="abo-note">Jeden Monat kommt 1 Stunde dazu. Abgerechnet wird in 15-Minuten-Schritten, die ältesten Stunden zuerst.
+    <p class="abo-note">Jeden bezahlten Monat kommt 1 Stunde dazu. Angerechnet wird in 15-Minuten-Schritten, die ältesten Stunden zuerst.
      Aufträge schicken Sie uns einfach über den Chat.</p>
    <div class="abo-actions" style="margin-top:14px">
      <button type="button" class="portal-btn-outline" id="abo-manage">${sub.paymentProblem ? 'Zahlungsart aktualisieren' : 'Abo verwalten · Rechnungen'}</button>
+      ${sub.withdrawalOpen ? `<a class="abo-withdraw" href="/widerrufen.html">Vertrag widerrufen</a><span class="abo-note">möglich bis ${fmtDateShort(sub.withdrawalUntil)}</span>` : ''}
      <a class="abo-note" href="/abo-bedingungen.html" target="_blank" rel="noopener">Leistungen &amp; Bedingungen</a>
    </div>
    ${usageRows || creditRows ? `
    <details class="abo-history">
      <summary>Verlauf anzeigen</summary>
      <table class="simple-table">
-        <thead><tr><th>Datum</th><th>Vorgang</th><th>Stunden</th></tr></thead>
+        <thead><tr><th>Datum</th><th>Vorgang</th><th>Zeit</th></tr></thead>
        <tbody>${usageRows}${creditRows}</tbody>
      </table>
    </details>` : ''}