@burdenoff/microfe-billing 2026.530.4 → 2026.531.2

package/dist/billing/modules/addons/pages/AddonsBrowsePage.js

@@ -1,21 +1,39 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { formatCurrency as t, formatPlanDuration as n, formatPlanDurationLabel as r } from "../../../shared/utils/format.js";
-import { useAddonCartStore as i } from "../store/addonCartStore.js";
-import { useBillingNavigate as a } from "../../../hooks/useBillingNavigate.js";
-import { useAddons as o } from "../hooks/useAddons.js";
+import { getPlanFeatureQuantity as i } from "../../../shared/utils/planFeatureQuantity.js";
+import { useAddonCartStore as a } from "../store/addonCartStore.js";
+import { useBillingNavigate as o } from "../../../hooks/useBillingNavigate.js";
+import { useAddons as s } from "../hooks/useAddons.js";
 import "../hooks/index.js";
-import { useDefaultBillingCurrency as s } from "../../../hooks/useDefaultBillingCurrency.js";
-import { useMemo as c, useState as l } from "react";
-import { Minus as u, Plus as d, ShoppingCart as f, Trash2 as p, X as m } from "lucide-react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useDefaultBillingCurrency as c } from "../../../hooks/useDefaultBillingCurrency.js";
+import { useMemo as l, useState as u } from "react";
+import { Minus as d, Package as f, Plus as p, ShoppingCart as m, Trash2 as h, X as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/billing/modules/addons/pages/AddonsBrowsePage.tsx
-function y(e) {
+function x(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = n.name.indexOf(" — "), r = e === -1 ? n.name : n.name.slice(0, e).trim(), i = t.get(r) ?? [];
+		i.push(n), t.set(r, i);
+	}
+	let n = [];
+	for (let [e, r] of t) r.length > 1 ? n.push({
+		type: "group",
+		name: e,
+		addons: r
+	}) : n.push({
+		type: "standalone",
+		addon: r[0]
+	});
+	return n;
+}
+function S(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, {
+		let e = n.quota.id, r = i(n), a = t.get(e);
+		a ? a.totalValue += r : t.set(e, {
 			quotaId: e,
 			name: n.quota.name ?? "Unknown Quota",
 			totalValue: r
@@ -23,7 +41,7 @@ function y(e) {
 	}
 	return Array.from(t.values());
 }
-function b(e, t = "USD") {
+function C(e, t = "USD") {
 	if (e.currencyPrices && typeof e.currencyPrices == "object") {
 		let n = e.currencyPrices;
 		if (n[t] !== void 0 && n[t] !== null) return {
@@ -36,113 +54,113 @@ function b(e, t = "USD") {
 		currency: e.currency || "USD"
 	};
 }
-var x = () => {
-	let { t } = v(), n = (e, n) => {
+var w = () => {
+	let { t } = b(), n = (e, n) => {
 		let r = t(e);
 		return r === e ? n : r;
-	}, r = a(), { productId: c } = e(), { addons: u, isLoading: d, error: f, refetch: p } = o({
+	}, r = o(), { productId: i } = e(), { addons: d, isLoading: f, error: p, refetch: m } = s({
 		includeFree: !1,
-		productId: c ?? void 0
-	}), { addToCart: m, removeFromCart: h, updateQuantity: y, isInCart: b, getCartItem: x } = i(), [T, E] = l("grid"), [D, O] = l("all"), k = s(), A = u.filter((e) => !(!e.isActive || D !== "all" && e.duration !== D));
-	return d && u.length === 0 ? /* @__PURE__ */ _("div", {
+		productId: i ?? void 0
+	}), { addToCart: h, removeFromCart: g, updateQuantity: _, isInCart: S, getCartItem: C } = a(), [w, k] = u("grid"), [A, j] = u("all"), M = c(), N = d.filter((e) => !(!e.isActive || A !== "all" && e.duration !== A)), P = l(() => x(N), [N]);
+	return f && d.length === 0 ? /* @__PURE__ */ y("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ v("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", {
 			className: "grid grid-cols-1 md:grid-cols-3 gap-6",
 			children: [
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ _("div", {
+			].map((e) => /* @__PURE__ */ y("div", {
 				className: "border border-border rounded-lg p-6 space-y-4",
 				children: [
-					/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
-					/* @__PURE__ */ g("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ v("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ v("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ v("div", {
 						className: "space-y-2",
 						children: [
 							1,
 							2,
 							3
-						].map((e) => /* @__PURE__ */ g("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
+						].map((e) => /* @__PURE__ */ v("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
 					})
 				]
 			}, e))
 		})]
-	}) : f ? /* @__PURE__ */ g("div", {
+	}) : p ? /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ _("div", {
+		children: /* @__PURE__ */ y("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ g("h2", {
+				/* @__PURE__ */ v("h2", {
 					className: "text-lg font-semibold text-foreground",
 					children: n("billing.addons.failedToLoad", "Failed to load addons")
 				}),
-				/* @__PURE__ */ g("p", {
+				/* @__PURE__ */ v("p", {
 					className: "text-sm text-muted-foreground",
-					children: f.message
+					children: p.message
 				}),
-				/* @__PURE__ */ g("button", {
+				/* @__PURE__ */ v("button", {
 					type: "button",
-					onClick: () => p(),
+					onClick: () => m(),
 					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 					children: "Try Again"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ _("div", {
+	}) : /* @__PURE__ */ y("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+			/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
 				className: "text-2xl font-bold text-foreground",
 				children: n("billing.addons.title", "Addons")
-			}), /* @__PURE__ */ g("p", {
+			}), /* @__PURE__ */ v("p", {
 				className: "text-sm text-muted-foreground mt-1",
 				children: n("billing.addons.subtitle", "Enhance your subscription with additional features")
 			})] }),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
 					children: [
 						"all",
 						"monthly",
 						"yearly"
-					].map((e) => /* @__PURE__ */ g("button", {
+					].map((e) => /* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => O(e),
-						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${D === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						onClick: () => j(e),
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${A === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 						children: e === "all" ? "All" : e === "monthly" ? "Monthly" : "Yearly"
 					}, e))
-				}), /* @__PURE__ */ _("div", {
+				}), /* @__PURE__ */ y("div", {
 					className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
-					children: [/* @__PURE__ */ g("button", {
+					children: [/* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => E("grid"),
-						className: `p-1.5 rounded-md transition-colors ${T === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						onClick: () => k("grid"),
+						className: `p-1.5 rounded-md transition-colors ${w === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 						title: "Grid view",
-						children: /* @__PURE__ */ g("svg", {
+						children: /* @__PURE__ */ v("svg", {
 							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ g("path", {
+							children: /* @__PURE__ */ v("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__ */ g("button", {
+					}), /* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => E("list"),
-						className: `p-1.5 rounded-md transition-colors ${T === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						onClick: () => k("list"),
+						className: `p-1.5 rounded-md transition-colors ${w === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 						title: "List view",
-						children: /* @__PURE__ */ g("svg", {
+						children: /* @__PURE__ */ v("svg", {
 							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ g("path", {
+							children: /* @__PURE__ */ v("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -152,17 +170,17 @@ var x = () => {
 					})]
 				})]
 			}),
-			A.length === 0 ? /* @__PURE__ */ _("div", {
+			N.length === 0 ? /* @__PURE__ */ y("div", {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ v("div", {
 						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ g("svg", {
+						children: /* @__PURE__ */ v("svg", {
 							className: "size-6 text-muted-foreground",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ g("path", {
+							children: /* @__PURE__ */ v("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -170,55 +188,239 @@ var x = () => {
 							})
 						})
 					}),
-					/* @__PURE__ */ g("h3", {
+					/* @__PURE__ */ v("h3", {
 						className: "text-lg font-medium text-foreground",
 						children: n("billing.addons.noAddonsAvailable", "No addons available")
 					}),
-					/* @__PURE__ */ g("p", {
+					/* @__PURE__ */ v("p", {
 						className: "text-sm text-muted-foreground mt-1",
 						children: n("billing.addons.checkBackLater", "Check back later for new addons.")
 					})
 				]
-			}) : T === "grid" ? /* @__PURE__ */ g("div", {
-				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
-				children: A.map((e) => {
-					let t = x(e.id);
-					return /* @__PURE__ */ g(S, {
-						addon: e,
-						onView: () => r(`/addons/${e.id}`),
-						isInCart: b(e.id),
-						cartQuantity: t?.quantity || 0,
-						onAddToCart: m,
-						onUpdateQuantity: y,
-						onRemoveFromCart: h,
-						displayCurrency: k
-					}, e.id);
-				})
-			}) : /* @__PURE__ */ g("div", {
-				className: "space-y-3",
-				children: A.map((e) => {
-					let t = x(e.id);
-					return /* @__PURE__ */ g(C, {
-						addon: e,
-						onView: () => r(`/addons/${e.id}`),
-						isInCart: b(e.id),
-						cartQuantity: t?.quantity || 0,
-						onAddToCart: m,
-						onUpdateQuantity: y,
-						onRemoveFromCart: h,
-						displayCurrency: k
-					}, e.id);
+			}) : /* @__PURE__ */ v("div", {
+				className: "space-y-8",
+				children: P.map((e) => {
+					if (e.type === "group") return /* @__PURE__ */ v(T, {
+						groupName: e.name,
+						addons: e.addons,
+						viewMode: w,
+						getCartItem: C,
+						isInCart: S,
+						addToCart: h,
+						updateQuantity: _,
+						removeFromCart: g,
+						displayCurrency: M,
+						navigateTo: r
+					}, e.name);
+					let t = e.addon, n = C(t.id);
+					return v(w === "grid" ? E : D, {
+						addon: t,
+						onView: () => r(`/addons/${t.id}`),
+						isInCart: S(t.id),
+						cartQuantity: n?.quantity || 0,
+						onAddToCart: h,
+						onUpdateQuantity: _,
+						onRemoveFromCart: g,
+						displayCurrency: M
+					}, t.id);
 				})
 			}),
-			/* @__PURE__ */ g(w, { displayCurrency: k })
+			/* @__PURE__ */ v(O, { displayCurrency: M })
 		]
 	});
-}, S = ({ addon: e, onView: i, isInCart: a, cartQuantity: o, onAddToCart: s, onUpdateQuantity: l, onRemoveFromCart: m, displayCurrency: h }) => {
-	let v = c(() => y(e.features || []), [e.features]);
-	return /* @__PURE__ */ _("div", {
+}, T = ({ groupName: e, addons: i, viewMode: a, getCartItem: o, isInCart: s, addToCart: c, updateQuantity: l, removeFromCart: u, displayCurrency: g, navigateTo: _ }) => {
+	let b = i.filter((e) => s(e.id)).length;
+	return /* @__PURE__ */ y("div", {
+		className: "border border-border rounded-xl overflow-hidden",
+		children: [/* @__PURE__ */ y("div", {
+			className: "flex items-center justify-between px-5 py-3 bg-muted/40 border-b border-border",
+			children: [/* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ v(f, { className: "size-4 text-muted-foreground" }),
+					/* @__PURE__ */ v("h2", {
+						className: "font-semibold text-foreground",
+						children: e
+					}),
+					/* @__PURE__ */ y("span", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							i.length,
+							" option",
+							i.length === 1 ? "" : "s"
+						]
+					})
+				]
+			}), b > 0 && /* @__PURE__ */ y("span", {
+				className: "text-xs font-medium px-2 py-0.5 bg-primary text-primary-foreground rounded-full",
+				children: [b, " in cart"]
+			})]
+		}), a === "grid" ? /* @__PURE__ */ v("div", {
+			className: "p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
+			children: i.map((e) => {
+				let i = o(e.id), a = e.name.includes(" — ") ? e.name.slice(e.name.indexOf(" — ") + 3).trim() : e.name, f = s(e.id), b = i?.quantity ?? 0, { price: x, currency: S } = (() => {
+					if (e.currencyPrices && typeof e.currencyPrices == "object") {
+						let t = e.currencyPrices;
+						if (t[g] != null) return {
+							price: t[g],
+							currency: g
+						};
+					}
+					return {
+						price: e.price,
+						currency: e.currency || "USD"
+					};
+				})();
+				return /* @__PURE__ */ y("div", {
+					className: `relative flex flex-col rounded-lg border p-4 transition-all ${f ? "border-primary bg-primary/5" : "border-border bg-card hover:border-primary/40 hover:shadow-sm"}`,
+					children: [
+						f && /* @__PURE__ */ y("span", {
+							className: "absolute top-2 right-2 text-xs font-medium bg-primary text-primary-foreground px-1.5 py-0.5 rounded",
+							children: ["×", b]
+						}),
+						/* @__PURE__ */ v("p", {
+							className: "font-semibold text-foreground text-sm mb-1",
+							children: a
+						}),
+						/* @__PURE__ */ v("p", {
+							className: "text-xs text-muted-foreground mb-3",
+							children: r(e.duration)
+						}),
+						/* @__PURE__ */ y("p", {
+							className: "text-lg font-bold text-foreground mb-3",
+							children: [t(x, S), /* @__PURE__ */ y("span", {
+								className: "text-xs font-normal text-muted-foreground ml-1",
+								children: ["/ ", n(e.duration)]
+							})]
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "mt-auto flex flex-col gap-2",
+							children: [f ? /* @__PURE__ */ y("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ v("button", {
+										type: "button",
+										onClick: () => l(e.id, b - 1),
+										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										children: /* @__PURE__ */ v(d, { className: "size-3" })
+									}),
+									/* @__PURE__ */ v("span", {
+										className: "flex-1 text-center text-sm font-medium",
+										children: b
+									}),
+									/* @__PURE__ */ v("button", {
+										type: "button",
+										onClick: () => l(e.id, b + 1),
+										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										children: /* @__PURE__ */ v(p, { className: "size-3" })
+									}),
+									/* @__PURE__ */ v("button", {
+										type: "button",
+										onClick: () => u(e.id),
+										className: "p-1 rounded text-destructive hover:bg-destructive/10 transition-colors",
+										children: /* @__PURE__ */ v(h, { className: "size-3" })
+									})
+								]
+							}) : /* @__PURE__ */ y("button", {
+								type: "button",
+								onClick: () => c(e),
+								className: "w-full py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-1",
+								children: [/* @__PURE__ */ v(m, { className: "size-3" }), "Add to Cart"]
+							}), /* @__PURE__ */ v("button", {
+								type: "button",
+								onClick: () => _(`/addons/${e.id}`),
+								className: "w-full py-1.5 text-xs font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								children: "Details"
+							})]
+						})
+					]
+				}, e.id);
+			})
+		}) : /* @__PURE__ */ v("div", {
+			className: "divide-y divide-border",
+			children: i.map((e) => {
+				let i = o(e.id), a = e.name.includes(" — ") ? e.name.slice(e.name.indexOf(" — ") + 3).trim() : e.name, f = s(e.id), b = i?.quantity ?? 0, { price: x, currency: S } = (() => {
+					if (e.currencyPrices && typeof e.currencyPrices == "object") {
+						let t = e.currencyPrices;
+						if (t[g] != null) return {
+							price: t[g],
+							currency: g
+						};
+					}
+					return {
+						price: e.price,
+						currency: e.currency || "USD"
+					};
+				})();
+				return /* @__PURE__ */ y("div", {
+					className: `flex items-center gap-4 px-5 py-3 transition-colors ${f ? "bg-primary/5" : "hover:bg-muted/30"}`,
+					children: [
+						/* @__PURE__ */ y("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ v("p", {
+								className: "font-medium text-foreground text-sm",
+								children: a
+							}), /* @__PURE__ */ v("p", {
+								className: "text-xs text-muted-foreground",
+								children: r(e.duration)
+							})]
+						}),
+						/* @__PURE__ */ y("p", {
+							className: "font-semibold text-foreground text-sm whitespace-nowrap",
+							children: [t(x, S), /* @__PURE__ */ y("span", {
+								className: "text-xs font-normal text-muted-foreground ml-1",
+								children: ["/ ", n(e.duration)]
+							})]
+						}),
+						f ? /* @__PURE__ */ y("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ v("button", {
+									type: "button",
+									onClick: () => l(e.id, b - 1),
+									className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+									children: /* @__PURE__ */ v(d, { className: "size-3" })
+								}),
+								/* @__PURE__ */ v("span", {
+									className: "w-6 text-center text-sm font-medium",
+									children: b
+								}),
+								/* @__PURE__ */ v("button", {
+									type: "button",
+									onClick: () => l(e.id, b + 1),
+									className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+									children: /* @__PURE__ */ v(p, { className: "size-3" })
+								}),
+								/* @__PURE__ */ v("button", {
+									type: "button",
+									onClick: () => u(e.id),
+									className: "p-1 rounded text-destructive hover:bg-destructive/10 transition-colors",
+									children: /* @__PURE__ */ v(h, { className: "size-3" })
+								})
+							]
+						}) : /* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => c(e),
+							className: "px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1",
+							children: [/* @__PURE__ */ v(m, { className: "size-3" }), "Add"]
+						}),
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							onClick: () => _(`/addons/${e.id}`),
+							className: "px-2 py-1 text-xs font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							children: "Details"
+						})
+					]
+				}, e.id);
+			})
+		})]
+	});
+}, E = ({ addon: e, onView: i, isInCart: a, cartQuantity: o, onAddToCart: s, onUpdateQuantity: c, onRemoveFromCart: u, displayCurrency: f }) => {
+	let g = l(() => S(e.features || []), [e.features]);
+	return /* @__PURE__ */ y("div", {
 		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${a ? "border-primary bg-primary/5" : "border-border bg-card"}`,
 		children: [
-			a && /* @__PURE__ */ _("span", {
+			a && /* @__PURE__ */ y("span", {
 				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded",
 				children: [
 					"In Cart (",
@@ -226,14 +428,14 @@ var x = () => {
 					")"
 				]
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ v("div", {
 				className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
-				children: /* @__PURE__ */ g("svg", {
+				children: /* @__PURE__ */ v("svg", {
 					className: "size-5 text-primary",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
-					children: /* @__PURE__ */ g("path", {
+					children: /* @__PURE__ */ v("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
@@ -241,100 +443,100 @@ var x = () => {
 					})
 				})
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ y("div", {
 				className: "mb-4",
-				children: [/* @__PURE__ */ g("h3", {
+				children: [/* @__PURE__ */ v("h3", {
 					className: "text-lg font-bold text-foreground",
 					children: e.name
-				}), /* @__PURE__ */ g("span", {
+				}), /* @__PURE__ */ v("span", {
 					className: "text-sm text-muted-foreground",
 					children: r(e.duration)
 				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-baseline gap-1 mb-4",
-				children: [/* @__PURE__ */ g("span", {
+				children: [/* @__PURE__ */ v("span", {
 					className: "text-2xl font-bold text-foreground",
 					children: (() => {
-						let { price: n, currency: r } = b(e, h);
+						let { price: n, currency: r } = C(e, f);
 						return t(n, r);
 					})()
-				}), /* @__PURE__ */ _("span", {
+				}), /* @__PURE__ */ y("span", {
 					className: "text-muted-foreground text-sm",
 					children: ["/ ", n(e.duration)]
 				})]
 			}),
-			v.length > 0 && /* @__PURE__ */ _("ul", {
+			g.length > 0 && /* @__PURE__ */ y("ul", {
 				className: "space-y-2 mb-4",
-				children: [v.slice(0, 4).map((e) => /* @__PURE__ */ _("li", {
+				children: [g.slice(0, 4).map((e) => /* @__PURE__ */ y("li", {
 					className: "flex items-center justify-between text-sm",
-					children: [/* @__PURE__ */ _("div", {
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ g("svg", {
+						children: [/* @__PURE__ */ v("svg", {
 							className: "size-4 text-status-success-text shrink-0",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ g("path", {
+							children: /* @__PURE__ */ v("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								d: "M5 13l4 4L19 7"
 							})
-						}), /* @__PURE__ */ g("span", {
+						}), /* @__PURE__ */ v("span", {
 							className: "text-foreground",
 							children: e.name
 						})]
-					}), /* @__PURE__ */ g("span", {
+					}), /* @__PURE__ */ v("span", {
 						className: "font-medium text-foreground",
 						children: e.totalValue.toLocaleString()
 					})]
-				}, e.quotaId)), v.length > 4 && /* @__PURE__ */ _("li", {
+				}, e.quotaId)), g.length > 4 && /* @__PURE__ */ y("li", {
 					className: "text-sm text-muted-foreground pl-6",
 					children: [
 						"+",
-						v.length - 4,
+						g.length - 4,
 						" more quotas"
 					]
 				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ y("div", {
 				className: "space-y-2 pt-4 border-t border-border mt-auto",
-				children: [a ? /* @__PURE__ */ _("div", {
+				children: [a ? /* @__PURE__ */ y("div", {
 					className: "flex items-center justify-between gap-2",
-					children: [/* @__PURE__ */ _("div", {
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ g("button", {
+							/* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: () => l(e.id, o - 1),
+								onClick: () => c(e.id, o - 1),
 								className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
-								children: /* @__PURE__ */ g(u, { className: "size-4" })
+								children: /* @__PURE__ */ v(d, { className: "size-4" })
 							}),
-							/* @__PURE__ */ g("span", {
+							/* @__PURE__ */ v("span", {
 								className: "w-10 text-center font-medium",
 								children: o
 							}),
-							/* @__PURE__ */ g("button", {
+							/* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: () => l(e.id, o + 1),
+								onClick: () => c(e.id, o + 1),
 								className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
-								children: /* @__PURE__ */ g(d, { className: "size-4" })
+								children: /* @__PURE__ */ v(p, { className: "size-4" })
 							})
 						]
-					}), /* @__PURE__ */ g("button", {
+					}), /* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => m(e.id),
+						onClick: () => u(e.id),
 						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
 						title: "Remove from cart",
-						children: /* @__PURE__ */ g(p, { className: "size-4" })
+						children: /* @__PURE__ */ v(h, { className: "size-4" })
 					})]
-				}) : /* @__PURE__ */ _("button", {
+				}) : /* @__PURE__ */ y("button", {
 					type: "button",
 					onClick: () => s(e),
 					className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-2",
-					children: [/* @__PURE__ */ g(f, { className: "size-4" }), "Add to Cart"]
-				}), /* @__PURE__ */ g("button", {
+					children: [/* @__PURE__ */ v(m, { className: "size-4" }), "Add to Cart"]
+				}), /* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: i,
 					className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
@@ -343,19 +545,19 @@ var x = () => {
 			})
 		]
 	});
-}, C = ({ addon: e, onView: r, isInCart: i, cartQuantity: a, onAddToCart: o, onUpdateQuantity: s, onRemoveFromCart: l, displayCurrency: m }) => {
-	let h = c(() => y(e.features || []), [e.features]);
-	return /* @__PURE__ */ _("div", {
+}, D = ({ addon: e, onView: r, isInCart: i, cartQuantity: a, onAddToCart: o, onUpdateQuantity: s, onRemoveFromCart: c, displayCurrency: u }) => {
+	let f = l(() => S(e.features || []), [e.features]);
+	return /* @__PURE__ */ y("div", {
 		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${i ? "border-primary bg-primary/5" : "border-border bg-card"}`,
 		children: [
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ v("div", {
 				className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
-				children: /* @__PURE__ */ g("svg", {
+				children: /* @__PURE__ */ v("svg", {
 					className: "size-5 text-primary",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
-					children: /* @__PURE__ */ g("path", {
+					children: /* @__PURE__ */ v("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
@@ -363,14 +565,14 @@ var x = () => {
 					})
 				})
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex-1 min-w-0",
-				children: [/* @__PURE__ */ _("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ g("h3", {
+					children: [/* @__PURE__ */ v("h3", {
 						className: "font-semibold text-foreground truncate",
 						children: e.name
-					}), i && /* @__PURE__ */ _("span", {
+					}), i && /* @__PURE__ */ y("span", {
 						className: "px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded",
 						children: [
 							"In Cart (",
@@ -378,62 +580,62 @@ var x = () => {
 							")"
 						]
 					})]
-				}), /* @__PURE__ */ _("p", {
+				}), /* @__PURE__ */ y("p", {
 					className: "text-sm text-muted-foreground",
 					children: [
-						h.length,
+						f.length,
 						" quota",
-						h.length === 1 ? "" : "s"
+						f.length === 1 ? "" : "s"
 					]
 				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ y("div", {
 				className: "text-right",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "font-semibold text-foreground",
 					children: (() => {
-						let { price: n, currency: r } = b(e, m);
+						let { price: n, currency: r } = C(e, u);
 						return t(n, r);
 					})()
-				}), /* @__PURE__ */ _("div", {
+				}), /* @__PURE__ */ y("div", {
 					className: "text-sm text-muted-foreground",
 					children: ["per ", n(e.duration)]
 				})]
 			}),
-			i ? /* @__PURE__ */ _("div", {
+			i ? /* @__PURE__ */ y("div", {
 				className: "flex items-center gap-1",
 				children: [
-					/* @__PURE__ */ g("button", {
+					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => s(e.id, a - 1),
 						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
-						children: /* @__PURE__ */ g(u, { className: "size-4" })
+						children: /* @__PURE__ */ v(d, { className: "size-4" })
 					}),
-					/* @__PURE__ */ g("span", {
+					/* @__PURE__ */ v("span", {
 						className: "w-8 text-center font-medium",
 						children: a
 					}),
-					/* @__PURE__ */ g("button", {
+					/* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => s(e.id, a + 1),
 						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
-						children: /* @__PURE__ */ g(d, { className: "size-4" })
+						children: /* @__PURE__ */ v(p, { className: "size-4" })
 					}),
-					/* @__PURE__ */ g("button", {
+					/* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => l(e.id),
+						onClick: () => c(e.id),
 						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1",
 						title: "Remove from cart",
-						children: /* @__PURE__ */ g(p, { className: "size-4" })
+						children: /* @__PURE__ */ v(h, { className: "size-4" })
 					})
 				]
-			}) : /* @__PURE__ */ _("button", {
+			}) : /* @__PURE__ */ y("button", {
 				type: "button",
 				onClick: () => o(e),
 				className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1.5",
-				children: [/* @__PURE__ */ g(f, { className: "size-4" }), "Add"]
+				children: [/* @__PURE__ */ v(m, { className: "size-4" }), "Add"]
 			}),
-			/* @__PURE__ */ g("button", {
+			/* @__PURE__ */ v("button", {
 				type: "button",
 				onClick: r,
 				className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
@@ -441,18 +643,18 @@ var x = () => {
 			})
 		]
 	});
-}, w = ({ displayCurrency: e }) => {
-	let { t: r } = v(), o = (e, t) => {
+}, O = ({ displayCurrency: e }) => {
+	let { t: r } = b(), i = (e, t) => {
 		let n = r(e);
 		return n === e ? t : n;
-	}, s = a(), { items: c, isCartOpen: l, toggleCart: y, closeCart: x, removeFromCart: S, updateQuantity: C, clearCart: w } = i(), T = c.reduce((e, t) => e + t.quantity, 0);
-	return c.length === 0 && !l ? null : /* @__PURE__ */ _(h, { children: [!l && c.length > 0 && /* @__PURE__ */ _("button", {
+	}, s = o(), { items: c, isCartOpen: l, toggleCart: u, closeCart: f, removeFromCart: x, updateQuantity: S, clearCart: w } = a(), T = c.reduce((e, t) => e + t.quantity, 0);
+	return c.length === 0 && !l ? null : /* @__PURE__ */ y(_, { children: [!l && c.length > 0 && /* @__PURE__ */ y("button", {
 		type: "button",
-		onClick: y,
+		onClick: u,
 		className: "fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:bg-primary/90 transition-all",
 		children: [
-			/* @__PURE__ */ g(f, { className: "size-5" }),
-			/* @__PURE__ */ _("span", {
+			/* @__PURE__ */ v(m, { className: "size-5" }),
+			/* @__PURE__ */ y("span", {
 				className: "font-medium",
 				children: [
 					T,
@@ -460,33 +662,33 @@ var x = () => {
 					T === 1 ? "" : "s"
 				]
 			}),
-			/* @__PURE__ */ g("span", {
+			/* @__PURE__ */ v("span", {
 				className: "px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm",
 				children: t(c.reduce((t, { addon: n, quantity: r }) => {
-					let { price: i } = b(n, e);
+					let { price: i } = C(n, e);
 					return t + i * r;
 				}, 0), e)
 			})
 		]
-	}), l && /* @__PURE__ */ _("div", {
+	}), l && /* @__PURE__ */ y("div", {
 		className: "fixed inset-0 z-50 flex items-end sm:items-center justify-center",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ v("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
-			onClick: x
-		}), /* @__PURE__ */ _("div", {
+			onClick: f
+		}), /* @__PURE__ */ y("div", {
 			className: "relative w-full max-w-md max-h-[80vh] bg-card border border-border rounded-t-xl sm:rounded-xl shadow-xl overflow-hidden",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ y("div", {
 					className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30",
-					children: [/* @__PURE__ */ _("div", {
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ g(f, { className: "size-5 text-foreground" }),
-							/* @__PURE__ */ g("h3", {
+							/* @__PURE__ */ v(m, { className: "size-5 text-foreground" }),
+							/* @__PURE__ */ v("h3", {
 								className: "font-semibold text-foreground",
-								children: o("billing.addons.yourCart", "Your Cart")
+								children: i("billing.addons.yourCart", "Your Cart")
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ y("span", {
 								className: "px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full",
 								children: [
 									T,
@@ -495,28 +697,28 @@ var x = () => {
 								]
 							})
 						]
-					}), /* @__PURE__ */ g("button", {
+					}), /* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: x,
+						onClick: f,
 						className: "p-1.5 rounded hover:bg-muted transition-colors",
-						children: /* @__PURE__ */ g(m, { className: "size-5" })
+						children: /* @__PURE__ */ v(g, { className: "size-5" })
 					})]
 				}),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ v("div", {
 					className: "overflow-y-auto max-h-[50vh] divide-y divide-border",
-					children: c.map(({ addon: r, quantity: i }) => /* @__PURE__ */ _("div", {
+					children: c.map(({ addon: r, quantity: i }) => /* @__PURE__ */ y("div", {
 						className: "p-4 flex items-center gap-3",
 						children: [
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex-1 min-w-0",
-								children: [/* @__PURE__ */ g("h4", {
+								children: [/* @__PURE__ */ v("h4", {
 									className: "font-medium text-foreground truncate",
 									children: r.name
-								}), /* @__PURE__ */ _("p", {
+								}), /* @__PURE__ */ y("p", {
 									className: "text-sm text-muted-foreground",
 									children: [
 										(() => {
-											let { price: n, currency: i } = b(r, e);
+											let { price: n, currency: i } = C(r, e);
 											return t(n, i);
 										})(),
 										" ",
@@ -525,68 +727,68 @@ var x = () => {
 									]
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ y("div", {
 								className: "flex items-center gap-1",
 								children: [
-									/* @__PURE__ */ g("button", {
+									/* @__PURE__ */ v("button", {
 										type: "button",
-										onClick: () => C(r.id, i - 1),
+										onClick: () => S(r.id, i - 1),
 										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
-										children: /* @__PURE__ */ g(u, { className: "size-3" })
+										children: /* @__PURE__ */ v(d, { className: "size-3" })
 									}),
-									/* @__PURE__ */ g("span", {
+									/* @__PURE__ */ v("span", {
 										className: "w-6 text-center text-sm font-medium",
 										children: i
 									}),
-									/* @__PURE__ */ g("button", {
+									/* @__PURE__ */ v("button", {
 										type: "button",
-										onClick: () => C(r.id, i + 1),
+										onClick: () => S(r.id, i + 1),
 										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
-										children: /* @__PURE__ */ g(d, { className: "size-3" })
+										children: /* @__PURE__ */ v(p, { className: "size-3" })
 									})
 								]
 							}),
-							/* @__PURE__ */ g("p", {
+							/* @__PURE__ */ v("p", {
 								className: "font-medium text-foreground",
 								children: (() => {
-									let { price: n, currency: a } = b(r, e);
+									let { price: n, currency: a } = C(r, e);
 									return t(n * i, a);
 								})()
 							}),
-							/* @__PURE__ */ g("button", {
+							/* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: () => S(r.id),
+								onClick: () => x(r.id),
 								className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
-								children: /* @__PURE__ */ g(p, { className: "size-4" })
+								children: /* @__PURE__ */ v(h, { className: "size-4" })
 							})
 						]
 					}, r.id))
 				}),
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ y("div", {
 					className: "border-t border-border p-4 space-y-3 bg-muted/20",
-					children: [/* @__PURE__ */ _("div", {
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center justify-between text-lg font-semibold",
-						children: [/* @__PURE__ */ g("span", {
+						children: [/* @__PURE__ */ v("span", {
 							className: "text-foreground",
-							children: o("billing.addons.total", "Total")
-						}), /* @__PURE__ */ g("span", {
+							children: i("billing.addons.total", "Total")
+						}), /* @__PURE__ */ v("span", {
 							className: "text-foreground",
 							children: t(c.reduce((t, { addon: n, quantity: r }) => {
-								let { price: i } = b(n, e);
+								let { price: i } = C(n, e);
 								return t + i * r;
 							}, 0), e)
 						})]
-					}), /* @__PURE__ */ _("div", {
+					}), /* @__PURE__ */ y("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ g("button", {
+						children: [/* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: w,
 							className: "flex-1 px-4 py-2.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
 							children: "Clear Cart"
-						}), /* @__PURE__ */ g("button", {
+						}), /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => {
-								x(), s("/checkout/addons");
+								f(), s("/checkout/addons");
 							},
 							className: "flex-1 px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 							children: "Checkout"
@@ -598,6 +800,6 @@ var x = () => {
 	})] });
 };
 //#endregion
-export { x as AddonsBrowsePage };
+export { w as AddonsBrowsePage };
 
 //# sourceMappingURL=AddonsBrowsePage.js.map