@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

package/dist/billing/modules/dashboard/pages/OverviewPage.js

@@ -22,121 +22,122 @@ import { useAddonCartStore as me } from "../../addons/store/addonCartStore.js";
 import { FloatingCartDrawer as he } from "../../addons/components/FloatingCartDrawer.js";
 import { withBillingAccountId as i } from "../../../shared/utils/navigation.js";
 import { useCallback as a, useEffect as o, useState as s } from "react";
-import { Activity as ge, ArrowRight as _e, Building2 as c, Check as ve, ChevronDown as ye, Coins as be, Crown as l, Loader2 as xe, Plus as u, Receipt as Se, RefreshCw as d, Sparkles as Ce, Wallet as f } from "lucide-react";
+import { Activity as ge, ArrowRight as _e, Building2 as c, Check as l, ChevronDown as u, Coins as ve, Crown as ye, Loader2 as be, Plus as xe, Receipt as Se, RefreshCw as d, Sparkles as Ce, Wallet as f } from "lucide-react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 import { useI18n as we } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as Te, CTAOverflowMenu as Ee, EmphasisPanel as De } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/dashboard/pages/OverviewPage.tsx
 var g = () => {
 	let { t: g } = we(), _ = (e, t) => {
 		let n = g(e);
 		return n === e ? t : n;
-	}, { navigate: v, basePath: y, orgId: b, productId: Te } = e(), x = oe(), { emit: S } = ne(), [C, Ee] = s(() => re(b)), [w, T] = s(!1), [E, D] = s(null), [O, k] = s(!1), [De, A] = s(!1), [Oe, ke] = s(0), [j, M] = s(!1), { billingAccounts: N, currentAccount: P, paymentMethods: F, activeSubscriptions: I, hasActiveSubscription: L, recommendedAddons: Ae, isLoading: R, error: z, refetchAll: B } = ce(C, Te), V = P?.id, je = R, H = a((e) => {
-		Ee(e), ie(b, e);
-	}, [b]), { addToCart: U, isInCart: W, getCartItem: G, updateQuantity: K, removeFromCart: q } = me(), { createBillingAccount: J, setBillingAddress: Y, setDefaultPaymentMethod: X, deletePaymentMethod: Me, isCreatingAccount: Ne } = se();
+	}, { navigate: v, basePath: y, orgId: b, productId: Oe } = e(), x = oe(), { emit: S } = ne(), [C, ke] = s(() => re(b)), [w, T] = s(!1), [E, D] = s(null), [O, k] = s(!1), [Ae, A] = s(!1), [j, M] = s(0), [N, P] = s(!1), { billingAccounts: F, currentAccount: I, paymentMethods: L, activeSubscriptions: R, hasActiveSubscription: z, recommendedAddons: je, isLoading: B, error: V, refetchAll: H } = ce(C, Oe), U = I?.id, Me = B, W = a((e) => {
+		ke(e), ie(b, e);
+	}, [b]), { addToCart: G, isInCart: K, getCartItem: q, updateQuantity: J, removeFromCart: Y } = me(), { createBillingAccount: Ne, setBillingAddress: X, setDefaultPaymentMethod: Pe, deletePaymentMethod: Fe, isCreatingAccount: Ie } = se();
 	o(() => {
-		ke(0), M(!1);
-	}, [V, I.length]), o(() => {
-		C && N.length > 0 && (N.some((e) => e.id === C) || H(null));
+		M(0), P(!1);
+	}, [U, R.length]), o(() => {
+		C && F.length > 0 && (F.some((e) => e.id === C) || W(null));
 	}, [
-		N,
+		F,
 		C,
-		H
+		W
 	]), o(() => {
-		!C && N.length > 0 && H((N.find((e) => e.isDefault) ?? N[0]).id);
+		!C && F.length > 0 && W((F.find((e) => e.isDefault) ?? F[0]).id);
 	}, [
-		N,
+		F,
 		C,
-		H
+		W
 	]);
