@wix/agent-skills 1.36.0 → 1.36.1

package/skills/wix-vibe-headless/references/bookings/INSTRUCTIONS.md

@@ -1,342 +0,0 @@
-# Wix Bookings — ready-made client
-
-The bookings client is **shipped as real files**, not snippets to regenerate. It's a complete
-service catalog + detail page + slot picker + booking flow (create booking → hosted checkout),
-styled with your app's design tokens (base44's `src/index.css` — the shadcn palette the design phase
-already set). Copy it into the app and wire the routes —
-you generate almost none of the booking code (the `{ services }` / `{ slots }` destructuring, the
-local wall-clock date args, the null-slot re-validate guard, the participant cap, the eCom
-redirect-session all ship and are correct).
-
-Talks to Wix directly over the public `WIX_CLIENT_ID` (anonymous visitor tokens). Never mock
-services or slots; never hand-build a `/checkout` URL — the shipped flow creates the booking through
-the API and completes it via the eCom redirect-session.
-
-## Prerequisites
-- The site's **Wix Bookings** setup is the read/book target. It's installed and seeded separately
-  (see **Seeding** below), in parallel with this build — so it may have no services at build time;
-  the client renders the shipped empty state until services (and staff/working hours, so slots are
-  bookable) land. This client is read-only over services — it does not provision them.
-- The public headless **`WIX_CLIENT_ID`** from your prompt (buyer-facing, safe to hardcode/commit).
-- For **paid** services, the site must accept payments and the deployed app domain must be
-  allow-listed on the OAuth client for the hosted checkout to return. Those are separate Wix setup
-  flows the user completes later — out of scope here; if checkout return fails before that, it's
-  expected, flag it and continue.
-
-## STEP 1 — The client is already in `src/`
-The install step (base44.md STEP 1) deployed the whole bookings UI client + REST scaffolds into
-`src/` (imports use the `@/` alias → `src/`). Here's every file and what it is — **this is your map,
-so you don't need to open them:**
-
-| file | what it is |
-|---|---|
-| `hooks/useServices.js` | services-list data — one page + `loadMore` paging, plus the category menu (`categories` / `activeCategory` / `setActiveCategory`); `total === 0` → empty state |
-| `hooks/useServiceDetail.js` | detail + booking flow — load service, list slots, hold slot/contact/participants, re-validate + book + checkout |
-| `lib/serviceFacts.js` | price / duration / capacity / where / reschedule labels, derived from a service — rateType-aware, so VARIED and NO_FEE services still show a price |
-| `components/ServiceCard.jsx`, `ServiceGrid.jsx` | service listing UI (grid + card, with empty state); the card shows price, tagline and a `60 min · 1-to-1` meta row |
-| `components/SlotPicker.jsx` | bookable-slot chips + paging (pure UI, driven by `useServiceDetail`) |
-| `components/BookingForm.jsx` | contact + participant form (pure UI, driven by `useServiceDetail`) |
-| `components/WixManageBanner.jsx` | preview-only manage banner — drop it into your Layout (STEP 3) |
-| `pages/Services.jsx`, `pages/ServiceDetail.jsx` | the two shipped routes (`/services`, `/service/:serviceId`); the detail page is two-column — service + a duration/price/where strip on the left, the sticky booking panel on the right |
-| `rest/wix-config.js` | the two ids, written by the install step |
-| `rest/wix-client.js` | REST transport — mints/persists the anonymous visitor token |
-| `rest/wix-bookings-services.js` | services + availability: `queryServices`, `queryServicesByCategory`, `categoriesOf`, `getService`, `countServices`, `listSlotsForService`, `listAvailableSlots`, `listEventTimeSlots`, `getAvailableSlot`, `mediaUrl` |
-| `rest/wix-bookings-checkout.js` | booking + checkout: `createBooking`, `checkoutBooking`, `bookAndCheckout` |
-
-They're already in place — go **straight to theming + wiring**, nothing to verify first. **Don't
-`read_file` the shipped page/component/hook source to inspect it** — the table above says what each
-is, and every field shape you need is in the snippets below. Read a shipped file's source **only**
-on a real fallback — a runtime error, or a field the snippets don't cover (see "Fallback only" at
-the end). (Files missing? the install's `deploy` result lists what it wrote; re-run install, or copy
-`references/bookings/app/` → `src/`.)
-
-**Their `Link`/`useParams` imports come from `@/lib/nav`**, so the same sources run on either
-template. That adapter is installed at `src/lib/nav.js` with the rest of the deployed tree — use
-the file that is there, and on TanStack check it first ([which template?](../_shared/routing.md)).
-Import from `@/lib/nav` in the pages you write too, and they stay portable the same way.
-
-
-
-## STEP 2 — Theme
-Use the existing Base44 theme in `src/index.css` so your pages and the shipped components
-share the same colors and typography.
-
-## STEP 3 — Wire routes (surgical `find_replace` on `src/App.jsx`, never a rewrite)
-
-> **The template decides this step, and `src/routes/__root.jsx` is the question to ask first.**
-> Present → TanStack Start, which mounts these pages as route files at the end of this step; absent
-> → React Router, which the wiring below is written for. Ask in that order: an `src/App.jsx` can
-> exist on a TanStack app because an agent created one, and `__root.jsx` is never there by mistake.
-> The installed `src/lib/nav.js` defaults to the React Router adapter, so on TanStack swap it:
-> [both patterns](../_shared/routing.md).
->
-> **Import `Link`, `useParams` and friends from `@/lib/nav` in the pages you write too** — same
-> names as the router exports, and nothing you write is pinned to one template.
-
-**No file reads needed to wire this.** Every shipped page and `WixManageBanner` is a default export that takes **no props** — wire them exactly as the snippet shows; nothing in those files needs looking up.
-`App.jsx` carries required platform auth scaffolding (`AuthProvider`/`useAuth`) — edit it in, don't
-replace it. Bookings needs **no cross-page provider** (there's no cart — each booking completes on
-its own detail page), so there's nothing to wrap the tree in.
-- Put your **header + footer in a `Layout`** that renders `<Outlet/>` between them, and nest every
-  route under one pathless `<Route element={<Layout/>}>`. Your brand chrome then wraps **every** page
-  — including the shipped `Services` / `ServiceDetail` — so you **never edit the shipped pages to add
-  a header/footer** (they render inside `<Outlet/>` as-is).
-- **Pin the top chrome as one fixed block.** Put `<WixManageBanner/>` (shipped, preview-only) **above**
-  your `<Header/>` inside a single `position:fixed` top region — the header itself is plain in-flow
-  markup, the region owns the fixing — so banner + header ride together (no scroll drift/gap). Pad
-  the content by the region's **ResizeObserver-measured** height so it clears the chrome and
-  self-corrects when the banner is dismissed.
-- Routes under the Layout: `/services` → `Services`, `/service/:serviceId` → `ServiceDetail` (both
-  shipped, as-is). **You add `/` → your own Home** page.
-
-```jsx
-import { useRef, useState, useEffect } from "react";
-import { Routes, Route, Outlet } from "react-router-dom";
-import WixManageBanner from "@/components/WixManageBanner";   // shipped, preview-only · default export, no props
-import Services from "@/pages/Services";               // shipped · default export, no props
-import ServiceDetail from "@/pages/ServiceDetail";     // shipped · default export, no props
-import Home from "@/pages/Home";           // YOU build
-import Header from "@/components/Header";   // YOU build — plain in-flow markup, NOT position:fixed
-import Footer from "@/components/Footer";   // YOU build
-
-function Layout() {
-  const topRef = useRef(null);
-  const [offset, setOffset] = useState(0);
-  useEffect(() => {                                  // measure the fixed region → pad content below it
-    const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
-    if (topRef.current) ro.observe(topRef.current);
-    return () => ro.disconnect();
-  }, []);
-  return (<>
-    <div ref={topRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
-      <WixManageBanner />                    {/* null on the published site / when dismissed */}
-      <Header />                             {/* your brand header, in-flow inside this fixed block */}
-    </div>
-    <div style={{ paddingTop: offset }}>     {/* clears the chrome; shrinks when the banner is dismissed */}
-      <Outlet />                             {/* shipped Services/ServiceDetail render here, untouched */}
-      <Footer />
-    </div>
-  </>);
-}
-
-<Routes>
-  <Route element={<Layout />}>                                       {/* chrome wraps all */}
-    <Route path="/" element={<Home />} />                            {/* yours */}
-    <Route path="/services" element={<Services />} />                {/* shipped, as-is */}
-    <Route path="/service/:serviceId" element={<ServiceDetail />} /> {/* shipped, as-is */}
-  </Route>
-</Routes>
-```
-
-
-### TanStack Start template — the same pages, mounted as files
-
-Chrome (header, footer, the fixed banner region described above) goes in `src/routes/__root.jsx`
-around its `<Outlet/>`, and any provider this vertical asks for wraps that `<Outlet/>` once. Each
-route is a two-line file; shipped pages stay in `src/pages/` untouched.
-
-| route | file | component |
-|---|---|---|
-| `/` | `src/routes/index.jsx` | `Home` |
-| `/services` | `src/routes/services.jsx` | `Services` |
-| `/service/:serviceId` | `src/routes/service.$serviceId.jsx` | `ServiceDetail` |
-
-```jsx
-// src/routes/services.jsx
-import { createFileRoute } from "@tanstack/react-router";
-import Services from "@/pages/Services";
-
-export const Route = createFileRoute("/services")({ component: Services });
-```
-
-Path params are `$name` in both the filename and the route path; `useParams()` from `@/lib/nav`
-reads them unchanged. Full pattern, including `ssr: false` for per-user routes:
-[`../_shared/routing.md`](../_shared/routing.md).
-
-## What you build (not shipped)
-The **home / landing page**, the **`Header`** and a **`Footer`** — the two you drop into the
-`Layout` (STEP 3) so they wrap every route — plus the overall brand story, styled with the same
-base44 tokens/classes. **Compose the shipped pieces** — a "featured services" strip is just
-`queryServices` + the shipped `ServiceGrid`; the nav is a link to `/services`:
-
-```jsx
-import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
-import { queryServices } from "@/rest/wix-bookings-services";
-import ServiceGrid from "@/components/ServiceGrid";
-
-// Responsive header: choose ONE branch with a state flag (copy this pattern). Do NOT render a
-// desktop nav AND a mobile nav toggled by Tailwind `hidden md:flex` / `md:hidden`: these navs are
-// inline-styled, and an inline `display` beats a Tailwind class, so `hidden` never applies — BOTH
-// branches render. One branch = one nav.
-export function Header() {
-  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
-  useEffect(() => {
-    const onResize = () => setMobile(window.innerWidth < 768);
-    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-  return (
-    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-      {/* brand/logo */}
-      {mobile ? <YourMenu /> : <Link to="/services">Services</Link>}
-    </nav>
-  );
-}
-export function Featured() {                                // on your home page
-  const [services, setServices] = useState([]);
-  // NB: queryServices returns { services, total, nextOffset } — destructure the array.
-  useEffect(() => { queryServices({ limit: 6 }).then(({ services }) => setServices(services)); }, []);
-  return <ServiceGrid services={services} empty="Services coming soon." />;
-}
-```
-Everything reads base44's design tokens (`index.css`), so your home/nav match the shipped pages automatically.
-
-**Editing a component and the change doesn't show? It's the preview, not your code.** The dev
-preview can serve a stale module after a write. Before diagnosing a visual bug you just "fixed", do a
-fresh full navigate/reload of the preview and re-check — don't keep rewriting correct code against a
-stale render.
-
-## Using the client from your own UI
-The two shipped hooks are the whole flow. If you build a custom surface, drive it the same way:
-
-> Migrating from Cart V1 / Checkout V1? These helpers are V2-only — see the [migration guide](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart-v2/migration-guide) for the before/after.
-
-```jsx
-// LIST — every list helper returns an OBJECT, not a bare array. Destructure it:
-const { services, total, nextOffset } = await queryServices({ limit: 24 });   // total 0 → empty state
-if ((await countServices()) === 0) { /* show the empty state — never invent services */ }
-
-// DETAIL — getService(id) is keyed off the route param; returns null on a miss (not-found, never invent):
-const service = await getService(serviceId);
-
-// FACTS (price / duration / capacity / where / reschedule note) — lib/serviceFacts.js branches on
-// payment.rateType and on APPOINTMENT-vs-CLASS for you. Reading payment.fixed.price yourself renders
-// NOTHING for a VARIED or NO_FEE service, and duration is empty on a class:
-const price = servicePriceLabel(service);      // "€95.00" · "From €85.00" · "Free" · "" for CUSTOM
-const minutes = serviceDuration(service);      // 60 for an appointment; null for a class/course
-const where = serviceLocationLabel(service);   // from payment.options — service.locations has no name
-
-// IMAGE — the primary image is media.mainMedia; resolve through mediaUrl (Wix media can be a bare
-// handle, not a full URL). Fall back to the gallery/cover:
-const img = mediaUrl(service.media?.mainMedia?.image ?? service.media?.items?.[0]?.image ?? service.media?.coverMedia?.image);
-
-// SLOTS — listSlotsForService routes by service.type and returns { slots, nextCursor }; iterate .slots.
-// Dates are LOCAL wall-clock "YYYY-MM-DDThh:mm:ss" (NO zone / Z). The LIST call takes
-// fromLocalDate/toLocalDate — the single-slot re-validate (getAvailableSlot) takes
-// localStartDate/localEndDate. They are NOT interchangeable.
-// It also returns `timeZone` — the zone those localStartDate strings are in. Label the picker with
-// that value rather than a locally guessed zone, so the times and the label can't disagree.
-const { slots, nextCursor, timeZone } = await listSlotsForService(service, { fromLocalDate, toLocalDate });
-
-// BOOK — re-validate the picked slot (getAvailableSlot returns the slot or NULL — guard it), then
-// book + check out and redirect. Participants: cap at
-// service.bookingPolicy.participantsPolicy.maxParticipantsPerBooking (commonly 1 → no selector);
-// never use slot.remainingCapacity as the per-buyer limit.
-const fresh = await getAvailableSlot(service.id, { localStartDate, localEndDate });
-if (!fresh) { /* "that time was just taken — pick another" */ }
-const { checkoutUrl } = await bookAndCheckout(fresh, { email, firstName, lastName, phone }, { totalParticipants });
-window.location.href = checkoutUrl;   // hosted checkout; on return the booking is CONFIRMED/PENDING
-```
-
-## Extending the client
-The shipped flow covers **APPOINTMENT and CLASS** services (`listSlotsForService` routes by
-`service.type`). For anything beyond that, add a helper on `wixApiRequest`, looking the endpoint up
-using the documentation skill available in your environment first (never guess):
-- **COURSE** enrollment — a course is enrolled as a *whole*, not per session; `listEventTimeSlots`
-  returns no slots for it, so the slot-picker flow doesn't apply (course-specific flow).
-- **Service variants / participants** (duration- or person-based pricing), **add-ons**, and
-  **custom booking form fields** (render `service.form.id`).
-- **Member login + a "my bookings" view** → the **members** vertical
-  (`references/members/INSTRUCTIONS.md`): booking works anonymously, but signing a member in lets
-  them see their own appointments.
-
-Fallback only — when you hit an error or need something not shown here: read the relevant shipped
-file under `src/`, or look it up via the documentation skill available in your environment. Each helper in
-`wix-bookings-services.js` / `wix-bookings-checkout.js` links its own reference page inline; these are
-the areas they sit in:
-- Bookings (services, categories, bookings): https://dev.wix.com/docs/api-reference/business-solutions/bookings.md
-- Availability time slots: https://dev.wix.com/docs/api-reference/business-solutions/bookings/time-slots.md
-- eCommerce checkout (paid bookings): https://dev.wix.com/docs/api-reference/business-solutions/e-commerce.md
-- Headless redirect session (hosted checkout): https://dev.wix.com/docs/api-reference/business-management/headless/redirects.md
-
-## Rentals — the same client, one extra step
-
-**Wix Rentals has no APIs of its own.** A rental is a Bookings *service* with rentals-specific
-field values, so this whole client works on it: the catalog read, the booking form, and the
-`createBooking → cart → checkout` chain are all unchanged. `rest/wix-bookings-rentals.js` and
-`hooks/useRentalDuration.js` carry the only differences.
-
-**What tells a rental apart — the DATA, never the brief.** A service carries either a fixed
-session length or a duration RANGE the customer picks within; the two are mutually exclusive:
-
-```js
-import { isRental, rentalDuration, rentalRateLabel } from "@/rest/wix-bookings-rentals";
-isRental(service)   // true only when schedule.availabilityConstraints.durationRange is present
-```
-
-A 60-minute yoga class and a 60-minute massage are **not** rentals even though a massage is
-`type: "APPOINTMENT"` exactly like a rental is. Never branch on the service's name, its
-category, or what the brief called it.
-
-**The extra step.** An ordinary service is one choice (a slot). A rental is two: pick a START,
-then pick HOW LONG — and the price follows the length.
-
-```jsx
-const detail = useServiceDetail(serviceId);                        // service + start times
-const rental = useRentalDuration(detail.service, detail.selectedSlot, detail.timeZone);
-
-<SlotPicker … />                                                   {/* pick a start, as ever */}
-{rental.isRental && <RentalDurationPicker rental={rental} />}      {/* then pick a length */}
-```
-
-Book with `rental.endDate` as the slot's `localEndDate`; everything else in the booking call is
-identical.
-
-**Hard rules on top of the ones below:**
-
-- **Filter every catalog read by `appId`.** `queryRentals()` does it. On a site with both apps
-  an unfiltered `queryServices` returns haircuts next to meeting rooms.
-- **Never compute the total yourself.** A rental is charged as a rate, hourly at per-minute
-  granularity — 90 minutes of a $10/hour room is $15. `useRentalDuration` prices the chosen
-  length on the server; multiplying the displayed rate disagrees with checkout.
-- **Show the total before the customer commits.** A rate alone is not a price.
-- **One unit type per service.** A room rented by the hour *and* by the day is two services.
-
-## Hard rules
-- Header/footer live in a `Layout` around `<Outlet/>` (STEP 3) — never edit the shipped
-  `Services`/`ServiceDetail` to add chrome.
-- The Layout's fixed top region owns positioning: `<WixManageBanner/>` above `<Header/>`; your
-  `Header` is plain in-flow markup (not `position:fixed`).
-- Send availability/booking dates as **local** `"YYYY-MM-DDThh:mm:ss"` strings + a `timeZone` — never
-  UTC `Z` timestamps to the slot APIs.
-- Re-validate the slot with `getAvailableSlot()` before booking; guard the `null` — slots get taken.
-- Cap participants at `maxParticipantsPerBooking` (no selector when 1); never offer a fixed range and
-  never use slot capacity as the per-buyer limit.
-- Book only through the shipped flow (`bookAndCheckout` / `createBooking`→`checkoutBooking`) and
-  redirect to the returned URL — never a hand-built `/checkout` or calendar URL.
-- Render live Wix data or the shipped empty state — never mock services, slots, or availability, and
-  never invent reviews, ratings, staff, or testimonials.
-
-## Point the user to their dashboard
-Provide deep links so the owner can manage bookings content (substitute the site's `metaSiteId`):
-- **Booking Services** — `https://manage.wix.com/dashboard/{metaSiteId}/bookings/services` (add
-  services and service categories)
-- **Staff** — `https://manage.wix.com/dashboard/{metaSiteId}/bookings/staff` (add staff and set
-  working hours, so slots are actually bookable)
-
-## Seeding
-Seed the services per `seed/SEED.md` (the build-time setup module) — separate from this client
-build; run in parallel.
-
-## Verify (before declaring done)
-- [ ] Client files copied into `src/`; `WIX_CLIENT_ID` set (not the placeholder).
-- [ ] **Opened `/services` and a service detail page** (not just the home page) and confirmed the shipped cards render themed (surface, text, brand color) with images.
-- [ ] `Layout` (fixed `<WixManageBanner/>` + `<Header/>` region, then `<Outlet/>` + Footer) wraps all
-      routes; shipped `Services`/`ServiceDetail` untouched; content clears the fixed chrome.
-- [ ] Visitor token persists across reload (same visitor identity across reloads).
-- [ ] `queryServices()` renders live services; empty catalog shows the shipped empty state (no mock services).
-- [ ] Slot picker shows real bookable slots; the slot is re-validated with `getAvailableSlot()` right before booking.
-- [ ] Participant selector capped by `maxParticipantsPerBooking` (hidden when 1).
-- [ ] Booking redirects to the hosted checkout URL the client returns; on return the booking is CONFIRMED/PENDING.
-- [ ] No mock services, slots, or availability anywhere.

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

@@ -1,65 +0,0 @@
-// Contact + participants form — pure UI. All state/handlers (field setters, participant cap,
-// submit, submitting, error) come from useServiceDetail; this only renders them. The participant
-// selector shows ONLY when maxParticipants > 1 (commonly 1 → no selector, book exactly one).
-// Styled with base44 design tokens (shadcn Tailwind classes).
-const fieldCls =
-  "w-full px-3 py-2.5 box-border font-body border border-input rounded-sm bg-background text-foreground";
-const labelCls = "block mb-1.5 text-[11px] uppercase tracking-wide text-muted-foreground";
-
-export default function BookingForm({
-  contact, setContactField, maxParticipants, participants, setParticipants,
-  onSubmit, submitting, canSubmit, error, needsApproval, timeLabel, priceLabel,
-}) {
-  // Naming the time and price on the button is the last confirmation before payment, so what the
-  // buyer clicks states exactly what they're committing to.
-  const what = [timeLabel, priceLabel].filter(Boolean).join(" · ");
-  return (
-    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }} className="flex flex-col gap-4">
-      <div className="flex gap-3">
-        <div className="flex-1">
-          <label className={labelCls} htmlFor="bk-first">First name</label>
-          <input id="bk-first" className={fieldCls} value={contact.firstName} onChange={setContactField("firstName")} />
-        </div>
-        <div className="flex-1">
-          <label className={labelCls} htmlFor="bk-last">Last name</label>
-          <input id="bk-last" className={fieldCls} value={contact.lastName} onChange={setContactField("lastName")} />
-        </div>
-      </div>
-
-      <div>
-        <label className={labelCls} htmlFor="bk-email">Email</label>
-        <input id="bk-email" required type="email" autoComplete="email" placeholder="you@example.com"
-          className={fieldCls} value={contact.email} onChange={setContactField("email")} />
-      </div>
-
-      <div>
-        <label className={labelCls} htmlFor="bk-phone">
-          Phone <span className="normal-case tracking-normal">optional</span>
-        </label>
-        <input id="bk-phone" type="tel" autoComplete="tel" className={fieldCls}
-          value={contact.phone} onChange={setContactField("phone")} />
-      </div>
-
-      {maxParticipants > 1 && (
-        <div>
-          <label className={labelCls} htmlFor="bk-participants">Participants</label>
-          <input id="bk-participants" type="number" min={1} max={maxParticipants} value={participants}
-            onChange={(e) => setParticipants(Math.max(1, Math.min(maxParticipants, Number(e.target.value) || 1)))}
-            className={`${fieldCls} w-[100px]`} />
-        </div>
-      )}
-
-      {error && <p role="alert" className="m-0 text-destructive text-sm">{error}</p>}
-
-      {/* The business confirms a manual-approval service after the fact, so this asks rather than books. */}
-      <button type="submit" disabled={!canSubmit}
-        className="px-6 py-3 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
-        {submitting
-          ? (needsApproval ? "Requesting…" : "Booking…")
-          : needsApproval
-            ? (what ? `Request ${what}` : "Request appointment")
-            : (what ? `Book ${what}` : "Book appointment")}
-      </button>
-    </form>
-  );
-}

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

