@startsimpli/billing 0.4.29 → 0.4.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.29",
+  "version": "0.4.31",
   "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/SubscriptionManager.test.tsx

@@ -390,6 +390,38 @@ describe("SubscriptionManager", () => {
     );
   });
 
+  it("a failed Manage Billing click shows an error instead of nothing", async () => {
+    const router = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive,
+      "/billing/products/": mockProduct,
+    }) as unknown as (url: string, init?: RequestInit) => Promise<unknown>;
+    const fetcher = vi.fn((url: string, init?: RequestInit) =>
+      url.includes("/billing/offer-portal/")
+        ? Promise.resolve({
+            ok: false,
+            status: 500,
+            json: () => Promise.resolve({ detail: "Failed to create portal session" }),
+          })
+        : router(url, init),
+    ) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await userEvent.click(await screen.findByTestId("portal-button"));
+
+    const alert = await screen.findByTestId("portal-error");
+    expect(alert.getAttribute("role")).toBe("alert");
+    expect(alert.textContent?.trim().length).toBeGreaterThan(0);
+  });
+
   it("shows Manage Billing portal button", async () => {
     const fetcher = mockFetchRouter({
       "/billing/subscription/current/": mockSubscriptionActive,

package/src/components/SubscriptionManager.tsx

@@ -196,7 +196,7 @@ export function SubscriptionManager({
 }: SubscriptionManagerProps) {
   const { subscription, loading: subLoading, error: subError, refetch: refetchSubscription } = useSubscription(productId);
   const { product, loading: productLoading, error: productError, refetch: refetchProduct } = useProduct(productId);
-  const { openPortal, loading: portalLoading } = usePortal();
+  const { openPortal, loading: portalLoading, error: portalError } = usePortal();
   const { subscribeFree } = useCheckout();
   const { usage } = useUsage(productId);
   const { sync: successSync } = useSuccessSync();
@@ -607,6 +607,11 @@ export function SubscriptionManager({
           >
             {portalLoading ? "Loading..." : "Manage Billing"}
           </button>
+          {portalError && (
+            <p data-testid="portal-error" role="alert" className="mt-3 text-sm text-red-700">
+              {portalError.message}
+            </p>
+          )}
         </div>
       )}