Shop G6: Reiter Einstellungen und Rechtliches (Felder, Versand, Zahlungsarten, Muster einsetzen, Entwurf, Bestätigung mit Hash)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
3ed96a5838
commit
648d0e07fe
5 files changed
+1148
-10
No files matched your search
@@ -1,8 +1,256 @@
|
||||
/* Webshop, Reiter „Einstellungen“: Platzhalter, bis der Reiter gebaut ist (Plan Block G, Tasks G3 bis G6 ersetzen diese Datei).
|
||||
render(panel, ctx): ctx = { projectId, status, nurLesen, stripeRueckkehr, neuLaden(), zeigeMeldung(text, art), request } (siehe shop.js). */
|
||||
/* Webshop, Reiter „Einstellungen“ (Plan Block G, Task G6): Shopname und Akzentfarbe, Anbieter, Steuer, Versand, Abholung, Lieferzeit,
|
||||
Mindestbestellwert, Ruecksendekosten und Zahlungsarten.
|
||||
Schnittstelle (server/routes/shop.js): GET /api/shop/einstellungen?projectId= => { einstellungen, version, vollstaendig } und
|
||||
PUT /api/shop/einstellungen { projectId, einstellungen, version } => dasselbe; ein Konflikt (409, EINSTELLUNG_VERALTET) heisst: jemand
|
||||
hat zwischendurch gespeichert, dann zeigt der Reiter den Text und „Neu laden“. Geprueft wird auf dem Server (server/services/shop/
|
||||
einstellungen.js); dessen Feldfehler tragen Pfade wie 'anbieter.plz' oder 'versand.kostenCent.AT' und stehen am Feld (data-feld).
|
||||
Betraege werden hier in ganze Cent umgerechnet (euroEingabe), unlesbare Betraege werden schon im Browser gemeldet.
|
||||
render(panel, ctx): ctx = { projectId, nurLesen, zeigeMeldung(text, art), neuLaden(), request } (siehe shop.js).
|
||||
Text kommt nur ueber textContent in die Seite (h), nie ueber innerHTML. */
|
||||
|
||||
import { h } from './shop-dom.js'
|
||||
import { abschnitt, allgemeinerFehler, centZuEuro, euroEingabe, feld, h, hakenFeld, request, setzeFehler, zeigeFehler } from './shop-dom.js'
|
||||
|
||||
export function render(panel) {
|
||||
panel.replaceChildren(h('p', { class: 'sh-hinweis' }, 'Kommt gleich …'))
|
||||
const LAENDER = [['DE', 'Deutschland'], ['AT', 'Österreich']]
|
||||
const VERSAND_ZIELE = [['DE', 'Nur Deutschland'], ['DE,AT', 'Deutschland und Österreich']]
|
||||
const RUECKSENDUNG = [['kaeufer', 'Der Käufer trägt die Kosten der Rücksendung'], ['haendler', 'Ich trage die Kosten der Rücksendung']]
|
||||
|
||||
export const SEPA_WARNUNG = 'Bei Lastschrift ist das Geld erst nach einigen Tagen sicher. Versende erst, wenn die Bestellung als bezahlt markiert ist.'
|
||||
export const STRIPE_HINWEIS = 'Schalte Klarna oder Lastschrift nur ein, wenn sie in deinem Stripe-Konto aktiviert sind.'
|
||||
export const PAYPAL_HINWEIS = 'PayPal ist über Stripe für Shops wie deinen leider nicht möglich.'
|
||||
export const ANBIETER_HINWEIS = 'Diese Angaben erscheinen im Shop, in der Bestellbestätigung und in der Widerrufsbelehrung.'
|
||||
|
||||
const text = (wert) => (typeof wert === 'string' ? wert : '')
|
||||
|
||||
const textfeld = (optionen = {}) => h('input', { type: 'text', autocomplete: 'off', ...optionen })
|
||||
const auswahl = (liste) => h('select', null, liste.map(([wert, name]) => h('option', { value: wert }, name)))
|
||||
|
||||
export async function render(panel, ctx = {}) {
|
||||
const projectId = ctx.projectId
|
||||
const aufruf = ctx.request || request
|
||||
const nurLesen = ctx.nurLesen === true
|
||||
const antwort = await aufruf(`/api/shop/einstellungen?projectId=${encodeURIComponent(projectId)}`)
|
||||
let version = Number.isInteger(antwort?.version) ? antwort.version : 0
|
||||
|
||||
/* ----------------------------------------------------------------- Felder --- */
|
||||
const shopname = textfeld({ maxlength: 80 })
|
||||
const akzent = h('input', { type: 'color' })
|
||||
|
||||
const anbieterName = textfeld({ maxlength: 120, autocomplete: 'organization' })
|
||||
const strasse = textfeld({ maxlength: 120, autocomplete: 'street-address' })
|
||||
const plz = textfeld({ maxlength: 10, inputmode: 'numeric', autocomplete: 'postal-code' })
|
||||
const ort = textfeld({ maxlength: 80, autocomplete: 'address-level2' })
|
||||
const land = auswahl(LAENDER)
|
||||
const email = h('input', { type: 'email', maxlength: 254, autocomplete: 'email' })
|
||||
const telefon = h('input', { type: 'tel', maxlength: 40, autocomplete: 'tel' })
|
||||
const ustId = textfeld({ maxlength: 20, placeholder: 'DE123456789' })
|
||||
|
||||
const kleinunternehmer = h('input', { type: 'checkbox' })
|
||||
|
||||
const versandAktiv = h('input', { type: 'checkbox' })
|
||||
const laender = auswahl(VERSAND_ZIELE)
|
||||
const kostenDE = euroEingabe()
|
||||
const kostenAT = euroEingabe()
|
||||
const freiAb = euroEingabe()
|
||||
|
||||
const abholungAktiv = h('input', { type: 'checkbox' })
|
||||
const abholAdresse = h('textarea', { rows: 3, maxlength: 300 })
|
||||
const abholHinweis = h('textarea', { rows: 3, maxlength: 300 })
|
||||
|
||||
const lieferzeit = textfeld({ maxlength: 80, placeholder: '2–4 Werktage' })
|
||||
const mindest = euroEingabe()
|
||||
const rueck = auswahl(RUECKSENDUNG)
|
||||
|
||||
// Karte (mit Apple Pay und Google Pay) ist immer dabei und nicht abwaehlbar
|
||||
const karte = h('input', { type: 'checkbox', disabled: true })
|
||||
karte.checked = true
|
||||
const klarna = h('input', { type: 'checkbox' })
|
||||
const sepa = h('input', { type: 'checkbox' })
|
||||
|
||||
/* ----------------------------------------------------------- Aufbau/Fuellen --- */
|
||||
const versandAt = h('div', { class: 'sh-versand-at' }, feld('versand.kostenCent.AT', 'Versandkosten Österreich (€)', kostenAT))
|
||||
const versandDetails = h('div', { class: 'sh-versand-details' },
|
||||
feld('versand.laender', 'Wohin lieferst du?', laender),
|
||||
feld('versand.kostenCent.DE', 'Versandkosten Deutschland (€)', kostenDE),
|
||||
versandAt,
|
||||
feld('versand.freiAbCent', 'Versandkostenfrei ab (€, freiwillig)', freiAb, 'Ab diesem Warenwert zahlen deine Kunden keinen Versand. Leer lassen, wenn es das nicht geben soll.'))
|
||||
const abholDetails = h('div', { class: 'sh-abhol-details' },
|
||||
feld('abholung.adresse', 'Abholadresse', abholAdresse, 'Hier können deine Kunden die Ware abholen.'),
|
||||
feld('abholung.hinweis', 'Hinweis zur Abholung (freiwillig)', abholHinweis, 'Zum Beispiel deine Öffnungszeiten.'))
|
||||
|
||||
const zeigeTeile = () => {
|
||||
versandDetails.hidden = !versandAktiv.checked
|
||||
versandAt.hidden = laender.value !== 'DE,AT'
|
||||
abholDetails.hidden = !abholungAktiv.checked
|
||||
}
|
||||
|
||||
/** Felder aus einem Stand des Servers fuellen (Standardwerte fuer alles, was fehlt). */
|
||||
function fuelle(e) {
|
||||
const s = e && typeof e === 'object' ? e : {}
|
||||
const a = s.anbieter || {}
|
||||
const v = s.versand || {}
|
||||
const ab = s.abholung || {}
|
||||
const kosten = v.kostenCent || {}
|
||||
shopname.value = text(s.shopname)
|
||||
akzent.value = /^#[0-9a-fA-F]{6}$/.test(text(s.akzent)) ? s.akzent : '#111111'
|
||||
anbieterName.value = text(a.name)
|
||||
strasse.value = text(a.strasse)
|
||||
plz.value = text(a.plz)
|
||||
ort.value = text(a.ort)
|
||||
land.value = a.land === 'AT' ? 'AT' : 'DE'
|
||||
email.value = text(a.email)
|
||||
telefon.value = text(a.telefon)
|
||||
ustId.value = text(a.ustId)
|
||||
kleinunternehmer.checked = s.kleinunternehmer !== false
|
||||
versandAktiv.checked = v.aktiv !== false
|
||||
laender.value = Array.isArray(v.laender) && v.laender.includes('AT') ? 'DE,AT' : 'DE'
|
||||
kostenDE.value = centZuEuro(kosten.DE)
|
||||
kostenAT.value = centZuEuro(kosten.AT)
|
||||
freiAb.value = centZuEuro(v.freiAbCent)
|
||||
abholungAktiv.checked = ab.aktiv === true
|
||||
abholAdresse.value = text(ab.adresse)
|
||||
abholHinweis.value = text(ab.hinweis)
|
||||
lieferzeit.value = text(s.lieferzeit)
|
||||
mindest.value = centZuEuro(s.mindestbestellCent)
|
||||
rueck.value = s.ruecksendekosten === 'haendler' ? 'haendler' : 'kaeufer'
|
||||
const zahl = Array.isArray(s.zahlungsarten) ? s.zahlungsarten : ['card']
|
||||
klarna.checked = zahl.includes('klarna')
|
||||
sepa.checked = zahl.includes('sepa_debit')
|
||||
zeigeTeile()
|
||||
}
|
||||
fuelle(antwort?.einstellungen)
|
||||
|
||||
versandAktiv.addEventListener('change', zeigeTeile)
|
||||
laender.addEventListener('change', zeigeTeile)
|
||||
abholungAktiv.addEventListener('change', zeigeTeile)
|
||||
|
||||
const speichern = h('button', { type: 'submit', class: 'kb-btn-primary', 'data-aktion': 'einstellungen-speichern' }, 'Einstellungen speichern')
|
||||
const konfliktPlatz = h('div', { 'data-konflikt-platz': '' })
|
||||
const zeigeKonflikt = (meldung) => konfliktPlatz.replaceChildren(h('div', { class: 'sh-box sh-box-warn', role: 'alert', 'data-konflikt': '' },
|
||||
h('span', null, meldung),
|
||||
h('button', {
|
||||
type: 'button',
|
||||
class: 'kb-btn-outline',
|
||||
'data-aktion': 'neu-laden',
|
||||
onclick: () => { render(panel, ctx).catch((err) => panel.replaceChildren(h('p', { class: 'sh-fehler', role: 'alert' }, err.message))) },
|
||||
}, 'Neu laden')))
|
||||
|
||||
const form = h('form', { class: 'sh-form sh-einstellungen', novalidate: true, 'aria-label': 'Einstellungen des Webshops' },
|
||||
abschnitt('Shop', null,
|
||||
feld('shopname', 'Shopname', shopname, 'So heißt dein Shop. Er steht im Shop und in den E-Mails an deine Kunden.'),
|
||||
feld('akzent', 'Akzentfarbe', akzent, 'Diese Farbe bekommen Knöpfe und Akzente in deinem Shop.')),
|
||||
abschnitt('Anbieter', ANBIETER_HINWEIS,
|
||||
feld('anbieter.name', 'Name oder Firma', anbieterName),
|
||||
feld('anbieter.strasse', 'Straße und Hausnummer', strasse),
|
||||
feld('anbieter.plz', 'Postleitzahl', plz),
|
||||
feld('anbieter.ort', 'Ort', ort),
|
||||
feld('anbieter.land', 'Land', land),
|
||||
feld('anbieter.email', 'E-Mail-Adresse', email),
|
||||
feld('anbieter.telefon', 'Telefon (freiwillig)', telefon),
|
||||
feld('anbieter.ustId', 'USt-IdNr. (freiwillig)', ustId, 'Zum Beispiel DE123456789. Lass das Feld leer, wenn du keine hast.')),
|
||||
abschnitt('Steuer', null,
|
||||
hakenFeld('kleinunternehmer', kleinunternehmer, 'Ich bin Kleinunternehmer nach § 19 UStG', 'Dann steht im Shop der Hinweis, dass keine Umsatzsteuer berechnet wird. Ohne Haken gelten deine Preise inklusive Umsatzsteuer.')),
|
||||
abschnitt('Versand', null,
|
||||
hakenFeld('versand.aktiv', versandAktiv, 'Ich versende Bestellungen'),
|
||||
versandDetails),
|
||||
abschnitt('Abholung', null,
|
||||
hakenFeld('abholung.aktiv', abholungAktiv, 'Kunden können Bestellungen abholen'),
|
||||
abholDetails),
|
||||
abschnitt('Lieferzeit und Rücksendung', null,
|
||||
feld('lieferzeit', 'Lieferzeit', lieferzeit, 'Pflichtangabe, zum Beispiel „2–4 Werktage“. Die Angabe steht im Shop und in der Bestellbestätigung.'),
|
||||
feld('mindestbestellCent', 'Mindestbestellwert (€, freiwillig)', mindest, 'Leer lassen, wenn es keinen Mindestbestellwert geben soll.'),
|
||||
feld('ruecksendekosten', 'Rücksendekosten bei Widerruf', rueck)),
|
||||
abschnitt('Zahlungsarten', 'Dein Shop zeigt genau diese Zahlungsarten an.',
|
||||
hakenFeld('zahlung.card', karte, 'Karte (inklusive Apple Pay und Google Pay)', 'Immer dabei.'),
|
||||
hakenFeld('zahlung.klarna', klarna, 'Klarna'),
|
||||
hakenFeld('zahlung.sepa_debit', sepa, 'SEPA-Lastschrift'),
|
||||
h('div', { class: 'sh-box sh-box-warn', role: 'note', 'data-hinweis': 'sepa' }, SEPA_WARNUNG),
|
||||
h('p', { class: 'sh-hinweis', 'data-hinweis': 'stripe' }, STRIPE_HINWEIS),
|
||||
h('p', { class: 'sh-hinweis', 'data-hinweis': 'paypal' }, PAYPAL_HINWEIS),
|
||||
h('p', { class: 'sh-fehler', 'data-fehler': 'zahlungsarten', role: 'alert' })),
|
||||
allgemeinerFehler(),
|
||||
konfliktPlatz,
|
||||
nurLesen ? null : h('div', { class: 'sh-aktionen' }, speichern))
|
||||
|
||||
/* ------------------------------------------------------------ Einsammeln --- */
|
||||
/** Eingabe => { einstellungen } oder { fehler } (nur was der Browser selbst nicht lesen kann: Betraege). */
|
||||
function sammle() {
|
||||
const fehler = {}
|
||||
const betrag = (steuer, name, { pflicht = false } = {}) => {
|
||||
if (!steuer.istLesbar()) {
|
||||
fehler[name] = 'Bitte gib einen Betrag wie 4,90 an.'
|
||||
return null
|
||||
}
|
||||
const cent = steuer.inCent()
|
||||
if (cent === null && pflicht) fehler[name] = 'Bitte gib die Versandkosten an. Für kostenlosen Versand trage 0,00 ein.'
|
||||
return cent
|
||||
}
|
||||
const mitAt = laender.value === 'DE,AT'
|
||||
const aktiv = versandAktiv.checked
|
||||
const kostenCent = { DE: betrag(kostenDE, 'versand.kostenCent.DE', { pflicht: aktiv }) }
|
||||
if (mitAt) kostenCent.AT = betrag(kostenAT, 'versand.kostenCent.AT', { pflicht: aktiv })
|
||||
const freiAbCent = betrag(freiAb, 'versand.freiAbCent')
|
||||
const mindestbestellCent = betrag(mindest, 'mindestbestellCent')
|
||||
if (Object.keys(fehler).length) return { fehler }
|
||||
const zahlungsarten = ['card', klarna.checked ? 'klarna' : null, sepa.checked ? 'sepa_debit' : null].filter(Boolean)
|
||||
return {
|
||||
einstellungen: {
|
||||
shopname: shopname.value.trim(),
|
||||
akzent: akzent.value,
|
||||
anbieter: {
|
||||
name: anbieterName.value.trim(),
|
||||
strasse: strasse.value.trim(),
|
||||
plz: plz.value.trim(),
|
||||
ort: ort.value.trim(),
|
||||
land: land.value,
|
||||
email: email.value.trim(),
|
||||
telefon: telefon.value.trim(),
|
||||
ustId: ustId.value.trim(),
|
||||
},
|
||||
kleinunternehmer: kleinunternehmer.checked,
|
||||
versand: { aktiv, laender: mitAt ? ['DE', 'AT'] : ['DE'], kostenCent, freiAbCent },
|
||||
abholung: { aktiv: abholungAktiv.checked, adresse: abholAdresse.value.trim(), hinweis: abholHinweis.value.trim() },
|
||||
lieferzeit: lieferzeit.value.trim(),
|
||||
mindestbestellCent,
|
||||
ruecksendekosten: rueck.value,
|
||||
zahlungsarten,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- Speichern --- */
|
||||
let laeuft = false
|
||||
form.addEventListener('submit', async (ev) => {
|
||||
ev.preventDefault()
|
||||
if (nurLesen || laeuft) return
|
||||
laeuft = true
|
||||
speichern.disabled = true
|
||||
konfliktPlatz.replaceChildren()
|
||||
setzeFehler(form, {})
|
||||
try {
|
||||
const eingabe = sammle()
|
||||
if (eingabe.fehler) {
|
||||
setzeFehler(form, eingabe.fehler)
|
||||
form.querySelector('[aria-invalid]')?.focus()
|
||||
return
|
||||
}
|
||||
const gespeichert = await aufruf('/api/shop/einstellungen', { method: 'PUT', body: { projectId, einstellungen: eingabe.einstellungen, version } })
|
||||
if (Number.isInteger(gespeichert?.version)) version = gespeichert.version
|
||||
if (gespeichert?.einstellungen) fuelle(gespeichert.einstellungen)
|
||||
if (typeof ctx.zeigeMeldung === 'function') ctx.zeigeMeldung('Die Einstellungen sind gespeichert.', 'ok')
|
||||
if (typeof ctx.neuLaden === 'function') {
|
||||
try { await ctx.neuLaden() } catch { /* gespeichert ist gespeichert; der Stand erscheint beim naechsten Laden */ }
|
||||
}
|
||||
} catch (err) {
|
||||
if (err?.status === 409 || err?.code === 'EINSTELLUNG_VERALTET') zeigeKonflikt(err.message)
|
||||
else zeigeFehler(form, err)
|
||||
} finally {
|
||||
laeuft = false
|
||||
speichern.disabled = false
|
||||
}
|
||||
})
|
||||
|
||||
if (nurLesen) {
|
||||
for (const el of form.querySelectorAll('input, select, textarea, button')) el.disabled = true
|
||||
}
|
||||
panel.replaceChildren(form)
|
||||
}
|
||||
Reference in new issue
Block a user