@startsimpli/billing 0.4.12 → 0.4.15

package/src/components/SubscriptionManager.test.tsx

@@ -14,7 +14,7 @@
  */
 
 import { describe, it, expect, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { BillingProvider } from "../hooks/BillingProvider";
@@ -208,7 +208,9 @@ describe("SubscriptionManager", () => {
     );
 
     expect(screen.getByTestId("subscription-manager")).toBeDefined();
-    expect(screen.getByText(/loading/i)).toBeDefined();
+    // Skeleton matching the final layout, not the old "Loading subscription..."
+    // text — startsim-z6f.
+    expect(screen.getByTestId("skeleton-current-plan")).toBeDefined();
   });
 
   it("shows current plan details when subscribed (plan name, price)", async () => {
@@ -231,11 +233,14 @@ describe("SubscriptionManager", () => {
       expect(screen.getByTestId("current-plan")).toBeDefined();
     });
 
-    // Check plan name
-    expect(screen.getByText("Pro")).toBeDefined();
+    // Plan name appears in BOTH the current-plan card AND the matching grid
+    // card (the matching one carries the "Current Plan" badge). Both expected
+    // after startsim-1f1 — assert at least one node, not exactly one.
+    expect(screen.getAllByText("Pro").length).toBeGreaterThanOrEqual(1);
 
-    // Check price
-    expect(screen.getByText(/\$49/)).toBeDefined();
+    // Price ($49) in the current-plan card (price also rendered in the
+    // matching grid card now, so >=1).
+    expect(screen.getAllByText(/\$49/).length).toBeGreaterThanOrEqual(1);
   });
 
   it("shows subscription status badge (active, trialing, past_due, cancelled)", async () => {
@@ -309,14 +314,20 @@ describe("SubscriptionManager", () => {
       expect(screen.getByTestId("current-plan")).toBeDefined();
     });
 
-    // Check billing period dates are displayed
-    expect(screen.getByText(/2026-01-01/)).toBeDefined();
-    expect(screen.getByText(/2026-02-01/)).toBeDefined();
+    // Active paid sub → only the "Next billing date" line renders (2026-02-01).
+    // The verbose "Billing period: start to end" only appears for non-active
+    // or free states after startsim-7j4. Both dates are still in the DOM via
+    // the grid card's renderings, so target the current-plan card specifically.
+    const currentPlan = screen.getByTestId("current-plan");
+    expect(currentPlan.textContent).toMatch(/2026-02-01/);
   });
 
