mise a jour

2026-07-01 22:06:22 +02:00
parent efd10d6754
commit 68a9650223
22 changed files with 719 additions and 167 deletions
--- a/frontend/src/pages/SaisirCodeUnique.jsx
+++ b/frontend/src/pages/SaisirCodeUnique.jsx
@@ -2,12 +2,24 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { participateApi } from '../services/game'
 import UserNav from '../components/UserNav'
+import { useHandleAuthError } from '../hooks/useHandleAuthError'
+
+function formatDateTime(date) {
+  return date.toLocaleDateString('fr-FR', {
+    day: '2-digit', month: 'long', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}

 export default function SaisirCodeUnique() {
  const navigate = useNavigate()
-  const [code, setCode] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [gain, setGain] = useState(null)
+  const handleAuthError = useHandleAuthError()
+  const [code, setCode]           = useState('')
+  const [loading, setLoading]     = useState(false)
+  const [gain, setGain]           = useState(null)
+  const [claim, setClaim]         = useState(null)
+  const [wonAt, setWonAt]         = useState(null)
+  const [showDetail, setShowDetail] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
@@ -15,16 +27,27 @@ export default function SaisirCodeUnique() {
    try {
      const data = await participateApi(code.trim().toUpperCase())
      setGain(data.gain)
+      setClaim(data.claim)
+      setWonAt(new Date())
    } catch (err) {
-      navigate('/perdu', { state: { message: err.message } })
+      if (!handleAuthError(err)) {
+        navigate('/perdu', { state: { message: err.message } })
+      }
    } finally {
      setLoading(false)
    }
  }

+  const handleClose = () => {
+    setGain(null)
+    setClaim(null)
+    setWonAt(null)
+    setShowDetail(false)
+    setCode('')
+  }
+
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
-
      <UserNav active="code" />

      <div className="mb-8">
@@ -42,7 +65,6 @@ export default function SaisirCodeUnique() {
          required
          className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 bg-white focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
        />
-
        <button
          type="submit"
          disabled={loading || code.length !== 10}
@@ -52,8 +74,8 @@ export default function SaisirCodeUnique() {
        </button>
      </form>

-      {/* Overlay Félicitation */}
-      {gain && (
+      {/* ── Overlay Félicitation ── */}
+      {gain && !showDetail && (
        <div className="fixed inset-0 bg-black/60 flex flex-col items-center justify-between z-50 px-6 py-12">
          <div className="w-full max-w-sm">
            <h2 className="text-4xl font-bold italic font-serif text-white mb-1">Félicitation !</h2>
@@ -61,13 +83,11 @@ export default function SaisirCodeUnique() {
          </div>

          <div className="flex-1 flex items-center justify-center">
-            {/* Code saisi */}
-            <div className="bg-white/10 rounded-lg px-6 py-3 mb-6 text-white font-mono tracking-widest text-lg">
+            <div className="bg-white/10 rounded-lg px-6 py-3 text-white font-mono tracking-widest text-lg">
              {code}
            </div>
          </div>

-          {/* Icône décorative */}
          <div className="mb-8">
            <svg className="w-24 h-24 text-yellow-200" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
@@ -78,7 +98,7 @@ export default function SaisirCodeUnique() {
            <p className="text-white text-center font-semibold mb-1">{gain.name}</p>
            <p className="text-white/70 text-center text-sm mb-6">{gain.description}</p>
            <button
-              onClick={() => navigate('/mes-gains')}
+              onClick={() => setShowDetail(true)}
              className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
            >
              Découvrir mon lot
@@ -86,6 +106,102 @@ export default function SaisirCodeUnique() {
          </div>
        </div>
      )}
+
+      {/* ── Modal détail du lot ── */}
+      {gain && showDetail && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-4">
+          <div className="bg-white rounded-2xl w-full max-w-sm shadow-xl overflow-hidden">
+
+            {/* En-tête coloré */}
+            <div className="bg-[#006B6B] px-6 py-5 relative">
+              <button
+                onClick={handleClose}
+                className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors"
+                aria-label="Fermer"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
+                  <svg className="w-5 h-5 text-yellow-200" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
+                  </svg>
+                </div>
+                <div>
+                  <p className="text-white/70 text-xs">Votre lot</p>
+                  <p className="text-white font-bold text-base leading-tight">{gain.name}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Corps */}
+            <div className="px-6 py-5 space-y-4">
+
+              {/* Description */}
+              <p className="text-gray-600 text-sm leading-relaxed">{gain.description}</p>
+
+              {/* Valeur */}
+              {gain.value && (
+                <div className="flex items-center justify-between py-2 border-b border-gray-100">
+                  <span className="text-xs text-gray-400 uppercase tracking-wider">Valeur estimée</span>
+                  <span className="text-sm font-semibold text-[#006B6B]">{gain.value} €</span>
+                </div>
+              )}
+
+              {/* Code utilisé */}
+              <div className="flex items-center justify-between py-2 border-b border-gray-100">
+                <span className="text-xs text-gray-400 uppercase tracking-wider">Code utilisé</span>
+                <span className="font-mono text-sm tracking-widest text-gray-700">{code}</span>
+              </div>
+
+              {/* Date & heure */}
+              {wonAt && (
+                <div className="flex items-center justify-between py-2 border-b border-gray-100">
+                  <span className="text-xs text-gray-400 uppercase tracking-wider">Obtenu le</span>
+                  <span className="text-sm text-gray-700">{formatDateTime(wonAt)}</span>
+                </div>
+              )}
+
+              {/* Statut */}
+              <div className="flex items-center justify-between py-2">
+                <span className="text-xs text-gray-400 uppercase tracking-wider">Statut</span>
+                <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-yellow-100 text-yellow-700">
+                  En attente de remise
+                </span>
+              </div>
+
+              {/* Info remise */}
+              <div className="bg-[#006B6B]/5 rounded-xl px-4 py-3 flex gap-3 items-start">
+                <svg className="w-4 h-4 text-[#006B6B] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <p className="text-xs text-[#006B6B] leading-relaxed">
+                  Présentez ce code en boutique Thé Tip Top pour récupérer votre lot.
+                </p>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="px-6 pb-6 space-y-2">
+              <button
+                onClick={() => navigate('/mes-gains')}
+                className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-xl transition-colors text-sm"
+              >
+                Voir tout mon historique
+              </button>
+              <button
+                onClick={handleClose}
+                className="w-full border border-gray-200 text-gray-500 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
+              >
+                Retour
+              </button>
+            </div>
+
+          </div>
+        </div>
+      )}
    </div>
  )
 }