PTS/PromptTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix HTML rendering for service descriptions, allow zero price for services, improve image_url handling

Browse Source
This commit is contained in:
Kristen Hercules
2026-02-01 22:31:00 -06:00
parent d3cad0e5fa
commit 72f17c8be9
32 changed files with 6958 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
frontend/src/pages/ServiceDetail.js
View File

@@ -1,21 +1,29 @@
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 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';
} from "../components/ui/dialog";
import { toast } from "sonner";
const API = `${process.env.REACT_APP_BACKEND_URL}/api`;
@@ -27,11 +35,11 @@ const ServiceDetail = () => {
const [bookingOpen, setBookingOpen] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
preferred_date: '',
notes: ''
name: "",
email: "",
phone: "",
preferred_date: "",
notes: "",
});
useEffect(() => {
@@ -40,7 +48,7 @@ const ServiceDetail = () => {
const response = await axios.get(`${API}/services/${id}`);
setService(response.data);
} catch (error) {
console.error('Failed to fetch service:', error);
console.error("Failed to fetch service:", error);
} finally {
setLoading(false);
}
@@ -55,13 +63,21 @@ const ServiceDetail = () => {
try {
await axios.post(`${API}/services/book`, {
service_id: service.id,
...formData
...formData,
});
toast.success('Booking submitted successfully! We will contact you soon.');
toast.success(
"Booking submitted successfully! We will contact you soon.",
);
setBookingOpen(false);
setFormData({ name: '', email: '', phone: '', preferred_date: '', notes: '' });
setFormData({
name: "",
email: "",
phone: "",
preferred_date: "",
notes: "",
});
} catch (error) {
toast.error('Failed to submit booking. Please try again.');
toast.error("Failed to submit booking. Please try again.");
} finally {
setSubmitting(false);
}
@@ -85,7 +101,9 @@ const ServiceDetail = () => {
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>
<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>
@@ -124,26 +142,33 @@ const ServiceDetail = () => {
<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">
<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
className="text-lg text-muted-foreground leading-relaxed prose prose-lg max-w-none"
data-testid="service-description"
dangerouslySetInnerHTML={{ __html: service.description }}
/>
</div>
<Separator />
{/* What's Included */}
<div>
<h3 className="text-xl font-semibold mb-4 font-['Outfit']">What's Included</h3>
<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'
"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">
@@ -159,18 +184,37 @@ const ServiceDetail = () => {
{/* Process */}
<div>
<h3 className="text-xl font-semibold mb-4 font-['Outfit']">How It Works</h3>
<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' }
{
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
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>
<h4 className="font-semibold mb-1 font-['Outfit']">
{item.title}
</h4>
<p className="text-sm text-muted-foreground">{item.desc}</p>
</div>
))}
@@ -182,9 +226,16 @@ const ServiceDetail = () => {
<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)}
<span className="text-sm text-muted-foreground">
{service.price > 0 ? "Starting from" : "Price"}
</span>
<p
className="text-3xl font-bold font-['Outfit']"
data-testid="service-price"
>
{service.price > 0
? `$${service.price.toFixed(2)}`
: "Contact for quote"}
</p>
</div>
@@ -195,13 +246,19 @@ const ServiceDetail = () => {
<Dialog open={bookingOpen} onOpenChange={setBookingOpen}>
<DialogTrigger asChild>
<Button className="w-full rounded-full btn-press" size="lg" data-testid="book-now-button">
<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>
<DialogTitle className="font-['Outfit']">
Book {service.name}
</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
<div className="space-y-2">
@@ -213,7 +270,9 @@ const ServiceDetail = () => {
placeholder="John Doe"
className="pl-10"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
required
data-testid="booking-name"
/>
@@ -230,7 +289,9 @@ const ServiceDetail = () => {
placeholder="john@example.com"
className="pl-10"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
required
data-testid="booking-email"
/>
@@ -247,7 +308,9 @@ const ServiceDetail = () => {
placeholder="+1 234 567 890"
className="pl-10"
value={formData.phone}
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, phone: e.target.value })
}
required
data-testid="booking-phone"
/>
@@ -263,7 +326,12 @@ const ServiceDetail = () => {
type="date"
className="pl-10"
value={formData.preferred_date}
onChange={(e) => setFormData({ ...formData, preferred_date: e.target.value })}
onChange={(e) =>
setFormData({
...formData,
preferred_date: e.target.value,
})
}
required
data-testid="booking-date"
/>
@@ -276,18 +344,20 @@ const ServiceDetail = () => {
id="notes"
placeholder="Describe your issue..."
value={formData.notes}
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, notes: e.target.value })
}
data-testid="booking-notes"
/>
</div>
<Button
type="submit"
className="w-full rounded-full"
<Button
type="submit"
className="w-full rounded-full"
disabled={submitting}
data-testid="submit-booking"
>
{submitting ? 'Submitting...' : 'Submit Booking'}
{submitting ? "Submitting..." : "Submit Booking"}
</Button>
</form>
</DialogContent>