@startsimpli/billing 0.4.12 → 0.4.14

package/src/components/LimitNudge.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * Tests for <LimitNudge /> — startsim-r9d.
+ */
+
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { LimitNudge } from "./LimitNudge";
+import type { UsageMap } from "../types";
+
+function mockFetcher(usage: UsageMap | "error") {
+  return vi.fn((url: string) => {
+    if (url.includes("/billing/usage/")) {
+      if (usage === "error") {
+        return Promise.resolve({
+          ok: false, status: 500,
+          json: () => Promise.resolve({ detail: "boom" }),
+        });
+      }
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(usage) });
+    }
+    return Promise.resolve({ ok: false, status: 404 });
+  }) as unknown as typeof fetch;
+}
+
+function wrap(fetcher: typeof fetch) {
+  return ({ children }: { children: React.ReactNode }) => (
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      {children}
+    </BillingProvider>
+  );
+}
+
+describe("<LimitNudge />", () => {
+  it("renders nothing when usage is loading / empty", async () => {
+    const fetcher = mockFetcher({});
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge productSlug="vault" featureKey="environments" featureLabel="environments" />
+      </Wrapper>,
+    );
+    // After fetch resolves we have {} so nudge stays hidden — wait a tick.
+    await waitFor(() => {
+      expect(screen.queryByTestId("limit-nudge-environments")).toBeNull();
+    });
+  });
+
+  it("renders nothing on unlimited (-1) — Pro users don't see a bar (r9d)", async () => {
+    const fetcher = mockFetcher({ environments: { used: 99, limit: -1 } });
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge productSlug="vault" featureKey="environments" featureLabel="environments" />
+      </Wrapper>,
+    );
+    // Give the hook time to populate.
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("limit-nudge-environments")).toBeNull();
+  });
+
+  it("renders gray 'ok' state below 80% (r9d)", async () => {
+    const fetcher = mockFetcher({ environments: { used: 1, limit: 3 } });
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge productSlug="vault" featureKey="environments" featureLabel="environments" />
+      </Wrapper>,
+    );
+    const el = await screen.findByTestId("limit-nudge-environments");
+    expect(el.getAttribute("data-state")).toBe("ok");
+    expect(el.textContent).toMatch(/1 \/ 3 environments used/i);
+    expect(screen.queryByText(/upgrade/i)).toBeNull();
+  });
+
+  it("renders yellow 'approaching' state at >=80% (r9d)", async () => {
+    const fetcher = mockFetcher({ environments: { used: 8, limit: 10 } });
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge productSlug="vault" featureKey="environments" featureLabel="environments" />
+      </Wrapper>,
+    );
+    const el = await screen.findByTestId("limit-nudge-environments");
+    expect(el.getAttribute("data-state")).toBe("approaching");
+    expect(screen.getByText(/approaching limit/i)).toBeDefined();
+  });
+
+  it("renders red 'at-cap' state at limit with upgrade link (r9d)", async () => {
+    const fetcher = mockFetcher({ environments: { used: 3, limit: 3 } });
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge
+          productSlug="vault"
+          featureKey="environments"
+          featureLabel="environments"
+          upgradeHref="/foo/bar/billing"
+        />
+      </Wrapper>,
+    );
+    const el = await screen.findByTestId("limit-nudge-environments");
+    expect(el.getAttribute("data-state")).toBe("at-cap");
+    const link = screen.getByText(/upgrade for unlimited/i);
+    expect(link.getAttribute("href")).toBe("/foo/bar/billing");
+  });
+
+  it("renders nothing if the feature key isn't in the usage map", async () => {
+    const fetcher = mockFetcher({ environments: { used: 0, limit: 3 } });
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge productSlug="vault" featureKey="missing_key" featureLabel="things" />
+      </Wrapper>,
+    );
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("limit-nudge-missing_key")).toBeNull();
+  });
+
+  it("hides on backend error (usage endpoint fails) — never blocks the page", async () => {
+    const fetcher = mockFetcher("error");
+    const Wrapper = wrap(fetcher);
+    render(
+      <Wrapper>
+        <LimitNudge productSlug="vault" featureKey="environments" featureLabel="environments" />
+      </Wrapper>,
+    );
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("limit-nudge-environments")).toBeNull();
+  });
+});