-	let Z = I[Oe] || I[0] || null, Q = a((e) => {
+	let Z = R[j] || R[0] || null, Q = a((e) => {
 		let t = e;
 		y && y !== "/" && (t = `${y.endsWith("/") ? y.slice(0, -1) : y}${e.startsWith("/") ? e : `/${e}`}`), v(t);
-	}, [v, y]), Pe = a(async (e, t) => {
+	}, [v, y]), Le = a(async (e, t) => {
 		D(null);
 		try {
-			let n = await J(e);
-			t && n.id && await Y({
+			let n = await Ne(e);
+			t && n.id && await X({
 				billingAccountId: n.id,
 				...t
-			}), T(!1), H(n.id), S("billing.billing_account.created", {
+			}), T(!1), W(n.id), S("billing.billing_account.created", {
 				route: "/billing/overview",
 				entityId: n.id,
 				source: "overview"
-			}), await B();
+			}), await H();
 		} catch (e) {
 			D(e instanceof Error ? e.message : "Failed to create billing account");
 		}
 	}, [
-		J,
+		Ne,
 		S,
-		B,
-		Y,
-		H
-	]), Fe = a(() => {
+		H,
+		X,
+		W
+	]), Re = a(() => {
 		A(!0);
 	}, []), $ = a(async () => {
-		await B();
-	}, [B]), Ie = a(async () => {
+		await H();
+	}, [H]), ze = a(async () => {
 		S("billing.payment_method.added", {
 			route: "/billing/overview",
-			entityId: V,
+			entityId: U,
 			source: "overview"
 		}), await $();
 	}, [
-		V,
+		U,
 		S,
 		$
-	]), Le = a(async (e) => {
-		V && (await X(e, V), S("billing.payment_method.default_set", {
+	]), Be = a(async (e) => {
+		U && (await Pe(e, U), S("billing.payment_method.default_set", {
 			route: "/billing/overview",
 			entityId: e,
 			source: "overview"
 		}), await $());
 	}, [
-		V,
+		U,
 		S,
-		X,
+		Pe,
 		$
-	]), Re = a(async (e) => {
-		V && (await Me(e, V), S("billing.payment_method.deleted", {
+	]), Ve = a(async (e) => {
+		U && (await Fe(e, U), S("billing.payment_method.deleted", {
 			route: "/billing/overview",
 			entityId: e,
 			source: "overview"
 		}), await $());
 	}, [
-		V,
-		Me,
+		U,
+		Fe,
 		S,
 		$
-	]), ze = a((e) => {
-		H(e.id), k(!1);
-	}, [H]), Be = a(async () => {
-		await B();
-	}, [B]), Ve = a((e) => {
-		U(e);
-	}, [U]), He = a((e) => W(e), [W]), Ue = a((e) => G(e)?.quantity || 0, [G]), We = a((e, t) => {
-		t <= 0 ? q(e) : K(e, t);
-	}, [K, q]), Ge = a((e) => {
-		q(e);
-	}, [q]);
-	return x.canViewBillingAccount ? z && ae(z) && !R ? /* @__PURE__ */ m("div", {
+	]), He = a((e) => {
+		W(e.id), k(!1);
+	}, [W]), Ue = a(async () => {
+		await H();
+	}, [H]), We = a((e) => {
+		G(e);
+	}, [G]), Ge = a((e) => K(e), [K]), Ke = a((e) => q(e)?.quantity || 0, [q]), qe = a((e, t) => {
+		t <= 0 ? Y(e) : J(e, t);
+	}, [J, Y]), Je = a((e) => {
+		Y(e);
+	}, [Y]);
+	return x.canViewBillingAccount ? V && ae(V) && !B ? /* @__PURE__ */ m("div", {
 		className: "p-6",
 		children: /* @__PURE__ */ m(te, {
 			title: "Server Unavailable",
 			message: "Unable to load billing overview. The server might be down or experiencing issues.",
-			onRetry: Be,
+			onRetry: Ue,
 			showRetry: !0
 		})
-	}) : R && !P ? /* @__PURE__ */ m("div", {
+	}) : B && !I ? /* @__PURE__ */ m("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ h("div", {
 			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ m(xe, { className: "size-8 animate-spin text-text-link" }), /* @__PURE__ */ m("p", {
+			children: [/* @__PURE__ */ m(be, { className: "size-8 animate-spin text-text-link" }), /* @__PURE__ */ m("p", {
 				className: "text-sm text-text-secondary",
 				children: _("billing.overview.loadingInfo", "Loading billing information...")
 			})]
 		})
-	}) : !R && N.length === 0 ? /* @__PURE__ */ h("div", {
+	}) : !B && F.length === 0 ? /* @__PURE__ */ h("div", {
 		className: "px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ h("header", {
@@ -157,7 +158,7 @@ var g = () => {
 					type: "button",
 					onClick: () => T(!0),
 					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
-					children: [/* @__PURE__ */ m(u, { className: "size-4" }), _("billing.overview.createBillingAccount", "Create Billing Account")]
+					children: [/* @__PURE__ */ m(xe, { className: "size-4" }), _("billing.overview.createBillingAccount", "Create Billing Account")]
 				}) : void 0
 			}),
 			/* @__PURE__ */ m(r, {
@@ -165,8 +166,8 @@ var g = () => {
 				onClose: () => {
 					T(!1), D(null);
 				},
-				onSubmit: Pe,
-				isSubmitting: Ne,
+				onSubmit: Le,
+				isSubmitting: Ie,
 				error: E
 			})
 		]
@@ -181,32 +182,28 @@ var g = () => {
 				}), /* @__PURE__ */ m("p", {
 					className: "text-sm text-text-secondary mt-1",
 					children: _("billing.overview.description", "Manage your billing accounts, subscriptions, and payment methods")
-				})] }), /* @__PURE__ */ h("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ m("button", {
-						type: "button",
-						onClick: Be,
-						className: "p-2 rounded-button border border-border-subtle hover:bg-bg-sunken hover:border-border-strong text-text-secondary hover:text-text-primary transition-all duration-200",
-						"aria-label": _("billing.overview.refresh", "Refresh"),
-						children: /* @__PURE__ */ m(d, { className: `size-4 ${R ? "animate-spin" : ""}` })
-					}), x.canManageBillingAccount && N.length > 0 && /* @__PURE__ */ h("button", {
-						type: "button",
-						onClick: () => T(!0),
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
-						children: [/* @__PURE__ */ m(u, { className: "size-4" }), /* @__PURE__ */ m("span", {
-							className: "hidden sm:inline",
-							children: _("billing.overview.newAccount", "New Account")
-						})]
-					})]
+				})] }), /* @__PURE__ */ m(Ee, {
+					primary: x.canManageBillingAccount && F.length > 0 ? {
+						label: _("billing.overview.newAccount", "New Account"),
+						onSelect: () => T(!0),
+						icon: /* @__PURE__ */ m(xe, { className: "size-4" })
+					} : void 0,
+					actions: [{
+						label: _("billing.overview.refresh", "Refresh"),
+						onSelect: () => {
+							Ue();
+						},
+						icon: /* @__PURE__ */ m(d, { className: `size-4 ${B ? "animate-spin" : ""}` })
+					}]
 				})]
 			}),