-  it("shows available offers for upgrade (excludes current plan)", async () => {
+  it("shows ALL offers in the Change Plan grid (current marked, not hidden) — startsim-1f1", async () => {
+    // startsim-1f1: the user's current plan now appears IN the grid with a
+    // "Current Plan" badge instead of being silently filtered out. Lets users
+    // compare plans without scrolling between sections.
     const fetcher = mockFetchRouter({
-      "/billing/subscription/current/": mockSubscriptionActive, // Currently on Pro
+      "/billing/subscription/current/": mockSubscriptionActive, // Pro
       "/billing/products/": mockProduct,
     });
     const Wrapper = createWrapper(fetcher);
@@ -330,17 +341,17 @@ describe("SubscriptionManager", () => {
       </Wrapper>
     );
 
-    await waitFor(() => {
-      expect(screen.getByTestId("available-plans")).toBeDefined();
-    });
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
 
-    // Should show Starter and Enterprise, but NOT Pro (current plan)
-    expect(screen.getByText("Starter")).toBeDefined();
-    expect(screen.getByText("Enterprise")).toBeDefined();
+    // All three plan-cards present in the grid
+    expect(screen.getByTestId("plan-card-starter-monthly")).toBeDefined();
+    expect(screen.getByTestId("plan-card-pro-monthly")).toBeDefined();
+    expect(screen.getByTestId("plan-card-enterprise-monthly")).toBeDefined();
 
-    // Pro should only appear once (in current plan section)
-    const proElements = screen.getAllByText("Pro");
-    expect(proElements.length).toBe(1);
+    // The matching one (Pro) carries the badge; the others do not.
+    expect(screen.getByTestId("current-plan-badge-pro-monthly")).toBeDefined();
+    expect(screen.queryByTestId("current-plan-badge-starter-monthly")).toBeNull();
+    expect(screen.queryByTestId("current-plan-badge-enterprise-monthly")).toBeNull();
   });
 
   it("calls onPlanChange when upgrade option clicked", async () => {
@@ -527,4 +538,745 @@ describe("SubscriptionManager", () => {
     // Billing period line must not be rendered (null dates)
     expect(screen.queryByText(/billing period/i)).toBeNull();
   });
+
+  // ---------------------------------------------------------------
+  // startsim-o7u: plan cards show their features
+  // startsim-pih: trial copy under price on offers with trialDays > 0
+  // ---------------------------------------------------------------
+
+  it("renders the feature list on each available plan card (o7u)", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    // Each available plan card renders <ul data-testid="plan-features">
+    const lists = screen.getAllByTestId("plan-features");
+    expect(lists.length).toBe(mockProduct.offers.length);
+
+    // Feature labels render — at least these signature ones from the fixtures:
+    //   Starter:    "Up to 1 team seats", "Up to 3 projects"
+    //   Pro:        "Up to 5 team seats", "Projects" (string-valued)
+    //   Enterprise: "Team seats", "Projects"
+    expect(screen.getAllByText(/up to 1 team seats/i).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/up to 3 projects/i).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/up to 5 team seats/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders trial copy under price for offers with trialDays > 0 (pih)", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    // Only the Pro card has trialDays:14 → exactly one trial-copy node
+    const trialNodes = screen.getAllByTestId("trial-copy");
+    expect(trialNodes.length).toBe(1);
+    expect(trialNodes[0].textContent).toMatch(/14-day free trial/i);
+    expect(trialNodes[0].textContent).toMatch(/no card required/i);
+  });
+
+  it("renders 'Unlimited X' for features with limit === -1 (o7u)", async () => {
+    const productWithUnlimited = {
+      ...mockProduct,
+      offers: [
+        // Need >=2 offers to render the Change Plan grid after startsim-ft2 —
+        // give Starter the unlimited feature we care about + keep Pro alongside.
+        {
+          ...mockProduct.offers[0],
+          features: [{ key: "envs", name: "Environments", value: -1, limit: -1 }],
+        },
+        mockProduct.offers[1],
+      ],
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": productWithUnlimited,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.getByText(/unlimited environments/i)).toBeDefined();
+  });
+
+  // ---------------------------------------------------------------
+  // startsim-6vk: free-offer CTA hits subscribe-free, NOT checkout
+  // startsim-b1z: free-tier current plan shows "Upgrade to <PaidName>"
+  //               and the portal button is hidden
+  // ---------------------------------------------------------------
+
+  it("free-offer CTA calls subscribe-free, not Stripe checkout (6vk)", async () => {
+    const onPlanChange = vi.fn();
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://t/s"
+          onPlanChange={onPlanChange}
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    // Click the Free card's CTA (slug "starter-monthly", isFree=true)
+    (await screen.findByTestId("upgrade-cta-starter-monthly")).click();
+
+    // subscribe-free is hit (server fetcher saw the POST)
+    await waitFor(() => {
+      const calls = (fetcher as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0] as string);
+      expect(calls.some((u) => u.includes("/billing/subscribe-free/"))).toBe(true);
+    });
+    // onPlanChange (the Stripe checkout path) was NOT called
+    expect(onPlanChange).not.toHaveBeenCalled();
+  });
+
+  it("paid-offer CTA delegates to onPlanChange (Stripe path)", async () => {
+    const onPlanChange = vi.fn();
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://t/s"
+          onPlanChange={onPlanChange}
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    // Click the Pro card's CTA (slug "pro-monthly", isFree=false)
+    (await screen.findByTestId("upgrade-cta-pro-monthly")).click();
+
+    await waitFor(() => {
+      expect(onPlanChange).toHaveBeenCalledTimes(1);
+    });
+    expect(onPlanChange.mock.calls[0][0].slug).toBe("pro-monthly");
+  });
+
+  it("free-tier current plan shows 'Upgrade to <PaidName>' CTA (b1z)", async () => {
+    // User subscribed to the free Starter offer
+    const freeSub: SubscriptionInfo = {
+      ...mockSubscriptionActive,
+      offer: mockProduct.offers[0], // Starter, isFree=true
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": freeSub,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+
+    const upgrade = screen.getByTestId("upgrade-cta-current-plan");
+    expect(upgrade.textContent).toMatch(/Upgrade to Pro/i);
+
+    // And the portal button is hidden (no Stripe customer on a free sub)
+    expect(screen.queryByTestId("portal-button")).toBeNull();
+  });
+
+  it("paid-tier current plan does NOT render the Upgrade CTA (b1z)", async () => {
+    // mockSubscriptionActive uses the Pro offer (isFree=false)
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    expect(screen.queryByTestId("upgrade-cta-current-plan")).toBeNull();
+    // Portal button IS visible for the paid sub
+    expect(screen.queryByTestId("portal-button")).not.toBeNull();
+  });
+
+  it("skips boolean-false features (you don't get to brag about what you DON'T have)", async () => {
+    const productWithFalse = {
+      ...mockProduct,
+      offers: [
+        {
+          ...mockProduct.offers[0],
+          features: [
+            { key: "audit", name: "Audit log", value: true },
+            { key: "sso", name: "SSO", value: false },
+          ],
+        },
+        // Second offer needed so the Change Plan grid actually renders
+        // (single-offer products hide it after startsim-ft2).
+        mockProduct.offers[1],
+      ],
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": productWithFalse,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.queryByText(/audit log/i)).not.toBeNull();
+    expect(screen.queryByText(/^SSO$/i)).toBeNull();
+  });
+
+  // ───────────────────────────────────────────────────────────────
+  // PlanCard CTA × subscription-state matrix — startsim-21f, -1f1, -yc4
+  // ───────────────────────────────────────────────────────────────
+  describe("per-card CTA matrix vs current subscription", () => {
+    type Case = {
+      label: string;
+      subscription: SubscriptionInfo | null;
+      cardSlug: string;       // which card we inspect
+      expectedCta: RegExp;
+      shouldBeDisabled: boolean;
+      shouldShowCurrentBadge: boolean;
+      shouldShowTrialCopy: boolean;
+    };
+
+    const cases: Case[] = [
+      // No subscription (legacy / pre-auto-enrol): every card is an "upgrade"
+      { label: "no-sub · Starter card → 'Start Free' (upgrade)",
+        subscription: null, cardSlug: "starter-monthly",
+        expectedCta: /start free/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+      { label: "no-sub · Pro card → 'Start Trial' (upgrade)",
+        subscription: null, cardSlug: "pro-monthly",
+        expectedCta: /start trial/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: true },
+
+      // FREE current sub
+      { label: "free · Starter card → 'Current Plan' disabled badge",
+        subscription: { ...mockSubscriptionActive, offer: mockProduct.offers[0] },
+        cardSlug: "starter-monthly",
+        expectedCta: /current plan/i, shouldBeDisabled: true,
+        shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
+      { label: "free · Pro card → upgrade CTA (existing ctaText)",
+        subscription: { ...mockSubscriptionActive, offer: mockProduct.offers[0] },
+        cardSlug: "pro-monthly",
+        expectedCta: /start trial/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: true },
+      { label: "free · Enterprise card → upgrade CTA",
+        subscription: { ...mockSubscriptionActive, offer: mockProduct.offers[0] },
+        cardSlug: "enterprise-monthly",
+        expectedCta: /contact sales/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+
+      // PRO current sub (this is the exact scenario the user flagged)
+      { label: "pro · Starter card → 'Downgrade to Starter', NOT 'Start Free'",
+        subscription: mockSubscriptionActive, // Pro
+        cardSlug: "starter-monthly",
+        expectedCta: /downgrade to starter/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+      { label: "pro · Pro card → 'Current Plan' disabled badge",
+        subscription: mockSubscriptionActive,
+        cardSlug: "pro-monthly",
+        expectedCta: /current plan/i, shouldBeDisabled: true,
+        shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
+      { label: "pro · Enterprise card → upgrade CTA, trial copy if applicable",
+        subscription: mockSubscriptionActive,
+        cardSlug: "enterprise-monthly",
+        expectedCta: /contact sales/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+
+      // TRIALING Pro current sub
+      { label: "trialing-pro · Pro card → 'Current Plan' badge",
+        subscription: mockSubscriptionTrialing,
+        cardSlug: "pro-monthly",
+        expectedCta: /current plan/i, shouldBeDisabled: true,
+        shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
+      { label: "trialing-pro · Starter card → 'Downgrade to Starter'",
+        subscription: mockSubscriptionTrialing,
+        cardSlug: "starter-monthly",
+        expectedCta: /downgrade to starter/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+
+      // ENTERPRISE current sub (downgrade to Pro)
+      { label: "enterprise · Pro card → 'Downgrade to Pro' (both paid)",
+        subscription: { ...mockSubscriptionActive, offer: mockProduct.offers[2] },
+        cardSlug: "pro-monthly",
+        expectedCta: /downgrade to pro/i, shouldBeDisabled: false,
+        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+      { label: "enterprise · Enterprise card → 'Current Plan'",
+        subscription: { ...mockSubscriptionActive, offer: mockProduct.offers[2] },
+        cardSlug: "enterprise-monthly",
+        expectedCta: /current plan/i, shouldBeDisabled: true,
+        shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
+    ];
+
+    it.each(cases)("$label", async ({ subscription, cardSlug, expectedCta, shouldBeDisabled, shouldShowCurrentBadge, shouldShowTrialCopy }) => {
+      const fetcher = mockFetchRouter({
+        "/billing/subscription/current/": subscription,
+        "/billing/products/": mockProduct,
+      });
+      const Wrapper = createWrapper(fetcher);
+
+      render(
+        <Wrapper>
+          <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+        </Wrapper>
+      );
+
+      await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+      const cta = await screen.findByTestId(`upgrade-cta-${cardSlug}`);
+      expect(cta.textContent).toMatch(expectedCta);
+      if (shouldBeDisabled) {
+        expect((cta as HTMLButtonElement).disabled).toBe(true);
+      } else {
+        expect((cta as HTMLButtonElement).disabled).toBe(false);
+      }
+
+      const badge = screen.queryByTestId(`current-plan-badge-${cardSlug}`);
+      if (shouldShowCurrentBadge) {
+        expect(badge).not.toBeNull();
+      } else {
+        expect(badge).toBeNull();
+      }
+
+      // Trial copy: only show on the upgrade direction for trialDays > 0 offers
+      const card = screen.getByTestId(`plan-card-${cardSlug}`);
+      const trialCopy = card.querySelector('[data-testid="trial-copy"]');
+      if (shouldShowTrialCopy) {
+        expect(trialCopy).not.toBeNull();
+      } else {
+        expect(trialCopy).toBeNull();
+      }
+    });
+  });
+
+  // ───────────────────────────────────────────────────────────────
+  // startsim-7j4 — Active Pro next-billing-date polish
+  // startsim-ngw — ?status=success: success-sync fires + banner + refetch
+  // startsim-0l2 — ?status=cancelled: banner visible, no state change
+  // ───────────────────────────────────────────────────────────────
+
+  it("active paid sub shows 'Next billing date' (not 'Billing period') — startsim-7j4", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive, // Pro / active
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+
+    const nextBilling = screen.getByTestId("next-billing-date");
+    expect(nextBilling.textContent).toMatch(/next billing date/i);
+    expect(nextBilling.textContent).toMatch(/2026-02-01/);
+    // The verbose "Billing period:" line is hidden on active paid subs.
+    expect(screen.queryByText(/^Billing period:/i)).toBeNull();
+  });
+
+  it("free sub falls back to billing-period (no next-billing-date) — startsim-7j4", async () => {
+    const freeSub: SubscriptionInfo = { ...mockSubscriptionActive, offer: mockProduct.offers[0] };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": freeSub,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    expect(screen.queryByTestId("next-billing-date")).toBeNull();
+  });
+
+  it("status=success: POSTs to /success-sync/ once and refetches sub — startsim-ngw", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://t/s"
+          statusMessage="success"
+        />
+      </Wrapper>
+    );
+
+    // Banner renders
+    await waitFor(() => expect(screen.getByTestId("status-banner-success")).toBeDefined());
+
+    // success-sync was hit
+    await waitFor(() => {
+      const calls = (fetcher as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0] as string);
+      expect(calls.some((u) => u.includes("/billing/success-sync/"))).toBe(true);
+    });
+
+    // Subscription was refetched (≥2 hits to subscription/current: initial + post-sync)
+    const calls = (fetcher as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0] as string);
+    const subCalls = calls.filter((u) => u.includes("/billing/subscription/current/")).length;
+    expect(subCalls).toBeGreaterThanOrEqual(2);
+  });
+
+  it("status=success: success-sync fires exactly once on rapid re-renders — startsim-ngw", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    const { rerender } = render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" statusMessage="success" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("status-banner-success")).toBeDefined());
+    rerender(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" statusMessage="success" />
+      </Wrapper>
+    );
+
+    const calls = (fetcher as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0] as string);
+    const syncCalls = calls.filter((u) => u.includes("/billing/success-sync/")).length;
+    expect(syncCalls).toBe(1);
+  });
+
+  it("status=cancelled: banner shown, no success-sync POST, no extra refetch — startsim-0l2", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://t/s"
+          statusMessage="cancelled"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("status-banner-cancelled")).toBeDefined());
+
+    const calls = (fetcher as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0] as string);
+    expect(calls.some((u) => u.includes("/billing/success-sync/"))).toBe(false);
+  });
+
+  // ───────────────────────────────────────────────────────────────
+  // startsim-z6f — skeleton during loading (matches final layout)
+  // startsim-mtv — partial load: sub-ready/product-still-loading shouldn't crash
+  // startsim-c0r — product fetch error doesn't blank the page (inline + retry)
+  // startsim-ft2 — single-offer products hide the Change Plan grid entirely
+  // startsim-y34 — multi-tier: Upgrade CTA picks the NEXT tier by sortOrder
+  // ───────────────────────────────────────────────────────────────
+
+  it("dual-loading renders skeleton matching the final layout (z6f)", () => {
+    // Never-resolving fetcher → both sub + product stay loading.
+    const fetcher = vi.fn().mockReturnValue(new Promise(() => {})) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    expect(screen.getByTestId("skeleton-current-plan")).toBeDefined();
+    expect(screen.getAllByTestId("skeleton-plan-card").length).toBeGreaterThanOrEqual(2);
+    // The old bare "Loading subscription..." text is gone.
+    expect(screen.queryByText(/loading subscription/i)).toBeNull();
+  });
+
+  it("sub-ready + product-still-loading renders current-plan + grid skeletons (mtv)", async () => {
+    // Sub resolves; product hangs forever.
+    const fetcher = vi.fn((url: string) => {
+      if (url.includes("/billing/subscription/current/")) {
+        return Promise.resolve({ ok: true, json: () => Promise.resolve(mockSubscriptionActive) });
+      }
+      return new Promise(() => {}); // product never resolves
+    }) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    // Grid skeletons render while product is in flight; available-plans absent.
+    expect(screen.getByTestId("available-plans-loading")).toBeDefined();
+    expect(screen.queryByTestId("available-plans")).toBeNull();
+  });
+
+  it("product fetch error renders inline error + retry (c0r)", async () => {
+    let productCalls = 0;
+    const fetcher = vi.fn((url: string) => {
+      if (url.includes("/billing/subscription/current/")) {
+        return Promise.resolve({ ok: true, json: () => Promise.resolve(mockSubscriptionActive) });
+      }
+      productCalls += 1;
+      return Promise.resolve({
+        ok: false, status: 500,
+        json: () => Promise.resolve({ detail: "kaboom" }),
+      });
+    }) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    // Current plan still visible (page didn't blank).
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    const banner = await screen.findByTestId("error-product");
+    expect(banner.textContent).toMatch(/couldn.?t load plans/i);
+
+    const initial = productCalls;
+    (screen.getByTestId("retry-product") as HTMLButtonElement).click();
+    await waitFor(() => expect(productCalls).toBeGreaterThan(initial));
+  });
+
+  it("single-offer product (Free-only app) hides the Change Plan grid (ft2)", async () => {
+    const singleOffer = {
+      ...mockProduct,
+      offers: [mockProduct.offers[0]], // Just Starter
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": singleOffer,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    // Wait for product to resolve.
+    await new Promise((r) => setTimeout(r, 30));
+    expect(screen.queryByTestId("available-plans")).toBeNull();
+    expect(screen.queryByTestId("available-plans-loading")).toBeNull();
+  });
+
+  // ───────────────────────────────────────────────────────────────
+  // startsim-wo9 — non-owner team member sees read-only billing view
+  // ───────────────────────────────────────────────────────────────
+
+  it("non-owner: shows read-only notice + disables every action (wo9)", async () => {
+    const onPlanChange = vi.fn();
+    const nonOwnerSub: SubscriptionInfo = {
+      ...mockSubscriptionActive,
+      viewerIsOwner: false,
+      ownerEmail: "owner@example.com",
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": nonOwnerSub,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" onPlanChange={onPlanChange} />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+
+    // Read-only notice with owner email surfaced.
+    const notice = screen.getByTestId("non-owner-billing-notice");
+    expect(notice.textContent).toMatch(/owner@example\.com/);
+
+    // Manage Billing button hidden (paid sub but viewer is not owner).
+    expect(screen.queryByTestId("portal-button")).toBeNull();
+
+    // Per-card CTAs are present (for visibility) but disabled.
+    const starterCta = screen.getByTestId("upgrade-cta-starter-monthly") as HTMLButtonElement;
+    expect(starterCta.disabled).toBe(true);
+    starterCta.click();
+    expect(onPlanChange).not.toHaveBeenCalled();
+  });
+
+  it("owner (default): notice hidden, actions enabled (wo9)", async () => {
+    const ownerSub: SubscriptionInfo = {
+      ...mockSubscriptionActive,
+      viewerIsOwner: true,
+      offer: mockProduct.offers[0], // Free so the Upgrade CTA renders
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": ownerSub,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    expect(screen.queryByTestId("non-owner-billing-notice")).toBeNull();
+    // Upgrade CTA visible for free-tier owner.
+    expect(screen.getByTestId("upgrade-cta-current-plan")).toBeDefined();
+  });
+
+  it("multi-paid-tier: Pro user's Upgrade CTA points at Enterprise (y34)", async () => {
+    // Pro (sortOrder 1) is the current sub; Enterprise (sortOrder 2) is the
+    // next tier up. Free (sortOrder 0) and Pro itself are NOT the upgrade target.
+    const proCurrent: SubscriptionInfo = {
+      ...mockSubscriptionActive,
+      offer: { ...mockProduct.offers[1], isFree: true /* force-current-is-free to expose the CTA path */ },
+    };
+    // Re-use freeSub flow but pretend Pro is free so the Upgrade CTA actually
+    // renders (it only renders for free-tier current subs by design).
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": proCurrent,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    const upgrade = screen.queryByTestId("upgrade-cta-current-plan");
+    expect(upgrade).not.toBeNull();
+    // The CTA text reads "Upgrade to <NextTier>" — Enterprise is sortOrder 2,
+    // strictly above proCurrent.offer.sortOrder=1.
+    expect(upgrade?.textContent).toMatch(/upgrade to enterprise/i);
+  });
+
+  // Regression: the subscription/current endpoint's Redis cache path returns a
+  // FLAT payload (offerId/offerSlug/productSlug, NO nested `offer`). The UI used
+  // to deref `subscription.offer.isFree` and white-screen ("client-side
+  // exception"). BillingApiClient now hydrates the offer from the product, so
+  // the rich CurrentPlanCard renders instead. startsim — billing-offer-null.
+  it("hydrates the flat cache-shape subscription payload instead of crashing", async () => {
+    const flatCachePayload = {
+      // Shape of CachedSubscriptionResponseSerializer after the camelCase proxy:
+      subscriptionId: "sub-cache-1",
+      providerSubscriptionId: "stripe_sub_1",
+      status: "active",
+      customerId: "cus_1",
+      priceId: "price_1",
+      offerId: "offer-2", // Pro
+      productSlug: "raise-simpli",
+      offerSlug: "pro-monthly",
+      currentPeriodStart: 1735689600, // unix seconds, not ISO
+      currentPeriodEnd: 1738368000,
+      cancelAtPeriodEnd: false,
+      trialEnd: null,
+      paymentMethod: null,
+    };
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": flatCachePayload,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    // Renders the rich current-plan card (Pro) — proves no crash AND that the
+    // offer was hydrated from the product rather than dropped.
+    await waitFor(() => expect(screen.getByTestId("current-plan")).toBeDefined());
+    const card = screen.getByTestId("current-plan");
+    expect(within(card).getByText("Pro")).toBeDefined();
+    // Active paid sub → "Next billing date" derived from the unix-seconds period.
+    expect(within(card).getByTestId("next-billing-date")).toBeDefined();
+  });
+
+  it("degrades to 'no active subscription' when a flat payload can't resolve an offer", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": {
+        status: "active",
+        offerId: "does-not-exist",
+        offerSlug: "ghost",
+        productSlug: "raise-simpli",
+      },
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" />
+      </Wrapper>
+    );
+
+    // No crash; falls through to the empty-state copy.
+    await waitFor(() =>
+      expect(screen.getByText("No active subscription")).toBeDefined()
+    );
+  });
 });