Kundenansicht neu P7: gemeinsame Bausteine der Bestellseiten (Block, Linkzeile, Kundenart-Zeile)

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

public/neu/ansichten.css

@@ -316,6 +316,26 @@
 .kn .ab-portal .ab-knopf:focus-visible, .kn .ab-portal .ab-link:focus-visible { outline: 2px solid var(--ab-fokus); outline-offset: 2px; }
 .kn .ab-portal .ab-notiz, .kn .ab-portal .ab-gesperrt { margin: 12px 0 0; font-size: 13px; color: var(--ab-weich); }
 
+/* ------------------------------------------------------------------ P7 Bestellseiten (Abo, Wechsel, Speicher, Gutschrift) --- */
+/* Muster der Spec 5.6: Block „Was du bestellst“, eine Linkzeile, ein Haken nur für Privatkunden, der Knopf, die Kundenart-Zeile.
+   Alles liegt ohne Klappe und ohne Scrollbereich hintereinander. */
+.kn-bestellen { max-width: 640px; }
+.kn-block { margin: 0 0 16px; }
+.kn-block-zeile { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--kn-line); }
+.kn-block-zeile:last-child { border-bottom: 1px solid var(--kn-line); }
+.kn-block dt { color: var(--kn-text-2); }
+.kn-block dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.kn-linkzeile { margin: 0 0 12px; font-size: 13px; line-height: 20px; color: var(--kn-text-2); }
+.kn-linkzeile a, .kn-kundenart-zeile a { color: var(--kn-text); text-decoration: underline; text-decoration-color: var(--kn-line-strong); text-underline-offset: 3px; }
+.kn-linkzeile a:hover, .kn-kundenart-zeile a:hover { text-decoration-color: currentColor; }
+.kn-kundenart-zeile { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--kn-text-2); }
+.kn-bestellen .kn-check { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; margin: 0 0 12px; color: var(--kn-text); }
+.kn-bestellen .kn-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; }
+.kn-bestellen .kn-aktionen { margin-top: 0; }
+.kn-sperrzeile { margin: 0 0 12px; font-size: 13px; line-height: 20px; color: var(--kn-danger); }
+.kn-speicher-warnung { margin: 0 0 12px; font-size: 13px; line-height: 20px; color: var(--kn-orange-fg); }
+.kn-gutschrift-bedingungen { max-width: 640px; }
+
 /* ------------------------------------------------------------------ Handy --- */
 @media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
   .kn-projekt { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 0; }
@@ -331,6 +351,8 @@
   .kn-pw { max-width: none; }
   .kn-tk-feld input:not([type="checkbox"]):not([type="file"]) { height: 44px; font-size: 16px; }
   .kn-stepper .kn-knopf { min-width: 44px; }