-			N.length > 1 && /* @__PURE__ */ h("div", {
+			F.length > 1 && /* @__PURE__ */ h("div", {
 				className: "relative",
 				"data-tour": "billing-overview-account-selector",
 				children: [/* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: () => k(!O),
-					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
+					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-seam rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 					children: [/* @__PURE__ */ h("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ m("div", {
@@ -216,21 +213,21 @@ var g = () => {
 							className: "text-left",
 							children: [/* @__PURE__ */ m("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: P?.name || _("billing.overview.selectAccount", "Select Account")
+								children: I?.name || _("billing.overview.selectAccount", "Select Account")
 							}), /* @__PURE__ */ m("p", {
 								className: "text-xs text-text-secondary",
-								children: P?.email
+								children: I?.email
 							})]
 						})]
-					}), /* @__PURE__ */ m(ye, { className: `size-4 text-text-muted transition-transform ${O ? "rotate-180" : ""}` })]
+					}), /* @__PURE__ */ m(u, { className: `size-4 text-text-muted transition-transform ${O ? "rotate-180" : ""}` })]
 				}), O && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
 					className: "fixed inset-0 z-10",
 					onClick: () => k(!1)
 				}), /* @__PURE__ */ m("div", {
-					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
-					children: N.map((e) => /* @__PURE__ */ h("button", {
+					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-seam rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
+					children: F.map((e) => /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: () => ze(e),
+						onClick: () => He(e),
 						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center gap-3 min-w-0",
@@ -247,32 +244,32 @@ var g = () => {
 									children: e.email
 								})]
 							})]
-						}), P?.id === e.id && /* @__PURE__ */ m(ve, { className: "size-4 text-text-link flex-shrink-0" })]
+						}), I?.id === e.id && /* @__PURE__ */ m(l, { className: "size-4 text-text-link flex-shrink-0" })]
 					}, e.id))
 				})] })]
 			}),
