@umituz/web-payment 0.0.0-stage → 1.0.1

package/src/presentation/portal/components/BillingPortal.tsx

@@ -0,0 +1,248 @@
+
+import { CreditCard, FileText, BarChart3, Settings, AlertCircle } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { VisualTokens } from '../../theme/visual-tokens';
+import type { BillingPortalProps, BillingTabId } from '../types';
+import { BillingLabelsProvider, useBillingLabels } from '../labels';
+import { PaymentMethodsList } from './PaymentMethodsList';
+import { InvoiceCard } from './InvoiceCard';
+import { PlanTab } from './PlanTab';
+import { OverviewTab } from './OverviewTab';
+import { PortalSpinner } from './PortalSpinner';
+import { stack, visuallyHidden } from '../styles';
+
+const TABS: ReadonlyArray<{ id: BillingTabId; labelKey: 'overview' | 'paymentMethods' | 'invoices' | 'plan'; icon: LucideIcon }> = [
+  { id: 'overview', labelKey: 'overview', icon: BarChart3 },
+  { id: 'payment-methods', labelKey: 'paymentMethods', icon: CreditCard },
+  { id: 'invoices', labelKey: 'invoices', icon: FileText },
+  { id: 'plan', labelKey: 'plan', icon: Settings },
+];
+
+export const BillingPortal = ({
+  billing,
+  loading = false,
+  error,
+  showTabs = true,
+  activeTab = 'overview',
+  locale = 'en-US',
+  onTabChange,
+  onAddPaymentMethod,
+  onSetDefaultPaymentMethod,
+  onRemovePaymentMethod,
+  onViewInvoice,
+  onChangePlan,
+  onCancelSubscription,
+  labels,
+}: BillingPortalProps) => {
+  return (
+    <BillingLabelsProvider labels={labels}>
+      <BillingPortalBody
+        billing={billing}
+        loading={loading}
+        error={error}
+        showTabs={showTabs}
+        activeTab={activeTab}
+        locale={locale}
+        onTabChange={onTabChange}
+        onAddPaymentMethod={onAddPaymentMethod}
+        onSetDefaultPaymentMethod={onSetDefaultPaymentMethod}
+        onRemovePaymentMethod={onRemovePaymentMethod}
+        onViewInvoice={onViewInvoice}
+        onChangePlan={onChangePlan}
+        onCancelSubscription={onCancelSubscription}
+      />
+    </BillingLabelsProvider>
+  );
+};
+
+const BillingPortalBody = ({
+  billing,
+  loading = false,
+  error,
+  showTabs = true,
+  activeTab = 'overview',
+  locale = 'en-US',
+  onTabChange,
+  onAddPaymentMethod,
+  onSetDefaultPaymentMethod,
+  onRemovePaymentMethod,
+  onViewInvoice,
+  onChangePlan,
+  onCancelSubscription,
+}: Omit<BillingPortalProps, 'labels'>) => {
+  const labels = useBillingLabels();
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: `${VisualTokens.spacing.page * 3}px 0`,
+          color: VisualTokens.color.textMuted,
+        }}
+        role="status"
+        aria-live="polite"
+      >
+        <PortalSpinner size={48} />
+        <span style={visuallyHidden}>{labels.common.loading}</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: VisualTokens.spacing.xl,
+          padding: `${VisualTokens.spacing.page * 3}px 0`,
+          color: VisualTokens.color.brandDangerText,
+        }}
+        role="alert"
+      >
+        <AlertCircle size={24} aria-hidden="true" />
+        <p style={{ margin: 0 }}>{error}</p>
+      </div>
+    );
+  }
+
+  if (!billing) return null;
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'overview':
+        return <OverviewTab billing={billing} locale={locale} />;
+      case 'payment-methods':
+        return (
+          <PaymentMethodsList
+            paymentMethods={billing.paymentMethods}
+            onAddNew={onAddPaymentMethod}
+            onSetDefault={onSetDefaultPaymentMethod}
+            onRemove={onRemovePaymentMethod}
+          />
+        );
+      case 'invoices':
+        return (
+          <InvoiceList invoices={billing.recentInvoices} onView={onViewInvoice} locale={locale} />
+        );
+      case 'plan':
+        return (
+          <PlanTab
+            subscription={billing.subscription}
+            onChangePlan={onChangePlan}
+            onCancelSubscription={onCancelSubscription}
+            locale={locale}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      {showTabs && (
+        <div
+          style={{ borderBottom: `1px solid ${VisualTokens.color.borderSubtle}`, marginBottom: VisualTokens.spacing.section }}
+          role="tablist"
+          aria-orientation="horizontal"
+        >
+          <div style={{ display: 'flex', gap: VisualTokens.spacing.section }}>
+            {TABS.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = activeTab === tab.id;
+              return (
+                <button
+                  key={tab.id}
+                  id={`billing-tab-${tab.id}`}
+                  role="tab"
+                  type="button"
+                  aria-selected={isActive}
+                  aria-controls="billing-tab-panel"
+                  tabIndex={isActive ? 0 : -1}
+                  onClick={() => onTabChange?.(tab.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                      e.preventDefault();
+                      const idx = TABS.findIndex((tt) => tt.id === activeTab);
+                      const nextIdx =
+                        e.key === 'ArrowRight'
+                          ? (idx + 1) % TABS.length
+                          : (idx - 1 + TABS.length) % TABS.length;
+                      onTabChange?.(TABS[nextIdx].id);
+                    }
+                  }}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: VisualTokens.spacing.sm,
+                    paddingBottom: VisualTokens.spacing.section,
+                    border: 'none',
+                    borderBottom: `2px solid ${isActive ? VisualTokens.color.brandPrimary : 'transparent'}`,
+                    background: 'transparent',
+                    fontSize: VisualTokens.fontSize.body,
+                    fontWeight: isActive ? VisualTokens.fontWeight.medium : VisualTokens.fontWeight.regular,
+                    color: isActive ? VisualTokens.color.textPrimary : VisualTokens.color.textMuted,
+                    cursor: 'pointer',
+                  }}
+                >
+                  <Icon size={16} aria-hidden="true" />
+                  <span>{labels.tabs[tab.labelKey]}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div
+        id="billing-tab-panel"
+        role="tabpanel"
+        aria-labelledby={`billing-tab-${activeTab}`}
+      >
+        {renderContent()}
+      </div>
+    </div>
+  );
+};
+
+const InvoiceList = ({
+  invoices,
+  onView,
+  locale,
+}: {
+  invoices: NonNullable<BillingPortalProps['billing']>['recentInvoices'];
+  onView?: (invoice: NonNullable<BillingPortalProps['billing']>['recentInvoices'][number]) => void;
+  locale: string;
+}) => {
+  const labels = useBillingLabels();
+
+  if (invoices.length === 0) {
+    return (
+      <div
+        style={{
+          textAlign: 'center',
+          padding: `${VisualTokens.spacing.page * 1.5}px 0`,
+          color: VisualTokens.color.textMuted,
+        }}
+      >
+        <FileText size={48} style={{ opacity: 0.5, marginBottom: VisualTokens.spacing.xl }} aria-hidden="true" />
+        <p style={{ margin: 0 }}>{labels.invoices.empty}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={stack}>
+      {invoices.map((invoice) => (
+        <InvoiceCard key={invoice.id} invoice={invoice} onClick={onView} locale={locale} />
+      ))}
+    </div>
+  );
+};
+
+export default BillingPortal;

package/src/presentation/portal/components/InvoiceCard.tsx

@@ -0,0 +1,275 @@
+
+import { FileText, Download, ExternalLink } from 'lucide-react';
+import type { KeyboardEvent } from 'react';
+import { VisualTokens, TONE_PAIRS } from '../../theme/visual-tokens';
+import { useBillingLabels } from '../labels';
+import type { InvoiceCardProps } from '../types';
+import { cardInteractive, mutedText, row } from '../styles';
+import {
+  formatPrice,
+  formatNumber,
+  getInvoiceStatusTone,
+} from '../utils/billing';
+
+const DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
+
+const openExternal = (url: string) => {
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+export const InvoiceCard = ({
+  invoice,
+  compact = false,
+  locale = 'en-US',
+  onClick,
+  onDownload,
+}: InvoiceCardProps) => {
+  const labels = useBillingLabels();
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick?.(invoice);
+    }
+  };
+
+  const statusTone = getInvoiceStatusTone(invoice.status);
+
+  const iconBox = {
+    width: compact ? 40 : 48,
+    height: compact ? 40 : 48,
+    borderRadius: VisualTokens.radius.md,
+    background: VisualTokens.color.surfaceMuted,
+    display: 'flex' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    color: VisualTokens.color.textMuted,
+    flexShrink: 0,
+  };
+
+  if (compact) {
+    return (
+      <div
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        aria-label={onClick ? `Invoice ${invoice.number}` : undefined}
+        onClick={onClick ? () => onClick(invoice) : undefined}
+        onKeyDown={onClick ? handleKeyDown : undefined}
+        style={{ ...cardInteractive, ...row, justifyContent: 'space-between', padding: VisualTokens.spacing.xl }}
+      >
+        <div style={{ ...row, gap: VisualTokens.spacing.lg }}>
+          <div style={iconBox}>
+            <FileText size={20} />
+          </div>
+          <div>
+            <p
+              style={{
+                fontSize: VisualTokens.fontSize.body,
+                fontWeight: VisualTokens.fontWeight.medium,
+                color: VisualTokens.color.textPrimary,
+                margin: 0,
+              }}
+            >
+              {invoice.number}
+            </p>
+            <p style={{ ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }}>
+              {new Date(invoice.date).toLocaleDateString(locale)}
+            </p>
+          </div>
+        </div>
+
+        <div style={{ textAlign: 'right' }}>
+          <p
+            style={{
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0,
+            }}
+          >
+            {formatPrice(invoice.amount, invoice.currency)}
+          </p>
+          <p
+            style={{
+              fontSize: VisualTokens.fontSize.caption,
+              fontWeight: VisualTokens.fontWeight.medium,
+              color: TONE_PAIRS[statusTone].fg,
+              margin: 0,
+            }}
+          >
+            {labels.invoiceStatus[invoice.status]}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      aria-label={onClick ? `Invoice ${invoice.number}` : undefined}
+      onClick={onClick ? () => onClick(invoice) : undefined}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+      style={cardInteractive}
+    >
+      <div
+        style={{
+          ...row,
+          justifyContent: 'space-between',
+          gap: VisualTokens.spacing.lg,
+          marginBottom: VisualTokens.spacing.xl,
+        }}
+      >
+        <div style={{ ...row, gap: VisualTokens.spacing.lg }}>
+          <div style={iconBox}>
+            <FileText size={24} />
+          </div>
+          <div>
+            <p
+              style={{
+                fontWeight: VisualTokens.fontWeight.strong,
+                color: VisualTokens.color.textPrimary,
+                margin: 0,
+              }}
+            >
+              {invoice.number}
+            </p>
+            <p style={{ ...mutedText, margin: 0 }}>
+              {new Date(invoice.date).toLocaleDateString(locale, DATE_FORMAT_OPTIONS)}
+            </p>
+          </div>
+        </div>
+
+        <div style={{ textAlign: 'right' }}>
+          <p
+            style={{
+              fontSize: VisualTokens.fontSize.display,
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0,
+            }}
+          >
+            {formatPrice(invoice.amount, invoice.currency)}
+          </p>
+          <p
+            style={{
+              fontSize: VisualTokens.fontSize.body,
+              fontWeight: VisualTokens.fontWeight.medium,
+              color: TONE_PAIRS[statusTone].fg,
+              margin: 0,
+            }}
+          >
+            {labels.invoiceStatus[invoice.status]}
+          </p>
+        </div>
+      </div>
+
+      {invoice.items && invoice.items.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: VisualTokens.spacing.sm,
+            marginBottom: VisualTokens.spacing.xl,
+          }}
+        >
+          {invoice.items.slice(0, 2).map((item, index) => (
+            <div
+              key={`${item.description}-${index}`}
+              style={{ ...row, justifyContent: 'space-between', fontSize: VisualTokens.fontSize.body }}
+            >
+              <span style={{ color: VisualTokens.color.textMuted }}>{item.description}</span>
+              <span style={{ color: VisualTokens.color.textPrimary }}>
+                {formatPrice(item.amount, invoice.currency)}
+              </span>
+            </div>
+          ))}
+          {invoice.items.length > 2 && (
+            <p style={{ ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }}>
+              +{formatNumber(invoice.items.length - 2, locale)} {labels.invoices.moreItems}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div
+        style={{
+          ...row,
+          justifyContent: 'space-between',
+          paddingTop: VisualTokens.spacing.xl,
+          borderTop: `1px solid ${VisualTokens.color.borderSubtle}`,
+        }}
+      >
+        <p style={{ ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }}>
+          {labels.invoices.due}{' '}
+          {new Date(invoice.dueDate).toLocaleDateString(locale)}
+        </p>
+
+        <div style={{ ...row, gap: VisualTokens.spacing.sm }}>
+          {invoice.invoiceUrl && (
+            <PortalGhostIconButton
+              label={labels.invoices.viewInvoice}
+              onClick={(e) => {
+                e.stopPropagation();
+                openExternal(invoice.invoiceUrl!);
+              }}
+            >
+              <ExternalLink size={16} />
+            </PortalGhostIconButton>
+          )}
+          {invoice.pdfUrl && (
+            <PortalGhostIconButton
+              label={labels.invoices.downloadPdf}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (onDownload) {
+                  onDownload(invoice);
+                } else {
+                  openExternal(invoice.pdfUrl!);
+                }
+              }}
+            >
+              <Download size={16} />
+            </PortalGhostIconButton>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PortalGhostIconButton = ({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  children: React.ReactNode;
+}) => (
+  <button
+    type="button"
+    aria-label={label}
+    onClick={onClick}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: VisualTokens.spacing.xs,
+      borderRadius: VisualTokens.radius.sm,
+      border: '1px solid transparent',
+      background: 'transparent',
+      color: VisualTokens.color.textMuted,
+      cursor: 'pointer',
+    }}
+  >
+    {children}
+  </button>
+);
+
+export default InvoiceCard;
+
+export type { Invoice } from '../types';

package/src/presentation/portal/components/OverviewTab.tsx

@@ -0,0 +1,137 @@
+
+import { VisualTokens, TONE_PAIRS } from '../../theme/visual-tokens';
+import { useBillingLabels } from '../labels';
+import type { BillingSummary } from '../types';
+import { UsageCard } from './UsageCard';
+import { card, sectionTitle, stack } from '../styles';
+import {
+  formatPrice,
+  getDaysRemaining,
+  getPlanPrice,
+  getStatusTone,
+} from '../utils/billing';
+
+export interface OverviewTabProps {
+  billing: BillingSummary;
+  locale: string;
+}
+
+export const OverviewTab = ({ billing, locale }: OverviewTabProps) => {
+  const labels = useBillingLabels();
+  const { subscription, usage, upcomingInvoice } = billing;
+  const statusTone = getStatusTone(subscription.status);
+
+  return (
+    <div style={stack}>
+      <section style={card} aria-labelledby="overview-subscription-heading">
+        <h3 id="overview-subscription-heading" style={sectionTitle}>
+          {labels.overview.currentSubscription}
+        </h3>
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: VisualTokens.spacing.lg }}>
+          <div>
+            <p
+              style={{
+                fontSize: VisualTokens.fontSize.display,
+                fontWeight: VisualTokens.fontWeight.strong,
+                color: VisualTokens.color.textPrimary,
+                margin: 0,
+              }}
+            >
+              {subscription.plan.name}
+            </p>
+            <p
+              style={{
+                fontSize: VisualTokens.fontSize.body,
+                fontWeight: VisualTokens.fontWeight.medium,
+                color: TONE_PAIRS[statusTone].fg,
+                margin: 0,
+              }}
+            >
+              {labels.status[subscription.status]}
+            </p>
+            <p
+              style={{
+                fontSize: VisualTokens.fontSize.body,
+                color: VisualTokens.color.textMuted,
+                margin: 0,
+                marginTop: VisualTokens.spacing.xs,
+              }}
+            >
+              {formatPrice(
+                getPlanPrice(subscription.plan, subscription.cycle),
+                subscription.plan.currency,
+              )}
+              /{subscription.cycle}
+            </p>
+          </div>
+          <div style={{ textAlign: 'right' }}>
+            {subscription.status === 'trialing' && subscription.trialEnd && (
+              <p
+                style={{
+                  fontSize: VisualTokens.fontSize.body,
+                  color: VisualTokens.color.textMuted,
+                  margin: 0,
+                }}
+              >
+                {getDaysRemaining(subscription.trialEnd)}{' '}
+                {labels.overview.trialDaysLeft}
+              </p>
+            )}
+            {upcomingInvoice && (
+              <p
+                style={{
+                  fontSize: VisualTokens.fontSize.body,
+                  color: VisualTokens.color.textMuted,
+                  margin: 0,
+                }}
+              >
+                {labels.overview.nextBilling}{' '}
+                {new Date(upcomingInvoice.date).toLocaleDateString(locale)}
+              </p>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {usage.length > 0 && (
+        <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: VisualTokens.spacing.xl }} aria-label={labels.common.usage}>
+          {usage.map((metric) => (
+            <UsageCard key={metric.id} metric={metric} locale={locale} />
+          ))}
+        </section>
+      )}
+
+      {upcomingInvoice && (
+        <section style={card} aria-labelledby="overview-upcoming-heading">
+          <h3 id="overview-upcoming-heading" style={{ ...sectionTitle, marginBottom: VisualTokens.spacing.md }}>
+            {labels.overview.upcomingInvoice}
+          </h3>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <p
+                style={{
+                  fontSize: VisualTokens.fontSize.display,
+                  fontWeight: VisualTokens.fontWeight.strong,
+                  color: VisualTokens.color.textPrimary,
+                  margin: 0,
+                }}
+              >
+                {formatPrice(upcomingInvoice.amount, upcomingInvoice.currency)}
+              </p>
+              <p
+                style={{
+                  fontSize: VisualTokens.fontSize.body,
+                  color: VisualTokens.color.textMuted,
+                  margin: 0,
+                }}
+              >
+                {labels.invoices.due}{' '}
+                {new Date(upcomingInvoice.date).toLocaleDateString(locale)}
+              </p>
+            </div>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+};