207 lines
8.4 KiB
JavaScript
207 lines
8.4 KiB
JavaScript
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 handleAuthError = useHandleAuthError()
|
|
const [code, setCode] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [gain, setGain] = useState(null)
|
|
const [wonAt, setWonAt] = useState(null)
|
|
const [showDetail, setShowDetail] = useState(false)
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
try {
|
|
const data = await participateApi(code.trim().toUpperCase())
|
|
setGain(data.gain)
|
|
setWonAt(new Date())
|
|
} catch (err) {
|
|
if (!handleAuthError(err)) {
|
|
navigate('/perdu', { state: { message: err.message } })
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleClose = () => {
|
|
setGain(null)
|
|
setWonAt(null)
|
|
setShowDetail(false)
|
|
setCode('')
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex flex-col px-8 py-12 max-w-lg mx-auto">
|
|
<UserNav active="code" />
|
|
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold italic font-serif text-[#006B6B]">Saisir mon code gagnant</h1>
|
|
<p className="text-gray-500 mt-2 text-sm">Saisissez le code présent sur votre ticket</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<label htmlFor="ticket-code" className="sr-only">Code de votre ticket</label>
|
|
<input
|
|
type="text"
|
|
id="ticket-code"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value.toUpperCase())}
|
|
placeholder="Votre code"
|
|
maxLength={10}
|
|
required
|
|
className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-500 bg-white focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={loading || code.length !== 10}
|
|
className="w-full bg-[#00786F] hover:bg-[#1A6B65] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
|
|
>
|
|
{loading ? 'Validation...' : 'Valider'}
|
|
</button>
|
|
</form>
|
|
|
|
{/* ── 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>
|
|
<p className="text-white/80 text-sm">Vous avez obtenu une récompense</p>
|
|
</div>
|
|
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="bg-white/10 rounded-lg px-6 py-3 text-white font-mono tracking-widest text-lg">
|
|
{code}
|
|
</div>
|
|
</div>
|
|
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="w-full max-w-sm">
|
|
<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={() => setShowDetail(true)}
|
|
className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
|
|
>
|
|
Découvrir mon lot
|
|
</button>
|
|
</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-500 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-500 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-500 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-500 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>
|
|
)
|
|
}
|