Use Plans

1// usePlans — Plans-listing logic, no markup: load the first page of PUBLIC plans, page through with
2// the cursor, and start a members-only hosted checkout. The destructure of queryPlans() (returns
3// { plans, nextCursor }, NOT a bare array) and the checkout-then-redirect are load-bearing — keep
4// them. The Plans page only renders what this returns.
5import { useState, useEffect } from "react";
6import { queryPlans, checkout } from "@/rest/wix-pricing-plans";
7
8export function usePlans() {
9  const [plans, setPlans] = useState([]);
10  const [cursor, setCursor] = useState(null);
11  const [loaded, setLoaded] = useState(false);
12
13  useEffect(() => {
14    // NB: destructure — queryPlans returns { plans, nextCursor }, NOT a bare array.
15    queryPlans().then(({ plans, nextCursor }) => { setPlans(plans); setCursor(nextCursor); setLoaded(true); });
16  }, []);
17
18  const loadMore = () =>
19    queryPlans({ cursor }).then(({ plans: more, nextCursor }) => {
20      setPlans((p) => [...p, ...more]);
21      setCursor(nextCursor);
22    });
23
24  // members-only, Wix-hosted checkout; on success Wix returns to thankYouPageUrl with ?planOrderId=<GUID>
25  async function subscribe(plan) {
26    window.location.href = await checkout(plan.id, { thankYouPageUrl: `${window.location.origin}/my-plans` });
27  }
28
29  return { plans, cursor, loaded, loadMore, subscribe };
30}