@allbluecn/web-app 0.3.0

package/src/components/billing/__tests__/seats-manager.test.tsx

@@ -0,0 +1,130 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+const mockUpdateSeatsFn = vi.fn()
+
+vi.mock('@/server/serverFns/billing', () => ({
+  updateSeatsFn: (...args: unknown[]) => mockUpdateSeatsFn(...args),
+}))
+
+const mockUseSubscription = vi.fn()
+
+vi.mock('../subscription-provider', () => ({
+  useSubscription: (...args: unknown[]) => mockUseSubscription(...args),
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}))
+
+vi.mock('@/lib/deploy-region', () => ({
+  isChina: () => false,
+}))
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}))
+
+vi.mock('@tanstack/react-router', () => ({
+  Link: ({
+    children,
+    to,
+  }: {
+    children: React.ReactNode
+    to?: string
+  }) => <a href={to}>{children}</a>,
+}))
+
+import { SeatsManager } from '../seats-manager'
+
+describe('SeatsManager', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('pro 订阅渲染 stepper 与当前用量', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'pro',
+      resources: {
+        seats: { limit: 8, usage: 6 },
+        aiQuotaMonthly: { limit: 1000, usage: 10 },
+      },
+      loading: false,
+    })
+    render(
+      <SeatsManager
+        subscription={{
+          planName: 'pro',
+          status: 'active',
+          seats: 6,
+          addonSeats: 3,
+          currentPeriodStart: null,
+          currentPeriodEnd: null,
+          trialEndsAt: null,
+          features: {},
+          currency: 'usd',
+        } as never}
+        onRefresh={() => {}}
+      />,
+    )
+    expect(screen.getByText(/seatsUsage/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /seatsAdd/ })).toBeInTheDocument()
+  })
+
+  it('free / 无订阅渲染升级 CTA 而非 stepper', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'free',
+      resources: {
+        seats: { limit: 3, usage: 1 },
+        aiQuotaMonthly: { limit: 50, usage: 0 },
+      },
+      loading: false,
+    })
+    render(<SeatsManager subscription={null} onRefresh={() => {}} />)
+    expect(screen.getByText(/seatsUpgradeCta/)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /seatsAdd/ })).not.toBeInTheDocument()
+  })
+
+  it('enterprise 渲染无限席位文案', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'enterprise',
+      resources: {
+        seats: { limit: 'unlimited', usage: 5 },
+        aiQuotaMonthly: { limit: 'unlimited', usage: 0 },
+      },
+      loading: false,
+    })
+    render(
+      <SeatsManager
+        subscription={{
+          planName: 'enterprise',
+          status: 'active',
+          seats: 5,
+          addonSeats: 0,
+          currentPeriodStart: null,
+          currentPeriodEnd: null,
+          trialEndsAt: null,
+          features: {},
+          currency: 'usd',
+        } as never}
+        onRefresh={() => {}}
+      />,
+    )
+    expect(screen.getByText(/seatsUnlimited/)).toBeInTheDocument()
+  })
+})

package/src/components/billing/__tests__/use-feature.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useFeature } from '../use-feature'
+
+vi.mock('../subscription-provider', () => ({
+  useSubscription: vi.fn(),
+}))
+
+vi.mock('@/lib/auth/auth-client', () => ({
+  useSession: vi.fn(),
+}))
+
+import { useSubscription } from '../subscription-provider'
+import { useSession } from '@/lib/auth/auth-client'
+
+const mockUseSubscription = useSubscription as ReturnType<typeof vi.fn>
+const mockUseSession = useSession as ReturnType<typeof vi.fn>
+
+describe('useFeature', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSession.mockReturnValue({ data: null })
+  })
+
+  it('open-source plan 不再全放行——hostedAi 返回 unavailable', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'open-source',
+      features: { byokAi: true, hostedAi: false },
+      unavailable: ['hostedAi'],
+      loading: false,
+    })
+
+    const { result } = renderHook(() => useFeature('hostedAi'))
+    expect(result.current.enabled).toBe(false)
+    expect(result.current.unavailable).toBe(true)
+  })
+
+  it('OSS 白名单内功能放行——byokAi 返回 enabled', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'open-source',
+      features: { byokAi: true },
+      unavailable: [],
+      loading: false,
+    })
+
+    const { result } = renderHook(() => useFeature('byokAi'))
+    expect(result.current.enabled).toBe(true)
+    expect(result.current.unavailable).toBeUndefined()
+  })
+
+  it('unavailable 功能返回 unavailable: true', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'pro',
+      features: { hostedAi: true },
+      unavailable: ['hostedAi'],
+      loading: false,
+    })
+
+    const { result } = renderHook(() => useFeature('hostedAi'))
+    expect(result.current.enabled).toBe(false)
+    expect(result.current.unavailable).toBe(true)
+  })
+
+  it('guest 用户返回 requiresLogin', () => {
+    mockUseSession.mockReturnValue({ data: { user: { id: 'local-guest' } } })
+    mockUseSubscription.mockReturnValue({
+      planName: 'open-source',
+      features: {},
+      unavailable: [],
+      loading: false,
+    })
+
+    const { result } = renderHook(() => useFeature('hostedAi'))
+    expect(result.current.requiresLogin).toBe(true)
+  })
+
+  it('已订阅用户——features 为 true 时放行', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'pro',
+      features: { hostedAi: true },
+      unavailable: [],
+      loading: false,
+    })
+
+    const { result } = renderHook(() => useFeature('hostedAi'))
+    expect(result.current.enabled).toBe(true)
+  })
+
+  it('已订阅用户——features 为 false 时锁定', () => {
+    mockUseSubscription.mockReturnValue({
+      planName: 'free',
+      features: { hostedAi: false },
+      unavailable: [],
+      loading: false,
+    })
+
+    const { result } = renderHook(() => useFeature('hostedAi'))
+    expect(result.current.enabled).toBe(false)
+  })
+})

