@wix/agent-skills 1.35.1 → 1.36.1

package/skills/wix-vibe-headless/references/pricing-plans/INSTRUCTIONS.md

@@ -1,280 +0,0 @@
-# Wix Pricing Plans — ready-made client
-
-The Plans & Pricing client is **shipped as real files**, not snippets to regenerate. It's a complete
-plans table + plan detail + members-only hosted checkout + "my plans" area, 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 plans code (the destructure
-shapes, the price/billing-cycle field paths, the hosted checkout redirect, the anonymous `[]` case
-all ship and are correct).
-
-Talks to Wix directly over the public `WIX_CLIENT_ID` (anonymous visitor tokens). Never mock plans;
-never hand-build a `/checkout` or purchase URL — purchasing always goes through the Wix-hosted
-**redirect-session** (which also handles member login/signup and payment).
-
-## Prerequisites
-- The site's **Wix Pricing Plans** app is the read/checkout target. It's installed and seeded
-  separately (see **Seeding** below), in parallel with this build — so it may have no plans at build
-  time; the client renders the shipped empty state until plans land.
-- The public headless **`WIX_CLIENT_ID`** from your prompt (buyer-facing, safe to hardcode/commit).
-- **Purchasing is members-only, via Wix-hosted checkout.** The hosted flow handles member
-  login/signup + the order form + payment, then returns to your site. The deployed app domain must
-  be allow-listed on the OAuth client for that return to work — a **separate Wix setup flow the user
-  completes later**, out of scope here. If the return fails before that setup is done, that's
-  expected; flag it and continue.
-
-## STEP 1 — The client is already in `src/`
-The install step (base44.md STEP 1) deployed the whole Plans & Pricing 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/usePlans.js` | plans-listing data — first page, cursor paging, `subscribe(plan)` checkout |
-| `hooks/usePlanDetail.js` | plan-detail data — plan-by-slug + `notFound` + `subscribe()` checkout |
-| `hooks/useMyPlans.js` | member's orders + auto re-sync on return from checkout |
-| `components/PlanPrice.jsx` | price label — reads amount / cycle / free-trial (display only) |
-| `components/PlanCard.jsx` | plan card — name, description, price, perks, Subscribe (when `buyable`) |
-| `components/PlanGrid.jsx` | responsive plans grid + empty state |
-| `components/OrderCard.jsx` | one member order row for the "my plans" list |
-| `components/WixManageBanner.jsx` | preview-only manage banner — drop it into your Layout (STEP 3) |
-| `pages/Plans.jsx` | the plans-table route (`/plans`) — grid + paging + checkout |
-| `pages/PlanDetail.jsx` | the plan-detail route (`/plans/:slug`) — perks, terms, checkout |
-| `pages/MyPlans.jsx` | the member's memberships + post-checkout confirmation (`/my-plans`) |
-| `rest/wix-config.js` | the two ids, written by the install step |
-| `rest/wix-client.js` + `rest/wix-pricing-plans.js` | REST transport + plans/orders/checkout helpers |
-
-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/pricing-plans/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. Pricing Plans needs **no** cross-page provider (checkout is a redirect, not client
-state) — so unlike the storefront there's no `<CartProvider>` to wrap.
-- 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 `Plans` / `PlanDetail` / `MyPlans` — 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: `/plans` → `Plans`, `/plans/:slug` → `PlanDetail`, `/my-plans` →
-  `MyPlans` (all 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 Plans from "@/pages/Plans";                     // shipped · default export, no props
-import PlanDetail from "@/pages/PlanDetail";           // shipped · default export, no props
-import MyPlans from "@/pages/MyPlans";                 // 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 Plans/PlanDetail/MyPlans render here, untouched */}
-      <Footer />
-    </div>
-  </>);
-}
-
-<Routes>
-  <Route element={<Layout />}>                                {/* chrome wraps all */}
-    <Route path="/" element={<Home />} />                      {/* yours */}
-    <Route path="/plans" element={<Plans />} />                {/* shipped, as-is */}
-    <Route path="/plans/:slug" element={<PlanDetail />} />     {/* shipped, as-is */}
-    <Route path="/my-plans" element={<MyPlans />} />           {/* 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` |
-| `/plans` | `src/routes/plans.index.jsx` | `Plans` |
-| `/plans/:slug` | `src/routes/plans.$slug.jsx` | `PlanDetail` |
-| `/my-plans` | `src/routes/my-plans.jsx` | `MyPlans` |
-
-```jsx
-// src/routes/plans.index.jsx
-import { createFileRoute } from "@tanstack/react-router";
-import Plans from "@/pages/Plans";
-
-export const Route = createFileRoute("/plans")({ component: Plans });
-```
-
-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 plans" strip is just `queryPlans` +
-the shipped `PlanGrid`; the nav is links to `/plans` and `/my-plans`:
-
-```jsx
-import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
-import { queryPlans, checkout } from "@/rest/wix-pricing-plans";
-import PlanGrid from "@/components/PlanGrid";
-
-// Responsive header: choose ONE branch with a state flag (mount each nav item once).
-// Do NOT render a desktop nav AND a mobile nav toggled by `hidden md:flex` / `md:hidden`:
-// these navs are inline-styled, and an inline `display` beats a Tailwind class, so `hidden`
-// never applies — BOTH branches render. One branch = one nav.
-export function Header() {
-  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
-  useEffect(() => {
-    const onResize = () => setMobile(window.innerWidth < 768);
-    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-  return (
-    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-      {/* brand/logo */}
-      {mobile
-        ? <YourMenu />                                       // your hamburger + the same links
-        : <div style={{ display: "flex", gap: 24 }}><Link to="/plans">Plans</Link><Link to="/my-plans">My plans</Link></div>}
-    </nav>
-  );
-}
-
-export function Featured() {                                // on your home page
-  const [plans, setPlans] = useState([]);
-  // NB: queryPlans returns { plans, nextCursor } — destructure the array.
-  useEffect(() => { queryPlans({ limit: 3 }).then(({ plans }) => setPlans(plans)); }, []);
-  const subscribe = async (plan) =>
-    { window.location.href = await checkout(plan.id, { thankYouPageUrl: `${window.location.origin}/my-plans` }); };
-  return <PlanGrid plans={plans} onSubscribe={subscribe} empty="Plans 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 list helper returns an object — destructure it (a bare `.map` on the return throws):
-const { plans, nextCursor } = await queryPlans({ limit: 24 });   // PUBLIC plans only
-// Page: pass nextCursor back as `cursor`.
-const { plans: more } = await queryPlans({ cursor: nextCursor });
-
-// Price is DISPLAY-ONLY — never compute a final charge (Wix settles price, tax, schedule at checkout):
-const v = plan.pricingVariants[0];
-const amount = v.pricingStrategies[0].flatRate.amount;   // decimal STRING e.g. "20.00"; "0" = free (a string — don't === 0)
-const cycle  = v.billingTerms.billingCycle;              // { period:"DAY"|"WEEK"|"MONTH"|"YEAR", count } — recurring only
-const trial  = v.freeTrialDays;                          // free-trial length
-// Pair `amount` with `plan.currency` (ISO-4217, e.g. "USD"). Show the buy button only when plan.buyable.
-
-// Purchase — members-only, hosted; redirect to the returned URL, never hand-build it:
-window.location.href = await checkout(plan.id, { thankYouPageUrl: `${window.location.origin}/my-plans` });
-// On success Wix returns to thankYouPageUrl with ?planOrderId=<GUID> (+ wixMemberLoggedIn); on abandon → postFlowUrl.
-
-// Member's memberships — resolves to [] for anonymous visitors (never throws):
-const orders = await getMyPlanOrders({ orderStatuses: ["ACTIVE"] });   // omit orderStatuses for all
-
-// Plan image: plan.image is a WixMedia object { id, width, height, altText } with NO .url. The shipped
-// cards render text only to avoid this. To show it, resolve the WixMedia `id` to a URL (documentation skill available in your environment),
-// or omit — never <img src={plan.image}> / <img src={plan.image.url}> (undefined / [object Object]).
-```
-
-## Extending the client
-Beyond the shipped pages: **cancel / pause / resume** a member's subscription → Orders API
-(`request-cancellation`, `pause-order`, `resume-order`); gate on `plan.buyerCanCancel`. **Custom
-member login / logout** (so a member can log in *before* subscribing and see "my plans" without a
-purchase) → pair the **members** vertical (`references/members/INSTRUCTIONS.md`). For anything the
-snippets don't cover, make the call yourself with `wixApiRequest` — but look up the exact endpoint,
-method, and body first (never guess):
-- Pricing Plans: https://dev.wix.com/docs/api-reference/business-solutions/pricing-plans.md
-- Orders: https://dev.wix.com/docs/api-reference/business-solutions/pricing-plans/orders.md
-- Headless redirect session: https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.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
-  `Plans`/`PlanDetail`/`MyPlans` to add chrome.
-- The Layout's fixed top region owns positioning: `<WixManageBanner/>` above `<Header/>`; your
-  `Header` is plain in-flow markup (not `position:fixed`).
-- Purchase goes through the shipped `checkout()` (redirect-session) — never a hand-built URL.
-- Treat plan objects as display-only — show the buy button only when `plan.buyable`; never compute
-  the final charge. Never invent perks, prices, trials, testimonials, or member counts.
-- Render live Wix data or the shipped empty state — never mock plans.
-
-## Point the user to their dashboard
-Provide deep links so the owner can edit content (substitute the site's `metaSiteId`):
-- **Pricing Plans** — `https://manage.wix.com/dashboard/{metaSiteId}/pricing-plans` (`Dashboard →
-  Pricing Plans`) → **+ Create Plan** (set the name, pricing model, perks, and connect the plan to
-  the content/services it unlocks)
-
-## Seeding
-Seed plans 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 `Plans`/`PlanDetail`/`MyPlans` untouched; content clears the fixed chrome.
-- [ ] Plans list renders live data; price, billing cycle, and free trial read correctly across
-      pricing models (recurring, single-payment, free); buy button only for `buyable` plans.
-- [ ] Plan detail loads by slug and shows a not-found state on a bad slug.
-- [ ] Purchase redirects via the redirect-session `fullUrl` (no hand-built URL) and reaches
-      Wix-hosted login + payment; on return the new order appears on `/my-plans`.
-- [ ] Empty catalog shows the shipped empty state; no mock plans anywhere.

package/skills/wix-vibe-headless/references/pricing-plans/app/components/OrderCard.jsx

@@ -1,35 +0,0 @@
-// Member plan-order row — pure UI for the "My plans" screen. Renders only fields the Order object
-// actually returns (planName, status, start/end dates); for anything else (amount paid, next-billing)
-// look it up in the Orders API reference (documentation skill available in your environment) — never invent it. Styled with base44 design
-// tokens (shadcn Tailwind classes).
-
-// Each status carries its OWN text colour: a shared `text-primary-foreground` over a varying
-// background is unreadable the moment the two tokens are close in value — on the default light
-// palette --primary-foreground (98%) over --muted (96.1%) is white on white, so PAUSED and ENDED
-// vanished. A background token and its foreground token always travel together.
-const STATUS_STYLE = {
-  ACTIVE: "bg-primary text-primary-foreground",
-  PAUSED: "bg-muted text-foreground",
-  ENDED: "bg-muted text-foreground",
-  CANCELED: "bg-destructive text-destructive-foreground",
-};
-const STATUS_FALLBACK = "bg-muted text-foreground";
-
-export default function OrderCard({ order }) {
-  return (
-    <li className="list-none flex flex-wrap items-center gap-3 bg-card text-foreground border border-border rounded-lg shadow-sm p-4">
-      <span className="font-display font-semibold flex-1">{order.planName}</span>
-      <span className={`text-[13px] font-semibold px-2.5 py-0.5 rounded-full ${STATUS_STYLE[order.status] || STATUS_FALLBACK}`}>{order.status}</span>
-      {order.startDate && (
-        <span className="text-muted-foreground text-[13px]">
-          from {new Date(order.startDate).toLocaleDateString()}
-        </span>
-      )}
-      {order.endDate && (
-        <span className="text-muted-foreground text-[13px]">
-          until {new Date(order.endDate).toLocaleDateString()}
-        </span>
-      )}
-    </li>
-  );
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/components/PlanCard.jsx

@@ -1,48 +0,0 @@
-// Plan card — pure UI. Styled with base44 design tokens (shadcn Tailwind classes) — re-skin via the
-// app's design tokens (src/index.css :root/.dark), not this JSX. Renders name, description, price,
-// perks as feature bullets, and a Subscribe button ONLY when plan.buyable is true (otherwise the
-// plan is merchant-assigned). The card links to the plan detail route by slug. `onSubscribe(plan)`
-// runs the hosted checkout.
-//
-// plan.image is a WixMedia object { id, width, height, altText } with NO .url — its id must be
-// resolved to a URL before it can render. Rendering plan text only here avoids that trap; see
-// INSTRUCTIONS ("Plan image") for the resolve-or-omit fallback if you want the image.
-import { Link } from "@/lib/nav";
-import PlanPrice from "./PlanPrice";
-
-export default function PlanCard({ plan, onSubscribe, featured = false }) {
-  return (
-    <div className={`flex flex-col gap-4 bg-card text-foreground border ${featured ? "border-primary" : "border-border"} rounded-lg overflow-hidden shadow-sm p-6`}>
-      <div>
-        <h3 className="m-0 mb-1 font-display text-[20px] font-bold">
-          {plan.name}
-        </h3>
-        {plan.description && (
-          <p className="m-0 text-muted-foreground leading-[1.5]">{plan.description}</p>
-        )}
-      </div>
-
-      <PlanPrice plan={plan} />
-
-      {(plan.perks || []).length > 0 && (
-        <ul className="m-0 p-0 list-none flex flex-col gap-2">
-          {plan.perks.map((perk) => (
-            <li key={perk.id} className="flex gap-2 text-foreground leading-[1.4]">
-              <span className="text-primary" aria-hidden>✓</span>
-              <span>{perk.description}</span>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      <div className="mt-auto flex flex-col gap-2">
-        {plan.buyable && (
-          <button onClick={() => onSubscribe?.(plan)}
-            className="py-3 px-6 cursor-pointer bg-primary text-primary-foreground rounded-sm text-[15px] font-semibold">Subscribe</button>
-        )}
-        <Link to={`/plans/${plan.slug}`}
-          className="text-center py-2.5 px-6 no-underline text-foreground border border-border rounded-sm text-sm font-semibold">View details</Link>
-      </div>
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/components/PlanGrid.jsx

@@ -1,16 +0,0 @@
-// Responsive plans grid + empty state. Styled with base44 design tokens (shadcn Tailwind classes).
-// Renders the shipped empty state when there are no plans — never invent plans.
-import PlanCard from "./PlanCard";
-
-export default function PlanGrid({ plans, onSubscribe, empty = "No plans yet." }) {
-  if (!plans?.length) {
-    return (
-      <p className="text-muted-foreground p-4 text-center">{empty}</p>
-    );
-  }
-  return (
-    <div className="grid gap-4 items-stretch [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
-      {plans.map((plan) => <PlanCard key={plan.id} plan={plan} onSubscribe={onSubscribe} />)}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/components/PlanPrice.jsx

@@ -1,35 +0,0 @@
-// Plan price label — display only. The price is a decimal STRING at
-// pricingVariants[0].pricingStrategies[0].flatRate.amount ("0" = free); the recurring cycle is
-// nested at billingTerms.billingCycle; free-trial length at pricingVariants[0].freeTrialDays. These
-// exact paths are load-bearing — keep them. Never compute a final charge (Wix settles price, tax,
-// and schedule at hosted checkout). Styled with base44 design tokens (shadcn Tailwind classes).
-
-function readPrice(plan) {
-  const v = plan?.pricingVariants?.[0];
-  const amount = v?.pricingStrategies?.[0]?.flatRate?.amount;   // decimal STRING e.g. "20.00"; "0" = free
-  if (amount == null) return null;
-  const cycle = v?.billingTerms?.billingCycle;                  // { period, count } for recurring; absent otherwise
-  return { amount, isFree: amount === "0", cycle, freeTrialDays: v?.freeTrialDays };
-}
-
-export default function PlanPrice({ plan }) {
-  const p = readPrice(plan);
-  if (!p) return null;
-  if (p.isFree) {
-    return <span className="font-display text-[28px] font-bold">Free</span>;
-  }
-  const per = p.cycle ? ` / ${p.cycle.count} ${p.cycle.period.toLowerCase()}` : "";   // e.g. "/ 1 month"
-  return (
-    <span>
-      <span className="font-display text-[28px] font-bold">
-        {p.amount} {plan.currency}
-      </span>
-      {per && <span className="text-muted-foreground text-sm">{per}</span>}
-      {p.freeTrialDays ? (
-        <span className="block text-primary text-[13px] mt-1">
-          {p.freeTrialDays}-day free trial
-        </span>
-      ) : null}
-    </span>
-  );
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/hooks/useMyPlans.js

@@ -1,25 +0,0 @@
-// useMyPlans — "My plans" logic, no markup: load the logged-in member's orders and re-sync on
-// visibilitychange so a plan bought via hosted checkout shows up on return. getMyPlanOrders()
-// resolves to an ARRAY ([] for anonymous visitors — never throws), so the view can show a
-// "log in to see your plans" state. Keep the visibilitychange re-sync — it is load-bearing.
-import { useState, useEffect, useCallback } from "react";
-import { getMyPlanOrders } from "@/rest/wix-pricing-plans";
-
-export function useMyPlans({ orderStatuses = ["ACTIVE"] } = {}) {
-  const [orders, setOrders] = useState([]);
-  const [loaded, setLoaded] = useState(false);
-
-  const refresh = useCallback(() => {
-    // [] for anonymous visitors (no member context) — never throws.
-    getMyPlanOrders({ orderStatuses }).then((o) => { setOrders(o); setLoaded(true); });
-  }, [orderStatuses]);
-
-  useEffect(() => {                                   // load once + re-sync on return from hosted checkout
-    refresh();
-    const onVisible = () => document.visibilityState === "visible" && refresh();
-    document.addEventListener("visibilitychange", onVisible);
-    return () => document.removeEventListener("visibilitychange", onVisible);
-  }, [refresh]);
-
-  return { orders, loaded, refresh };
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/hooks/usePlanDetail.js

@@ -1,28 +0,0 @@
-// usePlanDetail — plan-detail logic, no markup: load a single PUBLIC plan by its URL slug, expose a
-// notFound flag (getPlanBySlug returns null on a miss — show a not-found state, never invent a
-// plan), and start the members-only hosted checkout. Mirrors the storefront's useProductDetail.
-// The detail page only renders what this returns.
-import { useState, useEffect } from "react";
-import { getPlanBySlug, checkout } from "@/rest/wix-pricing-plans";
-
-export function usePlanDetail(slug) {
-  const [plan, setPlan] = useState(null);
-  const [notFound, setNotFound] = useState(false);
-
-  useEffect(() => {
-    setPlan(null);
-    setNotFound(false);
-    getPlanBySlug(slug).then((p) => {
-      if (!p) return setNotFound(true);
-      setPlan(p);
-    });
-  }, [slug]);
-
-  // members-only, Wix-hosted checkout; on success Wix returns to thankYouPageUrl with ?planOrderId=<GUID>
-  async function subscribe() {
-    if (!plan) return;
-    window.location.href = await checkout(plan.id, { thankYouPageUrl: `${window.location.origin}/my-plans` });
-  }
-
-  return { plan, notFound, subscribe };
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/hooks/usePlans.js

@@ -1,30 +0,0 @@
-// usePlans — Plans-listing logic, no markup: load the first page of PUBLIC plans, page through with
-// the cursor, and start a members-only hosted checkout. The destructure of queryPlans() (returns
-// { plans, nextCursor }, NOT a bare array) and the checkout-then-redirect are load-bearing — keep
-// them. The Plans page only renders what this returns.
-import { useState, useEffect } from "react";
-import { queryPlans, checkout } from "@/rest/wix-pricing-plans";
-
-export function usePlans() {
-  const [plans, setPlans] = useState([]);
-  const [cursor, setCursor] = useState(null);
-  const [loaded, setLoaded] = useState(false);
-
-  useEffect(() => {
-    // NB: destructure — queryPlans returns { plans, nextCursor }, NOT a bare array.
-    queryPlans().then(({ plans, nextCursor }) => { setPlans(plans); setCursor(nextCursor); setLoaded(true); });
-  }, []);
-
-  const loadMore = () =>
-    queryPlans({ cursor }).then(({ plans: more, nextCursor }) => {
-      setPlans((p) => [...p, ...more]);
-      setCursor(nextCursor);
-    });
-
-  // members-only, Wix-hosted checkout; on success Wix returns to thankYouPageUrl with ?planOrderId=<GUID>
-  async function subscribe(plan) {
-    window.location.href = await checkout(plan.id, { thankYouPageUrl: `${window.location.origin}/my-plans` });
-  }
-
-  return { plans, cursor, loaded, loadMore, subscribe };
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/pages/MyPlans.jsx

@@ -1,30 +0,0 @@
-// My plans page — thin view over useMyPlans (all logic lives in the hook). Shows the logged-in
-// member's active memberships and doubles as the post-checkout confirmation (re-syncs on
-// visibilitychange). getMyPlanOrders() resolves to [] for anonymous visitors, so the empty branch
-// covers both "not a member → log in" and "member with no active plans". Styled with base44 design
-// tokens (shadcn Tailwind classes).
-import { useMyPlans } from "@/hooks/useMyPlans";
-import OrderCard from "@/components/OrderCard";
-
-export default function MyPlans() {
-  const { orders, loaded } = useMyPlans({ orderStatuses: ["ACTIVE"] });
-
-  return (
-    <main className="max-w-[720px] mx-auto py-8 px-4">
-      <h1 className="font-display mb-4">My plans</h1>
-      {!loaded ? (
-        <p className="text-muted-foreground">Loading…</p>
-      ) : orders.length === 0 ? (
-        // [] = anonymous visitor OR a member with no active plans. Wire log-in via the members
-        // vertical (references/members/) so a member can sign in on your own UI, then re-check.
-        <p className="text-muted-foreground">
-          No active plans. Log in to see your plans, or choose one from the pricing page.
-        </p>
-      ) : (
-        <ul className="m-0 p-0 flex flex-col gap-4">
-          {orders.map((order) => <OrderCard key={order.id} order={order} />)}
-        </ul>
-      )}
-    </main>
-  );
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/pages/PlanDetail.jsx

@@ -1,53 +0,0 @@
-// Plan detail page — thin view over usePlanDetail (all logic lives in the hook). Shows the full
-// price/billing summary, perks, terms & conditions if present, and a Subscribe button (only when
-// plan.buyable). Not-found state on a bad slug — never invent a plan. Styled with base44 design
-// tokens (shadcn Tailwind classes). termsAndConditions is plain text; render as-is.
-import { useParams } from "@/lib/nav";
-import { usePlanDetail } from "@/hooks/usePlanDetail";
-import PlanPrice from "@/components/PlanPrice";
-
-export default function PlanDetail() {
-  const { slug } = useParams();
-  const { plan, notFound, subscribe } = usePlanDetail(slug);
-
-  if (notFound) return <Centered>Plan not found.</Centered>;
-  if (!plan) return <Centered>Loading…</Centered>;
-
-  return (
-    <main className="max-w-[720px] mx-auto py-8 px-4">
-      <h1 className="font-display m-0 mb-2">{plan.name}</h1>
-      {plan.description && (
-        <p className="text-muted-foreground leading-[1.6] m-0 mb-4">{plan.description}</p>
-      )}
-
-      <div className="my-4"><PlanPrice plan={plan} /></div>
-
-      {(plan.perks || []).length > 0 && (
-        <ul className="my-4 p-0 list-none flex flex-col gap-2.5">
-          {plan.perks.map((perk) => (
-            <li key={perk.id} className="flex gap-2 leading-[1.4]">
-              <span className="text-primary" aria-hidden>✓</span>
-              <span>{perk.description}</span>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {plan.buyable && (
-        <button onClick={subscribe}
-          className="py-3 px-8 cursor-pointer bg-primary text-primary-foreground rounded-sm text-[15px] font-semibold">Subscribe</button>
-      )}
-
-      {plan.termsAndConditions && (
-        <div className="mt-8 pt-4 border-t border-border">
-          <h2 className="font-display text-base">Terms &amp; conditions</h2>
-          <p className="text-muted-foreground leading-[1.6] whitespace-pre-wrap">{plan.termsAndConditions}</p>
-        </div>
-      )}
-    </main>
-  );
-}
-
-function Centered({ children }) {
-  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
-}

package/skills/wix-vibe-headless/references/pricing-plans/app/pages/Plans.jsx

@@ -1,28 +0,0 @@
-// Plans / pricing page — thin view over usePlans (all logic lives in the hook). Lists PUBLIC plans
-// with an empty state, pages through with the cursor, and subscribes via the members-only hosted
-// checkout. Styled with base44 design tokens (shadcn Tailwind classes).
-import { usePlans } from "@/hooks/usePlans";
-import PlanGrid from "@/components/PlanGrid";
-
-export default function Plans() {
-  const { plans, cursor, loaded, loadMore, subscribe } = usePlans();
-
-  return (
-    <main className="max-w-[1200px] mx-auto p-4">
-      <h1 className="font-display mb-4">Plans &amp; Pricing</h1>
-      {!loaded
-        ? <p className="text-muted-foreground">Loading…</p>
-        : <PlanGrid
-            plans={plans}
-            onSubscribe={subscribe}
-            empty="No plans yet — create plans from your Wix dashboard."
-          />}
-      {cursor && (
-        <div className="text-center mt-6">
-          <button onClick={loadMore}
-            className="py-2.5 px-6 cursor-pointer bg-card text-foreground border border-border rounded-sm font-semibold">Load more</button>
-        </div>
-      )}
-    </main>
-  );
-}