@burdenoff/microfe-billing 2026.625.4 → 2026.625.5

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

@@ -10,8 +10,9 @@ import { useMemo as u, useState as d } from "react";
 import { Minus 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";
+import { IllustratedEmptyState as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/addons/pages/AddonsListPage.tsx
-function x(e) {
+function C(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
 		if (!n.quota) continue;
@@ -24,7 +25,7 @@ function x(e) {
 	}
 	return Array.from(t.values());
 }
-function S(e, t = "USD") {
+function w(e, t = "USD") {
 	if (e.currencyPrices && typeof e.currencyPrices == "object") {
 		let n = e.currencyPrices;
 		if (n[t]) return {
@@ -37,11 +38,11 @@ function S(e, t = "USD") {
 		currency: e.currency || "USD"
 	};
 }
-var C = () => {
+var T = () => {
 	let { t: e } = b(), t = (t, n) => {
 		let r = e(t);
 		return r === t ? n : r;
-	}, n = o(), r = i(), { addons: u, isLoading: f, error: p, refetch: m } = c(), { toggleAddon: h, isToggling: g } = s(), { addToCart: _, removeFromCart: x, updateQuantity: S, isInCart: C, getCartItem: D } = a(), [O, k] = d("grid"), [A, j] = d(!1), [M, N] = d("all"), P = l();
+	}, n = o(), r = i(), { addons: u, isLoading: f, error: p, refetch: m } = c(), { toggleAddon: h, isToggling: g } = s(), { addToCart: _, removeFromCart: C, updateQuantity: w, isInCart: T, getCartItem: k } = a(), [A, j] = d("grid"), [M, N] = d(!1), [P, F] = d("all"), I = l();
 	if (!r.canViewAddons) return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ y("div", {
@@ -73,15 +74,15 @@ var C = () => {
 			]
 		})
 	});
-	let F = u.filter((e) => !(!A && !e.isActive || M !== "all" && e.duration !== M)), I = async (e) => {
+	let L = u.filter((e) => !(!M && !e.isActive || P !== "all" && e.duration !== P)), R = async (e) => {
 		if (r.canManageAddons) try {
 			await h(e.id, !e.isActive), await m();
 		} catch (e) {
 			console.error("Failed to toggle addon:", e);
 		}
-	}, L = (e) => {
+	}, z = (e) => {
 		n(`/addons/${e.id}`);
-	}, R = (e) => {
+	}, B = (e) => {
 		n(`/addons/${e.id}/edit`);
 	};
 	return f && u.length === 0 ? /* @__PURE__ */ y("div", {
@@ -149,13 +150,20 @@ var C = () => {
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
-					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-					children: t("billing.addons.title", "Addons")
-				}), /* @__PURE__ */ v("p", {
-					className: "text-sm text-text-muted mt-1",
-					children: t("billing.addons.subtitle", "Enhance your subscription with additional features")
-				})] }), r.canManageAddons && /* @__PURE__ */ y("button", {
+				children: [/* @__PURE__ */ y("div", { children: [
+					/* @__PURE__ */ v("h1", {
+						className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
+						children: t("billing.addons.title", "Addons")
+					}),
+					/* @__PURE__ */ v("p", {
+						className: "text-sm text-text-muted mt-1",
+						children: t("billing.addons.subtitle", "Enhance your subscription with additional features")
+					}),
+					/* @__PURE__ */ v(S, {
+						className: "mt-3",
+						children: t("billing.addons.listPurpose", "Manage the catalog of add-ons customers can buy alongside their subscriptions — including inactive ones. Create new add-ons, edit their price and the quotas they grant, and activate or deactivate them to control availability.")
+					})
+				] }), r.canManageAddons && /* @__PURE__ */ y("button", {
 					type: "button",
 					onClick: () => n("/addons/new"),
 					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
@@ -181,20 +189,20 @@ var C = () => {
 						children: [
 							/* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: () => N("all"),
-								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "all" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
+								onClick: () => F("all"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${P === "all" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 								children: "All"
 							}),
 							/* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: () => N("monthly"),
-								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "monthly" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
+								onClick: () => F("monthly"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${P === "monthly" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 								children: "Monthly"
 							}),
 							/* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: () => N("yearly"),
-								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${M === "yearly" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
+								onClick: () => F("yearly"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${P === "yearly" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 								children: "Yearly"
 							})
 						]
@@ -203,8 +211,8 @@ var C = () => {
 						className: "flex items-center gap-2 text-sm cursor-pointer",
 						children: [/* @__PURE__ */ v("input", {
 							type: "checkbox",
-							checked: A,
-							onChange: (e) => j(e.target.checked),
+							checked: M,
+							onChange: (e) => N(e.target.checked),
 							className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
 						}), /* @__PURE__ */ v("span", {
 							className: "text-text-muted",
@@ -215,8 +223,8 @@ var C = () => {
 						className: "ml-auto inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50",
 						children: [/* @__PURE__ */ v("button", {
 							type: "button",
-							onClick: () => k("grid"),
-							className: `p-1.5 rounded-md transition-colors ${O === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
+							onClick: () => j("grid"),
+							className: `p-1.5 rounded-md transition-colors ${A === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 							title: "Grid view",
 							children: /* @__PURE__ */ v("svg", {
 								className: "size-4",
@@ -232,8 +240,8 @@ var C = () => {
 							})
 						}), /* @__PURE__ */ v("button", {
 							type: "button",
-							onClick: () => k("list"),
-							className: `p-1.5 rounded-md transition-colors ${O === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
+							onClick: () => j("list"),
+							className: `p-1.5 rounded-md transition-colors ${A === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-primary"}`,
 							title: "List view",
 							children: /* @__PURE__ */ v("svg", {
 								className: "size-4",
@@ -251,83 +259,60 @@ var C = () => {
 					})
 				]
 			}),
-			F.length === 0 ? /* @__PURE__ */ y("div", {
-				className: "flex flex-col items-center justify-center py-16 border border-dashed border-border-seam rounded-card bg-bg-surface",
-				children: [
-					/* @__PURE__ */ v("div", {
-						className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ v("svg", {
-							className: "size-6 text-text-muted",
-							fill: "none",
-							viewBox: "0 0 24 24",
-							stroke: "currentColor",
-							children: /* @__PURE__ */ v("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("h3", {
-						className: "text-lg font-medium text-text-primary",
-						children: t("billing.addons.noAddonsFound", "No addons found")
-					}),
-					/* @__PURE__ */ v("p", {
-						className: "text-sm text-text-muted mt-1",
-						children: A ? t("billing.addons.noAddonsFiltered", "No addons match your current filters.") : t("billing.addons.noActiveAddons", "There are no active addons available.")
-					}),
-					r.canManageAddons && /* @__PURE__ */ v("button", {
-						type: "button",
-						onClick: () => n("/addons/new"),
-						className: "mt-4 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
-						children: t("billing.addons.createFirstAddon", "Create your first addon")
-					})
-				]
-			}) : O === "grid" ? /* @__PURE__ */ v("div", {
+			L.length === 0 ? /* @__PURE__ */ v(x, {
+				illustration: "empty-data",
+				title: t("billing.addons.noAddonsFound", "No addons found"),
+				description: M ? t("billing.addons.noAddonsFiltered", "No addons match your current filters.") : t("billing.addons.noActiveAddons", "There are no active addons available."),
+				action: r.canManageAddons ? /* @__PURE__ */ v("button", {
+					type: "button",
+					onClick: () => n("/addons/new"),
+					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
+					children: t("billing.addons.createFirstAddon", "Create your first addon")
+				}) : void 0
+			}) : A === "grid" ? /* @__PURE__ */ v("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__ */ v(w, {
+				children: L.map((e) => {
+					let t = k(e.id);
+					return /* @__PURE__ */ v(E, {
 						addon: e,
-						onView: L,
-						onEdit: R,
-						onToggle: I,
+						onView: z,
+						onEdit: B,
+						onToggle: R,
 						canManage: r.canManageAddons,
 						isToggling: g,
-						isInCart: C(e.id),
+						isInCart: T(e.id),
 						cartQuantity: t?.quantity || 0,
 						onAddToCart: _,
-						onUpdateQuantity: S,
-						onRemoveFromCart: x,
-						displayCurrency: P
+						onUpdateQuantity: w,
+						onRemoveFromCart: C,
+						displayCurrency: I
 					}, e.id);
 				})
 			}) : /* @__PURE__ */ v("div", {
 				className: "space-y-3",
-				children: F.map((e) => {
-					let t = D(e.id);
-					return /* @__PURE__ */ v(T, {
+				children: L.map((e) => {
+					let t = k(e.id);
+					return /* @__PURE__ */ v(D, {
 						addon: e,
-						onView: L,
-						onEdit: R,
-						onToggle: I,
+						onView: z,
+						onEdit: B,
+						onToggle: R,
 						canManage: r.canManageAddons,
 						isToggling: g,
-						isInCart: C(e.id),
+						isInCart: T(e.id),
 						cartQuantity: t?.quantity || 0,
 						onAddToCart: _,
-						onUpdateQuantity: S,
-						onRemoveFromCart: x,
-						displayCurrency: P
+						onUpdateQuantity: w,
+						onRemoveFromCart: C,
+						displayCurrency: I
 					}, e.id);
 				})
 			}),
-			/* @__PURE__ */ v(E, { displayCurrency: P })
+			/* @__PURE__ */ v(O, { displayCurrency: I })
 		]
 	});
-}, w = ({ addon: r, onView: i, onEdit: a, onToggle: o, canManage: s, displayCurrency: c, isToggling: l, isInCart: d, cartQuantity: g, onAddToCart: _, onUpdateQuantity: b, onRemoveFromCart: C }) => {
-	let w = u(() => x(r.features || []), [r.features]);
+}, E = ({ addon: r, onView: i, onEdit: a, onToggle: o, canManage: s, displayCurrency: c, isToggling: l, isInCart: d, cartQuantity: g, onAddToCart: _, onUpdateQuantity: b, onRemoveFromCart: x }) => {
+	let S = u(() => C(r.features || []), [r.features]);
 	return /* @__PURE__ */ y("div", {
 		className: `relative border rounded-card p-6 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] flex flex-col h-full ${r.isActive ? d ? "border-action-primary-bg bg-[var(--color-accent-soft)]" : "border-border-subtle bg-bg-surface" : "border-dashed border-text-muted/30 bg-bg-sunken/30"}`,
 		children: [
@@ -373,7 +358,7 @@ var C = () => {
 				children: [/* @__PURE__ */ v("span", {
 					className: "text-2xl font-bold text-text-primary",
 					children: (() => {
-						let { price: t, currency: n } = S(r, c);
+						let { price: t, currency: n } = w(r, c);
 						return e(t, n);
 					})()
 				}), /* @__PURE__ */ y("span", {
@@ -381,9 +366,9 @@ var C = () => {
 					children: ["/ ", t(r.duration)]
 				})]
 			}),
-			w.length > 0 && /* @__PURE__ */ y("ul", {
+			S.length > 0 && /* @__PURE__ */ y("ul", {
 				className: "space-y-2 mb-4",
-				children: [w.slice(0, 4).map((e) => /* @__PURE__ */ y("li", {
+				children: [S.slice(0, 4).map((e) => /* @__PURE__ */ y("li", {
 					className: "flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-2",
@@ -406,11 +391,11 @@ var C = () => {
 						className: "font-medium text-text-primary",
 						children: e.totalValue.toLocaleString()
 					})]
-				}, e.quotaId)), w.length > 4 && /* @__PURE__ */ y("li", {
+				}, e.quotaId)), S.length > 4 && /* @__PURE__ */ y("li", {
 					className: "text-sm text-text-muted pl-6",
 					children: [
 						"+",
-						w.length - 4,
+						S.length - 4,
 						" more quotas"
 					]
 				})]
@@ -442,7 +427,7 @@ var C = () => {
 							]
 						}), /* @__PURE__ */ v("button", {
 							type: "button",
-							onClick: () => C(r.id),
+							onClick: () => x(r.id),
 							className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg-subtle transition-colors",
 							title: "Remove from cart",
 							children: /* @__PURE__ */ v(h, { className: "size-4" })
@@ -478,8 +463,8 @@ var C = () => {
 			})
 		]
 	});
-}, T = ({ addon: n, onView: r, onEdit: i, onToggle: a, canManage: o, displayCurrency: s, isToggling: c, isInCart: l, cartQuantity: d, onAddToCart: g, onUpdateQuantity: b, onRemoveFromCart: C }) => {
-	let w = u(() => x(n.features || []), [n.features]);
+}, D = ({ addon: n, onView: r, onEdit: i, onToggle: a, canManage: o, displayCurrency: s, isToggling: c, isInCart: l, cartQuantity: d, onAddToCart: g, onUpdateQuantity: b, onRemoveFromCart: x }) => {
+	let S = u(() => C(n.features || []), [n.features]);
 	return /* @__PURE__ */ y("div", {
 		className: `flex items-center gap-4 p-4 border rounded-card shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] ${n.isActive ? l ? "border-action-primary-bg bg-[var(--color-accent-soft)]" : "border-border-subtle bg-bg-surface" : "border-dashed border-text-muted/30 bg-bg-sunken/30"}`,
 		children: [
@@ -523,9 +508,9 @@ var C = () => {
 				}), /* @__PURE__ */ y("p", {
 					className: "text-sm text-text-muted",
 					children: [
-						w.length,
+						S.length,
 						" quota",
-						w.length === 1 ? "" : "s"
+						S.length === 1 ? "" : "s"
 					]
 				})]
 			}),
@@ -534,7 +519,7 @@ var C = () => {
 				children: [/* @__PURE__ */ v("div", {
 					className: "font-semibold text-text-primary",
 					children: (() => {
-						let { price: t, currency: r } = S(n, s);
+						let { price: t, currency: r } = w(n, s);
 						return e(t, r);
 					})()
 				}), /* @__PURE__ */ y("div", {
@@ -563,7 +548,7 @@ var C = () => {
 					}),
 					/* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => C(n.id),
+						onClick: () => x(n.id),
 						className: "p-1.5 rounded text-status-error-text hover:bg-status-error-bg-subtle transition-colors ml-1",
 						title: "Remove from cart",
 						children: /* @__PURE__ */ v(h, { className: "size-4" })
@@ -597,7 +582,7 @@ var C = () => {
 			})
 		]
 	});
-}, E = ({ displayCurrency: n }) => {
+}, O = ({ displayCurrency: n }) => {
 	let r = o(), { items: i, isCartOpen: s, toggleCart: c, closeCart: l, removeFromCart: u, updateQuantity: d, clearCart: b } = a(), x = i.reduce((e, t) => e + t.quantity, 0);
 	return i.length === 0 && !s ? null : /* @__PURE__ */ y(_, { children: [!s && i.length > 0 && /* @__PURE__ */ y("button", {
 		type: "button",
@@ -616,7 +601,7 @@ var C = () => {
 			/* @__PURE__ */ v("span", {
 				className: "px-2 py-0.5 bg-[var(--color-accent-soft)] rounded-full text-sm",
 				children: e(i.reduce((e, { addon: t, quantity: r }) => {
-					let { price: i } = S(t, n);
+					let { price: i } = w(t, n);
 					return e + i * r;
 				}, 0), n)
 			})
@@ -684,7 +669,7 @@ var C = () => {
 									className: "text-sm text-text-muted",
 									children: [
 										(() => {
-											let { price: t, currency: i } = S(r, n);
+											let { price: t, currency: i } = w(r, n);
 											return e(t, i);
 										})(),
 										" ",
@@ -719,7 +704,7 @@ var C = () => {
 								children: /* @__PURE__ */ v("p", {
 									className: "font-medium text-text-primary",
 									children: (() => {
-										let { price: t, currency: a } = S(r, n);
+										let { price: t, currency: a } = w(r, n);
 										return e(t * i, a);
 									})()
 								})
@@ -743,7 +728,7 @@ var C = () => {
 						}), /* @__PURE__ */ v("span", {
 							className: "text-text-primary",
 							children: e(i.reduce((e, { addon: t, quantity: r }) => {
-								let { price: i } = S(t, n);
+								let { price: i } = w(t, n);
 								return e + i * r;
 							}, 0), n)
 						})]
@@ -769,6 +754,6 @@ var C = () => {
 	})] });
 };
 //#endregion
-export { C as AddonsListPage };
+export { T as AddonsListPage };
 
 //# sourceMappingURL=AddonsListPage.js.map