@wopr-network/platform-ui-core 1.4.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/__tests__/buy-crypto-credits-panel.test.tsx

@@ -1,14 +1,19 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-const { mockCreateCryptoCheckout, mockIsAllowedRedirectUrl } = vi.hoisted(() => ({
-  mockCreateCryptoCheckout: vi.fn(),
-  mockIsAllowedRedirectUrl: vi.fn(),
-}));
+const { mockCreateCryptoCheckout, mockIsAllowedRedirectUrl, mockGetSupportedPaymentMethods } =
+  vi.hoisted(() => ({
+    mockCreateCryptoCheckout: vi.fn(),
+    mockIsAllowedRedirectUrl: vi.fn(),
+    mockGetSupportedPaymentMethods: vi.fn(),
+  }));
 
 vi.mock("@/lib/api", () => ({
   createCryptoCheckout: (...args: unknown[]) => mockCreateCryptoCheckout(...args),
+  createEthCheckout: vi.fn(),
+  createStablecoinCheckout: vi.fn(),
+  getSupportedPaymentMethods: (...args: unknown[]) => mockGetSupportedPaymentMethods(...args),
 }));
 
 vi.mock("@/lib/validate-redirect-url", () => ({
@@ -44,6 +49,9 @@ vi.mock("next/navigation", () => ({
 vi.mock("better-auth/react", () => ({
   createAuthClient: () => ({
     useSession: () => ({ data: null, isPending: false, error: null }),
+    signIn: { email: vi.fn(), social: vi.fn() },
+    signUp: { email: vi.fn() },
+    signOut: vi.fn(),
   }),
 }));
 
@@ -55,14 +63,31 @@ vi.mock("lucide-react", async (importOriginal) => {
   };
 });
 
+const MOCK_USDC_METHOD = {
+  id: "usdc:base",
+  type: "stablecoin",
+  label: "USDC on Base",
+  token: "USDC",
+  chain: "base",
+};
+const MOCK_BTC_METHOD = {
+  id: "btc:btcpay",
+  type: "btc",
+  label: "BTC",
+  token: "BTC",
+  chain: "bitcoin",
+};
+
 afterEach(() => {
   vi.restoreAllMocks();
   mockIsAllowedRedirectUrl.mockReset();
   mockCreateCryptoCheckout.mockReset();
+  mockGetSupportedPaymentMethods.mockReset();
 });
 
 describe("BuyCryptoCreditPanel", () => {
   it("renders crypto amount buttons ($10, $25, $50, $100)", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
@@ -74,23 +99,35 @@ describe("BuyCryptoCreditPanel", () => {
   });
 
   it("Pay button is disabled when no amount selected", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
-    const payBtn = screen.getByRole("button", { name: "Pay with crypto" });
+    // Wait for methods to load
+    await waitFor(() => {
+      expect(screen.getByText("Stablecoin")).toBeInTheDocument();
+    });
+
+    const payBtn = screen.getByRole("button", { name: "Pay with USDC" });
     expect(payBtn).toBeDisabled();
   });
 
   it("Pay button is enabled after selecting an amount", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("Stablecoin")).toBeInTheDocument();
+    });
+
     await user.click(screen.getByText("$25"));
-    expect(screen.getByRole("button", { name: "Pay with crypto" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Pay with USDC" })).toBeEnabled();
   });
 
   it("calls createCryptoCheckout with selected amount and redirects", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     const hrefSetter = vi.fn();
     Object.defineProperty(window, "location", {
       value: { ...window.location, href: "" },
@@ -112,8 +149,14 @@ describe("BuyCryptoCreditPanel", () => {
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    // Switch to BTC tab
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$50"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
     expect(mockCreateCryptoCheckout).toHaveBeenCalledWith(50);
     expect(mockIsAllowedRedirectUrl).toHaveBeenCalledWith("https://btcpay.example.com/i/abc123");
@@ -121,6 +164,7 @@ describe("BuyCryptoCreditPanel", () => {
   });
 
   it("shows error when redirect URL is not allowed", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     mockCreateCryptoCheckout.mockResolvedValue({
       url: "https://evil.com/steal",
       referenceId: "ref-evil",
@@ -131,15 +175,21 @@ describe("BuyCryptoCreditPanel", () => {
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$10"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
     expect(
       await screen.findByText("Unexpected checkout URL. Please contact support."),
     ).toBeInTheDocument();
   });
 
-  it("shows Opening checkout... while checkout is in progress", async () => {
+  it("shows Creating checkout... while checkout is in progress", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     mockCreateCryptoCheckout.mockReturnValue(
       new Promise(() => {
         /* intentionally pending */
@@ -150,29 +200,33 @@ describe("BuyCryptoCreditPanel", () => {
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$100"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
-    expect(await screen.findByText("Opening checkout...")).toBeInTheDocument();
+    expect(await screen.findByText("Creating checkout...")).toBeInTheDocument();
   });
 
   it("shows error when crypto checkout API call fails", async () => {
+    mockGetSupportedPaymentMethods.mockResolvedValue([MOCK_USDC_METHOD, MOCK_BTC_METHOD]);
     mockCreateCryptoCheckout.mockRejectedValue(new Error("API down"));
 
     const user = userEvent.setup();
     const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
     render(<BuyCryptoCreditPanel />);
 
+    await waitFor(() => {
+      expect(screen.getByText("BTC")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("BTC"));
     await user.click(screen.getByText("$25"));
-    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+    await user.click(screen.getByRole("button", { name: "Pay with BTC" }));
 
     expect(await screen.findByText("Checkout failed. Please try again.")).toBeInTheDocument();
   });
-
-  it("displays minimum amount note", async () => {
-    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
-    render(<BuyCryptoCreditPanel />);
-
-    expect(screen.getByText(/Minimum \$10/)).toBeInTheDocument();
-  });
 });

package/src/__tests__/settings.test.tsx

@@ -19,10 +19,17 @@ vi.mock("next/navigation", () => ({
   usePathname: () => "/settings/profile",
 }));
 
-// Mock better-auth/react
+// Mock better-auth/react — session with user-001 (Alice) so role-gated org UI renders admin view
 vi.mock("better-auth/react", () => ({
   createAuthClient: () => ({
-    useSession: () => ({ data: null, isPending: false, error: null }),
+    useSession: () => ({
+      data: {
+        user: { id: "user-001", name: "Alice Johnson", email: "alice@example.com" },
+        session: { id: "sess-1", userId: "user-001", expiresAt: new Date(Date.now() + 86400000) },
+      },
+      isPending: false,
+      error: null,
+    }),
     signIn: { email: vi.fn(), social: vi.fn() },
     signUp: { email: vi.fn() },
     signOut: vi.fn(),

package/src/app/(auth)/invite/[token]/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { BuildingIcon, CheckCircleIcon, Loader2Icon, XCircleIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { use, useCallback, useEffect, useRef, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSession } from "@/lib/auth-client";
+import { productName } from "@/lib/brand-config";
+import { acceptInvite } from "@/lib/org-api";
+
+type InviteState = "loading" | "accepting" | "success" | "error" | "login-required";
+
+export default function InviteAcceptPage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = use(params);
+  const { data: session, isPending: sessionLoading } = useSession();
+  const router = useRouter();
+  const [state, setState] = useState<InviteState>("loading");
+  const [orgName, setOrgName] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const acceptedRef = useRef(false);
+
+  const doAccept = useCallback(async () => {
+    if (acceptedRef.current) return;
+    acceptedRef.current = true;
+
+    setState("accepting");
+    try {
+      const result = await acceptInvite(token);
+      setOrgName(result.orgName ?? "your organization");
+      setState("success");
+      // Redirect to dashboard after brief success message
+      setTimeout(() => router.push("/"), 2000);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to accept invite";
+      // Surface specific error messages from the backend
+      if (msg.includes("already a member")) {
+        setErrorMessage("You are already a member of this organization.");
+      } else if (msg.includes("expired")) {
+        setErrorMessage("This invite has expired. Please ask the admin to send a new one.");
+      } else if (msg.includes("revoked")) {
+        setErrorMessage("This invite has been revoked.");
+      } else if (msg.includes("not found")) {
+        setErrorMessage("Invalid invite link. It may have already been used.");
+      } else {
+        setErrorMessage(msg);
+      }
+      setState("error");
+      acceptedRef.current = false;
+    }
+  }, [token, router]);
+
+  useEffect(() => {
+    if (sessionLoading) return;
+
+    if (!session?.user) {
+      // Not logged in — redirect to login with callback
+      setState("login-required");
+      const callbackUrl = encodeURIComponent(`/invite/${token}`);
+      router.push(`/login?callbackUrl=${callbackUrl}`);
+      return;
+    }
+
+    // User is logged in — accept the invite
+    doAccept();
+  }, [session, sessionLoading, token, router, doAccept]);
+
+  return (
+    <Card className="border-terminal/20 bg-card/80 backdrop-blur-sm">
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-terminal/10">
+          <BuildingIcon className="h-6 w-6 text-terminal" />
+        </div>
+        <CardTitle className="text-lg font-semibold tracking-tight">Organization Invite</CardTitle>
+        <CardDescription>
+          {state === "loading" && "Checking your session..."}
+          {state === "login-required" && "Redirecting to sign in..."}
+          {state === "accepting" && `Joining organization on ${productName()}...`}
+          {state === "success" && `Welcome to ${orgName}!`}
+          {state === "error" && "Something went wrong"}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col items-center gap-4 pb-8">
+        {(state === "loading" || state === "login-required" || state === "accepting") && (
+          <Loader2Icon className="h-8 w-8 animate-spin text-terminal/60" />
+        )}
+
+        {state === "success" && (
+          <>
+            <CheckCircleIcon className="h-8 w-8 text-emerald-500" />
+            <p className="text-sm text-muted-foreground">Redirecting to your dashboard...</p>
+          </>
+        )}
+
+        {state === "error" && (
+          <>
+            <XCircleIcon className="h-8 w-8 text-destructive" />
+            <p className="text-sm text-muted-foreground text-center">{errorMessage}</p>
+            <button
+              type="button"
+              onClick={() => router.push("/")}
+              className="mt-2 text-sm font-medium text-terminal hover:text-terminal/80 underline underline-offset-4"
+            >
+              Go to dashboard
+            </button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}