@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,632 @@
+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 "../../../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";
+//#region src/billing/modules/settings/pages/SettingsPage.tsx
+var se = () => {
+	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);
+		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({
+		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);
+			if (e) return e;
+			if (U) return null;
+		}
+		return H;
+	}, [
+		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
+		});
+	}, [J]);
+	let pe = (e) => {
+		x(e.id), C(!1), j(!1), k(null);
+	}, Y = (e, t) => {
+		F((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);
+			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", {
+					route: "/billing/settings",
+					entityId: J.id,
+					source: "settings"
+				}), Z && (await q({
+					variables: { id: J.id },
+					refetchQueries: ["GetBillingAccountsByTenant", "GetDefaultBillingAccount"]
+				}), y("billing.billing_account.updated", {
+					route: "/billing/settings",
+					entityId: J.id,
+					source: "settings.default"
+				})), b ? await W() : await V(), j(!0), setTimeout(() => j(!1), 3e3);
+			} catch (e) {
+				k(e instanceof Error ? e.message : "Failed to save changes");
+			} finally {
+				T(!1);
+			}
+		}
+	}, [
+		J?.id,
+		P,
+		Z,
+		K,
+		q,
+		b,
+		W,
+		V,
+		y
+	]), he = s(() => {
+		J?.id && (Q ? (N(!0), M(!0)) : $());
+	}, [
+		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);
+			try {
+				await ee({
+					apiGatewayUrl: g,
+					authToken: _,
+					orgId: v,
+					query: te,
+					variables: {
+						id: J.id,
+						reason: "Archived from billing settings",
+						replacementDefaultBillingAccountId: J.isDefault ? e?.id ?? null : null
+					}
+				}), y("billing.billing_account.archived", {
+					route: "/billing/settings",
+					entityId: J.id,
+					source: "settings"
+				}), await Promise.all([L(), V()]), x(e?.id), j(!0), setTimeout(() => j(!1), 3e3);
+			} catch (e) {
+				k(e instanceof Error ? e.message : "Failed to archive billing account");
+			} finally {
+				D(!1);
+			}
+		}
+	}, [
+		g,
+		_,
+		J,
+		R,
+		v,
+		L,
+		V,
+		y
+	]);
+	return h.canManageBillingAccount ? fe && !J ? /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("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))
+		})]
+	}) : /* @__PURE__ */ f("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")
+			}),
+			R.length > 1 && /* @__PURE__ */ f("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ f("button", {
+					onClick: () => C(!S),
+					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", {
+						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",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ d("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", {
+							className: "text-left",
+							children: [/* @__PURE__ */ d("p", {
+								className: "text-sm font-medium text-foreground",
+								children: J?.name || m("billing.settings.selectAccount", "Select Account")
+							}), /* @__PURE__ */ d("p", {
+								className: "text-xs text-muted-foreground",
+								children: J?.email
+							})]
+						})]
+					}), /* @__PURE__ */ d("svg", {
+						className: `w-4 h-4 text-muted-foreground transition-transform ${S ? "rotate-180" : ""}`,
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ d("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M19 9l-7 7-7-7"
+						})
+					})]
+				}), S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+					className: "fixed inset-0 z-10",
+					onClick: () => C(!1)
+				}), /* @__PURE__ */ d("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),
+						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+						children: [/* @__PURE__ */ f("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",
+									fill: "none",
+									viewBox: "0 0 24 24",
+									stroke: "currentColor",
+									children: /* @__PURE__ */ d("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", {
+								className: "text-left min-w-0",
+								children: [/* @__PURE__ */ d("p", {
+									className: "text-sm font-medium text-foreground truncate",
+									children: e.name
+								}), /* @__PURE__ */ d("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",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M5 13l4 4L19 7"
+							})
+						})]
+					}, e.id))
+				})] })]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "border border-border rounded-lg bg-card",
+				children: [/* @__PURE__ */ d("div", {
+					className: "p-6 border-b border-border",
+					children: /* @__PURE__ */ f("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h2", {
+							className: "text-lg font-semibold text-foreground",
+							children: m("billing.settings.accountInfo", "Account Information")
+						}), /* @__PURE__ */ d("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", {
+							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",
+								fill: "currentColor",
+								viewBox: "0 0 20 20",
+								children: /* @__PURE__ */ d("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")]
+						})]
+					})
+				}), /* @__PURE__ */ f("div", {
+					className: "p-6 space-y-6",
+					children: [
+						J && /* @__PURE__ */ f("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", {
+									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")
+								})] }),
+								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+									className: "text-muted-foreground",
+									children: m("billing.settings.creditBalance", "Credit Balance")
+								}), /* @__PURE__ */ f("p", {
+									className: "font-medium text-foreground",
+									children: [(J.creditAmount || 0).toLocaleString(), " Credits"]
+								})] }),
+								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+									className: "text-muted-foreground",
+									children: m("billing.settings.accountId", "Account ID")
+								}), /* @__PURE__ */ d("p", {
+									className: "font-mono text-xs text-foreground truncate",
+									title: J.id,
+									children: J.id
+								})] }),
+								/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+									className: "text-muted-foreground",
+									children: m("billing.settings.created", "Created")
+								}), /* @__PURE__ */ d("p", {
+									className: "font-medium text-foreground",
+									children: J.createdAt ? new Date(J.createdAt).toLocaleDateString() : m("billing.settings.notAvailable", "N/A")
+								})] })
+							]
+						}),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h3", {
+							className: "text-sm font-medium text-foreground mb-4",
+							children: m("billing.settings.contactDetails", "Contact Details")
+						}), /* @__PURE__ */ f("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")
+									})
+								] }),
+								/* @__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__ */ d("option", {
+											value: "GBP",
+											children: "GBP - British Pound"
+										}),
+										/* @__PURE__ */ d("option", {
+											value: "INR",
+											children: "INR - Indian Rupee"
+										})
+									]
+								})] })
+							]
+						})] }),
+						/* @__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",
+										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)")
+									})
+								]
+							})]
+						}),
+						J?.isActive && R.length > 1 && /* @__PURE__ */ d("div", {
+							className: "pt-4 border-t border-border",
+							children: /* @__PURE__ */ f("div", {
+								className: "flex items-start gap-3",
+								children: [/* @__PURE__ */ d("div", {
+									className: "flex items-center h-6",
+									children: /* @__PURE__ */ d("input", {
+										type: "checkbox",
+										id: "isDefault",
+										checked: P.isDefault,
+										onChange: (e) => F((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"
+									})
+								}), /* @__PURE__ */ f("div", {
+									className: "flex-1",
+									children: [/* @__PURE__ */ d("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", {
+										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")
+									})]
+								})]
+							})
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "pt-4 border-t border-border flex items-center justify-between",
+							children: [/* @__PURE__ */ f("div", {
+								className: "flex items-center gap-2",
+								children: [A && /* @__PURE__ */ f("div", {
+									className: "flex items-center gap-2 text-sm text-status-success-text",
+									children: [/* @__PURE__ */ d("svg", {
+										className: "w-4 h-4",
+										fill: "none",
+										viewBox: "0 0 24 24",
+										stroke: "currentColor",
+										children: /* @__PURE__ */ d("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											d: "M5 13l4 4L19 7"
+										})
+									}), m("billing.settings.saveSuccess", "Changes saved successfully")]
+								}), O && /* @__PURE__ */ f("div", {
+									className: "flex items-center gap-2 text-sm text-destructive",
+									children: [/* @__PURE__ */ d("svg", {
+										className: "w-4 h-4",
+										fill: "none",
+										viewBox: "0 0 24 24",
+										stroke: "currentColor",
+										children: /* @__PURE__ */ d("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]
+								})]
+							}), /* @__PURE__ */ f("div", {
+								className: "flex items-center gap-3",
+								children: [h.canArchiveBillingAccount && J?.isActive ? /* @__PURE__ */ d("button", {
+									onClick: ge,
+									disabled: w || E,
+									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,
+									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",
+										fill: "none",
+										viewBox: "0 0 24 24",
+										children: [/* @__PURE__ */ d("circle", {
+											className: "opacity-25",
+											cx: "12",
+											cy: "12",
+											r: "10",
+											stroke: "currentColor",
+											strokeWidth: "4"
+										}), /* @__PURE__ */ d("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"]
+								})]
+							})]
+						})
+					]
+				})]
+			}),
+			ce && le && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+				className: "fixed inset-0 bg-overlay-scrim z-40",
+				onClick: () => {
+					w || (M(!1), N(!1), F((e) => ({
+						...e,
+						isDefault: J?.isDefault || !1
+					})));
+				}
+			}), /* @__PURE__ */ d("div", {
+				className: "fixed inset-0 flex items-center justify-center z-50 p-4",
+				children: /* @__PURE__ */ f("div", {
+					className: "bg-card border border-border rounded-lg shadow-xl max-w-md w-full p-6",
+					children: [
+						/* @__PURE__ */ d("h3", {
+							className: "text-lg font-semibold text-foreground mb-2",
+							children: "Confirm Default Account Change"
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "text-sm text-muted-foreground mb-4",
+							children: [
+								"You are about to set",
+								" ",
+								/* @__PURE__ */ d("strong", {
+									className: "text-foreground",
+									children: J?.name
+								}),
+								" as your default billing account and save your changes."
+							]
+						}),
+						X && X.id !== J?.id && /* @__PURE__ */ d("div", {
+							className: "mb-4 p-3 bg-status-warning-bg-subtle border border-border-subtle rounded-md",
+							children: /* @__PURE__ */ f("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",
+									fill: "none",
+									viewBox: "0 0 24 24",
+									stroke: "currentColor",
+									children: /* @__PURE__ */ d("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", {
+									className: "text-sm",
+									children: [/* @__PURE__ */ d("p", {
+										className: "font-medium text-status-warning-text",
+										children: "Current default will change"
+									}), /* @__PURE__ */ f("p", {
+										className: "text-status-warning-text mt-0.5",
+										children: [/* @__PURE__ */ d("strong", { children: X.name }), " will no longer be the default account."]
+									})]
+								})]
+							})
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "flex justify-end gap-3",
+							children: [/* @__PURE__ */ d("button", {
+								onClick: () => {
+									M(!1), N(!1), F((e) => ({
+										...e,
+										isDefault: J?.isDefault || !1
+									}));
+								},
+								disabled: w,
+								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,
+								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",
+									fill: "none",
+									viewBox: "0 0 24 24",
+									children: [/* @__PURE__ */ d("circle", {
+										className: "opacity-25",
+										cx: "12",
+										cy: "12",
+										r: "10",
+										stroke: "currentColor",
+										strokeWidth: "4"
+									}), /* @__PURE__ */ d("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"]
+							})]
+						})
+					]
+				})
+			})] })
+		]
+	}) : /* @__PURE__ */ d(t, { message: "You don't have permission to manage billing settings." });
+};
+//#endregion
+export { p as SettingsPage };
+
+//# sourceMappingURL=SettingsPage.js.map