@wopr-network/platform-ui-core 1.24.1 → 1.26.0

package/package.json

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

package/src/__tests__/amount-selector.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { AmountSelector } from "@/components/billing/amount-selector";
+
+describe("AmountSelector", () => {
+  it("renders preset amounts", () => {
+    render(<AmountSelector onSelect={vi.fn()} />);
+    expect(screen.getByText("$10")).toBeInTheDocument();
+    expect(screen.getByText("$25")).toBeInTheDocument();
+    expect(screen.getByText("$50")).toBeInTheDocument();
+    expect(screen.getByText("$100")).toBeInTheDocument();
+  });
+
+  it("calls onSelect with chosen amount", async () => {
+    const onSelect = vi.fn();
+    render(<AmountSelector onSelect={onSelect} />);
+    await userEvent.click(screen.getByText("$25"));
+    await userEvent.click(screen.getByRole("button", { name: /continue/i }));
+    expect(onSelect).toHaveBeenCalledWith(25);
+  });
+
+  it("supports custom amount input", async () => {
+    const onSelect = vi.fn();
+    render(<AmountSelector onSelect={onSelect} />);
+    const input = screen.getByPlaceholderText(/custom/i);
+    await userEvent.type(input, "75");
+    await userEvent.click(screen.getByRole("button", { name: /continue/i }));
+    expect(onSelect).toHaveBeenCalledWith(75);
+  });
+
+  it("disables continue when no amount selected", () => {
+    render(<AmountSelector onSelect={vi.fn()} />);
+    expect(screen.getByRole("button", { name: /continue/i })).toBeDisabled();
+  });
+});

package/src/__tests__/confirmation-tracker.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ConfirmationTracker } from "@/components/billing/confirmation-tracker";
+
+describe("ConfirmationTracker", () => {
+  it("shows confirmation progress", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={8}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={false}
+      />,
+    );
+    expect(screen.getByText(/8/)).toBeInTheDocument();
+    expect(screen.getByText(/20/)).toBeInTheDocument();
+    expect(screen.getByText(/25\.00 USDT/)).toBeInTheDocument();
+  });
+
+  it("shows credited state", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={20}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={true}
+      />,
+    );
+    expect(screen.getByText(/credits applied/i)).toBeInTheDocument();
+  });
+
+  it("renders progress bar", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={10}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={false}
+      />,
+    );
+    const bar = screen.getByRole("progressbar");
+    expect(bar).toBeInTheDocument();
+  });
+
+  it("shows tx hash when provided", () => {
+    render(
+      <ConfirmationTracker
+        confirmations={5}
+        confirmationsRequired={20}
+        displayAmount="25.00 USDT"
+        credited={false}
+        txHash="0xabc123"
+      />,
+    );
+    expect(screen.getByText(/0xabc123/)).toBeInTheDocument();
+  });
+});

