@wix/agent-skills 1.26.0 → 1.27.0

package/skills/wix-headless-templates/bookings/project/src/wix/bookings/types.ts

@@ -0,0 +1,236 @@
+// Bookings DTOs — the serializable shapes every hook, component, and page consumes.
+// Plain JSON: safe as Astro island props or across server/client boundaries. Images are
+// resolved https URLs; every displayable price is a ready formatted string ("" when the
+// site sent no currency — the surface omits it, never guesses one).
+
+/** The three Wix Bookings service types. Anything else never becomes a DTO. */
+export type ServiceType = "APPOINTMENT" | "CLASS" | "COURSE";
+
+/** How the service is priced (Services V2 `payment.rateType`). */
+export type RateType = "FIXED" | "VARIED" | "CUSTOM" | "NO_FEE" | "SUBSCRIPTION";
+
+/** What the one CTA does: book now, send a request the owner approves, or (a full/ended course) only view. */
+export type CtaState = "book" | "requestToBook" | "viewCourse";
+
+export type Weekday = "MONDAY" | "TUESDAY" | "WEDNESDAY" | "THURSDAY" | "FRIDAY" | "SATURDAY" | "SUNDAY";
+
+/** Where a service (or one slot) takes place. BUSINESS locations have an id; CUSTOM/CUSTOMER don't. */
+export interface ServiceLocation {
+  id: string | null;
+  name: string;
+  type: "BUSINESS" | "CUSTOM" | "CUSTOMER";
+}
+
+/** A staff member as the service lists them; `id` is the resource GUID used for filtering and booking. */
+export interface StaffSummary {
+  id: string;
+  name: string;
+  /** Resolved https URL ("" when the staff member has no photo). */
+  imageUrl: string;
+}
+
+/** Deposit terms when the service takes one; null otherwise. */
+export interface Deposit {
+  /** Formatted deposit amount ("" when the deposit is a percentage — the server resolves it at booking). */
+  amount: string;
+  /** True when the visitor may choose to pay the full price upfront instead. */
+  fullUpfrontAllowed: boolean;
+}
+
+/** A service as a listing/grid tile needs it. */
+export interface ServiceSummary {
+  id: string;
+  slug: string;
+  name: string;
+  tagLine: string;
+  type: ServiceType;
+  rateType: RateType;
+  /**
+   * Display-ready price: FIXED → "€75"; VARIED → the lowest price (render "From €30", see `priceFrom`);
+   * CUSTOM → the owner's text ("Ask for a quote"); NO_FEE → "Free"; "" when nothing can be shown.
+   */
+  price: string;
+  /** True for VARIED pricing — `price` is the minimum, prefix it ("From €30"). */
+  priceFrom: boolean;
+  /** The pre-discount price when a discount applies to a FIXED price ("" otherwise) — render struck through. */
+  basePrice: string;
+  /** The discount's name when one applies ("" otherwise). */
+  discountName: string;
+  /** True when a discount applies but the amount is only known at checkout (VARIED, add-ons). */
+  calculatedAtCheckout: boolean;
+  /** True when the service can be paid with a pricing plan / membership. */
+  hasPricingPlans: boolean;
+  /** NO_FEE (or a FIXED price of 0): books without a checkout. */
+  free: boolean;
+  /** Session length in minutes (appointments; classes and courses may have none). */
+  durationMinutes: number | null;
+  /** "1 hr 30 min" / "45 min" ("" when unknown). */
+  durationLabel: string;
+  /** Resolved https URL ("" when the service has no image). */
+  imageUrl: string;
+  categoryId: string | null;
+  categoryName: string;
+  /** The service's schedule id — classes/courses hang their sessions on it; a COURSE books this whole schedule. */
+  scheduleId: string | null;
+  staff: StaffSummary[];
+  locations: ServiceLocation[];
+  /** Sessions carry a video-conference link. */
+  conferencing: boolean;
+  /** The service offers add-ons (next-availability is not shown for these; the add-ons load on the booking page). */
+  hasAddOns: boolean;
+  /** The owner approves each booking by hand: the CTA is "Request to book", and success is a sent request. */
+  requiresManualApproval: boolean;
+  onlineBookingEnabled: boolean;
+  /** Late/after-start booking policy already forbids booking (courses: the course started or ended). */
+  tooLateToBook: boolean;
+  /** CTA state from the policy alone; a course's fullness is folded in by the booking flow (`ctaState` there). */
+  ctaState: CtaState;
+  /** Seats per session (classes/courses) — 1 for appointments; null when unknown. */
+  defaultCapacity: number | null;
+  /** Policy cap on participants per booking; null when the policy sets none. */
+  maxParticipantsPerBooking: number | null;
+  deposit: Deposit | null;
+  /** Weekly days a class/course meets (from its recurring sessions) — filled by the listing store, [] until then. */
+  offeredDays: Weekday[];
+}
+
+/** The fixed span of a COURSE (its sessions' first start and last end). */
+export interface CourseSpan {
+  /** ISO instants; null when the course has no sessions yet. */
+  startDate: string | null;
+  endDate: string | null;
+  /** True once the last session is over (or none exists) — the course can't be booked. */
+  ended: boolean;
+}
+
+/** A service as the booking page needs it. */
+export interface ServiceDetail extends ServiceSummary {
+  /** Description HTML/text as stored. */
+  description: string;
+  /** The @wix/forms booking-form id (null → the contact-basics fallback form). */
+  formId: string | null;
+  /** Derived payment option the booking must send ("ONLINE" | "OFFLINE"). */
+  paymentOption: "ONLINE" | "OFFLINE";
+  /** True → checkout is always required regardless of price (cancellation-fee policy). */
+  cancellationFeeEnabled: boolean;
+  /** COURSE only; null for appointments and classes. */
+  course: CourseSpan | null;
+}
+
+export interface BookingCategory {
+  id: string;
+  name: string;
+}
+
+/** A business location that hosts at least one bookable service (a listing filter option). */
+export interface LocationOption {
+  id: string;
+  name: string;
+}
+
+/** Bookings settings the visitor-facing surfaces need. */
+export interface BookingsSettings {
+  /** Which zone times are shown in by default: the business's (the Wix default) or the visitor's. */
+  displayTimeZone: "BUSINESS" | "CUSTOMER";
+  /** The owner lets visitors switch between the two. */
+  customerCanChange: boolean;
+}
+
+/** One time slot, appointment or class session. */
+export interface Slot {
+  /** Identity: start|end|location — two staff at the same time are ONE slot; React keys go here. */
+  key: string;
+  /** Local wall-clock strings "YYYY-MM-DDThh:mm:ss" (no Z) in the response's `timeZone`. */
+  startLocal: string;
+  endLocal: string;
+  /** "YYYY-MM-DD" — for grouping slots by day. */
+  dayKey: string;
+  /** Display label, e.g. "9:00 AM". */
+  label: string;
+  /** False for a full class session or a policy-blocked time — render disabled ("Full"). */
+  bookable: boolean;
+  /** Seats: total and left (classes); null for appointments. */
+  totalCapacity: number | null;
+  remainingCapacity: number | null;
+  /** Waitlist seats left when the class has a waitlist and the session is full; null otherwise. */
+  waitlistCapacity: number | null;
+  /** APPOINTMENT slots carry their own scheduleId; CLASS slots carry an eventId (+ title) instead. */
+  scheduleId: string | null;
+  eventId: string | null;
+  eventTitle: string;
+  location: ServiceLocation | null;
+  /** Staff able to take this slot (may be empty — ANY_RESOURCE still books). */
+  staff: { id: string; name: string }[];
+}
+
+/** A window of slots plus the IANA zone their local times are expressed in. */
+export interface SlotsPage {
+  slots: Slot[];
+  /** The zone the server computed in — the one requested, or the business zone when none was sent. */
+  timeZone: string | null;
+}
+
+/** One upcoming session of a class or course (informational — booking goes through a Slot / the course). */
+export interface Session {
+  id: string;
+  title: string;
+  startLocal: string;
+  endLocal: string;
+  dayKey: string;
+  /** "Mon, Sep 7 · 9:00 AM" style label pieces: the day and the start time. */
+  dayLabel: string;
+  label: string;
+  durationMinutes: number;
+  staff: { id: string; name: string }[];
+  totalCapacity: number | null;
+  spotsLeft: number | null;
+  isFullyBooked: boolean;
+  isCancelled: boolean;
+}
+
+/** Seats on a COURSE, from its recurring sessions; null once the course has ended or has no sessions. */
+export interface CourseAvailability {
+  totalCapacity: number | null;
+  spotsLeft: number | null;
+  full: boolean;
+}
+
+/** An optional extra the visitor can add to a booking. */
+export interface AddOn {
+  id: string;
+  name: string;
+  /** Formatted price ("" when the add-on is free or the currency is unknown). */
+  price: string;
+  /** The same amount as a number (0 when none) with its currency — for totals; never render these. */
+  priceAmount: number;
+  currency: string;
+  /** Extra minutes the add-on adds to the session; null for quantity-based add-ons. */
+  durationMinutes: number | null;
+  /** Max units of this add-on per booking; null when it is a one-off (0/1). */
+  maxQuantity: number | null;
+}
+
+export interface AddOnGroup {
+  id: string;
+  name: string;
+  /** The owner's question for this group ("Add a scalp massage?"). */
+  prompt: string;
+  /** Max distinct add-ons the visitor may pick from this group; null = unlimited. */
+  maxSelectable: number | null;
+  addOns: AddOn[];
+}
+
+/** A booking-form field (flat, from the form summary + schema; values are keyed by `target`). */
+export interface BookingFormField {
+  target: string;
+  label: string;
+  type: "STRING" | "EMAIL" | "PHONE" | "NUMBER" | "URL";
+  options?: string[];
+  /** The form marks it required — the only fields that gate `canBook`; the rest may stay empty. */
+  required: boolean;
+}
+
+/** The outcome of book(): either the browser is being redirected, or it's done. */
+export type BookingResult =
+  | { kind: "redirect"; url: string }
+  | { kind: "confirmed"; bookingId: string; orderId: string | null };

