@burdenoff/microfe-billing 2026.625.4 → 2026.625.5

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

@@ -9,63 +9,63 @@ import { useBillingPermissions as ne } from "../../../hooks/useBillingPermission
 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 { AlertDialog as u, AlertDialogAction as ue, AlertDialogCancel as de, AlertDialogContent as fe, AlertDialogDescription as pe, AlertDialogFooter as me, AlertDialogHeader as he, AlertDialogTitle as ge, OptionalFields as _e } from "@burdenoff/fe-libs/ui";
+import { useI18n as ue } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertDialog as de, AlertDialogAction as fe, AlertDialogCancel as pe, AlertDialogContent as me, AlertDialogDescription as he, AlertDialogFooter as ge, AlertDialogHeader as _e, AlertDialogTitle as l, OptionalFields as u, PagePurpose as ve } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/settings/pages/SettingsPage.tsx
-var ve = () => {
+var ye = () => {
 	if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
 }, d = () => {
-	let { t: d } = l(), f = (e, t) => {
+	let { t: d } = ue(), f = (e, t) => {
 		let n = d(e);
 		return n === e ? t : n;
-	}, p = ne(), { apiGatewayUrl: m, authToken: h, orgId: g } = e(), { emit: _ } = ee(), [v, y] = a(ve), [b, x] = a(!1), [S, C] = a(!1), [w, T] = a(!1), [ye, E] = a(!1), [D, O] = a(null), [be, k] = a(!1), [A, j] = a(!1), [M, N] = a(!1), [P, F] = a({
+	}, p = ne(), { apiGatewayUrl: m, authToken: h, orgId: g } = e(), { emit: _ } = ee(), [v, y] = a(ye), [b, x] = a(!1), [S, C] = a(!1), [w, T] = a(!1), [be, E] = a(!1), [D, O] = a(null), [xe, k] = a(!1), [A, j] = a(!1), [M, N] = a(!1), [P, F] = a({
 		name: "",
 		email: "",
 		billingEmail: "",
 		currency: "USD",
 		taxId: "",
 		isDefault: !1
-	}), { data: I, loading: xe, refetch: L } = ae({}), R = i(() => I?.getBillingAccountsByOrg || [], [I?.getBillingAccountsByOrg]), { data: Se, loading: Ce, refetch: z } = oe({}), B = Se?.getDefaultBillingAccount || null, { data: V, loading: H, refetch: U } = ie({
+	}), { data: I, loading: Se, refetch: L } = ae({}), R = i(() => I?.getBillingAccountsByOrg || [], [I?.getBillingAccountsByOrg]), { data: Ce, loading: we, refetch: z } = oe({}), B = Ce?.getDefaultBillingAccount || null, { data: Te, loading: V, refetch: H } = ie({
 		variables: { id: v },
 		skip: !v
-	}), W = V?.getBillingAccount || null, [G] = ce(), [K] = se(), q = i(() => {
+	}), U = Te?.getBillingAccount || null, [W] = ce(), [G] = se(), K = i(() => {
 		if (v) {
-			if (W) return W;
+			if (U) return U;
 			let e = R.find((e) => e.id === v);
 			if (e) return e;
-			if (H) return null;
+			if (V) return null;
 		}
 		return B;
 	}, [
 		v,
-		W,
+		U,
 		R,
-		H,
+		V,
 		B
-	]), we = xe || Ce || v && H;
+	]), Ee = Se || we || v && V;
 	le(() => {
-		q && F({
-			name: q.name || "",
-			email: q.email || "",
-			billingEmail: q.billingEmail || "",
-			currency: q.currency || "USD",
-			taxId: q.taxId || "",
-			isDefault: q.isDefault || !1
+		K && F({
+			name: K.name || "",
+			email: K.email || "",
+			billingEmail: K.billingEmail || "",
+			currency: K.currency || "USD",
+			taxId: K.taxId || "",
+			isDefault: K.isDefault || !1
 		});
-	}, [q]);
-	let Te = (e) => {
+	}, [K]);
+	let De = (e) => {
 		y(e.id), x(!1), k(!1), O(null);
-	}, J = (e, t) => {
+	}, q = (e, t) => {
 		F((n) => ({
 			...n,
 			[e]: t
 		})), k(!1), O(null);
-	}, Y = i(() => R.find((e) => e.isDefault) || null, [R]), Ee = i(() => q ? P.name !== (q.name || "") || P.email !== (q.email || "") || P.billingEmail !== (q.billingEmail || "") || P.currency !== (q.currency || "USD") || P.taxId !== (q.taxId || "") || P.isDefault !== (q.isDefault || !1) : !1, [P, q]), X = P.isDefault && !q?.isDefault, Z = X && Y && Y.id !== q?.id, Q = r(async () => {
-		if (q?.id) {
+	}, J = i(() => R.find((e) => e.isDefault) || null, [R]), Y = i(() => K ? P.name !== (K.name || "") || P.email !== (K.email || "") || P.billingEmail !== (K.billingEmail || "") || P.currency !== (K.currency || "USD") || P.taxId !== (K.taxId || "") || P.isDefault !== (K.isDefault || !1) : !1, [P, K]), X = P.isDefault && !K?.isDefault, Z = X && J && J.id !== K?.id, Q = r(async () => {
+		if (K?.id) {
 			C(!0), O(null), k(!1), j(!1), N(!1);
 			try {
-				await G({ variables: { input: {
-					id: q.id,
+				await W({ variables: { input: {
+					id: K.id,
 					name: P.name,
 					email: P.email,
 					billingEmail: P.billingEmail || null,
@@ -73,16 +73,16 @@ var ve = () => {
 					taxId: P.taxId || null
 				} } }), _("billing.billing_account.updated", {
 					route: "/billing/settings",
-					entityId: q.id,
+					entityId: K.id,
 					source: "settings"
-				}), X && (await K({
-					variables: { id: q.id },
+				}), X && (await G({
+					variables: { id: K.id },
 					refetchQueries: ["GetBillingAccountsByTenant", "GetDefaultBillingAccount"]
 				}), _("billing.billing_account.updated", {
 					route: "/billing/settings",
-					entityId: q.id,
+					entityId: K.id,
 					source: "settings.default"
-				})), v ? await U() : await z(), k(!0), setTimeout(() => k(!1), 3e3);
+				})), v ? await H() : await z(), k(!0), setTimeout(() => k(!1), 3e3);
 			} catch (e) {
 				O(e instanceof Error ? e.message : "Failed to save changes");
 			} finally {
@@ -90,23 +90,23 @@ var ve = () => {
 			}
 		}
 	}, [
-		q?.id,
+		K?.id,
 		P,
 		X,
+		W,
 		G,
-		K,
 		v,
-		U,
+		H,
 		z,
 		_
-	]), De = r(() => {
-		q?.id && (Z ? (N(!0), j(!0)) : Q());
+	]), Oe = r(() => {
+		K?.id && (Z ? (N(!0), j(!0)) : Q());
 	}, [
-		q?.id,
+		K?.id,
 		Z,
 		Q
-	]), $ = i(() => q ? R.find((e) => e.id !== q.id && e.isActive) : void 0, [q, R]), Oe = q ? q.isDefault ? `Archive ${q.name}? ${$ ? `${$.name} will become the default account.` : "No replacement default account is available."}` : `Archive ${q.name}?` : "", ke = r(async () => {
-		if (!(!q?.id || !q.isActive)) {
+	]), $ = i(() => K ? R.find((e) => e.id !== K.id && e.isActive) : void 0, [K, R]), ke = K ? K.isDefault ? `Archive ${K.name}? ${$ ? `${$.name} will become the default account.` : "No replacement default account is available."}` : `Archive ${K.name}?` : "", Ae = r(async () => {
+		if (!(!K?.id || !K.isActive)) {
 			T(!0), O(null), k(!1);
 			try {
 				await te({
@@ -115,13 +115,13 @@ var ve = () => {
 					orgId: g,
 					query: re,
 					variables: {
-						id: q.id,
+						id: K.id,
 						reason: "Archived from billing settings",
-						replacementDefaultBillingAccountId: q.isDefault ? $?.id ?? null : null
+						replacementDefaultBillingAccountId: K.isDefault ? $?.id ?? null : null
 					}
 				}), _("billing.billing_account.archived", {
 					route: "/billing/settings",
-					entityId: q.id,
+					entityId: K.id,
 					source: "settings"
 				}), await Promise.all([L(), z()]), y($?.id), k(!0), setTimeout(() => k(!1), 3e3);
 			} catch (e) {
@@ -133,14 +133,14 @@ var ve = () => {
 	}, [
 		m,
 		h,
-		q,
+		K,
 		$,
 		g,
 		L,
 		z,
 		_
 	]);
-	return p.canManageBillingAccount ? we && !q ? /* @__PURE__ */ c("div", {
+	return p.canManageBillingAccount ? Ee && !K ? /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ s("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ s("div", {
 			className: "border border-border-subtle rounded-lg p-6 space-y-4",
@@ -157,6 +157,7 @@ var ve = () => {
 				title: f("billing.settings.billingSettings", "Billing Settings"),
 				description: f("billing.settings.description", "Manage your billing account configuration")
 			}),
+			/* @__PURE__ */ s(ve, { children: f("billing.settings.purpose", "Configure how a billing account behaves — its name and contact details, default currency, tax information and whether it's your default account. Changes here affect how invoices are generated and which account new purchases bill to.") }),
 			R.length > 1 && /* @__PURE__ */ c("div", {
 				className: "relative",
 				children: [/* @__PURE__ */ c("button", {
@@ -183,10 +184,10 @@ var ve = () => {
 							className: "text-left",
 							children: [/* @__PURE__ */ s("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: q?.name || f("billing.settings.selectAccount", "Select Account")
+								children: K?.name || f("billing.settings.selectAccount", "Select Account")
 							}), /* @__PURE__ */ s("p", {
 								className: "text-xs text-text-secondary",
-								children: q?.email
+								children: K?.email
 							})]
 						})]
 					}), /* @__PURE__ */ s("svg", {
@@ -208,7 +209,7 @@ var ve = () => {
 					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border-subtle rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
 					children: R.map((e) => /* @__PURE__ */ c("button", {
 						type: "button",
-						onClick: () => Te(e),
+						onClick: () => De(e),
 						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ c("div", {
 							className: "flex items-center gap-3 min-w-0",
@@ -236,7 +237,7 @@ var ve = () => {
 									children: e.email
 								})]
 							})]
-						}), q?.id === e.id && /* @__PURE__ */ s("svg", {
+						}), K?.id === e.id && /* @__PURE__ */ s("svg", {
 							className: "size-4 text-primary flex-shrink-0",
 							fill: "none",
 							viewBox: "0 0 24 24",
@@ -263,7 +264,7 @@ var ve = () => {
 						}), /* @__PURE__ */ s("p", {
 							className: "text-sm text-text-secondary mt-1",
 							children: f("billing.settings.accountInfoDescription", "Update your billing contact details and tax information")
-						})] }), q?.isDefault && /* @__PURE__ */ c("span", {
+						})] }), K?.isDefault && /* @__PURE__ */ c("span", {
 							className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-action-primary-bg/10 text-primary rounded-full",
 							children: [/* @__PURE__ */ s("svg", {
 								className: "size-3",
@@ -280,37 +281,37 @@ var ve = () => {
 				}), /* @__PURE__ */ c("div", {
 					className: "p-6 space-y-6",
 					children: [
-						q && /* @__PURE__ */ c("div", {
+						K && /* @__PURE__ */ c("div", {
 							className: "grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm pb-4 border-b border-border-subtle",
 							children: [
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-text-secondary",
 									children: f("billing.settings.status", "Status")
 								}), /* @__PURE__ */ s("p", {
-									className: `font-medium ${q.isActive ? "text-status-success-text" : "text-status-error-text"}`,
-									children: q.isActive ? f("billing.settings.active", "Active") : f("billing.settings.inactive", "Inactive")
+									className: `font-medium ${K.isActive ? "text-status-success-text" : "text-status-error-text"}`,
+									children: K.isActive ? f("billing.settings.active", "Active") : f("billing.settings.inactive", "Inactive")
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-text-secondary",
 									children: f("billing.settings.creditBalance", "Credit Balance")
 								}), /* @__PURE__ */ c("p", {
 									className: "font-medium text-text-primary",
-									children: [(q.creditAmount || 0).toLocaleString(), " Credits"]
+									children: [(K.creditAmount || 0).toLocaleString(), " Credits"]
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-text-secondary",
 									children: f("billing.settings.accountId", "Account ID")
 								}), /* @__PURE__ */ s("p", {
 									className: "font-mono text-xs text-text-primary truncate",
-									title: q.id,
-									children: q.id
+									title: K.id,
+									children: K.id
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
 									className: "text-text-secondary",
 									children: f("billing.settings.created", "Created")
 								}), /* @__PURE__ */ s("p", {
 									className: "font-medium text-text-primary",
-									children: q.createdAt ? new Date(q.createdAt).toLocaleDateString() : f("billing.settings.notAvailable", "N/A")
+									children: K.createdAt ? new Date(K.createdAt).toLocaleDateString() : f("billing.settings.notAvailable", "N/A")
 								})] })
 							]
 						}),
@@ -334,7 +335,7 @@ var ve = () => {
 								id: "billing-account-name",
 								type: "text",
 								value: P.name,
-								onChange: (e) => J("name", e.target.value),
+								onChange: (e) => q("name", e.target.value),
 								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 							})] }), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
 								htmlFor: "billing-account-email",
@@ -351,11 +352,11 @@ var ve = () => {
 								id: "billing-account-email",
 								type: "email",
 								value: P.email,
-								onChange: (e) => J("email", e.target.value),
+								onChange: (e) => q("email", e.target.value),
 								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 							})] })]
 						})] }),
-						/* @__PURE__ */ s(_e, {
+						/* @__PURE__ */ s(u, {
 							title: f("billing.settings.advancedTitle", "Advanced settings"),
 							description: f("billing.settings.advancedDescription", "Billing email override, currency, and tax identification."),
 							children: /* @__PURE__ */ c("div", {
@@ -371,7 +372,7 @@ var ve = () => {
 											id: "billing-account-billing-email",
 											type: "email",
 											value: P.billingEmail,
-											onChange: (e) => J("billingEmail", e.target.value),
+											onChange: (e) => q("billingEmail", e.target.value),
 											placeholder: f("billing.settings.billingEmailPlaceholder", "Optional - defaults to account email"),
 											className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 										}),
@@ -387,7 +388,7 @@ var ve = () => {
 									}), /* @__PURE__ */ c("select", {
 										id: "billing-account-currency",
 										value: P.currency,
-										onChange: (e) => J("currency", e.target.value),
+										onChange: (e) => q("currency", e.target.value),
 										className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
 										children: [
 											/* @__PURE__ */ s("option", {
@@ -420,7 +421,7 @@ var ve = () => {
 												id: "billing-account-tax-id",
 												type: "text",
 												value: P.taxId,
-												onChange: (e) => J("taxId", e.target.value),
+												onChange: (e) => q("taxId", e.target.value),
 												placeholder: f("billing.settings.taxIdPlaceholder", "Enter your tax identification number"),
 												className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 											}),
@@ -433,7 +434,7 @@ var ve = () => {
 								]
 							})
 						}),
-						q?.isActive && R.length > 1 && /* @__PURE__ */ s("div", {
+						K?.isActive && R.length > 1 && /* @__PURE__ */ s("div", {
 							className: "pt-4 border-t border-border-subtle",
 							children: /* @__PURE__ */ c("div", {
 								className: "flex items-start gap-3",
@@ -447,7 +448,7 @@ var ve = () => {
 											...t,
 											isDefault: e.target.checked
 										})),
-										disabled: q?.isDefault,
+										disabled: K?.isDefault,
 										className: "size-4 rounded border-border-subtle text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
 									})
 								}), /* @__PURE__ */ c("div", {
@@ -458,7 +459,7 @@ var ve = () => {
 										children: f("billing.settings.setDefault", "Set as default billing account")
 									}), /* @__PURE__ */ s("p", {
 										className: "text-xs text-text-secondary mt-0.5",
-										children: q?.isDefault ? f("billing.settings.currentDefaultDescription", "This is currently your default billing account") : f("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
+										children: K?.isDefault ? f("billing.settings.currentDefaultDescription", "This is currently your default billing account") : f("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
 									})]
 								})]
 							})
@@ -467,7 +468,7 @@ var ve = () => {
 							className: "pt-4 border-t border-border-subtle flex items-center justify-between",
 							children: [/* @__PURE__ */ c("div", {
 								className: "flex items-center gap-2",
-								children: [be && /* @__PURE__ */ c("div", {
+								children: [xe && /* @__PURE__ */ c("div", {
 									className: "flex items-center gap-2 text-sm text-status-success-text",
 									children: [/* @__PURE__ */ s("svg", {
 										className: "size-4",
@@ -498,7 +499,7 @@ var ve = () => {
 								})]
 							}), /* @__PURE__ */ c("div", {
 								className: "flex items-center gap-3",
-								children: [p.canArchiveBillingAccount && q?.isActive ? /* @__PURE__ */ s("button", {
+								children: [p.canArchiveBillingAccount && K?.isActive ? /* @__PURE__ */ s("button", {
 									type: "button",
 									onClick: () => E(!0),
 									disabled: S || w,
@@ -506,8 +507,8 @@ var ve = () => {
 									children: w ? "Archiving..." : "Archive Account"
 								}) : null, /* @__PURE__ */ c("button", {
 									type: "button",
-									onClick: De,
-									disabled: !Ee || S || w || !P.name || !P.email,
+									onClick: Oe,
+									disabled: !Y || S || w || !P.name || !P.email,
 									className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2",
 									children: [S && /* @__PURE__ */ c("svg", {
 										className: "size-4 animate-spin",
@@ -537,7 +538,7 @@ var ve = () => {
 				onClick: () => {
 					S || (j(!1), N(!1), F((e) => ({
 						...e,
-						isDefault: q?.isDefault || !1
+						isDefault: K?.isDefault || !1
 					})));
 				}
 			}), /* @__PURE__ */ s("div", {
@@ -556,12 +557,12 @@ var ve = () => {
 								" ",
 								/* @__PURE__ */ s("strong", {
 									className: "text-text-primary",
-									children: q?.name
+									children: K?.name
 								}),
 								" as your default billing account and save your changes."
 							]
 						}),
-						Y && Y.id !== q?.id && /* @__PURE__ */ s("div", {
+						J && J.id !== K?.id && /* @__PURE__ */ s("div", {
 							className: "mb-4 p-3 bg-status-warning-bg-subtle border border-border-subtle rounded-md",
 							children: /* @__PURE__ */ c("div", {
 								className: "flex items-start gap-2",
@@ -583,7 +584,7 @@ var ve = () => {
 										children: "Current default will change"
 									}), /* @__PURE__ */ c("p", {
 										className: "text-status-warning-text mt-0.5",
-										children: [/* @__PURE__ */ s("strong", { children: Y.name }), " will no longer be the default account."]
+										children: [/* @__PURE__ */ s("strong", { children: J.name }), " will no longer be the default account."]
 									})]
 								})]
 							})
@@ -595,7 +596,7 @@ var ve = () => {
 								onClick: () => {
 									j(!1), N(!1), F((e) => ({
 										...e,
-										isDefault: q?.isDefault || !1
+										isDefault: K?.isDefault || !1
 									}));
 								},
 								disabled: S,
@@ -628,12 +629,12 @@ var ve = () => {
 					]
 				})
 			})] }),
-			/* @__PURE__ */ s(u, {
-				open: ye,
+			/* @__PURE__ */ s(de, {
+				open: be,
 				onOpenChange: E,
-				children: /* @__PURE__ */ c(fe, { children: [/* @__PURE__ */ c(he, { children: [/* @__PURE__ */ s(ge, { children: "Archive billing account?" }), /* @__PURE__ */ s(pe, { children: Oe })] }), /* @__PURE__ */ c(me, { children: [/* @__PURE__ */ s(de, { children: "Cancel" }), /* @__PURE__ */ s(ue, {
+				children: /* @__PURE__ */ c(me, { children: [/* @__PURE__ */ c(_e, { children: [/* @__PURE__ */ s(l, { children: "Archive billing account?" }), /* @__PURE__ */ s(he, { children: ke })] }), /* @__PURE__ */ c(ge, { children: [/* @__PURE__ */ s(pe, { children: "Cancel" }), /* @__PURE__ */ s(fe, {
 					onClick: () => {
-						E(!1), ke();
+						E(!1), Ae();
 					},
 					children: "Archive Account"
 				})] })] })