package/src/__tests__/crypto-checkout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: { children?: React.ReactNode; [key: string]: unknown }) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("qrcode.react", () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <div data-testid="qr">{value}</div>,
+}));
+
+vi.mock("@/lib/api", () => ({
+  getSupportedPaymentMethods: vi.fn().mockResolvedValue([
+    {
+      id: "BTC:mainnet",
+      type: "native",
+      token: "BTC",
+      chain: "bitcoin",
+      displayName: "Bitcoin",
+      decimals: 8,
+      displayOrder: 0,
+      iconUrl: "",
+    },
+    {
+      id: "USDT:tron",
+      type: "erc20",
+      token: "USDT",
+      chain: "tron",
+      displayName: "USDT on Tron",
+      decimals: 6,
+      displayOrder: 1,
+      iconUrl: "",
+    },
+  ]),
+  createCheckout: vi.fn().mockResolvedValue({
+    depositAddress: "THwbQb1sPiRUpUYunVQxQKc6i4LCmpP1mj",
+    displayAmount: "32.24 TRX",
+    amountUsd: 10,
+    token: "TRX",
+    chain: "tron",
+    referenceId: "trx:test",
+  }),
+  getChargeStatus: vi.fn().mockResolvedValue({
+    status: "waiting",
+    amountExpectedCents: 1000,
+    amountReceivedCents: 0,
+    confirmations: 0,
+    confirmationsRequired: 20,
+    credited: false,
+  }),
+  apiFetch: vi.fn(),
+}));
+
+import { CryptoCheckout } from "@/components/billing/crypto-checkout";
+
+describe("CryptoCheckout", () => {
+  it("renders amount selector on mount", async () => {
+    render(<CryptoCheckout />);
+    await waitFor(() => {
+      expect(screen.getByText("$25")).toBeInTheDocument();
+    });
+  });
+
+  it("advances to payment picker after selecting amount", async () => {
+    render(<CryptoCheckout />);
+    await waitFor(() => screen.getByText("$25"));
+    await userEvent.click(screen.getByText("$25"));
+    await userEvent.click(screen.getByRole("button", { name: /continue/i }));
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/deposit-view.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DepositView } from "@/components/billing/deposit-view";
+
+vi.mock("qrcode.react", () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <div data-testid="qr" data-value={value} />,
+}));
+
+const CHECKOUT = {
+  depositAddress: "THwbQb1sPiRUpUYunVQxQKc6i4LCmpP1mj",
+  displayAmount: "32.24 TRX",
+  amountUsd: 10,
+  token: "TRX",
+  chain: "tron",
+  referenceId: "trx:test123",
+};
+
+describe("DepositView", () => {
+  it("shows deposit address and amount", () => {
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    expect(screen.getByText(/32\.24 TRX/)).toBeInTheDocument();
+    expect(screen.getByText(/THwbQb1s/)).toBeInTheDocument();
+  });
+
+  it("shows waiting status", () => {
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    expect(screen.getByText(/waiting for payment/i)).toBeInTheDocument();
+  });
+
+  it("renders QR code", () => {
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    expect(screen.getByTestId("qr")).toBeInTheDocument();
+  });
+
+  it("copies address to clipboard", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+    render(<DepositView checkout={CHECKOUT} status="waiting" onBack={vi.fn()} />);
+    await userEvent.click(screen.getByRole("button", { name: /copy/i }));
+    expect(writeText).toHaveBeenCalledWith(CHECKOUT.depositAddress);
+  });
+});

package/src/__tests__/payment-method-picker.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { PaymentMethodPicker } from "@/components/billing/payment-method-picker";
+import type { SupportedPaymentMethod } from "@/lib/api";
+
+const METHODS: SupportedPaymentMethod[] = [
+  {
+    id: "BTC:mainnet",
+    type: "native",
+    token: "BTC",
+    chain: "bitcoin",
+    displayName: "Bitcoin",
+    decimals: 8,
+    displayOrder: 0,
+    iconUrl: "",
+  },
+  {
+    id: "USDT:tron",
+    type: "erc20",
+    token: "USDT",
+    chain: "tron",
+    displayName: "USDT on Tron",
+    decimals: 6,
+    displayOrder: 1,
+    iconUrl: "",
+  },
+  {
+    id: "ETH:base",
+    type: "native",
+    token: "ETH",
+    chain: "base",
+    displayName: "ETH on Base",
+    decimals: 18,
+    displayOrder: 2,
+    iconUrl: "",
+  },
+  {
+    id: "USDC:polygon",
+    type: "erc20",
+    token: "USDC",
+    chain: "polygon",
+    displayName: "USDC on Polygon",
+    decimals: 6,
+    displayOrder: 3,
+    iconUrl: "",
+  },
+  {
+    id: "DOGE:dogecoin",
+    type: "native",
+    token: "DOGE",
+    chain: "dogecoin",
+    displayName: "Dogecoin",
+    decimals: 8,
+    displayOrder: 4,
+    iconUrl: "",
+  },
+];
+
+describe("PaymentMethodPicker", () => {
+  it("renders all methods", () => {
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
+    expect(screen.getByText("Bitcoin")).toBeInTheDocument();
+    expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
+  });
+
+  it("filters by search text", async () => {
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
+    await userEvent.type(screen.getByPlaceholderText(/search/i), "tron");
+    expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
+    expect(screen.queryByText("Bitcoin")).not.toBeInTheDocument();
+  });
+
+  it("filters by Stablecoins pill", async () => {
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
+    await userEvent.click(screen.getByText("Stablecoins"));
+    expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
+    expect(screen.getByText("USDC on Polygon")).toBeInTheDocument();
+    expect(screen.queryByText("Bitcoin")).not.toBeInTheDocument();
+  });
+
+  it("calls onSelect when a method is clicked", async () => {
+    const onSelect = vi.fn();
+    render(<PaymentMethodPicker methods={METHODS} onSelect={onSelect} />);
+    await userEvent.click(screen.getByText("Bitcoin"));
+    expect(onSelect).toHaveBeenCalledWith(METHODS[0]);
+  });
+});

