Subchapter 20.46

INSTRUCTIONS

references/events/INSTRUCTIONS.mdMarkdown16 KBView on GitHub

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 case, the ticket reservation/checkout shapes all ship and are correct).

INSTRUCTIONS · Wix Vibe Headless · wix/skills · Skills Docs

WAITLIST

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`	dev-only manage banner — drop it into your Layout (STEP 4)
`pages/Events.jsx`, `pages/EventDetail.jsx`	the two shipped routes (`/events`, `/events/:slug`)
`rest/wix-config.js`	you set the ids here (STEP 2)
`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`)

import { useRef, useState, useEffect } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import WixManageBanner from "@/components/WixManageBanner";   // shipped, dev-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 in prod / 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>

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." />;
}

// 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.

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] });

INSTRUCTIONS

Wix Events — ready-made client

INSTRUCTIONS

Wix Events — ready-made client

Prerequisites

STEP 1 — The client is already in `src/`

STEP 2 — Credentials

STEP 3 — Theme (nothing to style on the shipped components)

STEP 4 — Wire routes + provider (surgical `find_replace` on `src/App.jsx`, never a rewrite)

What you build (not shipped)

Using the client from your own UI

Extending the client

Hard rules

Point the user to their dashboard

Seeding

Verify (before declaring done)