package/src/components/billing/__tests__/use-resource.test.tsx

@@ -0,0 +1,63 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import type { ResourceSnapshots } from '@allbluecn/shared'
+
+const mockUseSubscription = vi.fn()
+
+vi.mock('../subscription-provider', () => ({
+  useSubscription: (...args: unknown[]) => mockUseSubscription(...args),
+}))
+
+import { useResource } from '../use-resource'
+
+const SNAPSHOTS: ResourceSnapshots = {
+  seats: { limit: 10, usage: 3 },
+  guestSeats: { limit: 20, usage: 5 },
+  aiQuotaMonthly: { limit: 'unlimited', usage: 42 },
+  agentQuota: { limit: 'unlimited', usage: 0 },
+  skillQuota: { limit: 'unlimited', usage: 0 },
+  workspaces: { limit: 1, usage: 0 },
+}
+
+function setup(resources: ResourceSnapshots | null, loading = false) {
+  mockUseSubscription.mockReturnValue({ resources, loading })
+  return renderHook(() => useResource('seats'))
+}
+
+describe('useResource', () => {
+  it('返回 limit/usage/unlimited/loading', () => {
+    mockUseSubscription.mockReturnValue({ resources: SNAPSHOTS, loading: false })
+    const { result } = renderHook(() => useResource('seats'))
+    expect(result.current.limit).toBe(10)
+    expect(result.current.usage).toBe(3)
+    expect(result.current.unlimited).toBe(false)
+    expect(result.current.loading).toBe(false)
+  })
+
+  it('limit 为 unlimited 时 unlimited=true', () => {
+    mockUseSubscription.mockReturnValue({ resources: SNAPSHOTS, loading: false })
+    const { result } = renderHook(() => useResource('aiQuotaMonthly'))
+    expect(result.current.unlimited).toBe(true)
+    expect(result.current.limit).toBe('unlimited')
+  })
+
+  it('resources 未加载（null）时 loading 语义 + 安全默认值', () => {
+    const { result } = setup(null, true)
+    expect(result.current.loading).toBe(true)
+    expect(result.current.unlimited).toBe(false)
+    expect(result.current.canConsume(1)).toBe(false)
+  })
+
+  it('canConsume 判定增量可用性', () => {
+    mockUseSubscription.mockReturnValue({ resources: SNAPSHOTS, loading: false })
+    const { result } = renderHook(() => useResource('seats'))
+    expect(result.current.canConsume(7)).toBe(true)
+    expect(result.current.canConsume(8)).toBe(false)
+  })
+
+  it('unlimited 资源 canConsume 恒 true', () => {
+    mockUseSubscription.mockReturnValue({ resources: SNAPSHOTS, loading: false })
+    const { result } = renderHook(() => useResource('aiQuotaMonthly'))
+    expect(result.current.canConsume(999999)).toBe(true)
+  })
+})