-			P && /* @__PURE__ */ h("div", {
+			I && /* @__PURE__ */ h("div", {
 				className: "grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4",
 				"data-tour": "billing-overview-stats-row",
 				children: [
 					/* @__PURE__ */ m(n, {
 						label: _("billing.overview.stats.creditBalance", "Credit Balance"),
-						value: `${(P.creditAmount || 0).toLocaleString()} Credits`,
+						value: `${(I.creditAmount || 0).toLocaleString()} Credits`,
 						icon: /* @__PURE__ */ m(f, { className: "size-5" })
 					}),
 					/* @__PURE__ */ m(n, {
 						label: _("billing.overview.stats.activePlans", "Active Plans"),
-						value: I.length > 0 ? I.length === 1 ? I[0]?.plan?.name || "1 Plan" : `${I.length} ${_("billing.overview.stats.plansSuffix", "Plans")}` : _("billing.overview.stats.none", "None"),
+						value: R.length > 0 ? R.length === 1 ? R[0]?.plan?.name || "1 Plan" : `${R.length} ${_("billing.overview.stats.plansSuffix", "Plans")}` : _("billing.overview.stats.none", "None"),
 						icon: /* @__PURE__ */ m(d, { className: "size-5" })
 					}),
 					/* @__PURE__ */ m(n, {
 						label: _("billing.overview.stats.paymentMethods", "Payment Methods"),
-						value: F.length,
+						value: L.length,
 						icon: /* @__PURE__ */ m(c, { className: "size-5" })
 					}),
 					/* @__PURE__ */ m(n, {
 						label: _("billing.overview.stats.paymentCurrency", "Payment Currency"),
-						value: P.currency || "USD",
+						value: I.currency || "USD",
 						icon: /* @__PURE__ */ m(c, { className: "size-5" })
 					})
 				]
@@ -282,27 +279,27 @@ var g = () => {
 				children: [/* @__PURE__ */ h("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						P && /* @__PURE__ */ m(le, {
+						I && /* @__PURE__ */ m(le, {
 							dataTour: "billing-overview-billing-account-card",
-							account: P,
-							isDefault: P.isDefault ?? !1,
-							onEdit: () => P && Q(`/settings?billingAccountId=${P.id}`),
-							onViewTransactions: () => Q(`/transactions/${P.id}`),
-							onViewCreditTransactions: () => Q(`/creditTransactions/${P.id}`)
+							account: I,
+							isDefault: I.isDefault ?? !1,
+							onEdit: () => I && Q(`/settings?billingAccountId=${I.id}`),
+							onViewTransactions: () => Q(`/transactions/${I.id}`),
+							onViewCreditTransactions: () => Q(`/creditTransactions/${I.id}`)
 						}),
 						/* @__PURE__ */ h("div", {
 							className: "space-y-3",
-							children: [I.length > 1 && /* @__PURE__ */ h("div", {
+							children: [R.length > 1 && /* @__PURE__ */ h("div", {
 								className: "relative",
 								children: [/* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => M(!j),
-									className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
+									onClick: () => P(!N),
+									className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-seam rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 									children: [/* @__PURE__ */ h("div", {
 										className: "flex items-center gap-3",
 										children: [/* @__PURE__ */ m("div", {
 											className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
-											children: /* @__PURE__ */ m(l, { className: "size-4 text-text-link" })
+											children: /* @__PURE__ */ m(ye, { className: "size-4 text-text-link" })
 										}), /* @__PURE__ */ h("div", {
 											className: "text-left",
 											children: [/* @__PURE__ */ h("p", {
@@ -318,29 +315,29 @@ var g = () => {
 											}), /* @__PURE__ */ h("p", {
 												className: "text-xs text-text-secondary",
 												children: [
-													I.length,
+													R.length,
 													" ",
 													_("billing.overview.activeSubscriptions", "active subscriptions")
 												]
 											})]
 										})]
-									}), /* @__PURE__ */ m(ye, { className: `size-4 text-text-muted transition-transform ${j ? "rotate-180" : ""}` })]
-								}), j && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+									}), /* @__PURE__ */ m(u, { className: `size-4 text-text-muted transition-transform ${N ? "rotate-180" : ""}` })]
+								}), N && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
 									className: "fixed inset-0 z-10",
-									onClick: () => M(!1)
+									onClick: () => P(!1)
 								}), /* @__PURE__ */ m("div", {
-									className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
-									children: I.map((e, t) => /* @__PURE__ */ h("button", {
+									className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-seam rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
+									children: R.map((e, t) => /* @__PURE__ */ h("button", {
 										type: "button",
 										onClick: () => {
-											ke(t), M(!1);
+											M(t), P(!1);
 										},
 										className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 										children: [/* @__PURE__ */ h("div", {
 											className: "flex items-center gap-3 min-w-0",
 											children: [/* @__PURE__ */ m("div", {
 												className: "size-9 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
-												children: /* @__PURE__ */ m(l, { className: "size-4 text-text-secondary" })
+												children: /* @__PURE__ */ m(ye, { className: "size-4 text-text-secondary" })
 											}), /* @__PURE__ */ h("div", {
 												className: "text-left min-w-0",
 												children: [/* @__PURE__ */ m("p", {
@@ -358,32 +355,32 @@ var g = () => {
 													]
 												})]
 											})]
-										}), Oe === t && /* @__PURE__ */ m(ve, { className: "size-4 text-text-link flex-shrink-0" })]
+										}), j === t && /* @__PURE__ */ m(l, { className: "size-4 text-text-link flex-shrink-0" })]
 									}, e.id))
 								})] })]
 							}), /* @__PURE__ */ m(de, {
 								dataTour: "billing-overview-active-subscription-card",
 								subscription: Z,
-								onViewDetails: () => Z && Q(i(`/subscriptions/${Z.id}`, Z.billingAccountId ?? P?.id)),
-								onUpgrade: () => Z && Q(i(`/subscriptions/${Z.id}/upgrade`, Z.billingAccountId ?? P?.id)),
-								onManage: () => P && Q(`/subscriptions?billingAccountId=${P.id}`),
+								onViewDetails: () => Z && Q(i(`/subscriptions/${Z.id}`, Z.billingAccountId ?? I?.id)),
+								onUpgrade: () => Z && Q(i(`/subscriptions/${Z.id}/upgrade`, Z.billingAccountId ?? I?.id)),
+								onManage: () => I && Q(`/subscriptions?billingAccountId=${I.id}`),
 								onPurchasePlan: () => Q("/plans")
 							})]
 						}),