@@ -1,67 +0,0 @@
-// Rental length picker — pure UI. The options, the selection handler and the priced total all
-// come from useRentalDuration; no data wiring lives here.
-//
-// Renders the step an ordinary service doesn't have: the customer has already picked a START
-// (SlotPicker), and now picks HOW LONG. The running total sits beside the choices because a
-// rental's cost depends on the length — showing only a rate per hour leaves the customer
-// discovering the real number at checkout.
-//
-// Show this only when `rental.isRental` — an appointment or class has no length to choose.
-// Styled with base44 design tokens (shadcn Tailwind classes).
-const optionCls = "py-2.5 px-3 cursor-pointer text-sm font-body border rounded-sm transition-colors";
-const idle = "border-border bg-card text-foreground hover:border-foreground/40";
-const active = "border-primary bg-primary text-primary-foreground";
-
-/**
- * @param {{
- *   rental: object,        // the whole return of useRentalDuration
- *   startLabel?: string,   // e.g. "Fri 4 Sep, 10:00" — what the customer already picked
- * }} props
- */
-export default function RentalDurationPicker({ rental, startLabel }) {
-  const { isRental, duration, options, selected, select, price, loading, error } = rental;
-  if (!isRental) return null;
-
-  const unitWord = duration?.unit === "DAY" ? "days" : "hours";
-
-  return (
-    <div className="mb-6">
-      <div className="mb-2 flex items-baseline justify-between gap-3">
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          How long{startLabel ? ` from ${startLabel}` : ""}
-        </p>
-        {price?.total ? (
-          <p className="text-sm font-semibold text-foreground">{price.total}</p>
-        ) : selected ? (
-          <p className="text-sm text-muted-foreground">Pricing…</p>
-        ) : null}
-      </div>
-
-      {loading ? (
-        <p className="text-sm text-muted-foreground">Loading available {unitWord}…</p>
-      ) : error ? (
-        <p className="text-sm text-destructive">{error}</p>
-      ) : !options.length ? (
-        // An empty list is a real answer: this start has no bookable length. Say so, and leave
-        // the start picker in place so the customer can choose another one.
-        <p className="text-sm text-muted-foreground">
-          Nothing available from that start — pick another time.
-        </p>
-      ) : (
-        <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
-          {options.map((option) => (
-            <button
-              key={option.localEndDate}
-              type="button"
-              aria-pressed={selected?.localEndDate === option.localEndDate}
-              className={`${optionCls} ${selected?.localEndDate === option.localEndDate ? active : idle}`}
-              onClick={() => select(option)}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,47 +0,0 @@
-// Grid tile for one bookable service. Styled with base44 design tokens (shadcn Tailwind classes:
-// bg-card / text-foreground / border-border / text-primary) — re-skin via the app's design tokens
-// (src/index.css :root/.dark), not this JSX. Load-bearing: the image goes through mediaUrl() (Wix
-// media can be a bare handle), the link uses `service.id`, and every price/duration/capacity label
-// comes from lib/serviceFacts.js so the card and the detail page can't disagree.
-import { Link } from "@/lib/nav";
-import { mediaUrl } from "@/rest/wix-bookings-services";
-import { serviceCapacityLabel, serviceDuration, servicePriceLabel } from "@/lib/serviceFacts";
-
-export default function ServiceCard({ service }) {
-  const image = mediaUrl(service.media?.mainMedia?.image ?? service.media?.items?.[0]?.image ?? service.media?.coverMedia?.image);
-  const price = servicePriceLabel(service);
-  const minutes = serviceDuration(service);
-  // A class has no duration on the service, so its meta row carries capacity alone rather than a gap.
-  const facts = [minutes && `${minutes} min`, serviceCapacityLabel(service)].filter(Boolean);
-
-  return (
-    <Link to={`/service/${service.id}`}
-      className="group flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
-      <div className="relative aspect-[4/3] bg-background overflow-hidden">
-        {image
-          ? <img src={image} alt={service.name} loading="lazy"
-              className="w-full h-full object-cover transition-transform duration-300 md:group-hover:scale-[1.03]" />
-          : <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true"><svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></svg></div>}
-      </div>
-
-      <div className="p-3 flex flex-col gap-1">
-        {/* Name and price share a row on a wide tile and stack on a phone's narrow one, where a long
-            name against a top-right price wraps into a ragged block. */}
-        <div className="flex flex-col gap-1 md:flex-row md:items-baseline md:justify-between md:gap-3">
-          <h3 className="m-0 font-display text-[15px] font-semibold line-clamp-2">{service.name}</h3>
-          {price && <span className="font-semibold whitespace-nowrap">{price}</span>}
-        </div>
-
-        {service.tagLine && (
-          <p className="m-0 text-muted-foreground text-[13px] line-clamp-1">{service.tagLine}</p>
-        )}
-
-        {facts.length > 0 && (
-          <p className="m-0 mt-0.5 text-[11px] uppercase tracking-wide text-muted-foreground">
-            {facts.join(" · ")}
-          </p>
-        )}
-      </div>
-    </Link>
-  );
-}

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

@@ -1,13 +0,0 @@
-// Responsive service grid + empty state. Styled with base44 design tokens (shadcn Tailwind classes).
-import ServiceCard from "./ServiceCard";
-
-export default function ServiceGrid({ services, empty = "No services yet." }) {
-  if (!services?.length) {
-    return <p className="text-muted-foreground p-4 text-center">{empty}</p>;
-  }
-  return (
-    <div className="grid gap-4 grid-cols-2 md:[grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]">
-      {services.map((s) => <ServiceCard key={s.id} service={s} />)}
-    </div>
-  );
-}