Subchapter 20.87

INSTRUCTIONS

references/pricing-plans/INSTRUCTIONS.mdMarkdown16 KBView on GitHub

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

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

[]

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`	dev-only manage banner — drop it into your Layout (STEP 4)
`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`	you set the ids here (STEP 2)
`rest/wix-client.js` + `rest/wix-pricing-plans.js`	REST transport + plans/orders/checkout helpers

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

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

// 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 (wix-docs),
// or omit — never <img src={plan.image}> / <img src={plan.image.url}> (undefined / [object Object]).

INSTRUCTIONS

Wix Pricing Plans — ready-made client

INSTRUCTIONS

Wix Pricing Plans — 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)