package/src/components/billing/billing-panel.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+import { SubscriptionCard } from './subscription-card'
+import { SeatsManager } from './seats-manager'
+import { InvoiceHistory } from './invoice-history'
+import { redirectToCheckout, redirectToPortal } from './checkout-redirect'
+import { useTranslation } from 'react-i18next'
+import { isChina } from '@/lib/deploy-region'
+
+interface BillingPanelProps {
+  subscription: {
+    planName: string
+    status: string
+    seats: number
+    addonSeats: number
+    currentPeriodStart: Date | null
+    currentPeriodEnd: Date | null
+    trialEndsAt: Date | null
+    features: Record<string, boolean>
+    currency: string
+  } | null
+  invoices: Array<{
+    id: string
+    amountDue: number
+    amountPaid: number
+    currency: string
+    status: string
+    periodStart: Date
+    periodEnd: Date
+    paidAt: Date | null
+  }>
+}
+
+export function BillingPanel({
+  subscription,
+  invoices,
+}: BillingPanelProps) {
+  const { t } = useTranslation('billing')
+  const router = useRouter()
+  const [currency, setCurrency] = useState<'usd' | 'cny'>('usd')
+  const isCn = isChina()
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{t('title')}</h1>
+        {!isCn && (
+          <div className="inline-flex rounded-lg border border-border bg-background p-1">
+            <button
+              onClick={() => setCurrency('usd')}
+              className={`px-3 py-1 text-sm rounded-md ${
+                currency === 'usd'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground'
+              }`}
+            >
+              USD
+            </button>
+            <button
+              onClick={() => setCurrency('cny')}
+              className={`px-3 py-1 text-sm rounded-md ${
+                currency === 'cny'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground'
+              }`}
+            >
+              CNY
+            </button>
+          </div>
+        )}
+      </div>
+
+      <SubscriptionCard subscription={subscription} />
+
+      <SeatsManager
+        subscription={subscription}
+        onRefresh={() => router.invalidate()}
+      />
+
+      <div className="flex gap-2">
+        {!isCn && subscription?.planName === 'free' && (
+          <button
+            onClick={() => redirectToCheckout('pro', currency)}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+          >
+            {t('upgradeToPro')}
+          </button>
+        )}
+        {!isCn && subscription && subscription.planName !== 'free' && (
+          <button
+            onClick={redirectToPortal}
+            className="px-4 py-2 border border-border rounded-lg hover:bg-muted transition-colors"
+          >
+            {t('manageBilling')}
+          </button>
+        )}
+        {isCn && (
+          <span className="px-4 py-2 text-sm text-muted-foreground bg-muted rounded-lg border border-border">
+            {t('comingSoon')}
+          </span>
+        )}
+      </div>
+
+      <InvoiceHistory invoices={invoices} />
+    </div>
+  )
+}

package/src/components/billing/checkout-redirect.ts

@@ -0,0 +1,50 @@
+import {
+  createCheckoutSessionFn,
+  createCustomerPortalSessionFn,
+} from '@/server/serverFns/billing'
+import { toast } from '@/components/ui/sonner'
+import { isChina } from '@/lib/deploy-region'
+import { getClientI18n } from '@/lib/i18n/client'
+
+export async function redirectToCheckout(
+  planId: string,
+  currency: 'usd' | 'cny',
+): Promise<void> {
+  const i18n = getClientI18n()
+
+  if (isChina()) {
+    toast.info(i18n.t('billing:comingSoon'))
+    return
+  }
+
+  try {
+    const { url } = await createCheckoutSessionFn({ data: { planId, currency } })
+    window.location.href = url
+  } catch (error) {
+    toast.error(
+      i18n.t('billing:checkoutCreateFailed', {
+        message: (error as Error).message,
+      }),
+    )
+  }
+}
+
+export async function redirectToPortal(): Promise<void> {
+  const i18n = getClientI18n()
+
+  if (isChina()) {
+    toast.info(i18n.t('billing:comingSoon'))
+    return
+  }
+
+  try {
+    const { url } = await createCustomerPortalSessionFn()
+    window.location.href = url
+  } catch (error) {
+    toast.error(
+      i18n.t('billing:portalOpenFailed', {
+        message: (error as Error).message,
+      }),
+    )
+  }
+}

package/src/components/billing/currency-toggle.tsx

