Service Detail

1// Service detail + booking page — thin view over useServiceDetail (all logic lives in the hook):
2// pick a slot, enter details, book → hosted checkout. Styled with base44 design tokens (shadcn Tailwind classes).
3import { useParams } from "react-router-dom";
4import { useServiceDetail } from "@/hooks/useServiceDetail";
5import { mediaUrl } from "@/rest/wix-bookings-services";
6import SlotPicker from "@/components/SlotPicker";
7import BookingForm from "@/components/BookingForm";
8
9export default function ServiceDetail() {
10  const { serviceId } = useParams();
11  const d = useServiceDetail(serviceId);
12
13  if (d.notFound) return <Centered>Service not found.</Centered>;
14  if (!d.service) return <Centered>Loading…</Centered>;
15
16  const image = mediaUrl(d.service.media?.mainMedia?.image ?? d.service.media?.items?.[0]?.image ?? d.service.media?.coverMedia?.image);
17  const locations = (d.service.locations || []).map((l) => l.name || l.formattedAddress).filter(Boolean);
18
19  return (
20    <main className="max-w-[1200px] mx-auto p-4 grid gap-8 [grid-template-columns:repeat(auto-fit,minmax(320px,1fr))]">
21      <div>
22        <div className="aspect-[4/3] bg-card rounded-lg overflow-hidden mb-4">
23          {image && <img src={image} alt={d.service.name} className="w-full h-full object-cover" />}
24        </div>
25        <h1 className="font-display m-0 mb-2">{d.service.name}</h1>
26        {d.price && <p className="text-[22px] font-semibold text-primary m-0 mb-4">{d.price}</p>}
27        {d.service.description && (
28          <p className="text-muted-foreground leading-relaxed mb-4">{d.service.description}</p>
29        )}
30        {locations.length > 0 && (
31          <p className="text-muted-foreground text-sm m-0">{locations.join(" · ")}</p>
32        )}
33      </div>
34
35      <div>
36        <h2 className="font-display text-lg m-0 mb-4">Pick a time</h2>
37        <SlotPicker
38          slots={d.slots} cursor={d.cursor} onLoadMore={d.loadMoreSlots}
39          selectedSlot={d.selectedSlot} onPick={d.pickSlot}
40        />
41
42        {d.selectedSlot && (
43          <div className="mt-6">
44            <h2 className="font-display text-lg m-0 mb-4">Your details</h2>
45            <BookingForm
46              contact={d.contact} setContactField={d.setContactField}
47              maxParticipants={d.maxParticipants} participants={d.participants} setParticipants={d.setParticipants}
48              onSubmit={d.submit} submitting={d.submitting} canSubmit={d.canSubmit} error={d.error}
49            />
50          </div>
51        )}
52      </div>
53    </main>
54  );
55}
56
57function Centered({ children }) {
58  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
59}