@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/plans/pages/PlansBrowsePage.js

@@ -0,0 +1,314 @@
+import { useBilling as e } from "../../../providers/BillingProvider.js";
+import { ServerError as t } from "../../../shared/components/ServerError.js";
+import "../../../shared/components/index.js";
+import { formatCurrency as n, formatPlanDuration as r, formatPlanDurationLabel as i } from "../../../shared/utils/format.js";
+import { isServerError as a } from "../../../shared/utils/error.js";
+import "../../../shared/utils/index.js";
+import { useBillingNavigate as o } from "../../../hooks/useBillingNavigate.js";
+import { getDisplayPrice as s, useDefaultBillingCurrency as c } from "../../../hooks/useDefaultBillingCurrency.js";
+import { usePlans as l } from "../hooks/usePlans.js";
+import "../hooks/index.js";
+import { useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/plans/pages/PlansBrowsePage.tsx
+function m(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		if (!n.quota) continue;
+		let e = n.quota.id, r = n.quota.limits?.value ?? 0, i = t.get(e);
+		i ? i.totalValue += r : t.set(e, {
+			quotaId: e,
+			name: n.quota.name ?? "Unknown Quota",
+			totalValue: r
+		});
+	}
+	return Array.from(t.values());
+}
+var h = () => {
+	let { t: n } = p(), r = (e, t) => {
+		let r = n(e);
+		return r === e ? t : r;
+	}, i = o(), { productId: s } = e(), { plans: c, isLoading: m, error: h, refetch: v } = l({
+		includeFree: !1,
+		productId: s ?? void 0
+	}), [y, b] = u("grid"), [x, S] = u("all"), C = c.filter((e) => !(!e.isActive || x !== "all" && e.duration !== x));
+	return m && c.length === 0 ? /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", {
+			className: "grid grid-cols-1 md:grid-cols-3 gap-6",
+			children: [
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ f("div", {
+				className: "border border-border rounded-lg p-6 space-y-4",
+				children: [
+					/* @__PURE__ */ d("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ d("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ d("div", {
+						className: "space-y-2",
+						children: [
+							1,
+							2,
+							3
+						].map((e) => /* @__PURE__ */ d("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
+					})
+				]
+			}, e))
+		})]
+	}) : h && a(h) ? /* @__PURE__ */ d("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ d(t, {
+			title: r("billing.plans.serverUnavailable", "Server Unavailable"),
+			message: r("billing.plans.unableToLoadPlans", "Unable to load plans."),
+			onRetry: () => v(),
+			showRetry: !0
+		})
+	}) : /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+				className: "text-2xl font-bold text-foreground",
+				children: r("billing.plans.browsePlansTitle", "Plans")
+			}), /* @__PURE__ */ d("p", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: r("billing.plans.browsePlansSubtitle", "Choose a plan that fits your needs")
+			})] }),
+			/* @__PURE__ */ f("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [/* @__PURE__ */ d("div", {
+					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [
+						"all",
+						"monthly",
+						"yearly"
+					].map((e) => /* @__PURE__ */ d("button", {
+						onClick: () => S(e),
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${x === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						children: e === "all" ? "All" : e === "monthly" ? "Monthly" : "Yearly"
+					}, e))
+				}), /* @__PURE__ */ f("div", {
+					className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [/* @__PURE__ */ d("button", {
+						onClick: () => b("grid"),
+						className: `p-1.5 rounded-md transition-colors ${y === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						title: "Grid view",
+						children: /* @__PURE__ */ d("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
+							})
+						})
+					}), /* @__PURE__ */ d("button", {
+						onClick: () => b("list"),
+						className: `p-1.5 rounded-md transition-colors ${y === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						title: "List view",
+						children: /* @__PURE__ */ d("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M4 6h16M4 12h16M4 18h16"
+							})
+						})
+					})]
+				})]
+			}),
+			C.length === 0 ? /* @__PURE__ */ f("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ d("svg", {
+							className: "w-6 h-6 text-muted-foreground",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+							})
+						})
+					}),
+					/* @__PURE__ */ d("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: r("billing.plans.noPlansAvailable", "No plans available")
+					}),
+					/* @__PURE__ */ d("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: r("billing.plans.checkBackLater", "Check back later for new plans.")
+					})
+				]
+			}) : y === "grid" ? /* @__PURE__ */ d("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+				children: C.map((e) => /* @__PURE__ */ d(g, {
+					plan: e,
+					onView: () => i(`/plans/${e.id}`),
+					onSubscribe: () => i(`/checkout/${e.id}`)
+				}, e.id))
+			}) : /* @__PURE__ */ d("div", {
+				className: "space-y-3",
+				children: C.map((e) => /* @__PURE__ */ d(_, {
+					plan: e,
+					onView: () => i(`/plans/${e.id}`),
+					onSubscribe: () => i(`/checkout/${e.id}`)
+				}, e.id))
+			})
+		]
+	});
+}, g = ({ plan: e, onView: t, onSubscribe: a }) => {
+	let o = m(e.features || []), l = c();
+	return /* @__PURE__ */ f("div", {
+		className: "border border-border rounded-lg bg-card p-6 transition-all hover:shadow-md flex flex-col h-full",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ d("h3", {
+					className: "text-lg font-bold text-foreground",
+					children: e.name
+				}), /* @__PURE__ */ d("span", {
+					className: "text-sm text-muted-foreground",
+					children: i(e.duration)
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex items-baseline gap-1 mb-4",
+				children: [/* @__PURE__ */ d("span", {
+					className: "text-3xl font-bold text-foreground",
+					children: (() => {
+						let { price: t, currency: r } = s(e.price, e.currency, e.currencyPrices, l);
+						return n(t, r);
+					})()
+				}), /* @__PURE__ */ f("span", {
+					className: "text-muted-foreground text-sm",
+					children: ["/ ", r(e.duration)]
+				})]
+			}),
+			o.length > 0 && /* @__PURE__ */ f("ul", {
+				className: "space-y-2 mb-4",
+				children: [o.slice(0, 5).map((e) => /* @__PURE__ */ f("li", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ d("svg", {
+							className: "w-4 h-4 text-status-success-text shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M5 13l4 4L19 7"
+							})
+						}), /* @__PURE__ */ d("span", {
+							className: "text-foreground",
+							children: e.name
+						})]
+					}), /* @__PURE__ */ d("span", {
+						className: "font-medium text-foreground",
+						children: e.totalValue.toLocaleString()
+					})]
+				}, e.quotaId)), o.length > 5 && /* @__PURE__ */ f("li", {
+					className: "text-sm text-muted-foreground pl-6",
+					children: [
+						"+",
+						o.length - 5,
+						" more"
+					]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "space-y-2 pt-4 border-t border-border mt-auto",
+				children: [/* @__PURE__ */ d("button", {
+					onClick: a,
+					className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Subscribe"
+				}), /* @__PURE__ */ d("button", {
+					onClick: t,
+					className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					children: "View Details"
+				})]
+			})
+		]
+	});
+}, _ = ({ plan: e, onView: t, onSubscribe: i }) => {
+	let a = m(e.features || []), o = c();
+	return /* @__PURE__ */ f("div", {
+		className: "flex items-center gap-4 p-4 border border-border rounded-lg bg-card transition-all hover:shadow-sm",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+				children: /* @__PURE__ */ d("svg", {
+					className: "w-5 h-5 text-primary",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ d("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+					})
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ d("h3", {
+					className: "font-semibold text-foreground truncate",
+					children: e.name
+				}), /* @__PURE__ */ f("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						a.length,
+						" quota",
+						a.length === 1 ? "" : "s",
+						" included"
+					]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "text-right",
+				children: [/* @__PURE__ */ d("div", {
+					className: "font-semibold text-foreground",
+					children: (() => {
+						let { price: t, currency: r } = s(e.price, e.currency, e.currencyPrices, o);
+						return n(t, r);
+					})()
+				}), /* @__PURE__ */ f("div", {
+					className: "text-sm text-muted-foreground",
+					children: ["per ", r(e.duration)]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ d("button", {
+					onClick: i,
+					className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Subscribe"
+				}), /* @__PURE__ */ d("button", {
+					onClick: t,
+					className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					children: "View"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { h as PlansBrowsePage };
+
+//# sourceMappingURL=PlansBrowsePage.js.map

package/dist/billing/modules/plans/pages/PlansBrowsePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlansBrowsePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlansBrowsePage.tsx"],"sourcesContent":["/**\n * Plans Module - Plans Browse Page (User-facing)\n * Browse available plans and subscribe. No create/edit/toggle actions.\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { usePlans } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  isServerError,\n} from '../../../shared/utils';\nimport type { Plan, PlanDuration, PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useDefaultBillingCurrency,\n  getDisplayPrice,\n} from '../../../hooks/useDefaultBillingCurrency';\n\ntype ViewMode = 'grid' | 'list';\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { value?: number } | null;\n    const limitValue = limits?.value ?? 0;\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlansBrowsePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const { productId } = useBilling();\n  const { plans, isLoading, error, refetch } = usePlans({\n    includeFree: false,\n    productId: productId ?? undefined,\n  });\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [billingInterval, setBillingInterval] = useState<PlanDuration | 'all'>('all');\n\n  // Only show active plans to users\n  const filteredPlans = plans.filter((plan) => {\n    if (!plan.isActive) return false;\n    if (billingInterval !== 'all' && plan.duration !== billingInterval) return false;\n    return true;\n  });\n\n  if (isLoading && plans.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2, 3].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlans', 'Unable to load plans.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold text-foreground\">\n          {tr('billing.plans.browsePlansTitle', 'Plans')}\n        </h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          {tr('billing.plans.browsePlansSubtitle', 'Choose a plan that fits your needs')}\n        </p>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {(['all', 'monthly', 'yearly'] as const).map((interval) => (\n            <button\n              key={interval}\n              onClick={() => setBillingInterval(interval as PlanDuration | 'all')}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n                billingInterval === interval\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {interval === 'all' ? 'All' : interval === 'monthly' ? 'Monthly' : 'Yearly'}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          <button\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"Grid view\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"List view\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Plans */}\n      {filteredPlans.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.plans.noPlansAvailable', 'No plans available')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.plans.checkBackLater', 'Check back later for new plans.')}\n          </p>\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredPlans.map((plan) => (\n            <BrowsePlanCard\n              key={plan.id}\n              plan={plan}\n              onView={() => navigateTo(`/plans/${plan.id}`)}\n              onSubscribe={() => navigateTo(`/checkout/${plan.id}`)}\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredPlans.map((plan) => (\n            <BrowsePlanRow\n              key={plan.id}\n              plan={plan}\n              onView={() => navigateTo(`/plans/${plan.id}`)}\n              onSubscribe={() => navigateTo(`/checkout/${plan.id}`)}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Browse Plan Card (no edit/toggle)\n// ============================================================================\n\nconst BrowsePlanCard: FC<{ plan: Plan; onView: () => void; onSubscribe: () => void }> = ({\n  plan,\n  onView,\n  onSubscribe,\n}) => {\n  const combinedQuotas = combineQuotas(plan.features || []);\n  const displayCurrency = useDefaultBillingCurrency();\n\n  return (\n    <div className=\"border border-border rounded-lg bg-card p-6 transition-all hover:shadow-md flex flex-col h-full\">\n      <div className=\"mb-4\">\n        <h3 className=\"text-lg font-bold text-foreground\">{plan.name}</h3>\n        <span className=\"text-sm text-muted-foreground\">\n          {formatPlanDurationLabel(plan.duration)}\n        </span>\n      </div>\n\n      <div className=\"flex items-baseline gap-1 mb-4\">\n        <span className=\"text-3xl font-bold text-foreground\">\n          {(() => {\n            const { price, currency } = getDisplayPrice(\n              plan.price,\n              plan.currency,\n              plan.currencyPrices as Record<string, number> | null,\n              displayCurrency\n            );\n            return formatCurrency(price, currency);\n          })()}\n        </span>\n        <span className=\"text-muted-foreground text-sm\">/ {formatPlanDuration(plan.duration)}</span>\n      </div>\n\n      {combinedQuotas.length > 0 && (\n        <ul className=\"space-y-2 mb-4\">\n          {combinedQuotas.slice(0, 5).map((quota) => (\n            <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n              <div className=\"flex items-center gap-2\">\n                <svg\n                  className=\"w-4 h-4 text-status-success-text shrink-0\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M5 13l4 4L19 7\"\n                  />\n                </svg>\n                <span className=\"text-foreground\">{quota.name}</span>\n              </div>\n              <span className=\"font-medium text-foreground\">\n                {quota.totalValue.toLocaleString()}\n              </span>\n            </li>\n          ))}\n          {combinedQuotas.length > 5 && (\n            <li className=\"text-sm text-muted-foreground pl-6\">\n              +{combinedQuotas.length - 5} more\n            </li>\n          )}\n        </ul>\n      )}\n\n      <div className=\"space-y-2 pt-4 border-t border-border mt-auto\">\n        <button\n          onClick={onSubscribe}\n          className=\"w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n        >\n          Subscribe\n        </button>\n        <button\n          onClick={onView}\n          className=\"w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n        >\n          View Details\n        </button>\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Browse Plan Row (no edit/toggle)\n// ============================================================================\n\nconst BrowsePlanRow: FC<{ plan: Plan; onView: () => void; onSubscribe: () => void }> = ({\n  plan,\n  onView,\n  onSubscribe,\n}) => {\n  const combinedQuotas = combineQuotas(plan.features || []);\n  const displayCurrency = useDefaultBillingCurrency();\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border rounded-lg bg-card transition-all hover:shadow-sm\">\n      <div className=\"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n        <svg className=\"w-5 h-5 text-primary\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n          />\n        </svg>\n      </div>\n\n      <div className=\"flex-1 min-w-0\">\n        <h3 className=\"font-semibold text-foreground truncate\">{plan.name}</h3>\n        <p className=\"text-sm text-muted-foreground\">\n          {combinedQuotas.length} quota{combinedQuotas.length !== 1 ? 's' : ''} included\n        </p>\n      </div>\n\n      <div className=\"text-right\">\n        <div className=\"font-semibold text-foreground\">\n          {(() => {\n            const { price, currency } = getDisplayPrice(\n              plan.price,\n              plan.currency,\n              plan.currencyPrices as Record<string, number> | null,\n              displayCurrency\n            );\n            return formatCurrency(price, currency);\n          })()}\n        </div>\n        <div className=\"text-sm text-muted-foreground\">per {formatPlanDuration(plan.duration)}</div>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <button\n          onClick={onSubscribe}\n          className=\"px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n        >\n          Subscribe\n        </button>\n        <button\n          onClick={onView}\n          className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n        >\n          View\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlansListPage.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const PlansListPage: FC;
+//# sourceMappingURL=PlansListPage.d.ts.map

package/dist/billing/modules/plans/pages/PlansListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlansListPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/plans/pages/PlansListPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA0DnD,eAAO,MAAM,aAAa,EAAE,EA4T3B,CAAC"}