@wix/agent-skills 1.35.1 → 1.36.1

package/skills/wix-vibe-headless/references/bookings/app/components/SlotPicker.jsx

@@ -1,126 +0,0 @@
-// Bookable-slot picker — pure UI. Slots, paging cursor, and the pick handler come from
-// useServiceDetail (all the slot data wiring lives in that hook).
-//
-// One day at a time: a horizontal strip of the days that HAVE availability, then that day's times
-// bucketed into morning / afternoon / evening. A fortnight of a busy calendar is well over a hundred
-// slots, so listing every day at once buries the booking form and reads as a wall of numbers.
-// Each button's key combines the start time with its schedule/event id so appointment and class slots
-// stay distinct. Styled with base44 design tokens (shadcn Tailwind classes).
-import { useEffect, useState } from "react";
-
-const dayCls = "shrink-0 w-[68px] py-2 px-1 cursor-pointer text-center border rounded-sm transition-colors";
-const dayIdle = "border-border bg-card text-foreground hover:border-foreground/40";
-const dayActive = "border-primary bg-primary text-primary-foreground";
-const timeCls = "py-2.5 px-2 cursor-pointer text-sm font-body border rounded-sm transition-colors";
-const timeIdle = "border-border bg-card text-foreground hover:border-foreground/40";
-const timeActive = "border-primary bg-primary text-primary-foreground";
-
-// localStartDate is "YYYY-MM-DDThh:mm:ss" (no zone), so the first 10 chars are the day key and
-// chars 11–13 are the local hour — no Date parsing needed to bucket by time of day.
-const dayKey = (slot) => slot.localStartDate.slice(0, 10);
-const hourOf = (slot) => Number(slot.localStartDate.slice(11, 13));
-
-const BUCKETS = [
-  { label: "Morning", test: (h) => h < 12 },
-  { label: "Afternoon", test: (h) => h >= 12 && h < 17 },
-  { label: "Evening", test: (h) => h >= 17 },
-];
-
-function groupByDay(slots) {
-  const days = new Map();
-  for (const slot of slots) {
-    const key = dayKey(slot);
-    if (!days.has(key)) days.set(key, []);
-    days.get(key).push(slot);
-  }
-  return [...days.entries()].map(([key, daySlots]) => ({ key, slots: daySlots }));
-}
-
-const fmtDay = (key, opts) => new Date(`${key}T00:00:00`).toLocaleDateString(undefined, opts);
-const fmtTime = (slot) =>
-  new Date(slot.localStartDate).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
-
-export default function SlotPicker({ slots, cursor, onLoadMore, selectedSlot, onPick }) {
-  const days = groupByDay(slots || []);
-  const [activeDay, setActiveDay] = useState(null);
-
-  // Follow the data: land on the first day with availability, and don't strand the view on a day that
-  // disappeared when a later page loaded.
-  useEffect(() => {
-    if (days.length && !days.some((d) => d.key === activeDay)) setActiveDay(days[0].key);
-  }, [days, activeDay]);
-
-  if (!slots?.length) {
-    return <p className="text-muted-foreground">No available times in this range — try later.</p>;
-  }
-
-  const current = days.find((d) => d.key === activeDay) ?? days[0];
-  const buckets = BUCKETS
-    .map((b) => ({ label: b.label, slots: current.slots.filter((s) => b.test(hourOf(s))) }))
-    .filter((b) => b.slots.length);
-
-  const pickDay = (key) => {
-    setActiveDay(key);
-    // Drop a time chosen on another day — otherwise the CTA names a time that isn't on screen.
-    if (selectedSlot && dayKey(selectedSlot) !== key) onPick(null);
-  };
-
-  return (
-    <div className="flex flex-col gap-5">
-      <div className="flex gap-2 overflow-x-auto" role="group" aria-label="Choose a day">
-        {days.map((d) => {
-          const active = d.key === current.key;
-          return (
-            <button key={d.key} type="button" aria-pressed={active} onClick={() => pickDay(d.key)}
-              className={`${dayCls} ${active ? dayActive : dayIdle}`}>
-              <span className="block text-[10px] uppercase tracking-wide opacity-70">
-                {fmtDay(d.key, { weekday: "short" })}
-              </span>
-              <span className="block text-lg font-semibold leading-tight">
-                {fmtDay(d.key, { day: "numeric" })}
-              </span>
-            </button>
-          );
-        })}
-        {/* Later dates are another page, not more of this one — fetch on demand from the strip's end. */}
-        {cursor && (
-          <button type="button" onClick={onLoadMore}
-            className={`${dayCls} ${dayIdle} text-[11px] leading-tight`}>
-            More<br />dates →
-          </button>
-        )}
-      </div>
-
-      <div>
-        <div className="flex flex-wrap items-baseline justify-between gap-2 mb-3">
-          <h3 className="m-0 font-display text-base">
-            {fmtDay(current.key, { weekday: "long", day: "numeric", month: "short" })}
-          </h3>
-          <span className="text-[13px] text-muted-foreground">
-            {current.slots.length} {current.slots.length === 1 ? "time" : "times"} free
-          </span>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          {buckets.map((b) => (
-            <div key={b.label}>
-              <p className="m-0 mb-2 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">{b.label}</p>
-              <div className="grid grid-cols-3 gap-2">
-                {b.slots.map((slot) => {
-                  const active = selectedSlot?.localStartDate === slot.localStartDate;
-                  return (
-                    <button key={`${slot.localStartDate}-${slot.scheduleId || slot.eventInfo?.eventId}`}
-                      type="button" aria-pressed={active} onClick={() => onPick(slot)}
-                      className={`${timeCls} ${active ? timeActive : timeIdle}`}>
-                      {fmtTime(slot)}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/bookings/app/hooks/useRentalDuration.js

@@ -1,128 +0,0 @@
-// useRentalDuration — the extra step a rental has and an ordinary service doesn't: once the
-// customer has picked a START, they pick how LONG, and the price follows the length.
-//
-// Compose it with useServiceDetail rather than replacing it. That hook already loads the
-// service, lists start times, holds the contact fields and runs bookAndCheckout — all of which
-// a rental uses unchanged. This adds only the second choice and its price:
-//
-//   const detail = useServiceDetail(serviceId);                       // service + start slots
-//   const rental = useRentalDuration(detail.service, detail.selectedSlot, detail.timeZone);
-//   // render detail.slots → customer picks a start → render rental.options → picks a length
-//   // book with rental.endDate as the slot's localEndDate
-//
-// Returns empty options for a non-rental service, so a page that renders both kinds needs no
-// branch of its own — `isRental(service)` decides whether to show the length step at all.
-import { useCallback, useEffect, useState } from "react";
-import {
-  dailyEndOptions,
-  isRental,
-  listEndOptions,
-  previewRentalPrice,
-  rentalDuration,
-} from "@/rest/wix-bookings-rentals";
-
-/** "1 hr 30 min" / "2 days" — the label for one length option. */
-function lengthLabel(startLocal, endLocal, unit) {
-  if (unit === "DAY") {
-    const days = Math.round((new Date(`${endLocal}Z`) - new Date(`${startLocal}Z`)) / 86400000);
-    return days === 1 ? "1 day" : `${days} days`;
-  }
-  const minutes = Math.round((new Date(`${endLocal}Z`) - new Date(`${startLocal}Z`)) / 60000);
-  const h = Math.floor(minutes / 60);
-  const m = minutes % 60;
-  return [h ? `${h} hr` : "", m ? `${m} min` : ""].filter(Boolean).join(" ") || "0 min";
-}
-
-/**
- * @param {object|null} service   The service from useServiceDetail — may be null while loading.
- * @param {object|null} startSlot The slot the customer picked (its localStartDate is the start).
- * @param {string|null} timeZone  The zone the slot list came back in.
- * @returns {{
- *   isRental: boolean,
- *   duration: { unit: "HOUR"|"DAY", min: number, max: number, step: number }|null,
- *   options: { localEndDate: string, label: string }[],
- *   selected: object|null,
- *   select: (option: object) => void,
- *   endDate: string|null,   // pass as the booking's localEndDate
- *   price: { total: string, currency: string|null }|null,
- *   loading: boolean,
- *   error: string|null,
- * }}
- */
-export function useRentalDuration(service, startSlot, timeZone) {
-  const [options, setOptions] = useState([]);
-  const [selected, setSelected] = useState(null);
-  const [price, setPrice] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  const rental = isRental(service);
-  const duration = rentalDuration(service);
-  const start = startSlot?.localStartDate ?? null;
-  // Forward the chosen slot's own location to end-options.
-  const location = startSlot?.location ?? null;
-  const serviceId = service?._id || service?.id || null;
-
-  // A new start invalidates the lengths that were valid for the previous one.
-  useEffect(() => {
-    setSelected(null);
-    setPrice(null);
-    if (!rental || !start || !serviceId) {
-      setOptions([]);
-      return;
-    }
-    let alive = true;
-    setLoading(true);
-    setError(null);
-    const load = duration.unit === "DAY"
-      ? dailyEndOptions(service, { localStartDate: start, timeZone })
-          .then((list) => list.map((o) => ({ localEndDate: o.localEndDate, label: lengthLabel(start, o.localEndDate, "DAY") })))
-      : listEndOptions(serviceId, { localStartDate: start, location, timeZone })
-          .then(({ endOptions }) =>
-            endOptions.map((o) => ({ localEndDate: o.localEndDate, label: lengthLabel(start, o.localEndDate, "HOUR") })),
-          );
-    load
-      .then((list) => {
-        if (!alive) return;
-        setOptions(list);
-        setLoading(false);
-      })
-      .catch((e) => {
-        if (!alive) return;
-        // Fail loudly — an empty length list and a failed call look identical on screen
-        // otherwise, and the second one is a bug the visitor should not absorb silently.
-        setError(e?.message || "Could not load available lengths.");
-        setOptions([]);
-        setLoading(false);
-      });
-    return () => {
-      alive = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rental, serviceId, start, timeZone, duration?.unit]);
-
-  // The price comes from the server for the chosen length — never multiply the rate locally.
-  const select = useCallback(
-    (option) => {
-      setSelected(option);
-      setPrice(null);
-      if (!option || !serviceId || !start || !timeZone) return;
-      previewRentalPrice(serviceId, { localStartDate: start, localEndDate: option.localEndDate, timeZone })
-        .then((p) => setPrice({ total: p.total, currency: p.currency }))
-        .catch((e) => setError(e?.message || "Could not price that length."));
-    },
-    [serviceId, start, timeZone],
-  );
-
-  return {
-    isRental: rental,
-    duration,
-    options,
-    selected,
-    select,
-    endDate: selected?.localEndDate ?? null,
-    price,
-    loading,
-    error,
-  };
-}

package/skills/wix-vibe-headless/references/bookings/app/hooks/useServiceDetail.js

@@ -1,110 +0,0 @@
-// useServiceDetail — all detail + booking-flow logic, no markup: load a service by id, list its
-// bookable slots, hold the buyer's slot/contact/participant selections, then re-validate and book +
-// check out in one step. The data paths here are the bug-prone part — keep them verbatim; the
-// ServiceDetail page and the SlotPicker/BookingForm components only render what this returns.
-import { useState, useEffect, useMemo, useCallback } from "react";
-import { getService, listSlotsForService, getAvailableSlot } from "@/rest/wix-bookings-services";
-import { bookAndCheckout } from "@/rest/wix-bookings-checkout";
-import {
-  serviceCapacityLabel, serviceDuration, serviceLocationLabel, servicePriceLabel, serviceRescheduleNote,
-} from "@/lib/serviceFacts";
-
-// Local wall-clock "YYYY-MM-DDThh:mm:ss" (NO zone / Z) — the slot APIs interpret it in the
-// visitor's timeZone. Sending a UTC `Z` timestamp to the slot APIs is wrong.
-function localMidnight(daysFromNow = 0) {
-  const d = new Date();
-  d.setDate(d.getDate() + daysFromNow);
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`;
-}
-
-export function useServiceDetail(serviceId) {
-  const [service, setService] = useState(null);
-  const [notFound, setNotFound] = useState(false);
-  const [slots, setSlots] = useState([]);
-  const [cursor, setCursor] = useState(null);
-  const [timeZone, setTimeZone] = useState(null);
-  const [selectedSlot, setSelectedSlot] = useState(null);
-  const [contact, setContact] = useState({ firstName: "", lastName: "", email: "", phone: "" });
-  const [participants, setParticipants] = useState(1);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    // getService returns null on a miss — show not-found, never invent a service. A rejected
-    // request (network, 4xx) must also resolve the page to not-found, never leave it loading forever.
-    getService(serviceId).then((s) => (s ? setService(s) : setNotFound(true))).catch(() => setNotFound(true));
-  }, [serviceId]);
-
-  useEffect(() => {
-    if (!service) return;
-    // listSlotsForService routes by service.type (APPOINTMENT → working hours, CLASS → sessions) and
-    // returns { slots, nextCursor }. The LIST call takes fromLocalDate / toLocalDate — a different
-    // arg naming than the single-slot re-validate call (getAvailableSlot: localStartDate/localEndDate).
-    listSlotsForService(service, { fromLocalDate: localMidnight(0), toLocalDate: localMidnight(14) })
-      .then(({ slots, nextCursor, timeZone }) => { setSlots(slots); setCursor(nextCursor); setTimeZone(timeZone); })
-      .catch(() => setSlots([]));
-  }, [service]);
-
-  const loadMoreSlots = useCallback(() => {
-    if (!service || !cursor) return;
-    listSlotsForService(service, { cursor }).then(({ slots: more, nextCursor }) => {
-      setSlots((s) => [...s, ...more]);
-      setCursor(nextCursor);
-    });
-  }, [service, cursor]);
-
-  // maxParticipantsPerBooking is the per-booking cap (commonly 1 → no selector; book exactly one).
-  // Never use slot.remainingCapacity as the per-buyer limit — a count above the policy makes
-  // createBooking fail.
-  const maxParticipants = service?.bookingPolicy?.participantsPolicy?.maxParticipantsPerBooking ?? 1;
-
-  const facts = useMemo(() => ({
-    price: servicePriceLabel(service),
-    minutes: serviceDuration(service),
-    capacity: serviceCapacityLabel(service),
-    location: serviceLocationLabel(service),
-    rescheduleNote: serviceRescheduleNote(service),
-    // Manual approval means the business confirms afterwards, so the CTA must not promise a booking.
-    needsApproval: service?.onlineBooking?.requireManualApproval === true,
-  }), [service]);
-
-  const setContactField = (k) => (e) => setContact((c) => ({ ...c, [k]: e.target.value }));
-  const canSubmit = Boolean(selectedSlot && contact.email && !submitting);
-
-  const submit = useCallback(async () => {
-    if (!selectedSlot || !service) return;
-    setSubmitting(true);
-    setError(null);
-    try {
-      // Re-validate right before booking — slots get taken. getAvailableSlot returns the slot or NULL
-      // (guard it); the single-slot call uses localStartDate / localEndDate (not from/toLocalDate).
-      const fresh = await getAvailableSlot(service.id, {
-        localStartDate: selectedSlot.localStartDate,
-        localEndDate: selectedSlot.localEndDate,
-      });
-      if (!fresh) {
-        setSelectedSlot(null);
-        setError("That time was just taken — please pick another.");
-        return;
-      }
-      // bookAndCheckout = createBooking(slot, contact, options) then checkoutBooking; it returns
-      // { booking, checkoutUrl } — redirect straight to the hosted checkout, never a hand-built URL.
-      const { checkoutUrl } = await bookAndCheckout(fresh, contact, { totalParticipants: participants });
-      window.location.href = checkoutUrl;
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setSubmitting(false);
-    }
-  }, [service, selectedSlot, contact, participants]);
-
-  return {
-    service, notFound, facts, timeZone,
-    slots, cursor, loadMoreSlots,
-    selectedSlot, pickSlot: setSelectedSlot,
-    contact, setContactField,
-    maxParticipants, participants, setParticipants,
-    submitting, error, canSubmit, submit,
-  };
-}

package/skills/wix-vibe-headless/references/bookings/app/hooks/useServices.js

@@ -1,58 +0,0 @@
-// useServices — the services-list data, no markup: load one page of visitor-visible services, page
-// with the returned offset, and expose the categories those services belong to so the page can offer
-// a filter. queryServices returns an OBJECT ({ services, total, nextOffset }), NOT a bare array —
-// destructure it (calling .map on the object throws). `total === 0` is the empty-state signal;
-// `services === null` means still loading.
-//
-// The category menu is built from the first unfiltered page, so it lists only categories that have
-// something bookable in them. Switching category re-queries server-side rather than filtering the
-// loaded page, so a category whose services sit on page 2 still fills in.
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { categoriesOf, queryServices, queryServicesByCategory } from "@/rest/wix-bookings-services";
-
-export function useServices({ limit = 24 } = {}) {
-  const [services, setServices] = useState(null);
-  const [total, setTotal] = useState(null);
-  const [nextOffset, setNextOffset] = useState(null);
-  const [allCategories, setAllCategories] = useState([]);
-  const [activeCategory, setActiveCategory] = useState(null);   // null = every service
-  const [error, setError] = useState(null);
-
-  const load = useCallback(async (categoryId) => {
-    setServices(null);
-    setError(null);
-    try {
-      const res = categoryId
-        ? await queryServicesByCategory(categoryId, { limit })
-        : await queryServices({ limit });
-      setServices(res.services);
-      setTotal(res.total);
-      setNextOffset(res.nextOffset);
-      // Only the unfiltered page can describe the whole menu; a filtered one lists one category.
-      if (!categoryId) setAllCategories(categoriesOf(res.services));
-    } catch (e) {
-      setError(e?.message || "Couldn't load services.");
-      setServices([]);
-    }
-  }, [limit]);
-
-  useEffect(() => { load(activeCategory?.id ?? null); }, [activeCategory, load]);
-
-  const loadMore = useCallback(async () => {
-    if (nextOffset == null) return;                            // null on the last page
-    const res = activeCategory
-      ? await queryServicesByCategory(activeCategory.id, { limit, offset: nextOffset })
-      : await queryServices({ limit, offset: nextOffset });
-    setServices((s) => [...(s || []), ...res.services]);
-    setNextOffset(res.nextOffset);
-  }, [activeCategory, limit, nextOffset]);
-
-  // One category is not a choice — hide the menu rather than show a single chip that does nothing.
-  const categories = useMemo(() => (allCategories.length > 1 ? allCategories : []), [allCategories]);
-
-  return {
-    services, total, nextOffset, loadMore, error,
-    categories, activeCategory, setActiveCategory,
-    retry: () => load(activeCategory?.id ?? null),
-  };
-}

package/skills/wix-vibe-headless/references/bookings/app/lib/serviceFacts.js

@@ -1,95 +0,0 @@
-// Small facts derived from a Service payload, shared by the card and the detail page so "60 MIN",
-// the price, and "1-to-1" are computed once instead of drifting between the two call sites.
-
-/**
- * Session length in minutes for an APPOINTMENT, else null: a CLASS/COURSE leaves
- * schedule.availabilityConstraints empty because its length belongs to the scheduled sessions, not
- * the service. For a class, derive it from a fetched slot (localEndDate − localStartDate).
- * @param {object} service
- * @returns {number|null}
- */
-export function serviceDuration(service) {
-  const c = service?.schedule?.availabilityConstraints;
-  return c?.sessionDurations?.[0] ?? c?.durations?.[0]?.minutes ?? null;
-}
-
-/**
- * Price label for every rateType. Reading payment.fixed alone renders nothing at all for a VARIED or
- * NO_FEE service, which is why this branches instead.
- *   FIXED       -> "€95.00" (formattedValue when present, else built from value+currency)
- *   VARIED      -> "From €85.00" (payment.varied.minPrice, falling back to defaultPrice)
- *   NO_FEE      -> "Free"
- *   CUSTOM      -> "" (business sets a price at booking time — nothing to show)
- *   SUBSCRIPTION-> "" (paid via a pricing plan, not a per-booking price)
- * @param {object} service
- * @returns {string}
- */
-export function servicePriceLabel(service) {
-  const payment = service?.payment;
-  const money = (m) => m?.formattedValue
-    || (m?.currency && new Intl.NumberFormat(undefined, { style: "currency", currency: m.currency }).format(Number(m.value)));
-  switch (payment?.rateType) {
-    case "FIXED":
-      return money(payment.fixed?.price) || "";
-    case "VARIED": {
-      const from = money(payment.varied?.minPrice ?? payment.varied?.defaultPrice);
-      return from ? `From ${from}` : "";
-    }
-    case "NO_FEE":
-      return "Free";
-    default:
-      return ""; // CUSTOM / SUBSCRIPTION — no single number to show
-  }
-}
-
-/**
- * "1-to-1" for a single-person service, "Up to N" otherwise. defaultCapacity is the service's own
- * cap — for a CLASS this is usually the room/session size, for an APPOINTMENT usually 1.
- * @param {object} service
- * @returns {string|null}
- */
-export function serviceCapacityLabel(service) {
-  const cap = service?.defaultCapacity;
-  if (!cap) return null;
-  return cap === 1 ? "1-to-1" : `Up to ${cap}`;
-}
-
-/**
- * Where the service happens, from locations[].type — NOT from payment.options, which says how a
- * customer may *pay* (`online` there means "can pay online", not "happens online"). A video service
- * is flagged by conferencing.enabled. `calculatedAddress` is present on BUSINESS/CUSTOM locations
- * and empty for CUSTOMER; when it's there, prefer the actual place name.
- *   BUSINESS -> the business's address ("At Serene Spa" / "In person")
- *   CUSTOMER -> the customer's address ("At your location")
- *   CUSTOM   -> a specific address for this service
- * @param {object} service
- * @returns {string}
- */
-export function serviceLocationLabel(service) {
-  if (service?.conferencing?.enabled) return "Online";
-  const types = new Set((service?.locations || []).map((l) => l?.type).filter(Boolean));
-  const named = (service?.locations || [])
-    .map((l) => l?.calculatedAddress?.formatted || l?.business?.name)
-    .find(Boolean);
-  if (named) return named;
-  if (types.has("CUSTOMER")) return "At your location";
-  if (types.has("BUSINESS") || types.has("CUSTOM")) return "In person";
-  return "";
-}
-
-/**
- * The reschedule footnote, e.g. "Free to reschedule up to 24 hours before." `enabled` without
- * `limitLatestReschedule` means any time; with it, the window is latestRescheduleInMinutes. Empty
- * when rescheduling is off, so the page shows no promise rather than a wrong one.
- * @param {object} service
- * @returns {string}
- */
-export function serviceRescheduleNote(service) {
-  const p = service?.bookingPolicy?.reschedulePolicy;
-  if (!p?.enabled) return "";
-  if (!p.limitLatestReschedule) return "Free to reschedule any time before your appointment.";
-  const hours = Math.round((p.latestRescheduleInMinutes ?? 0) / 60);
-  return hours > 0
-    ? `Free to reschedule up to ${hours} hour${hours === 1 ? "" : "s"} before.`
-    : "Free to reschedule right up until your appointment.";
-}

package/skills/wix-vibe-headless/references/bookings/app/pages/ServiceDetail.jsx

@@ -1,94 +0,0 @@
-// Service detail + booking page — thin view over useServiceDetail (all logic lives in the hook):
-// pick a slot, enter details, book → hosted checkout. Two columns: what you're booking on the left,
-// the booking panel on the right, sticky on desktop so the times stay in reach while reading.
-// Styled with base44 design tokens (shadcn Tailwind classes).
-import { useParams } from "@/lib/nav";
-import { useServiceDetail } from "@/hooks/useServiceDetail";
-import { mediaUrl } from "@/rest/wix-bookings-services";
-import SlotPicker from "@/components/SlotPicker";
-import BookingForm from "@/components/BookingForm";
-
-export default function ServiceDetail() {
-  const { serviceId } = useParams();
-  const d = useServiceDetail(serviceId);
-
-  if (d.notFound) return <Centered>Service not found.</Centered>;
-  if (!d.service) return <Centered>Loading…</Centered>;
-
-  const image = mediaUrl(d.service.media?.mainMedia?.image ?? d.service.media?.items?.[0]?.image ?? d.service.media?.coverMedia?.image);
-  const { price, minutes, capacity, location, rescheduleNote, needsApproval } = d.facts;
-
-  return (
-    <main className="max-w-[1200px] mx-auto p-4 grid gap-8 items-start lg:[grid-template-columns:1fr_minmax(360px,420px)]">
-      <div>
-        <div className="aspect-[4/3] bg-card rounded-lg overflow-hidden mb-5">
-          {image && <img src={image} alt={d.service.name} className="w-full h-full object-cover" />}
-        </div>
-
-        {d.service.category?.name && (
-          <p className="m-0 mb-1.5 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">
-            {d.service.category.name}
-          </p>
-        )}
-        <h1 className="font-display m-0 mb-3">{d.service.name}</h1>
-        {d.service.description && (
-          <p className="text-muted-foreground leading-relaxed mb-6 max-w-[62ch]">{d.service.description}</p>
-        )}
-
-        {/* The three facts a buyer checks before picking a time. Each cell renders only when the
-            service actually carries it, so a class with no fixed duration doesn't leave a blank. */}
-        <dl className="m-0 flex flex-wrap border border-border rounded-lg overflow-hidden divide-x divide-border">
-          {minutes && <Fact label="Duration" value={`${minutes} minutes`} />}
-          {price && <Fact label="Price" value={price} />}
-          {location && <Fact label="Where" value={location} />}
-          {!minutes && capacity && <Fact label="Capacity" value={capacity} />}
-        </dl>
-      </div>
-
-      <div className="min-w-0 bg-card border border-border rounded-lg p-5 lg:sticky lg:top-4">
-        <div className="flex flex-wrap items-baseline justify-between gap-2 mb-4">
-          <h2 className="font-display text-lg m-0">Choose a time</h2>
-          {/* The zone the API returned the times in — not a locally guessed one, so the label and
-              the times on screen can't disagree. */}
-          {d.timeZone && (
-            <span className="text-[13px] text-muted-foreground">Times in {d.timeZone.replace(/_/g, " ")}</span>
-          )}
-        </div>
-
-        <SlotPicker
-          slots={d.slots} cursor={d.cursor} onLoadMore={d.loadMoreSlots}
-          selectedSlot={d.selectedSlot} onPick={d.pickSlot}
-        />
-
-        {d.selectedSlot && (
-          <div className="mt-6 pt-6 border-t border-border">
-            <BookingForm
-              contact={d.contact} setContactField={d.setContactField}
-              maxParticipants={d.maxParticipants} participants={d.participants} setParticipants={d.setParticipants}
-              onSubmit={d.submit} submitting={d.submitting} canSubmit={d.canSubmit} error={d.error}
-              needsApproval={needsApproval}
-              timeLabel={new Date(d.selectedSlot.localStartDate).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}
-              priceLabel={price}
-            />
-            <p className="m-0 mt-3 text-[13px] text-muted-foreground text-center">
-              You'll pay on the next screen.{rescheduleNote ? ` ${rescheduleNote}` : ""}
-            </p>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-}
-
-function Fact({ label, value }) {
-  return (
-    <div className="flex-1 min-w-[110px] p-3">
-      <dt className="m-0 text-[11px] uppercase tracking-wide text-muted-foreground">{label}</dt>
-      <dd className="m-0 mt-0.5 font-semibold">{value}</dd>
-    </div>
-  );
-}
-
-function Centered({ children }) {
-  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
-}