314 lines
11 KiB
TypeScript
314 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { Campaign } from '@/types';
|
|
import { campaignService, propositionService } from '@/lib/services';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ArrowLeft, FileText, User, Mail, CheckCircle, AlertCircle } from 'lucide-react';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default function PublicProposePage() {
|
|
const params = useParams();
|
|
const campaignId = params.id as string;
|
|
|
|
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
description: '',
|
|
author_first_name: '',
|
|
author_last_name: '',
|
|
author_email: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (campaignId) {
|
|
loadCampaign();
|
|
}
|
|
}, [campaignId]);
|
|
|
|
const loadCampaign = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const campaigns = await campaignService.getAll();
|
|
const campaignData = campaigns.find(c => c.id === campaignId);
|
|
|
|
if (!campaignData) {
|
|
setError('Campagne non trouvée');
|
|
return;
|
|
}
|
|
|
|
if (campaignData.status !== 'deposit') {
|
|
setError('Cette campagne n\'accepte plus de propositions');
|
|
return;
|
|
}
|
|
|
|
setCampaign(campaignData);
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement de la campagne:', error);
|
|
setError('Erreur lors du chargement de la campagne');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSubmitting(true);
|
|
setError('');
|
|
|
|
try {
|
|
await propositionService.create({
|
|
campaign_id: campaignId,
|
|
title: formData.title,
|
|
description: formData.description,
|
|
author_first_name: formData.author_first_name,
|
|
author_last_name: formData.author_last_name,
|
|
author_email: formData.author_email
|
|
});
|
|
|
|
setSuccess(true);
|
|
setFormData({
|
|
title: '',
|
|
description: '',
|
|
author_first_name: '',
|
|
author_last_name: '',
|
|
author_email: ''
|
|
});
|
|
} catch (err: any) {
|
|
const errorMessage = err?.message || err?.details || 'Erreur lors de la soumission de la proposition';
|
|
setError(`Erreur lors de la soumission de la proposition: ${errorMessage}`);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
|
<p className="text-slate-600 dark:text-slate-300">Chargement de la campagne...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !campaign) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Card className="max-w-md mx-auto">
|
|
<CardContent className="p-8">
|
|
<div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Erreur</h2>
|
|
<p className="text-slate-600 dark:text-slate-300 mb-6">{error}</p>
|
|
<Button asChild>
|
|
<Link href="/">Retour à l'accueil</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (success) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Card className="max-w-md mx-auto">
|
|
<CardContent className="p-8">
|
|
<div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Proposition soumise !</h2>
|
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
|
Votre proposition a été soumise avec succès. Merci pour votre participation !
|
|
</p>
|
|
<div className="space-y-3">
|
|
<Button
|
|
onClick={() => setSuccess(false)}
|
|
className="w-full"
|
|
>
|
|
Soumettre une autre proposition
|
|
</Button>
|
|
<Button asChild variant="outline" className="w-full">
|
|
<Link href="/">Retour à l'accueil</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
|
<div className="container mx-auto px-4 py-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Déposer une proposition</h1>
|
|
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
|
Campagne : <span className="font-medium">{campaign?.title}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Campaign Info */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="w-5 h-5" />
|
|
Informations sur la campagne
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-slate-600 dark:text-slate-300 mb-2">Description</h3>
|
|
<div className="text-slate-900 dark:text-slate-100 whitespace-pre-wrap leading-relaxed">
|
|
{campaign?.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Form */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Votre proposition</CardTitle>
|
|
<CardDescription>
|
|
Remplissez le formulaire ci-dessous pour soumettre votre proposition.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && (
|
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<label htmlFor="title" className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Titre de la proposition *
|
|
</label>
|
|
<Input
|
|
id="title"
|
|
name="title"
|
|
value={formData.title}
|
|
onChange={handleChange}
|
|
placeholder="Titre de votre proposition"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label htmlFor="description" className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Description *
|
|
</label>
|
|
<Textarea
|
|
id="description"
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
placeholder="Décrivez votre proposition en détail..."
|
|
rows={6}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="border-t border-slate-200 dark:border-slate-700 pt-6">
|
|
<h3 className="text-lg font-medium text-slate-900 dark:text-slate-100 mb-4 flex items-center gap-2">
|
|
<User className="w-5 h-5" />
|
|
Vos informations
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="author_first_name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Prénom *
|
|
</label>
|
|
<Input
|
|
id="author_first_name"
|
|
name="author_first_name"
|
|
value={formData.author_first_name}
|
|
onChange={handleChange}
|
|
placeholder="Votre prénom"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label htmlFor="author_last_name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Nom *
|
|
</label>
|
|
<Input
|
|
id="author_last_name"
|
|
name="author_last_name"
|
|
value={formData.author_last_name}
|
|
onChange={handleChange}
|
|
placeholder="Votre nom"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 mt-4">
|
|
<label htmlFor="author_email" className="text-sm font-medium text-slate-700 dark:text-slate-300 flex items-center gap-2">
|
|
<Mail className="w-4 h-4" />
|
|
Email *
|
|
</label>
|
|
<Input
|
|
id="author_email"
|
|
name="author_email"
|
|
type="email"
|
|
value={formData.author_email}
|
|
onChange={handleChange}
|
|
placeholder="votre.email@exemple.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end pt-6">
|
|
<Button type="submit" disabled={submitting} size="lg">
|
|
{submitting ? 'Soumission...' : 'Soumettre la proposition'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|