@carlonicora/nextjs-jsonapi 1.141.2 → 1.142.0

package/src/features/company/data/company.interface.ts

@@ -8,9 +8,9 @@ export type CompanyInput = {
   logo?: string;
   configurations?: any;
 
-  monthlyTokens?: number;
-  availableMonthlyTokens?: number;
-  availableExtraTokens?: number;
+  monthlyCredits?: number;
+  availableMonthlyCredits?: number;
+  availableExtraCredits?: number;
 
   featureIds?: string[];
   moduleIds?: string[];
@@ -34,9 +34,9 @@ export interface CompanyInterface extends ApiDataInterface {
 
   get isActiveSubscription(): boolean;
 
-  get monthlyTokens(): number;
-  get availableMonthlyTokens(): number;
-  get availableExtraTokens(): number;
+  get monthlyCredits(): number;
+  get availableMonthlyCredits(): number;
+  get availableExtraCredits(): number;
 
   get features(): FeatureInterface[];
   get modules(): ModuleInterface[];

package/src/features/company/data/company.ts

@@ -11,9 +11,9 @@ export class Company extends AbstractApiData implements CompanyInterface {
 
   private _isActiveSubscription: boolean = false;
 
-  private _monthlyTokens: number = 0;
-  private _availableMonthlyTokens: number = 0;
-  private _availableExtraTokens: number = 0;
+  private _monthlyCredits: number = 0;
+  private _availableMonthlyCredits: number = 0;
+  private _availableExtraCredits: number = 0;
 
   private _features?: FeatureInterface[];
   private _modules?: ModuleInterface[];
@@ -46,16 +46,16 @@ export class Company extends AbstractApiData implements CompanyInterface {
     return this._isActiveSubscription ?? false;
   }
 
-  get monthlyTokens(): number {
-    return this._monthlyTokens ?? 0;
+  get monthlyCredits(): number {
+    return this._monthlyCredits ?? 0;
   }
 
-  get availableMonthlyTokens(): number {
-    return this._availableMonthlyTokens ?? 0;
+  get availableMonthlyCredits(): number {
+    return this._availableMonthlyCredits ?? 0;
   }
 
-  get availableExtraTokens(): number {
-    return this._availableExtraTokens ?? 0;
+  get availableExtraCredits(): number {
+    return this._availableExtraCredits ?? 0;
   }
 
   get features(): FeatureInterface[] {
@@ -120,9 +120,9 @@ export class Company extends AbstractApiData implements CompanyInterface {
     this._logo = data.jsonApi.attributes.logo;
     this._logoUrl = data.jsonApi.attributes.logoUrl;
     this._isActiveSubscription = data.jsonApi.attributes.isActiveSubscription ?? false;
-    this._monthlyTokens = data.jsonApi.attributes.monthlyTokens ?? 0;
-    this._availableMonthlyTokens = data.jsonApi.attributes.availableMonthlyTokens ?? 0;
-    this._availableExtraTokens = data.jsonApi.attributes.availableExtraTokens ?? 0;
+    this._monthlyCredits = data.jsonApi.attributes.monthlyCredits ?? 0;
+    this._availableMonthlyCredits = data.jsonApi.attributes.availableMonthlyCredits ?? 0;
+    this._availableExtraCredits = data.jsonApi.attributes.availableExtraCredits ?? 0;
 
     this._legal_address = data.jsonApi.attributes.legal_address;
     this._street_number = data.jsonApi.attributes.street_number;
@@ -156,11 +156,11 @@ export class Company extends AbstractApiData implements CompanyInterface {
     if (data.name) response.data.attributes.name = data.name;
     if (data.configurations) response.data.attributes.configurations = JSON.stringify(data.configurations);
     if (data.logo) response.data.attributes.logo = data.logo;
-    if (data.monthlyTokens !== undefined) response.data.attributes.monthlyTokens = data.monthlyTokens;
-    if (data.availableMonthlyTokens !== undefined)
-      response.data.attributes.availableMonthlyTokens = data.availableMonthlyTokens;
-    if (data.availableExtraTokens !== undefined)
-      response.data.attributes.availableExtraTokens = data.availableExtraTokens;
+    if (data.monthlyCredits !== undefined) response.data.attributes.monthlyCredits = data.monthlyCredits;
+    if (data.availableMonthlyCredits !== undefined)
+      response.data.attributes.availableMonthlyCredits = data.availableMonthlyCredits;
+    if (data.availableExtraCredits !== undefined)
+      response.data.attributes.availableExtraCredits = data.availableExtraCredits;
 
     if (data.legal_address !== undefined) response.data.attributes.legal_address = data.legal_address;
     if (data.street_number !== undefined) response.data.attributes.street_number = data.street_number;

package/src/features/help/components/HelpHeader.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { useCurrentUserContext } from "../../user/contexts/CurrentUserContext";
-import { Button } from "../../../shadcnui";
+import { buttonVariants } from "../../../shadcnui";
 import { useHelp } from "../contexts/HelpContext";
 import { HelpAskAi } from "./HelpAskAi";
 
@@ -25,14 +25,19 @@ export function HelpHeader() {
       </Link>
       <div className="flex items-center gap-2">
         <HelpAskAi />
+        {/* Styled Links, not <Button render={<Link/>} nativeButton={false}>. Base UI's
+            Button primitive warns when rendered as a non-button, and nativeButton={false}
+            silences that by stamping role="button" onto the anchor — so a control that
+            navigates would announce as a button. Both of these navigate, so they stay
+            real links and only borrow the button styling. */}
         {currentUser ? (
-          <Button render={<Link href={appHref} />} nativeButton={false} variant="outline" size="sm">
+          <Link href={appHref} className={buttonVariants({ variant: "outline", size: "sm" })}>
             {t("help.header.openApp")}
-          </Button>
+          </Link>
         ) : (
-          <Button render={<Link href="/login" />} nativeButton={false} variant="outline" size="sm">
+          <Link href="/login" className={buttonVariants({ variant: "outline", size: "sm" })}>
             {t("help.header.login")}
-          </Button>
+          </Link>
         )}
       </div>
     </header>

package/src/features/help/components/__tests__/HelpHeader.spec.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { configureJsonApi } from "../../../../client/config";
+import { HelpProvider } from "../../contexts/HelpContext";
+import { HelpHeader } from "../HelpHeader";
+
+// Not under test here, and it pulls in its own data context.
+vi.mock("../HelpAskAi", () => ({ HelpAskAi: () => null }));
+
+const currentUserContext = vi.fn();
+vi.mock("../../../user/contexts/CurrentUserContext", () => ({
+  useCurrentUserContext: () => currentUserContext(),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  currentUserContext.mockReturnValue({ currentUser: null });
+  configureJsonApi({
+    apiUrl: "http://localhost",
+    helpContent: { brand: { label: "narr8", appHref: "/app" } },
+  } as any);
+});
+
+const renderHeader = () =>
+  render(
+    <HelpProvider>
+      <HelpHeader />
+    </HelpProvider>,
+  );
+
+describe("HelpHeader", () => {
+  // Both controls navigate. Rendering them as Base UI Buttons required
+  // nativeButton={false} to silence the primitive's warning, which stamps
+  // role="button" onto the anchor — so a navigating control announced as a
+  // button. They must stay plain links that only borrow the button styling.
+  it("renders the login control as a link, with no button role", () => {
+    renderHeader();
+
+    const link = screen.getByRole("link", { name: "help.header.login" });
+    expect(link).toHaveAttribute("href", "/login");
+    expect(link).not.toHaveAttribute("role");
+  });
+
+  it("renders the open-app control as a link, with no button role", () => {
+    currentUserContext.mockReturnValue({ currentUser: { id: "u1" } });
+
+    renderHeader();
+
+    const link = screen.getByRole("link", { name: "help.header.openApp" });
+    expect(link).toHaveAttribute("href", "/app");
+    expect(link).not.toHaveAttribute("role");
+  });
+
+  it("renders no button element among the header actions", () => {
+    renderHeader();
+
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+});

package/src/features/user/contexts/CurrentUserContext.tsx

@@ -71,26 +71,26 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
     [dehydratedUser],
   );
 
-  // Balances pushed by company:tokens_updated. Transient: a real user refresh is
+  // Balances pushed by company:credits_updated. Transient: a real user refresh is
   // authoritative and clears this.
-  const [tokenOverride, setTokenOverride] = useState<{
-    availableMonthlyTokens: number;
-    availableExtraTokens: number;
+  const [creditOverride, setCreditOverride] = useState<{
+    availableMonthlyCredits: number;
+    availableExtraCredits: number;
   } | null>(null);
 
   const company = useMemo<CompanyInterface | null>(() => {
     const c = currentUser?.company ?? null;
-    if (!c || !tokenOverride) return c;
+    if (!c || !creditOverride) return c;
     return Object.assign(Object.create(Object.getPrototypeOf(c)), c, {
-      _availableMonthlyTokens: tokenOverride.availableMonthlyTokens,
-      _availableExtraTokens: tokenOverride.availableExtraTokens,
+      _availableMonthlyCredits: creditOverride.availableMonthlyCredits,
+      _availableExtraCredits: creditOverride.availableExtraCredits,
     });
-  }, [currentUser, tokenOverride]);
+  }, [currentUser, creditOverride]);
 
   const setUser = (user?: UserInterface): void => {
     if (user) setDehydratedUser(user.dehydrate() as any);
     else setDehydratedUser(null);
-    setTokenOverride(null);
+    setCreditOverride(null);
   };
 
   const hasRole = (roleId: string): boolean => {
@@ -177,7 +177,7 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
           }
 
           setDehydratedUser(fullUser.dehydrate() as any);
-          setTokenOverride(null);
+          setCreditOverride(null);
         }
       } catch (error) {
         console.error("Failed to refresh user data:", error);
@@ -206,15 +206,15 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
 
     // Hot path: fires once per LLM call. Fully described by its payload — must
     // never trigger an HTTP request.
-    const handleTokensUpdated = (data: {
+    const handleCreditsUpdated = (data: {
       companyId: string;
-      availableMonthlyTokens: number;
-      availableExtraTokens: number;
+      availableMonthlyCredits: number;
+      availableExtraCredits: number;
     }) => {
       if (data.companyId !== currentUser.company?.id) return;
-      setTokenOverride({
-        availableMonthlyTokens: data.availableMonthlyTokens,
-        availableExtraTokens: data.availableExtraTokens,
+      setCreditOverride({
+        availableMonthlyCredits: data.availableMonthlyCredits,
+        availableExtraCredits: data.availableExtraCredits,
       });
     };
 
@@ -230,11 +230,11 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
       }
     };
 
-    socket.on("company:tokens_updated", handleTokensUpdated);
+    socket.on("company:credits_updated", handleCreditsUpdated);
     socket.on("company:subscription_updated", handleSubscriptionUpdated);
 
     return () => {
-      socket.off("company:tokens_updated", handleTokensUpdated);
+      socket.off("company:credits_updated", handleCreditsUpdated);
       socket.off("company:subscription_updated", handleSubscriptionUpdated);
     };
   }, [socket, isConnected, currentUser?.company?.id]);

package/src/features/user/contexts/__tests__/CurrentUserContext.spec.tsx

@@ -39,14 +39,14 @@ vi.mock("../../../../core", () => {
   // exercise it.
   class FakeCompany {
     id = "";
-    monthlyTokens = 0;
-    _availableMonthlyTokens = 0;
-    _availableExtraTokens = 0;
-    get availableMonthlyTokens() {
-      return this._availableMonthlyTokens ?? 0;
+    monthlyCredits = 0;
+    _availableMonthlyCredits = 0;
+    _availableExtraCredits = 0;
+    get availableMonthlyCredits() {
+      return this._availableMonthlyCredits ?? 0;
     }
-    get availableExtraTokens() {
-      return this._availableExtraTokens ?? 0;
+    get availableExtraCredits() {
+      return this._availableExtraCredits ?? 0;
     }
   }
   return {
@@ -187,9 +187,9 @@ describe("CurrentUserProvider token updates", () => {
     modules: [],
     company: {
       id: "company-1",
-      monthlyTokens: 1000,
-      _availableMonthlyTokens: 900,
-      _availableExtraTokens: 50,
+      monthlyCredits: 1000,
+      _availableMonthlyCredits: 900,
+      _availableExtraCredits: 50,
     },
   };
 
@@ -197,7 +197,7 @@ describe("CurrentUserProvider token updates", () => {
     const { company } = useCurrentUserContext();
     return (
       <div data-testid="balances">
-        {company ? `${(company as any).availableMonthlyTokens}/${(company as any).availableExtraTokens}` : "null"}
+        {company ? `${(company as any).availableMonthlyCredits}/${(company as any).availableExtraCredits}` : "null"}
       </div>
     );
   }
@@ -208,7 +208,7 @@ describe("CurrentUserProvider token updates", () => {
     vi.clearAllMocks();
   });
 
-  it("patches balances from company:tokens_updated without refetching the user", async () => {
+  it("patches balances from company:credits_updated without refetching the user", async () => {
     localStorage.setItem("user", JSON.stringify(STORED_USER));
 
     const { getByTestId } = render(
@@ -221,11 +221,11 @@ describe("CurrentUserProvider token updates", () => {
     expect(getByTestId("balances").textContent).toBe("900/50");
 
     await act(async () => {
-      socketMock.emit("company:tokens_updated", {
-        type: "company:tokens_updated",
+      socketMock.emit("company:credits_updated", {
+        type: "company:credits_updated",
         companyId: "company-1",
-        availableMonthlyTokens: 750,
-        availableExtraTokens: 40,
+        availableMonthlyCredits: 750,
+        availableExtraCredits: 40,
       });
     });
 
@@ -233,7 +233,7 @@ describe("CurrentUserProvider token updates", () => {
     expect(UserService.findFullUser).not.toHaveBeenCalled();
   });
 
-  it("ignores company:tokens_updated for a different company", async () => {
+  it("ignores company:credits_updated for a different company", async () => {
     localStorage.setItem("user", JSON.stringify(STORED_USER));
 
     const { getByTestId } = render(
@@ -245,11 +245,11 @@ describe("CurrentUserProvider token updates", () => {
     await new Promise((resolve) => setTimeout(resolve, 50));
 
     await act(async () => {
-      socketMock.emit("company:tokens_updated", {
-        type: "company:tokens_updated",
+      socketMock.emit("company:credits_updated", {
+        type: "company:credits_updated",
         companyId: "someone-else",
-        availableMonthlyTokens: 1,
-        availableExtraTokens: 1,
+        availableMonthlyCredits: 1,
+        availableExtraCredits: 1,
       });
     });