package/src/app/(dashboard)/billing/credits/page.tsx

@@ -5,9 +5,9 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import { AutoTopupCard } from "@/components/billing/auto-topup-card";
 import { BuyCreditsPanel } from "@/components/billing/buy-credits-panel";
-import { BuyCryptoCreditPanel } from "@/components/billing/buy-crypto-credits-panel";
 import { CouponInput } from "@/components/billing/coupon-input";
 import { CreditBalance } from "@/components/billing/credit-balance";
+import { CryptoCheckout } from "@/components/billing/crypto-checkout";
 import { DividendBanner } from "@/components/billing/dividend-banner";
 import { DividendEligibility } from "@/components/billing/dividend-eligibility";
 import { DividendPoolStats } from "@/components/billing/dividend-pool-stats";
@@ -200,7 +200,7 @@ function CreditsContent() {
 
       <BuyCreditsPanel />
       <CouponInput />
-      <BuyCryptoCreditPanel />
+      <CryptoCheckout />
       <AutoTopupCard />
       <TransactionHistory />
 

package/src/app/admin/products/error.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+
+export default function ProductsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Admin products page error:", error);
+  }, [error]);
+
+  return (
+    <div className="flex h-64 flex-col items-center justify-center gap-4 p-6">
+      <p className="text-sm text-destructive">Failed to load product configuration.</p>
+      <p className="text-xs text-muted-foreground">{error.message}</p>
+      <Button variant="outline" size="sm" onClick={reset}>
+        Try Again
+      </Button>
+    </div>
+  );
+}