@@ -0,0 +1,67 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useEffect, useState } from 'react'
+import { updatePreferredCurrencyFn } from '@/server/serverFns/billing'
+
+export function CurrencyToggle() {
+  const [currency, setCurrency] = useState<'usd' | 'cny'>('usd')
+
+  useEffect(() => {
+    const saved = localStorage.getItem('preferredCurrency')
+    if (saved === 'usd' || saved === 'cny') {
+      setCurrency(saved)
+    }
+  }, [])
+
+  const toggleCurrency = async (next: 'usd' | 'cny') => {
+    setCurrency(next)
+    localStorage.setItem('preferredCurrency', next)
+    try {
+      await updatePreferredCurrencyFn({ data: { currency: next } })
+    } catch {
+      // 未登录用户忽略
+    }
+  }
+
+  return (
+    <div className="inline-flex rounded-lg border border-border bg-background p-1">
+      <button
+        type="button"
+        onClick={() => toggleCurrency('usd')}
+        className={`px-3 py-1 text-sm rounded-md transition-colors ${
+          currency === 'usd'
+            ? 'bg-primary text-primary-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        USD
+      </button>
+      <button
+        type="button"
+        onClick={() => toggleCurrency('cny')}
+        className={`px-3 py-1 text-sm rounded-md transition-colors ${
+          currency === 'cny'
+            ? 'bg-primary text-primary-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        CNY
+      </button>
+    </div>
+  )
+}

package/src/components/billing/feature-gate.tsx

@@ -0,0 +1,70 @@
+import { useState, type ReactElement } from 'react'
+import { useFeature } from './use-feature'
+import { UpgradePrompt } from './upgrade-prompt'
+import { LoginPromptDialog } from './login-prompt-dialog'
+import { useTranslation } from 'react-i18next'
+import { type FeatureKey } from '@allbluecn/shared'
+
+interface FeatureGateProps {
+  feature: FeatureKey
+  mode?: 'replace' | 'disable'
+  fallback?: React.ReactNode
+  children: React.ReactNode
+}
+
+export function FeatureGate({
+  feature,
+  mode = 'replace',
+  fallback,
+  children,
+}: FeatureGateProps): ReactElement {
+  const { t } = useTranslation('billing')
+  const { enabled, loading, requiresLogin, unavailable } = useFeature(feature)
+  const [loginOpen, setLoginOpen] = useState(false)
+
+  if (loading) {
+    return <>{children}</>
+  }
+
+  if (enabled) {
+    return (
+      <>
+        {children}
+        <LoginPromptDialog open={loginOpen} onOpenChange={setLoginOpen} feature={feature} />
+      </>
+    )
+  }
+
+  if (unavailable) {
+    return <>{fallback ?? null}</>
+  }
+
+  if (requiresLogin) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center gap-3 p-6 text-center">
+          <p className="text-sm text-muted-foreground">{t('requiresLogin')}</p>
+          <UpgradePrompt feature={feature} />
+        </div>
+        <LoginPromptDialog open={loginOpen} onOpenChange={setLoginOpen} feature={feature} />
+      </>
+    )
+  }
+
+  if (mode === 'disable') {
+    return (
+      <div
+        style={{
+          pointerEvents: 'none',
+          opacity: 0.5,
+          position: 'relative',
+        }}
+      >
+        {children}
+        <UpgradePrompt feature={feature} />
+      </div>
+    )
+  }
+
+  return <UpgradePrompt feature={feature} />
+}

package/src/components/billing/invoice-history.tsx

@@ -0,0 +1,85 @@
+import { format } from 'date-fns'
+import { useTranslation } from 'react-i18next'
+
+interface InvoiceHistoryProps {
+  invoices: Array<{
+    id: string
+    amountDue: number
+    amountPaid: number
+    currency: string
+    status: string
+    periodStart: Date
+    periodEnd: Date
+    paidAt: Date | null
+    pdfUrl?: string | null
+    hostedInvoiceUrl?: string | null
+  }>
+}
+
+export function InvoiceHistory({
+  invoices,
+}: InvoiceHistoryProps) {
+  const { t } = useTranslation('billing')
+
+  if (invoices.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        <p>{t('noInvoices')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">{t('invoiceHistory')}</h3>
+      <div className="rounded-lg border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50">
+              <th className="text-left px-4 py-2 font-medium">{t('date')}</th>
+              <th className="text-right px-4 py-2 font-medium">{t('amount')}</th>
+              <th className="text-center px-4 py-2 font-medium">{t('status')}</th>
+              <th className="text-right px-4 py-2 font-medium">{t('action')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {invoices.map((inv) => (
+              <tr key={inv.id} className="border-t border-border">
+                <td className="px-4 py-2">
+                  {format(inv.periodStart, 'yyyy-MM-dd')}
+                </td>
+                <td className="px-4 py-2 text-right">
+                  {inv.currency === 'usd' ? '$' : '¥'}
+                  {(inv.amountDue / 100).toFixed(2)}
+                </td>
+                <td className="px-4 py-2 text-center">
+                  <span
+                    className={`inline-block px-2 py-0.5 rounded text-xs ${
+                      inv.status === 'paid'
+                        ? 'bg-green-100 text-green-700'
+                        : 'bg-yellow-100 text-yellow-700'
+                    }`}
+                  >
+                    {inv.status === 'paid' ? t('paid') : t('unpaid')}
+                  </span>
+                </td>
+                <td className="px-4 py-2 text-right">
+                  {inv.hostedInvoiceUrl && (
+                    <a
+                      href={inv.hostedInvoiceUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline"
+                    >
+                      {t('view')}
+                    </a>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}