@startsimpli/billing 0.4.29 → 0.4.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.29",
+  "version": "0.4.30",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/PricingDetailPage.review.test.tsx

@@ -221,6 +221,19 @@ describe("one purchase at a time (crochet_patterns-j2we6)", () => {
   });
 });
 
+describe("the clicked button spins for a signed-in viewer too (crochet_patterns-j2we6)", () => {
+  it("spins Lite while a Free viewer's checkout starts", async () => {
+    const onSelectOffer = vi.fn(() => new Promise(() => {}));
+    const free = { id: "sub-0", status: "active", offer: product.offers[0] } as unknown as SubscriptionInfo;
+    renderPricing({ onSelectOffer, currentPlan: { signedIn: true, subscription: free } });
+    await waitFor(() => expect(cta("crochet-free").textContent).toMatch(/current plan/i));
+    fireEvent.click(cta("crochet-lite"));
+    await waitFor(() => expect(cta("crochet-lite").getAttribute("aria-busy")).toBe("true"));
+    expect(cta("crochet-pro").getAttribute("aria-busy")).toBeNull();
+    expect(cta("crochet-pro").disabled).toBe(true);
+  });
+});
+
 describe("the page names itself (crochet_patterns-ln6hf)", () => {
   it("uses the host's title and subtitle", async () => {
     renderPricing({ title: "Pricing", subtitle: "Free to start." });

package/src/components/PricingDetailPage.tsx

@@ -75,6 +75,8 @@ export function PricingDetailPage({
   // A purchase by a viewer with no plan (signed out) skips usePlanChange, so
   // it is tracked here: the clicked card spins and every other button waits.
   const [selecting, setSelecting] = React.useState<string | null>(null);
+  // The card last clicked, so its button is the one that spins.
+  const [clicked, setClicked] = React.useState<string | null>(null);
 
   if (loading) {
     return (
@@ -124,6 +126,7 @@ export function PricingDetailPage({
   const busy = planChange.busy || hostBusy || selecting !== null;
   const select = (offer: ProductOffer) => {
     if (busy || planUnknown) return;
+    setClicked(offer.id);
     if (!currentOffer) {
       setSelecting(offer.id);
       void Promise.resolve()
@@ -137,7 +140,7 @@ export function PricingDetailPage({
     setSelecting(null);
     void planChange.choose(offer, { paying, leavingUnlisted: onUnlistedPlan, currentOffer });
   };
-  const spinningId = busy ? selecting ?? planChange.pending?.offer.id ?? null : null;
+  const spinningId = busy ? clicked : null;
 
   // What each tier already has, so a card under "Everything in X, plus:"
   // lists only what it adds (crochet_patterns-tv7fb).