amliq-dashboard 2.0.0

package/src/pages/billing/AddProductModal.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Product, ProductType } from '../../types/billing'
+import { getProducts, getSubscriptions, createCheckout } from '../../api/billing'
+import { X } from 'lucide-react'
+
+interface AddProductModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function AddProductModal({ isOpen, onClose }: AddProductModalProps) {
+  const { t } = useTranslation('billing')
+  const [products, setProducts] = useState<Product[]>([])
+  const [subscriptions, setSubscriptions] = useState<any[]>([])
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
+  const [selectedPlanId, setSelectedPlanId] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (isOpen) {
+      Promise.all([getProducts(), getSubscriptions()]).then(([p, s]) => {
+        setProducts(p)
+        setSubscriptions(s)
+        setLoading(false)
+      })
+    }
+  }, [isOpen])
+
+  const availableProducts = products.filter(p => !subscriptions.find(s => s.product === p.type))
+
+  const handleCheckout = async () => {
+    if (!selectedProduct || !selectedPlanId) return
+    const result = await createCheckout(selectedProduct.type, selectedPlanId)
+    window.location.href = result.checkoutUrl
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-md" role="dialog" aria-modal="true" aria-labelledby="add-product-title" onKeyDown={(e) => { if (e.key === 'Escape') onClose() }}>
+      <div className="bg-apple-bg rounded-apple-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-white/10">
+        <div className="flex items-center justify-between p-lg border-b border-white/10">
+          <h2 id="add-product-title" className="sf-headline text-white">{t('add_product')}</h2>
+          <button onClick={onClose} aria-label={t('close')} className="p-md hover:bg-white/10 rounded-apple-md cursor-pointer">
+            <X className="w-5 h-5 text-white" />
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="p-lg text-center">{t('loading')}</div>
+        ) : availableProducts.length === 0 ? (
+          <div className="p-lg text-center sf-body text-apple-label-secondary">{t('invoices.all_subscribed')}</div>
+        ) : (
+          <div className="p-lg space-y-lg">
+            <div className="grid grid-cols-1 gap-md">
+              {availableProducts.map(product => (
+                <button
+                  key={product.type}
+                  onClick={() => { setSelectedProduct(product); setSelectedPlanId(product.plans[0].id) }}
+                  aria-pressed={selectedProduct?.type === product.type}
+                  className={`p-md rounded-apple-lg border transition-colors text-left cursor-pointer ${selectedProduct?.type === product.type ? 'border-apple-blue bg-apple-blue/10' : 'border-white/10 hover:border-white/20'}`}
+                >
+                  <h3 className="sf-body font-medium text-white">{product.name}</h3>
+                  <p className="sf-caption text-apple-label-secondary">{product.tagline}</p>
+                </button>
+              ))}
+            </div>
+
+            {selectedProduct && (
+              <div className="space-y-md">
+                <h3 className="sf-body font-medium text-white">{t('invoices.select_plan')}</h3>
+                <div className="grid grid-cols-1 gap-sm">
+                  {selectedProduct.plans.map(plan => (
+                    <button
+                      key={plan.id}
+                      onClick={() => setSelectedPlanId(plan.id)}
+                      aria-pressed={selectedPlanId === plan.id}
+                      className={`p-sm rounded-apple-md border transition-colors text-left sf-caption cursor-pointer ${selectedPlanId === plan.id ? 'border-apple-blue bg-apple-blue/10' : 'border-white/10 hover:border-white/20'}`}
+                    >
+                      <span className="text-white">{plan.name}</span> - <span className="text-apple-label-secondary">${plan.monthlyPrice}{t('pricing.per_month')}</span>
+                    </button>
+                  ))}
+                </div>
+
+                <button
+                  onClick={handleCheckout}
+                  className="w-full px-lg py-md bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md sf-body font-medium transition-colors cursor-pointer"
+                >
+                  {t('invoices.checkout')}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/BillingPage.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import BillingPage from './BillingPage'
+
+vi.mock('../../api/billing', () => ({
+  getSubscriptions: vi.fn(() => Promise.resolve([])),
+  getInvoices: vi.fn(() => Promise.resolve([])),
+  getSeats: vi.fn(() => Promise.resolve([])),
+  getUsage: vi.fn(() => Promise.resolve(null)),
+  getProducts: vi.fn(() => Promise.resolve([])),
+}))
+
+describe('BillingPage', () => {
+  it('renders page title', () => {
+    render(<BillingPage />)
+    expect(screen.getByText('Billing & Subscriptions')).toBeInTheDocument()
+  })
+
+  it('renders section headings', () => {
+    render(<BillingPage />)
+    expect(screen.getByText('Active Subscriptions')).toBeInTheDocument()
+    expect(screen.getByText('Dashboard Seats')).toBeInTheDocument()
+    expect(screen.getByText('Promo Code')).toBeInTheDocument()
+  })
+
+  it('renders add product button', () => {
+    render(<BillingPage />)
+    expect(screen.getByText('Add Product')).toBeInTheDocument()
+  })
+})

package/src/pages/billing/BillingPage.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Plus } from 'lucide-react'
+import { ActiveSubscriptions } from './ActiveSubscriptions'
+import { ProductUsage } from './ProductUsage'
+import { SeatManager } from './SeatManager'
+import { PromoCodeInput } from './PromoCodeInput'
+import { AddProductModal } from './AddProductModal'
+import UsageHistory from './UsageHistory'
+import InvoiceList from './InvoiceList'
+
+export default function BillingPage() {
+  const { t } = useTranslation('billing')
+  const [modalOpen, setModalOpen] = useState(false)
+
+  return (
+    <div className="min-h-screen bg-apple-bg/50 p-md md:p-lg">
+      <div className="max-w-6xl mx-auto space-y-xl">
+        <div>
+          <h1 className="sf-title text-white">{t('title')}</h1>
+          <p className="sf-body text-apple-label-secondary mt-xs">{t('subtitle')}</p>
+        </div>
+
+        <div className="flex justify-end">
+          <button
+            onClick={() => setModalOpen(true)}
+            className="flex items-center gap-xs px-lg py-md bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md sf-body font-medium transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            {t('add_product')}
+          </button>
+        </div>
+
+        <section className="space-y-md">
+          <h2 className="sf-body font-medium text-white">{t('sections.active_subscriptions')}</h2>
+          <ActiveSubscriptions />
+        </section>
+
+        <section className="space-y-md">
+          <h2 className="sf-body font-medium text-white">{t('sections.dashboard_seats')}</h2>
+          <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg">
+            <SeatManager />
+          </div>
+        </section>
+
+        <section className="space-y-md">
+          <h2 className="sf-body font-medium text-white">{t('sections.promo_code')}</h2>
+          <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg max-w-md">
+            <PromoCodeInput />
+          </div>
+        </section>
+
+        <section className="space-y-md">
+          <h2 className="sf-body font-medium text-white">{t('sections.usage_history')}</h2>
+          <UsageHistory />
+        </section>
+
+        <section className="space-y-md">
+          <h2 className="sf-body font-medium text-white">{t('sections.invoices')}</h2>
+          <InvoiceList />
+        </section>
+
+        <AddProductModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/CurrentPlan.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ExternalLink } from 'lucide-react'
+import { Subscription } from '../../types/billing'
+import { getSubscriptions } from '../../api/billing'
+
+export default function CurrentPlan() {
+  const { t } = useTranslation('billing')
+  const [subscription, setSubscription] = useState<Subscription | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getSubscriptions()
+      .then(subs => setSubscription(Array.isArray(subs) ? subs[0] ?? null : null))
+      .catch(() => setSubscription(null))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading || !subscription) return <div className="animate-pulse h-40 bg-white/5 rounded-xl" />
+
+  const renewalDate = new Date(subscription.currentPeriodEnd).toLocaleDateString()
+
+  return (
+    <div className="bg-white/[0.02] rounded-xl border border-white/[0.06] p-6">
+      <h3 className="text-lg font-semibold text-white mb-4">{t('subscriptions.current_plan')}</h3>
+      <div className="space-y-4">
+        <div>
+          <p className="text-3xl font-bold text-white">{subscription.plan.name}</p>
+          <p className="text-sm text-zinc-400 mt-1">
+            <span className="inline-block px-3 py-1 bg-green-900/30 text-green-300 rounded-full text-xs font-semibold">
+              {subscription.status === 'trialing' ? t('subscriptions.trialing') : t('subscriptions.active')}
+            </span>
+          </p>
+        </div>
+        <div className="text-sm text-zinc-400">
+          <p>{t('subscriptions.renews_on', { date: renewalDate })}</p>
+        </div>
+        <div className="flex flex-col sm:flex-row gap-3 pt-4">
+          <button type="button" className="flex-1 px-4 py-2 bg-apple-blue hover:bg-apple-blue/80 text-white text-sm font-medium rounded-lg transition-colors flex items-center justify-center gap-2 cursor-pointer">
+            <ExternalLink size={16} />
+            {t('subscriptions.manage')}
+          </button>
+          <button type="button" className="flex-1 px-4 py-2 border border-white/10 text-white text-sm font-medium rounded-lg hover:bg-white/5 transition-colors cursor-pointer">
+            {t('subscriptions.change_plan')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/InvoiceList.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Invoice } from '../../types/billing'
+import { getInvoices } from '../../api/billing'
+import { Download } from 'lucide-react'
+
+export default function InvoiceList() {
+  const { t } = useTranslation('billing')
+  const [invoices, setInvoices] = useState<Invoice[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getInvoices()
+      .then(i => setInvoices(i))
+      .catch(() => setInvoices([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) return <div className="sf-body text-apple-label-secondary">{t('invoices.loading')}</div>
+
+  return (
+    <div className="rounded-apple-lg border border-white/10 bg-white/5 overflow-hidden">
+      <div className="px-lg py-md border-b border-white/10">
+        <h3 className="sf-body font-medium text-white">{t('invoices.recent')}</h3>
+      </div>
+
+      {/* Desktop table */}
+      <div className="hidden md:block overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-white/10 bg-white/5">
+              <th className="px-lg py-md text-left text-xs font-medium text-apple-label-secondary uppercase">{t('invoices.date')}</th>
+              <th className="px-lg py-md text-left text-xs font-medium text-apple-label-secondary uppercase">{t('invoices.product')}</th>
+              <th className="px-lg py-md text-left text-xs font-medium text-apple-label-secondary uppercase">{t('invoices.amount')}</th>
+              <th className="px-lg py-md text-left text-xs font-medium text-apple-label-secondary uppercase">{t('invoices.status')}</th>
+              <th className="px-lg py-md text-right text-xs font-medium text-apple-label-secondary uppercase">{t('invoices.action')}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-white/10">
+            {invoices.map(inv => (
+              <tr key={inv.id} className="hover:bg-white/5 transition-colors">
+                <td className="px-lg py-md sf-caption text-apple-label-secondary">{new Date(inv.date).toLocaleDateString()}</td>
+                <td className="px-lg py-md sf-caption text-white capitalize">{inv.product}</td>
+                <td className="px-lg py-md sf-body text-white">${(inv.amountCents / 100).toFixed(2)}</td>
+                <td className="px-lg py-md">
+                  <InvoiceStatusBadge status={inv.status} />
+                </td>
+                <td className="px-lg py-md text-right">
+                  <a href={inv.url} target="_blank" rel="noopener noreferrer"
+                    aria-label={`${t('invoices.download')} ${inv.product}`}
+                    className="inline-flex p-md hover:bg-white/10 rounded-apple-md transition-colors">
+                    <Download className="w-4 h-4 text-apple-blue" />
+                  </a>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile cards */}
+      <div className="md:hidden divide-y divide-white/10">
+        {invoices.map(inv => (
+          <div key={inv.id} className="p-lg">
+            <div className="flex items-center justify-between mb-xs">
+              <span className="sf-body text-white capitalize font-medium">{inv.product}</span>
+              <InvoiceStatusBadge status={inv.status} />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <span className="sf-body text-white font-semibold">${(inv.amountCents / 100).toFixed(2)}</span>
+                <span className="sf-caption text-apple-label-secondary ml-sm">
+                  {new Date(inv.date).toLocaleDateString()}
+                </span>
+              </div>
+              <a href={inv.url} target="_blank" rel="noopener noreferrer"
+                aria-label={`${t('invoices.download')} ${inv.product}`}
+                className="p-sm hover:bg-white/10 rounded-apple-md transition-colors">
+                <Download className="w-4 h-4 text-apple-blue" />
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {invoices.length === 0 && (
+        <p className="text-center py-lg sf-caption text-apple-label-secondary">
+          No invoices yet
+        </p>
+      )}
+    </div>
+  )
+}
+
+function InvoiceStatusBadge({ status }: { status: string }) {
+  const cls = status === 'paid'
+    ? 'bg-green-600/20 text-green-400'
+    : 'bg-yellow-600/20 text-yellow-400'
+  return (
+    <span className={`text-xs px-md py-xs rounded-apple-md font-medium ${cls}`}>
+      {status}
+    </span>
+  )
+}

package/src/pages/billing/InvoiceRow.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Download } from 'lucide-react'
+import { Invoice } from '../../types/billing'
+
+interface InvoiceRowProps {
+  invoice: Invoice
+}
+
+export default function InvoiceRow({ invoice }: InvoiceRowProps) {
+  const date = new Date(invoice.date).toLocaleDateString()
+  const amount = (invoice.amountCents / 100).toFixed(2)
+
+  const statusColor = {
+    paid: 'text-green-400 bg-green-900/20',
+    open: 'text-amber-400 bg-amber-900/20',
+    failed: 'text-red-400 bg-red-900/20'
+  }
+
+  return (
+    <tr className="border-b border-white/[0.06] hover:bg-white/[0.02]">
+      <td className="px-4 py-3 text-sm text-white">{date}</td>
+      <td className="px-4 py-3 text-sm font-medium text-white">
+        ${amount} {invoice.currency}
+      </td>
+      <td className="px-4 py-3">
+        <span className={`text-xs font-semibold px-3 py-1 rounded-full ${statusColor[invoice.status]}`}>
+          {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+        </span>
+      </td>
+      <td className="px-4 py-3 text-right">
+        <button type="button" className="text-blue-400 hover:text-blue-300 transition-colors">
+          <Download size={16} />
+        </button>
+      </td>
+    </tr>
+  )
+}

package/src/pages/billing/LemonSqueezySetup.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Check } from 'lucide-react'
+
+export function LemonSqueezySetup() {
+  const webhookUrl = 'https://api.amliq.finance/webhooks/lemonsqueezy'
+  const lastWebhook = '2026-03-26T14:32:00Z'
+
+  const connectedProducts = ['api', 'dashboard', 'sdk', 'iframe', 'dataset']
+
+  return (
+    <div className="space-y-lg">
+      <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg">
+        <h3 className="sf-body font-medium text-white mb-md">LemonSqueezy Integration Status</h3>
+
+        <div className="space-y-md">
+          <div>
+            <label className="sf-caption text-apple-label-secondary">Webhook URL</label>
+            <div className="mt-xs flex gap-xs">
+              <input
+                type="text"
+                value={webhookUrl}
+                readOnly
+                className="flex-1 px-md py-sm bg-white/5 border border-white/10 rounded-apple-md sf-caption text-apple-label-secondary"
+              />
+              <button className="px-lg py-sm bg-white/10 hover:bg-white/20 text-white rounded-apple-md sf-caption transition-colors">
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label className="sf-caption text-apple-label-secondary">Last Webhook Received</label>
+            <p className="mt-xs sf-body text-white">{new Date(lastWebhook).toLocaleString()}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg">
+        <h3 className="sf-body font-medium text-white mb-md">Connected Products</h3>
+        <div className="space-y-xs">
+          {connectedProducts.map(product => (
+            <div key={product} className="flex items-center gap-md p-sm bg-white/5 rounded-apple-md">
+              <Check className="w-4 h-4 text-green-400" />
+              <span className="sf-caption text-white capitalize">{product}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/PaymentAlert.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertCircle, X } from 'lucide-react'
+
+interface PaymentAlertProps {
+  visible: boolean
+  onDismiss: () => void
+}
+
+export default function PaymentAlert({ visible, onDismiss }: PaymentAlertProps) {
+  const { t } = useTranslation('billing')
+  if (!visible) return null
+
+  return (
+    <div role="alert" className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start justify-between gap-4">
+      <div className="flex items-start gap-3">
+        <AlertCircle size={20} className="text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+        <div>
+          <h3 className="font-semibold text-red-900 dark:text-red-200">{t('payment.failed_title')}</h3>
+          <p className="text-sm text-red-800 dark:text-red-300 mt-1">
+            {t('payment.failed_message')}
+          </p>
+          <button aria-label={t('payment.update_method')} className="text-sm font-semibold text-red-700 dark:text-red-300 hover:text-red-900 dark:hover:text-red-100 mt-2 cursor-pointer">
+            {t('payment.update_method')}
+          </button>
+        </div>
+      </div>
+      <button onClick={onDismiss} aria-label={t('payment.dismiss')} className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 cursor-pointer">
+        <X size={20} />
+      </button>
+    </div>
+  )
+}

package/src/pages/billing/PlanComparison.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Plan } from '../../types/billing'
+import { getProducts } from '../../api/billing'
+import PricingCard from '../marketing/PricingCard'
+
+export default function PlanComparison() {
+  const { t } = useTranslation('billing')
+  const [plans, setPlans] = useState<Plan[]>([])
+  const [loading, setLoading] = useState(true)
+  const [annual, setAnnual] = useState(false)
+
+  useEffect(() => {
+    getProducts().then(products => {
+      const allPlans = products.flatMap(p => p.plans)
+      setPlans(allPlans)
+    }).finally(() => setLoading(false))
+  }, [])
+
+  if (loading) return <div className="animate-pulse h-96 bg-white/5 rounded-xl" />
+
+  return (
+    <div className="bg-white/[0.02] rounded-xl border border-white/[0.06] p-6">
+      <h3 className="text-lg font-semibold text-white mb-2">{t('plan_comparison.title')}</h3>
+      <p className="text-sm text-zinc-400 mb-6">{t('plan_comparison.subtitle')}</p>
+
+      <div className="flex justify-center gap-2 mb-8">
+        <button
+          type="button"
+          onClick={() => setAnnual(false)}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            !annual ? 'bg-white text-black' : 'bg-white/5 text-white'
+          }`}
+        >
+          {t('plan_comparison.monthly')}
+        </button>
+        <button
+          type="button"
+          onClick={() => setAnnual(true)}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            annual ? 'bg-white text-black' : 'bg-white/5 text-white'
+          }`}
+        >
+          {t('plan_comparison.annual')}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {plans.map(plan => <PricingCard key={plan.id} plan={plan} annual={annual} />)}
+      </div>
+    </div>
+  )
+}

package/src/pages/billing/ProductUsage.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ProductType } from '../../types/billing'
+import { getUsage } from '../../api/billing'
+
+interface ProductUsageProps {
+  product: ProductType
+}
+
+export function ProductUsage({ product }: ProductUsageProps) {
+  const { t } = useTranslation('billing')
+  const [usage, setUsage] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getUsage(product)
+      .then(data => setUsage(data))
+      .catch(() => setUsage(null))
+      .finally(() => setLoading(false))
+  }, [product])
+
+  if (loading) return <div className="sf-caption text-apple-label-secondary">{t('usage.loading')}</div>
+  if (!usage) return <div className="sf-caption text-apple-label-secondary">{t('usage.no_data')}</div>
+
+  return (
+    <div className="space-y-md">
+      {(usage.metrics ?? []).map((metric: any) => (
+        <div key={metric.name}>
+          <div className="flex justify-between mb-xs">
+            <span className="sf-body text-white">{metric.name}</span>
+            <span className="sf-caption text-apple-label-secondary">{metric.current}/{metric.limit} {metric.unit}</span>
+          </div>
+          <div className="w-full h-2 bg-white/10 rounded-apple-md overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-apple-blue to-blue-600 transition-all"
+              style={{ width: `${Math.min((metric.current / metric.limit) * 100, 100)}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/pages/billing/PromoCodeInput.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { applyPromoCode } from '../../api/billing'
+import { Check } from 'lucide-react'
+
+export function PromoCodeInput() {
+  const { t } = useTranslation('billing')
+  const [code, setCode] = useState('')
+  const [discount, setDiscount] = useState<{ percent: number; message: string } | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleApply = async () => {
+    if (!code) return
+    setLoading(true)
+    try {
+      const result = await applyPromoCode(code)
+      setDiscount({ percent: result.discountPercent, message: result.message })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-md">
+      <div className="flex gap-xs">
+        <input
+          type="text"
+          value={code}
+          onChange={e => setCode(e.target.value.toUpperCase())}
+          placeholder={t('promo.placeholder')}
+          aria-label={t('promo.placeholder')}
+          className="flex-1 px-md py-sm bg-white/5 border border-white/10 rounded-apple-md sf-body text-white placeholder:text-apple-label-secondary focus:outline-none focus:ring-2 focus:ring-apple-blue focus:border-apple-blue"
+        />
+        <button
+          onClick={handleApply}
+          disabled={!code || loading}
+          className="px-lg py-sm bg-apple-blue hover:bg-apple-blue/80 disabled:opacity-50 text-white rounded-apple-md sf-body font-medium transition-colors cursor-pointer"
+        >
+          {t('promo.apply')}
+        </button>
+      </div>
+
+      {discount && (
+        <div className={`p-md rounded-apple-md flex items-start gap-xs ${discount.percent === 100 ? 'bg-green-600/20' : 'bg-blue-600/20'}`}>
+          <Check className={`w-4 h-4 flex-shrink-0 mt-xs ${discount.percent === 100 ? 'text-green-400' : 'text-blue-400'}`} />
+          <div>
+            <p className={`sf-body font-medium ${discount.percent === 100 ? 'text-green-300' : 'text-blue-300'}`}>
+              {t('promo.discount', { percent: discount.percent })}
+            </p>
+            <p className={`sf-caption ${discount.percent === 100 ? 'text-green-400' : 'text-blue-400'}`}>
+              {discount.message}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}