@burdenoff/microfe-billing 2026.526.1 → 2026.528.1

package/dist/billing/modules/settings/pages/SettingsPage.js

@@ -2,245 +2,248 @@ import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { AccessDenied as t } from "../../../shared/components/AccessDenied.js";
 import { PageHeader as n } from "../../../shared/components/PageHeader.js";
 import "../../../shared/components/index.js";
-import { useBillingEventEmitter as r } from "../../../hooks/useBillingEventEmitter.js";
-import { directBillingGraphqlRequest as ee } from "../../../shared/utils/directBillingGraphql.js";
+import { useBillingEventEmitter as ee } from "../../../hooks/useBillingEventEmitter.js";
+import { directBillingGraphqlRequest as te } from "../../../shared/utils/directBillingGraphql.js";
 import "../../../shared/utils/index.js";
-import { useBillingPermissions as i } from "../../../hooks/useBillingPermissions.js";
-import { ArchiveBillingAccountSettingsDocument as te, useGetBillingAccountSettingsQuery as ne, useGetBillingAccountsSettingsQuery as a, useGetDefaultBillingAccountSettingsQuery as re, useSetDefaultBillingAccountSettingsMutation as ie, useUpdateBillingAccountSettingsMutation as o } from "../../../../generated/global-operations.js";
-import { useCallback as s, useEffect as ae, useMemo as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useI18n as oe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useBillingPermissions as ne } from "../../../hooks/useBillingPermissions.js";
+import { ArchiveBillingAccountSettingsDocument as re, useGetBillingAccountSettingsQuery as ie, useGetBillingAccountsSettingsQuery as ae, useGetDefaultBillingAccountSettingsQuery as oe, useSetDefaultBillingAccountSettingsMutation as se, useUpdateBillingAccountSettingsMutation as ce } from "../../../../generated/global-operations.js";
+import { useCallback as r, useEffect as le, useMemo as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { OptionalFields as u } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/settings/pages/SettingsPage.tsx
-var se = () => {
+var d = () => {
 	if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
-}, p = () => {
-	let { t: p } = oe(), m = (e, t) => {
-		let n = p(e);
+}, f = () => {
+	let { t: f } = l(), p = (e, t) => {
+		let n = f(e);
 		return n === e ? t : n;
-	}, h = i(), { apiGatewayUrl: g, authToken: _, orgId: v } = e(), { emit: y } = r(), [b, x] = l(se), [S, C] = l(!1), [w, T] = l(!1), [E, D] = l(!1), [O, k] = l(null), [A, j] = l(!1), [ce, M] = l(!1), [le, N] = l(!1), [P, F] = l({
+	}, m = ne(), { apiGatewayUrl: h, authToken: g, orgId: _ } = e(), { emit: v } = ee(), [y, b] = a(d), [x, S] = a(!1), [C, w] = a(!1), [T, E] = a(!1), [D, O] = a(null), [ue, k] = a(!1), [de, A] = a(!1), [fe, j] = a(!1), [M, N] = a({
 		name: "",
 		email: "",
 		billingEmail: "",
 		currency: "USD",
 		taxId: "",
 		isDefault: !1
-	}), { data: I, loading: ue, refetch: L } = a({}), R = c(() => I?.getBillingAccountsByOrg || [], [I?.getBillingAccountsByOrg]), { data: z, loading: B, refetch: V } = re({}), H = z?.getDefaultBillingAccount || null, { data: de, loading: U, refetch: W } = ne({
-		variables: { id: b },
-		skip: !b
-	}), G = de?.getBillingAccount || null, [K] = o(), [q] = ie(), J = c(() => {
-		if (b) {
-			if (G) return G;
-			let e = R.find((e) => e.id === b);
+	}), { data: P, loading: F, refetch: I } = ae({}), L = i(() => P?.getBillingAccountsByOrg || [], [P?.getBillingAccountsByOrg]), { data: R, loading: z, refetch: B } = oe({}), V = R?.getDefaultBillingAccount || null, { data: pe, loading: H, refetch: U } = ie({
+		variables: { id: y },
+		skip: !y
+	}), W = pe?.getBillingAccount || null, [G] = ce(), [K] = se(), q = i(() => {
+		if (y) {
+			if (W) return W;
+			let e = L.find((e) => e.id === y);
 			if (e) return e;
-			if (U) return null;
+			if (H) return null;
 		}
-		return H;
+		return V;
 	}, [
-		b,
-		G,
-		R,
-		U,
-		H
-	]), fe = ue || B || b && U;
-	ae(() => {
-		J && F({
-			name: J.name || "",
-			email: J.email || "",
-			billingEmail: J.billingEmail || "",
-			currency: J.currency || "USD",
-			taxId: J.taxId || "",
-			isDefault: J.isDefault || !1
+		y,
+		W,
+		L,
+		H,
+		V
+	]), me = F || z || y && H;
+	le(() => {
+		q && N({
+			name: q.name || "",
+			email: q.email || "",
+			billingEmail: q.billingEmail || "",
+			currency: q.currency || "USD",
+			taxId: q.taxId || "",
+			isDefault: q.isDefault || !1
 		});
-	}, [J]);
-	let pe = (e) => {
-		x(e.id), C(!1), j(!1), k(null);
-	}, Y = (e, t) => {
-		F((n) => ({
+	}, [q]);
+	let he = (e) => {
+		b(e.id), S(!1), k(!1), O(null);
+	}, J = (e, t) => {
+		N((n) => ({
 			...n,
 			[e]: t
-		})), j(!1), k(null);
-	}, X = c(() => R.find((e) => e.isDefault) || null, [R]), me = c(() => J ? P.name !== (J.name || "") || P.email !== (J.email || "") || P.billingEmail !== (J.billingEmail || "") || P.currency !== (J.currency || "USD") || P.taxId !== (J.taxId || "") || P.isDefault !== (J.isDefault || !1) : !1, [P, J]), Z = P.isDefault && !J?.isDefault, Q = Z && X && X.id !== J?.id, $ = s(async () => {
-		if (J?.id) {
-			T(!0), k(null), j(!1), M(!1), N(!1);
+		})), k(!1), O(null);
+	}, Y = i(() => L.find((e) => e.isDefault) || null, [L]), ge = i(() => q ? M.name !== (q.name || "") || M.email !== (q.email || "") || M.billingEmail !== (q.billingEmail || "") || M.currency !== (q.currency || "USD") || M.taxId !== (q.taxId || "") || M.isDefault !== (q.isDefault || !1) : !1, [M, q]), X = M.isDefault && !q?.isDefault, Z = X && Y && Y.id !== q?.id, Q = r(async () => {
+		if (q?.id) {
+			w(!0), O(null), k(!1), A(!1), j(!1);
 			try {
-				await K({ variables: { input: {
-					id: J.id,
-					name: P.name,
-					email: P.email,
-					billingEmail: P.billingEmail || null,
-					currency: P.currency,
-					taxId: P.taxId || null
-				} } }), y("billing.billing_account.updated", {
+				await G({ variables: { input: {
+					id: q.id,
+					name: M.name,
+					email: M.email,
+					billingEmail: M.billingEmail || null,
+					currency: M.currency,
+					taxId: M.taxId || null
+				} } }), v("billing.billing_account.updated", {
 					route: "/billing/settings",
-					entityId: J.id,
+					entityId: q.id,
 					source: "settings"
-				}), Z && (await q({
-					variables: { id: J.id },
+				}), X && (await K({
+					variables: { id: q.id },
 					refetchQueries: ["GetBillingAccountsByTenant", "GetDefaultBillingAccount"]
-				}), y("billing.billing_account.updated", {
+				}), v("billing.billing_account.updated", {
 					route: "/billing/settings",
-					entityId: J.id,
+					entityId: q.id,
 					source: "settings.default"
-				})), b ? await W() : await V(), j(!0), setTimeout(() => j(!1), 3e3);
+				})), y ? await U() : await B(), k(!0), setTimeout(() => k(!1), 3e3);
 			} catch (e) {
-				k(e instanceof Error ? e.message : "Failed to save changes");
+				O(e instanceof Error ? e.message : "Failed to save changes");
 			} finally {
-				T(!1);
+				w(!1);
 			}
 		}
 	}, [
-		J?.id,
-		P,
-		Z,
+		q?.id,
+		M,
+		X,
+		G,
 		K,
-		q,
-		b,
-		W,
-		V,
-		y
-	]), he = s(() => {
-		J?.id && (Q ? (N(!0), M(!0)) : $());
+		y,
+		U,
+		B,
+		v
+	]), $ = r(() => {
+		q?.id && (Z ? (j(!0), A(!0)) : Q());
 	}, [
-		J?.id,
-		Q,
-		$
-	]), ge = s(async () => {
-		if (!J?.id || !J.isActive) return;
-		let e = R.find((e) => e.id !== J.id && e.isActive);
-		if (window.confirm(J.isDefault ? `Archive ${J.name}? ${e ? `${e.name} will become the default account.` : "No replacement default account is available."}` : `Archive ${J.name}?`)) {
-			D(!0), k(null), j(!1);
+		q?.id,
+		Z,
+		Q
+	]), _e = r(async () => {
+		if (!q?.id || !q.isActive) return;
+		let e = L.find((e) => e.id !== q.id && e.isActive);
+		if (window.confirm(q.isDefault ? `Archive ${q.name}? ${e ? `${e.name} will become the default account.` : "No replacement default account is available."}` : `Archive ${q.name}?`)) {
+			E(!0), O(null), k(!1);
 			try {
-				await ee({
-					apiGatewayUrl: g,
-					authToken: _,
-					orgId: v,
-					query: te,
+				await te({
+					apiGatewayUrl: h,
+					authToken: g,
+					orgId: _,
+					query: re,
 					variables: {
-						id: J.id,
+						id: q.id,
 						reason: "Archived from billing settings",
-						replacementDefaultBillingAccountId: J.isDefault ? e?.id ?? null : null
+						replacementDefaultBillingAccountId: q.isDefault ? e?.id ?? null : null
 					}
-				}), y("billing.billing_account.archived", {
+				}), v("billing.billing_account.archived", {
 					route: "/billing/settings",
-					entityId: J.id,
+					entityId: q.id,
 					source: "settings"
-				}), await Promise.all([L(), V()]), x(e?.id), j(!0), setTimeout(() => j(!1), 3e3);
+				}), await Promise.all([I(), B()]), b(e?.id), k(!0), setTimeout(() => k(!1), 3e3);
 			} catch (e) {
-				k(e instanceof Error ? e.message : "Failed to archive billing account");
+				O(e instanceof Error ? e.message : "Failed to archive billing account");
 			} finally {
-				D(!1);
+				E(!1);
 			}
 		}
 	}, [
+		h,
 		g,
-		_,
-		J,
-		R,
-		v,
+		q,
 		L,
-		V,
-		y
+		_,
+		I,
+		B,
+		v
 	]);
-	return h.canManageBillingAccount ? fe && !J ? /* @__PURE__ */ f("div", {
+	return m.canManageBillingAccount ? me && !q ? /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ s("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ s("div", {
 			className: "border border-border rounded-lg p-6 space-y-4",
 			children: [
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ d("div", { className: "h-10 bg-muted animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ s("div", { className: "h-10 bg-muted animate-pulse rounded" }, e))
 		})]
-	}) : /* @__PURE__ */ f("div", {
+	}) : /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ d(n, {
-				title: m("billing.settings.billingSettings", "Billing Settings"),
-				description: m("billing.settings.description", "Manage your billing account configuration")
+			/* @__PURE__ */ s(n, {
+				title: p("billing.settings.billingSettings", "Billing Settings"),
+				description: p("billing.settings.description", "Manage your billing account configuration")
 			}),
-			R.length > 1 && /* @__PURE__ */ f("div", {
+			L.length > 1 && /* @__PURE__ */ c("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ f("button", {
-					onClick: () => C(!S),
+				children: [/* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: () => S(!x),
 					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors",
-					children: [/* @__PURE__ */ f("div", {
+					children: [/* @__PURE__ */ c("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ d("div", {
-							className: "w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center",
-							children: /* @__PURE__ */ d("svg", {
-								className: "w-4 h-4 text-primary",
+						children: [/* @__PURE__ */ s("div", {
+							className: "size-8 rounded-lg bg-primary/10 flex items-center justify-center",
+							children: /* @__PURE__ */ s("svg", {
+								className: "size-4 text-primary",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
-								children: /* @__PURE__ */ d("path", {
+								children: /* @__PURE__ */ s("path", {
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									strokeWidth: 2,
 									d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
 								})
 							})
-						}), /* @__PURE__ */ f("div", {
+						}), /* @__PURE__ */ c("div", {
 							className: "text-left",
-							children: [/* @__PURE__ */ d("p", {
+							children: [/* @__PURE__ */ s("p", {
 								className: "text-sm font-medium text-foreground",
-								children: J?.name || m("billing.settings.selectAccount", "Select Account")
-							}), /* @__PURE__ */ d("p", {
+								children: q?.name || p("billing.settings.selectAccount", "Select Account")
+							}), /* @__PURE__ */ s("p", {
 								className: "text-xs text-muted-foreground",
-								children: J?.email
+								children: q?.email
 							})]
 						})]
-					}), /* @__PURE__ */ d("svg", {
-						className: `w-4 h-4 text-muted-foreground transition-transform ${S ? "rotate-180" : ""}`,
+					}), /* @__PURE__ */ s("svg", {
+						className: `size-4 text-muted-foreground transition-transform ${x ? "rotate-180" : ""}`,
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ d("path", {
+						children: /* @__PURE__ */ s("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
 							d: "M19 9l-7 7-7-7"
 						})
 					})]
-				}), S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+				}), x && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
 					className: "fixed inset-0 z-10",
-					onClick: () => C(!1)
-				}), /* @__PURE__ */ d("div", {
+					onClick: () => S(!1)
+				}), /* @__PURE__ */ s("div", {
 					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
-					children: R.map((e) => /* @__PURE__ */ f("button", {
-						onClick: () => pe(e),
+					children: L.map((e) => /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => he(e),
 						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ c("div", {
 							className: "flex items-center gap-3 min-w-0",
-							children: [/* @__PURE__ */ d("div", {
-								className: "w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
-								children: /* @__PURE__ */ d("svg", {
-									className: "w-4 h-4 text-muted-foreground",
+							children: [/* @__PURE__ */ s("div", {
+								className: "size-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
+								children: /* @__PURE__ */ s("svg", {
+									className: "size-4 text-muted-foreground",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
-									children: /* @__PURE__ */ d("path", {
+									children: /* @__PURE__ */ s("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
 										d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
 									})
 								})
-							}), /* @__PURE__ */ f("div", {
+							}), /* @__PURE__ */ c("div", {
 								className: "text-left min-w-0",
-								children: [/* @__PURE__ */ d("p", {
+								children: [/* @__PURE__ */ s("p", {
 									className: "text-sm font-medium text-foreground truncate",
 									children: e.name
-								}), /* @__PURE__ */ d("p", {
+								}), /* @__PURE__ */ s("p", {
 									className: "text-xs text-muted-foreground truncate",
 									children: e.email
 								})]
 							})]
-						}), J?.id === e.id && /* @__PURE__ */ d("svg", {
-							className: "w-4 h-4 text-primary flex-shrink-0",
+						}), q?.id === e.id && /* @__PURE__ */ s("svg", {
+							className: "size-4 text-primary flex-shrink-0",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ d("path", {
+							children: /* @__PURE__ */ s("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -250,383 +253,387 @@ var se = () => {
 					}, e.id))
 				})] })]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ c("div", {
 				className: "border border-border rounded-lg bg-card",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ s("div", {
 					className: "p-6 border-b border-border",
-					children: /* @__PURE__ */ f("div", {
+					children: /* @__PURE__ */ c("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h2", {
+						children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
 							className: "text-lg font-semibold text-foreground",
-							children: m("billing.settings.accountInfo", "Account Information")
-						}), /* @__PURE__ */ d("p", {
+							children: p("billing.settings.accountInfo", "Account Information")
+						}), /* @__PURE__ */ s("p", {
 							className: "text-sm text-muted-foreground mt-1",
-							children: m("billing.settings.accountInfoDescription", "Update your billing contact details and tax information")
-						})] }), J?.isDefault && /* @__PURE__ */ f("span", {
+							children: p("billing.settings.accountInfoDescription", "Update your billing contact details and tax information")
+						})] }), q?.isDefault && /* @__PURE__ */ c("span", {
 							className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full",
-							children: [/* @__PURE__ */ d("svg", {
-								className: "w-3 h-3",
+							children: [/* @__PURE__ */ s("svg", {
+								className: "size-3",
 								fill: "currentColor",
 								viewBox: "0 0 20 20",
-								children: /* @__PURE__ */ d("path", {
+								children: /* @__PURE__ */ s("path", {
 									fillRule: "evenodd",
 									d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
 									clipRule: "evenodd"
 								})
-							}), m("billing.settings.defaultAccount", "Default Account")]
+							}), p("billing.settings.defaultAccount", "Default Account")]
 						})]
 					})
-				}), /* @__PURE__ */ f("div", {
+				}), /* @__PURE__ */ c("div", {
 					className: "p-6 space-y-6",
 					children: [
-						J && /* @__PURE__ */ f("div", {
+						q && /* @__PURE__ */ c("div", {
 							className: "grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm pb-4 border-b border-border",
 							children: [
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-muted-foreground",
-									children: m("billing.settings.status", "Status")
-								}), /* @__PURE__ */ d("p", {
-									className: `font-medium ${J.isActive ? "text-status-success-text" : "text-destructive"}`,
-									children: J.isActive ? m("billing.settings.active", "Active") : m("billing.settings.inactive", "Inactive")
+									children: p("billing.settings.status", "Status")
+								}), /* @__PURE__ */ s("p", {
+									className: `font-medium ${q.isActive ? "text-status-success-text" : "text-destructive"}`,
+									children: q.isActive ? p("billing.settings.active", "Active") : p("billing.settings.inactive", "Inactive")
 								})] }),
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-muted-foreground",
-									children: m("billing.settings.creditBalance", "Credit Balance")
-								}), /* @__PURE__ */ f("p", {
+									children: p("billing.settings.creditBalance", "Credit Balance")
+								}), /* @__PURE__ */ c("p", {
 									className: "font-medium text-foreground",
-									children: [(J.creditAmount || 0).toLocaleString(), " Credits"]
+									children: [(q.creditAmount || 0).toLocaleString(), " Credits"]
 								})] }),
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-muted-foreground",
-									children: m("billing.settings.accountId", "Account ID")
-								}), /* @__PURE__ */ d("p", {
+									children: p("billing.settings.accountId", "Account ID")
+								}), /* @__PURE__ */ s("p", {
 									className: "font-mono text-xs text-foreground truncate",
-									title: J.id,
-									children: J.id
+									title: q.id,
+									children: q.id
 								})] }),
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-muted-foreground",
-									children: m("billing.settings.created", "Created")
-								}), /* @__PURE__ */ d("p", {
+									children: p("billing.settings.created", "Created")
+								}), /* @__PURE__ */ s("p", {
 									className: "font-medium text-foreground",
-									children: J.createdAt ? new Date(J.createdAt).toLocaleDateString() : m("billing.settings.notAvailable", "N/A")
+									children: q.createdAt ? new Date(q.createdAt).toLocaleDateString() : p("billing.settings.notAvailable", "N/A")
 								})] })
 							]
 						}),
-						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h3", {
+						/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h3", {
 							className: "text-sm font-medium text-foreground mb-4",
-							children: m("billing.settings.contactDetails", "Contact Details")
-						}), /* @__PURE__ */ f("div", {
+							children: p("billing.settings.contactDetails", "Contact Details")
+						}), /* @__PURE__ */ c("div", {
 							className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-							children: [
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
-									htmlFor: "billing-account-name",
-									className: "block text-sm font-medium text-foreground mb-1",
-									children: [
-										m("billing.settings.accountName", "Account Name"),
-										" ",
-										/* @__PURE__ */ d("span", {
-											className: "text-destructive",
-											children: "*"
-										})
-									]
-								}), /* @__PURE__ */ d("input", {
-									id: "billing-account-name",
-									type: "text",
-									value: P.name,
-									onChange: (e) => Y("name", e.target.value),
-									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
-								})] }),
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("label", {
-									htmlFor: "billing-account-email",
-									className: "block text-sm font-medium text-foreground mb-1",
-									children: [
-										m("billing.settings.email", "Email"),
-										" ",
-										/* @__PURE__ */ d("span", {
-											className: "text-destructive",
-											children: "*"
-										})
-									]
-								}), /* @__PURE__ */ d("input", {
-									id: "billing-account-email",
-									type: "email",
-									value: P.email,
-									onChange: (e) => Y("email", e.target.value),
-									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
-								})] }),
-								/* @__PURE__ */ f("div", { children: [
-									/* @__PURE__ */ d("label", {
-										htmlFor: "billing-account-billing-email",
-										className: "block text-sm font-medium text-foreground mb-1",
-										children: m("billing.settings.billingEmail", "Billing Email")
-									}),
-									/* @__PURE__ */ d("input", {
-										id: "billing-account-billing-email",
-										type: "email",
-										value: P.billingEmail,
-										onChange: (e) => Y("billingEmail", e.target.value),
-										placeholder: m("billing.settings.billingEmailPlaceholder", "Optional - defaults to account email"),
-										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
-									}),
-									/* @__PURE__ */ d("p", {
-										className: "text-xs text-muted-foreground mt-1",
-										children: m("billing.settings.billingEmailHelp", "Invoices will be sent to this email if provided")
+							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
+								htmlFor: "billing-account-name",
+								className: "block text-sm font-medium text-foreground mb-1",
+								children: [
+									p("billing.settings.accountName", "Account Name"),
+									" ",
+									/* @__PURE__ */ s("span", {
+										className: "text-destructive",
+										children: "*"
 									})
-								] }),
-								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
-									htmlFor: "billing-account-currency",
-									className: "block text-sm font-medium text-foreground mb-1",
-									children: m("billing.settings.currency", "Currency")
-								}), /* @__PURE__ */ f("select", {
-									id: "billing-account-currency",
-									value: P.currency,
-									onChange: (e) => Y("currency", e.target.value),
-									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
-									children: [
-										/* @__PURE__ */ d("option", {
-											value: "USD",
-											children: "USD - US Dollar"
-										}),
-										/* @__PURE__ */ d("option", {
-											value: "EUR",
-											children: "EUR - Euro"
+								]
+							}), /* @__PURE__ */ s("input", {
+								id: "billing-account-name",
+								type: "text",
+								value: M.name,
+								onChange: (e) => J("name", e.target.value),
+								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+							})] }), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
+								htmlFor: "billing-account-email",
+								className: "block text-sm font-medium text-foreground mb-1",
+								children: [
+									p("billing.settings.email", "Email"),
+									" ",
+									/* @__PURE__ */ s("span", {
+										className: "text-destructive",
+										children: "*"
+									})
+								]
+							}), /* @__PURE__ */ s("input", {
+								id: "billing-account-email",
+								type: "email",
+								value: M.email,
+								onChange: (e) => J("email", e.target.value),
+								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+							})] })]
+						})] }),
+						/* @__PURE__ */ s(u, {
+							title: p("billing.settings.advancedTitle", "Advanced settings"),
+							description: p("billing.settings.advancedDescription", "Billing email override, currency, and tax identification."),
+							children: /* @__PURE__ */ c("div", {
+								className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+								children: [
+									/* @__PURE__ */ c("div", { children: [
+										/* @__PURE__ */ s("label", {
+											htmlFor: "billing-account-billing-email",
+											className: "block text-sm font-medium text-foreground mb-1",
+											children: p("billing.settings.billingEmail", "Billing Email")
 										}),
-										/* @__PURE__ */ d("option", {
-											value: "GBP",
-											children: "GBP - British Pound"
+										/* @__PURE__ */ s("input", {
+											id: "billing-account-billing-email",
+											type: "email",
+											value: M.billingEmail,
+											onChange: (e) => J("billingEmail", e.target.value),
+											placeholder: p("billing.settings.billingEmailPlaceholder", "Optional - defaults to account email"),
+											className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 										}),
-										/* @__PURE__ */ d("option", {
-											value: "INR",
-											children: "INR - Indian Rupee"
+										/* @__PURE__ */ s("p", {
+											className: "text-xs text-muted-foreground mt-1",
+											children: p("billing.settings.billingEmailHelp", "Invoices will be sent to this email if provided")
 										})
-									]
-								})] })
-							]
-						})] }),
-						/* @__PURE__ */ f("div", {
-							className: "pt-4 border-t border-border",
-							children: [/* @__PURE__ */ d("h3", {
-								className: "text-sm font-medium text-foreground mb-4",
-								children: m("billing.settings.taxInformation", "Tax Information")
-							}), /* @__PURE__ */ f("div", {
-								className: "max-w-md",
-								children: [
-									/* @__PURE__ */ d("label", {
-										htmlFor: "billing-account-tax-id",
+									] }),
+									/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
+										htmlFor: "billing-account-currency",
 										className: "block text-sm font-medium text-foreground mb-1",
-										children: m("billing.settings.taxId", "Tax ID / VAT Number")
-									}),
-									/* @__PURE__ */ d("input", {
-										id: "billing-account-tax-id",
-										type: "text",
-										value: P.taxId,
-										onChange: (e) => Y("taxId", e.target.value),
-										placeholder: m("billing.settings.taxIdPlaceholder", "Enter your tax identification number"),
-										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
-									}),
-									/* @__PURE__ */ d("p", {
-										className: "text-xs text-muted-foreground mt-1",
-										children: m("billing.settings.taxIdHelp", "Used for invoices and tax compliance (e.g., GST, VAT number)")
+										children: p("billing.settings.currency", "Currency")
+									}), /* @__PURE__ */ c("select", {
+										id: "billing-account-currency",
+										value: M.currency,
+										onChange: (e) => J("currency", e.target.value),
+										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+										children: [
+											/* @__PURE__ */ s("option", {
+												value: "USD",
+												children: "USD - US Dollar"
+											}),
+											/* @__PURE__ */ s("option", {
+												value: "EUR",
+												children: "EUR - Euro"
+											}),
+											/* @__PURE__ */ s("option", {
+												value: "GBP",
+												children: "GBP - British Pound"
+											}),
+											/* @__PURE__ */ s("option", {
+												value: "INR",
+												children: "INR - Indian Rupee"
+											})
+										]
+									})] }),
+									/* @__PURE__ */ c("div", {
+										className: "sm:col-span-2 max-w-md",
+										children: [
+											/* @__PURE__ */ s("label", {
+												htmlFor: "billing-account-tax-id",
+												className: "block text-sm font-medium text-foreground mb-1",
+												children: p("billing.settings.taxId", "Tax ID / VAT Number")
+											}),
+											/* @__PURE__ */ s("input", {
+												id: "billing-account-tax-id",
+												type: "text",
+												value: M.taxId,
+												onChange: (e) => J("taxId", e.target.value),
+												placeholder: p("billing.settings.taxIdPlaceholder", "Enter your tax identification number"),
+												className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+											}),
+											/* @__PURE__ */ s("p", {
+												className: "text-xs text-muted-foreground mt-1",
+												children: p("billing.settings.taxIdHelp", "Used for invoices and tax compliance (e.g., GST, VAT number)")
+											})
+										]
 									})
 								]
