@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,744 @@
+import { formatCurrency as e, formatPlanDuration as t, formatPlanDurationLabel as n } from "../../../shared/utils/format.js";
+import { useBillingPermissions as r } from "../../../hooks/useBillingPermissions.js";
+import { useAddonCartStore as i } from "../store/addonCartStore.js";
+import { useBillingNavigate as a } from "../../../hooks/useBillingNavigate.js";
+import { useAddonMutations as o, useAddons as s } from "../hooks/useAddons.js";
+import "../hooks/index.js";
+import { useDefaultBillingCurrency as c } from "../../../hooks/useDefaultBillingCurrency.js";
+import { useMemo as l, useState as u } from "react";
+import { Minus as d, Plus as f, ShoppingCart as p, Trash2 as m, X as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/addons/pages/AddonsListPage.tsx
+function b(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());
+}
+function x(e, t = "USD") {
+	if (e.currencyPrices && typeof e.currencyPrices == "object") {
+		let n = e.currencyPrices;
+		if (n[t]) return {
+			price: n[t],
+			currency: t
+		};
+	}
+	return {
+		price: e.price,
+		currency: e.currency || "USD"
+	};
+}
+var S = () => {
+	let { t: e } = y(), t = (t, n) => {
+		let r = e(t);
+		return r === t ? n : r;
+	}, n = a(), l = r(), { addons: d, isLoading: f, error: p, refetch: m } = s(), { toggleAddon: h, isToggling: g } = o(), { addToCart: b, removeFromCart: x, updateQuantity: S, isInCart: E, getCartItem: D } = i(), [O, k] = u("grid"), [A, j] = u(!1), [M, N] = u("all"), P = c();
+	if (!l.canViewAddons) return /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ v("div", {
+			className: "text-center space-y-2",
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ _("svg", {
+						className: "w-6 h-6 text-muted-foreground",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ _("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						})
+					})
+				}),
+				/* @__PURE__ */ _("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: t("billing.accessDenied.title", "Access Denied")
+				}),
+				/* @__PURE__ */ _("p", {
+					className: "text-sm text-muted-foreground max-w-sm",
+					children: t("billing.addons.noViewPermission", "You don't have permission to view addons.")
+				})
+			]
+		})
+	});
+	let F = d.filter((e) => !(!A && !e.isActive || M !== "all" && e.duration !== M)), I = async (e) => {
+		if (l.canManageAddons) try {
+			await h(e.id, !e.isActive), await m();
+		} catch (e) {
+			console.error("Failed to toggle addon:", e);
+		}
+	}, L = (e) => {
+		n(`/addons/${e.id}`);
+	}, R = (e) => {
+		n(`/addons/${e.id}/edit`);
+	};
+	return f && d.length === 0 ? /* @__PURE__ */ v("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ _("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", {
+			className: "grid grid-cols-1 md:grid-cols-3 gap-6",
+			children: [
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ v("div", {
+				className: "border border-border rounded-lg p-6 space-y-4",
+				children: [
+					/* @__PURE__ */ _("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ _("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ _("div", {
+						className: "space-y-2",
+						children: [
+							1,
+							2,
+							3
+						].map((e) => /* @__PURE__ */ _("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
+					})
+				]
+			}, e))
+		})]
+	}) : p ? /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ v("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					children: /* @__PURE__ */ _("svg", {
+						className: "w-6 h-6 text-destructive",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ _("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						})
+					})
+				}),
+				/* @__PURE__ */ _("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: t("billing.addons.failedToLoad", "Failed to load addons")
+				}),
+				/* @__PURE__ */ _("p", {
+					className: "text-sm text-muted-foreground",
+					children: p.message
+				}),
+				/* @__PURE__ */ _("button", {
+					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__ */ v("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: t("billing.addons.title", "Addons")
+				}), /* @__PURE__ */ _("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: t("billing.addons.subtitle", "Enhance your subscription with additional features")
+				})] }), l.canManageAddons && /* @__PURE__ */ v("button", {
+					onClick: () => n("/addons/new"),
+					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: [/* @__PURE__ */ _("svg", {
+						className: "w-4 h-4",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ _("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 4v16m8-8H4"
+						})
+					}), "Create Addon"]
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [
+							/* @__PURE__ */ _("button", {
+								onClick: () => N("all"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "all" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+								children: "All"
+							}),
+							/* @__PURE__ */ _("button", {
+								onClick: () => N("monthly"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+								children: "Monthly"
+							}),
+							/* @__PURE__ */ _("button", {
+								onClick: () => N("yearly"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+								children: "Yearly"
+							})
+						]
+					}),
+					l.canManageAddons && /* @__PURE__ */ v("label", {
+						className: "flex items-center gap-2 text-sm cursor-pointer",
+						children: [/* @__PURE__ */ _("input", {
+							type: "checkbox",
+							checked: A,
+							onChange: (e) => j(e.target.checked),
+							className: "w-4 h-4 rounded border-border text-primary focus:ring-primary"
+						}), /* @__PURE__ */ _("span", {
+							className: "text-muted-foreground",
+							children: t("billing.addons.showInactive", "Show inactive addons")
+						})]
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [/* @__PURE__ */ _("button", {
+							onClick: () => k("grid"),
+							className: `p-1.5 rounded-md transition-colors ${O === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							title: "Grid view",
+							children: /* @__PURE__ */ _("svg", {
+								className: "w-4 h-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ _("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__ */ _("button", {
+							onClick: () => k("list"),
+							className: `p-1.5 rounded-md transition-colors ${O === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							title: "List view",
+							children: /* @__PURE__ */ _("svg", {
+								className: "w-4 h-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ _("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M4 6h16M4 12h16M4 18h16"
+								})
+							})
+						})]
+					})
+				]
+			}),
+			F.length === 0 ? /* @__PURE__ */ v("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ _("svg", {
+							className: "w-6 h-6 text-muted-foreground",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ _("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+							})
+						})
+					}),
+					/* @__PURE__ */ _("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: t("billing.addons.noAddonsFound", "No addons found")
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: A ? t("billing.addons.noAddonsFiltered", "No addons match your current filters.") : t("billing.addons.noActiveAddons", "There are no active addons available.")
+					}),
+					l.canManageAddons && /* @__PURE__ */ _("button", {
+						onClick: () => n("/addons/new"),
+						className: "mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: t("billing.addons.createFirstAddon", "Create your first addon")
+					})
+				]
+			}) : O === "grid" ? /* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+				children: F.map((e) => {
+					let t = D(e.id);
+					return /* @__PURE__ */ _(C, {
+						addon: e,
+						onView: L,
+						onEdit: R,
+						onToggle: I,
+						canManage: l.canManageAddons,
+						isToggling: g,
+						isInCart: E(e.id),
+						cartQuantity: t?.quantity || 0,
+						onAddToCart: b,
+						onUpdateQuantity: S,
+						onRemoveFromCart: x,
+						displayCurrency: P
+					}, e.id);
+				})
+			}) : /* @__PURE__ */ _("div", {
+				className: "space-y-3",
+				children: F.map((e) => {
+					let t = D(e.id);
+					return /* @__PURE__ */ _(w, {
+						addon: e,
+						onView: L,
+						onEdit: R,
+						onToggle: I,
+						canManage: l.canManageAddons,
+						isToggling: g,
+						isInCart: E(e.id),
+						cartQuantity: t?.quantity || 0,
+						onAddToCart: b,
+						onUpdateQuantity: S,
+						onRemoveFromCart: x,
+						displayCurrency: P
+					}, e.id);
+				})
+			}),
+			/* @__PURE__ */ _(T, { displayCurrency: P })
+		]
+	});
+}, C = ({ addon: r, onView: i, onEdit: a, onToggle: o, canManage: s, displayCurrency: c, isToggling: u, isInCart: h, cartQuantity: g, onAddToCart: y, onUpdateQuantity: S, onRemoveFromCart: C }) => {
+	let w = l(() => b(r.features || []), [r.features]);
+	return /* @__PURE__ */ v("div", {
+		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${r.isActive ? h ? "border-primary bg-primary/5" : "border-border bg-card" : "border-dashed border-muted-foreground/30 bg-muted/30"}`,
+		children: [
+			!r.isActive && /* @__PURE__ */ _("span", {
+				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded",
+				children: "Inactive"
+			}),
+			h && r.isActive && /* @__PURE__ */ v("span", {
+				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded",
+				children: [
+					"In Cart (",
+					g,
+					")"
+				]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4",
+				children: /* @__PURE__ */ _("svg", {
+					className: "w-5 h-5 text-primary",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ _("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+					})
+				})
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ _("h3", {
+					className: "text-lg font-bold text-foreground",
+					children: r.name
+				}), /* @__PURE__ */ _("span", {
+					className: "text-sm text-muted-foreground",
+					children: n(r.duration)
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex items-baseline gap-1 mb-4",
+				children: [/* @__PURE__ */ _("span", {
+					className: "text-2xl font-bold text-foreground",
+					children: (() => {
+						let { price: t, currency: n } = x(r, c);
+						return e(t, n);
+					})()
+				}), /* @__PURE__ */ v("span", {
+					className: "text-muted-foreground text-sm",
+					children: ["/ ", t(r.duration)]
+				})]
+			}),
+			w.length > 0 && /* @__PURE__ */ v("ul", {
+				className: "space-y-2 mb-4",
+				children: [w.slice(0, 4).map((e) => /* @__PURE__ */ v("li", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ v("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ _("svg", {
+							className: "w-4 h-4 text-status-success-text shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ _("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M5 13l4 4L19 7"
+							})
+						}), /* @__PURE__ */ _("span", {
+							className: "text-foreground",
+							children: e.name
+						})]
+					}), /* @__PURE__ */ _("span", {
+						className: "font-medium text-foreground",
+						children: e.totalValue.toLocaleString()
+					})]
+				}, e.quotaId)), w.length > 4 && /* @__PURE__ */ v("li", {
+					className: "text-sm text-muted-foreground pl-6",
+					children: [
+						"+",
+						w.length - 4,
+						" more quotas"
+					]
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "space-y-2 pt-4 border-t border-border mt-auto",
+				children: [
+					r.isActive && (h ? /* @__PURE__ */ v("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ v("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ _("button", {
+									onClick: () => S(r.id, g - 1),
+									className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+									children: /* @__PURE__ */ _(d, { className: "w-4 h-4" })
+								}),
+								/* @__PURE__ */ _("span", {
+									className: "w-10 text-center font-medium",
+									children: g
+								}),
+								/* @__PURE__ */ _("button", {
+									onClick: () => S(r.id, g + 1),
+									className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+									children: /* @__PURE__ */ _(f, { className: "w-4 h-4" })
+								})
+							]
+						}), /* @__PURE__ */ _("button", {
+							onClick: () => C(r.id),
+							className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
+							title: "Remove from cart",
+							children: /* @__PURE__ */ _(m, { className: "w-4 h-4" })
+						})]
+					}) : /* @__PURE__ */ v("button", {
+						onClick: () => y(r),
+						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__ */ _(p, { className: "w-4 h-4" }), "Add to Cart"]
+					})),
+					/* @__PURE__ */ _("button", {
+						onClick: () => i(r),
+						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"
+					}),
+					s && /* @__PURE__ */ v("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ _("button", {
+							onClick: () => a(r),
+							className: "flex-1 px-3 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							children: "Edit"
+						}), /* @__PURE__ */ _("button", {
+							onClick: () => o(r),
+							disabled: u,
+							className: `px-3 py-2 text-sm font-medium border border-border rounded-md transition-colors ${r.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+							children: r.isActive ? "Deactivate" : "Activate"
+						})]
+					})
+				]
+			})
+		]
+	});
+}, w = ({ addon: n, onView: r, onEdit: i, onToggle: a, canManage: o, displayCurrency: s, isToggling: c, isInCart: u, cartQuantity: h, onAddToCart: y, onUpdateQuantity: S, onRemoveFromCart: C }) => {
+	let w = l(() => b(n.features || []), [n.features]);
+	return /* @__PURE__ */ v("div", {
+		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${n.isActive ? u ? "border-primary bg-primary/5" : "border-border bg-card" : "border-dashed border-muted-foreground/30 bg-muted/30"}`,
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+				children: /* @__PURE__ */ _("svg", {
+					className: "w-5 h-5 text-primary",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ _("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+					})
+				})
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ v("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ _("h3", {
+							className: "font-semibold text-foreground truncate",
+							children: n.name
+						}),
+						!n.isActive && /* @__PURE__ */ _("span", {
+							className: "px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded",
+							children: "Inactive"
+						}),
+						u && n.isActive && /* @__PURE__ */ v("span", {
+							className: "px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded",
+							children: [
+								"In Cart (",
+								h,
+								")"
+							]
+						})
+					]
+				}), /* @__PURE__ */ v("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						w.length,
+						" quota",
+						w.length === 1 ? "" : "s"
+					]
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "text-right",
+				children: [/* @__PURE__ */ _("div", {
+					className: "font-semibold text-foreground",
+					children: (() => {
+						let { price: t, currency: r } = x(n, s);
+						return e(t, r);
+					})()
+				}), /* @__PURE__ */ v("div", {
+					className: "text-sm text-muted-foreground",
+					children: ["per ", t(n.duration)]
+				})]
+			}),
+			n.isActive && (u ? /* @__PURE__ */ v("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ _("button", {
+						onClick: () => S(n.id, h - 1),
+						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ _(d, { className: "w-4 h-4" })
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "w-8 text-center font-medium",
+						children: h
+					}),
+					/* @__PURE__ */ _("button", {
+						onClick: () => S(n.id, h + 1),
+						className: "p-1.5 rounded border border-border hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ _(f, { className: "w-4 h-4" })
+					}),
+					/* @__PURE__ */ _("button", {
+						onClick: () => C(n.id),
+						className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1",
+						title: "Remove from cart",
+						children: /* @__PURE__ */ _(m, { className: "w-4 h-4" })
+					})
+				]
+			}) : /* @__PURE__ */ v("button", {
+				onClick: () => y(n),
+				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__ */ _(p, { className: "w-4 h-4" }), "Add"]
+			})),
+			/* @__PURE__ */ v("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ _("button", {
+					onClick: () => r(n),
+					className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					children: "View"
+				}), o && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("button", {
+					onClick: () => i(n),
+					className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					children: "Edit"
+				}), /* @__PURE__ */ _("button", {
+					onClick: () => a(n),
+					disabled: c,
+					className: `px-3 py-1.5 text-sm font-medium border border-border rounded-md transition-colors ${n.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+					children: n.isActive ? "Deactivate" : "Activate"
+				})] })]
+			})
+		]
+	});
+}, T = ({ displayCurrency: n }) => {
+	let r = a(), { items: o, isCartOpen: s, toggleCart: c, closeCart: l, removeFromCart: u, updateQuantity: y, clearCart: b } = i(), S = o.reduce((e, t) => e + t.quantity, 0);
+	return o.length === 0 && !s ? null : /* @__PURE__ */ v(g, { children: [!s && o.length > 0 && /* @__PURE__ */ v("button", {
+		onClick: c,
+		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__ */ _(p, { className: "w-5 h-5" }),
+			/* @__PURE__ */ v("span", {
+				className: "font-medium",
+				children: [
+					S,
+					" item",
+					S === 1 ? "" : "s"
+				]
+			}),
+			/* @__PURE__ */ _("span", {
+				className: "px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm",
+				children: e(o.reduce((e, { addon: t, quantity: r }) => {
+					let { price: i } = x(t, n);
+					return e + i * r;
+				}, 0), n)
+			})
+		]
+	}), s && /* @__PURE__ */ v("div", {
+		className: "fixed inset-0 z-50 flex items-end sm:items-center justify-center",
+		children: [/* @__PURE__ */ _("div", {
+			className: "absolute inset-0 bg-overlay-scrim",
+			onClick: l
+		}), /* @__PURE__ */ v("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__ */ v("div", {
+					className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30",
+					children: [/* @__PURE__ */ v("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ _(p, { className: "w-5 h-5 text-foreground" }),
+							/* @__PURE__ */ _("h3", {
+								className: "font-semibold text-foreground",
+								children: "Your Cart"
+							}),
+							/* @__PURE__ */ v("span", {
+								className: "px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full",
+								children: [
+									S,
+									" item",
+									S === 1 ? "" : "s"
+								]
+							})
+						]
+					}), /* @__PURE__ */ _("button", {
+						onClick: l,
+						className: "p-1.5 rounded hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ _(h, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "overflow-y-auto max-h-[50vh] divide-y divide-border",
+					children: o.map(({ addon: r, quantity: i }) => /* @__PURE__ */ v("div", {
+						className: "p-4 flex items-center gap-3",
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+								children: /* @__PURE__ */ _("svg", {
+									className: "w-5 h-5 text-primary",
+									fill: "none",
+									viewBox: "0 0 24 24",
+									stroke: "currentColor",
+									children: /* @__PURE__ */ _("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+									})
+								})
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "flex-1 min-w-0",
+								children: [/* @__PURE__ */ _("h4", {
+									className: "font-medium text-foreground truncate",
+									children: r.name
+								}), /* @__PURE__ */ v("p", {
+									className: "text-sm text-muted-foreground",
+									children: [
+										(() => {
+											let { price: t, currency: i } = x(r, n);
+											return e(t, i);
+										})(),
+										" ",
+										"/ ",
+										t(r.duration)
+									]
+								})]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ _("button", {
+										onClick: () => y(r.id, i - 1),
+										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										children: /* @__PURE__ */ _(d, { className: "w-3 h-3" })
+									}),
+									/* @__PURE__ */ _("span", {
+										className: "w-6 text-center text-sm font-medium",
+										children: i
+									}),
+									/* @__PURE__ */ _("button", {
+										onClick: () => y(r.id, i + 1),
+										className: "p-1 rounded border border-border hover:bg-muted transition-colors",
+										children: /* @__PURE__ */ _(f, { className: "w-3 h-3" })
+									})
+								]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "text-right",
+								children: /* @__PURE__ */ _("p", {
+									className: "font-medium text-foreground",
+									children: (() => {
+										let { price: t, currency: a } = x(r, n);
+										return e(t * i, a);
+									})()
+								})
+							}),
+							/* @__PURE__ */ _("button", {
+								onClick: () => u(r.id),
+								className: "p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors",
+								children: /* @__PURE__ */ _(m, { className: "w-4 h-4" })
+							})
+						]
+					}, r.id))
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "border-t border-border p-4 space-y-3 bg-muted/20",
+					children: [/* @__PURE__ */ v("div", {
+						className: "flex items-center justify-between text-lg font-semibold",
+						children: [/* @__PURE__ */ _("span", {
+							className: "text-foreground",
+							children: "Total"
+						}), /* @__PURE__ */ _("span", {
+							className: "text-foreground",
+							children: e(o.reduce((e, { addon: t, quantity: r }) => {
+								let { price: i } = x(t, n);
+								return e + i * r;
+							}, 0), n)
+						})]
+					}), /* @__PURE__ */ v("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ _("button", {
+							onClick: b,
+							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__ */ _("button", {
+							onClick: () => {
+								l(), r("/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"
+						})]
+					})]
+				})
+			]
+		})]
+	})] });
+};
+//#endregion
+export { S as AddonsListPage };
+
+//# sourceMappingURL=AddonsListPage.js.map