package/skills/wix-headless-templates/bookings/project/src/wix/config.ts

@@ -0,0 +1,16 @@
+// Wix connection config — written by the skill's deploy step (install/deploy.mjs).
+//
+// WIX_CLIENT_ID = null  → ambient auth (a Wix-managed Astro project: `@wix/astro` authenticates
+//                         every SDK call automatically; there is no client and nothing to set).
+// WIX_CLIENT_ID = "..." → manual visitor client (any other React setup): the public OAuth client id.
+//                         It is NOT a secret — it only mints anonymous visitor tokens — so
+//                         hardcoding and committing it is fine. deploy.mjs copies it from `.env.local`
+//                         (`WIX_CLIENT_ID`, what `wix env pull` writes): the CONTENT site's app — on a
+//                         migration preview the site being migrated, while wix.config.json names
+//                         only the deploy target.
+export const WIX_CLIENT_ID: string | null = null;
+
+// Kept for projects deployed before the Members vertical moved onto the shared seam; the shipped
+// members code no longer reads it (ambient Astro uses the built-in /api/auth routes, manual mode
+// uses the shared client above). deploy.mjs still fills it so older code keeps compiling.
+export const WIX_MEMBERS_CLIENT_ID: string | null = null;

package/skills/wix-headless-templates/bookings/project/src/wix/media.ts

