Kundenansicht neu P7: Bestellseite schlank (Block, Linkzeile, Häkchen nur privat)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
fcf357c0b7
commit
c6ecb5242c
2 files changed
+254
-120
No files matched your search
@@ -1,17 +1,21 @@
|
||||
/* 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. */
|
||||
/* Kundenansicht neu (P7): Bestellseite je Abo (#bestellen-hosting, #bestellen-wartung) im schlanken Muster der Spec 5.6, Fassung 6.
|
||||
Reihenfolge ohne Klappe und ohne Scrollbereich: Block „Was du bestellst“, eine Linkzeile, bei Privatkunden ein Häkchen, der Knopf
|
||||
„Zahlungspflichtig bestellen“ (§ 312j BGB: Kerninfo und Knopf auf demselben Bildschirm), darunter die Kundenart-Zeile.
|
||||
Die Sätze (Linkzeile, Häkchen, Kundenart-Zeile) kommen vom Server (GET /api/abo → bestelltexte). Der Server entscheidet die Kundenart selbst:
|
||||
der Client sendet nie kundenart oder startChoice, bei Privatkunden nur earlyStart (das Häkchen) und den gezeigten Leistungsbeginn.
|
||||
Der Titel kommt von der Hülle (meldeTitel); die Seite hat keine eigene h1. */
|
||||
|
||||
import { api } from './api.js'
|
||||
import { h, leeren } from './dom.js'
|
||||
import { K, ladeAbo, sichereAdresse, meldeTitel, fmtEuro, fmtDatum, ABO_NICHT_GELADEN } from './ansicht-hilfen.js'
|
||||
import { baueBlock, baueKundenartZeile, baueLinkzeile, hatWortlaut, kundenartVon } from './bestell-bausteine.js'
|
||||
|
||||
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)
|
||||
const TEXT_NICHT_VERFUEGBAR = 'Die Online-Bestellung wird gerade eingerichtet – schreib uns gern im Chat.'
|
||||
const TEXT_ZAHLUNGSSEITE = 'Die Zahlungsseite konnte nicht geöffnet werden. Bitte versuche es später noch einmal.'
|
||||
const KNOPF = 'Zahlungspflichtig bestellen'
|
||||
const UST = 'gemäß § 19 UStG ohne Umsatzsteuer'
|
||||
|
||||
/** 'hosting' | 'wartung' aus der Route, sonst aus dem Hash (#bestellen-hosting), sonst ''. */
|
||||
export function produktAusRoute(route, hash = (typeof window !== 'undefined' ? window.location?.hash : '') || '') {
|
||||
@@ -22,106 +26,120 @@ export function produktAusRoute(route, hash = (typeof window !== 'undefined' ? w
|
||||
|
||||
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
|
||||
/** Preiszeile und Betrag der ersten Abbuchung aus Katalog und Angebot (während des Rabatts der Angebotspreis, sonst der Katalogpreis). */
|
||||
function preise(product, offer) {
|
||||
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 mitZahlen = Boolean(offer) && Number.isFinite(offerMonthly) && offer.monthlyPriceCents != null && offerMonths > 0
|
||||
const preis = fmtEuro(product.amountCents / 100)
|
||||
const preisZeile = !offer
|
||||
? `${preis} pro Monat (Gesamtpreis, ${UST}), keine weiteren Kosten`
|
||||
: mitZahlen
|
||||
? `${fmtEuro(offerMonthly / 100)} pro Monat für die ersten ${offerMonths} Monate, danach ${fmtEuro(offerRegular / 100)} pro Monat (individuelles Angebot: ${offer.text}; Gesamtpreis, ${UST}), keine weiteren Kosten`
|
||||
: `${preis} pro Monat (individuelles Angebot: ${offer.text}; Gesamtpreis, ${UST}), keine weiteren Kosten`
|
||||
return { preisZeile, erste: fmtEuro((mitZahlen ? offerMonthly : product.amountCents) / 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 })
|
||||
/** Texte der Zeilen „Fällig“ und „Beginn“ je nach Lage: sofort (Betrieb), sofort auf Wunsch (Privat mit Häkchen), nach der Frist (Privat ohne). */
|
||||
function faelligBeginn({ lage, erste, frist }) {
|
||||
if (lage === 'frist') {
|
||||
return {
|
||||
faellig: `Erste Abbuchung am ${frist || 'Ende der 14-tägigen Widerrufsfrist'}: ${erste} (${UST}); heute wird nichts abgebucht`,
|
||||
beginn: `nach Ablauf der 14-tägigen Widerrufsfrist${frist ? ` (am ${frist})` : ''}; bis dahin keine Leistung und keine Abbuchung`,
|
||||
}
|
||||
}
|
||||
return {
|
||||
faellig: `Heute fällig: ${erste} (${UST})`,
|
||||
beginn: lage === 'wunsch' ? 'sofort, auf deinen ausdrücklichen Wunsch vor Ablauf der Widerrufsfrist' : 'sofort',
|
||||
}
|
||||
}
|
||||
|
||||
function angebotAbschnitt(offer) {
|
||||
if (!offer) return null
|
||||
return h('section', { class: 'kn-angebot-kasten', id: 'abo-angebot' },
|
||||
h('h2', null, 'Dein persönliches Angebot'),
|
||||
h('p', null, `${offer.text}. Du sparst ${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`))
|
||||
}
|
||||
|
||||
function leistungenAbschnitt(product) {
|
||||
return h('section', { class: 'kn-panel', id: 'abo-leistungen' },
|
||||
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 kannst du eine Übernahmegutschrift beantragen – wir rechnen die doppelt bezahlte Zeit anteilig an.'))
|
||||
}
|
||||
|
||||
function bestellung(daten, productKey, { viewAs, kundenart }) {
|
||||
const product = produktVon(daten, productKey)
|
||||
const T = daten.bestelltexte
|
||||
const offer = daten.offers?.[productKey] || null
|
||||
const privat = kundenart !== 'unternehmen'
|
||||
const frist = daten.lateStartAt ? fmtDatum(daten.lateStartAt) : ''
|
||||
const { preisZeile, erste } = preise(product, offer)
|
||||
// Betrieb: sofort, ohne Auswahl. Privat und leer: ohne Häkchen nach der Frist, mit Häkchen sofort.
|
||||
const start = faelligBeginn({ lage: privat ? 'frist' : 'sofort', erste, frist })
|
||||
|
||||
const block = baueBlock([
|
||||
{ label: 'Leistung', text: `${product.name}: ${(product.features || []).map(([t]) => t).join(', ')}` },
|
||||
{ label: 'Preis', text: preisZeile },
|
||||
{ id: 'abo-due-summary', label: 'Fällig', text: start.faellig },
|
||||
{ id: 'abo-start-summary', label: 'Beginn', text: start.beginn },
|
||||
{ label: 'Laufzeit', text: `Mindestlaufzeit ${product.minTermMonths} Monate ab Leistungsbeginn, kündbar zum Ende der Mindestlaufzeit bis einen Monat vorher; danach jederzeit zum Ende des Abrechnungsmonats kündbar` },
|
||||
{ label: 'Zahlung', text: 'Kreditkarte oder SEPA-Lastschrift über Stripe; die Zahlungsart hinterlegst du im nächsten Schritt, bis zum Abschluss dort kannst du abbrechen' },
|
||||
], { id: 'abo-block' })
|
||||
|
||||
const haken = privat ? h('input', { type: 'checkbox', id: 'abo-beginn', disabled: viewAs }) : null
|
||||
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 kaufen = h('button', { type: 'button', class: K.primaer, id: 'abo-buy', disabled: viewAs }, T.knopf || KNOPF)
|
||||
const zeigeFehler = (text) => { fehler.textContent = text; fehler.hidden = false }
|
||||
|
||||
const rootInfo = h('div', { class: 'kn-panel', id: 'abo-order' },
|
||||
h('h3', null, 'Ihre Bestellung'),
|
||||
const abschnitt = h('section', { class: 'kn-panel kn-bestellen', id: 'abo-order' },
|
||||
h('h2', null, 'Was du bestellst'),
|
||||
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'))),
|
||||
block,
|
||||
baueLinkzeile(T.abo.linkzeile, { id: 'abo-linkzeile' }),
|
||||
haken ? h('label', { class: K.check }, haken, h('span', { id: 'abo-beginn-text' }, T.abo.haken)) : null,
|
||||
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))
|
||||
h('div', { class: 'kn-aktionen' }, kaufen, viewAs ? h('span', { class: K.meldung }, TEXT_SPERRE) : null),
|
||||
baueKundenartZeile(kundenart, T.kundenart, { id: 'abo-kundenart' }))
|
||||
|
||||
// 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`
|
||||
}))
|
||||
// Das Häkchen schaltet die Zeilen „Fällig“ und „Beginn“ um
|
||||
haken?.addEventListener('change', () => {
|
||||
const neu = faelligBeginn({ lage: haken.checked ? 'wunsch' : 'frist', erste, frist })
|
||||
abschnitt.querySelector('#abo-due-summary').textContent = neu.faellig
|
||||
abschnitt.querySelector('#abo-start-summary').textContent = neu.beginn
|
||||
})
|
||||
|
||||
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 {
|
||||
// Der Klick auf den Knopf ist die Zustimmung (acceptTerms). Nie kundenart oder startChoice: den Beginn bestimmt der Server aus der Kundenart.
|
||||
const { url } = await api('/api/abo/checkout', {
|
||||
method: 'POST',
|
||||
body: { productKey, acceptTerms, startChoice, termsVersion: daten.termsVersion, offerId: offer?.id || '', lateStartAt: daten.lateStartAt || '' },
|
||||
body: {
|
||||
productKey,
|
||||
acceptTerms: true,
|
||||
termsVersion: daten.termsVersion,
|
||||
offerId: offer?.id || '',
|
||||
...(privat ? { earlyStart: haken.checked, lateStartAt: daten.lateStartAt || '' } : {}),
|
||||
},
|
||||
})
|
||||
const ziel = sichereAdresse(url)
|
||||
if (!ziel) throw new Error('Die Zahlungsseite konnte nicht geöffnet werden. Bitte später noch einmal versuchen.')
|
||||
if (!ziel) throw new Error(TEXT_ZAHLUNGSSEITE)
|
||||
window.location.href = ziel
|
||||
} catch (f) {
|
||||
zeigeFehler(f.message)
|
||||
kaufen.disabled = false
|
||||
kaufen.textContent = 'Zahlungspflichtig bestellen'
|
||||
kaufen.textContent = T.knopf || KNOPF
|
||||
}
|
||||
})
|
||||
|
||||
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]
|
||||
return [angebotAbschnitt(offer), leistungenAbschnitt(product), abschnitt]
|
||||
}
|
||||
|
||||
/** Bestellseite. Das Produkt kommt aus route.produkt, hilfsweise aus dem Hash; daten (GET /api/abo) ist optional. */
|
||||
@@ -136,9 +154,10 @@ export async function zeigeBestellen(wurzel, { route, me, nav, daten } = {}) {
|
||||
const key = produktAusRoute(route)
|
||||
const product = key ? produktVon(stand, key) : null
|
||||
if (key) meldeTitel(wurzel, labelVon(stand, key))
|
||||
if (!product || !stand.available) {
|
||||
// Ohne Wortlaut vom Server gibt es keinen Bestellknopf
|
||||
if (!product || !stand.available || !hatWortlaut(stand)) {
|
||||
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))
|
||||
leeren(wurzel).append(...bestellung(stand, key, { viewAs: me?.viewAs === true, kundenart: kundenartVon(me, stand) }).filter(Boolean))
|
||||
}
|
||||
Reference in new issue
Block a user