215 lines
8.3 KiB
JavaScript
215 lines
8.3 KiB
JavaScript
import { useState } from 'react'
|
|
import { searchTicketApi, deliverClaimApi } from '../services/employee'
|
|
import { useHandleAuthError } from '../hooks/useHandleAuthError'
|
|
|
|
function formatDate(dateStr) {
|
|
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
const STATUS_CONFIG = {
|
|
PENDING: { label: 'À remettre', classes: 'bg-yellow-100 text-yellow-800' },
|
|
DELIVERED: { label: 'Déjà remis', classes: 'bg-green-100 text-green-800' },
|
|
CANCELLED: { label: 'Expiré', classes: 'bg-gray-100 text-gray-500' },
|
|
}
|
|
|
|
export default function Employe() {
|
|
const handleAuthError = useHandleAuthError()
|
|
const [code, setCode] = useState('')
|
|
const [result, setResult] = useState(null)
|
|
const [searching, setSearching] = useState(false)
|
|
const [delivering, setDelivering] = useState(false)
|
|
const [searchError, setSearchError] = useState('')
|
|
const [deliverError, setDeliverError] = useState('')
|
|
const [success, setSuccess] = useState(false)
|
|
|
|
const handleSearch = async (e) => {
|
|
e.preventDefault()
|
|
setResult(null)
|
|
setSuccess(false)
|
|
setDeliverError('')
|
|
setSearchError('')
|
|
setSearching(true)
|
|
try {
|
|
const data = await searchTicketApi(code.trim())
|
|
setResult(data)
|
|
} catch (err) {
|
|
if (!handleAuthError(err)) setSearchError(err.message)
|
|
} finally {
|
|
setSearching(false)
|
|
}
|
|
}
|
|
|
|
const handleDeliver = async () => {
|
|
if (!result?.claim?.id) return
|
|
setDeliverError('')
|
|
setDelivering(true)
|
|
try {
|
|
await deliverClaimApi(result.claim.id)
|
|
setResult((prev) => ({
|
|
...prev,
|
|
claim: { ...prev.claim, status: 'DELIVERED', claimedAt: new Date().toISOString() },
|
|
}))
|
|
setSuccess(true)
|
|
} catch (err) {
|
|
if (!handleAuthError(err)) setDeliverError(err.message)
|
|
} finally {
|
|
setDelivering(false)
|
|
}
|
|
}
|
|
|
|
const handleReset = () => {
|
|
setCode('')
|
|
setResult(null)
|
|
setSuccess(false)
|
|
setSearchError('')
|
|
setDeliverError('')
|
|
}
|
|
|
|
const statusCfg = result ? (STATUS_CONFIG[result.claim?.status] ?? STATUS_CONFIG.PENDING) : null
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 px-4 py-8 sm:py-12">
|
|
<div className="max-w-lg mx-auto">
|
|
|
|
{/* En-tête */}
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Espace Employé</h1>
|
|
<p className="text-gray-500 mt-1 text-sm">Recherchez un code ticket pour remettre le lot au client.</p>
|
|
</div>
|
|
|
|
{/* Formulaire de recherche */}
|
|
<form onSubmit={handleSearch} className="flex gap-2 mb-6">
|
|
<label htmlFor="employee-ticket-code" className="sr-only">Code ticket</label>
|
|
<input
|
|
type="text"
|
|
id="employee-ticket-code"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value.toUpperCase())}
|
|
required
|
|
placeholder="Code ticket (10 caractères)"
|
|
maxLength={10}
|
|
className="flex-1 border border-gray-300 rounded-lg px-4 py-3 text-sm font-mono uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-[#006B6B] focus:border-[#006B6B]"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={searching || code.trim().length === 0}
|
|
className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-5 py-3 rounded-lg transition-colors text-sm whitespace-nowrap"
|
|
>
|
|
{searching ? 'Recherche…' : 'Rechercher'}
|
|
</button>
|
|
</form>
|
|
|
|
{/* Erreur de recherche */}
|
|
{searchError && (
|
|
<div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
|
|
{searchError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Résultat */}
|
|
{result && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
|
|
{/* Bandeau succès remise */}
|
|
{success && (
|
|
<div className="bg-green-500 px-5 py-3 flex items-center gap-3">
|
|
<svg className="w-5 h-5 text-white flex-shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<p className="text-white text-sm font-semibold">Lot remis avec succès — espace client mis à jour.</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* En-tête carte : lot + statut */}
|
|
<div className="px-5 py-4 flex items-start justify-between gap-3 border-b border-gray-100">
|
|
<div>
|
|
<p className="font-bold text-gray-900 text-base">{result.lot.name}</p>
|
|
<p className="text-gray-500 text-xs mt-0.5">{result.lot.description}</p>
|
|
{result.lot.value && (
|
|
<p className="text-[#006B6B] text-xs font-semibold mt-1">Valeur : {result.lot.value} €</p>
|
|
)}
|
|
</div>
|
|
<span className={`flex-shrink-0 text-xs font-semibold px-3 py-1 rounded-full ${statusCfg.classes}`}>
|
|
{statusCfg.label}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Infos client */}
|
|
<div className="px-5 py-4 space-y-2 border-b border-gray-100">
|
|
<p className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Client</p>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
|
|
{(result.client.firstname?.[0] ?? '?').toUpperCase()}{(result.client.lastname?.[0] ?? '?').toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-gray-800">
|
|
{result.client.firstname} {result.client.lastname}
|
|
</p>
|
|
<p className="text-xs text-gray-500">{result.client.email}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Infos ticket */}
|
|
<div className="px-5 py-4 space-y-1 border-b border-gray-100">
|
|
<p className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Ticket</p>
|
|
<p className="text-sm text-gray-700">
|
|
<span className="font-medium">Code :</span>{' '}
|
|
<span className="font-mono">{result.ticket.code}</span>
|
|
</p>
|
|
<p className="text-sm text-gray-700">
|
|
<span className="font-medium">Utilisé le :</span> {formatDate(result.ticket.usedAt)}
|
|
</p>
|
|
{result.claim.claimedAt && (
|
|
<p className="text-sm text-gray-700">
|
|
<span className="font-medium">Remis le :</span> {formatDate(result.claim.claimedAt)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="px-5 py-4 space-y-3">
|
|
{deliverError && (
|
|
<div className="px-4 py-2 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
|
|
{deliverError}
|
|
</div>
|
|
)}
|
|
|
|
{result.claim.status === 'PENDING' && !success && (
|
|
<button
|
|
onClick={handleDeliver}
|
|
disabled={delivering}
|
|
className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition-colors text-sm"
|
|
>
|
|
{delivering ? 'Confirmation en cours…' : 'Confirmer la remise du lot'}
|
|
</button>
|
|
)}
|
|
|
|
{result.claim.status === 'CANCELLED' && (
|
|
<div className="px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 text-gray-500 text-sm text-center">
|
|
Ce gain est expiré et ne peut plus être remis.
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={handleReset}
|
|
className="w-full border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
|
|
>
|
|
Rechercher un autre code
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|