Webshop: Funktionen-Karte mit Anfrage annehmen/ablehnen, Stripe-Stand, Kennzahlen und Rechtliches-Karten

Webshop als Funktion im Reiter Funktionen (Aktionen wie beim Terminplaner), Panel je Projekt mit Anfrage,
Entscheidung mit Begruendung, Stripe-Status und Zahlen; Karten Leistungsbeschreibung und AVV Webshop.

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

src/components/customer/CustomerFunktionen.jsx

@@ -3,16 +3,17 @@ import { Link } from 'react-router-dom'
 import { FaCheck, FaCopy, FaRotateRight, FaSpinner } from 'react-icons/fa6'
 import { Card, Badge, Button, EmptyState } from '../ui'
 import { copyText } from '../CopyableCredential'
-import { getFunktionen, setFeature, getTermineAnleitung } from '../../lib/teamApi'
+import { getFunktionen, setFeature, getTermineAnleitung, getShop, entscheideShopAnfrage } from '../../lib/teamApi'
 import {
   FUNKTIONEN, ZUSTAND, AKTION_LABEL, funktionOf, aktionen, mergeFunktion, siteKeyOf, abgeschaltetText,
   hindernisText, panelModell, anleitungOffen, textformNoetig, textformAnsicht, textformBereit, speicherStatus,
+  anfrageZeilen, anfrageStatus, stripeText, stripeTon, shopHatEintrag, begruendungOk, BEGRUENDUNG_MAX, entscheidungStatus,
 } from '../../lib/funktionenView'
 import { CHANNELS, channelLabel } from '../../lib/analyseView'
-import { berlinYmd } from '../../lib/format'
+import { berlinYmd, fmtDateTime } from '../../lib/format'
 import '../../styles/admin-areas.css'
 
-// Reiter "Funktionen": News-Pinnwand und Terminplaner je Projekt an/aus wie im frueheren Admin-Panel (Kundenliste, Zeile "Funktionen")
+// Reiter "Funktionen": News-Pinnwand, Terminplaner und Webshop je Projekt an/aus wie im frueheren Admin-Panel (Kundenliste, Zeile "Funktionen")
 const short = (text) => (text.length > 60 ? `${text.slice(0, 60)}…` : text)
 
 // Site-Key des Terminplaners (steht im Einbau-Code der Kundenwebsite): kleine Schrift mit fester Breite und Kopierknopf
@@ -158,6 +159,75 @@ function TextformPanel({ termine, value, onChange, projectId, today, disabled })
   )
 }
 