-							})]
+							})
 						}),
-						J?.isActive && R.length > 1 && /* @__PURE__ */ d("div", {
+						q?.isActive && L.length > 1 && /* @__PURE__ */ s("div", {
 							className: "pt-4 border-t border-border",
-							children: /* @__PURE__ */ f("div", {
+							children: /* @__PURE__ */ c("div", {
 								className: "flex items-start gap-3",
-								children: [/* @__PURE__ */ d("div", {
+								children: [/* @__PURE__ */ s("div", {
 									className: "flex items-center h-6",
-									children: /* @__PURE__ */ d("input", {
+									children: /* @__PURE__ */ s("input", {
 										type: "checkbox",
 										id: "isDefault",
-										checked: P.isDefault,
-										onChange: (e) => F((t) => ({
+										checked: M.isDefault,
+										onChange: (e) => N((t) => ({
 											...t,
 											isDefault: e.target.checked
 										})),
-										disabled: J?.isDefault,
-										className: "w-4 h-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
+										disabled: q?.isDefault,
+										className: "size-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
 									})
-								}), /* @__PURE__ */ f("div", {
+								}), /* @__PURE__ */ c("div", {
 									className: "flex-1",
-									children: [/* @__PURE__ */ d("label", {
+									children: [/* @__PURE__ */ s("label", {
 										htmlFor: "isDefault",
 										className: "text-sm font-medium text-foreground cursor-pointer",
-										children: m("billing.settings.setDefault", "Set as default billing account")
-									}), /* @__PURE__ */ d("p", {
+										children: p("billing.settings.setDefault", "Set as default billing account")
+									}), /* @__PURE__ */ s("p", {
 										className: "text-xs text-muted-foreground mt-0.5",
-										children: J?.isDefault ? m("billing.settings.currentDefaultDescription", "This is currently your default billing account") : m("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
+										children: q?.isDefault ? p("billing.settings.currentDefaultDescription", "This is currently your default billing account") : p("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
 									})]
 								})]
 							})
 						}),
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ c("div", {
 							className: "pt-4 border-t border-border flex items-center justify-between",
-							children: [/* @__PURE__ */ f("div", {
+							children: [/* @__PURE__ */ c("div", {
 								className: "flex items-center gap-2",
-								children: [A && /* @__PURE__ */ f("div", {
+								children: [ue && /* @__PURE__ */ c("div", {
 									className: "flex items-center gap-2 text-sm text-status-success-text",
-									children: [/* @__PURE__ */ d("svg", {
-										className: "w-4 h-4",
+									children: [/* @__PURE__ */ s("svg", {
+										className: "size-4",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
-										children: /* @__PURE__ */ d("path", {
+										children: /* @__PURE__ */ s("path", {
 											strokeLinecap: "round",
 											strokeLinejoin: "round",
 											strokeWidth: 2,
 											d: "M5 13l4 4L19 7"
 										})
-									}), m("billing.settings.saveSuccess", "Changes saved successfully")]
-								}), O && /* @__PURE__ */ f("div", {
+									}), p("billing.settings.saveSuccess", "Changes saved successfully")]
+								}), D && /* @__PURE__ */ c("div", {
 									className: "flex items-center gap-2 text-sm text-destructive",
-									children: [/* @__PURE__ */ d("svg", {
-										className: "w-4 h-4",
+									children: [/* @__PURE__ */ s("svg", {
+										className: "size-4",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
-										children: /* @__PURE__ */ d("path", {
+										children: /* @__PURE__ */ s("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"
 										})
-									}), O]
+									}), D]
 								})]
-							}), /* @__PURE__ */ f("div", {
+							}), /* @__PURE__ */ c("div", {
 								className: "flex items-center gap-3",
-								children: [h.canArchiveBillingAccount && J?.isActive ? /* @__PURE__ */ d("button", {
-									onClick: ge,
-									disabled: w || E,
+								children: [m.canArchiveBillingAccount && q?.isActive ? /* @__PURE__ */ s("button", {
+									type: "button",
+									onClick: _e,
+									disabled: C || T,
 									className: "px-4 py-2 text-sm font-medium border border-border text-status-error-text rounded-md hover:bg-status-error-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-									children: E ? "Archiving..." : "Archive Account"
-								}) : null, /* @__PURE__ */ f("button", {
-									onClick: he,
-									disabled: !me || w || E || !P.name || !P.email,
+									children: T ? "Archiving..." : "Archive Account"
+								}) : null, /* @__PURE__ */ c("button", {
+									type: "button",
+									onClick: $,
+									disabled: !ge || C || T || !M.name || !M.email,
 									className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2",
-									children: [w && /* @__PURE__ */ f("svg", {
-										className: "w-4 h-4 animate-spin",
+									children: [C && /* @__PURE__ */ c("svg", {
+										className: "size-4 animate-spin",
 										fill: "none",
 										viewBox: "0 0 24 24",
-										children: [/* @__PURE__ */ d("circle", {
+										children: [/* @__PURE__ */ s("circle", {
 											className: "opacity-25",
 											cx: "12",
 											cy: "12",
 											r: "10",
 											stroke: "currentColor",
 											strokeWidth: "4"
-										}), /* @__PURE__ */ d("path", {
+										}), /* @__PURE__ */ s("path", {
 											className: "opacity-75",
 											fill: "currentColor",
 											d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 										})]
-									}), w ? "Saving..." : "Save Changes"]
+									}), C ? "Saving..." : "Save Changes"]
 								})]
 							})]
 						})
 					]
 				})]
 			}),
-			ce && le && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+			de && fe && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
 				className: "fixed inset-0 bg-overlay-scrim z-40",
 				onClick: () => {
-					w || (M(!1), N(!1), F((e) => ({
+					C || (A(!1), j(!1), N((e) => ({
 						...e,
-						isDefault: J?.isDefault || !1
+						isDefault: q?.isDefault || !1
 					})));
 				}
-			}), /* @__PURE__ */ d("div", {
+			}), /* @__PURE__ */ s("div", {
 				className: "fixed inset-0 flex items-center justify-center z-50 p-4",
-				children: /* @__PURE__ */ f("div", {
+				children: /* @__PURE__ */ c("div", {
 					className: "bg-card border border-border rounded-lg shadow-xl max-w-md w-full p-6",
 					children: [
-						/* @__PURE__ */ d("h3", {
+						/* @__PURE__ */ s("h3", {
 							className: "text-lg font-semibold text-foreground mb-2",
 							children: "Confirm Default Account Change"
 						}),
-						/* @__PURE__ */ f("p", {
+						/* @__PURE__ */ c("p", {
 							className: "text-sm text-muted-foreground mb-4",
 							children: [
 								"You are about to set",
 								" ",
-								/* @__PURE__ */ d("strong", {
+								/* @__PURE__ */ s("strong", {
 									className: "text-foreground",
-									children: J?.name
+									children: q?.name
 								}),
 								" as your default billing account and save your changes."
 							]
 						}),
-						X && X.id !== J?.id && /* @__PURE__ */ d("div", {
+						Y && Y.id !== q?.id && /* @__PURE__ */ s("div", {
 							className: "mb-4 p-3 bg-status-warning-bg-subtle border border-border-subtle rounded-md",
-							children: /* @__PURE__ */ f("div", {
+							children: /* @__PURE__ */ c("div", {
 								className: "flex items-start gap-2",
-								children: [/* @__PURE__ */ d("svg", {
-									className: "w-5 h-5 text-status-warning-text flex-shrink-0 mt-0.5",
+								children: [/* @__PURE__ */ s("svg", {
+									className: "size-5 text-status-warning-text flex-shrink-0 mt-0.5",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
-									children: /* @__PURE__ */ d("path", {
+									children: /* @__PURE__ */ s("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__ */ f("div", {
+								}), /* @__PURE__ */ c("div", {
 									className: "text-sm",
-									children: [/* @__PURE__ */ d("p", {
+									children: [/* @__PURE__ */ s("p", {
 										className: "font-medium text-status-warning-text",
 										children: "Current default will change"
-									}), /* @__PURE__ */ f("p", {
+									}), /* @__PURE__ */ c("p", {
 										className: "text-status-warning-text mt-0.5",
-										children: [/* @__PURE__ */ d("strong", { children: X.name }), " will no longer be the default account."]
+										children: [/* @__PURE__ */ s("strong", { children: Y.name }), " will no longer be the default account."]
 									})]
 								})]
 							})
 						}),
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ c("div", {
 							className: "flex justify-end gap-3",
-							children: [/* @__PURE__ */ d("button", {
+							children: [/* @__PURE__ */ s("button", {
+								type: "button",
 								onClick: () => {
-									M(!1), N(!1), F((e) => ({
+									A(!1), j(!1), N((e) => ({
 										...e,
-										isDefault: J?.isDefault || !1
+										isDefault: q?.isDefault || !1
 									}));
 								},
-								disabled: w,
+								disabled: C,
 								className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-md hover:bg-muted transition-colors disabled:opacity-50",
 								children: "Cancel"
-							}), /* @__PURE__ */ f("button", {
-								onClick: $,
-								disabled: w,
+							}), /* @__PURE__ */ c("button", {
+								type: "button",
+								onClick: Q,
+								disabled: C,
 								className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors flex items-center gap-2",
-								children: [w && /* @__PURE__ */ f("svg", {
-									className: "w-4 h-4 animate-spin",
+								children: [C && /* @__PURE__ */ c("svg", {
+									className: "size-4 animate-spin",
 									fill: "none",
 									viewBox: "0 0 24 24",
-									children: [/* @__PURE__ */ d("circle", {
+									children: [/* @__PURE__ */ s("circle", {
 										className: "opacity-25",
 										cx: "12",
 										cy: "12",
 										r: "10",
 										stroke: "currentColor",
 										strokeWidth: "4"
-									}), /* @__PURE__ */ d("path", {
+									}), /* @__PURE__ */ s("path", {
 										className: "opacity-75",
 										fill: "currentColor",
 										d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 									})]
-								}), w ? "Saving..." : "Save Changes"]
+								}), C ? "Saving..." : "Save Changes"]
 							})]
 						})
 					]
 				})
 			})] })
 		]
-	}) : /* @__PURE__ */ d(t, { message: "You don't have permission to manage billing settings." });
+	}) : /* @__PURE__ */ s(t, { message: "You don't have permission to manage billing settings." });
 };
 //#endregion
-export { p as SettingsPage };
+export { f as SettingsPage };
 
 //# sourceMappingURL=SettingsPage.js.map