@umituz/web-payment 0.0.0-stage → 1.0.0

package/dist/chunk-NHKK3ENU.mjs

@@ -0,0 +1,1128 @@
+import {
+  FREE_SUBSCRIPTION_STATUS
+} from "./chunk-3AXPZOCV.mjs";
+import {
+  NoopNavigationStrategy,
+  TONE_PAIRS,
+  VisualTokens
+} from "./chunk-2NH5DOLT.mjs";
+import {
+  minorUnitDivisor
+} from "./chunk-PIWNUAKW.mjs";
+import {
+  getAllProducts
+} from "./chunk-XQ2HJTTA.mjs";
+
+// src/presentation/components/BillingProvider.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/infrastructure/utils/security.util.ts
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "0.0.0.0", "[::1]"]);
+function isValidCheckoutUrl(url) {
+  return typeof url === "string" && (url.startsWith("https://") || url.startsWith("http://"));
+}
+function isInsecureUrl(url) {
+  return typeof url === "string" && url.startsWith("http://");
+}
+function isLoopbackHost(url) {
+  try {
+    const host = new URL(url).hostname.toLowerCase();
+    return LOOPBACK_HOSTS.has(host);
+  } catch {
+    return false;
+  }
+}
+function isProductionInsecureUrl(url) {
+  return isInsecureUrl(url) && !isLoopbackHost(url);
+}
+
+// src/infrastructure/utils/validation.util.ts
+function normalizeUserId(userId) {
+  if (typeof userId !== "string") return void 0;
+  const trimmed = userId.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
+function isValidProductId(productId) {
+  return typeof productId === "string" && productId.trim().length > 0;
+}
+
+// src/presentation/context/billing-context.ts
+import { createContext, useContext } from "react";
+var BillingContext = createContext(void 0);
+function useBilling() {
+  const ctx = useContext(BillingContext);
+  if (!ctx) {
+    throw new Error("useBilling must be used within <BillingProvider>");
+  }
+  return ctx;
+}
+
+// src/presentation/components/BillingProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function defaultNavigation() {
+  if (typeof window === "undefined") return new NoopNavigationStrategy();
+  return {
+    redirect(url) {
+      window.location.href = url;
+    }
+  };
+}
+function BillingProvider({
+  adapter,
+  userId,
+  navigation,
+  children
+}) {
+  const [status, setStatus] = useState(FREE_SUBSCRIPTION_STATUS);
+  const [loading, setLoading] = useState(true);
+  const adapterRef = useRef(adapter);
+  const userIdRef = useRef(normalizeUserId(userId));
+  const navigationRef = useRef(navigation ?? defaultNavigation());
+  const refreshGenerationRef = useRef(0);
+  adapterRef.current = adapter;
+  userIdRef.current = normalizeUserId(userId);
+  navigationRef.current = navigation ?? navigationRef.current;
+  const refresh = useCallback(async () => {
+    const generation = ++refreshGenerationRef.current;
+    const uid = userIdRef.current;
+    if (!uid) {
+      setStatus(FREE_SUBSCRIPTION_STATUS);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const next = await adapterRef.current.getStatus(uid);
+      if (generation !== refreshGenerationRef.current) return;
+      setStatus(next);
+    } catch {
+      if (generation !== refreshGenerationRef.current) return;
+      setStatus(FREE_SUBSCRIPTION_STATUS);
+    } finally {
+      if (generation === refreshGenerationRef.current) {
+        setLoading(false);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+  }, [userId, refresh]);
+  const startCheckout = useCallback(async (params) => {
+    if (!isValidProductId(params.productId)) {
+      throw new Error("[billing] Invalid productId: must be a non-empty string");
+    }
+    const uid = userIdRef.current;
+    if (!uid) {
+      throw new Error("[billing] Cannot start checkout: no authenticated user");
+    }
+    const result = await adapterRef.current.createCheckout({ ...params, userId: uid });
+    if (!isValidCheckoutUrl(result.url)) {
+      throw new Error("[billing] Invalid checkout URL: must start with https:// or http://");
+    }
+    if (isProductionInsecureUrl(result.url)) {
+      throw new Error("[billing] Insecure http:// checkout URL in production");
+    }
+    navigationRef.current.redirect(result.url);
+  }, []);
+  const syncSubscription = useCallback(async () => {
+    const uid = userIdRef.current;
+    if (!uid) return { synced: false };
+    const checkoutId = typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("checkout_id") ?? void 0 : void 0;
+    const result = await adapterRef.current.syncSubscription(uid, checkoutId);
+    if (result.synced) {
+      await refresh();
+    }
+    return result;
+  }, [refresh]);
+  const getBillingHistory = useCallback(async () => {
+    const uid = userIdRef.current;
+    if (!uid) return [];
+    return adapterRef.current.getBillingHistory(uid);
+  }, []);
+  const cancelSubscription = useCallback(
+    async (reason) => {
+      const result = await adapterRef.current.cancelSubscription(reason);
+      if (result.success) {
+        await refresh();
+      }
+      return result;
+    },
+    [refresh]
+  );
+  const getPortalUrl = useCallback(async () => {
+    const uid = userIdRef.current;
+    if (!uid) {
+      throw new Error("[billing] Cannot get portal URL: no authenticated user");
+    }
+    return adapterRef.current.getPortalUrl(uid);
+  }, []);
+  const value = useMemo(
+    () => ({
+      status,
+      loading,
+      refresh,
+      startCheckout,
+      syncSubscription,
+      getBillingHistory,
+      cancelSubscription,
+      getPortalUrl
+    }),
+    [
+      status,
+      loading,
+      refresh,
+      startCheckout,
+      syncSubscription,
+      getBillingHistory,
+      cancelSubscription,
+      getPortalUrl
+    ]
+  );
+  return /* @__PURE__ */ jsx(BillingContext.Provider, { value, children });
+}
+
+// src/presentation/components/CheckoutButton.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/presentation/hooks/useCheckoutButton.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+function useCheckoutButton(options) {
+  const { startCheckout } = useBilling();
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const { productId, billingCycle, successUrl, planKey, onError } = options;
+  const start = useCallback2(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await startCheckout({
+        productId,
+        billingCycle,
+        successUrl,
+        planKey
+      });
+    } catch (err) {
+      const normalized = err instanceof Error ? err : new Error(String(err));
+      setError(normalized);
+      onError?.(normalized);
+    } finally {
+      setLoading(false);
+    }
+  }, [startCheckout, productId, billingCycle, successUrl, planKey, onError]);
+  return { start, loading, error };
+}
+
+// src/presentation/utils/checkout-button-visual.ts
+var VARIANT_COLOR_SCHEMES = Object.freeze({
+  primary: Object.freeze({
+    backgroundColor: VisualTokens.color.brandPrimary,
+    color: VisualTokens.color.textOnPrimary,
+    border: `1px solid ${VisualTokens.color.brandPrimary}`
+  }),
+  secondary: Object.freeze({
+    backgroundColor: VisualTokens.color.surfacePrimary,
+    color: VisualTokens.color.textPrimary,
+    border: `1px solid ${VisualTokens.color.borderStrong}`
+  }),
+  danger: Object.freeze({
+    backgroundColor: VisualTokens.color.brandDanger,
+    color: VisualTokens.color.textOnPrimary,
+    border: `1px solid ${VisualTokens.color.brandDanger}`
+  })
+});
+var CheckoutButtonVisual = class {
+  static resolve({ variant, disabled, loading }) {
+    const scheme = VARIANT_COLOR_SCHEMES[variant];
+    const isInactive = disabled || loading;
+    return {
+      ...scheme,
+      padding: `${VisualTokens.spacing.lg}px ${VisualTokens.spacing.xl}px`,
+      fontSize: VisualTokens.fontSize.body,
+      fontWeight: VisualTokens.fontWeight.strong,
+      borderRadius: VisualTokens.radius.md,
+      cursor: isInactive ? "not-allowed" : "pointer",
+      opacity: isInactive ? VisualTokens.opacity.disabled : 1,
+      transition: VisualTokens.transition.instant
+    };
+  }
+};
+
+// src/presentation/utils/inline-error-visual.ts
+import { createElement } from "react";
+var InlineErrorVisual = class _InlineErrorVisual {
+  static style() {
+    return {
+      color: VisualTokens.color.textError,
+      fontSize: VisualTokens.fontSize.caption
+    };
+  }
+  static element(message) {
+    if (!message) return null;
+    return createElement(
+      "span",
+      { role: "alert", style: _InlineErrorVisual.style() },
+      message
+    );
+  }
+};
+
+// src/presentation/components/CheckoutButton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = Object.freeze({
+  loading: "Redirecting\u2026"
+});
+function CheckoutButton({
+  productId,
+  billingCycle,
+  successUrl,
+  planKey,
+  label,
+  variant = "primary",
+  disabled = false,
+  onError,
+  className,
+  labels
+}) {
+  const { start, loading, error } = useCheckoutButton({
+    productId,
+    billingCycle,
+    successUrl,
+    planKey,
+    onError
+  });
+  const style = useMemo2(
+    () => CheckoutButtonVisual.resolve({ variant, disabled, loading }),
+    [variant, disabled, loading]
+  );
+  const text = useMemo2(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  return /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        style,
+        className,
+        onClick: () => void start(),
+        disabled: disabled || loading,
+        "aria-busy": loading,
+        children: loading ? text.loading : label
+      }
+    ),
+    InlineErrorVisual.element(error?.message)
+  ] });
+}
+
+// src/presentation/components/SubscriptionStatusBadge.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/presentation/utils/status-tone.ts
+var StatusTone = class _StatusTone {
+  static MAP = Object.freeze({
+    active: "active",
+    trialing: "active",
+    past_due: "warning",
+    incomplete: "warning",
+    canceled: "danger",
+    revoked: "danger",
+    unpaid: "danger",
+    incomplete_expired: "danger",
+    none: "neutral"
+  });
+  static forStatus(status) {
+    return _StatusTone.MAP[status] ?? "neutral";
+  }
+  static pairFor(status) {
+    return TONE_PAIRS[_StatusTone.forStatus(status)];
+  }
+};
+
+// src/presentation/utils/status-label.ts
+var StatusLabel = class _StatusLabel {
+  static MAP = Object.freeze({
+    active: "Active",
+    trialing: "Trial",
+    past_due: "Past due",
+    incomplete: "Incomplete",
+    canceled: "Canceled",
+    revoked: "Revoked",
+    unpaid: "Unpaid",
+    incomplete_expired: "Expired",
+    none: "Free"
+  });
+  static forStatus(status, overrides) {
+    return overrides?.[status] ?? _StatusLabel.MAP[status] ?? "Free";
+  }
+};
+
+// src/infrastructure/utils/date-renderer.ts
+var DEFAULT_LOCALE = "en-US";
+var ISO_DATE_DISPLAY_LENGTH = 10;
+var FALLBACK_DATE_LABEL = "soon";
+var FALLBACK_LONG_DATE = "\u2014";
+var DateRenderer = class _DateRenderer {
+  dateLength;
+  shortFormatter;
+  longFormatter;
+  constructor(locale = DEFAULT_LOCALE, dateLength = ISO_DATE_DISPLAY_LENGTH) {
+    this.dateLength = dateLength;
+    this.shortFormatter = new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+    this.longFormatter = new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  }
+  short(iso) {
+    if (!iso) return FALLBACK_LONG_DATE;
+    return iso.slice(0, this.dateLength);
+  }
+  renewal(iso, fallback = FALLBACK_DATE_LABEL) {
+    const date = _DateRenderer.parse(iso);
+    if (!date) return fallback;
+    return this.shortFormatter.format(date);
+  }
+  long(iso) {
+    if (!iso) return FALLBACK_LONG_DATE;
+    const date = _DateRenderer.parse(iso);
+    if (!date) return iso;
+    return this.longFormatter.format(date);
+  }
+  static parse(iso) {
+    if (!iso) return null;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+};
+
+// src/presentation/components/SubscriptionStatusBadge.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_LABELS2 = Object.freeze({
+  loading: "Loading\u2026",
+  endsPrefix: "ends"
+});
+function SubscriptionStatusBadge({
+  status: statusOverride,
+  loading: loadingOverride,
+  locale,
+  labels
+}) {
+  const ctx = useBilling();
+  const status = statusOverride ?? ctx.status;
+  const loading = loadingOverride ?? ctx.loading;
+  const dateRenderer = useMemo3(() => new DateRenderer(locale), [locale]);
+  const text = useMemo3(
+    () => ({ ...DEFAULT_LABELS2, ...labels }),
+    [labels]
+  );
+  const pillStyle = useMemo3(
+    () => ({
+      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 /* @__PURE__ */ jsx3(
+      "span",
+      {
+        style: {
+          ...pillStyle,
+          ...TONE_PAIRS.neutral
+        },
+        children: text.loading
+      }
+    );
+  }
+  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 /* @__PURE__ */ jsxs2(
+    "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
+      },
+      children: [
+        /* @__PURE__ */ jsx3("span", { style: { textTransform: "capitalize" }, children: label }),
+        showPlan ? /* @__PURE__ */ jsxs2("span", { style: { opacity: VisualTokens.opacity.muted }, children: [
+          "\xB7 ",
+          status.plan
+        ] }) : null,
+        endsLabel ? /* @__PURE__ */ jsxs2("span", { style: { opacity: VisualTokens.opacity.muted }, children: [
+          "\xB7 ",
+          endsLabel
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/presentation/components/PricingTable.tsx
+import { useMemo as useMemo4 } from "react";
+
+// src/presentation/hooks/useProducts.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+function useProducts(options) {
+  const { apiToken, organizationId, isRecurring = true, enabled = true } = options;
+  const [products, setProducts] = useState3([]);
+  const [loading, setLoading] = useState3(enabled);
+  const [error, setError] = useState3(null);
+  const optionsRef = useRef2({ apiToken, organizationId, isRecurring, enabled });
+  optionsRef.current = { apiToken, organizationId, isRecurring, enabled };
+  const abortRef = useRef2(null);
+  const fetchProducts = useCallback3(async () => {
+    const { apiToken: token, organizationId: org, isRecurring: recurring, enabled: isEnabled } = optionsRef.current;
+    abortRef.current?.abort();
+    if (!isEnabled) {
+      setLoading(false);
+      return;
+    }
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    setError(null);
+    try {
+      const params = { isRecurring: recurring };
+      if (org) params.organizationId = org;
+      const data = await getAllProducts({ apiToken: token }, params, {
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setProducts(data);
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setError(err instanceof Error ? err : new Error("Failed to fetch products"));
+    } finally {
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
+    }
+  }, []);
+  useEffect2(() => {
+    void fetchProducts();
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, [apiToken, organizationId, isRecurring, enabled, fetchProducts]);
+  return { products, loading, error, refetch: fetchProducts };
+}
+
+// src/presentation/utils/product-pricing.ts
+var FALLBACK_PRICE_LABEL = "Custom";
+var ProductPricing = class _ProductPricing {
+  static recurringPrice(product, cycle) {
+    const recurring = product.prices.filter(
+      (p) => p.recurringInterval !== void 0
+    );
+    if (recurring.length === 0) {
+      return product.prices[0] ?? null;
+    }
+    if (cycle) {
+      const match = recurring.find((p) => p.recurringInterval === cycle);
+      if (match) return match;
+    }
+    return recurring[0] ?? null;
+  }
+  static displayLine(product, formatter, cycle) {
+    const price = _ProductPricing.recurringPrice(product, cycle);
+    if (!price) {
+      return { amount: FALLBACK_PRICE_LABEL, interval: null };
+    }
+    const amount = formatter(price.amount, price.currency);
+    return { amount, interval: price.recurringInterval ?? null };
+  }
+};
+
+// src/infrastructure/utils/money-formatter.ts
+var DEFAULT_LOCALE2 = "en-US";
+var DEFAULT_CURRENCY = "USD";
+var MoneyFormatter = class {
+  locale;
+  constructor(locale = DEFAULT_LOCALE2) {
+    this.locale = locale;
+  }
+  format(amount, currency, options = {}) {
+    if (amount === void 0 || amount === null) {
+      return "Custom";
+    }
+    const code = (currency ?? options.fallbackCurrency ?? DEFAULT_CURRENCY).toUpperCase();
+    try {
+      return new Intl.NumberFormat(this.locale, {
+        style: "currency",
+        currency: code,
+        maximumFractionDigits: options.maximumFractionDigits ?? 2
+      }).format(amount / minorUnitDivisor(code));
+    } catch {
+      return `${amount} ${code}`;
+    }
+  }
+};
+
+// src/presentation/components/PricingTable.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_LABELS3 = Object.freeze({
+  loading: "Loading pricing\u2026",
+  empty: "No products available.",
+  errorPrefix: "Failed to load pricing:",
+  retry: "Retry"
+});
+function PricingTable({
+  products: productsOverride,
+  apiToken,
+  organizationId,
+  isRecurring = true,
+  ctaLabel = "Subscribe",
+  onError,
+  filterInterval = "monthly",
+  locale,
+  labels
+}) {
+  const enabled = productsOverride === void 0 && apiToken !== void 0;
+  const { products: fetchedProducts, loading, error, refetch } = useProducts({
+    apiToken: apiToken ?? "",
+    organizationId,
+    isRecurring,
+    enabled
+  });
+  const products = productsOverride ?? fetchedProducts;
+  const moneyFormatter = useMemo4(() => new MoneyFormatter(locale), [locale]);
+  const text = useMemo4(
+    () => ({ ...DEFAULT_LABELS3, ...labels }),
+    [labels]
+  );
+  const visible = useMemo4(() => {
+    if (filterInterval === null) return products;
+    return products.filter((p) => p.recurringInterval === filterInterval);
+  }, [products, filterInterval]);
+  if (enabled && loading) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        style: {
+          padding: VisualTokens.spacing.section,
+          textAlign: "center"
+        },
+        children: text.loading
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        role: "alert",
+        style: {
+          padding: VisualTokens.spacing.xl,
+          background: VisualTokens.color.surfaceDanger,
+          borderRadius: VisualTokens.radius.md
+        },
+        children: [
+          /* @__PURE__ */ jsxs3("p", { style: { margin: 0, color: VisualTokens.color.brandDangerText }, children: [
+            text.errorPrefix,
+            " ",
+            error.message
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: () => void refetch(),
+              style: { marginTop: VisualTokens.spacing.md, padding: "6px 12px" },
+              children: text.retry
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (visible.length === 0) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          padding: VisualTokens.spacing.section,
+          textAlign: "center",
+          color: VisualTokens.color.textMuted
+        },
+        children: text.empty
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fit, minmax(${VisualTokens.layout.cardMinWidth}px, 1fr))`,
+        gap: VisualTokens.spacing.xl
+      },
+      children: visible.map((product) => /* @__PURE__ */ jsx4(
+        ProductCard,
+        {
+          product,
+          moneyFormatter,
+          ctaLabel,
+          onError
+        },
+        product.id
+      ))
+    }
+  );
+}
+function ProductCard({ product, moneyFormatter, ctaLabel, onError }) {
+  const { amount, interval } = useMemo4(
+    () => ProductPricing.displayLine(
+      product,
+      (amt, cur) => moneyFormatter.format(amt, cur)
+    ),
+    [product, moneyFormatter]
+  );
+  return /* @__PURE__ */ jsxs3(
+    "article",
+    {
+      style: {
+        border: `1px solid ${VisualTokens.color.borderSubtle}`,
+        borderRadius: VisualTokens.radius.lg,
+        padding: VisualTokens.spacing.xxl,
+        display: "flex",
+        flexDirection: "column",
+        gap: VisualTokens.spacing.lg
+      },
+      children: [
+        /* @__PURE__ */ jsxs3("header", { children: [
+          /* @__PURE__ */ jsx4("h3", { style: { margin: 0, fontSize: VisualTokens.fontSize.title }, children: product.name }),
+          product.description ? /* @__PURE__ */ jsx4(
+            "p",
+            {
+              style: {
+                margin: `${VisualTokens.spacing.xs}px 0 0`,
+                color: VisualTokens.color.textMuted,
+                fontSize: VisualTokens.fontSize.body
+              },
+              children: product.description
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: { fontSize: VisualTokens.fontSize.display, fontWeight: VisualTokens.fontWeight.strong }, children: [
+          amount,
+          interval ? /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.body,
+                fontWeight: VisualTokens.fontWeight.regular,
+                color: VisualTokens.color.textMuted
+              },
+              children: [
+                " ",
+                "/ ",
+                interval
+              ]
+            }
+          ) : null
+        ] }),
+        product.benefits.length > 0 ? /* @__PURE__ */ jsx4(
+          "ul",
+          {
+            style: {
+              paddingLeft: 18,
+              margin: 0,
+              color: "#374151",
+              fontSize: VisualTokens.fontSize.body
+            },
+            children: product.benefits.slice(0, VisualTokens.layout.benefitListMax).map((b) => /* @__PURE__ */ jsx4("li", { children: b.description ?? b.type }, b.id))
+          }
+        ) : null,
+        /* @__PURE__ */ jsx4("div", { style: { marginTop: "auto" }, children: /* @__PURE__ */ jsx4(
+          CheckoutButton,
+          {
+            productId: product.id,
+            billingCycle: product.recurringInterval ?? void 0,
+            label: ctaLabel,
+            onError
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/presentation/components/BillingHistoryList.tsx
+import { useEffect as useEffect3, useState as useState4, useCallback as useCallback4, useMemo as useMemo5 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_LABELS4 = Object.freeze({
+  loading: "Loading billing history\u2026",
+  empty: "No invoices yet.",
+  refresh: "Refresh",
+  retry: "Retry",
+  paid: "Paid",
+  invoiceLink: "View",
+  invoiceFallback: "\u2014",
+  colDate: "Date",
+  colProduct: "Product",
+  colStatus: "Status",
+  colAmount: "Amount",
+  colInvoice: "Invoice"
+});
+function BillingHistoryList({
+  autoLoad = true,
+  orders: ordersOverride,
+  loading: loadingOverride,
+  locale,
+  labels
+}) {
+  const { getBillingHistory } = useBilling();
+  const [orders, setOrders] = useState4(ordersOverride ?? []);
+  const [loading, setLoading] = useState4(autoLoad && ordersOverride === void 0);
+  const [error, setError] = useState4(null);
+  const moneyFormatter = useMemo5(() => new MoneyFormatter(locale), [locale]);
+  const dateRenderer = useMemo5(() => new DateRenderer(locale), [locale]);
+  const text = useMemo5(
+    () => ({ ...DEFAULT_LABELS4, ...labels }),
+    [labels]
+  );
+  const refresh = useCallback4(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await getBillingHistory();
+      setOrders(next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load billing history");
+    } finally {
+      setLoading(false);
+    }
+  }, [getBillingHistory]);
+  useEffect3(() => {
+    if (autoLoad && ordersOverride === void 0) {
+      void refresh();
+    }
+  }, [autoLoad, ordersOverride, refresh]);
+  if (ordersOverride !== void 0 && ordersOverride.length > 0) {
+    return renderList(ordersOverride, moneyFormatter, dateRenderer, text);
+  }
+  if (loadingOverride !== void 0 && loadingOverride) {
+    return /* @__PURE__ */ jsx5("div", { role: "status", children: text.loading });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx5("div", { role: "status", children: text.loading });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        role: "alert",
+        style: {
+          background: VisualTokens.color.surfaceDanger,
+          padding: VisualTokens.spacing.lg,
+          borderRadius: VisualTokens.radius.md
+        },
+        children: [
+          error,
+          " ",
+          /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => void refresh(), children: text.retry })
+        ]
+      }
+    );
+  }
+  if (orders.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { style: { color: VisualTokens.color.textMuted }, children: text.empty });
+  }
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsx5("div", { style: { marginBottom: VisualTokens.spacing.md }, children: /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => void refresh(), children: text.refresh }) }),
+    renderList(orders, moneyFormatter, dateRenderer, text)
+  ] });
+}
+function renderList(orders, moneyFormatter, dateRenderer, text) {
+  return /* @__PURE__ */ jsxs4("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs4("tr", { style: { textAlign: "left", borderBottom: `1px solid ${VisualTokens.color.borderSubtle}` }, children: [
+      /* @__PURE__ */ jsx5("th", { style: { padding: VisualTokens.spacing.md }, children: text.colDate }),
+      /* @__PURE__ */ jsx5("th", { style: { padding: VisualTokens.spacing.md }, children: text.colProduct }),
+      /* @__PURE__ */ jsx5("th", { style: { padding: VisualTokens.spacing.md }, children: text.colStatus }),
+      /* @__PURE__ */ jsx5("th", { style: { padding: VisualTokens.spacing.md }, children: text.colAmount }),
+      /* @__PURE__ */ jsx5("th", { style: { padding: VisualTokens.spacing.md }, children: text.colInvoice })
+    ] }) }),
+    /* @__PURE__ */ jsx5("tbody", { children: orders.map((order) => /* @__PURE__ */ jsxs4("tr", { style: { borderBottom: `1px solid ${VisualTokens.color.surfaceSubtle}` }, children: [
+      /* @__PURE__ */ jsx5("td", { style: { padding: VisualTokens.spacing.md }, children: dateRenderer.short(order.createdAt) }),
+      /* @__PURE__ */ jsx5("td", { style: { padding: VisualTokens.spacing.md }, children: order.productName }),
+      /* @__PURE__ */ jsx5("td", { style: { padding: VisualTokens.spacing.md }, children: order.paid ? text.paid : order.status }),
+      /* @__PURE__ */ jsx5("td", { style: { padding: VisualTokens.spacing.md }, children: moneyFormatter.format(order.amount, order.currency) }),
+      /* @__PURE__ */ jsx5("td", { style: { padding: VisualTokens.spacing.md }, children: order.invoiceUrl ? /* @__PURE__ */ jsx5("a", { href: order.invoiceUrl, target: "_blank", rel: "noreferrer", children: text.invoiceLink }) : text.invoiceFallback })
+    ] }, order.id)) })
+  ] });
+}
+
+// src/presentation/components/CustomerPortalLink.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_LABEL = "Manage subscription";
+var DEFAULT_LOADING_LABEL = "Opening\u2026";
+function CustomerPortalLink({
+  label = DEFAULT_LABEL,
+  target = "open",
+  className,
+  labels
+}) {
+  const { getPortalUrl } = useBilling();
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(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 /* @__PURE__ */ jsxs5("span", { style: { display: "inline-flex", flexDirection: "column", gap: VisualTokens.spacing.xs }, children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: () => void open(),
+        disabled: loading,
+        className,
+        style: {
+          background: "transparent",
+          color: VisualTokens.color.brandPrimary,
+          border: "none",
+          padding: 0,
+          textDecoration: "underline",
+          cursor: loading ? "wait" : "pointer"
+        },
+        children: loading ? loadingLabel : label
+      }
+    ),
+    InlineErrorVisual.element(error)
+  ] });
+}
+
+// src/presentation/components/CancelSubscriptionButton.tsx
+import { useState as useState7 } from "react";
+
+// src/presentation/hooks/useCancelSubscription.ts
+import { useCallback as useCallback5, useState as useState6 } from "react";
+function useCancelSubscription(options = {}) {
+  const { cancelSubscription } = useBilling();
+  const [loading, setLoading] = useState6(false);
+  const [error, setError] = useState6(null);
+  const { onSuccess, onError } = options;
+  const cancel = useCallback5(
+    async (reason) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await cancelSubscription(reason);
+        onSuccess?.(result);
+        return result;
+      } catch (err) {
+        const normalized = err instanceof Error ? err : new Error(String(err));
+        setError(normalized);
+        onError?.(normalized);
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [cancelSubscription, onSuccess, onError]
+  );
+  return { cancel, loading, error };
+}
+
+// src/presentation/utils/cancellation-reason-catalog.ts
+var CANCELLATION_REASON_CATALOG = Object.freeze([
+  { value: "too_expensive", label: "Too expensive" },
+  { value: "missing_features", label: "Missing features" },
+  { value: "switched_service", label: "Switched to a different service" },
+  { value: "unused", label: "Not using it" },
+  { value: "customer_service", label: "Poor customer service" },
+  { value: "low_quality", label: "Quality is too low" },
+  { value: "too_complex", label: "Too complex" },
+  { value: "other", label: "Other" }
+]);
+
+// src/presentation/components/CancelSubscriptionButton.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_LABELS5 = Object.freeze({
+  action: "Cancel subscription",
+  confirm: "Confirm cancel",
+  keep: "Keep subscription",
+  canceling: "Canceling\u2026",
+  promptTitle: "Why are you canceling? (optional)",
+  noReason: "Prefer not to say"
+});
+function CancelSubscriptionButton({
+  label,
+  renderPrompt,
+  onSuccess,
+  reasonCatalog = CANCELLATION_REASON_CATALOG,
+  labels
+}) {
+  const { cancel, loading, error } = useCancelSubscription({
+    onSuccess: () => onSuccess?.()
+  });
+  const [promptOpen, setPromptOpen] = useState7(false);
+  const [reason, setReason] = useState7("");
+  const text = { ...DEFAULT_LABELS5, ...labels };
+  const triggerLabel = label ?? text.action;
+  const onConfirm = async (selected) => {
+    setPromptOpen(false);
+    const result = await cancel(selected);
+    if (result?.success) {
+      setReason("");
+    }
+  };
+  if (!promptOpen) {
+    return /* @__PURE__ */ jsxs6("span", { style: { display: "inline-flex", flexDirection: "column", gap: VisualTokens.spacing.xs }, children: [
+      /* @__PURE__ */ jsx7(
+        "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
+          },
+          children: triggerLabel
+        }
+      ),
+      InlineErrorVisual.element(error?.message)
+    ] });
+  }
+  if (renderPrompt) {
+    return /* @__PURE__ */ jsx7(Fragment, { children: renderPrompt((selected) => void onConfirm(selected)) });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "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
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("label", { style: { fontSize: VisualTokens.fontSize.body, fontWeight: VisualTokens.fontWeight.strong }, children: [
+          text.promptTitle,
+          /* @__PURE__ */ jsxs6(
+            "select",
+            {
+              value: reason,
+              onChange: (e) => setReason(e.target.value),
+              style: {
+                display: "block",
+                marginTop: VisualTokens.spacing.xs,
+                width: "100%",
+                padding: VisualTokens.spacing.sm
+              },
+              children: [
+                /* @__PURE__ */ jsx7("option", { value: "", children: text.noReason }),
+                reasonCatalog.map((opt) => /* @__PURE__ */ jsx7("option", { value: opt.value, children: opt.label }, opt.value))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: VisualTokens.spacing.md }, children: [
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: () => void onConfirm(reason || void 0),
+              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
+              },
+              children: loading ? text.canceling : text.confirm
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "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
+              },
+              children: text.keep
+            }
+          )
+        ] }),
+        InlineErrorVisual.element(error?.message)
+      ]
+    }
+  );
+}
+
+export {
+  isInsecureUrl,
+  isLoopbackHost,
+  BillingContext,
+  useBilling,
+  BillingProvider,
+  useCheckoutButton,
+  CheckoutButton,
+  SubscriptionStatusBadge,
+  useProducts,
+  PricingTable,
+  BillingHistoryList,
+  CustomerPortalLink,
+  useCancelSubscription,
+  CANCELLATION_REASON_CATALOG,
+  CancelSubscriptionButton
+};