e15d717a40
PROBLÈME RÉSOLU: - Erreur "Code already used" répétée dans les logs Keycloak - Boucle infinie de tentatives d'échange du code d'autorisation OAuth - Utilisateurs bloqués à la connexion CORRECTIONS APPLIQUÉES: 1. Ajout de useRef pour protéger contre les exécutions multiples - hasExchanged.current: Flag pour prévenir les réexécutions - isProcessing.current: Protection pendant le traitement 2. Modification des dépendances useEffect - AVANT: [searchParams, router] → exécution à chaque changement - APRÈS: [] → exécution unique au montage du composant 3. Amélioration du logging - Console logs pour debug OAuth flow - Messages emoji pour faciliter le suivi 4. Nettoyage de l'URL - window.history.replaceState() pour retirer les paramètres OAuth - Évite les re-renders causés par les paramètres dans l'URL 5. Gestion d'erreurs améliorée - Capture des erreurs JSON du serveur - Messages d'erreur plus explicites FICHIERS AJOUTÉS: - app/(main)/aide/* - 4 pages du module Aide (documentation, tutoriels, support) - app/(main)/messages/* - 4 pages du module Messages (inbox, envoyés, archives) - app/auth/callback/page.tsx.backup - Sauvegarde avant modification IMPACT: ✅ Un seul échange de code par authentification ✅ Plus d'erreur "Code already used" ✅ Connexion fluide et sans boucle ✅ Logs propres et lisibles 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
MessageCircle,
|
|
Phone,
|
|
Mail,
|
|
Clock,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Send,
|
|
ArrowLeft,
|
|
Headphones,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
/**
|
|
* Page de support technique
|
|
* Formulaire de contact et informations de support
|
|
*/
|
|
export default function SupportPage() {
|
|
const router = useRouter();
|
|
const [formData, setFormData] = useState({
|
|
nom: "",
|
|
email: "",
|
|
sujet: "",
|
|
priorite: "normale",
|
|
message: "",
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
|
) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
// Simuler l'envoi
|
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
|
|
|
alert("Ticket de support créé avec succès ! Notre équipe vous contactera bientôt.");
|
|
router.push("/aide");
|
|
};
|
|
|
|
const ticketsRecents = [
|
|
{
|
|
id: "#2024-1234",
|
|
sujet: "Problème d'accès au dashboard",
|
|
status: "resolved",
|
|
date: "2025-10-28",
|
|
},
|
|
{
|
|
id: "#2024-1189",
|
|
sujet: "Question sur la facturation",
|
|
status: "in-progress",
|
|
date: "2025-10-25",
|
|
},
|
|
];
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "resolved":
|
|
return (
|
|
<Badge className="bg-green-100 text-green-800">
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
|
Résolu
|
|
</Badge>
|
|
);
|
|
case "in-progress":
|
|
return (
|
|
<Badge className="bg-blue-100 text-blue-800">
|
|
<Clock className="h-3 w-3 mr-1" />
|
|
En cours
|
|
</Badge>
|
|
);
|
|
default:
|
|
return <Badge>Nouveau</Badge>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
{/* En-tête */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/aide">
|
|
<Button variant="ghost" size="sm">
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Retour à l'aide
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Support technique</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
Contactez notre équipe d'assistance
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Formulaire de contact */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Card className="p-6">
|
|
<h2 className="text-xl font-semibold mb-6">Créer un ticket de support</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="nom">Nom complet *</Label>
|
|
<Input
|
|
id="nom"
|
|
name="nom"
|
|
type="text"
|
|
placeholder="Votre nom"
|
|
value={formData.nom}
|
|
onChange={handleChange}
|
|
required
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="email">Email *</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="votre@email.com"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
required
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="sujet">Sujet *</Label>
|
|
<Input
|
|
id="sujet"
|
|
name="sujet"
|
|
type="text"
|
|
placeholder="Résumé de votre demande"
|
|
value={formData.sujet}
|
|
onChange={handleChange}
|
|
required
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="priorite">Priorité</Label>
|
|
<select
|
|
id="priorite"
|
|
name="priorite"
|
|
value={formData.priorite}
|
|
onChange={handleChange}
|
|
className="mt-2 w-full border border-gray-300 rounded-md p-2"
|
|
>
|
|
<option value="basse">Basse</option>
|
|
<option value="normale">Normale</option>
|
|
<option value="haute">Haute</option>
|
|
<option value="urgente">Urgente</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="message">Description du problème *</Label>
|
|
<Textarea
|
|
id="message"
|
|
name="message"
|
|
placeholder="Décrivez votre problème en détail..."
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
required
|
|
rows={8}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full bg-blue-600 hover:bg-blue-700"
|
|
disabled={isSubmitting}
|
|
>
|
|
<Send className="mr-2 h-4 w-4" />
|
|
{isSubmitting ? "Envoi en cours..." : "Envoyer le ticket"}
|
|
</Button>
|
|
</form>
|
|
</Card>
|
|
|
|
{/* Tickets récents */}
|
|
{ticketsRecents.length > 0 && (
|
|
<Card className="p-6">
|
|
<h2 className="text-xl font-semibold mb-4">Vos tickets récents</h2>
|
|
<div className="space-y-3">
|
|
{ticketsRecents.map((ticket) => (
|
|
<div
|
|
key={ticket.id}
|
|
className="flex items-center justify-between p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer"
|
|
>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3">
|
|
<span className="font-mono text-sm text-gray-600">
|
|
{ticket.id}
|
|
</span>
|
|
{getStatusBadge(ticket.status)}
|
|
</div>
|
|
<p className="font-medium mt-1">{ticket.sujet}</p>
|
|
<p className="text-sm text-gray-500">
|
|
Créé le{" "}
|
|
{new Date(ticket.date).toLocaleDateString("fr-FR", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar - Informations de contact */}
|
|
<div className="space-y-6">
|
|
{/* Horaires de support */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-3 bg-blue-100 rounded-lg">
|
|
<Headphones className="h-6 w-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold">Support disponible</h3>
|
|
<p className="text-sm text-gray-600">Lundi - Vendredi</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="h-4 w-4 text-gray-400" />
|
|
<span>9h00 - 18h00 (CET)</span>
|
|
</div>
|
|
<p className="text-xs text-gray-500">
|
|
Temps de réponse moyen : 2-4 heures pendant les horaires d'ouverture
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Contact téléphonique */}
|
|
<Card className="p-6 bg-blue-50 border-blue-200">
|
|
<div className="flex items-start gap-3">
|
|
<div className="p-3 bg-blue-600 rounded-lg">
|
|
<Phone className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-blue-900 mb-1">
|
|
Support téléphonique
|
|
</h3>
|
|
<p className="text-sm text-blue-700 mb-2">
|
|
Pour une assistance immédiate
|
|
</p>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="bg-blue-600 hover:bg-blue-700 w-full"
|
|
>
|
|
+33 1 23 45 67 89
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Contact email */}
|
|
<Card className="p-6 bg-green-50 border-green-200">
|
|
<div className="flex items-start gap-3">
|
|
<div className="p-3 bg-green-600 rounded-lg">
|
|
<Mail className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-green-900 mb-1">Email support</h3>
|
|
<p className="text-sm text-green-700 mb-2">Réponse sous 24h</p>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="bg-green-600 hover:bg-green-700 w-full"
|
|
>
|
|
support@btpxpress.fr
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Chat en direct */}
|
|
<Card className="p-6 bg-purple-50 border-purple-200">
|
|
<div className="flex items-start gap-3">
|
|
<div className="p-3 bg-purple-600 rounded-lg">
|
|
<MessageCircle className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-purple-900 mb-1">
|
|
Chat en direct
|
|
</h3>
|
|
<p className="text-sm text-purple-700 mb-2">
|
|
Discutez avec un agent
|
|
</p>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="bg-purple-600 hover:bg-purple-700 w-full"
|
|
>
|
|
Démarrer le chat
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Note importante */}
|
|
<Card className="p-4 bg-yellow-50 border-yellow-200">
|
|
<div className="flex items-start gap-2">
|
|
<AlertCircle className="h-5 w-5 text-yellow-600 flex-shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<p className="text-sm text-yellow-800">
|
|
Pour les urgences critiques affectant votre production, appelez
|
|
notre ligne d'urgence 24/7 au{" "}
|
|
<span className="font-semibold">+33 1 98 76 54 32</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|