308 lines
12 KiB
JavaScript
308 lines
12 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||
|
|
import axios from 'axios';
|
||
|
|
import { ArrowLeft, Clock, Calendar, Check, Phone, Mail, User } from 'lucide-react';
|
||
|
|
import { Button } from '../components/ui/button';
|
||
|
|
import { Badge } from '../components/ui/badge';
|
||
|
|
import { Input } from '../components/ui/input';
|
||
|
|
import { Textarea } from '../components/ui/textarea';
|
||
|
|
import { Label } from '../components/ui/label';
|
||
|
|
import { Separator } from '../components/ui/separator';
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
DialogTrigger,
|
||
|
|
} from '../components/ui/dialog';
|
||
|
|
import { toast } from 'sonner';
|
||
|
|
|
||
|
|
const API = `${process.env.REACT_APP_BACKEND_URL}/api`;
|
||
|
|
|
||
|
|
const ServiceDetail = () => {
|
||
|
|
const { id } = useParams();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [service, setService] = useState(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [bookingOpen, setBookingOpen] = useState(false);
|
||
|
|
const [submitting, setSubmitting] = useState(false);
|
||
|
|
const [formData, setFormData] = useState({
|
||
|
|
name: '',
|
||
|
|
email: '',
|
||
|
|
phone: '',
|
||
|
|
preferred_date: '',
|
||
|
|
notes: ''
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchService = async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get(`${API}/services/${id}`);
|
||
|
|
setService(response.data);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to fetch service:', error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
fetchService();
|
||
|
|
}, [id]);
|
||
|
|
|
||
|
|
const handleSubmit = async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setSubmitting(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
await axios.post(`${API}/services/book`, {
|
||
|
|
service_id: service.id,
|
||
|
|
...formData
|
||
|
|
});
|
||
|
|
toast.success('Booking submitted successfully! We will contact you soon.');
|
||
|
|
setBookingOpen(false);
|
||
|
|
setFormData({ name: '', email: '', phone: '', preferred_date: '', notes: '' });
|
||
|
|
} catch (error) {
|
||
|
|
toast.error('Failed to submit booking. Please try again.');
|
||
|
|
} finally {
|
||
|
|
setSubmitting(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen py-8 md:py-12">
|
||
|
|
<div className="max-w-4xl mx-auto px-4 md:px-8">
|
||
|
|
<div className="animate-pulse space-y-8">
|
||
|
|
<div className="aspect-video bg-muted rounded-2xl" />
|
||
|
|
<div className="h-8 bg-muted rounded w-1/3" />
|
||
|
|
<div className="h-24 bg-muted rounded" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!service) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen py-8 md:py-12">
|
||
|
|
<div className="max-w-4xl mx-auto px-4 md:px-8 text-center py-16">
|
||
|
|
<h2 className="text-2xl font-bold mb-4 font-['Outfit']">Service not found</h2>
|
||
|
|
<Link to="/services">
|
||
|
|
<Button className="rounded-full">Back to Services</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen py-8 md:py-12">
|
||
|
|
<div className="max-w-4xl mx-auto px-4 md:px-8">
|
||
|
|
{/* Breadcrumb */}
|
||
|
|
<Link
|
||
|
|
to="/services"
|
||
|
|
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-8 transition-colors"
|
||
|
|
data-testid="back-to-services"
|
||
|
|
>
|
||
|
|
<ArrowLeft className="h-4 w-4" />
|
||
|
|
Back to Services
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
{/* Hero Image */}
|
||
|
|
<div className="relative aspect-video rounded-2xl overflow-hidden mb-8">
|
||
|
|
<img
|
||
|
|
src={service.image_url}
|
||
|
|
alt={service.name}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
data-testid="service-image"
|
||
|
|
/>
|
||
|
|
<Badge className="absolute top-4 left-4 capitalize">
|
||
|
|
{service.category}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
|
|
<div className="lg:col-span-2 space-y-6">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl md:text-4xl font-bold font-['Outfit'] mb-4" data-testid="service-title">
|
||
|
|
{service.name}
|
||
|
|
</h1>
|
||
|
|
<p className="text-lg text-muted-foreground leading-relaxed" data-testid="service-description">
|
||
|
|
{service.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Separator />
|
||
|
|
|
||
|
|
{/* What's Included */}
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-semibold mb-4 font-['Outfit']">What's Included</h3>
|
||
|
|
<ul className="space-y-3">
|
||
|
|
{[
|
||
|
|
'Free diagnostic assessment',
|
||
|
|
'Quality replacement parts (if needed)',
|
||
|
|
'Professional service by certified technicians',
|
||
|
|
'30-day warranty on all repairs',
|
||
|
|
'Post-service support'
|
||
|
|
].map((item, idx) => (
|
||
|
|
<li key={idx} className="flex items-center gap-3">
|
||
|
|
<div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||
|
|
<Check className="h-3 w-3 text-primary" />
|
||
|
|
</div>
|
||
|
|
<span className="text-muted-foreground">{item}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Separator />
|
||
|
|
|
||
|
|
{/* Process */}
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-semibold mb-4 font-['Outfit']">How It Works</h3>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
|
|
{[
|
||
|
|
{ step: '1', title: 'Book', desc: 'Schedule your appointment online' },
|
||
|
|
{ step: '2', title: 'Drop Off', desc: 'Bring your device to our store' },
|
||
|
|
{ step: '3', title: 'Pick Up', desc: 'Get your device back fixed' }
|
||
|
|
].map((item, idx) => (
|
||
|
|
<div key={idx} className="text-center p-4 rounded-xl bg-muted/50">
|
||
|
|
<div className="w-10 h-10 mx-auto mb-3 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
|
|
{item.step}
|
||
|
|
</div>
|
||
|
|
<h4 className="font-semibold mb-1 font-['Outfit']">{item.title}</h4>
|
||
|
|
<p className="text-sm text-muted-foreground">{item.desc}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Sidebar */}
|
||
|
|
<div className="lg:col-span-1">
|
||
|
|
<div className="sticky top-24 border border-border rounded-2xl p-6 bg-card space-y-6">
|
||
|
|
<div>
|
||
|
|
<span className="text-sm text-muted-foreground">Starting from</span>
|
||
|
|
<p className="text-3xl font-bold font-['Outfit']" data-testid="service-price">
|
||
|
|
${service.price.toFixed(2)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-3 text-sm">
|
||
|
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
||
|
|
<span>Duration: {service.duration}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Dialog open={bookingOpen} onOpenChange={setBookingOpen}>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button className="w-full rounded-full btn-press" size="lg" data-testid="book-now-button">
|
||
|
|
Book Now
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent className="sm:max-w-md">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="font-['Outfit']">Book {service.name}</DialogTitle>
|
||
|
|
</DialogHeader>
|
||
|
|
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="name">Full Name</Label>
|
||
|
|
<div className="relative">
|
||
|
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
|
|
<Input
|
||
|
|
id="name"
|
||
|
|
placeholder="John Doe"
|
||
|
|
className="pl-10"
|
||
|
|
value={formData.name}
|
||
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
|
|
required
|
||
|
|
data-testid="booking-name"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="email">Email</Label>
|
||
|
|
<div className="relative">
|
||
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
|
|
<Input
|
||
|
|
id="email"
|
||
|
|
type="email"
|
||
|
|
placeholder="john@example.com"
|
||
|
|
className="pl-10"
|
||
|
|
value={formData.email}
|
||
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||
|
|
required
|
||
|
|
data-testid="booking-email"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="phone">Phone</Label>
|
||
|
|
<div className="relative">
|
||
|
|
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
|
|
<Input
|
||
|
|
id="phone"
|
||
|
|
type="tel"
|
||
|
|
placeholder="+1 234 567 890"
|
||
|
|
className="pl-10"
|
||
|
|
value={formData.phone}
|
||
|
|
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||
|
|
required
|
||
|
|
data-testid="booking-phone"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="date">Preferred Date</Label>
|
||
|
|
<div className="relative">
|
||
|
|
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
|
|
<Input
|
||
|
|
id="date"
|
||
|
|
type="date"
|
||
|
|
className="pl-10"
|
||
|
|
value={formData.preferred_date}
|
||
|
|
onChange={(e) => setFormData({ ...formData, preferred_date: e.target.value })}
|
||
|
|
required
|
||
|
|
data-testid="booking-date"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="notes">Additional Notes (Optional)</Label>
|
||
|
|
<Textarea
|
||
|
|
id="notes"
|
||
|
|
placeholder="Describe your issue..."
|
||
|
|
value={formData.notes}
|
||
|
|
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||
|
|
data-testid="booking-notes"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
className="w-full rounded-full"
|
||
|
|
disabled={submitting}
|
||
|
|
data-testid="submit-booking"
|
||
|
|
>
|
||
|
|
{submitting ? 'Submitting...' : 'Submit Booking'}
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
|
||
|
|
<p className="text-xs text-center text-muted-foreground">
|
||
|
|
No payment required for booking
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ServiceDetail;
|