Ajout fidelite_abo_pret_commande_groupe

2026-05-10 12:44:52 +02:00
parent d1f880cfbb
commit f80dfdcdb5
16 changed files with 1172 additions and 7 deletions
@@ -0,0 +1,94 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useGroups } from '../context/GroupsContext.jsx'
+
+function formatDate(iso) {
+  try {
+    return new Intl.DateTimeFormat('fr-FR', {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    }).format(new Date(iso))
+  } catch {
+    return iso || '—'
+  }
+}
+
+export default function GroupesPage() {
+  const { groups, groupTotalEuros, createGroup } = useGroups()
+  const [name, setName] = useState('')
+  const [err, setErr] = useState(null)
+  const [ok, setOk] = useState(null)
+
+  const sorted = [...groups].sort((a, b) =>
+    String(b.createdAt).localeCompare(String(a.createdAt)),
+  )
+
+  function handleCreate(e) {
+    e.preventDefault()
+    setErr(null)
+    setOk(null)
+    try {
+      const g = createGroup(name)
+      setName('')
+      setOk(`Groupe « ${g.name} » créé.`)
+    } catch (ex) {
+      setErr(ex?.message || 'Impossible de créer le groupe.')
+    }
+  }
+
+  return (
+    <div className="groupes-page">
+      <h2 className="page-title">Commandes groupées</h2>
+      <p className="page-lead">
+        Équivalent local de <code>POST /api/groups/:id/orders</code> : tu crées
+        un groupe, puis chacun ajoute sa « ligne » (montant + message). Stocké
+        dans <code>librairie-groups-v1</code>.
+      </p>
+
+      {err ? (
+        <p className="form-error" role="alert">
+          {err}
+        </p>
+      ) : null}
+      {ok ? <p className="form-notice">{ok}</p> : null}
+
+      <section className="order-panel">
+        <h3 className="panel-title">Nouveau groupe</h3>
+        <form className="promo-form" onSubmit={handleCreate}>
+          <label>
+            Nom du groupe (ex. promo rentrée)
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Lecteurs du 8e étage"
+            />
+          </label>
+          <button type="submit" className="btn primary">
+            Créer le groupe
+          </button>
+        </form>
+      </section>
+
+      <section className="order-panel">
+        <h3 className="panel-title">Tes groupes</h3>
+        {sorted.length === 0 ? (
+          <p className="empty-state">Aucun groupe encore.</p>
+        ) : (
+          <ul className="reviews-list">
+            {sorted.map((g) => (
+              <li key={g.id} className="reviews-item">
+                <p className="reviews-meta">{formatDate(g.createdAt)}</p>
+                <p className="reviews-text">
+                  <Link to={`/groupes/${g.id}`}>{g.name}</Link>
+                  {' · '}
+                  Pool actuel ~{' '}
+                  <strong>{groupTotalEuros(g.id).toFixed(2)} €</strong>
+                </p>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  )
+}