@wix/agent-skills 1.26.0 → 1.27.0

package/skills/wix-headless-templates/events/project/src/components/events/EventRegistrationView.tsx

@@ -0,0 +1,375 @@
+// The registration controls for one event — wire as-is (the events counterpart of storefront's
+// OptionPicker): branches on the event's registration state and type — closed (sold out or closed
+// by the organizer), scheduled ("opens <date>"), paused; then TICKETING renders the tier picker
+// (fixed, free, donation and pricing-option tiers, steppers clamped to what can still be bought,
+// sold-out and sale-period badges, the tax/fee lines, Wix's running totals, the CTA gated by
+// canCheckout), RSVP the ORGANIZER'S form (every control type, the guest picker, the waitlist and
+// members-only copy) with its confirmed / waitlisted / declined states, EXTERNAL a link out — on
+// the @theme tokens. The event page's layout around it is yours; build your own on
+// useEventRegistration only when the brief wants more. Mount client:only — it runs
+// visitor-session SDK calls and redirects.
+import { useEventRegistration } from "../../hooks/events/useEventRegistration";
+import type { EventDetail, RsvpFormControl, RsvpFormInput, TicketTier } from "../../wix/events/types";
+
+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 labelText = "mb-1 block text-xs font-semibold uppercase tracking-wider text-muted-foreground";
+const cta =
+  "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";
+const stepper = "h-8 w-8 rounded-control border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-40";
+const badge = "rounded-control bg-secondary px-2 py-0.5 text-xs font-medium text-muted-foreground";
+
+function Stepper({ label, qty, max, disabled, onChange }: { label: string; qty: number; max: number; disabled: boolean; onChange: (q: number) => void }) {
+  return (
+    <div className="flex items-center gap-2">
+      <button type="button" aria-label={`Fewer ${label}`} disabled={disabled || qty === 0} onClick={() => onChange(qty - 1)} className={stepper}>
+        −
+      </button>
+      <span className="w-6 text-center text-sm tabular-nums">{qty}</span>
+      <button type="button" aria-label={`More ${label}`} disabled={disabled || qty >= max} onClick={() => onChange(qty + 1)} className={stepper}>
+        +
+      </button>
+    </div>
+  );
+}
+
+function Notes({ notes }: { notes: string[] }) {
+  return notes.length ? <p className="mt-0.5 text-xs text-muted-foreground">{notes.join(" · ")}</p> : null;
+}
+
+function TierRow({
+  tier,
+  quantities,
+  guestPrice,
+  setQuantity,
+  setGuestPrice,
+}: {
+  tier: TicketTier;
+  quantities: Record<string, number>;
+  guestPrice: string;
+  setQuantity: (tierId: string, qty: number, optionId?: string) => void;
+  setGuestPrice: (tierId: string, value: string) => void;
+}) {
+  const qty = quantities[tier.id] ?? 0;
+  return (
+    <div className="rounded-lg border border-border p-4">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-foreground">
+            {tier.name}
+            {tier.soldOut && <span className={`${badge} ml-2`}>Sold out</span>}
+            {!tier.soldOut && tier.saleStatus === "SALE_ENDED" && <span className={`${badge} ml-2`}>Sale ended</span>}
+          </p>
+          {tier.description && <p className="mt-0.5 text-xs text-muted-foreground">{tier.description}</p>}
+          {tier.pricingType !== "OPTIONS" && tier.price && <p className="mt-1 text-sm text-foreground">{tier.price}</p>}
+          {tier.pricingType === "GUEST" && (
+            <p className="mt-1 text-sm text-foreground">{tier.minPrice ? `Pay what you want — at least ${tier.minPrice}` : "Pay what you want"}</p>
+          )}
+          <Notes notes={tier.notes} />
+          {tier.saleStartsLabel && <p className="mt-1 text-xs text-muted-foreground">Goes on sale {tier.saleStartsLabel}</p>}
+          {tier.available && tier.saleEndsLabel && <p className="mt-1 text-xs text-muted-foreground">Sale ends {tier.saleEndsLabel}</p>}
+        </div>
+        {tier.pricingType !== "OPTIONS" && (
+          <Stepper label={tier.name} qty={qty} max={tier.limitPerCheckout} disabled={!tier.available} onChange={(q) => setQuantity(tier.id, q)} />
+        )}
+      </div>
+      {tier.pricingType === "GUEST" && (
+        <label className="mt-3 block max-w-xs">
+          <span className={labelText}>Your amount{tier.currency ? ` (${tier.currency})` : ""}</span>
+          <input
+            type="number"
+            inputMode="decimal"
+            min={tier.minPriceValue || 0}
+            step="0.01"
+            value={guestPrice}
+            disabled={!tier.available}
+            onChange={(e) => setGuestPrice(tier.id, e.target.value)}
+            className={input}
+          />
+        </label>
+      )}
+      {tier.pricingType === "OPTIONS" && (
+        <div className="mt-3 space-y-2">
+          {tier.options.map((o) => (
+            <div key={o.id} className="flex items-center justify-between gap-4 border-t border-border pt-2">
+              <div>
+                <p className="text-sm text-foreground">{o.name}</p>
+                <p className="text-sm text-foreground">{o.price}</p>
+                <Notes notes={o.notes} />
+              </div>
+              <Stepper
+                label={`${tier.name} ${o.name}`}
+                qty={quantities[`${tier.id}:${o.id}`] ?? 0}
+                max={tier.limitPerCheckout}
+                disabled={!tier.available}
+                onChange={(q) => setQuantity(tier.id, q, o.id)}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FormInput({ control, field, value, onChange }: { control: RsvpFormControl; field: RsvpFormInput; value: string | string[] | undefined; onChange: (v: string | string[]) => void }) {
+  const text = Array.isArray(value) ? value.join(", ") : (value ?? "");
+  const required = field.mandatory ? <span aria-hidden="true"> *</span> : null;
+  if (control.type === "CHECKBOX") {
+    const picked = Array.isArray(value) ? value : [];
+    return (
+      <fieldset>
+        <legend className={labelText}>
+          {field.label}
+          {required}
+        </legend>
+        {field.options.map((opt) => (
+          <label key={opt} className="flex items-center gap-2 py-0.5 text-sm text-foreground">
+            <input
+              type="checkbox"
+              checked={picked.includes(opt)}
+              onChange={(e) => onChange(e.target.checked ? [...picked, opt] : picked.filter((p) => p !== opt))}
+            />
+            {opt}
+          </label>
+        ))}
+      </fieldset>
+    );
+  }
+  if (control.type === "RADIO") {
+    return (
+      <fieldset>
+        <legend className={labelText}>
+          {field.label}
+          {required}
+        </legend>
+        {field.options.map((opt) => (
+          <label key={opt} className="flex items-center gap-2 py-0.5 text-sm text-foreground">
+            <input type="radio" name={field.name} checked={text === opt} onChange={() => onChange(opt)} />
+            {opt}
+          </label>
+        ))}
+      </fieldset>
+    );
+  }
+  if (control.type === "DROPDOWN" || field.options.length) {
+    return (
+      <label className="block">
+        <span className={labelText}>
+          {field.label}
+          {required}
+        </span>
+        <select value={text} onChange={(e) => onChange(e.target.value)} className={input}>
+          <option value="">Select…</option>
+          {field.options.map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      </label>
+    );
+  }
+  if (control.type === "TEXTAREA") {
+    return (
+      <label className="block">
+        <span className={labelText}>
+          {field.label}
+          {required}
+        </span>
+        <textarea value={text} maxLength={field.maxLength || undefined} onChange={(e) => onChange(e.target.value)} className={`${input} min-h-24`} />
+      </label>
+    );
+  }
+  const type = control.type === "DATE" || field.type === "DATE_TIME" ? "date" : field.type === "NUMBER" ? "number" : /mail/i.test(field.name) ? "email" : "text";
+  return (
+    <label className="block">
+      <span className={labelText}>
+        {field.label}
+        {required}
+      </span>
+      <input type={type} value={text} maxLength={field.maxLength || undefined} onChange={(e) => onChange(e.target.value)} className={input} />
+    </label>
+  );
+}
+
+export default function EventRegistrationView({ event }: { event: EventDetail }) {
+  const {
+    tiers,
+    quantities,
+    guestPrices,
+    setQuantity,
+    setGuestPrice,
+    ticketCount,
+    ticketLimitPerOrder,
+    totals,
+    canCheckout,
+    checkout,
+    rsvpForm,
+    rsvpValues,
+    setRsvpValue,
+    guestCount,
+    guestNames,
+    setGuestCount,
+    setGuestName,
+    canRsvp,
+    rsvp,
+    submitting,
+    confirmed,
+    error,
+  } = useEventRegistration(event);
+
+  if (confirmed && confirmed.kind === "rsvpConfirmed") {
+    return (
+      <div className="rounded-lg border border-border bg-secondary p-8 text-center">
+        <p className="text-lg font-semibold">
+          {confirmed.status === "WAITLIST" ? "You're on the waitlist" : confirmed.status === "NO" ? "Thanks for letting us know" : "You're in!"}
+        </p>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {confirmed.status === "WAITLIST"
+            ? `${event.title} is full — we'll email you if a spot opens up.`
+            : confirmed.status === "NO"
+              ? "We've recorded that you can't make it."
+              : `See you at ${event.title}${event.dateLabel ? ` — ${event.dateLabel}` : ""}. A confirmation email is on its way.`}
+        </p>
+      </div>
+    );
+  }
+
+  // Closed is exactly what Wix calls closed; a scheduled opening and a pause are their own states.
+  if (event.registrationClosed || event.registrationType === "NONE") {
+    return (
+      <div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">
+        {event.soldOut ? "This event is sold out." : "Registration for this event is closed."}
+      </div>
+    );
+  }
+  if (event.registrationStatus === "SCHEDULED_RSVP") {
+    return (
+      <div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">
+        {event.registrationOpensAtLabel ? `Registration opens ${event.registrationOpensAtLabel}.` : "Registration hasn't opened yet."}
+      </div>
+    );
+  }
+  if (event.registrationPaused || !event.registrationOpen) {
+    return <div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">Registration is paused right now — check back soon.</div>;
+  }
+
+  if (event.registrationType === "EXTERNAL") {
+    return (
+      <a href={event.externalUrl} className={`${cta} inline-block no-underline`} target="_blank" rel="noreferrer">
+        Register
+      </a>
+    );
+  }
+
+  if (event.registrationType === "TICKETING") {
+    return (
+      <div>
+        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Tickets</p>
+        {tiers === null ? (
+          <div className="space-y-3" aria-busy="true">
+            {Array.from({ length: 2 }, (_, i) => (
+              <div key={i} className="h-16 animate-pulse rounded-lg bg-secondary" />
+            ))}
+          </div>
+        ) : tiers.length === 0 ? (
+          <p className="rounded-md border border-border p-4 text-sm text-muted-foreground">Tickets aren't available right now.</p>
+        ) : (
+          <div className="space-y-3">
+            {tiers.map((t) => (
+              <TierRow key={t.id} tier={t} quantities={quantities} guestPrice={guestPrices[t.id] ?? ""} setQuantity={setQuantity} setGuestPrice={setGuestPrice} />
+            ))}
+          </div>
+        )}
+        {totals && (
+          <dl className="mt-4 space-y-1 text-sm text-muted-foreground">
+            <div className="flex justify-between">
+              <dt>Subtotal</dt>
+              <dd className="tabular-nums">{totals.subtotal}</dd>
+            </div>
+            {event.taxSettings && !event.taxSettings.includedInPrice && (
+              <div className="flex justify-between">
+                <dt>{event.taxSettings.name}</dt>
+                <dd className="tabular-nums">{totals.tax}</dd>
+              </div>
+            )}
+            {(tiers ?? []).some((t) => t.feeType === "FEE_ADDED_AT_CHECKOUT") && (
+              <div className="flex justify-between">
+                <dt>Ticket service fee</dt>
+                <dd className="tabular-nums">{totals.fee}</dd>
+              </div>
+            )}
+            <div className="flex justify-between font-medium text-foreground">
+              <dt>Total</dt>
+              <dd className="tabular-nums">{totals.total}</dd>
+            </div>
+          </dl>
+        )}
+        {ticketCount >= ticketLimitPerOrder && <p className="mt-2 text-xs text-muted-foreground">Up to {ticketLimitPerOrder} tickets per order.</p>}
+        {error && <p className="mt-3 text-sm text-destructive">{error}</p>}
+        <button type="button" disabled={!canCheckout || submitting} onClick={() => checkout().catch(() => {})} className={cta}>
+          {submitting ? "Reserving…" : ticketCount > 0 ? `Get ${ticketCount} ticket${ticketCount > 1 ? "s" : ""}` : "Get tickets"}
+        </button>
+      </div>
+    );
+  }
+
+  if (event.registrationType === "RSVP") {
+    const guest = rsvpForm.guestControl;
+    return (
+      <div>
+        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">{event.waitlistOnly ? "Waitlist" : "RSVP"}</p>
+        {event.waitlistOnly && <p className="mb-3 text-sm text-muted-foreground">This event is full — join the waitlist and we'll email you if a spot opens up.</p>}
+        {event.membersOnly && <p className="mb-3 text-sm text-muted-foreground">Registration is for site members — sign in to your account on this site first.</p>}
+        <div className="grid max-w-md gap-3">
+          {rsvpForm.controls.map((control) =>
+            control.inputs.map((field) => (
+              <FormInput key={`${control.id}:${field.name}`} control={control} field={field} value={rsvpValues[field.name]} onChange={(v) => setRsvpValue(field.name, v)} />
+            )),
+          )}
+          {guest && guest.maxGuests > 0 && (
+            <>
+              <label className="block">
+                <span className={labelText}>{guest.label}</span>
+                <select value={guestCount} onChange={(e) => setGuestCount(Number(e.target.value))} className={input}>
+                  {Array.from({ length: guest.maxGuests + 1 }, (_, n) => (
+                    <option key={n} value={n}>
+                      {n}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              {Array.from({ length: guestCount }, (_, i) => (
+                <label key={i} className="block">
+                  <span className={labelText}>
+                    {guest.namesLabel} {i + 1}
+                  </span>
+                  <input type="text" value={guestNames[i] ?? ""} onChange={(e) => setGuestName(i, e.target.value)} className={input} />
+                </label>
+              ))}
+            </>
+          )}
+        </div>
+        {error && <p className="mt-3 text-sm text-destructive">{error}</p>}
+        <div className="flex items-center gap-3">
+          <button type="button" disabled={!canRsvp || submitting} onClick={() => rsvp(true).catch(() => {})} className={cta}>
+            {submitting ? "Sending…" : event.waitlistOnly ? "Join the waitlist" : "Count me in"}
+          </button>
+          {event.rsvpResponseType === "YES_AND_NO" && (
+            <button
+              type="button"
+              disabled={!canRsvp || submitting}
+              onClick={() => rsvp(false).catch(() => {})}
+              className="mt-5 rounded-control border border-border px-6 py-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:opacity-50"
+            >
+              Can't make it
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return <div className="rounded-lg border border-border p-6 text-sm text-muted-foreground">Registration isn't open for this event.</div>;
+}

package/skills/wix-headless-templates/events/project/src/components/events/EventsView.tsx

@@ -0,0 +1,134 @@
+// REFERENCE listing surface: category filter + events grid + "load more" on the @theme tokens.
+// Correct and complete; per the skill's model you design and build your own on useEvents.
+import type { ComponentType, ReactNode } from "react";
+import { useEvents } from "../../hooks/events/useEvents";
+import { imgAttrs } from "../../wix/media";
+import type { EventSummary } from "../../wix/events/types";
+
+export interface LinkLikeProps {
+  href: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const PlainLink = ({ href, className, children }: LinkLikeProps) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+);
+
+export interface EventCardProps {
+  event: EventSummary;
+  eventHref?: (slug: string) => string;
+  LinkComponent?: ComponentType<LinkLikeProps>;
+}
+
+export function EventCard({
+  event,
+  eventHref = (slug) => `/events/${encodeURIComponent(slug)}`,
+  LinkComponent = PlainLink,
+}: EventCardProps) {
+  return (
+    <LinkComponent href={eventHref(event.slug)} className="group block no-underline">
+      <div className="relative aspect-[3/2] overflow-hidden rounded-lg bg-secondary">
+        {event.imageUrl && (
+          <img
+            {...imgAttrs(event.imageUrl, "(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw", 2 / 3)}
+            alt={event.title}
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+          />
+        )}
+        {event.soldOut && (
+          <span className="absolute left-3 top-3 rounded-control bg-background/90 px-3 py-1 text-xs font-semibold text-foreground backdrop-blur">
+            Sold out
+          </span>
+        )}
+      </div>
+      {event.dateLabel && <p className="eyebrow mt-3">{event.dateLabel}</p>}
+      <p className="mt-1 text-sm font-medium text-foreground">{event.title}</p>
+      <p className="mt-0.5 text-xs text-muted-foreground">
+        {event.locationType === "ONLINE" ? "Online" : event.locationName}
+        {event.priceLabel ? ` · ${event.priceLabel}` : ""}
+      </p>
+    </LinkComponent>
+  );
+}
+
+export interface EventsViewProps {
+  initialEvents?: EventSummary[];
+  /** From fetchEventsPage — lets the list know there is more to load. */
+  initialTotal?: number;
+  emptyMessage?: string;
+  eventHref?: EventCardProps["eventHref"];
+  LinkComponent?: ComponentType<LinkLikeProps>;
+  CardComponent?: ComponentType<EventCardProps>;
+}
+
+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 EventsView({
+  initialEvents,
+  initialTotal,
+  emptyMessage = "No upcoming events — check back soon.",
+  eventHref,
+  LinkComponent,
+  CardComponent = EventCard,
+}: EventsViewProps) {
+  const { events, categories, activeCategoryId, setActiveCategoryId, hasMore, loadingMore, loadMore, error } = useEvents({
+    initialEvents,
+    initialTotal,
+  });
+
+  return (
+    <div>
+      {categories.length > 1 && (
+        <div className="mb-8 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>
+      )}
+      {error && <p className="mb-4 text-sm text-destructive">{error}</p>}
+      {events === 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-[3/2] animate-pulse rounded-lg bg-secondary" />
+              <div className="mt-3 h-3.5 w-2/3 animate-pulse rounded bg-secondary" />
+            </div>
+          ))}
+        </div>
+      ) : events.length === 0 ? (
+        <p className="py-16 text-center text-muted-foreground">{loadingMore ? "Loading…" : emptyMessage}</p>
+      ) : (
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {events.map((e) => (
+            <CardComponent key={e.id} event={e} eventHref={eventHref} 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.5 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/events/project/src/hooks/events/useEventConfirmation.ts

@@ -0,0 +1,21 @@
+// React binding of the order store (wix/events/order-store.ts) — the post-checkout confirmation's
+// state machine lives there, framework-free: the event for context, the order with its invoice,
+// the 2 s / 15 s poll until the tickets are generated, and the honest `orderUnavailable` fallback
+// when the visitor scope can't read the order. Pass the `?orderNumber=&eventId=` the hosted
+// checkout appended to the thank-you URL. One store per confirmation view.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createOrderStore, type OrderState, type OrderStore, type OrderStoreOptions } from "../../wix/events/order-store";
+
+export type UseEventConfirmation = OrderState;
+
+export function useEventConfirmation(options: OrderStoreOptions): UseEventConfirmation {
+  const key = `${options.eventId}:${options.orderNumber}`;
+  const ref = useRef<{ key: string; store: OrderStore } | null>(null);
+  if (!ref.current || ref.current.key !== key) ref.current = { key, store: createOrderStore(options) };
+  const store = ref.current.store;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}

package/skills/wix-headless-templates/events/project/src/hooks/events/useEventRegistration.ts

@@ -0,0 +1,40 @@
+// React binding of the registration store (wix/events/registration-store.ts) — the whole
+// registration state machine for one event lives there, framework-free, branched on
+// event.registrationType: TICKETING loads the tier picker (per-tier or per-option quantities, a
+// named price on donation tiers, Wix's running totals) and checkout() reserves → redirects to
+// Wix's hosted checkout; RSVP renders the organizer's form and submits it in place. All
+// correctness (the visitor-public tier read, the reservation payload, the redirect callbacks,
+// rsvpV2, the form body) lives in the data layer; you own how it looks. One store per event — a
+// new event id gets a fresh one.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import {
+  createRegistrationStore,
+  type RegistrationState,
+  type RegistrationStore,
+} from "../../wix/events/registration-store";
+import type { EventDetail } from "../../wix/events/types";
+
+export type UseEventRegistration = RegistrationState &
+  Pick<RegistrationStore, "setQuantity" | "setGuestPrice" | "setRsvpValue" | "setGuestCount" | "setGuestName" | "checkout" | "rsvp">;
+
+export function useEventRegistration(event: EventDetail): UseEventRegistration {
+  const key = `${event.id}:${event.registrationType}`;
+  const ref = useRef<{ key: string; store: RegistrationStore } | null>(null);
+  if (!ref.current || ref.current.key !== key) ref.current = { key, store: createRegistrationStore(event) };
+  const store = ref.current.store;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return {
+    ...state,
+    setQuantity: store.setQuantity,
+    setGuestPrice: store.setGuestPrice,
+    setRsvpValue: store.setRsvpValue,
+    setGuestCount: store.setGuestCount,
+    setGuestName: store.setGuestName,
+    checkout: store.checkout,
+    rsvp: store.rsvp,
+  };
+}

package/skills/wix-headless-templates/events/project/src/hooks/events/useEvents.ts

@@ -0,0 +1,24 @@
+// React binding of the events store (wix/events/events-store.ts) — the listing state machine
+// 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
+// `initialEvents` (+ `initialTotal` from fetchEventsPage, so "load more" knows there is more) and
+// no client fetch happens; 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 { createEventsStore, type EventsState, type EventsStore, type EventsStoreOptions } from "../../wix/events/events-store";
+
+export type UseEventsOptions = EventsStoreOptions;
+
+export type UseEvents = EventsState & Pick<EventsStore, "setActiveCategoryId" | "loadMore">;
+
+export function useEvents(options: UseEventsOptions = {}): UseEvents {
+  const ref = useRef<EventsStore | null>(null);
+  if (!ref.current) ref.current = createEventsStore(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, loadMore: store.loadMore };
+}

package/skills/wix-headless-templates/events/project/src/layouts/Layout.astro

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Wix Astro Basics</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/skills/wix-headless-templates/events/project/src/layouts/SiteLayout.astro

@@ -0,0 +1,40 @@
+---
+// The site chrome for every events page — THIS file (header/footer/nav) plus the @theme
+// token block in src/styles/global.css are what you brand. Keep the <slot name="seo-tags" />
+// in <head> and the global.css import. (Deploy is fill-only: if another vertical is already
+// deployed, its SiteLayout won — merge an Events nav link there instead.)
+import "../styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <slot name="seo-tags" />
+  </head>
+  <body>
+    <header class="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
+      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>
+        <nav class="flex items-center gap-6 text-sm">
+          <a href="/events" class="text-foreground no-underline transition-colors hover:text-muted-foreground">Events</a>
+        </nav>
+      </div>
+    </header>
+    <main class="mx-auto max-w-6xl px-6 pb-24 pt-10">
+      <slot />
+    </main>
+    <footer class="border-t border-border px-6 py-10 text-center text-sm text-muted-foreground">
+      © Brand Name
+    </footer>
+  </body>
+</html>

package/skills/wix-headless-templates/events/project/src/pages/event-confirmation.astro

@@ -0,0 +1,12 @@
+---
+// Post-checkout thank-you page — the Wix-hosted checkout redirects here with
+// ?orderNumber=&eventId=. KEEP THIS ROUTE: the data layer's checkout callbacks point at
+// /event-confirmation. The island is client:only (it reads the browser URL); swap its
+// import to YOUR confirmation component if you design one.
+import SiteLayout from "../layouts/SiteLayout.astro";
+import EventConfirmationView from "../components/events/EventConfirmationView";
+---
+
+<SiteLayout title="Order confirmed">
+  <EventConfirmationView client:only="react" />
+</SiteLayout>