@wix/agent-skills 1.26.0 → 1.27.0

package/skills/wix-headless-templates/bookings/app/components/bookings/ServiceBookingView.tsx

@@ -0,0 +1,369 @@
+// REFERENCE booking surface: time-zone label, staff filter (with photos), the slot picker ONE DAY AT
+// A TIME (a strip of the days that have availability with the week pagers at its ends, then that
+// day's times bucketed into morning / afternoon / evening) with next availability, a course's dates
+// and seats, a class's upcoming sessions, participants, deposit choice, add-ons, the schema-driven
+// form, and the CTA labelled from ctaState — on the @theme tokens. A week of a busy calendar is well
+// over a hundred slots; listing every day at once buries the form and reads as a wall of numbers.
+// Correct and complete; per the skill's model you design and build your own on useBookingFlow.
+// Mount client:only — availability is timezone/session-specific.
+import { useEffect, useState } from "react";
+import { useBookingFlow } from "../../hooks/bookings/useBookingFlow";
+import type { CtaState, ServiceDetail, Slot } from "../../wix/bookings/types";
+
+const chip = (selected: boolean, disabled = false) =>
+  `rounded-control border px-4 py-1.5 text-sm transition-colors ${
+    disabled
+      ? "cursor-not-allowed border-border text-muted-foreground line-through opacity-60"
+      : selected
+        ? "border-primary bg-primary text-primary-foreground"
+        : "border-border text-foreground hover:bg-secondary"
+  }`;
+
+const dayTile = (selected: boolean) =>
+  `w-[68px] shrink-0 rounded-md border px-1 py-2 text-center transition-colors ${selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:bg-secondary"}`;
+const pager = "w-[68px] shrink-0 rounded-md border border-border px-1 py-2 text-center text-xs leading-tight text-foreground transition-colors hover:bg-secondary";
+
+const input = "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-shadow focus:ring-2 focus:ring-primary";
+const heading = "mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground";
+
+// startLocal is "YYYY-MM-DDThh:mm:ss" (no zone): chars 11–13 are the local hour, no Date parsing needed.
+const hourOf = (s: Slot): number => Number(s.startLocal.slice(11, 13));
+const BUCKETS: { label: string; test: (h: number) => boolean }[] = [
+  { label: "Morning", test: (h) => h < 12 },
+  { label: "Afternoon", test: (h) => h >= 12 && h < 17 },
+  { label: "Evening", test: (h) => h >= 17 },
+];
+const fmtDay = (dayKey: string, opts: Intl.DateTimeFormatOptions): string => {
+  try {
+    return new Date(`${dayKey}T12:00:00`).toLocaleDateString(undefined, opts);
+  } catch {
+    return dayKey;
+  }
+};
+
+const dateLabel = (iso: string | null): string => {
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+  } catch {
+    return iso.slice(0, 10);
+  }
+};
+
+/** The CTA label follows ctaState, then the money: the deposit when one is being paid, else the price. */
+function ctaLabel(service: ServiceDetail, ctaState: CtaState, payDeposit: boolean): string {
+  if (ctaState === "viewCourse") return "Not available";
+  const verb = ctaState === "requestToBook" ? "Request to book" : "Book";
+  if (service.free) return `${verb} — free`;
+  if (service.deposit && payDeposit && service.deposit.amount) return `${verb} · deposit ${service.deposit.amount}`;
+  if (!service.price) return verb;
+  return `${verb} · ${service.priceFrom ? "from " : ""}${service.price}`;
+}
+
+export default function ServiceBookingView({ service }: { service: ServiceDetail }) {
+  const {
+    days,
+    nextWeek,
+    prevWeek,
+    jumpTo,
+    nextAvailable,
+    staffId,
+    setStaffId,
+    selectedSlot,
+    setSelectedSlot,
+    timeZoneLabel,
+    displayTimeZone,
+    customerCanChangeTimeZone,
+    setDisplayTimeZone,
+    course,
+    offeredDays,
+    sessions,
+    hasMoreSessions,
+    loadMoreSessions,
+    participants,
+    maxParticipants,
+    setParticipants,
+    payDeposit,
+    setPayDeposit,
+    addOnGroups,
+    addOns,
+    addOnsTotal,
+    toggleAddOn,
+    setAddOnQuantity,
+    canSelectMore,
+    formFields,
+    values,
+    setValue,
+    ctaState,
+    canBook,
+    book,
+    booking,
+    confirmed,
+    error,
+  } = useBookingFlow(service);
+  const [activeDay, setActiveDay] = useState<string | null>(null);
+
+  // Follow the data: land on the first day with availability, and don't strand the view on a day
+  // that left when the week moved.
+  useEffect(() => {
+    if (days && days.length && !days.some((d) => d.dayKey === activeDay)) setActiveDay(days[0].dayKey);
+  }, [days, activeDay]);
+
+  const isCourse = service.type === "COURSE";
+  const current = days?.find((d) => d.dayKey === activeDay) ?? days?.[0] ?? null;
+  const buckets = current ? BUCKETS.map((b) => ({ label: b.label, slots: current.slots.filter((s) => b.test(hourOf(s))) })).filter((b) => b.slots.length) : [];
+  // Switching day drops a slot chosen on another day — otherwise the CTA names a time that isn't on screen.
+  const pickDay = (dayKey: string) => {
+    setActiveDay(dayKey);
+    if (selectedSlot && selectedSlot.dayKey !== dayKey) setSelectedSlot(null);
+  };
+
+  if (confirmed) {
+    const when = isCourse ? (service.course?.startDate ? ` — starts ${dateLabel(service.course.startDate)}` : "") : selectedSlot ? ` — ${selectedSlot.dayKey} at ${selectedSlot.label}` : "";
+    return (
+      <div className="rounded-lg border border-border bg-secondary p-8 text-center">
+        <p className="text-lg font-semibold">{ctaState === "requestToBook" ? "Request sent" : "You're booked!"}</p>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {service.name}
+          {when}.{" "}
+          {ctaState === "requestToBook" ? "You'll hear back once the request is approved." : "A confirmation email is on its way."}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {isCourse && (
+        <div className="mb-5 rounded-lg border border-border p-4 text-sm">
+          <p className={heading}>Course</p>
+          {service.course?.startDate && (
+            <p>
+              {dateLabel(service.course.startDate)}
+              {service.course.endDate ? ` – ${dateLabel(service.course.endDate)}` : ""}
+            </p>
+          )}
+          {offeredDays.length > 0 && <p className="mt-1 text-muted-foreground">{offeredDays.map((d) => d.slice(0, 3)).join(", ")}</p>}
+          {course && course.spotsLeft != null && (
+            <p className="mt-1 text-muted-foreground">{course.full ? "Full" : `${course.spotsLeft} spot${course.spotsLeft === 1 ? "" : "s"} left`}</p>
+          )}
+          {service.course?.ended && <p className="mt-1 text-muted-foreground">This course has ended.</p>}
+        </div>
+      )}
+
+      {service.staff.length > 1 && !isCourse && (
+        <div className="mb-5">
+          <p className={heading}>Staff</p>
+          <div className="flex flex-wrap gap-2">
+            <button type="button" className={chip(staffId === undefined)} onClick={() => setStaffId(undefined)}>
+              Anyone
+            </button>
+            {service.staff.map((m) => (
+              <button key={m.id} type="button" className={`${chip(staffId === m.id)} inline-flex items-center gap-2`} onClick={() => setStaffId(m.id)}>
+                {m.imageUrl && <img src={m.imageUrl} alt="" className="h-5 w-5 rounded-full object-cover" />}
+                {m.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!isCourse && (
+        <>
+          <p className={heading}>Pick a day</p>
+          {days === null ? (
+            <div className="flex gap-2" aria-busy="true">
+              {Array.from({ length: 5 }, (_, i) => (
+                <div key={i} className="h-14 w-[68px] animate-pulse rounded-md bg-secondary" />
+              ))}
+            </div>
+          ) : (
+            <div className="flex gap-2 overflow-x-auto pb-1" role="group" aria-label="Choose a day">
+              <button type="button" onClick={prevWeek} className={pager} aria-label="Previous week">
+                Earlier
+              </button>
+              {days.length === 0 && (
+                <p className="self-center text-sm text-muted-foreground">
+                  No times this week.{" "}
+                  {nextAvailable && nextAvailable.length > 0 ? (
+                    <button type="button" className="underline" onClick={() => jumpTo(nextAvailable[0].dayKey)}>
+                      Next available: {nextAvailable[0].dayKey} at {nextAvailable[0].label}
+                    </button>
+                  ) : nextAvailable === null ? (
+                    "Looking for the next available time…"
+                  ) : (
+                    "Try the next week."
+                  )}
+                </p>
+              )}
+              {days.map((day) => (
+                <button key={day.dayKey} type="button" aria-pressed={day.dayKey === current?.dayKey} className={dayTile(day.dayKey === current?.dayKey)} onClick={() => pickDay(day.dayKey)}>
+                  <span className="block text-[10px] uppercase tracking-wide opacity-70">{fmtDay(day.dayKey, { weekday: "short" })}</span>
+                  <span className="block text-lg font-semibold leading-tight">{fmtDay(day.dayKey, { day: "numeric" })}</span>
+                </button>
+              ))}
+              <button type="button" onClick={nextWeek} className={pager} aria-label="Next week">
+                More
+                <br />
+                dates
+              </button>
+            </div>
+          )}
+
+          {current && (
+            <div className="mt-5">
+              <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
+                <p className="text-sm font-medium">{fmtDay(current.dayKey, { weekday: "long", month: "short", day: "numeric" })}</p>
+                <span className="text-xs text-muted-foreground">
+                  {current.slots.length} {current.slots.length === 1 ? "time" : "times"}
+                  {timeZoneLabel ? ` · in ${timeZoneLabel}` : ""}
+                </span>
+              </div>
+              {customerCanChangeTimeZone && (
+                <p className="mb-3 text-xs text-muted-foreground">
+                  <button type="button" className="underline" onClick={() => setDisplayTimeZone(displayTimeZone === "BUSINESS" ? "CUSTOMER" : "BUSINESS")}>
+                    {displayTimeZone === "BUSINESS" ? "Show in my time zone" : "Show in the business time zone"}
+                  </button>
+                </p>
+              )}
+              <div className="space-y-4">
+                {buckets.map((b) => (
+                  <div key={b.label}>
+                    <p className="mb-2 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">{b.label}</p>
+                    <div className="flex flex-wrap gap-2">
+                      {b.slots.map((s) => (
+                        <button
+                          key={s.key}
+                          type="button"
+                          disabled={!s.bookable}
+                          title={s.location?.name || undefined}
+                          className={chip(selectedSlot?.key === s.key, !s.bookable)}
+                          onClick={() => setSelectedSlot(s)}
+                        >
+                          {s.label}
+                          {!s.bookable ? (s.waitlistCapacity ? " · Full, waitlist" : " · Full") : s.remainingCapacity != null && s.remainingCapacity <= 3 ? ` · ${s.remainingCapacity} left` : ""}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {sessions && sessions.length > 0 && (
+        <div className="mt-6">
+          <p className={heading}>Upcoming sessions</p>
+          <ul className="space-y-1 text-sm">
+            {sessions.map((s) => (
+              <li key={s.id} className={s.isCancelled ? "text-muted-foreground line-through" : ""}>
+                {s.dayLabel} · {s.label}
+                {s.staff.length > 0 ? ` · ${s.staff.map((m) => m.name).join(", ")}` : ""}
+                {s.isFullyBooked ? " · Full" : s.spotsLeft != null ? ` · ${s.spotsLeft} left` : ""}
+              </li>
+            ))}
+          </ul>
+          {hasMoreSessions && (
+            <button type="button" className="mt-2 text-sm underline" onClick={() => void loadMoreSessions()}>
+              More sessions
+            </button>
+          )}
+        </div>
+      )}
+
+      {maxParticipants > 1 && (
+        <label className="mt-6 block max-w-md">
+          <span className={heading}>Participants</span>
+          <select value={participants} onChange={(e) => setParticipants(Number(e.target.value))} className={input}>
+            {Array.from({ length: maxParticipants }, (_, i) => i + 1).map((n) => (
+              <option key={n} value={n}>{n}</option>
+            ))}
+          </select>
+        </label>
+      )}
+
+      {addOnGroups.length > 0 && (
+        <div className="mt-6 space-y-4">
+          {addOnGroups.map((g) => (
+            <div key={g.id}>
+              <p className={heading}>{g.prompt || g.name}</p>
+              <div className="flex flex-wrap gap-2">
+                {g.addOns.map((a) => {
+                  const q = addOns[a.id] ?? 0;
+                  const blocked = q === 0 && !canSelectMore(g.id);
+                  return (
+                    <span key={a.id} className="inline-flex items-center gap-1">
+                      <button type="button" disabled={blocked} className={chip(q > 0, blocked)} onClick={() => toggleAddOn(a.id)}>
+                        {a.name}
+                        {a.price ? ` · ${a.price}` : ""}
+                        {a.durationMinutes ? ` · +${a.durationMinutes} min` : ""}
+                      </button>
+                      {q > 0 && a.maxQuantity && a.maxQuantity > 1 && (
+                        <select value={q} onChange={(e) => setAddOnQuantity(a.id, Number(e.target.value))} className="rounded-md border border-border bg-background px-2 py-1 text-sm">
+                          {Array.from({ length: a.maxQuantity }, (_, i) => i + 1).map((n) => (
+                            <option key={n} value={n}>{n}</option>
+                          ))}
+                        </select>
+                      )}
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+          {addOnsTotal && <p className="text-sm text-muted-foreground">Add-ons: {addOnsTotal} (added at the venue)</p>}
+        </div>
+      )}
+
+      {service.deposit?.fullUpfrontAllowed && (
+        <div className="mt-6">
+          <p className={heading}>Payment</p>
+          <div className="flex flex-wrap gap-2">
+            <button type="button" className={chip(payDeposit)} onClick={() => setPayDeposit(true)}>
+              Pay deposit{service.deposit.amount ? ` · ${service.deposit.amount}` : ""}
+            </button>
+            <button type="button" className={chip(!payDeposit)} onClick={() => setPayDeposit(false)}>
+              Pay in full{service.price ? ` · ${service.price}` : ""}
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="mt-6 grid max-w-md gap-3">
+        {formFields.map((f) => (
+          <label key={f.target} className="block">
+            <span className={heading}>{f.label}{f.required ? " *" : ""}</span>
+            {f.options?.length ? (
+              <select value={values[f.target] ?? ""} onChange={(e) => setValue(f.target, e.target.value)} className={input}>
+                <option value="">Choose…</option>
+                {f.options.map((o) => (
+                  <option key={o} value={o}>{o}</option>
+                ))}
+              </select>
+            ) : (
+              <input
+                type={f.type === "EMAIL" ? "email" : f.type === "PHONE" ? "tel" : f.type === "NUMBER" ? "number" : f.type === "URL" ? "url" : "text"}
+                value={values[f.target] ?? ""}
+                required={f.required}
+                onChange={(e) => setValue(f.target, e.target.value)}
+                className={input}
+              />
+            )}
+          </label>
+        ))}
+      </div>
+
+      {error && <p className="mt-3 text-sm text-destructive">{error}</p>}
+      <button
+        type="button"
+        disabled={!canBook || booking}
+        onClick={() => book().catch(() => {})}
+        className="mt-5 rounded-control bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
+      >
+        {booking ? "Booking…" : ctaLabel(service, ctaState, payDeposit)}
+      </button>
+    </div>
+  );
+}

package/skills/wix-headless-templates/bookings/app/components/bookings/ServicesView.tsx

@@ -0,0 +1,193 @@
+// REFERENCE listing surface: category + location filters, services grid, load-more, on the @theme
+// tokens. Correct and complete; per the skill's model you design and build your own on useServices.
+import type { ComponentType, ReactNode } from "react";
+import { useServices } from "../../hooks/bookings/useServices";
+import { OTHER_LOCATIONS_ID } from "../../wix/bookings/services-store";
+import type { BookingCategory, LocationOption, ServiceSummary, Weekday } from "../../wix/bookings/types";
+
+export interface LinkLikeProps {
+  href: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const PlainLink = ({ href, className, children }: LinkLikeProps) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+);
+
+const TYPE_LABEL: Record<ServiceSummary["type"], string> = { APPOINTMENT: "Appointment", CLASS: "Class", COURSE: "Course" };
+const DAY_SHORT: Record<Weekday, string> = { MONDAY: "Mon", TUESDAY: "Tue", WEDNESDAY: "Wed", THURSDAY: "Thu", FRIDAY: "Fri", SATURDAY: "Sat", SUNDAY: "Sun" };
+
+/** The price line a tile shows: "From €30", a struck-through base price beside a discount, or the plain price. */
+export function PriceLine({ service }: { service: ServiceSummary }) {
+  if (!service.price) return null;
+  return (
+    <span className="text-foreground">
+      {service.priceFrom ? "From " : ""}
+      {service.price}
+      {service.basePrice && <s className="ml-1 text-muted-foreground">{service.basePrice}</s>}
+      {service.discountName && <span className="ml-1 text-xs text-muted-foreground">{service.discountName}</span>}
+      {service.calculatedAtCheckout && <span className="ml-1 text-xs text-muted-foreground">(discount at checkout)</span>}
+    </span>
+  );
+}
+
+export interface ServiceCardProps {
+  service: ServiceSummary;
+  serviceHref?: (slug: string) => string;
+  LinkComponent?: ComponentType<LinkLikeProps>;
+}
+
+export function ServiceCard({
+  service,
+  serviceHref = (slug) => `/services/${slug}`,
+  LinkComponent = PlainLink,
+}: ServiceCardProps) {
+  return (
+    <LinkComponent href={serviceHref(service.slug)} className="group block no-underline">
+      <div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-secondary">
+        {service.imageUrl && (
+          <img
+            src={service.imageUrl}
+            alt={service.name}
+            loading="lazy"
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+          />
+        )}
+        <span className="absolute left-3 top-3 flex gap-1">
+          <span className="rounded-control bg-background/90 px-3 py-1 text-xs font-semibold text-foreground backdrop-blur">{TYPE_LABEL[service.type]}</span>
+          {service.conferencing && <span className="rounded-control bg-background/90 px-3 py-1 text-xs font-semibold text-foreground backdrop-blur">Online</span>}
+        </span>
+      </div>
+      <p className="mt-3 text-sm font-medium text-foreground">{service.name}</p>
+      {service.tagLine && <p className="mt-0.5 text-xs text-muted-foreground">{service.tagLine}</p>}
+      <p className="mt-1 text-sm text-muted-foreground">
+        {service.durationLabel ? `${service.durationLabel} · ` : ""}
+        <PriceLine service={service} />
+      </p>
+      {service.offeredDays.length > 0 && <p className="mt-0.5 text-xs text-muted-foreground">{service.offeredDays.map((d) => DAY_SHORT[d]).join(", ")}</p>}
+      {service.locations.length > 0 && service.locations[0].name && (
+        <p className="mt-0.5 text-xs text-muted-foreground">{service.locations.map((l) => l.name).filter(Boolean).join(" · ")}</p>
+      )}
+    </LinkComponent>
+  );
+}
+
+export interface ServicesViewProps {
+  initialServices?: ServiceSummary[];
+  initialHasMore?: boolean;
+  initialCategories?: BookingCategory[];
+  initialLocations?: { locations: LocationOption[]; hasOtherLocations: boolean };
+  initialCategoryId?: string | null;
+  initialLocationId?: string | null;
+  emptyMessage?: string;
+  serviceHref?: ServiceCardProps["serviceHref"];
+  LinkComponent?: ComponentType<LinkLikeProps>;
+  CardComponent?: ComponentType<ServiceCardProps>;
+}
+
+const pill = (active: boolean) =>
+  `rounded-control border px-4 py-1.5 text-sm font-medium transition-colors ${
+    active
+      ? "border-primary bg-primary text-primary-foreground"
+      : "border-border text-foreground hover:bg-secondary"
+  }`;
+
+export default function ServicesView({
+  initialServices,
+  initialHasMore,
+  initialCategories,
+  initialLocations,
+  initialCategoryId,
+  initialLocationId,
+  emptyMessage = "No services yet — check back soon.",
+  serviceHref,
+  LinkComponent,
+  CardComponent = ServiceCard,
+}: ServicesViewProps) {
+  const {
+    services,
+    categories,
+    locations,
+    hasOtherLocations,
+    activeCategoryId,
+    setActiveCategoryId,
+    activeLocationId,
+    setActiveLocationId,
+    hasMore,
+    loadingMore,
+    loadMore,
+    error,
+  } = useServices({ initialServices, initialHasMore, initialCategories, initialLocations, initialCategoryId, initialLocationId });
+
+  const locationOptions = locations.length + (hasOtherLocations ? 1 : 0);
+
+  return (
+    <div>
+      {categories.length > 1 && (
+        <div className="mb-4 flex flex-wrap gap-2" role="group" aria-label="Categories">
+          <button type="button" className={pill(activeCategoryId === null)} onClick={() => setActiveCategoryId(null)}>
+            All
+          </button>
+          {categories.map((c) => (
+            <button key={c.id} type="button" className={pill(activeCategoryId === c.id)} onClick={() => setActiveCategoryId(c.id)}>
+              {c.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {locationOptions > 1 && (
+        <div className="mb-8 flex flex-wrap gap-2" role="group" aria-label="Locations">
+          <button type="button" className={pill(activeLocationId === null)} onClick={() => setActiveLocationId(null)}>
+            All locations
+          </button>
+          {locations.map((l) => (
+            <button key={l.id} type="button" className={pill(activeLocationId === l.id)} onClick={() => setActiveLocationId(l.id)}>
+              {l.name}
+            </button>
+          ))}
+          {hasOtherLocations && (
+            <button type="button" className={pill(activeLocationId === OTHER_LOCATIONS_ID)} onClick={() => setActiveLocationId(OTHER_LOCATIONS_ID)}>
+              Other locations
+            </button>
+          )}
+        </div>
+      )}
+      {error && <p className="mb-4 text-sm text-destructive">{error}</p>}
+      {services === null ? (
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3" aria-busy="true">
+          {Array.from({ length: 6 }, (_, i) => (
+            <div key={i}>
+              <div className="aspect-[4/3] animate-pulse rounded-lg bg-secondary" />
+              <div className="mt-3 h-3.5 w-2/3 animate-pulse rounded bg-secondary" />
+            </div>
+          ))}
+        </div>
+      ) : services.length === 0 ? (
+        <p className="py-16 text-center text-muted-foreground">{emptyMessage}</p>
+      ) : (
+        <>
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {services.map((s) => (
+              <CardComponent key={s.id} service={s} serviceHref={serviceHref} LinkComponent={LinkComponent} />
+            ))}
+          </div>
+          {hasMore && (
+            <div className="mt-10 text-center">
+              <button
+                type="button"
+                disabled={loadingMore}
+                onClick={() => void loadMore()}
+                className="rounded-control border border-border px-6 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:opacity-50"
+              >
+                {loadingMore ? "Loading…" : "Load more"}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/skills/wix-headless-templates/bookings/app/hooks/bookings/useBookingFlow.ts

@@ -0,0 +1,56 @@
+// React binding of the booking-flow store (wix/bookings/booking-flow-store.ts) — the whole booking
+// state machine for one service lives there, framework-free: the display zone, the availability
+// window (day-grouped slots, week paging, staff filter, next availability), a course's seats, a
+// class's sessions, participants, deposit choice, add-ons, the schema-driven form, the CTA state,
+// and book(). All correctness lives in the data layer; you own how it looks. Mount the surface
+// client-only: availability is timezone/session-specific.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createBookingFlowStore, type BookingFlowState, type BookingFlowStore } from "../../wix/bookings/booking-flow-store";
+import type { ServiceDetail } from "../../wix/bookings/types";
+
+export type UseBookingFlow = BookingFlowState &
+  Pick<
+    BookingFlowStore,
+    | "nextWeek"
+    | "prevWeek"
+    | "jumpTo"
+    | "setStaffId"
+    | "setSelectedSlot"
+    | "setDisplayTimeZone"
+    | "setParticipants"
+    | "setPayDeposit"
+    | "toggleAddOn"
+    | "setAddOnQuantity"
+    | "canSelectMore"
+    | "loadMoreSessions"
+    | "setValue"
+    | "book"
+  >;
+
+export function useBookingFlow(service: ServiceDetail): UseBookingFlow {
+  const ref = useRef<{ serviceId: string; store: BookingFlowStore } | null>(null);
+  if (!ref.current || ref.current.serviceId !== service.id) ref.current = { serviceId: service.id, store: createBookingFlowStore(service) };
+  const store = ref.current.store;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return {
+    ...state,
+    nextWeek: store.nextWeek,
+    prevWeek: store.prevWeek,
+    jumpTo: store.jumpTo,
+    setStaffId: store.setStaffId,
+    setSelectedSlot: store.setSelectedSlot,
+    setDisplayTimeZone: store.setDisplayTimeZone,
+    setParticipants: store.setParticipants,
+    setPayDeposit: store.setPayDeposit,
+    toggleAddOn: store.toggleAddOn,
+    setAddOnQuantity: store.setAddOnQuantity,
+    canSelectMore: store.canSelectMore,
+    loadMoreSessions: store.loadMoreSessions,
+    setValue: store.setValue,
+    book: store.book,
+  };
+}

package/skills/wix-headless-templates/bookings/app/hooks/bookings/useServices.ts

@@ -0,0 +1,23 @@
+// React binding of the services store (wix/bookings/services-store.ts) — the listing state lives
+// there, framework-free; this hook subscribes to one instance per mounted listing and exposes its
+// state and actions under one name. SSR-friendly: pass server-fetched data as `initial*` (Astro
+// frontmatter / server component) and no client fetch happens for the first paint; a SPA passes
+// nothing. Astro islands and React SPAs use this; a static page, Vue, or Svelte uses the store directly.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createServicesStore, type ServicesState, type ServicesStore, type ServicesStoreOptions } from "../../wix/bookings/services-store";
+
+export type UseServicesOptions = ServicesStoreOptions;
+
+export type UseServices = ServicesState & Pick<ServicesStore, "setActiveCategoryId" | "setActiveLocationId" | "loadMore">;
+
+export function useServices(options: UseServicesOptions = {}): UseServices {
+  const ref = useRef<ServicesStore | null>(null);
+  if (!ref.current) ref.current = createServicesStore(options);
+  const store = ref.current;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return { ...state, setActiveCategoryId: store.setActiveCategoryId, setActiveLocationId: store.setActiveLocationId, loadMore: store.loadMore };
+}