@wix/agent-skills 1.36.0 → 1.36.1

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

@@ -1,267 +0,0 @@
-# Wix Events — ready-made client
-
-The events client is **shipped as real files**, not snippets to regenerate. It's a complete events
-listing + detail page + RSVP + ticketing (reserve → hosted checkout, plus in-app free-ticket
-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
-events code (offset paging, category filtering, the RSVP `WAITLIST` case, the ticket
-reservation/checkout shapes all ship and are correct).
-
-Talks to Wix directly over the public `WIX_CLIENT_ID` (anonymous visitor tokens). Never mock events;
-never hand-build a registration/ticket/checkout URL — RSVP completes client-side and paid tickets go
-through the Wix-hosted ticket form via the shipped reserve → redirect path.
-
-## Prerequisites
-- The site's **Wix Events & Tickets** app is the read/registration target. It's installed and seeded separately (see **Seeding** below), in parallel with this build — so it may have no events at build time; the client renders the shipped empty state until events are published. This client is read-only over events (it does not create them).
-- The public headless **`WIX_CLIENT_ID`** from your prompt (visitor-facing, safe to hardcode/commit).
-- Selling **paid** tickets also needs a Wix premium plan + a configured payment method on the site; **free** events and RSVP events work without. For paid tickets the buyer completes payment on the Wix-hosted ticket form; the deployed app domain may need to be allow-listed on the OAuth client for the return to land cleanly — a separate Wix setup the user completes later, out of scope here.
-
-## STEP 1 — The client is already in `src/`
-The install step (base44.md STEP 1) deployed the whole events 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/useEventsList.js` | listing logic — categories, active filter, offset "load more", empty count |
-| `hooks/useEventDetail.js` | detail data for a slug — event + derived `type`/`open` registration state |
-| `hooks/useRsvpForm.js` | RSVP submit logic (`YES`/`NO`, additional guests, `WAITLIST` result) |
-| `hooks/useTicketing.js` | ticket selection + reserve → paid redirect / free in-app checkout |
-| `components/EventCard.jsx`, `EventGrid.jsx` | event listing UI (grid + card, with empty state) |
-| `components/CategoryFilter.jsx` | category menu (renders `label` + `assignedEventsCount`) |
-| `components/EventRegistration.jsx` | branches on `registration.type` (RSVP / TICKETING / EXTERNAL / NONE) |
-| `components/RsvpForm.jsx` | RSVP form UI over `useRsvpForm` |
-| `components/TicketPicker.jsx` | ticket list + quantity + checkout UI over `useTicketing` |
-| `components/WixManageBanner.jsx` | preview-only manage banner — drop it into your Layout (STEP 3) |
-| `pages/Events.jsx`, `pages/EventDetail.jsx` | the two shipped routes (`/events`, `/events/:slug`) |
-| `rest/wix-config.js` | the two ids, written by the install step |
-| `rest/wix-client.js` | visitor-token mint/refresh + REST transport (reads `wix-config.js`) |
-| `rest/wix-events-browse.js` | browse/discovery helpers (`queryEvents`, `getEventBySlug`, categories, count) |
-| `rest/wix-events-registration.js` | RSVP + ticketing helpers (`createRsvp`, `reserveTickets`, `getTicketCheckoutUrl`, `checkoutTickets`) |
-
-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/events/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 + provider (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. (Events needs no cross-page provider — there's no cart; the RSVP/ticketing state is local
-to the detail page.)
-- 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 `Events` / `EventDetail` — 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: `/events` → `Events`, `/events/:slug` → `EventDetail` (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 Events from "@/pages/Events";                   // shipped · default export, no props
-import EventDetail from "@/pages/EventDetail";         // 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 Events/EventDetail render here, untouched */}
-      <Footer />
-    </div>
-  </>);
-}
-
-<Routes>
-  <Route element={<Layout />}>                                {/* chrome wraps all */}
-    <Route path="/" element={<Home />} />                     {/* yours */}
-    <Route path="/events" element={<Events />} />             {/* shipped, as-is */}
-    <Route path="/events/:slug" element={<EventDetail />} />  {/* 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` |
-| `/events` | `src/routes/events.index.jsx` | `Events` |
-| `/events/:slug` | `src/routes/events.$slug.jsx` | `EventDetail` |
-
-```jsx
-// src/routes/events.index.jsx
-import { createFileRoute } from "@tanstack/react-router";
-import Events from "@/pages/Events";
-
-export const Route = createFileRoute("/events")({ component: Events });
-```
-
-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 events" strip is just `queryEvents` + the
-shipped `EventGrid`; the nav is a link to `/events`:
-
-```jsx
-import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
-import { queryEvents } from "@/rest/wix-events-browse";
-import EventGrid from "@/components/EventGrid";
-
-// 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:*` — these navs are inline-styled and
-// an inline `display` beats a Tailwind class, so `hidden` never applies and BOTH branches render.
-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="/events">Events</Link>}
-    </nav>
-  );
-}
-
-export function Featured() {                                 // on your home page
-  const [events, setEvents] = useState([]);
-  // NB: queryEvents returns { events, total, offset, nextOffset } — destructure the array.
-  useEffect(() => { queryEvents({ limit: 6 }).then(({ events }) => setEvents(events)); }, []);
-  return <EventGrid events={events} empty="Events 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
-
-```jsx
-// Every browse list helper returns an OBJECT { events, total, offset, nextOffset } — not a bare
-// array. Destructure `events`; nextOffset is null when there are no more pages.
-import { queryEvents, getEventBySlug, queryEventCategories, listEventsByCategory, countUpcomingEvents } from "@/rest/wix-events-browse";
-
-const { events, nextOffset } = await queryEvents({ limit: 24 });          // live UPCOMING/STARTED, soonest first
-const { categories } = await queryEventCategories();                       // render category.label (NOT name)
-const { events: inCat } = await listEventsByCategory(categories[0].id);    // same shape + paging as queryEvents
-const total = await countUpcomingEvents();                                 // 0 → shipped empty state
-
-// Detail by slug — returns null on miss (the shipped EventDetail shows a not-found state):
-const event = await getEventBySlug(slug);
-
-// Image urls live at event.mainImage.url. shortDescription is a PLAIN string (safe to render).
-// event.description is Ricos rich content { nodes: [...] } — NOT a string; render with @wix/ricos or
-// walk nodes; NEVER call string methods (.slice/.split) on it — that crashes the page.
-```
-
-The registration flows are already wired in the shipped `EventRegistration` (branches on
-`registration.type`, respects `registration.status` — only `OPEN_*` accepts registrations), so your
-pages just render `<EventRegistration .../>` as the shipped `EventDetail` does. Doing a flow yourself:
-
-```jsx
-import { createRsvp, reserveTickets, getTicketCheckoutUrl, checkoutTickets } from "@/rest/wix-events-registration";
-
-// RSVP (client-side): status "NO" only when registration.rsvp.responseType === "YES_AND_NO".
-const rsvp = await createRsvp(event.id, { firstName, lastName, email });   // rsvp.status may be "WAITLIST"
-
-// PAID tickets: reserve, then redirect to the Wix-hosted ticket form — NEVER a hand-built URL.
-const reservation = await reserveTickets([{ ticketDefinitionId, quantity: 1 }]);
-window.location.href = getTicketCheckoutUrl(event, reservation.id);
-
-// FREE tickets only: finish in-app instead of redirecting (throws if payment is owed).
-const order = await checkoutTickets(event.id, { reservationId: reservation.id, buyer, guests: [buyer] });
-```
-
-## Extending the client
-Building something beyond the shipped pages (a "my registrations" account view, coupons, seating
-maps, a schedule/agenda, canceling a reservation)? The helpers cover the common RSVP + ticketing
-paths; for a gap, make the call with `wixApiRequest` — but look up the exact endpoint/body in the
-official Wix Events API reference first, never guess:
-- Events API reference: https://dev.wix.com/docs/api-reference/business-solutions/events.md
-- Registration (RSVP + ticketing): https://dev.wix.com/docs/api-reference/business-solutions/events/registration/introduction.md
-- Member login + "my registrations" → the **members** vertical (`references/members/INSTRUCTIONS.md`).
-
-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.
-
-## Hard rules
-- Header/footer live in a `Layout` around `<Outlet/>` (STEP 3) — never edit the shipped `Events`/`EventDetail` to add chrome.
-- The Layout's fixed top region owns positioning: `<WixManageBanner/>` above `<Header/>`; your `Header` is plain in-flow markup (not `position:fixed`).
-- Paid ticket checkout goes through the shipped reserve → `getTicketCheckoutUrl` redirect (the Wix-hosted ticket form) — never a hand-built registration/ticket/payment URL.
-- Render live Wix data or the shipped empty/closed/not-found state — never mock events, tickets, guest counts, or "X spots left".
-
-## Point the user to their dashboard
-Provide deep links so the owner can edit content (substitute the site's `metaSiteId`):
-- **Events** — `https://manage.wix.com/dashboard/{metaSiteId}/events` (`Dashboard → Events` → **+ Add Event**; create the event, then set it up as **Ticketed** or **RSVP**; only published events appear in the app)
-
-## Seeding
-Seed events 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 the vertical's data route(s) (not just the home page) and confirmed the shipped components render themed (surface, text, brand) with images.
-- [ ] `Layout` (fixed `<WixManageBanner/>` + `<Header/>` region, then `<Outlet/>` + Footer) wraps all routes; shipped `Events`/`EventDetail` untouched; content clears the fixed chrome.
-- [ ] Event grid renders live events; clicking a card opens the detail page by `slug`; visitor token persists across reload.
-- [ ] Detail page branches correctly on `registration.type` (RSVP form vs. ticket picker vs. external link vs. none); closed registration / sold-out tickets show a clear state.
-- [ ] RSVP submit creates a real RSVP (and surfaces a `WAITLIST` result when full); paid ticket purchase reserves then redirects via `getTicketCheckoutUrl`.
-- [ ] Empty catalog shows the shipped empty state (`countUpcomingEvents()` is 0); no mock events anywhere.

package/skills/wix-vibe-headless/references/events/app/components/CategoryFilter.jsx

@@ -1,23 +0,0 @@
-// Category filter menu for the events listing. Pure UI — the active id + setter come from
-// useEventsList. Display field is `name`; key/filter by `category.id`; the per-category
-// count is `counts.assignedEventsCount`. Styled with base44 design tokens (shadcn Tailwind classes).
-
-const chipBase = "py-1.5 px-3.5 cursor-pointer text-sm font-body border rounded-full";
-const chipIdle = "border-border bg-card text-foreground";
-const chipActive = "bg-primary text-primary-foreground border-primary";
-
-export default function CategoryFilter({ categories, active, onSelect }) {
-  if (!categories?.length) return null;
-  return (
-    <nav className="flex flex-wrap gap-2 mb-4">
-      <button onClick={() => onSelect(null)} aria-pressed={active === null}
-        className={`${chipBase} ${active === null ? chipActive : chipIdle}`}>All</button>
-      {categories.map((c) => (
-        <button key={c.id} onClick={() => onSelect(c.id)} aria-pressed={active === c.id}
-          className={`${chipBase} ${active === c.id ? chipActive : chipIdle}`}>
-          {c.name} ({c.counts?.assignedEventsCount ?? 0})
-        </button>
-      ))}
-    </nav>
-  );
-}

package/skills/wix-vibe-headless/references/events/app/components/EventCard.jsx

@@ -1,43 +0,0 @@
-// Grid tile for one event. Styled with base44 design tokens (shadcn Tailwind classes) — re-skin via
-// those tokens (src/index.css :root/.dark), not this JSX. The date/location/teaser field paths and
-// the TICKETING "from" price are load-bearing: lowestPrice is a Money object { value, currency,
-// formattedValue } — render formattedValue, NEVER the raw object (React "objects are not valid as a
-// child" crash). This is a different shape from the ticket-definition price (pricing.fixedPrice.amount)
-// used in the picker.
-import { Link } from "@/lib/nav";
-
-export default function EventCard({ event }) {
-  const when = event.dateAndTimeSettings?.formatted?.dateAndTime;
-  const where = event.location?.name;
-  const isTicketing = event.registration?.type === "TICKETING";
-  const fromPrice = event.registration?.tickets?.lowestPrice?.formattedValue;
-  const soldOut = event.registration?.tickets?.soldOut;
-  const image = event.mainImage?.url;
-
-  return (
-    <Link to={`/events/${event.slug}`}
-      className="flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
-      <div className="relative aspect-[3/2] bg-background">
-        {image
-          ? <img src={image} alt={event.title} loading="lazy" className="w-full h-full object-cover" />
-          : <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>}
-        {isTicketing && soldOut && (
-          <span className="absolute top-2 left-2 py-0.5 px-2 text-xs bg-destructive text-destructive-foreground rounded-sm">Sold out</span>
-        )}
-      </div>
-      <div className="p-3 flex flex-col gap-1">
-        <h3 className="m-0 font-display text-base font-semibold">{event.title}</h3>
-        {when && <span className="text-muted-foreground text-[13px]">{when}</span>}
-        {where && <span className="text-muted-foreground text-[13px]">{where}</span>}
-        {event.shortDescription && (
-          <p className="m-0 mt-1 text-muted-foreground text-sm leading-[1.4]">
-            {event.shortDescription}
-          </p>
-        )}
-        {isTicketing && !soldOut && fromPrice && (
-          <span className="mt-1 font-semibold text-primary">From {fromPrice}</span>
-        )}
-      </div>
-    </Link>
-  );
-}

package/skills/wix-vibe-headless/references/events/app/components/EventGrid.jsx

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

package/skills/wix-vibe-headless/references/events/app/components/EventRegistration.jsx

@@ -1,29 +0,0 @@
-// Registration surface for the detail page — branches on registration.type and respects `open`
-// (only OPEN_* statuses accept new registrations). Pure UI; the RSVP/ticketing logic lives in their
-// own hooks/components. Styled with base44 design tokens (shadcn Tailwind classes).
-import RsvpForm from "./RsvpForm";
-import TicketPicker from "./TicketPicker";
-
-const closed = "text-destructive font-semibold";
-const link = "inline-block py-3 px-6 no-underline bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold";
-
-export default function EventRegistration({ event, type, open, registration }) {
-  if (type === "EXTERNAL") {
-    return registration.external?.url
-      ? <a href={registration.external.url} target="_blank" rel="noopener" className={link}>Register</a>
-      : null;
-  }
-  if (type === "NONE") return null;
-
-  if (type === "RSVP") {
-    return open
-      ? <RsvpForm eventId={event.id} responseType={registration.rsvp?.responseType} />
-      : <p className={closed}>Registration is closed.</p>;
-  }
-  if (type === "TICKETING") {
-    return open
-      ? <TicketPicker event={event} />
-      : <p className={closed}>Ticket sales are closed.</p>;
-  }
-  return null;
-}

package/skills/wix-vibe-headless/references/events/app/components/RsvpForm.jsx

@@ -1,57 +0,0 @@
-// RSVP form for an RSVP-type event. Pure UI over useRsvpForm — no data logic here. Styled with
-// base44 design tokens (shadcn Tailwind classes). Offers a "NO" reply only when responseType is
-// "YES_AND_NO"; a WAITLIST result (event full) is surfaced distinctly from a confirmed YES.
-import { useRsvpForm } from "@/hooks/useRsvpForm";
-
-const input = "w-full px-3 py-2.5 box-border font-body border border-input rounded-sm bg-background text-foreground";
-const label = "block mb-1.5 text-[13px] font-semibold text-muted-foreground";
-const field = "mb-4";
-
-export default function RsvpForm({ eventId, responseType }) {
-  const { form, setField, submit, submitting, canSubmit, result, error } = useRsvpForm(eventId);
-
-  if (result) {
-    const waitlisted = result.status === "WAITLIST";
-    return (
-      <div className="p-4 rounded-lg bg-card border border-border text-foreground">
-        {waitlisted
-          ? "This event is full — you've been added to the waitlist. We'll email you if a spot opens."
-          : "You're on the list! A confirmation is on its way to your email."}
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={(e) => { e.preventDefault(); submit(); }} className="max-w-[440px]">
-      <div className={field}>
-        <label className={label}>First name</label>
-        <input className={input} value={form.firstName} onChange={(e) => setField("firstName", e.target.value)} required />
-      </div>
-      <div className={field}>
-        <label className={label}>Last name</label>
-        <input className={input} value={form.lastName} onChange={(e) => setField("lastName", e.target.value)} required />
-      </div>
-      <div className={field}>
-        <label className={label}>Email</label>
-        <input className={input} type="email" value={form.email} onChange={(e) => setField("email", e.target.value)} required />
-      </div>
-
-      {responseType === "YES_AND_NO" && (
-        <div className={field}>
-          <label className={label}>Will you attend?</label>
-          <select className={input} value={form.status} onChange={(e) => setField("status", e.target.value)}>
-            <option value="YES">Yes, I'll be there</option>
-            <option value="NO">No, I can't make it</option>
-          </select>
-        </div>
-      )}
-
-      {error && <p className="text-destructive mb-4">{error}</p>}
-
-      <button type="submit" disabled={!canSubmit}
-        className="py-3 px-6 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
-        {submitting ? "Sending…" : "RSVP"}
-      </button>
-    </form>
-  );
-}

package/skills/wix-vibe-headless/references/events/app/components/TicketPicker.jsx

@@ -1,78 +0,0 @@
-// Ticket picker for a TICKETING event. Pure UI over useTicketing — no data logic here. Styled with
-// base44 design tokens (shadcn Tailwind classes).
-//   • Ticket-definition price is a plain number at pricing.fixedPrice.amount (+ price.currency here).
-//   • FREE-only selection → an in-app buyer form + checkoutTickets (no redirect).
-//   • Any PAID ticket → "Continue to checkout", which reserves then redirects to the Wix-hosted form.
-import { useState } from "react";
-import { useTicketing } from "@/hooks/useTicketing";
-
-const input = "px-3 py-2.5 box-border font-body border border-input rounded-sm bg-background text-foreground";
-
-function ticketPrice(def) {
-  if (def.free) return "Free";
-  const amount = def.price?.amount ?? def.pricing?.fixedPrice?.amount;
-  const currency = def.price?.currency ?? def.pricing?.fixedPrice?.currency ?? "";
-  return amount != null ? `${amount} ${currency}`.trim() : "";
-}
-
-export default function TicketPicker({ event }) {
-  const t = useTicketing(event);
-  const [buyer, setBuyer] = useState({ firstName: "", lastName: "", email: "" });
-  const setBuyerField = (k, v) => setBuyer((b) => ({ ...b, [k]: v }));
-
-  if (t.order) {
-    return (
-      <div className="p-4 rounded-lg bg-card border border-border">
-        Your tickets are confirmed.{" "}
-        {t.order.ticketsPdf && (
-          <a href={t.order.ticketsPdf} target="_blank" rel="noopener" className="text-primary">Download tickets (PDF)</a>
-        )}
-      </div>
-    );
-  }
-
-  if (!t.definitions.length) {
-    return <p className="text-muted-foreground">No tickets are currently on sale.</p>;
-  }
-
-  const buyerReady = buyer.firstName && buyer.lastName && buyer.email;
-
-  return (
-    <div>
-      {t.definitions.map((def) => (
-        <div key={def.id} className="flex items-center justify-between gap-4 py-3 border-b border-border">
-          <div>
-            <div className="font-semibold">{def.name}</div>
-            {def.description && <div className="text-muted-foreground text-sm">{def.description}</div>}
-            <div className="text-primary font-semibold mt-0.5">{ticketPrice(def)}</div>
-          </div>
-          <input type="number" min={0} value={t.selection[def.id]?.quantity ?? 0}
-            onChange={(e) => t.setQuantity(def.id, Number(e.target.value) || 0)}
-            className={`${input} w-[72px] text-center`} />
-        </div>
-      ))}
-
-      {t.error && <p className="text-destructive mt-4">{t.error}</p>}
-
-      {t.hasSelection && t.allFree && (
-        <div className="mt-4 grid gap-2 max-w-[440px]">
-          <input className={`${input} w-full`} placeholder="First name" value={buyer.firstName}
-            onChange={(e) => setBuyerField("firstName", e.target.value)} />
-          <input className={`${input} w-full`} placeholder="Last name" value={buyer.lastName}
-            onChange={(e) => setBuyerField("lastName", e.target.value)} />
-          <input className={`${input} w-full`} type="email" placeholder="Email" value={buyer.email}
-            onChange={(e) => setBuyerField("email", e.target.value)} />
-        </div>
-      )}
-
-      {t.hasSelection && (
-        <button
-          disabled={t.submitting || (t.allFree && !buyerReady)}
-          onClick={() => (t.allFree ? t.checkoutFree(buyer) : t.checkoutPaid())}
-          className="mt-4 py-3 px-6 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
-          {t.submitting ? "Processing…" : t.allFree ? "Get tickets" : "Continue to checkout"}
-        </button>
-      )}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/events/app/hooks/useEventDetail.js

@@ -1,27 +0,0 @@
-// useEventDetail — load one event by slug and derive its registration state. No markup.
-//   • getEventBySlug returns null on miss → notFound (never invent an event).
-//   • registration.type is "RSVP" | "TICKETING" | "EXTERNAL" | "NONE" — the detail page branches on it.
-//   • Only registration.status values starting "OPEN_" accept new registrations; otherwise `open` is
-//     false and the page shows the closed state.
-//   • shortDescription is a plain string (safe to render). event.description is Ricos rich content
-//     { nodes: [...] } — NOT a string; render with @wix/ricos or walk nodes, never call string
-//     methods on it (that crashes the page). This hook does not touch description.
-import { useState, useEffect } from "react";
-import { getEventBySlug } from "@/rest/wix-events-browse";
-
-export function useEventDetail(slug) {
-  const [event, setEvent] = useState(null);
-  const [notFound, setNotFound] = useState(false);
-
-  useEffect(() => {
-    setEvent(null);
-    setNotFound(false);
-    getEventBySlug(slug).then((e) => (e ? setEvent(e) : setNotFound(true)));
-  }, [slug]);
-
-  const reg = event?.registration ?? {};
-  const type = reg.type ?? "NONE";
-  const open = typeof reg.status === "string" && reg.status.startsWith("OPEN_");
-
-  return { event, notFound, type, open, registration: reg };
-}

package/skills/wix-vibe-headless/references/events/app/hooks/useEventsList.js

@@ -1,54 +0,0 @@
-// useEventsList — all listing logic, no markup: load the category menu + upcoming count, list
-// events (all or filtered by category), and page with offset "load more". The data shapes here are
-// the bug-prone part — keep them verbatim; the Events page only renders what this returns.
-//   • queryEvents / listEventsByCategory return { events, total, offset, nextOffset } — an OBJECT,
-//     not a bare array; nextOffset is null when there are no more pages.
-//   • queryEventCategories returns { categories, total }; render category.name,
-//     key/filter by category.id, count = counts.assignedEventsCount.
-//   • total === 0 → the whole catalog is empty; show the "publish events" empty state.
-import { useState, useEffect } from "react";
-import {
-  queryEvents, listEventsByCategory, queryEventCategories, countUpcomingEvents,
-} from "@/rest/wix-events-browse";
-
-export function useEventsList({ pageSize = 24 } = {}) {
-  const [events, setEvents] = useState([]);
-  const [nextOffset, setNextOffset] = useState(null); // offset for the next page; null when no more
-  const [categories, setCategories] = useState([]);   // category menu
-  const [active, setActive] = useState(null);          // selected category id, or null for "all"
-  const [total, setTotal] = useState(null);            // upcoming count across the whole catalog
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    countUpcomingEvents().then(setTotal);
-    queryEventCategories().then(({ categories }) => setCategories(categories));
-  }, []);
-
-  useEffect(() => {
-    setLoading(true);
-    const load = active
-      ? listEventsByCategory(active, { limit: pageSize })
-      : queryEvents({ limit: pageSize });
-    load.then(({ events, nextOffset }) => {
-      setEvents(events);
-      setNextOffset(nextOffset);
-      setLoading(false);
-    });
-  }, [active, pageSize]);
-
-  const loadMore = () => {
-    if (nextOffset === null) return;
-    const load = active
-      ? listEventsByCategory(active, { limit: pageSize, offset: nextOffset })
-      : queryEvents({ limit: pageSize, offset: nextOffset });
-    load.then(({ events: more, nextOffset: next }) => {
-      setEvents((e) => [...e, ...more]);
-      setNextOffset(next);
-    });
-  };
-
-  return {
-    events, categories, active, setActive,
-    total, loading, hasMore: nextOffset !== null, loadMore,
-  };
-}

package/skills/wix-vibe-headless/references/events/app/hooks/useRsvpForm.js

@@ -1,40 +0,0 @@
-// useRsvpForm — RSVP submission logic for an RSVP-type event, no markup.
-//   • createRsvp(eventId, { firstName, lastName, email, status, additionalGuestNames? }) completes
-//     fully client-side (no redirect) and throws on closed/full registration, guest-limit, duplicate
-//     email, or invalid form — surface the message, don't swallow it.
-//   • Only offer status "NO" when registration.rsvp.responseType === "YES_AND_NO".
-//   • A full-with-waitlist event returns the RSVP with status "WAITLIST" — tell the guest.
-import { useState } from "react";
-import { createRsvp } from "@/rest/wix-events-registration";
-
-export function useRsvpForm(eventId) {
-  const [form, setForm] = useState({ firstName: "", lastName: "", email: "", status: "YES" });
-  const [guests, setGuests] = useState([]); // additional guest names (strings)
-  const [submitting, setSubmitting] = useState(false);
-  const [result, setResult] = useState(null); // the created RSVP (carries .status) on success
-  const [error, setError] = useState(null);
-
-  const setField = (name, value) => setForm((f) => ({ ...f, [name]: value }));
-
-  async function submit() {
-    setSubmitting(true);
-    setError(null);
-    try {
-      const rsvp = await createRsvp(eventId, {
-        firstName: form.firstName,
-        lastName: form.lastName,
-        email: form.email,
-        status: form.status,
-        additionalGuestNames: guests.filter(Boolean),
-      });
-      setResult(rsvp); // rsvp.status is "YES" | "NO" | "WAITLIST"
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  const canSubmit = !!(form.firstName && form.lastName && form.email) && !submitting;
-  return { form, setField, guests, setGuests, submit, submitting, canSubmit, result, error };
-}