@umituz/web-payment 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,197 @@
+
+import { useState } from 'react';
+import { Calendar, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react';
+import { VisualTokens, TONE_PAIRS } from '../../theme/visual-tokens';
+import { useBillingLabels } from '../labels';
+import type { Subscription } from '../types';
+import { PortalButton } from './PortalButton';
+import { alertDanger, card, sectionTitle, stack } from '../styles';
+import {
+  formatPrice,
+  getPlanPrice,
+  getStatusTone,
+} from '../utils/billing';
+
+export interface PlanTabProps {
+  subscription: Subscription;
+  onChangePlan?: () => void;
+  onCancelSubscription?: () => void | Promise<void>;
+  locale?: string;
+}
+
+export const PlanTab = ({
+  subscription,
+  onChangePlan,
+  onCancelSubscription,
+  locale = 'en-US',
+}: PlanTabProps) => {
+  const labels = useBillingLabels();
+  const [confirmingCancel, setConfirmingCancel] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [cancelError, setCancelError] = useState<string | null>(null);
+
+  const handleCancel = async () => {
+    if (!onCancelSubscription) return;
+    if (!confirmingCancel) {
+      setConfirmingCancel(true);
+      return;
+    }
+    setCancelling(true);
+    setCancelError(null);
+    try {
+      await onCancelSubscription();
+    } catch {
+      setCancelError(labels.plan.cancelFailed);
+    } finally {
+      setCancelling(false);
+      setConfirmingCancel(false);
+    }
+  };
+
+  const isActive = subscription.status === 'active' || subscription.status === 'trialing';
+  const statusTone = getStatusTone(subscription.status);
+
+  return (
+    <div style={stack}>
+      <section style={card} aria-labelledby="plan-current-heading">
+        <h3 id="plan-current-heading" style={sectionTitle}>
+          {labels.plan.title}
+        </h3>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            gap: VisualTokens.spacing.xl,
+            flexWrap: 'wrap',
+          }}
+        >
+          <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,
+                marginTop: VisualTokens.spacing.xs,
+              }}
+            >
+              {labels.status[subscription.status]}
+            </p>
+            <p
+              style={{
+                fontSize: VisualTokens.fontSize.title,
+                fontWeight: VisualTokens.fontWeight.strong,
+                color: VisualTokens.color.textPrimary,
+                margin: 0,
+                marginTop: VisualTokens.spacing.lg,
+              }}
+            >
+              {formatPrice(
+                getPlanPrice(subscription.plan, subscription.cycle),
+                subscription.plan.currency,
+              )}
+              <span
+                style={{
+                  fontSize: VisualTokens.fontSize.body,
+                  fontWeight: VisualTokens.fontWeight.regular,
+                  color: VisualTokens.color.textMuted,
+                }}
+              >
+                /{subscription.cycle}
+              </span>
+            </p>
+            <p
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                fontSize: VisualTokens.fontSize.caption,
+                color: VisualTokens.color.textMuted,
+                margin: 0,
+                marginTop: VisualTokens.spacing.sm,
+              }}
+            >
+              <Calendar size={14} aria-hidden="true" />
+              {subscription.currentPeriodStart &&
+                new Date(subscription.currentPeriodStart).toLocaleDateString(locale)}
+              {' → '}
+              {subscription.currentPeriodEnd &&
+                new Date(subscription.currentPeriodEnd).toLocaleDateString(locale)}
+            </p>
+          </div>
+
+          {isActive ? (
+            <CheckCircle2
+              size={24}
+              color={TONE_PAIRS.active.fg}
+              aria-hidden="true"
+            />
+          ) : (
+            <XCircle size={24} color={VisualTokens.color.brandDanger} aria-hidden="true" />
+          )}
+        </div>
+      </section>
+
+      <section style={card} aria-labelledby="plan-actions-heading">
+        <h4
+          id="plan-actions-heading"
+          style={{
+            fontSize: VisualTokens.fontSize.body,
+            fontWeight: VisualTokens.fontWeight.strong,
+            color: VisualTokens.color.textPrimary,
+            margin: 0,
+            marginBottom: VisualTokens.spacing.xl,
+          }}
+        >
+          {labels.plan.actionsTitle}
+        </h4>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: VisualTokens.spacing.lg }}>
+          {onChangePlan && (
+            <PortalButton onClick={onChangePlan} variant="default">
+              {labels.plan.changePlan}
+            </PortalButton>
+          )}
+          {onCancelSubscription && isActive && (
+            <PortalButton
+              onClick={handleCancel}
+              variant={confirmingCancel ? 'destructive' : 'outline'}
+              disabled={cancelling}
+            >
+              {cancelling
+                ? labels.plan.cancelling
+                : confirmingCancel
+                ? labels.plan.confirmCancel
+                : labels.plan.cancelSubscription}
+            </PortalButton>
+          )}
+        </div>
+
+        {confirmingCancel && !cancelError && (
+          <div role="alert" style={{ ...alertDanger, marginTop: VisualTokens.spacing.xl }}>
+            <AlertTriangle size={16} style={{ marginTop: 2, flexShrink: 0 }} aria-hidden="true" />
+            <span>{labels.plan.cancelConfirmMessage}</span>
+          </div>
+        )}
+
+        {cancelError && (
+          <div role="alert" style={{ ...alertDanger, marginTop: VisualTokens.spacing.xl }}>
+            <AlertTriangle size={16} style={{ marginTop: 2, flexShrink: 0 }} aria-hidden="true" />
+            <span>{cancelError}</span>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+};

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

@@ -0,0 +1,89 @@
+
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import { VisualTokens } from '../../theme/visual-tokens';
+
+export type PortalButtonVariant = 'default' | 'outline' | 'destructive' | 'ghost';
+export type PortalButtonSize = 'sm' | 'md';
+
+export interface PortalButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: PortalButtonVariant;
+  size?: PortalButtonSize;
+  fullWidth?: boolean;
+  pill?: boolean;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+const VARIANT_STYLES: Record<PortalButtonVariant, CSSProperties> = {
+  default: {
+    background: VisualTokens.color.brandPrimary,
+    color: VisualTokens.color.textOnPrimary,
+    border: '1px solid transparent',
+  },
+  outline: {
+    background: 'transparent',
+    color: VisualTokens.color.textPrimary,
+    border: `1px solid ${VisualTokens.color.borderStrong}`,
+  },
+  destructive: {
+    background: VisualTokens.color.brandDanger,
+    color: VisualTokens.color.textOnError,
+    border: '1px solid transparent',
+  },
+  ghost: {
+    background: 'transparent',
+    color: VisualTokens.color.textMuted,
+    border: '1px solid transparent',
+  },
+};
+
+const SIZE_STYLES: Record<PortalButtonSize, CSSProperties> = {
+  sm: {
+    padding: `${VisualTokens.spacing.xs}px ${VisualTokens.spacing.lg}px`,
+    fontSize: VisualTokens.fontSize.caption,
+  },
+  md: {
+    padding: `${VisualTokens.spacing.md}px ${VisualTokens.spacing.xxl}px`,
+    fontSize: VisualTokens.fontSize.body,
+  },
+};
+
+export const PortalButton = ({
+  variant = 'default',
+  size = 'md',
+  fullWidth = false,
+  pill = false,
+  icon,
+  children,
+  disabled,
+  style,
+  type = 'button',
+  ...rest
+}: PortalButtonProps) => {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: VisualTokens.spacing.sm,
+        borderRadius: pill ? VisualTokens.radius.pill : VisualTokens.radius.md,
+        fontWeight: VisualTokens.fontWeight.medium,
+        lineHeight: VisualTokens.lineHeight.normal,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? VisualTokens.opacity.disabled : 1,
+        width: fullWidth ? '100%' : undefined,
+        boxSizing: 'border-box',
+        ...VARIANT_STYLES[variant],
+        ...SIZE_STYLES[size],
+        ...style,
+      }}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,30 @@
+
+export const PortalSpinner = ({ size = 24 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+    style={{ display: 'inline-block', verticalAlign: 'middle' }}
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeDasharray="44 19"
+    >
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="0.8s"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
+);

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

@@ -0,0 +1,158 @@
+
+import { AlertTriangle, TrendingUp } from 'lucide-react';
+import { VisualTokens, TONE_PAIRS } from '../../theme/visual-tokens';
+import { useBillingLabels } from '../labels';
+import type { UsageCardProps } from '../types';
+import { card, mutedText, row } from '../styles';
+import { calculateUsagePercentage, formatNumber, isNearLimit } from '../utils/billing';
+
+export const UsageCard = ({
+  metric,
+  locale = 'en-US',
+  showProgress = true,
+  showLimit = true,
+}: UsageCardProps) => {
+  const labels = useBillingLabels();
+  const { percentage, isOverLimit, nearLimit, isUnlimited } = evaluateUsage(metric);
+
+  const tone = isOverLimit ? 'danger' : nearLimit ? 'warning' : 'active';
+  const toneColor = TONE_PAIRS[tone].fg;
+  const barColor = isOverLimit
+    ? VisualTokens.color.brandDanger
+    : nearLimit
+      ? VisualTokens.color.badgeWarningFg
+      : VisualTokens.color.brandPrimary;
+
+  return (
+    <div style={{ ...card, display: 'flex', flexDirection: 'column', gap: VisualTokens.spacing.lg }}>
+      <div style={{ ...row, justifyContent: 'space-between', gap: VisualTokens.spacing.lg }}>
+        <div>
+          <p style={{ ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0, marginBottom: VisualTokens.spacing.xs }}>
+            {metric.name}
+          </p>
+          <p
+            style={{
+              fontSize: VisualTokens.fontSize.display,
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0,
+            }}
+          >
+            {formatNumber(metric.current, locale)}
+            <span
+              style={{
+                fontSize: VisualTokens.fontSize.body,
+                fontWeight: VisualTokens.fontWeight.regular,
+                color: VisualTokens.color.textMuted,
+                marginLeft: VisualTokens.spacing.xs,
+              }}
+            >
+              {metric.unit}
+            </span>
+          </p>
+        </div>
+
+        {(nearLimit || isOverLimit) && (
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: VisualTokens.radius.md,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: toneColor,
+              background: TONE_PAIRS[tone].bg,
+              flexShrink: 0,
+            }}
+            aria-hidden="true"
+          >
+            {isOverLimit ? (
+              <AlertTriangle size={20} />
+            ) : (
+              <TrendingUp size={20} />
+            )}
+          </div>
+        )}
+      </div>
+
+      {showProgress && !isUnlimited && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: VisualTokens.spacing.sm }}>
+          <div
+            style={{
+              ...row,
+              justifyContent: 'space-between',
+              fontSize: VisualTokens.fontSize.caption,
+            }}
+          >
+            {showLimit && (
+              <span style={{ color: VisualTokens.color.textMuted }}>
+                {formatNumber(metric.limit, locale)} {metric.unit} {labels.usage.limit}
+              </span>
+            )}
+            <span
+              style={{
+                fontWeight: VisualTokens.fontWeight.medium,
+                color: isOverLimit || nearLimit ? toneColor : VisualTokens.color.textPrimary,
+              }}
+            >
+              {percentage.toFixed(0)}%
+            </span>
+          </div>
+
+          <div
+            style={{
+              width: '100%',
+              height: 8,
+              background: VisualTokens.color.surfaceSubtle,
+              borderRadius: VisualTokens.radius.pill,
+              overflow: 'hidden',
+            }}
+            role="progressbar"
+            aria-label={`${metric.name} ${labels.common.usage}`}
+            aria-valuemin={0}
+            aria-valuemax={Math.max(metric.limit, metric.current)}
+            aria-valuenow={metric.current}
+            aria-valuetext={`${formatNumber(metric.current, locale)} / ${formatNumber(metric.limit, locale)} ${metric.unit}`}
+          >
+            <div
+              style={{
+                height: '100%',
+                background: barColor,
+                width: `${Math.min(percentage, 100)}%`,
+              }}
+            />
+          </div>
+
+          {metric.resetAt && (
+            <p style={{ ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }}>
+              {labels.usage.resets}{' '}
+              {new Date(metric.resetAt).toLocaleDateString(locale)}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface UsageEvaluation {
+  percentage: number;
+  isOverLimit: boolean;
+  nearLimit: boolean;
+  isUnlimited: boolean;
+}
+
+const evaluateUsage = (metric: UsageCardProps['metric']): UsageEvaluation => {
+  if (metric.limit <= 0) {
+    return { percentage: 0, isOverLimit: false, nearLimit: false, isUnlimited: true };
+  }
+  return {
+    percentage: calculateUsagePercentage(metric),
+    isOverLimit: metric.current > metric.limit,
+    nearLimit: isNearLimit(metric),
+    isUnlimited: false,
+  };
+};
+
+export default UsageCard;

package/src/presentation/portal/components/index.ts

@@ -0,0 +1,11 @@
+
+export { BillingPortal } from './BillingPortal';
+export { BillingLayout } from './BillingLayout';
+export { BillingPage } from './BillingPage';
+export { PlanComparison, RADIO_GROUP_NAME } from './PlanComparison';
+export { PaymentMethodsList } from './PaymentMethodsList';
+export { InvoiceCard } from './InvoiceCard';
+export { UsageCard } from './UsageCard';
+export { PortalButton } from './PortalButton';
+export type { PortalButtonProps, PortalButtonVariant, PortalButtonSize } from './PortalButton';
+export { PortalSpinner } from './PortalSpinner';

package/src/presentation/portal/constants.ts

@@ -0,0 +1,44 @@
+
+export const SUBSCRIPTION_STATUS = {
+  ACTIVE: 'active',
+  TRIALING: 'trialing',
+  PAST_DUE: 'past_due',
+  CANCELED: 'canceled',
+  UNPAID: 'unpaid',
+  INCOMPLETE: 'incomplete',
+  REVOKED: 'revoked',
+} as const;
+
+export const INVOICE_STATUS = {
+  DRAFT: 'draft',
+  OPEN: 'open',
+  PAID: 'paid',
+  VOID: 'void',
+  UNCOLLECTIBLE: 'uncollectible',
+  REFUNDED: 'refunded',
+} as const;
+
+export const CURRENCY = {
+  USD: 'USD',
+  EUR: 'EUR',
+  GBP: 'GBP',
+  TRY: 'TRY',
+  JPY: 'JPY',
+} as const;
+
+export type Currency = typeof CURRENCY[keyof typeof CURRENCY];
+
+export const PLAN_TYPE = {
+  STANDARD: 'standard',
+  PRO: 'pro',
+  BUSINESS: 'business',
+  ENTERPRISE: 'enterprise',
+} as const;
+
+export const DEFAULT_BILLING_CONFIG = {
+  enableYearlyDiscount: true,
+  yearlyDiscount: 20,
+  currencies: [CURRENCY.USD, CURRENCY.EUR, CURRENCY.GBP] as Currency[],
+  defaultCurrency: CURRENCY.USD,
+  taxRate: 0,
+} as const;