@startsimpli/billing 0.4.15 → 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.15",
+  "version": "0.4.17",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/__tests__/theme-contract.test.ts

@@ -0,0 +1,40 @@
+/**
+ * Theme-contract guard for @startsimpli/billing (startsim-1f3n.3).
+ *
+ * Shared components may only use the semantic tokens from
+ * packages/ui/theme/contract.css. The numeric Tailwind ramp
+ * (`bg-primary-600`, `focus:ring-primary-500`, …) is not part of it — an app
+ * that declares `--color-primary` without a ramp gets NO rule for those
+ * classes, which renders a plan card border as invisible white-on-white.
+ * Use an opacity modifier on the token instead (`hover:bg-primary/90`).
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+import { describe, it, expect } from 'vitest'
+
+const SRC = path.resolve(__dirname, '..')
+const RAMP = /\b[a-z-]*-(primary|accent|secondary)-\d{2,3}\b/
+
+function sources(dir: string, acc: string[] = []): string[] {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, e.name)
+    if (e.isDirectory()) {
+      if (e.name !== '__tests__' && e.name !== 'node_modules') sources(full, acc)
+    } else if (/\.tsx?$/.test(e.name)) acc.push(full)
+  }
+  return acc
+}
+
+describe('@startsimpli/billing theme contract', () => {
+  it('no component styles against a numeric color ramp', () => {
+    const offenders: string[] = []
+    for (const file of sources(SRC)) {
+      fs.readFileSync(file, 'utf8').split('\n').forEach((line, i) => {
+        const code = line.replace(/^\s*(\*|\/\/).*$/, '')
+        const hit = code.match(RAMP)
+        if (hit) offenders.push(`${path.relative(SRC, file)}:${i + 1} ${hit[0]}`)
+      })
+    }
+    expect(offenders).toEqual([])
+  })
+})

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();
@@ -433,7 +433,7 @@ export function SubscriptionManager({
 
               // Border: current = solid ring; featured upgrade = blue; else gray.
               const cardBorder =
-                isCurrent ? "border-2 border-primary-600 ring-2 ring-primary-100 bg-white shadow-md"
+                isCurrent ? "border-2 border-primary ring-2 ring-primary/20 bg-white shadow-md"
                 : offer.isFeatured ? "border border-blue-600 shadow-md bg-white"
                 : "border border-gray-200 bg-white shadow-sm";
 
@@ -457,7 +457,7 @@ export function SubscriptionManager({
                   {isCurrent && (
                     <span
                       data-testid={`current-plan-badge-${offer.slug}`}
-                      className="absolute -top-2.5 right-4 inline-block bg-primary-600 text-white text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full"
+                      className="absolute -top-2.5 right-4 inline-block bg-primary text-primary-foreground text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full"
                     >
                       Current Plan
                     </span>

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