@startsimpli/billing 0.4.28 → 0.4.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.28",
+  "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).

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

@@ -104,3 +104,12 @@ describe("PricingSection card rules", () => {
     expect(screen.getByTestId("section-cta-crochet-pro").className).toContain("bg-[var(--billing-accent,#2563eb)]");
   });
 });
+
+it("the pill row has a fixed height, so a card with a trial pill starts its rows level with the others (crochet_patterns-gac4)", async () => {
+  renderSection();
+  await waitFor(() => screen.getByTestId("trial-badge"));
+  const row = screen.getByTestId("trial-badge").parentElement as HTMLElement;
+  expect(row.className).toMatch(/\bh-6\b/);
+  expect(row.className).toMatch(/\bflex\b/);
+});
+

package/src/components/PricingSection.tsx

@@ -146,7 +146,7 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurr
 
       {/* Every card reserves the pill and lead-in rows, so matching features
           start at the same height on each card (crochet_patterns-gac4). */}
-      <div className="mb-3 min-h-5">
+      <div className="mb-3 flex h-6 items-center">
         {offer.trialDays > 0 && (
           <span
             data-testid="trial-badge"