package/src/components/LimitNudge.tsx

@@ -0,0 +1,84 @@
+/**
+ * <LimitNudge /> — startsim-r9d.
+ *
+ * Drop-in usage indicator for any data-bearing list page (envs, secrets,
+ * uploads, leads). Reads usage from useUsage(productSlug) and renders:
+ *   - "X / Y used" with a slim progress bar
+ *   - At >=80% util: warning (orange) — "Approaching limit"
+ *   - At >=100% util: danger (red) + "Upgrade for more" link
+ *
+ * Numeric-limit features only. Boolean / unlimited (-1) / missing usage
+ * render NOTHING (Pro users don't see a "0 / 999 envs used" bar — the
+ * whole point of paying is to stop seeing the bar). Apps wire it once:
+ *
+ *   <LimitNudge productSlug="vault" featureKey="environments"
+ *               featureLabel="environments" upgradeHref="/settings/billing" />
+ */
+"use client";
+
+import React from "react";
+import { useUsage } from "../hooks/useUsage";
+
+export interface LimitNudgeProps {
+  /** Slug to call /api/billing/usage/<slug>/ — e.g. "vault" */
+  productSlug: string;
+  /** Feature key matching ProductOffer.features[].key — e.g. "environments" */
+  featureKey: string;
+  /** Human plural label used in the visible copy — e.g. "environments" */
+  featureLabel: string;
+  /** Where to send the user to upgrade — typically /settings/billing */
+  upgradeHref?: string;
+}
+
+export function LimitNudge({ productSlug, featureKey, featureLabel, upgradeHref = "/settings/billing" }: LimitNudgeProps) {
+  const { usage } = useUsage(productSlug);
+  const u = usage[featureKey];
+  // Render nothing if:
+  //   - no usage data yet (loading or no adapter)
+  //   - no limit declared (Pro / unlimited features don't get a bar)
+  //   - limit < 0 (unlimited marker)
+  if (!u) return null;
+  if (typeof u.limit !== "number" || u.limit < 0) return null;
+
+  const used = Math.max(0, u.used);
+  const limit = u.limit;
+  const pct = limit === 0 ? 100 : Math.min(100, Math.round((used / limit) * 100));
+  const atCap = used >= limit;
+  const approaching = !atCap && pct >= 80;
+
+  const wrap =
+    atCap       ? "bg-red-50 border-red-200 text-red-800"
+    : approaching ? "bg-yellow-50 border-yellow-200 text-yellow-900"
+    : "bg-gray-50 border-gray-200 text-gray-700";
+  const bar =
+    atCap ? "bg-red-500" : approaching ? "bg-yellow-500" : "bg-blue-600";
+
+  return (
+    <div
+      data-testid={`limit-nudge-${featureKey}`}
+      data-state={atCap ? "at-cap" : approaching ? "approaching" : "ok"}
+      className={`flex items-center gap-4 px-4 py-3 rounded-lg border ${wrap}`}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="flex items-baseline justify-between gap-3 text-sm">
+          <span className="font-medium tabular-nums">
+            {used} / {limit} {featureLabel} used
+          </span>
+          {atCap && (
+            <a href={upgradeHref} className="font-semibold underline shrink-0">
+              Upgrade for unlimited
+            </a>
+          )}
+          {approaching && (
+            <a href={upgradeHref} className="font-medium underline shrink-0">
+              Approaching limit — upgrade
+            </a>
+          )}
+        </div>
+        <div className="mt-2 w-full bg-white rounded-full h-2 overflow-hidden" aria-hidden="true">
+          <div className={`h-2 rounded-full transition-all ${bar}`} style={{ width: `${Math.max(pct, 4)}%` }} />
+        </div>
+      </div>
+    </div>
+  );
+}