package/src/app/admin/products/page.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { BillingForm } from "@/components/admin/products/billing-form";
+import { BrandForm } from "@/components/admin/products/brand-form";
+import { FeaturesForm } from "@/components/admin/products/features-form";
+import { FleetForm } from "@/components/admin/products/fleet-form";
+import { NavEditor } from "@/components/admin/products/nav-editor";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PLATFORM_BASE_URL } from "@/lib/api-config";
+import { toUserMessage } from "@/lib/errors";
+import { getActiveTenantId } from "@/lib/tenant-context";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ProductConfig {
+  product: {
+    id: string;
+    slug: string;
+    brandName: string;
+    productName: string;
+    tagline: string;
+    domain: string;
+    appDomain: string;
+    cookieDomain: string;
+    companyLegal: string;
+    priceLabel: string;
+    defaultImage: string;
+    emailSupport: string;
+    emailPrivacy: string;
+    emailLegal: string;
+    fromEmail: string;
+    homePath: string;
+    storagePrefix: string;
+  };
+  navItems: Array<{
+    id: string;
+    label: string;
+    href: string;
+    icon: string | null;
+    sortOrder: number;
+    requiresRole: string | null;
+    enabled: boolean;
+  }>;
+  features: {
+    chatEnabled: boolean;
+    onboardingEnabled: boolean;
+    onboardingDefaultModel: string | null;
+    onboardingMaxCredits: number;
+    onboardingWelcomeMsg: string | null;
+    sharedModuleBilling: boolean;
+    sharedModuleMonitoring: boolean;
+    sharedModuleAnalytics: boolean;
+  } | null;
+  fleet: {
+    containerImage: string;
+    containerPort: number;
+    lifecycle: string;
+    billingModel: string;
+    maxInstances: number;
+    dockerNetwork: string;
+    placementStrategy: string;
+    fleetDataDir: string;
+  } | null;
+  billing: {
+    stripePublishableKey: string | null;
+    creditPrices: Record<string, number>;
+    affiliateBaseUrl: string | null;
+    affiliateMatchRate: string;
+    affiliateMaxCap: number;
+    dividendRate: string;
+  } | null;
+}
+
+// ---------------------------------------------------------------------------
+// API helpers
+// ---------------------------------------------------------------------------
+
+async function adminFetch(path: string, init?: RequestInit): Promise<Response> {
+  const tenantId = getActiveTenantId();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(tenantId ? { "x-tenant-id": tenantId } : {}),
+  };
+  return fetch(`${PLATFORM_BASE_URL}/trpc/${path}`, {
+    credentials: "include",
+    ...init,
+    headers: { ...headers, ...(init?.headers as Record<string, string> | undefined) },
+  });
+}
+
+async function fetchProductConfig(): Promise<ProductConfig> {
+  const res = await adminFetch("product.admin.get");
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const json = (await res.json()) as { result: { data: ProductConfig } };
+  return json.result.data;
+}
+
+async function mutateProductConfig(endpoint: string, input: unknown): Promise<void> {
+  const res = await adminFetch(`product.admin.${endpoint}`, {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "Unknown error");
+    throw new Error(text || `HTTP ${res.status}`);
+  }
+  const json = (await res.json()) as { error?: { message?: string } };
+  if (json.error) {
+    throw new Error(json.error.message ?? "Mutation failed");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Default values for missing optional sections
+// ---------------------------------------------------------------------------
+
+const DEFAULT_FEATURES: NonNullable<ProductConfig["features"]> = {
+  chatEnabled: false,
+  onboardingEnabled: false,
+  onboardingDefaultModel: null,
+  onboardingMaxCredits: 0,
+  onboardingWelcomeMsg: null,
+  sharedModuleBilling: false,
+  sharedModuleMonitoring: false,
+  sharedModuleAnalytics: false,
+};
+
+const DEFAULT_FLEET: NonNullable<ProductConfig["fleet"]> = {
+  containerImage: "",
+  containerPort: 8080,
+  lifecycle: "managed",
+  billingModel: "none",
+  maxInstances: 10,
+  dockerNetwork: "platform",
+  placementStrategy: "round_robin",
+  fleetDataDir: "/data/fleet",
+};
+
+const DEFAULT_BILLING: NonNullable<ProductConfig["billing"]> = {
+  stripePublishableKey: null,
+  creditPrices: {},
+  affiliateBaseUrl: null,
+  affiliateMatchRate: "0.10",
+  affiliateMaxCap: 0,
+  dividendRate: "0.05",
+};
+
+// ---------------------------------------------------------------------------
+// Page component
+// ---------------------------------------------------------------------------
+
+export default function AdminProductsPage() {
+  const [config, setConfig] = useState<ProductConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const data = await fetchProductConfig();
+      setConfig(data);
+    } catch (err) {
+      setLoadError(toUserMessage(err, "Failed to load product configuration"));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full max-w-sm" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (loadError || !config) {
+    return (
+      <div className="p-6 flex flex-col items-center justify-center gap-4 h-64">
+        <p className="text-sm text-destructive">{loadError ?? "No configuration found."}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold tracking-tight">Product Configuration</h1>
+
+      <Tabs defaultValue="brand">
+        <TabsList className="mb-4">
+          <TabsTrigger value="brand">Brand</TabsTrigger>
+          <TabsTrigger value="navigation">Navigation</TabsTrigger>
+          <TabsTrigger value="features">Features</TabsTrigger>
+          <TabsTrigger value="fleet">Fleet</TabsTrigger>
+          <TabsTrigger value="billing">Billing</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="brand">
+          <BrandForm initial={config.product} onSave={mutateProductConfig} />
+        </TabsContent>
+
+        <TabsContent value="navigation">
+          <NavEditor initial={config.navItems} onSave={mutateProductConfig} />
+        </TabsContent>
+
+        <TabsContent value="features">
+          <FeaturesForm
+            initial={config.features ?? DEFAULT_FEATURES}
+            onSave={mutateProductConfig}
+          />
+        </TabsContent>
+
+        <TabsContent value="fleet">
+          <FleetForm initial={config.fleet ?? DEFAULT_FLEET} onSave={mutateProductConfig} />
+        </TabsContent>
+
+        <TabsContent value="billing">
+          <BillingForm initial={config.billing ?? DEFAULT_BILLING} onSave={mutateProductConfig} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}