@wix/agent-skills 1.15.1 → 1.16.0

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

@@ -0,0 +1,126 @@
+// 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/useServiceDetail.js

@@ -0,0 +1,108 @@
+// 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.
+    getService(serviceId).then((s) => (s ? setService(s) : 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); });
+  }, [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

@@ -0,0 +1,58 @@
+// 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

@@ -0,0 +1,95 @@
+// 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

@@ -0,0 +1,94 @@
+// 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 "react-router-dom";
+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>;
+}

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

@@ -0,0 +1,89 @@
+// Services / listing page — lists visitor-visible services with a category filter, plus the empty
+// and failed states. Thin view over useServices (all data lives in the hook). Styled with base44
+// design tokens (shadcn Tailwind classes).
+import { useServices } from "@/hooks/useServices";
+import ServiceGrid from "@/components/ServiceGrid";
+
+export default function Services() {
+  const s = useServices({ limit: 24 });
+
+  if (s.error) {
+    return (
+      <main className="max-w-[1200px] mx-auto p-4">
+        <div role="alert" className="flex flex-col items-center gap-3 py-16 text-center">
+          <p className="m-0 text-muted-foreground">{s.error}</p>
+          <button onClick={s.retry}
+            className="border border-border bg-card text-foreground rounded-sm py-2 px-4 cursor-pointer text-sm">
+            Try again
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="max-w-[1200px] mx-auto p-4">
+      <h1 className="font-display mb-4">{s.activeCategory?.name || "Services"}</h1>
+
+      {s.categories.length > 0 && (
+        <nav aria-label="Categories" className="flex flex-wrap gap-2 mb-6">
+          <CategoryChip active={!s.activeCategory} onClick={() => s.setActiveCategory(null)}>All</CategoryChip>
+          {s.categories.map((c) => (
+            <CategoryChip key={c.id} active={s.activeCategory?.id === c.id} onClick={() => s.setActiveCategory(c)}>
+              {c.name}
+            </CategoryChip>
+          ))}
+        </nav>
+      )}
+
+      {s.services === null
+        ? <ServiceGridSkeleton />
+        : <>
+            <ServiceGrid
+              services={s.services}
+              empty={s.activeCategory
+                ? `Nothing in ${s.activeCategory.name} yet.`
+                : "No services yet — add one from your Wix dashboard."}
+            />
+            {s.nextOffset != null && (
+              <div className="text-center mt-6">
+                <button onClick={s.loadMore}
+                  className="px-5 py-2.5 cursor-pointer bg-card text-foreground border border-border rounded-sm">
+                  Load more
+                </button>
+              </div>
+            )}
+          </>}
+    </main>
+  );
+}
+
+function CategoryChip({ active, onClick, children }) {
+  return (
+    <button onClick={onClick} aria-pressed={active}
+      className={`py-1.5 px-3 cursor-pointer text-sm rounded-sm border ${
+        active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-foreground"
+      }`}>{children}</button>
+  );
+}
+
+// Matches ServiceCard's 4:3 image + three text lines, so nothing shifts when the services land.
+function ServiceGridSkeleton({ count = 6 }) {
+  return (
+    <div className="grid gap-4 grid-cols-2 md:[grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]" aria-hidden="true">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="bg-card border border-border rounded-lg overflow-hidden">
+          <div className="aspect-[4/3] bg-muted animate-pulse" />
+          <div className="p-3 flex flex-col gap-2">
+            <div className="flex justify-between gap-3">
+              <div className="h-3.5 w-1/2 bg-muted rounded-sm animate-pulse" />
+              <div className="h-3.5 w-1/5 bg-muted rounded-sm animate-pulse" />
+            </div>
+            <div className="h-3 w-3/4 bg-muted rounded-sm animate-pulse" />
+            <div className="h-2.5 w-1/3 bg-muted rounded-sm animate-pulse" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/skills/wix-vibe-headless/references/bookings/{wix-bookings-checkout.js → app/rest/wix-bookings-checkout.js}

@@ -104,7 +104,7 @@ export async function createBooking(slot, contactDetails, { totalParticipants =
  * Create an eCommerce checkout for a created booking and return the hosted checkout URL.
  * Redirect the buyer there (window.location.href = ...). On return, the booking is confirmed.
  * Throws if no redirect URL is produced.
- * https://dev.wix.com/docs/rest/business-solutions/e-commerce/checkout/create-checkout.md
+ * https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/checkout.md
  * @param {string} bookingId  booking.id from createBooking().
  * @returns {Promise<string>} The hosted-checkout URL to redirect to.
  */