Use Plan Detail

1// usePlanDetail — plan-detail logic, no markup: load a single PUBLIC plan by its URL slug, expose a
2// notFound flag (getPlanBySlug returns null on a miss — show a not-found state, never invent a
3// plan), and start the members-only hosted checkout. Mirrors the storefront's useProductDetail.
4// The detail page only renders what this returns.
5import { useState, useEffect } from "react";
6import { getPlanBySlug, checkout } from "@/rest/wix-pricing-plans";
7
8export function usePlanDetail(slug) {
9  const [plan, setPlan] = useState(null);
10  const [notFound, setNotFound] = useState(false);
11
12  useEffect(() => {
13    setPlan(null);
14    setNotFound(false);
15    getPlanBySlug(slug).then((p) => {
16      if (!p) return setNotFound(true);
17      setPlan(p);
18    });
19  }, [slug]);
20
21  // members-only, Wix-hosted checkout; on success Wix returns to thankYouPageUrl with ?planOrderId=<GUID>
22  async function subscribe() {
23    if (!plan) return;
24    window.location.href = await checkout(plan.id, { thankYouPageUrl: `${window.location.origin}/my-plans` });
25  }
26
27  return { plan, notFound, subscribe };
28}