Kundenansicht neu P2: Bestellseite im Wortlaut der Fassung 5

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/neu/ansicht-bestellen.js

@@ -1,7 +1,144 @@
-/* Kundenansicht neu: Platzhalter, den das nächste Paket füllt (Stub aus P1). */
+/* Kundenansicht neu (P2): Bestellseite je Abo (#bestellen-hosting, #bestellen-wartung), Text und Logik 1:1 aus app.js renderOrderView
+   (Fassung 5, Sie-Form, C14). Die Bestellübersicht steht unmittelbar über dem Bestellknopf (§ 312j BGB), ohne Klappe dazwischen.
+   Ein geänderter Satz wäre eine unbemerkte Rechtsänderung: das Wortlaut-Orakel vergleicht den sichtbaren Text Zeichen für Zeichen.
+   Neu sind nur der entfallene Seitenkopf (Titel zeichnet die Hülle), der Titel-Hinweis und die Sperre im Ansichtsmodus. */
 
-import { h } from './dom.js'
+import { api } from './api.js'
+import { h, leeren } from './dom.js'
+import { K, ladeAbo, safeUrl, meldeTitel, fmtEuro, fmtDatum, ABO_NICHT_GELADEN } from './ansicht-hilfen.js'
 
-export async function zeigeBestellen(wurzel, { route, me, nav }) {
-  wurzel.replaceChildren(h('p', { class: 'kn-leer' }, 'Abo bestellen (folgt)'))
+const laeufe = new WeakMap() // Wurzel → Nummer des jüngsten Aufrufs
+const BEDINGUNGEN = '/abo-bedingungen.html'
+const TEXT_SPERRE = 'Im Ansichtsmodus nicht möglich.'
+const TEXT_NICHT_VERFUEGBAR = 'Die Online-Bestellung wird gerade eingerichtet – schreiben Sie uns gern im Chat.'
+const link = (href, text) => h('a', { href, target: '_blank', rel: 'noopener' }, text)
+
+/** 'hosting' | 'wartung' aus der Route, sonst aus dem Hash (#bestellen-hosting), sonst ''. */
+export function produktAusRoute(route, hash = (typeof window !== 'undefined' ? window.location?.hash : '') || '') {
+  if (route?.produkt === 'hosting' || route?.produkt === 'wartung') return route.produkt
+  const treffer = /bestellen-(hosting|wartung)/.exec(String(hash || ''))
+  return treffer ? treffer[1] : ''
+}
+
+const produktVon = (daten, key) => (daten?.products || []).find((p) => p.key === key) || null
+const labelVon = (daten, key) => (produktVon(daten, key)?.name || (key === 'hosting' ? 'Hosting-Abo' : 'Wartungs-Abo')).replace(/^WEBklar\s+/, '')
+const reihe = (titel, ...inhalt) => h('tr', null, h('td', null, titel), ...inhalt)
+
+function bestellung(daten, productKey, viewAs) {
+  const product = produktVon(daten, productKey)
+  const offer = daten.offers?.[productKey] || null
+  const price = fmtEuro(product.amountCents / 100)
+  const lateStart = daten.lateStartAt ? fmtDatum(daten.lateStartAt) : ''
+  // Betrag der ersten Abbuchung: Angebotspreis während des Rabatts, sonst Katalogpreis
+  const offerMonthly = Number(offer?.monthlyPriceCents)
+  const offerRegular = Number(offer?.regularPriceCents) || product.amountCents
+  const offerMonths = Number(offer?.months)
+  const hasOfferNumbers = Boolean(offer) && Number.isFinite(offerMonthly) && offer.monthlyPriceCents != null && offerMonths > 0
+  const firstCents = hasOfferNumbers ? offerMonthly : product.amountCents
+  const firstAmount = fmtEuro(firstCents / 100)
+
+  const start = (wert, fett, rest) => h('label', { class: 'kn-check' },
+    h('input', { type: 'radio', name: 'abo-start-choice', value: wert, disabled: viewAs }),
+    h('span', null, h('strong', null, fett), rest))
+  const dueZelle = h('td', { id: 'abo-due-summary' }, 'Bitte oben wählen: sofort oder nach Ablauf der 14-tägigen Widerrufsfrist')
+  const startZelle = h('td', { id: 'abo-start-summary' }, `Bitte oben wählen: sofort oder nach Ablauf der 14-tägigen Widerrufsfrist${lateStart ? ` (am ${lateStart})` : ''}`)
+  const terms = h('input', { type: 'checkbox', id: 'abo-terms', disabled: viewAs })
+  const fehler = h('p', { class: K.fehler, id: 'abo-error', hidden: true })
+  const kaufen = h('button', { type: 'button', class: K.primaer, id: 'abo-buy', disabled: viewAs }, 'Zahlungspflichtig bestellen')
+  const zeigeFehler = (text) => { fehler.textContent = text; fehler.hidden = false }
+
+  const rootInfo = h('div', { class: 'kn-panel', id: 'abo-order' },
+    h('h3', null, 'Ihre Bestellung'),
+    daten.testAccount ? h('div', { class: 'kn-meldung kn-meldung-warn' }, `Testkonto: Bei Stripe wird ein Test-Rabatt verrechnet, abgebucht werden nur 0,50 € pro Monat.${offer ? ' Das Angebot wird nach dem Abschluss zusätzlich ans Abo gehängt.' : ''}`) : null,
+    h('label', { class: 'kn-check' }, terms,
+      h('span', null, 'Ich habe die ', link(BEDINGUNGEN, 'Vertragsbedingungen mit Leistungsbeschreibung und Auftragsverarbeitungsvertrag'), ' gelesen und stimme ihnen zu. Die ', link(`${BEDINGUNGEN}#widerruf`, 'Widerrufsbelehrung'), ' habe ich zur Kenntnis genommen.')),
+    h('fieldset', { class: 'kn-beginn' },
+      h('legend', null, 'Wann sollen wir mit der Leistung beginnen?'),
+      start('sofort', 'Sofort.', ' 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.'),
+      start('nach_frist', 'Nach Ablauf der 14-tägigen Widerrufsfrist', `${lateStart ? ` (am ${lateStart})` : ''}. Bis dahin erbringt WEBklar keine Leistungen und bucht nichts ab.`),
+      h('p', { class: 'kn-hinweis' }, 'Firmenkunden haben kein Widerrufsrecht und wählen am besten „Sofort“.')),
+    h('div', { class: 'kn-uebersicht' },
+      h('table', { class: 'kn-zusammenfassung' }, h('tbody', null,
+        reihe('Leistung', h('td', null, `${product.name}: ${(product.features || []).map(([t]) => t).join(', ')}`)),
+        reihe('Preis', h('td', null, ...(offer
+          ? [hasOfferNumbers ? h('strong', null, `${fmtEuro(offerMonthly / 100)} pro Monat für die ersten ${offerMonths} Monate`) : null,
+            hasOfferNumbers ? `, danach ${fmtEuro(offerRegular / 100)} pro Monat` : null,
+            ' ', h('span', null, `(individuelles Angebot: ${offer.text}; Gesamtpreis, gemäß § 19 UStG ohne Umsatzsteuer)`), ', keine weiteren Kosten']
+          : [h('strong', null, `${price} pro Monat`), ' (Gesamtpreis, gemäß § 19 UStG ohne Umsatzsteuer), keine weiteren Kosten']))),
+        reihe('Abrechnung', h('td', null, 'monatlich im Voraus, erstmals zum Leistungsbeginn')),
+        reihe('Fällig', dueZelle),
+        reihe('Leistungsbeginn', startZelle),
+        reihe('Laufzeit', h('td', null, h('strong', null, `Mindestlaufzeit ${product.minTermMonths} Monate`), ' ab Leistungsbeginn, kündbar zum Ende der Mindestlaufzeit bis einen Monat vorher; danach unbefristet und jederzeit zum Ende des Abrechnungsmonats kündbar')),
+        reihe('Zahlung', h('td', null, 'Kreditkarte oder SEPA-Lastschrift über Stripe')),
+        reihe('Anbieter', h('td', null, 'WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · support@webklar.com')))),
+      h('p', { class: 'kn-hinweis' }, 'Es gilt das gesetzliche Mängelhaftungsrecht. Einzelheiten: ', link(BEDINGUNGEN, 'Vertragsbedingungen'), ' · ', link('/datenschutz.html', 'Datenschutz'))),
+    fehler,
+    h('div', { class: 'kn-aktionen' }, kaufen,
+      h('span', { class: 'kn-hinweis' }, 'Danach hinterlegen Sie bei unserem Zahlungsdienstleister Stripe Ihre Zahlungsart. Bis zum Abschluss dort können Sie jederzeit abbrechen.'),
+      viewAs ? h('span', { class: K.meldung }, TEXT_SPERRE) : null))
+
+  // Die zwei Zeilen "Fällig" und "Leistungsbeginn" folgen der Wahl
+  rootInfo.querySelectorAll('input[name="abo-start-choice"]').forEach((radio) => radio.addEventListener('change', () => {
+    dueZelle.textContent = radio.value === 'sofort'
+      ? `Heute fällig: ${firstAmount} (gemäß § 19 UStG ohne Umsatzsteuer)`
+      : `Erste Abbuchung am ${lateStart || 'Ende der 14-tägigen Widerrufsfrist'}: ${firstAmount} (gemäß § 19 UStG ohne Umsatzsteuer); heute wird nichts abgebucht`
+    startZelle.textContent = radio.value === 'sofort'
+      ? 'sofort, auf Ihren ausdrücklichen Wunsch vor Ablauf der Widerrufsfrist'
+      : `nach Ablauf der 14-tägigen Widerrufsfrist${lateStart ? ` (am ${lateStart})` : ''}; bis dahin keine Leistung und keine Abbuchung`
+  }))
+
+  kaufen.addEventListener('click', async () => {
+    if (viewAs) return
+    fehler.hidden = true
+    const acceptTerms = terms.checked
+    const startChoice = rootInfo.querySelector('input[name="abo-start-choice"]:checked')?.value || ''
+    if (!acceptTerms) { zeigeFehler('Bitte stimmen Sie den Vertragsbedingungen zu.'); return }
+    if (!startChoice) { zeigeFehler('Bitte wählen Sie, wann wir mit der Leistung beginnen sollen.'); return }
+    kaufen.disabled = true
+    kaufen.textContent = 'Weiter zur Zahlung…'
+    try {
+      const { url } = await api('/api/abo/checkout', {
+        method: 'POST',
+        body: { productKey, acceptTerms, startChoice, termsVersion: daten.termsVersion, offerId: offer?.id || '', lateStartAt: daten.lateStartAt || '' },
+      })
+      const ziel = safeUrl(url)
+      if (!ziel) throw new Error('Die Zahlungsseite konnte nicht geöffnet werden. Bitte später noch einmal versuchen.')
+      window.location.href = ziel
+    } catch (f) {
+      zeigeFehler(f.message)
+      kaufen.disabled = false
+      kaufen.textContent = 'Zahlungspflichtig bestellen'
+    }
+  })
+
+  const angebotKasten = offer
+    ? h('div', { class: 'kn-angebot-kasten' },
+      h('strong', null, 'Ihr persönliches Angebot'),
+      h('p', null, `${offer.text}. Sie sparen ${fmtEuro(offer.savingsCents / 100)}.`),
+      offer.note ? h('p', { class: 'kn-hinweis' }, offer.note) : null,
+      h('p', { class: 'kn-hinweis' }, `Gültig bis ${fmtDatum(offer.validUntil)} · wird beim Abschluss automatisch berücksichtigt`))
+    : null
+  const leistungen = h('div', { class: 'kn-panel' },
+    h('ul', { class: 'kn-leistungen' }, (product.features || []).map(([titel, detail]) => h('li', null, titel, h('small', null, detail)))),
+    h('p', { class: 'kn-hinweis' }, 'Schon bei einem anderen Anbieter für Domain, Hosting oder E-Mail bezahlt? Nach dem Abschluss können Sie eine Übernahmegutschrift beantragen – wir rechnen die doppelt bezahlte Zeit anteilig an.'))
+  return [angebotKasten, leistungen, rootInfo]
+}
+
+/** Bestellseite. Das Produkt kommt aus route.produkt, hilfsweise aus dem Hash; daten (GET /api/abo) ist optional. */
+export async function zeigeBestellen(wurzel, { route, me, nav, daten } = {}) {
+  const nr = (laeufe.get(wurzel) ?? 0) + 1
+  laeufe.set(wurzel, nr)
+  const aktuell = () => laeufe.get(wurzel) === nr
+  leeren(wurzel).append(h('p', { class: K.leer }, 'Wird geladen …'))
+  const stand = daten ?? await ladeAbo()
+  if (!aktuell()) return
+  if (!stand) { leeren(wurzel).append(h('p', { class: K.fehler }, ABO_NICHT_GELADEN)); return }
+  const key = produktAusRoute(route)
+  const product = key ? produktVon(stand, key) : null
+  if (key) meldeTitel(wurzel, labelVon(stand, key))
+  if (!product || !stand.available) {
+    leeren(wurzel).append(h('div', { class: 'kn-panel' }, h('p', { class: 'kn-hinweis' }, TEXT_NICHT_VERFUEGBAR)))
+    return
+  }
+  leeren(wurzel).append(...bestellung(stand, key, me?.viewAs === true).filter(Boolean))
 }

test/knAnsichtBestellen.test.js

@@ -0,0 +1,53 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { zeigeBestellen, produktAusRoute } from '../public/neu/ansicht-bestellen.js'
+import { sichtbarerText, ohneKopf, ladeAlteApp } from './support/knWortlautOrakel.js'
+import { mit, me, aboAntwort, angebot, neueWurzel } from './support/knDaten.js'
+
+const alt = ladeAlteApp()
+const route = (produkt) => ({ bereich: 'vertraege', etage: 'bestellen', produkt, query: '' })
+for (const key of ['hosting', 'wartung']) for (const [name, daten] of [['ohne Angebot', aboAntwort()], ['mit Angebot', aboAntwort({ offers: { hosting: angebot(), wartung: angebot() } })], ['Testkonto', aboAntwort({ testAccount: true })], ['nicht verfügbar', aboAntwort({ available: false })]]) {
+  test(`Bestellen ${key} (${name}): sichtbarer Text wie in app.js`, mit({}, async (fx) => {
+    const w = neueWurzel(fx); await zeigeBestellen(w, { route: route(key), me: me(), nav: 'push', daten }); await fx.ruhe()
+    assert.equal(sichtbarerText(w), sichtbarerText(ohneKopf(alt.bestellen(daten, key))))
+  }))
+}
+test('produktAusRoute', () => { assert.equal(produktAusRoute({ produkt: 'wartung' }, ''), 'wartung'); assert.equal(produktAusRoute({}, '#bestellen-hosting'), 'hosting'); assert.equal(produktAusRoute({}, '#abo'), '') })
+test('Bestellen meldet den Produktnamen als Titel', mit({}, async (fx) => {
+  const titel = []; const w = neueWurzel(fx); w.addEventListener('kn:titel', (e) => titel.push(e.detail.text))
+  await zeigeBestellen(w, { route: route('wartung'), me: me(), nav: 'push', daten: aboAntwort() }); assert.deepEqual(titel, ['Wartungs-Abo'])
+}))
+test('Beginn-Auswahl ändert die Zeilen, Prüfungen wörtlich, Body wörtlich', mit({ 'POST /api/abo/checkout': { url: 'https://checkout.stripe.com/x' } }, async (fx) => {
+  const w = neueWurzel(fx); await zeigeBestellen(w, { route: route('wartung'), me: me(), nav: 'push', daten: aboAntwort() })
+  await fx.klick(fx.finde(w, '#abo-buy')); assert.match(fx.text(w), /Bitte stimmen Sie den Vertragsbedingungen zu\./)
+  await fx.klick(fx.finde(w, '#abo-terms')); await fx.klick(fx.finde(w, '#abo-buy')); assert.match(fx.text(w), /Bitte wählen Sie, wann wir mit der Leistung beginnen sollen\./)
+  await fx.klick(fx.finde(w, 'input[value="sofort"]'))
+  assert.ok(fx.text(w).includes('Heute fällig: 50,00 € (gemäß § 19 UStG ohne Umsatzsteuer)')); assert.ok(fx.text(w).includes('sofort, auf Ihren ausdrücklichen Wunsch vor Ablauf der Widerrufsfrist'))
+  await fx.klick(fx.finde(w, '#abo-buy')); await fx.ruhe()
+  assert.deepEqual(fx.fetchLog.at(-1), { method: 'POST', url: '/api/abo/checkout', body: { productKey: 'wartung', acceptTerms: true, startChoice: 'sofort', termsVersion: '2026-09-30-v5', offerId: '', lateStartAt: '2026-10-30T00:00:00.000Z' } })
+  assert.equal(fx.window.location.href, 'https://checkout.stripe.com/x')
+}))
+test('Bestellen: unsichere Adresse der Zahlungsseite wird nicht geöffnet, Ansichtsmodus sperrt', mit({ 'POST /api/abo/checkout': () => ({ body: { url: 'javascript:alert(1)' } }) }, async (fx) => {
+  const w = neueWurzel(fx); await zeigeBestellen(w, { route: route('wartung'), me: me(), nav: 'push', daten: aboAntwort() })
+  await fx.klick(fx.finde(w, '#abo-terms')); await fx.klick(fx.finde(w, 'input[value="nach_frist"]')); await fx.klick(fx.finde(w, '#abo-buy')); await fx.ruhe()
+  assert.notEqual(fx.window.location.href, 'javascript:alert(1)')
+  assert.equal(fx.finde(w, '#abo-buy').hasAttribute('disabled'), false); assert.equal(fx.finde(w, '#abo-buy').textContent, 'Zahlungspflichtig bestellen')
+  const v = neueWurzel(fx); await zeigeBestellen(v, { route: route('wartung'), me: me({ viewAs: true }), nav: 'push', daten: aboAntwort() })
+  assert.equal(fx.finde(v, '#abo-buy').hasAttribute('disabled'), true); assert.match(fx.text(v), /Im Ansichtsmodus nicht möglich\./)
+}))
+test('Kerninfo und Knopf stehen ohne Klappe nebeneinander', mit({}, async (fx) => {
+  const w = neueWurzel(fx); await zeigeBestellen(w, { route: route('wartung'), me: me(), nav: 'push', daten: aboAntwort() })
+  assert.equal(fx.alle(w, 'details, dialog').length, 0); assert.ok(fx.finde(w, '#abo-order').textContent.includes('Zahlungspflichtig bestellen'))
+}))
+test('Bestellen: Angebot geht als offerId mit, Fehler der Bestellung machen den Knopf wieder frei', mit({ 'POST /api/abo/checkout': () => ({ status: 400, body: { error: 'Kaputt.' } }) }, async (fx) => {
+  const daten = aboAntwort({ offers: { hosting: null, wartung: angebot({ id: 'o7' }) } })
+  const w = neueWurzel(fx); await zeigeBestellen(w, { route: route('wartung'), me: me(), nav: 'push', daten })
+  await fx.klick(fx.finde(w, '#abo-terms')); await fx.klick(fx.finde(w, 'input[value="nach_frist"]')); await fx.klick(fx.finde(w, '#abo-buy')); await fx.ruhe()
+  assert.equal(fx.fetchLog.at(-1).body.offerId, 'o7'); assert.match(fx.text(w), /Kaputt\./); assert.equal(fx.finde(w, '#abo-buy').hasAttribute('disabled'), false)
+  assert.match(fx.text(w), /Erste Abbuchung am 30\.10\.2026: 25,00 €/)
+}))
+test('Bestellen: ohne Produkt oder bei Ausfall des Abos steht nur ein Satz', mit({ 'GET /api/abo': () => ({ status: 500, body: { error: 'x' } }) }, async (fx) => {
+  const w = neueWurzel(fx); await zeigeBestellen(w, { route: { bereich: 'vertraege', etage: 'bestellen', query: '' }, me: me(), nav: 'push', daten: aboAntwort() }); await fx.ruhe()
+  assert.equal(sichtbarerText(w), sichtbarerText('Die Online-Bestellung wird gerade eingerichtet – schreiben Sie uns gern im Chat.'))
+  const v = neueWurzel(fx); await zeigeBestellen(v, { route: route('hosting'), me: me(), nav: 'push' }); await fx.ruhe(); assert.match(fx.text(v), /Deine Verträge konnten gerade nicht geladen werden\./)
+}))