agent-relay 2.0.21 → 2.0.23

package/packages/dashboard/ui/react-components/BillingPanel.tsx

@@ -1,922 +0,0 @@
-/**
- * Billing Panel Component
- *
- * Shows current subscription status, usage, and billing management options.
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { PricingPlans, type Plan } from './PricingPlans';
-
-export interface Subscription {
-  id: string;
-  tier: string;
-  status: string;
-  currentPeriodStart: Date;
-  currentPeriodEnd: Date;
-  cancelAtPeriodEnd: boolean;
-  billingInterval: 'month' | 'year';
-}
-
-export interface Invoice {
-  id: string;
-  amountDue: number;
-  amountPaid: number;
-  status: string;
-  invoicePdf?: string;
-  hostedInvoiceUrl?: string;
-  periodStart: Date;
-  periodEnd: Date;
-  createdAt: Date;
-}
-
-export interface PaymentMethod {
-  id: string;
-  type: string;
-  isDefault: boolean;
-  card?: {
-    brand: string;
-    last4: string;
-    expMonth: number;
-    expYear: number;
-  };
-}
-
-export interface BillingPanelProps {
-  apiUrl?: string;
-  onClose?: () => void;
-}
-
-export function BillingPanel({ apiUrl = '/api/billing', onClose }: BillingPanelProps) {
-  const [activeTab, setActiveTab] = useState<'overview' | 'plans' | 'invoices'>('overview');
-  const [subscription, setSubscription] = useState<Subscription | null>(null);
-  const [plans, setPlans] = useState<Plan[]>([]);
-  const [invoices, setInvoices] = useState<Invoice[]>([]);
-  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch billing data
-  const fetchBillingData = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // Fetch plans
-      const plansResponse = await fetch(`${apiUrl}/plans`);
-      const plansData = await plansResponse.json();
-      setPlans(plansData.plans);
-
-      // Fetch subscription
-      const subResponse = await fetch(`${apiUrl}/subscription`);
-      const subData = await subResponse.json();
-      if (subData.subscription) {
-        setSubscription({
-          ...subData.subscription,
-          currentPeriodStart: new Date(subData.subscription.currentPeriodStart),
-          currentPeriodEnd: new Date(subData.subscription.currentPeriodEnd),
-        });
-      }
-      if (subData.customer?.paymentMethods) {
-        setPaymentMethods(subData.customer.paymentMethods);
-      }
-      if (subData.customer?.invoices) {
-        setInvoices(
-          subData.customer.invoices.map((inv: Invoice) => ({
-            ...inv,
-            periodStart: new Date(inv.periodStart),
-            periodEnd: new Date(inv.periodEnd),
-            createdAt: new Date(inv.createdAt),
-          }))
-        );
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load billing data');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [apiUrl]);
-
-  useEffect(() => {
-    fetchBillingData();
-  }, [fetchBillingData]);
-
-  // Handle plan selection
-  const handleSelectPlan = async (planId: string, interval: 'month' | 'year') => {
-    if (planId === 'enterprise') {
-      // Redirect to contact sales
-      window.open('mailto:sales@agent-relay.com?subject=Enterprise%20Plan%20Inquiry', '_blank');
-      return;
-    }
-
-    setIsProcessing(true);
-    setError(null);
-
-    try {
-      // Check if upgrading or changing plan
-      if (subscription && planId !== 'free') {
-        // Change existing subscription
-        const response = await fetch(`${apiUrl}/change`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ tier: planId, interval }),
-        });
-
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || 'Failed to change subscription');
-        }
-
-        await fetchBillingData();
-      } else if (planId === 'free' && subscription) {
-        // Cancel subscription
-        const response = await fetch(`${apiUrl}/cancel`, {
-          method: 'POST',
-        });
-
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || 'Failed to cancel subscription');
-        }
-
-        await fetchBillingData();
-      } else {
-        // Create new subscription via checkout
-        const response = await fetch(`${apiUrl}/checkout`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ tier: planId, interval }),
-        });
-
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || 'Failed to create checkout session');
-        }
-
-        const { url } = await response.json();
-        window.location.href = url;
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  // Handle resume subscription
-  const handleResumeSubscription = async () => {
-    setIsProcessing(true);
-    setError(null);
-
-    try {
-      const response = await fetch(`${apiUrl}/resume`, {
-        method: 'POST',
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to resume subscription');
-      }
-
-      await fetchBillingData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  // Handle open billing portal
-  const handleOpenPortal = async () => {
-    setIsProcessing(true);
-    setError(null);
-
-    try {
-      const response = await fetch(`${apiUrl}/portal`, {
-        method: 'POST',
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Failed to open billing portal');
-      }
-
-      const { url } = await response.json();
-      window.open(url, '_blank');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  const currentTier = subscription?.tier || 'free';
-  const currentPlan = plans.find((p) => p.id === currentTier);
-
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const formatAmount = (cents: number) => {
-    return `$${(cents / 100).toFixed(2)}`;
-  };
-
-  if (isLoading) {
-    return (
-      <div className="billing-panel">
-        <div className="billing-loading">
-          <LoadingSpinner />
-          <p>Loading billing information...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="billing-panel">
-      {/* Header */}
-      <div className="billing-header">
-        <h2>Billing & Subscription</h2>
-        {onClose && (
-          <button className="billing-close" onClick={onClose}>
-            <CloseIcon />
-          </button>
-        )}
-      </div>
-
-      {/* Error */}
-      {error && (
-        <div className="billing-error">
-          <span>{error}</span>
-          <button onClick={() => setError(null)}>&times;</button>
-        </div>
-      )}
-
-      {/* Tabs */}
-      <div className="billing-tabs">
-        <button
-          className={`billing-tab ${activeTab === 'overview' ? 'active' : ''}`}
-          onClick={() => setActiveTab('overview')}
-        >
-          Overview
-        </button>
-        <button
-          className={`billing-tab ${activeTab === 'plans' ? 'active' : ''}`}
-          onClick={() => setActiveTab('plans')}
-        >
-          Plans
-        </button>
-        <button
-          className={`billing-tab ${activeTab === 'invoices' ? 'active' : ''}`}
-          onClick={() => setActiveTab('invoices')}
-        >
-          Invoices
-        </button>
-      </div>
-
-      {/* Tab Content */}
-      <div className="billing-content">
-        {activeTab === 'overview' && (
-          <div className="billing-overview">
-            {/* Current Plan */}
-            <div className="overview-section">
-              <h3>Current Plan</h3>
-              <div className="current-plan-card">
-                <div className="plan-info">
-                  <span className="plan-name">{currentPlan?.name || 'Free'}</span>
-                  <span className="plan-tier-badge">{currentTier}</span>
-                </div>
-                {subscription && (
-                  <div className="plan-details">
-                    <p>
-                      <strong>Status:</strong>{' '}
-                      <span className={`status-${subscription.status}`}>
-                        {subscription.status}
-                      </span>
-                    </p>
-                    <p>
-                      <strong>Billing:</strong> {subscription.billingInterval === 'year' ? 'Annual' : 'Monthly'}
-                    </p>
-                    <p>
-                      <strong>Current Period:</strong>{' '}
-                      {formatDate(subscription.currentPeriodStart)} - {formatDate(subscription.currentPeriodEnd)}
-                    </p>
-                    {subscription.cancelAtPeriodEnd && (
-                      <div className="cancel-notice">
-                        <p>Your subscription will be canceled on {formatDate(subscription.currentPeriodEnd)}</p>
-                        <button
-                          className="btn-resume"
-                          onClick={handleResumeSubscription}
-                          disabled={isProcessing}
-                        >
-                          {isProcessing ? 'Processing...' : 'Resume Subscription'}
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                )}
-                {!subscription && (
-                  <p className="free-notice">
-                    You're on the free plan. Upgrade to unlock more features!
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* Usage */}
-            {currentPlan && (
-              <div className="overview-section">
-                <h3>Usage & Limits</h3>
-                <div className="usage-grid">
-                  <UsageItem
-                    label="Workspaces"
-                    current={0}
-                    limit={currentPlan.limits.maxWorkspaces}
-                  />
-                  <UsageItem
-                    label="Agents per Workspace"
-                    current={0}
-                    limit={currentPlan.limits.maxAgentsPerWorkspace}
-                  />
-                  <UsageItem
-                    label="Team Members"
-                    current={1}
-                    limit={currentPlan.limits.maxTeamMembers}
-                  />
-                  <UsageItem
-                    label="Storage"
-                    current={0}
-                    limit={currentPlan.limits.maxStorageGB}
-                    unit="GB"
-                  />
-                  <UsageItem
-                    label="Compute Hours"
-                    current={0}
-                    limit={currentPlan.limits.maxComputeHoursPerMonth}
-                    unit="hrs/mo"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Payment Method */}
-            {paymentMethods.length > 0 && (
-              <div className="overview-section">
-                <h3>Payment Method</h3>
-                <div className="payment-methods">
-                  {paymentMethods.map((pm) => (
-                    <div key={pm.id} className={`payment-method ${pm.isDefault ? 'default' : ''}`}>
-                      {pm.card && (
-                        <>
-                          <CardIcon brand={pm.card.brand} />
-                          <span className="card-info">
-                            {pm.card.brand.charAt(0).toUpperCase() + pm.card.brand.slice(1)} •••• {pm.card.last4}
-                          </span>
-                          <span className="card-expiry">
-                            Expires {pm.card.expMonth}/{pm.card.expYear}
-                          </span>
-                          {pm.isDefault && <span className="default-badge">Default</span>}
-                        </>
-                      )}
-                    </div>
-                  ))}
-                </div>
-                <button className="btn-manage-billing" onClick={handleOpenPortal} disabled={isProcessing}>
-                  {isProcessing ? 'Opening...' : 'Manage Payment Methods'}
-                </button>
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === 'plans' && (
-          <PricingPlans
-            plans={plans}
-            currentPlan={currentTier}
-            onSelectPlan={handleSelectPlan}
-            isLoading={isProcessing}
-          />
-        )}
-
-        {activeTab === 'invoices' && (
-          <div className="billing-invoices">
-            {invoices.length === 0 ? (
-              <div className="no-invoices">
-                <p>No invoices yet</p>
-              </div>
-            ) : (
-              <table className="invoices-table">
-                <thead>
-                  <tr>
-                    <th>Date</th>
-                    <th>Period</th>
-                    <th>Amount</th>
-                    <th>Status</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {invoices.map((invoice) => (
-                    <tr key={invoice.id}>
-                      <td>{formatDate(invoice.createdAt)}</td>
-                      <td>
-                        {formatDate(invoice.periodStart)} - {formatDate(invoice.periodEnd)}
-                      </td>
-                      <td>{formatAmount(invoice.amountPaid || invoice.amountDue)}</td>
-                      <td>
-                        <span className={`invoice-status status-${invoice.status}`}>
-                          {invoice.status}
-                        </span>
-                      </td>
-                      <td>
-                        {invoice.invoicePdf && (
-                          <a href={invoice.invoicePdf} target="_blank" rel="noopener noreferrer">
-                            PDF
-                          </a>
-                        )}
-                        {invoice.hostedInvoiceUrl && (
-                          <a href={invoice.hostedInvoiceUrl} target="_blank" rel="noopener noreferrer">
-                            View
-                          </a>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// Helper components
-function UsageItem({
-  label,
-  current,
-  limit,
-  unit,
-}: {
-  label: string;
-  current: number;
-  limit: number;
-  unit?: string;
-}) {
-  const isUnlimited = limit === -1;
-  const percentage = isUnlimited ? 0 : (current / limit) * 100;
-
-  return (
-    <div className="usage-item">
-      <div className="usage-header">
-        <span className="usage-label">{label}</span>
-        <span className="usage-value">
-          {current}{unit ? ` ${unit}` : ''} / {isUnlimited ? 'Unlimited' : `${limit}${unit ? ` ${unit}` : ''}`}
-        </span>
-      </div>
-      <div className="usage-bar">
-        <div
-          className={`usage-fill ${percentage > 80 ? 'warning' : ''} ${percentage > 95 ? 'critical' : ''}`}
-          style={{ width: `${Math.min(percentage, 100)}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
-function CardIcon({ brand }: { brand: string }) {
-  return (
-    <svg width="32" height="24" viewBox="0 0 32 24" fill="none" className="card-icon">
-      <rect width="32" height="24" rx="4" fill="#2a2a3e" />
-      <text x="16" y="14" textAnchor="middle" fill="#8d8d8e" fontSize="8">
-        {brand.toUpperCase()}
-      </text>
-    </svg>
-  );
-}
-
-function LoadingSpinner() {
-  return (
-    <svg className="spinner" width="24" height="24" viewBox="0 0 24 24">
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="2"
-        fill="none"
-        strokeDasharray="32"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
-export const billingPanelStyles = `
-.billing-panel {
-  background: #1a1a2e;
-  border: 1px solid #2a2a3e;
-  border-radius: 12px;
-  max-width: 1000px;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-.billing-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #2a2a3e;
-}
-
-.billing-header h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #e8e8e8;
-}
-
-.billing-close {
-  background: transparent;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.billing-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #e8e8e8;
-}
-
-.billing-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 24px;
-  color: #8d8d8e;
-}
-
-.billing-loading .spinner {
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
-  color: #00c896;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.billing-error {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 24px;
-  background: rgba(239, 68, 68, 0.1);
-  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
-  color: #ef4444;
-  font-size: 14px;
-}
-
-.billing-error button {
-  background: none;
-  border: none;
-  color: #ef4444;
-  cursor: pointer;
-  font-size: 18px;
-}
-
-.billing-tabs {
-  display: flex;
-  border-bottom: 1px solid #2a2a3e;
-}
-
-.billing-tab {
-  flex: 1;
-  padding: 14px 20px;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: #8d8d8e;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.billing-tab:hover {
-  color: #e8e8e8;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.billing-tab.active {
-  color: #00c896;
-  border-bottom-color: #00c896;
-}
-
-.billing-content {
-  padding: 24px;
-}
-
-.billing-overview {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-
-.overview-section h3 {
-  margin: 0 0 16px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #e8e8e8;
-}
-
-.current-plan-card {
-  background: #222234;
-  border: 1px solid #2a2a3e;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.plan-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.plan-info .plan-name {
-  font-size: 20px;
-  font-weight: 600;
-  color: #e8e8e8;
-}
-
-.plan-tier-badge {
-  padding: 4px 10px;
-  background: #00c896;
-  color: #1a1a2e;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-.plan-details p {
-  margin: 8px 0;
-  font-size: 14px;
-  color: #b8b8b8;
-}
-
-.plan-details strong {
-  color: #e8e8e8;
-}
-
-.status-active { color: #00c896; }
-.status-past_due { color: #f59e0b; }
-.status-canceled { color: #ef4444; }
-.status-trialing { color: #3b82f6; }
-
-.cancel-notice {
-  margin-top: 16px;
-  padding: 12px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 6px;
-}
-
-.cancel-notice p {
-  color: #ef4444;
-  margin-bottom: 12px;
-}
-
-.btn-resume {
-  padding: 8px 16px;
-  background: #00c896;
-  color: #1a1a2e;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-resume:hover:not(:disabled) {
-  background: #00a87d;
-}
-
-.btn-resume:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.free-notice {
-  color: #8d8d8e;
-  font-size: 14px;
-}
-
-.usage-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.usage-item {
-  background: #222234;
-  border: 1px solid #2a2a3e;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.usage-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.usage-label {
-  font-size: 13px;
-  color: #8d8d8e;
-}
-
-.usage-value {
-  font-size: 13px;
-  color: #e8e8e8;
-  font-weight: 500;
-}
-
-.usage-bar {
-  height: 6px;
-  background: #2a2a3e;
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.usage-fill {
-  height: 100%;
-  background: #00c896;
-  border-radius: 3px;
-  transition: width 0.3s;
-}
-
-.usage-fill.warning {
-  background: #f59e0b;
-}
-
-.usage-fill.critical {
-  background: #ef4444;
-}
-
-.payment-methods {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.payment-method {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: #222234;
-  border: 1px solid #2a2a3e;
-  border-radius: 8px;
-}
-
-.payment-method.default {
-  border-color: #00c896;
-}
-
-.card-icon {
-  flex-shrink: 0;
-}
-
-.card-info {
-  font-size: 14px;
-  color: #e8e8e8;
-}
-
-.card-expiry {
-  font-size: 12px;
-  color: #8d8d8e;
-  margin-left: auto;
-}
-
-.default-badge {
-  padding: 2px 8px;
-  background: #00c896;
-  color: #1a1a2e;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.btn-manage-billing {
-  padding: 10px 16px;
-  background: transparent;
-  border: 1px solid #3a3a4e;
-  border-radius: 6px;
-  color: #e8e8e8;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-manage-billing:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: #4a4a5e;
-}
-
-.btn-manage-billing:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.billing-invoices {
-  min-height: 200px;
-}
-
-.no-invoices {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 60px;
-  color: #8d8d8e;
-}
-
-.invoices-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.invoices-table th,
-.invoices-table td {
-  padding: 12px 16px;
-  text-align: left;
-  border-bottom: 1px solid #2a2a3e;
-}
-
-.invoices-table th {
-  font-size: 12px;
-  font-weight: 500;
-  color: #8d8d8e;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.invoices-table td {
-  font-size: 14px;
-  color: #e8e8e8;
-}
-
-.invoice-status {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  text-transform: capitalize;
-}
-
-.invoice-status.status-paid {
-  background: rgba(0, 200, 150, 0.1);
-  color: #00c896;
-}
-
-.invoice-status.status-open {
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-}
-
-.invoice-status.status-void {
-  background: rgba(107, 114, 128, 0.1);
-  color: #6b7280;
-}
-
-.invoices-table a {
-  color: #00c896;
-  text-decoration: none;
-  margin-right: 12px;
-}
-
-.invoices-table a:hover {
-  text-decoration: underline;
-}
-`;