${svg('shop')}${pill[0]}
+ Webshop
+Dein eigener Online-Shop auf Deiner Website. Zahlungen gehen direkt auf Dein Stripe-Konto. ${esc(preis)} einmalig.
+ ${extra} + ${count} + ${action} +Lade…
Webshop
+Dein eigener Online-Shop auf deiner Website – Zahlungen gehen direkt auf dein Stripe-Konto.
+Lade…
Sobald deine Website angelegt ist, kannst du den Webshop anfragen.
' + else if (state === 'disabled') extra = 'Der Webshop ist für diese Website abgeschaltet. Deine Bestellungen kannst du noch ansehen.
' + const count = projects.length > 1 && active ? `aktiv für ${active} von ${projects.length} Websites
` : '' + return ` +${svg(icon)}Kommt bald
@@ -220,11 +268,12 @@ const soonTile = (icon, title, text) => `
export async function initFunktionen(root) {
if (!root) return
- const { projects = [], termine, features } = await request('/api/funktionen')
+ const { projects = [], termine, features, shop } = await request('/api/funktionen')
root.innerHTML = `
${newsTile(projects, newsOffer(features).price)}
${termine?.verfuegbar ? termineTile(projects, termine) : soonTile('calendar', 'Terminplaner', TERMINE_TEXT)}
+ ${shop?.verfuegbar ? shopTile(projects, features) : ''}
${analyseTile(projects)}
`
root.querySelector('[data-fn-tile="news"] .fn-tile-cta')?.addEventListener('click', (ev) => { selection.projectId = ev.currentTarget.dataset.project })
@@ -234,6 +283,11 @@ export async function initFunktionen(root) {
const body = document.getElementById('termine-body')
if (body) body.dataset.wunschProjekt = ev.currentTarget.dataset.project
})
+ // Die Webshop-Ansicht liest das gewaehlte Projekt aus ihrem Behaelter (shop.js, initShop)
+ root.querySelector('[data-fn-tile="shop"] .fn-tile-cta[data-project]')?.addEventListener('click', (ev) => {
+ const body = document.getElementById('webshop-body')
+ if (body) body.dataset.wunschProjekt = ev.currentTarget.dataset.project
+ })
if (termine?.verfuegbar) await showTermineCount(root, projects)
}
diff --git a/public/shop.css b/public/shop.css
new file mode 100644
index 0000000..b51904f
--- /dev/null
+++ b/public/shop.css
@@ -0,0 +1,9 @@
+/* Webshop im Kundenbereich (shop.js): Farben und Abstaende aus den Tokens von kundenbereich.css (.kb-page); nur Klassen mit sh-.
+ Task G1 legt nur die Verdrahtung an, die Oberflaeche (Reiter, Karten, Formulare) kommt mit G2 bis G6. */
+
+#view-webshop .kb-panel { max-width: none; }
+#view-webshop button:focus-visible, #view-webshop input:focus-visible, #view-webshop select:focus-visible, #view-webshop textarea:focus-visible,
+#view-webshop a:focus-visible { outline: 3px solid #d4b4ff; outline-offset: 2px; }
+
+.sh-info p { margin: 0 0 12px; line-height: 1.55; color: var(--kb-muted); }
+.sh-info p:last-child { margin-bottom: 0; }
diff --git a/public/shop.js b/public/shop.js
new file mode 100644
index 0000000..4cca57f
--- /dev/null
+++ b/public/shop.js
@@ -0,0 +1,16 @@
+/* Webshop im Kundenbereich (ES-Modul, wird von app.js erst beim Oeffnen der Ansicht #webshop geladen).
+ initShop(rootEl, { projectId }): Platzhalter, bis die Huelle mit Anfrage, Bestellseite und Reitern steht (Task G2).
+ Fremdtext kommt nur ueber textContent in die Seite. Styles: shop.css. */
+
+export function initShop(root, { projectId } = {}) {
+ if (!root) return
+ const wunsch = root.dataset?.wunschProjekt || projectId || ''
+ if (root.dataset && root.dataset.wunschProjekt) delete root.dataset.wunschProjekt
+ const panel = document.createElement('div')
+ panel.className = 'kb-panel sh-info'
+ if (wunsch) panel.dataset.projekt = wunsch
+ const text = document.createElement('p')
+ text.textContent = 'Webshop wird geladen …'
+ panel.append(text)
+ root.replaceChildren(panel)
+}
diff --git a/server/routes/funktionen.js b/server/routes/funktionen.js
index 9a9ce51..7f4e86b 100644
--- a/server/routes/funktionen.js
+++ b/server/routes/funktionen.js
@@ -17,6 +17,7 @@ import {
} from '../services/siteFeatures.js'
import { nachweisTexte, speichereZustimmung, zustimmungFuerSitzung, zustimmungsfassungen } from '../services/featureConsents.js'
import { termineFuerKunde } from '../services/termine/schalter.js'
+import { shopFuerKunde } from '../services/shop/schalter.js'
import { aboMemo } from '../services/aboStatus.js'
import { featureConfig, featureHaken, featureKeys, featureSperre, oeffentlicheAnsicht } from '../services/featureRegistry.js'
import { aboMeldung, bestellFehler, istFortsetzen, pruefeAbo, pruefeZustimmung } from '../services/featureOrder.js'
@@ -173,6 +174,9 @@ router.get('/', requireSession, async (req, res) => {
// Terminplaner: Schalter TERMINE_ENABLED (off | pilot | on); nur wenn verfuegbar zeigt das Portal die Kachel, dann auch
// mit dem Abo des Kunden (bestellbar, grund) und dem Preis des Registers
termine: await termineAngebot(req.session.email, customerId),
+ // Webshop: Schalter SHOP_ENABLED (off | pilot | on); nur wenn verfuegbar zeigt das Portal die Kachel; Anfrage und Zustand je Projekt
+ // kommen aus projects[].features.shop und GET /api/shop/status
+ shop: { verfuegbar: shopFuerKunde(req.session.email) },
})
} catch (err) {
fail(res, err, 'Die Funktionen konnten gerade nicht geladen werden. Bitte lade die Seite gleich noch einmal.')
diff --git a/test/funktionBestellenKey.test.js b/test/funktionBestellenKey.test.js
new file mode 100644
index 0000000..3519b12
--- /dev/null
+++ b/test/funktionBestellenKey.test.js
@@ -0,0 +1,82 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { installFakeDom } from './support/fakeDom.js'
+import { h } from '../public/termine-dom.js'
+import * as bestellen from '../public/funktion-bestellen.js'
+
+// public/funktion-bestellen.js, Task G1: Checkout-Pfad und Zusammenfassung sind Parameter (key, zusammenfassung); ohne sie bleibt alles
+// beim Terminplaner. Ohne Server und ohne den schweren Fragebogen-Test: die Bestellung ist von Hand gebaut.
+
+const URL_ZAHLUNG = 'https://checkout.stripe.test/c/pay/cs_test_9'
+const mitDom = (optionen, fn) => async () => {
+ const fx = installFakeDom(optionen)
+ try {
+ await fn(fx)
+ } finally {
+ fx.restore()
+ }
+}
+const bestellung = () => ({
+ preis: '299 €',
+ preisHinweis: 'einmalig, ohne Umsatzsteuer gemäß § 19 UStG',
+ consent: { version: 'v-shop', knopf: 'Zahlungspflichtig bestellen', items: [{ id: 'a', text: 'Ich stimme zu.', haken: true }, { id: 'b', text: 'Hinweis', haken: false }] },
+})
+const daten = () => ({ kundenansicht: false, offen: [], bestellung: bestellung(), einstellung: {}, fragebogen: {}, branchen: [] })
+
+async function bestelleUndGibLog(fx, optionen) {
+ const wurzel = h('div')
+ document.body.append(wurzel)
+ bestellen.renderBestellen(wurzel, { ctx: { projectId: 'p1', aktuell: () => true }, daten: daten(), ...optionen })
+ await fx.klick(fx.finde(wurzel, 'input[type="checkbox"]'))
+ await fx.klick(fx.finde(wurzel, '[data-aktion="bestellen"]'))
+ await fx.ruhe()
+ return { wurzel, log: fx.fetchLog }
+}
+
+test('renderBestellen mit key "shop": Checkout geht an /api/funktionen/shop/checkout, Körper unverändert', mitDom({ antworten: [{ body: { url: URL_ZAHLUNG } }] }, async (fx) => {
+ const { log } = await bestelleUndGibLog(fx, { key: 'shop' })
+ assert.deepEqual(log, [{ method: 'POST', url: '/api/funktionen/shop/checkout', body: { projectId: 'p1', zustimmung: { version: 'v-shop', haken: ['a'] } } }])
+ assert.equal(fx.window.location.href, URL_ZAHLUNG)
+}))
+
+test('renderBestellen ohne key: weiter /api/funktionen/termine/checkout; ein unzulässiger key fällt darauf zurück', mitDom({ antworten: [{ body: { url: URL_ZAHLUNG } }] }, async (fx) => {
+ const { log } = await bestelleUndGibLog(fx, {})
+ assert.equal(log[0].url, '/api/funktionen/termine/checkout')
+}))
+test('renderBestellen: ein key mit Pfadzeichen wird nie in den Pfad übernommen', mitDom({ antworten: [{ body: { url: URL_ZAHLUNG } }] }, async (fx) => {
+ const { log } = await bestelleUndGibLog(fx, { key: '../abo/x?y' })
+ assert.equal(log[0].url, '/api/funktionen/termine/checkout')
+}))
+
+test('renderBestellen: ohne Zusammenfassungsfunktion (key shop) kein Zusammenfassungsblock; mit Funktion werden ihre Gruppen gezeichnet', mitDom({}, async (fx) => {
+ const ohne = h('div')
+ document.body.append(ohne)
+ bestellen.renderBestellen(ohne, { ctx: { projectId: 'p1' }, daten: daten(), key: 'shop' })
+ assert.equal(fx.finde(ohne, '.tm-bestellen-zusammenfassung'), null)
+ assert.ok(fx.finde(ohne, '[data-aktion="bestellen"]'), 'Preis, Zustimmungen und Knopf bleiben')
+
+ const mit = h('div')
+ document.body.append(mit)
+ const aufrufe = []
+ bestellen.renderBestellen(mit, {
+ ctx: { projectId: 'p1' }, daten: daten(), key: 'shop',
+ zusammenfassung: (...args) => { aufrufe.push(args.length); return [{ schritt: 'artikel', titel: 'Artikel', zeilen: ['3 Artikel'] }] },
+ })
+ assert.equal(aufrufe.length, 1)
+ assert.ok(fx.finde(mit, '.tm-bestellen-zusammenfassung'))
+ assert.match(fx.text(fx.finde(mit, '.tm-bestellen-gruppe')), /Artikel/)
+}))
+
+test('statusKarte: key und name steuern Fortsetzen-Pfad und Texte; ohne Angaben bleibt es der Terminplaner', mitDom({ antworten: [{ body: { url: URL_ZAHLUNG } }] }, async (fx) => {
+ const shop = bestellen.statusKarte({ projekt: { projectId: 'p1' }, bestellung: { state: 'setup' }, key: 'shop', name: 'Webshop' })
+ assert.match(fx.text(shop), /Wir richten deinen Webshop ein/)
+ assert.doesNotMatch(fx.text(shop), /Terminplaner/)
+ const termine = bestellen.statusKarte({ projekt: { projectId: 'p1' }, bestellung: { state: 'setup' } })
+ assert.match(fx.text(termine), /Wir richten deinen Terminplaner ein/)
+
+ const offen = bestellen.statusKarte({ projekt: { projectId: 'p1' }, bestellung: { state: 'ordered' }, key: 'shop', name: 'Webshop' })
+ document.body.append(offen)
+ await fx.klick(fx.finde(offen, '[data-aktion="fortsetzen"]'))
+ await fx.ruhe()
+ assert.deepEqual(fx.fetchLog, [{ method: 'POST', url: '/api/funktionen/shop/checkout', body: { projectId: 'p1', fortsetzen: true } }])
+}))
diff --git a/test/funktionenRoutes.test.js b/test/funktionenRoutes.test.js
index 835b876..405c681 100644
--- a/test/funktionenRoutes.test.js
+++ b/test/funktionenRoutes.test.js
@@ -67,6 +67,8 @@ test('liste_zustaende', async () => {
// Terminplaner: zweite Funktion je Projekt, Schalter TERMINE_ENABLED (Vorgabe off) - Einzelheiten in funktionenTermine.test.js
for (const p of body.projects) assert.equal(p.features.termine.state, 'off')
assert.deepEqual(body.termine, { verfuegbar: false })
+ // Webshop: Schalter SHOP_ENABLED (Vorgabe off) ⇒ nur das Flag, keine weiteren Felder
+ assert.deepEqual(body.shop, { verfuegbar: false })
// Register-Ansicht (B12): Preise und Bestelltexte beider Funktionen aus config.features, auch bei termine.verfuegbar: false
assert.deepEqual(Object.keys(body.features).sort(), ['news', 'shop', 'termine'])
diff --git a/test/funktionenTiles.test.js b/test/funktionenTiles.test.js
index c835872..33410db 100644
--- a/test/funktionenTiles.test.js
+++ b/test/funktionenTiles.test.js
@@ -488,3 +488,79 @@ test('Ausschalten: Hinweis vorher, nach "Ja, ausschalten" Bestätigung, erst "OK
ok.handlers.click()
assert.equal(reloads, 1)
})
+
+// ---- Webshop-Kachel (Task G1): nur bei shop.verfuegbar, Pille und Knopf nach dem Zustand des Funktionsdokuments
+const shopProject = (id, state, extra = {}) => ({ projectId: id, projectName: `P ${id}`, liveUrl: '', features: { news, shop: { state, ...extra } }, analyse: { comingSoon: true } })
+
+test('Webshop-Kachel: ohne shop.verfuegbar (fehlt, false) gar keine Kachel', async () => {
+ for (const extra of [{}, { shop: { verfuegbar: false } }, { shop: {} }, { shop: null }]) {
+ const html = await renderMit([shopProject('a', 'off')], extra)
+ assert.doesNotMatch(html, /data-fn-tile="shop"/, JSON.stringify(extra))
+ assert.doesNotMatch(html, /Webshop/, JSON.stringify(extra))
+ }
+})
+
+test('Webshop-Kachel: Text mit Preis, Knopf und Pille je Zustand, Ziel #webshop mit Projekt', async () => {
+ const faelle = [
+ ['off', 'Webshop anfragen', 'Aus', 'off'],
+ ['ordered', 'Zahlung offen', 'Zahlung offen', 'setup'],
+ ['setup', 'In Einrichtung', 'In Einrichtung', 'setup'],
+ ['active', 'Webshop öffnen', 'Aktiv', 'on'],
+ ['disabled', 'Webshop ansehen', 'Abgeschaltet', 'off'],
+ ]
+ for (const [state, knopf, pille, klasse] of faelle) {
+ const html = await renderMit([shopProject('p1', state)], { shop: { verfuegbar: true } })
+ const t = tile(html, 'shop')
+ assert.match(t, /