@startsimpli/billing 0.4.30 → 0.4.31

package/package.json

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

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>
       )}