+  .kn-block-zeile { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  .kn-bestellen .kn-knopf { width: 100%; min-height: 44px; }
   .kn .kn-chat .chat-bubble { max-width: 88%; }
   .kn .kn-chat .chat-messages { min-height: 240px; max-height: 55vh; }
   .kn .kn-chat .chat-input-row textarea { font-size: 16px; }

public/neu/bestell-bausteine.js

@@ -0,0 +1,82 @@
+/* Kundenansicht neu (P7): gemeinsame Bausteine der vier Bestellseiten (Abo bestellen, Wechsel, Zusatzspeicher, Gutschrift-Antrag).
+   Die Sätze kommen vom Server (GET /api/abo → bestelltexte); hier werden sie nur gezeichnet. Link-Texte stehen in der Vorlage in
+   eckigen Klammern, ihre Adressen daneben in urls. Jede Adresse läuft durch sicherLink; Kundentext wird nie als HTML gelesen.
+   Keine h1: den Titel meldet die Ansicht mit meldeTitel. */
+
+import { h } from './dom.js'
+import { K } from './ansicht-hilfen.js'
+
+/** 'unternehmen' | 'privat': nur exakt 'unternehmen' (me.customer.kundenartWirksam, sonst daten.kundenart) ist Betrieb; alles andere privat (E4). */
+export function kundenartVon(me, daten = null) {
+  return me?.customer?.kundenartWirksam === 'unternehmen' || daten?.kundenart === 'unternehmen' ? 'unternehmen' : 'privat'
+}
+
+/** Adresse nur, wenn sie ein Pfad auf derselben Herkunft ('/…', nicht '//…'), ein Anker ('#name…') oder http(s) ohne Zugangsdaten ist; sonst ''. */
+export function sicherLink(url) {
+  if (typeof url !== 'string' || url === '') return ''
+  if (/[\s\u0000-\u001f\u007f\\]/.test(url)) return ''
+  if (/^\/(?![/\\])/.test(url)) return url
+  if (/^#[a-z][\w-]*(\?[\w=&.%-]*)?$/i.test(url)) return url
+  if (/^https?:\/\/[^/?#]+/i.test(url)) {
+    try {
+      const u = new URL(url)
+      return u.hostname !== '' && u.username === '' && u.password === '' ? url : ''
+    } catch {
+      return ''
+    }
+  }
+  return ''
+}
+
+/**
+ * 'Es gilt [A] und [B].' mit ['/a', '/b'] → Teile [{ text }, { text, href? }]. Die Markierungen bekommen der Reihe nach ihre Adresse;
+ * eine unsichere oder fehlende Adresse macht den Teil zu einem Teil ohne href. Eine offene Klammer bleibt Text.
+ */
+export function linkTeile(text, urls) {
+  const basis = typeof text === 'string' ? text : ''
+  const adressen = Array.isArray(urls) ? urls : []
+  const teile = []
+  let ab = 0
+  let nr = 0
+  const muster = /\[([^\]]*)\]/g
+  for (let m = muster.exec(basis); m; m = muster.exec(basis)) {
+    if (m.index > ab) teile.push({ text: basis.slice(ab, m.index) })
+    const href = sicherLink(adressen[nr])
+    nr += 1
+    teile.push(href ? { text: m[1], href } : { text: m[1] })
+    ab = m.index + m[0].length
+  }
+  if (ab < basis.length) teile.push({ text: basis.slice(ab) })
+  return teile
+}
+
+const ausserhalb = (href) => !href.startsWith('#')
+
+/** <p id> mit den Links der Vorlage; '/…' und http(s) öffnen in neuem Tab (target _blank, rel noopener), '#…' bleibt im Fenster. */
+export function baueLinkzeile({ text, urls } = {}, { id } = {}) {
+  const kinder = linkTeile(text, urls).map((t) =>
+    t.href ? h('a', { href: t.href, ...(ausserhalb(t.href) ? { target: '_blank', rel: 'noopener' } : {}) }, t.text) : t.text)
+  return h('p', { id, class: 'kn-linkzeile' }, kinder)
+}
+
+/** <p id>: „Du bestellst als Betrieb“ | „Du bestellst privat“, ' · ', dann der Hinweis zur Korrektur mit seinem Link. */
+export function baueKundenartZeile(kundenart, texte, { id } = {}) {
+  const lage = kundenart === 'unternehmen' ? texte?.unternehmen : texte?.privat
+  const korrektur = linkTeile(texte?.korrektur?.text, texte?.korrektur?.urls).map((t) =>
+    t.href ? h('a', { href: t.href, ...(ausserhalb(t.href) ? { target: '_blank', rel: 'noopener' } : {}) }, t.text) : t.text)
+  return h('p', { id, class: 'kn-kundenart-zeile' }, lage, ' · ', korrektur)
+}
+
+/** Block „Was du bestellst“: zeilen [{ id?, label, text }] als Beschriftungsliste. Der Text ist immer Text. */
+export function baueBlock(zeilen, { id } = {}) {
+  return h('dl', { id, class: 'kn-block' }, (zeilen || []).map((z) => h('div', { class: 'kn-block-zeile' }, h('dt', null, z.label), h('dd', { id: z.id }, z.text))))
+}
+
+/** true, wenn die Antwort den Wortlaut trägt: status, knopf und die Linkzeile des Abos. Ohne ihn zeigt keine Seite einen Bestellknopf. */
+export function hatWortlaut(daten) {
+  const t = daten?.bestelltexte
+  return Boolean(t && typeof t === 'object' && typeof t.status === 'string' && t.status && typeof t.knopf === 'string' && t.knopf
+    && typeof t.abo?.linkzeile?.text === 'string' && t.abo.linkzeile.text)
+}
+
+export { K }