@@ -0,0 +1,106 @@
+// Wix media resolution — define once, use on EVERY image render path. Copy as-is.
+//
+// SDK media fields come back either as an already-absolute https URL, or as a
+// `wix:image://v1/<hash>/<file>#originWidth=…` identifier that a browser cannot load
+// (ERR_UNKNOWN_URL_SCHEME). The wix:image:// form must go through the SDK media module;
+// never hand-build a static.wixstatic.com URL (wrong format → 403).
+// docs: https://dev.wix.com/docs/sdk/core-modules/sdk/media.md
+import { media } from "@wix/sdk";
+
+type MediaLike =
+  | string
+  | null
+  | undefined
+  | { image?: unknown; url?: string | null; id?: string | null };
+
+/** A bare Wix media file id (`e6a89e_06cf…~mv2.png`): what REST-shaped media objects carry as `url` and `id`. */
+const BARE_FILE_ID = /^[\w-]+~mv2\.[a-z0-9]+$/i;
+
+function rawOf(value: MediaLike): string {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (value.image != null && typeof value.image === "object") return rawOf(value.image as MediaLike); // { image: { id, url } }
+  return (typeof value.image === "string" ? value.image : null) ?? value.url ?? value.id ?? "";
+}
+
+/** Resolve any Wix media value to a browser-loadable URL ("" when absent). */
+export function imgSrc(value: MediaLike, width = 600, height = 600): string {
+  const v = rawOf(value);
+  if (!v) return "";
+  if (v.startsWith("wix:image://")) {
+    return media.getScaledToFillImageUrl(v, width, height, {});
+  }
+  // A bare file id (what REST-shaped media objects carry) or an absolute Wix media URL (bare, or
+  // already carrying a /v1/fill/ segment at some other size): re-issue it through the scaler at the
+  // requested size, so every image path lands on one shape.
+  const file = BARE_FILE_ID.test(v) ? v : v.match(/^https:\/\/static\.wixstatic\.com\/media\/([^/?#]+)/)?.[1];
+  if (file) return `https://static.wixstatic.com/media/${file}/v1/fill/w_${width},h_${height},al_c,q_90/${file}`;
+  return v;
+}
+
+/**
+ * Responsive candidates for `srcset`: the same image at several widths through Wix's scaler, so a
+ * card never downloads a hero-sized file. Pair with `sizes`:
+ *   <img src={imgSrc(m, 640, 640)} srcSet={imgSrcSet(m)} sizes="(min-width: 1024px) 25vw, 50vw"
+ *        width={640} height={640} loading="lazy" alt={…} />
+ * Accepts every form an image reaches you in: a raw `wix:image://` id, an ALREADY-RESOLVED Wix URL
+ * (what the DTOs carry — `imageUrl`, `gallery[]`; its `/v1/fill/w_…,h_…` segment is rewritten per
+ * width), or any other https URL (returned as the single candidate). `ratio` is height/width
+ * (1 = square). "" only when there is no image at all — still set `src` as well.
+ */
+export function imgSrcSet(value: MediaLike, widths: number[] = [320, 480, 640, 960], ratio = 1): string {
+  const raw = rawOf(value);
+  if (!raw) return "";
+  if (raw.startsWith("wix:image://") || BARE_FILE_ID.test(raw)) {
+    return widths.map((w) => `${imgSrc(value, w, Math.round(w * ratio))} ${w}w`).join(", ");
+  }
+  // A resolved Wix URL: …/v1/fill/w_800,h_800,al_c,… — swap the size for each width.
+  const FILL = /\/v1\/fill\/w_\d+,h_\d+/;
+  if (/static\.wixstatic\.com\//.test(raw) && FILL.test(raw)) {
+    return widths.map((w) => `${raw.replace(FILL, `/v1/fill/w_${w},h_${Math.round(w * ratio)}`)} ${w}w`).join(", ");
+  }
+  return raw; // one candidate, never an empty srcset for a real image
+}
+
+/**
+ * Everything an <img> needs for one Wix image, so a tile can never ship `srcSet` without `src`:
+ *   <img {...imgAttrs(p.imageUrl, "(min-width: 1024px) 25vw, 50vw")} alt={p.name} />
+ * `sizes` is the width the image renders at (a CSS length or media-query list); `ratio` is
+ * height/width. Returns an empty object when there is no image — render your placeholder then.
+ */
+export function imgAttrs(value: MediaLike, sizes: string, ratio = 1): { src: string; srcSet: string; sizes: string; loading: "lazy"; decoding: "async" } | Record<string, never> {
+  const src = imgSrc(value, 640, Math.round(640 * ratio));
+  if (!src) return {};
+  return { src, srcSet: imgSrcSet(value, undefined, ratio), sizes, loading: "lazy", decoding: "async" };
+}
+
+/**
+ * Height/width of a Wix image when the value carries its size: a raw
+ * `wix:image://…#originWidth=W&originHeight=H` id (the natural size) or a resolved `/v1/fill/w_W,h_H/`
+ * URL (the size it was scaled to). null when neither is present. Pass it as `ratio` to keep a
+ * srcset at the image's own aspect instead of the square default:
+ *   <img {...imgAttrs(item.photo, "33vw", imgRatio(item.photo) ?? 1)} alt={…} />
+ */
+export function imgRatio(value: MediaLike): number | null {
+  const v = rawOf(value);
+  if (typeof v !== "string" || !v) return null;
+  const size = v.startsWith("wix:image://")
+    ? [v.match(/[#&]originWidth=(\d+)/)?.[1], v.match(/[#&]originHeight=(\d+)/)?.[1]]
+    : (v.match(/\/v1\/fill\/w_(\d+),h_(\d+)/)?.slice(1) ?? []);
+  const w = Number(size[0]);
+  const h = Number(size[1]);
+  return w > 0 && h > 0 ? h / w : null;
+}
+
+/**
+ * The identity of a media value BEFORE scaling — de-duplicate galleries on this, never on a
+ * resolved URL (two scaled URLs of one photo differ in their size parameters).
+ */
+export function mediaKey(value: MediaLike): string {
+  const v = rawOf(value);
+  if (!v) return "";
+  // The file id, whichever form the value takes — a raw id and a resolved URL of one photo share it.
+  if (v.startsWith("wix:image://")) return v.slice("wix:image://v1/".length).split("/")[0].split("#")[0];
+  const m = v.match(/^https:\/\/static\.wixstatic\.com\/media\/([^/?#]+)/);
+  return m ? m[1] : v;
+}

package/skills/wix-headless-templates/bookings/project/src/wix/money.ts

@@ -0,0 +1,24 @@
+// Money formatting for API amounts that carry no formatted string. Copy as-is.
+//
+// Catalog prices come with a ready `formattedAmount` — use that directly. But eCom Cart V2
+// amounts are ConvertedMoney `{ amount, convertedAmount }` with NO formatted string, and the
+// currency lives on the cart, not on the money object. Never hardcode "$" or assume USD.
+export interface ConvertedMoneyLike {
+  amount?: string | null;
+  convertedAmount?: string | null;
+}
+
+/** Format a ConvertedMoney in the given currency, using the visitor's locale. */
+export function formatMoney(
+  money: ConvertedMoneyLike | null | undefined,
+  currencyCode: string | null | undefined,
+): string {
+  const value = money?.convertedAmount ?? money?.amount;
+  if (value == null || value === "") return "";
+  const currency = currencyCode || "USD";
+  try {
+    return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(Number(value));
+  } catch {
+    return `${value} ${currency}`;
+  }
+}

package/skills/wix-headless-templates/bookings/project/src/wix/sdk.ts

@@ -0,0 +1,89 @@
+// The one auth seam for every Wix SDK call in this app. Copy as-is; do not rewrite.
+//
+// Two modes, switched by WIX_CLIENT_ID in ./config:
+//   null (ambient)  — a Wix-managed Astro project: `@wix/astro` authenticates raw SDK module
+//                     calls automatically, server-side AND in client islands. `wixModule()`
+//                     returns the module untouched.
+//   string (manual) — any other React setup (Vite SPA, non-Astro): one shared client is built
+//                     with OAuthStrategy, and `wixModule()` returns the module bound to it.
+//                     The strategy self-manages visitor tokens on every call (mints on first
+//                     use, renews on expiry) and persists them through the storage below.
+//
+// The visitor token IS the identity of the current cart / member session, so in manual mode
+// tokens persist to localStorage — never re-minted per load (a fresh anonymous mint is a NEW
+// visitor and silently empties the cart).
+// docs: https://dev.wix.com/docs/sdk/core-modules/sdk/oauth-strategy.md
+// docs: https://dev.wix.com/docs/go-headless/wix-managed-headless/authentication/about-the-astro-integration.md
+import { createClient, OAuthStrategy, EMPTY_TOKENS } from "@wix/sdk";
+import { fetchWithAuth as ambientFetch } from "@wix/sdk/context";
+import type { IOAuthStrategy, TokenStorage, Tokens } from "@wix/sdk";
+import { WIX_CLIENT_ID } from "./config";
+
+const STORAGE_KEY = `wix-session-${WIX_CLIENT_ID ?? "ambient"}`;
+
+function browserTokenStorage(): TokenStorage {
+  return {
+    getTokens(): Tokens {
+      if (typeof window !== "undefined") {
+        try {
+          const raw = window.localStorage.getItem(STORAGE_KEY);
+          if (raw) return JSON.parse(raw) as Tokens;
+        } catch {
+          /* disabled/corrupt storage — fall through to empty */
+        }
+      }
+      return EMPTY_TOKENS;
+    },
+    setTokens(tokens: Tokens): void {
+      if (typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(tokens));
+      } catch {
+        /* storage full/disabled — the session just won't survive a reload */
+      }
+    },
+  };
+}
+
+const client = WIX_CLIENT_ID
+  ? createClient({
+      auth: OAuthStrategy({
+        clientId: WIX_CLIENT_ID,
+        tokenStorage: browserTokenStorage(),
+      }),
+    })
+  : null;
+
+/**
+ * Bind an SDK module to this app's auth. Usage (identical in both modes):
+ *   import { productsV3 } from "@wix/stores";
+ *   const products = wixModule(productsV3);
+ *   await products.queryProducts(...)
+ */
+export function wixModule<T>(module: T): T {
+  // The cast bridges the SDK's internal Descriptors constraint; the in/out type is identical.
+  return client
+    ? (client.use(module as unknown as Record<string, unknown>) as unknown as T)
+    : module;
+}
+
+/**
+ * An authenticated fetch of a Wix REST endpoint under the SAME auth as the SDK modules (ambient
+ * on managed Astro, the shared client elsewhere) — for the few APIs whose generated SDK module is
+ * too heavy to bundle (the Forms schema module alone is 15 MB: server-side it pushes a Wix
+ * deploy past its size limit, client-side every visitor downloads it). Same visitor identity,
+ * same token, no second mint. `path` is the wixapis.com path; returns the raw Response.
+ */
+export function wixFetch(path: string, init?: RequestInit): Promise<Response> {
+  const url = path.startsWith("http") ? path : `https://www.wixapis.com${path}`;
+  return client ? client.fetchWithAuth(url, init) : ambientFetch(url, init);
+}
+
+/**
+ * The shared data client's manual-mode auth strategy, or null under ambient auth. The
+ * Members vertical deliberately owns a separate explicit client for its custom in-app login;
+ * app code reads that session through the members hooks instead.
+ */
+export function wixAuth(): IOAuthStrategy | null {
+  return client ? client.auth : null;
+}

package/skills/wix-headless-templates/bookings/project/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}