move to gitea
This commit is contained in:
Mamadou Sall
529
src_backup/app/checkout/page.tsx
Normal file
529
src_backup/app/checkout/page.tsx
Normal file
@@ -0,0 +1,529 @@
|
||||
// src/app/checkout/page.tsx
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useCartActions } from '@/hooks/useCartSync';import { formatPrice } from '@/lib/woocommerce';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
CreditCard,
|
||||
Lock,
|
||||
Truck,
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail,
|
||||
User,
|
||||
ShoppingBag,
|
||||
AlertCircle,
|
||||
CheckCircle
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CheckoutFormData {
|
||||
// Informations personnelles
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
|
||||
// Adresse de livraison
|
||||
address: string;
|
||||
city: string;
|
||||
postalCode: string;
|
||||
country: string;
|
||||
|
||||
// Options
|
||||
notes: string;
|
||||
createAccount: boolean;
|
||||
newsletterOptIn: boolean;
|
||||
|
||||
// Paiement
|
||||
paymentMethod: 'card' | 'cash' | 'transfer';
|
||||
}
|
||||
|
||||
export default function CheckoutPage(): JSX.Element {
|
||||
const router = useRouter();
|
||||
const { cart, clearCart } = useCart();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
|
||||
const [formData, setFormData] = useState<CheckoutFormData>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
city: '',
|
||||
postalCode: '',
|
||||
country: 'MR',
|
||||
notes: '',
|
||||
createAccount: false,
|
||||
newsletterOptIn: false,
|
||||
paymentMethod: 'card',
|
||||
});
|
||||
|
||||
// Redirection si le panier est vide
|
||||
useEffect(() => {
|
||||
if (cart.items.length === 0) {
|
||||
router.push('/panier');
|
||||
}
|
||||
}, [cart.items.length, router]);
|
||||
|
||||
const subtotal = cart.total;
|
||||
const shipping = subtotal >= 50000 ? 0 : 5000;
|
||||
const tax = 0; // Pas de TVA en Mauritanie pour la démo
|
||||
const total = subtotal + shipping + tax;
|
||||
|
||||
const handleInputChange = (field: keyof CheckoutFormData, value: string | boolean): void => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
// Effacer l'erreur si elle existe
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
// Validation des champs obligatoires
|
||||
if (!formData.firstName.trim()) newErrors.firstName = 'Le prénom est requis';
|
||||
if (!formData.lastName.trim()) newErrors.lastName = 'Le nom est requis';
|
||||
if (!formData.email.trim()) newErrors.email = 'L\'email est requis';
|
||||
if (!formData.phone.trim()) newErrors.phone = 'Le téléphone est requis';
|
||||
if (!formData.address.trim()) newErrors.address = 'L\'adresse est requise';
|
||||
if (!formData.city.trim()) newErrors.city = 'La ville est requise';
|
||||
|
||||
// Validation de l'email
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (formData.email && !emailRegex.test(formData.email)) {
|
||||
newErrors.email = 'Format d\'email invalide';
|
||||
}
|
||||
|
||||
// Validation du téléphone mauritanien
|
||||
const phoneRegex = /^(\+222|222)?[0-9]{8}$/;
|
||||
if (formData.phone && !phoneRegex.test(formData.phone.replace(/\s/g, ''))) {
|
||||
newErrors.phone = 'Format de téléphone invalide (ex: +222 XX XX XX XX)';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simuler l'appel API
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
// Simuler le succès
|
||||
clearCart();
|
||||
router.push('/checkout/success');
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la commande:', error);
|
||||
// Gérer l'erreur
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (cart.items.length === 0) {
|
||||
return null; // Le useEffect redirigera
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pt-20">
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-light tracking-wide text-black mb-2">
|
||||
Finaliser votre commande
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Complétez vos informations pour finaliser votre achat
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Formulaire */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Informations personnelles */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<User className="w-5 h-5" />
|
||||
Informations personnelles
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">Prénom *</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
placeholder="Votre prénom"
|
||||
className={errors.firstName ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="text-sm text-red-500">{errors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">Nom *</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
placeholder="Votre nom"
|
||||
className={errors.lastName ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="text-sm text-red-500">{errors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange('email', e.target.value)}
|
||||
placeholder="votre@email.com"
|
||||
className={errors.email ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-sm text-red-500">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Téléphone *</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange('phone', e.target.value)}
|
||||
placeholder="+222 XX XX XX XX"
|
||||
className={errors.phone ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.phone && (
|
||||
<p className="text-sm text-red-500">{errors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Adresse de livraison */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Truck className="w-5 h-5" />
|
||||
Adresse de livraison
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="address">Adresse *</Label>
|
||||
<Input
|
||||
id="address"
|
||||
value={formData.address}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
placeholder="Rue, quartier..."
|
||||
className={errors.address ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.address && (
|
||||
<p className="text-sm text-red-500">{errors.address}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="city">Ville *</Label>
|
||||
<Select
|
||||
value={formData.city}
|
||||
onValueChange={(value) => handleInputChange('city', value)}
|
||||
>
|
||||
<SelectTrigger className={errors.city ? 'border-red-500' : ''}>
|
||||
<SelectValue placeholder="Choisir une ville" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="nouakchott">Nouakchott</SelectItem>
|
||||
<SelectItem value="nouadhibou">Nouadhibou</SelectItem>
|
||||
<SelectItem value="rosso">Rosso</SelectItem>
|
||||
<SelectItem value="kaedi">Kaédi</SelectItem>
|
||||
<SelectItem value="zouerate">Zouérate</SelectItem>
|
||||
<SelectItem value="atar">Atar</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.city && (
|
||||
<p className="text-sm text-red-500">{errors.city}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="postalCode">Code postal</Label>
|
||||
<Input
|
||||
id="postalCode"
|
||||
value={formData.postalCode}
|
||||
onChange={(e) => handleInputChange('postalCode', e.target.value)}
|
||||
placeholder="Code postal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="country">Pays</Label>
|
||||
<Select
|
||||
value={formData.country}
|
||||
onValueChange={(value) => handleInputChange('country', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="MR">Mauritanie</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Instructions de livraison (optionnel)</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
value={formData.notes}
|
||||
onChange={(e) => handleInputChange('notes', e.target.value)}
|
||||
placeholder="Instructions spéciales pour la livraison..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Méthode de paiement */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CreditCard className="w-5 h-5" />
|
||||
Méthode de paiement
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="card"
|
||||
checked={formData.paymentMethod === 'card'}
|
||||
onChange={(e) => handleInputChange('paymentMethod', e.target.value as 'card')}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<CreditCard className="w-4 h-4" />
|
||||
<span className="font-medium">Carte bancaire</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">Visa, MasterCard</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="cash"
|
||||
checked={formData.paymentMethod === 'cash'}
|
||||
onChange={(e) => handleInputChange('paymentMethod', e.target.value as 'cash')}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span className="font-medium">Paiement à la livraison</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">Espèces uniquement</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="transfer"
|
||||
checked={formData.paymentMethod === 'transfer'}
|
||||
onChange={(e) => handleInputChange('paymentMethod', e.target.value as 'transfer')}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4" />
|
||||
<span className="font-medium">Virement bancaire</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">BIM, BMCI, GBM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Options */}
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="createAccount"
|
||||
checked={formData.createAccount}
|
||||
onCheckedChange={(checked) => handleInputChange('createAccount', checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="createAccount" className="text-sm">
|
||||
Créer un compte pour suivre mes commandes
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="newsletter"
|
||||
checked={formData.newsletterOptIn}
|
||||
onCheckedChange={(checked) => handleInputChange('newsletterOptIn', checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="newsletter" className="text-sm">
|
||||
Recevoir les offres et nouveautés par email
|
||||
</Label>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Résumé de commande */}
|
||||
<div className="space-y-6">
|
||||
{/* Articles */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ShoppingBag className="w-5 h-5" />
|
||||
Votre commande ({cart.itemCount} articles)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{cart.items.map((item) => (
|
||||
<div key={item.id} className="flex gap-3">
|
||||
<div className="relative w-16 h-16 flex-shrink-0">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
fill
|
||||
className="object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium text-sm truncate">{item.name}</h4>
|
||||
<p className="text-sm text-gray-600">Qté: {item.quantity}</p>
|
||||
<p className="font-medium">{formatPrice(item.total)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Résumé des prix */}
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span>Sous-total</span>
|
||||
<span>{formatPrice(subtotal)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span>Livraison</span>
|
||||
<span>{shipping === 0 ? 'Gratuite' : formatPrice(shipping)}</span>
|
||||
</div>
|
||||
|
||||
{tax > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span>TVA</span>
|
||||
<span>{formatPrice(tax)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex justify-between text-lg font-medium">
|
||||
<span>Total</span>
|
||||
<span>{formatPrice(total)}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bouton de commande */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={isLoading}
|
||||
size="lg"
|
||||
className="w-full bg-black text-white hover:bg-gray-800 py-4"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Traitement en cours...
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
Confirmer la commande
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Sécurité */}
|
||||
<div className="text-center space-y-2">
|
||||
<div className="flex items-center justify-center gap-2 text-sm text-gray-600">
|
||||
<Lock className="w-4 h-4" />
|
||||
<span>Paiement 100% sécurisé</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
Vos données sont protégées par cryptage SSL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Retour au panier */}
|
||||
<Button variant="outline" className="w-full" asChild>
|
||||
<Link href="/panier">
|
||||
Retour au panier
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
227
src_backup/app/checkout/success/page.tsx
Normal file
227
src_backup/app/checkout/success/page.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
// src/app/checkout/success/page.tsx
|
||||
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
CheckCircle,
|
||||
Package,
|
||||
Truck,
|
||||
Mail,
|
||||
Phone,
|
||||
Download,
|
||||
Home,
|
||||
ShoppingBag
|
||||
} from 'lucide-react';
|
||||
|
||||
interface OrderDetails {
|
||||
orderNumber: string;
|
||||
date: string;
|
||||
total: string;
|
||||
paymentMethod: string;
|
||||
estimatedDelivery: string;
|
||||
trackingNumber?: string; // Optionnel
|
||||
}
|
||||
|
||||
export default function CheckoutSuccessPage() {
|
||||
const [orderDetails, setOrderDetails] = useState<OrderDetails | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Simuler la récupération des détails de commande
|
||||
const timer = setTimeout(() => {
|
||||
setOrderDetails({
|
||||
orderNumber: `MELHFA-${Date.now().toString().slice(-6)}`,
|
||||
date: new Date().toLocaleDateString('fr-FR'),
|
||||
total: '85.000 MRU',
|
||||
paymentMethod: 'Carte bancaire',
|
||||
estimatedDelivery: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toLocaleDateString('fr-FR'),
|
||||
// trackingNumber sera undefined - pas de problème avec l'interface
|
||||
});
|
||||
setIsLoading(false);
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pt-20 flex items-center justify-center">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-16 h-16 border-4 border-black border-t-transparent rounded-full animate-spin mx-auto" />
|
||||
<p className="text-gray-600">Traitement de votre commande...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pt-20">
|
||||
<div className="max-w-4xl mx-auto px-6 py-16">
|
||||
{/* Success Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle className="w-12 h-12 text-green-600" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-light tracking-wide text-black mb-4">
|
||||
Commande confirmée !
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600 mb-2">
|
||||
Merci pour votre achat
|
||||
</p>
|
||||
|
||||
{orderDetails && (
|
||||
<p className="text-gray-600">
|
||||
Commande n° <span className="font-medium">{orderDetails.orderNumber}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Order Details */}
|
||||
{orderDetails && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
{/* Order Summary */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-lg font-medium mb-6 flex items-center gap-2">
|
||||
<Package className="w-5 h-5" />
|
||||
Détails de la commande
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Numéro de commande</span>
|
||||
<span className="font-medium">{orderDetails.orderNumber}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Date</span>
|
||||
<span className="font-medium">{orderDetails.date}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Total</span>
|
||||
<span className="font-medium text-lg">{orderDetails.total}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Paiement</span>
|
||||
<Badge variant="secondary">{orderDetails.paymentMethod}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Statut</span>
|
||||
<Badge className="bg-green-100 text-green-800">
|
||||
Confirmée
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Delivery Info */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-lg font-medium mb-6 flex items-center gap-2">
|
||||
<Truck className="w-5 h-5" />
|
||||
Informations de livraison
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Livraison estimée</span>
|
||||
<span className="font-medium">{orderDetails.estimatedDelivery}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Méthode</span>
|
||||
<span className="font-medium">Livraison standard</span>
|
||||
</div>
|
||||
|
||||
{orderDetails.trackingNumber ? (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Suivi</span>
|
||||
<Button variant="link" className="p-0 h-auto text-blue-600">
|
||||
{orderDetails.trackingNumber}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<p className="text-sm text-blue-800">
|
||||
<strong>Suivi de commande :</strong> Vous recevrez un numéro de suivi par email dès que votre commande sera expédiée.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Next Steps */}
|
||||
<Card className="mb-8">
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-lg font-medium mb-6">Prochaines étapes</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Mail className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-2">Confirmation par email</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Vous allez recevoir un email de confirmation avec tous les détails de votre commande.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Package className="w-6 h-6 text-yellow-600" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-2">Préparation</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Votre commande est en cours de préparation dans nos ateliers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Truck className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-2">Livraison</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Livraison estimée le {orderDetails?.estimatedDelivery} à votre adresse.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-black text-white hover:bg-gray-800" asChild>
|
||||
<Link href="/boutique">
|
||||
<ShoppingBag className="w-5 h-5 mr-2" />
|
||||
Continuer mes achats
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/">
|
||||
<Home className="w-5 h-5 mr-2" />
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user