+// Webshop je Projekt: Anfrage des Kunden (annehmen / ablehnen mit Begruendung), Stripe-Stand und Kennzahlen. Die Entscheidung geht ans Portal
+// (POST /shop/:customerId/anfrage); danach laden Funktionen und Shop neu (onDecided). Texte sind ausschliesslich React-Textknoten.
+function ShopPanel({ customerId, shop, onDecided }) {
+  const [frage, setFrage] = useState(null) // null | 'annehmen' | 'ablehnen'
+  const [begruendung, setBegruendung] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState(null) // { ok, text }
+  const a = shop.anfrage
+  const [tone, label] = anfrageStatus(a?.status)
+  const stripe = shop.stripe || { accountId: false, status: null }
+  const entscheiden = async () => {
+    setBusy(true)
+    setStatus(null)
+    try {
+      const antwort = await entscheideShopAnfrage(customerId, { projectId: shop.projectId, entscheidung: frage, begruendung })
+      setFrage(null)
+      setBegruendung('')
+      setStatus(entscheidungStatus(antwort))
+      onDecided().catch(() => {}) // Neuladen scheitert hoechstens leise; die Entscheidung ist gespeichert
+    } catch (err) {
+      setFrage(null)
+      setStatus({ ok: false, text: err.message })
+      onDecided().catch(() => {})
+    } finally {
+      setBusy(false)
+    }
+  }
+  const ablehnenFehlt = frage === 'ablehnen' && !begruendungOk(begruendung)
+  return (
+    <div className="area-row funktionen-panel">
+      <div className="funktionen-panel-head">
+        <strong>Webshop: {shop.projectName}</strong>
+        {a && <Badge tone={tone}>Anfrage: {label}</Badge>}
+        <Badge tone={shop.geoeffnet ? 'ok' : 'muted'}>{shop.geoeffnet ? 'Geöffnet' : 'Geschlossen'}</Badge>
+        <Badge tone={stripeTon(stripe.status, !!stripe.accountId)}>Stripe: {stripeText(stripe.status, !!stripe.accountId)}</Badge>
+      </div>
+      {a && (
+        <dl className="area-kv">
+          {anfrageZeilen(a.anfrage).map((z) => (
+            <Fragment key={z.label}><dt>{z.label}</dt><dd style={{ whiteSpace: 'pre-wrap' }}>{z.text}</dd></Fragment>
+          ))}
+          <dt>Eingegangen</dt><dd>{a.at ? fmtDateTime(a.at) : '–'}</dd>
+          {a.entschiedenAt && <><dt>Entschieden</dt><dd>{fmtDateTime(a.entschiedenAt)}</dd></>}
+          {a.begruendung && <><dt>Begründung</dt><dd style={{ whiteSpace: 'pre-wrap' }}>{a.begruendung}</dd></>}
+        </dl>
+      )}
+      <div className="area-muted">Artikel: {shop.zahlen?.artikel ?? 0} · Offene Bestellungen: {shop.zahlen?.offeneBestellungen ?? 0}</div>
+      {a?.status === 'offen' && (
+        frage ? (
+          <div className="area-inline">
+            <span>{frage === 'annehmen' ? 'Anfrage annehmen? Der Kunde bekommt eine Mail.' : 'Anfrage ablehnen? Der Kunde bekommt die Begründung per Mail.'}</span>
+            {frage === 'ablehnen' && (
+              <textarea className="form-control" required rows={3} maxLength={BEGRUENDUNG_MAX} placeholder="Begründung (Pflicht)" value={begruendung} onChange={(e) => setBegruendung(e.target.value)} style={{ width: '100%' }} />
+            )}
+            <Button size="sm" variant="primary" onClick={entscheiden} disabled={busy || ablehnenFehlt}>{busy ? <FaSpinner className="spinner" /> : 'Ja'}</Button>
+            <Button size="sm" variant="ghost" onClick={() => setFrage(null)} disabled={busy}>Abbrechen</Button>
+          </div>
+        ) : (
+          <div className="area-inline">
+            <Button size="sm" variant="primary" onClick={() => { setBegruendung(''); setFrage('annehmen') }}>Anfrage annehmen</Button>
+            <Button size="sm" variant="ghost" onClick={() => { setBegruendung(''); setFrage('ablehnen') }}>Ablehnen</Button>
+          </div>
+        )
+      )}
+      {status && <div className={status.ok ? 'area-message' : 'area-error'}>{status.text}</div>}
+    </div>
+  )
+}
+
 const LEERE_TEXTFORM = { confirmed: false, date: '', channel: '' }
 
 export default function CustomerFunktionen({ customerId }) {
@@ -170,6 +240,8 @@ export default function CustomerFunktionen({ customerId }) {
   const [busy, setBusy] = useState(false)
   const [status, setStatus] = useState(null) // { ok, text }
   const [panel, setPanel] = useState({}) // projectId -> true/false (Knopf "Anleitung"); ohne Eintrag entscheidet die Adresse (?anleitung=<projectId>)
+  const [shop, setShop] = useState([]) // GET /shop/:customerId => projects; Fehler nur im Webshop-Bereich, nicht in der Tabelle
+  const [shopFehler, setShopFehler] = useState(null)
   const [panelReload, setPanelReload] = useState({}) // projectId -> Zaehler, nach jeder Aktion hochgezaehlt
 
   const load = useCallback(() => {
@@ -178,7 +250,14 @@ export default function CustomerFunktionen({ customerId }) {
       .then(({ projects: list, termine: feld }) => { setProjects(list || []); setTermine(feld || null) })
       .catch((err) => setError(err.message || 'Funktionen konnten nicht geladen werden.'))
   }, [customerId])
-  useEffect(() => { load() }, [load])
+  const loadShop = useCallback(() => {
+    setShopFehler(null)
+    return getShop(customerId)
+      .then(({ projects: list }) => setShop(Array.isArray(list) ? list : []))
+      .catch((err) => setShopFehler(err.message || 'Webshop-Daten konnten nicht geladen werden.'))
+  }, [customerId])
+  useEffect(() => { load(); loadShop() }, [load, loadShop])
+  const nachEntscheidung = () => Promise.all([getFunktionen(customerId).then(({ projects: list, termine: feld }) => { setProjects(list || []); setTermine(feld || null) }), loadShop()])
 
   const save = async () => {
     const { projectId, key, action } = confirm
@@ -203,6 +282,7 @@ export default function CustomerFunktionen({ customerId }) {
     } finally {
       setBusy(false)
       // Version und Hindernis der Anleitung haengen vom Zustand ab: Panel dieser Zeile neu laden
+      if (key === 'shop') loadShop()
       if (key === 'termine') setPanelReload((r) => ({ ...r, [projectId]: (r[projectId] || 0) + 1 }))
     }
   }
@@ -289,6 +369,14 @@ export default function CustomerFunktionen({ customerId }) {
         }))}
       </div>
       {status && <div className={status.ok ? 'area-message' : 'area-error'} style={{ margin: 12 }}>{status.text}</div>}
+      {shopFehler && <div className="area-error" style={{ margin: 12 }}>{shopFehler}</div>}
+      {shop.filter(shopHatEintrag).length > 0 && (
+        <div className="area-rows">
+          {shop.filter(shopHatEintrag).map((s) => (
+            <ShopPanel key={s.projectId} customerId={customerId} shop={s} onDecided={nachEntscheidung} />
+          ))}
+        </div>
+      )}
     </Card>
   )
 }