@startsimpli/billing 0.4.16 → 0.4.17

package/README.md

@@ -207,14 +207,14 @@ BILLING_USAGE_ADAPTERS = {
 | `PricingPage` / `PricingSection` / `PricingDetailPage` | Pre-billing display surfaces. | For marketing / landing pages. |
 | `UpgradeModal` | Modal pricing overlay. | For mid-flow upgrade prompts. |
 | `ManageSubscription` | Bare portal redirect button. | Use `SubscriptionManager` instead unless you really just want the button. |
-| `PlanGate` | Feature-gate wrapper. | Show / hide children based on the user's offer features. |
+| `PlanGate` | Feature-gate wrapper. | Show / hide children based on the user's offer features. Pass `productId`, or a paid plan on another product opens the gate. |
 
 ### Hooks
 
 | Hook | Returns | Notes |
 |---|---|---|
 | `useProduct(slug)` | `{ product, loading, error, refetch }` | Fetch product + offers |
-| `useSubscription()` | `{ subscription, loading, error, refetch }` | Current sub incl. `viewerIsOwner` + `ownerEmail` |
+| `useSubscription(productId)` | `{ subscription, loading, error, refetch }` | Current sub for that product, incl. `viewerIsOwner` + `ownerEmail`. Always pass the product: without it the newest sub for ANY product comes back. |
 | `useUsage(slug)` | `{ usage, loading, error, refetch }` | `{feature_key: {used, limit}}` map; auto-refetches on `visibilitychange` + `billing:usage-changed` event |
 | `useCheckout()` | `{ checkout, subscribeFree, loading, error }` | Stripe session creator + free-subscribe in one |
 | `usePortal()` | `{ openPortal, loading, error }` | Stripe customer portal session |

package/package.json

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

package/src/components/PlanGate.test.tsx

@@ -130,4 +130,28 @@ describe("PlanGate", () => {
       expect(screen.getAllByText(/paid plan|upgrade/i).length).toBeGreaterThan(0)
     );
   });
+
+  it("gates on the given product's subscription only (startsim-oyr3a.2)", async () => {
+    const fetcher = vi.fn(async () => ({
+      ok: false,
+      status: 404,
+      async json() {
+        return {};
+      },
+    })) as unknown as typeof fetch;
+
+    render(
+      <BillingProvider apiBaseUrl="/api" fetcher={fetcher}>
+        <PlanGate productId="crochet-patterns" fallback={<span>upgrade</span>}>
+          <span>pro feature</span>
+        </PlanGate>
+      </BillingProvider>
+    );
+
+    await waitFor(() => expect(screen.getByText("upgrade")).toBeDefined());
+    expect(fetcher).toHaveBeenCalledWith(
+      "/api/billing/subscription/current/?product=crochet-patterns",
+      expect.anything()
+    );
+  });
 });

package/src/components/PlanGate.tsx

@@ -6,6 +6,11 @@ import { isPaidSubscription } from "../utils/plan";
 
 export interface PlanGateProps {
   children: React.ReactNode;
+  /**
+   * The app's product slug. Without it, a paid plan on ANY product opens the
+   * gate (startsim-oyr3a.2).
+   */
+  productId?: string;
   /**
    * Element rendered in place of children when user is not on a paid plan.
    * Defaults to a minimal upgrade nudge pointing at /pricing.
@@ -40,8 +45,9 @@ export function PlanGate({
   children,
   fallback,
   upgradeHref = "/pricing",
+  productId,
 }: PlanGateProps) {
-  const { subscription, loading } = useSubscription();
+  const { subscription, loading } = useSubscription(productId);
 
   if (loading) return <>{children}</>;
 

package/src/components/SubscriptionManager.test.tsx

@@ -1279,4 +1279,28 @@ describe("SubscriptionManager", () => {
       expect(screen.getByText("No active subscription")).toBeDefined()
     );
   });
+
+  it("asks only for its own product's subscription (startsim-oyr3a.2)", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() =>
+      expect(fetcher).toHaveBeenCalledWith(
+        "https://api.test.com/api/v1/billing/subscription/current/?product=raise-simpli",
+        expect.anything()
+      )
+    );
+  });
 });

package/src/components/SubscriptionManager.tsx

@@ -172,7 +172,7 @@ export function SubscriptionManager({
   onPlanChange,
   statusMessage,
 }: SubscriptionManagerProps) {
-  const { subscription, loading: subLoading, error: subError, refetch: refetchSubscription } = useSubscription();
+  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 { subscribeFree } = useCheckout();

package/src/hooks/useSubscription.test.tsx

@@ -88,6 +88,24 @@ describe("useSubscription", () => {
     );
   });
 
+  it("asks only for the given product's subscription (startsim-oyr3a.2)", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(mockSubscription),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => useSubscription("crochet-patterns"), { wrapper });
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test.com/api/v1/billing/subscription/current/?product=crochet-patterns",
+      expect.anything()
+    );
+  });
+
   it("returns null when no subscription exists (404)", async () => {
     const mockFetch = vi.fn().mockResolvedValue({
       ok: false,

package/src/hooks/useSubscription.ts

@@ -1,5 +1,8 @@
 /**
  * useSubscription — Fetch current user's active subscription.
+ *
+ * Pass the app's product slug so another app's plan is never returned
+ * (startsim-oyr3a.2).
  */
 
 import { useCallback, useEffect, useState } from "react";
@@ -13,7 +16,7 @@ interface UseSubscriptionResult {
   refetch: () => void;
 }
 
-export function useSubscription(): UseSubscriptionResult {
+export function useSubscription(productId?: string): UseSubscriptionResult {
   const { client } = useBillingContext();
   const [subscription, setSubscription] = useState<SubscriptionInfo | null>(null);
   const [loading, setLoading] = useState(true);
@@ -23,14 +26,14 @@ export function useSubscription(): UseSubscriptionResult {
     setLoading(true);
     setError(null);
     try {
-      const data = await client.getSubscription();
+      const data = await client.getSubscription(productId);
       setSubscription(data);
     } catch (e) {
       setError(e instanceof Error ? e : new Error(String(e)));
     } finally {
       setLoading(false);
     }
-  }, [client]);
+  }, [client, productId]);
 
   useEffect(() => {
     fetchSubscription();

package/src/utils/api.ts

@@ -134,9 +134,14 @@ export class BillingApiClient {
     return (await resp.json()) as UsageMap;
   }
 
-  /** Get current user's subscription. */
-  async getSubscription(): Promise<SubscriptionInfo | null> {
-    const url = `${this.config.apiBaseUrl}/billing/subscription/current/`;
+  /**
+   * Get current user's subscription. Pass the app's product slug: a team can
+   * hold subscriptions to several products, and without it the backend returns
+   * the newest one for ANY product (startsim-oyr3a.2).
+   */
+  async getSubscription(productSlug?: string): Promise<SubscriptionInfo | null> {
+    const query = productSlug ? `?product=${encodeURIComponent(productSlug)}` : "";
+    const url = `${this.config.apiBaseUrl}/billing/subscription/current/${query}`;
     const resp = await this.fetcher(url, {
       headers: this.headers,
     });