-						P && /* @__PURE__ */ m(ue, {
+						I && /* @__PURE__ */ m(ue, {
 							dataTour: "billing-overview-payment-methods-section",
-							paymentMethods: F,
-							billingAccountId: P.id,
-							onAddPaymentMethod: Fe,
-							onSetDefault: Le,
-							onDelete: Re,
-							isLoading: R
+							paymentMethods: L,
+							billingAccountId: I.id,
+							onAddPaymentMethod: Re,
+							onSetDefault: Be,
+							onDelete: Ve,
+							isLoading: B
 						})
 					]
 				}), /* @__PURE__ */ h("div", {
 					className: "space-y-6",
 					children: [/* @__PURE__ */ h("section", {
-						className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5",
+						className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5",
 						"data-tour": "billing-overview-quick-actions",
 						children: [/* @__PURE__ */ m("h3", {
 							className: "font-semibold text-text-primary mb-4",
@@ -393,8 +390,8 @@ var g = () => {
 							children: [
 								/* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => P && Q(`/transactions/${P.id}`),
-									disabled: !P,
+									onClick: () => I && Q(`/transactions/${I.id}`),
+									disabled: !I,
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ m("div", {
 										className: "size-9 rounded-lg bg-status-info-bg-subtle flex items-center justify-center",
@@ -403,8 +400,8 @@ var g = () => {
 								}),
 								/* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => P && Q(`/creditTransactions/${P.id}`),
-									disabled: !P,
+									onClick: () => I && Q(`/creditTransactions/${I.id}`),
+									disabled: !I,
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ m("div", {
 										className: "size-9 rounded-lg bg-status-warning-bg-subtle flex items-center justify-center",
@@ -417,13 +414,13 @@ var g = () => {
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 									children: [/* @__PURE__ */ m("div", {
 										className: "size-9 rounded-lg bg-status-success-bg-subtle flex items-center justify-center",
-										children: /* @__PURE__ */ m(be, { className: "size-4 text-status-success-text" })
+										children: /* @__PURE__ */ m(ve, { className: "size-4 text-status-success-text" })
 									}), "Purchase Credits"]
 								}),
 								/* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => P && Q(`/usage?billingAccountId=${P.id}`),
-									disabled: !P,
+									onClick: () => I && Q(`/usage?billingAccountId=${I.id}`),
+									disabled: !I,
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ m("div", {
 										className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
@@ -432,8 +429,8 @@ var g = () => {
 								})
 							]
 						})]
-					}), !L && /* @__PURE__ */ h("section", {
-						className: "border border-border-subtle rounded-card bg-[var(--color-accent-soft)] shadow-elevation-1 p-5",
+					}), !z && /* @__PURE__ */ h(De, {
+						className: "p-5",
 						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-start gap-3 mb-4",
 							children: [/* @__PURE__ */ m("div", {
@@ -446,10 +443,10 @@ var g = () => {
 								className: "text-sm text-text-secondary mt-1",
 								children: "Choose a plan that fits your needs to unlock all features"
 							})] })]
-						}), /* @__PURE__ */ h("button", {
+						}), /* @__PURE__ */ h(Te, {
 							type: "button",
 							onClick: () => Q("/plans"),
-							className: "w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
+							className: "w-full",
 							children: ["Browse Plans", /* @__PURE__ */ m(_e, { className: "size-4" })]
 						})]
 					})]
@@ -457,18 +454,18 @@ var g = () => {
 			}),
 			/* @__PURE__ */ m(fe, {
 				dataTour: "billing-overview-recommended-addons",
-				addons: Ae,
-				hasSubscription: L,
+				addons: je,
+				hasSubscription: z,
 				onViewAddon: (e) => Q(`/addons/${e}`),
 				onPurchaseAddon: (e) => Q(`/addons/${e}?action=purchase`),
 				onViewAllAddons: () => Q("/addons"),
-				onAddToCart: Ve,
-				isInCart: He,
-				getCartQuantity: Ue,
-				onUpdateQuantity: We,
-				onRemoveFromCart: Ge,
+				onAddToCart: We,
+				isInCart: Ge,
+				getCartQuantity: Ke,
+				onUpdateQuantity: qe,
+				onRemoveFromCart: Je,
 				maxAddons: 3,
-				isLoading: je
+				isLoading: Me
 			}),
 			/* @__PURE__ */ m(he, {}),
 			/* @__PURE__ */ m(r, {
@@ -476,17 +473,17 @@ var g = () => {
 				onClose: () => {
 					T(!1), D(null);
 				},
-				onSubmit: Pe,
-				isSubmitting: Ne,
+				onSubmit: Le,
+				isSubmitting: Ie,
 				error: E
 			}),
-			P && /* @__PURE__ */ m(pe, {
-				isOpen: De,
+			I && /* @__PURE__ */ m(pe, {
+				isOpen: Ae,
 				onClose: () => A(!1),
-				billingAccountId: P.id,
-				currency: P.currency,
-				country: P.billingAddresses?.[0]?.country,
-				onSuccess: Ie
+				billingAccountId: I.id,
+				currency: I.currency,
+				country: I.billingAddresses?.[0]?.country,
+				onSuccess: ze
 			})
 		]
 	}) : /* @__PURE__ */ m(t, { message: "You don't have permission to view billing information." });