@umituz/web-payment 0.0.0-stage → 1.0.0

package/src/presentation/components/CancelSubscriptionButton.tsx

@@ -0,0 +1,155 @@
+
+import { useState, type ReactNode } from 'react';
+import { useCancelSubscription } from '../hooks/useCancelSubscription';
+import type { CancellationReason } from '../../domain/entities/cancellation.entity';
+import {
+  CANCELLATION_REASON_CATALOG,
+  type CancellationReasonOption,
+} from '../utils/cancellation-reason-catalog';
+import { InlineErrorVisual } from '../utils/inline-error-visual';
+import { VisualTokens } from '../theme/visual-tokens';
+
+export interface CancelSubscriptionButtonProps {
+  label?: string;
+  renderPrompt?: (confirm: (reason?: CancellationReason) => void) => ReactNode;
+  onSuccess?: () => void;
+  reasonCatalog?: ReadonlyArray<CancellationReasonOption>;
+  labels?: CancelSubscriptionButtonLabels;
+}
+
+export interface CancelSubscriptionButtonLabels {
+  action?: string;
+  confirm?: string;
+  keep?: string;
+  canceling?: string;
+  promptTitle?: string;
+  noReason?: string;
+}
+
+const DEFAULT_LABELS: Required<CancelSubscriptionButtonLabels> = Object.freeze({
+  action: 'Cancel subscription',
+  confirm: 'Confirm cancel',
+  keep: 'Keep subscription',
+  canceling: 'Canceling…',
+  promptTitle: 'Why are you canceling? (optional)',
+  noReason: 'Prefer not to say',
+});
+
+export function CancelSubscriptionButton({
+  label,
+  renderPrompt,
+  onSuccess,
+  reasonCatalog = CANCELLATION_REASON_CATALOG,
+  labels,
+}: CancelSubscriptionButtonProps) {
+  const { cancel, loading, error } = useCancelSubscription({
+    onSuccess: () => onSuccess?.(),
+  });
+  const [promptOpen, setPromptOpen] = useState(false);
+  const [reason, setReason] = useState<CancellationReason | ''>('');
+
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const triggerLabel = label ?? text.action;
+
+  const onConfirm = async (selected?: CancellationReason) => {
+    setPromptOpen(false);
+    const result = await cancel(selected);
+    if (result?.success) {
+      setReason('');
+    }
+  };
+
+  if (!promptOpen) {
+    return (
+      <span style={{ display: 'inline-flex', flexDirection: 'column', gap: VisualTokens.spacing.xs }}>
+        <button
+          type="button"
+          onClick={() => setPromptOpen(true)}
+          style={{
+            background: 'transparent',
+            color: VisualTokens.color.brandDangerText,
+            border: `1px solid ${VisualTokens.color.borderWarning}`,
+            borderRadius: VisualTokens.radius.md,
+            padding: `${VisualTokens.spacing.md}px ${VisualTokens.spacing.lg}px`,
+            cursor: 'pointer',
+            fontWeight: VisualTokens.fontWeight.strong,
+          }}
+        >
+          {triggerLabel}
+        </button>
+        {InlineErrorVisual.element(error?.message)}
+      </span>
+    );
+  }
+
+  if (renderPrompt) {
+    return <>{renderPrompt((selected) => void onConfirm(selected))}</>;
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Confirm cancellation"
+      style={{
+        border: `1px solid ${VisualTokens.color.borderWarning}`,
+        background: VisualTokens.color.surfaceDangerMuted,
+        borderRadius: VisualTokens.radius.md,
+        padding: VisualTokens.spacing.lg,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: VisualTokens.spacing.md,
+      }}
+    >
+      <label style={{ fontSize: VisualTokens.fontSize.body, fontWeight: VisualTokens.fontWeight.strong }}>
+        {text.promptTitle}
+        <select
+          value={reason}
+          onChange={(e) => setReason(e.target.value as CancellationReason | '')}
+          style={{
+            display: 'block',
+            marginTop: VisualTokens.spacing.xs,
+            width: '100%',
+            padding: VisualTokens.spacing.sm,
+          }}
+        >
+          <option value="">{text.noReason}</option>
+          {reasonCatalog.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </label>
+      <div style={{ display: 'flex', gap: VisualTokens.spacing.md }}>
+        <button
+          type="button"
+          onClick={() => void onConfirm(reason || undefined)}
+          disabled={loading}
+          style={{
+            background: VisualTokens.color.brandDanger,
+            color: VisualTokens.color.textOnPrimary,
+            border: 'none',
+            padding: `${VisualTokens.spacing.sm}px ${VisualTokens.spacing.lg}px`,
+            borderRadius: VisualTokens.radius.sm,
+          }}
+        >
+          {loading ? text.canceling : text.confirm}
+        </button>
+        <button
+          type="button"
+          onClick={() => setPromptOpen(false)}
+          disabled={loading}
+          style={{
+            background: 'transparent',
+            border: `1px solid ${VisualTokens.color.borderStrong}`,
+            padding: `${VisualTokens.spacing.sm}px ${VisualTokens.spacing.lg}px`,
+            borderRadius: VisualTokens.radius.sm,
+          }}
+        >
+          {text.keep}
+        </button>
+      </div>
+      {InlineErrorVisual.element(error?.message)}
+    </div>
+  );
+}

package/src/presentation/components/CheckoutButton.tsx

@@ -0,0 +1,76 @@
+
+import { useMemo } from 'react';
+import { useCheckoutButton } from '../hooks/useCheckoutButton';
+import type { CheckoutParams } from '../../domain/entities/checkout.entity';
+import { CheckoutButtonVisual } from '../utils/checkout-button-visual';
+import { InlineErrorVisual } from '../utils/inline-error-visual';
+
+export type CheckoutButtonVariant = 'primary' | 'secondary' | 'danger';
+
+export interface CheckoutButtonLabels {
+  loading?: string;
+}
+
+export interface CheckoutButtonProps {
+  productId: string;
+  billingCycle?: CheckoutParams['billingCycle'];
+  successUrl?: string;
+  planKey?: string;
+  label: string;
+  variant?: CheckoutButtonVariant;
+  disabled?: boolean;
+  onError?: (error: Error) => void;
+  className?: string;
+  labels?: CheckoutButtonLabels;
+}
+
+const DEFAULT_LABELS: Required<CheckoutButtonLabels> = Object.freeze({
+  loading: 'Redirecting…',
+});
+
+export function CheckoutButton({
+  productId,
+  billingCycle,
+  successUrl,
+  planKey,
+  label,
+  variant = 'primary',
+  disabled = false,
+  onError,
+  className,
+  labels,
+}: CheckoutButtonProps) {
+  const { start, loading, error } = useCheckoutButton({
+    productId,
+    billingCycle,
+    successUrl,
+    planKey,
+    onError,
+  });
+
+  const style = useMemo(
+    () => CheckoutButtonVisual.resolve({ variant, disabled, loading }),
+    [variant, disabled, loading],
+  );
+
+  const text = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+
+  return (
+    <span style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
+      <button
+        type="button"
+        style={style}
+        className={className}
+        onClick={() => void start()}
+        disabled={disabled || loading}
+        aria-busy={loading}
+      >
+        {loading ? text.loading : label}
+      </button>
+      {InlineErrorVisual.element(error?.message)}
+    </span>
+  );
+}

package/src/presentation/components/CustomerPortalLink.tsx

@@ -0,0 +1,71 @@
+
+import { useState } from 'react';
+import { useBilling } from '../context/billing-context';
+import { InlineErrorVisual } from '../utils/inline-error-visual';
+import { VisualTokens } from '../theme/visual-tokens';
+
+export interface CustomerPortalLinkProps {
+  label?: string;
+  target?: 'redirect' | 'open';
+  className?: string;
+  labels?: CustomerPortalLinkLabels;
+}
+
+export interface CustomerPortalLinkLabels {
+  loading?: string;
+}
+
+const DEFAULT_LABEL = 'Manage subscription';
+const DEFAULT_LOADING_LABEL = 'Opening…';
+
+export function CustomerPortalLink({
+  label = DEFAULT_LABEL,
+  target = 'open',
+  className,
+  labels,
+}: CustomerPortalLinkProps) {
+  const { getPortalUrl } = useBilling();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadingLabel = labels?.loading ?? DEFAULT_LOADING_LABEL;
+
+  const open = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = await getPortalUrl();
+      if (target === 'open') {
+        window.open(url, '_blank', 'noopener,noreferrer');
+      } else {
+        window.location.href = url;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to open portal');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <span style={{ display: 'inline-flex', flexDirection: 'column', gap: VisualTokens.spacing.xs }}>
+      <button
+        type="button"
+        onClick={() => void open()}
+        disabled={loading}
+        className={className}
+        style={{
+          background: 'transparent',
+          color: VisualTokens.color.brandPrimary,
+          border: 'none',
+          padding: 0,
+          textDecoration: 'underline',
+          cursor: loading ? 'wait' : 'pointer',
+        }}
+      >
+        {loading ? loadingLabel : label}
+      </button>
+      {InlineErrorVisual.element(error)}
+    </span>
+  );
+}

package/src/presentation/components/PricingTable.tsx

@@ -0,0 +1,225 @@
+
+import { useMemo } from 'react';
+import { useProducts } from '../hooks/useProducts';
+import type { Product, BillingCycle } from '../../domain/entities';
+import { CheckoutButton } from './CheckoutButton';
+import { ProductPricing } from '../utils/product-pricing';
+import { MoneyFormatter } from '../../infrastructure/utils/money-formatter';
+import { VisualTokens } from '../theme/visual-tokens';
+
+export interface PricingTableProps {
+  products?: Product[];
+  apiToken?: string;
+  organizationId?: string;
+  isRecurring?: boolean;
+  ctaLabel?: string;
+  onError?: (error: Error) => void;
+  filterInterval?: BillingCycle | null;
+  locale?: string;
+  labels?: PricingTableLabels;
+}
+
+export interface PricingTableLabels {
+  loading?: string;
+  empty?: string;
+  errorPrefix?: string;
+  retry?: string;
+}
+
+const DEFAULT_LABELS: Required<PricingTableLabels> = Object.freeze({
+  loading: 'Loading pricing…',
+  empty: 'No products available.',
+  errorPrefix: 'Failed to load pricing:',
+  retry: 'Retry',
+});
+
+export function PricingTable({
+  products: productsOverride,
+  apiToken,
+  organizationId,
+  isRecurring = true,
+  ctaLabel = 'Subscribe',
+  onError,
+  filterInterval = 'monthly',
+  locale,
+  labels,
+}: PricingTableProps) {
+  const enabled = productsOverride === undefined && apiToken !== undefined;
+  const { products: fetchedProducts, loading, error, refetch } = useProducts({
+    apiToken: apiToken ?? '',
+    organizationId,
+    isRecurring,
+    enabled,
+  });
+
+  const products = productsOverride ?? fetchedProducts;
+
+  const moneyFormatter = useMemo(() => new MoneyFormatter(locale), [locale]);
+  const text = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+
+  const visible = useMemo(() => {
+    if (filterInterval === null) return products;
+    return products.filter((p) => p.recurringInterval === filterInterval);
+  }, [products, filterInterval]);
+
+  if (enabled && loading) {
+    return (
+      <div
+        role="status"
+        aria-live="polite"
+        style={{
+          padding: VisualTokens.spacing.section,
+          textAlign: 'center',
+        }}
+      >
+        {text.loading}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        role="alert"
+        style={{
+          padding: VisualTokens.spacing.xl,
+          background: VisualTokens.color.surfaceDanger,
+          borderRadius: VisualTokens.radius.md,
+        }}
+      >
+        <p style={{ margin: 0, color: VisualTokens.color.brandDangerText }}>
+          {text.errorPrefix} {error.message}
+        </p>
+        <button
+          type="button"
+          onClick={() => void refetch()}
+          style={{ marginTop: VisualTokens.spacing.md, padding: '6px 12px' }}
+        >
+          {text.retry}
+        </button>
+      </div>
+    );
+  }
+
+  if (visible.length === 0) {
+    return (
+      <div
+        style={{
+          padding: VisualTokens.spacing.section,
+          textAlign: 'center',
+          color: VisualTokens.color.textMuted,
+        }}
+      >
+        {text.empty}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fit, minmax(${VisualTokens.layout.cardMinWidth}px, 1fr))`,
+        gap: VisualTokens.spacing.xl,
+      }}
+    >
+      {visible.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          moneyFormatter={moneyFormatter}
+          ctaLabel={ctaLabel}
+          onError={onError}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface ProductCardProps {
+  product: Product;
+  moneyFormatter: MoneyFormatter;
+  ctaLabel: string;
+  onError?: (error: Error) => void;
+}
+
+function ProductCard({ product, moneyFormatter, ctaLabel, onError }: ProductCardProps) {
+  const { amount, interval } = useMemo(
+    () =>
+      ProductPricing.displayLine(
+        product,
+        (amt, cur) => moneyFormatter.format(amt, cur),
+      ),
+    [product, moneyFormatter],
+  );
+
+  return (
+    <article
+      style={{
+        border: `1px solid ${VisualTokens.color.borderSubtle}`,
+        borderRadius: VisualTokens.radius.lg,
+        padding: VisualTokens.spacing.xxl,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: VisualTokens.spacing.lg,
+      }}
+    >
+      <header>
+        <h3 style={{ margin: 0, fontSize: VisualTokens.fontSize.title }}>{product.name}</h3>
+        {product.description ? (
+          <p
+            style={{
+              margin: `${VisualTokens.spacing.xs}px 0 0`,
+              color: VisualTokens.color.textMuted,
+              fontSize: VisualTokens.fontSize.body,
+            }}
+          >
+            {product.description}
+          </p>
+        ) : null}
+      </header>
+
+      <div style={{ fontSize: VisualTokens.fontSize.display, fontWeight: VisualTokens.fontWeight.strong }}>
+        {amount}
+        {interval ? (
+          <span
+            style={{
+              fontSize: VisualTokens.fontSize.body,
+              fontWeight: VisualTokens.fontWeight.regular,
+              color: VisualTokens.color.textMuted,
+            }}
+          >
+            {' '}/ {interval}
+          </span>
+        ) : null}
+      </div>
+
+      {product.benefits.length > 0 ? (
+        <ul
+          style={{
+            paddingLeft: 18,
+            margin: 0,
+            color: '#374151',
+            fontSize: VisualTokens.fontSize.body,
+          }}
+        >
+          {product.benefits.slice(0, VisualTokens.layout.benefitListMax).map((b) => (
+            <li key={b.id}>{b.description ?? b.type}</li>
+          ))}
+        </ul>
+      ) : null}
+
+      <div style={{ marginTop: 'auto' }}>
+        <CheckoutButton
+          productId={product.id}
+          billingCycle={product.recurringInterval ?? undefined}
+          label={ctaLabel}
+          onError={onError}
+        />
+      </div>
+    </article>
+  );
+}

package/src/presentation/components/SubscriptionStatusBadge.tsx

@@ -0,0 +1,102 @@
+
+import { useMemo } from 'react';
+import { useBilling } from '../context/billing-context';
+import type { SubscriptionStatus } from '../../domain/entities/subscription.entity';
+import type { SubscriptionStatusValue } from '../../domain/enums/subscription-status.enum';
+import { StatusTone } from '../utils/status-tone';
+import { StatusLabel } from '../utils/status-label';
+import { DateRenderer } from '../../infrastructure/utils/date-renderer';
+import { VisualTokens, TONE_PAIRS } from '../theme/visual-tokens';
+
+export interface SubscriptionStatusBadgeProps {
+  status?: SubscriptionStatus;
+  loading?: boolean;
+  locale?: string;
+  labels?: SubscriptionStatusBadgeLabels;
+}
+
+export interface SubscriptionStatusBadgeLabels {
+  loading?: string;
+  endsPrefix?: string;
+  statuses?: Partial<Record<SubscriptionStatusValue, string>>;
+}
+
+const DEFAULT_LABELS: Required<Omit<SubscriptionStatusBadgeLabels, 'statuses'>> = Object.freeze({
+  loading: 'Loading…',
+  endsPrefix: 'ends',
+});
+
+export function SubscriptionStatusBadge({
+  status: statusOverride,
+  loading: loadingOverride,
+  locale,
+  labels,
+}: SubscriptionStatusBadgeProps) {
+  const ctx = useBilling();
+  const status = statusOverride ?? ctx.status;
+  const loading = loadingOverride ?? ctx.loading;
+
+  const dateRenderer = useMemo(() => new DateRenderer(locale), [locale]);
+  const text = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels],
+  );
+
+  const pillStyle = useMemo<React.CSSProperties>(
+    () => ({
+      padding: `${VisualTokens.spacing.xs}px ${VisualTokens.spacing.lg - 2}px`,
+      borderRadius: VisualTokens.radius.pill,
+      fontSize: VisualTokens.fontSize.caption,
+      fontWeight: VisualTokens.fontWeight.strong,
+    }),
+    [],
+  );
+
+  if (loading) {
+    return (
+      <span
+        style={{
+          ...pillStyle,
+          ...TONE_PAIRS.neutral,
+        }}
+      >
+        {text.loading}
+      </span>
+    );
+  }
+
+  const tone = StatusTone.forStatus(status.subscriptionStatus);
+  const color = TONE_PAIRS[tone];
+  const label = StatusLabel.forStatus(status.subscriptionStatus, labels?.statuses);
+
+  const showPlan = status.plan && status.plan !== 'free';
+  const showEnds = status.cancelAtPeriodEnd;
+  const endsLabel = showEnds
+    ? `${text.endsPrefix} ${dateRenderer.renewal(status.currentPeriodEnd)}`
+    : null;
+
+  return (
+    <span
+      aria-label={`Subscription ${label}`}
+      style={{
+        backgroundColor: color.bg,
+        color: color.fg,
+        padding: pillStyle.padding,
+        borderRadius: VisualTokens.radius.pill,
+        fontSize: VisualTokens.fontSize.caption,
+        fontWeight: VisualTokens.fontWeight.strong,
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: VisualTokens.spacing.xs + 2,
+      }}
+    >
+      <span style={{ textTransform: 'capitalize' }}>{label}</span>
+      {showPlan ? (
+        <span style={{ opacity: VisualTokens.opacity.muted }}>· {status.plan}</span>
+      ) : null}
+      {endsLabel ? (
+        <span style={{ opacity: VisualTokens.opacity.muted }}>· {endsLabel}</span>
+      ) : null}
+    </span>
+  );
+}

package/src/presentation/context/billing-context.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+import type {
+  SubscriptionStatus,
+  CheckoutParams,
+  CancellationReason,
+  CancelResult,
+  SyncResult,
+  OrderItem,
+} from '../../domain/entities';
+
+export interface BillingContextValue {
+  status: SubscriptionStatus;
+  loading: boolean;
+  refresh: () => Promise<void>;
+  startCheckout: (params: CheckoutParams) => Promise<void>;
+  syncSubscription: () => Promise<SyncResult>;
+  getBillingHistory: () => Promise<OrderItem[]>;
+  cancelSubscription: (reason?: CancellationReason) => Promise<CancelResult>;
+  getPortalUrl: () => Promise<string>;
+}
+
+export const BillingContext = createContext<BillingContextValue | undefined>(undefined);
+
+export function useBilling(): BillingContextValue {
+  const ctx = useContext(BillingContext);
+  if (!ctx) {
+    throw new Error('useBilling must be used within <BillingProvider>');
+  }
+  return ctx;
+}

package/src/presentation/hooks/useBilling.ts

@@ -0,0 +1,3 @@
+
+export { useBilling } from '../context/billing-context';
+export type { BillingContextValue } from '../context/billing-context';