@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/dashboard/components/CreateBillingAccountModal.js

@@ -0,0 +1,1044 @@
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { AlertCircle as a, Building2 as o, Check as s, ChevronDown as c, FileText as l, Loader2 as u, Mail as d, MapPin as f, Search as p, X as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/dashboard/components/CreateBillingAccountModal.tsx
+var y = [
+	{
+		code: "IN",
+		name: "India"
+	},
+	{
+		code: "US",
+		name: "United States"
+	},
+	{
+		code: "GB",
+		name: "United Kingdom"
+	},
+	{
+		code: "CA",
+		name: "Canada"
+	},
+	{
+		code: "AU",
+		name: "Australia"
+	},
+	{
+		code: "DE",
+		name: "Germany"
+	},
+	{
+		code: "FR",
+		name: "France"
+	},
+	{
+		code: "SG",
+		name: "Singapore"
+	},
+	{
+		code: "AE",
+		name: "United Arab Emirates"
+	},
+	{
+		code: "JP",
+		name: "Japan"
+	},
+	{
+		code: "NL",
+		name: "Netherlands"
+	},
+	{
+		code: "CH",
+		name: "Switzerland"
+	},
+	{
+		code: "SE",
+		name: "Sweden"
+	},
+	{
+		code: "NO",
+		name: "Norway"
+	},
+	{
+		code: "DK",
+		name: "Denmark"
+	},
+	{
+		code: "NZ",
+		name: "New Zealand"
+	},
+	{
+		code: "IE",
+		name: "Ireland"
+	},
+	{
+		code: "IT",
+		name: "Italy"
+	},
+	{
+		code: "ES",
+		name: "Spain"
+	},
+	{
+		code: "BR",
+		name: "Brazil"
+	},
+	{
+		code: "MX",
+		name: "Mexico"
+	},
+	{
+		code: "ZA",
+		name: "South Africa"
+	},
+	{
+		code: "KR",
+		name: "South Korea"
+	},
+	{
+		code: "HK",
+		name: "Hong Kong"
+	},
+	{
+		code: "MY",
+		name: "Malaysia"
+	},
+	{
+		code: "ID",
+		name: "Indonesia"
+	},
+	{
+		code: "PH",
+		name: "Philippines"
+	},
+	{
+		code: "TH",
+		name: "Thailand"
+	},
+	{
+		code: "VN",
+		name: "Vietnam"
+	},
+	{
+		code: "PK",
+		name: "Pakistan"
+	},
+	{
+		code: "BD",
+		name: "Bangladesh"
+	},
+	{
+		code: "LK",
+		name: "Sri Lanka"
+	}
+], b = /* @__PURE__ */ "Andaman and Nicobar Islands.Andhra Pradesh.Arunachal Pradesh.Assam.Bihar.Chandigarh.Chhattisgarh.Dadra and Nagar Haveli and Daman and Diu.Delhi.Goa.Gujarat.Haryana.Himachal Pradesh.Jammu and Kashmir.Jharkhand.Karnataka.Kerala.Ladakh.Lakshadweep.Madhya Pradesh.Maharashtra.Manipur.Meghalaya.Mizoram.Nagaland.Odisha.Puducherry.Punjab.Rajasthan.Sikkim.Tamil Nadu.Telangana.Tripura.Uttar Pradesh.Uttarakhand.West Bengal".split("."), x = [
+	{
+		code: "USD",
+		name: "US Dollar",
+		symbol: "$",
+		flag: "US"
+	},
+	{
+		code: "EUR",
+		name: "Euro",
+		symbol: "€",
+		flag: "EU"
+	},
+	{
+		code: "GBP",
+		name: "British Pound",
+		symbol: "£",
+		flag: "GB"
+	},
+	{
+		code: "INR",
+		name: "Indian Rupee",
+		symbol: "₹",
+		flag: "IN"
+	},
+	{
+		code: "CAD",
+		name: "Canadian Dollar",
+		symbol: "C$",
+		flag: "CA"
+	},
+	{
+		code: "AUD",
+		name: "Australian Dollar",
+		symbol: "A$",
+		flag: "AU"
+	},
+	{
+		code: "JPY",
+		name: "Japanese Yen",
+		symbol: "¥",
+		flag: "JP"
+	},
+	{
+		code: "CNY",
+		name: "Chinese Yuan",
+		symbol: "¥",
+		flag: "CN"
+	},
+	{
+		code: "CHF",
+		name: "Swiss Franc",
+		symbol: "CHF",
+		flag: "CH"
+	},
+	{
+		code: "SGD",
+		name: "Singapore Dollar",
+		symbol: "S$",
+		flag: "SG"
+	},
+	{
+		code: "HKD",
+		name: "Hong Kong Dollar",
+		symbol: "HK$",
+		flag: "HK"
+	},
+	{
+		code: "NZD",
+		name: "New Zealand Dollar",
+		symbol: "NZ$",
+		flag: "NZ"
+	},
+	{
+		code: "SEK",
+		name: "Swedish Krona",
+		symbol: "kr",
+		flag: "SE"
+	},
+	{
+		code: "NOK",
+		name: "Norwegian Krone",
+		symbol: "kr",
+		flag: "NO"
+	},
+	{
+		code: "DKK",
+		name: "Danish Krone",
+		symbol: "kr",
+		flag: "DK"
+	},
+	{
+		code: "MXN",
+		name: "Mexican Peso",
+		symbol: "$",
+		flag: "MX"
+	},
+	{
+		code: "BRL",
+		name: "Brazilian Real",
+		symbol: "R$",
+		flag: "BR"
+	},
+	{
+		code: "KRW",
+		name: "South Korean Won",
+		symbol: "₩",
+		flag: "KR"
+	},
+	{
+		code: "ZAR",
+		name: "South African Rand",
+		symbol: "R",
+		flag: "ZA"
+	},
+	{
+		code: "AED",
+		name: "UAE Dirham",
+		symbol: "د.إ",
+		flag: "AE"
+	},
+	{
+		code: "SAR",
+		name: "Saudi Riyal",
+		symbol: "﷼",
+		flag: "SA"
+	},
+	{
+		code: "PLN",
+		name: "Polish Złoty",
+		symbol: "zł",
+		flag: "PL"
+	},
+	{
+		code: "THB",
+		name: "Thai Baht",
+		symbol: "฿",
+		flag: "TH"
+	},
+	{
+		code: "MYR",
+		name: "Malaysian Ringgit",
+		symbol: "RM",
+		flag: "MY"
+	},
+	{
+		code: "IDR",
+		name: "Indonesian Rupiah",
+		symbol: "Rp",
+		flag: "ID"
+	},
+	{
+		code: "PHP",
+		name: "Philippine Peso",
+		symbol: "₱",
+		flag: "PH"
+	},
+	{
+		code: "TWD",
+		name: "Taiwan Dollar",
+		symbol: "NT$",
+		flag: "TW"
+	},
+	{
+		code: "CZK",
+		name: "Czech Koruna",
+		symbol: "Kč",
+		flag: "CZ"
+	},
+	{
+		code: "HUF",
+		name: "Hungarian Forint",
+		symbol: "Ft",
+		flag: "HU"
+	},
+	{
+		code: "ILS",
+		name: "Israeli Shekel",
+		symbol: "₪",
+		flag: "IL"
+	},
+	{
+		code: "CLP",
+		name: "Chilean Peso",
+		symbol: "$",
+		flag: "CL"
+	},
+	{
+		code: "COP",
+		name: "Colombian Peso",
+		symbol: "$",
+		flag: "CO"
+	},
+	{
+		code: "PEN",
+		name: "Peruvian Sol",
+		symbol: "S/",
+		flag: "PE"
+	},
+	{
+		code: "ARS",
+		name: "Argentine Peso",
+		symbol: "$",
+		flag: "AR"
+	},
+	{
+		code: "VND",
+		name: "Vietnamese Dong",
+		symbol: "₫",
+		flag: "VN"
+	},
+	{
+		code: "EGP",
+		name: "Egyptian Pound",
+		symbol: "E£",
+		flag: "EG"
+	},
+	{
+		code: "NGN",
+		name: "Nigerian Naira",
+		symbol: "₦",
+		flag: "NG"
+	},
+	{
+		code: "KES",
+		name: "Kenyan Shilling",
+		symbol: "KSh",
+		flag: "KE"
+	},
+	{
+		code: "PKR",
+		name: "Pakistani Rupee",
+		symbol: "₨",
+		flag: "PK"
+	},
+	{
+		code: "BDT",
+		name: "Bangladeshi Taka",
+		symbol: "৳",
+		flag: "BD"
+	},
+	{
+		code: "LKR",
+		name: "Sri Lankan Rupee",
+		symbol: "Rs",
+		flag: "LK"
+	},
+	{
+		code: "RON",
+		name: "Romanian Leu",
+		symbol: "lei",
+		flag: "RO"
+	},
+	{
+		code: "BGN",
+		name: "Bulgarian Lev",
+		symbol: "лв",
+		flag: "BG"
+	},
+	{
+		code: "HRK",
+		name: "Croatian Kuna",
+		symbol: "kn",
+		flag: "HR"
+	},
+	{
+		code: "UAH",
+		name: "Ukrainian Hryvnia",
+		symbol: "₴",
+		flag: "UA"
+	},
+	{
+		code: "TRY",
+		name: "Turkish Lira",
+		symbol: "₺",
+		flag: "TR"
+	},
+	{
+		code: "RUB",
+		name: "Russian Ruble",
+		symbol: "₽",
+		flag: "RU"
+	},
+	{
+		code: "QAR",
+		name: "Qatari Riyal",
+		symbol: "ر.ق",
+		flag: "QA"
+	},
+	{
+		code: "KWD",
+		name: "Kuwaiti Dinar",
+		symbol: "د.ك",
+		flag: "KW"
+	},
+	{
+		code: "BHD",
+		name: "Bahraini Dinar",
+		symbol: ".د.ب",
+		flag: "BH"
+	},
+	{
+		code: "OMR",
+		name: "Omani Rial",
+		symbol: "ر.ع.",
+		flag: "OM"
+	}
+];
+function S(e) {
+	if (e === "EU") return "🇪🇺";
+	let t = e.toUpperCase().split("").map((e) => 127397 + e.charCodeAt(0));
+	return String.fromCodePoint(...t);
+}
+var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D = null }) => {
+	let { t: O } = v(), k = (e, t) => {
+		let n = O(e);
+		return n === e ? t : n;
+	}, [A, j] = i({
+		name: "",
+		email: "",
+		billingEmail: "",
+		currency: "USD",
+		taxId: "",
+		country: "",
+		line1: "",
+		line2: "",
+		city: "",
+		state: "",
+		postalCode: ""
+	}), [M, N] = i({}), [P, F] = i(!1), [I, L] = i(""), R = r(null), z = r(null), B = r(null), V = r(null), H = n(() => {
+		if (!I.trim()) return x;
+		let e = I.toLowerCase();
+		return x.filter((t) => t.code.toLowerCase().includes(e) || t.name.toLowerCase().includes(e) || t.symbol.includes(e));
+	}, [I]), U = n(() => x.find((e) => e.code === A.currency) || x[0], [A.currency]);
+	t(() => {
+		C && (j({
+			name: "",
+			email: "",
+			billingEmail: "",
+			currency: "USD",
+			taxId: "",
+			country: "",
+			line1: "",
+			line2: "",
+			city: "",
+			state: "",
+			postalCode: ""
+		}), N({}), F(!1), L(""), setTimeout(() => z.current?.focus(), 100));
+	}, [C]), t(() => {
+		let e = (e) => {
+			B.current && !B.current.contains(e.target) && (F(!1), L(""));
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), t(() => {
+		P && V.current && V.current.focus();
+	}, [P]), t(() => {
+		let e = (e) => {
+			e.key === "Escape" && C && !E && w();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		C,
+		E,
+		w
+	]), t(() => {
+		if (!C) return;
+		let e = R.current;
+		if (!e) return;
+		let t = e.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"), n = t[0], r = t[t.length - 1], i = (e) => {
+			e.key === "Tab" && (e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus()));
+		};
+		return e.addEventListener("keydown", i), () => e.removeEventListener("keydown", i);
+	}, [C]);
+	let W = e(() => {
+		let e = {};
+		return A.name.trim() || (e.name = "Account name is required"), A.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(A.email) || (e.email = "Please enter a valid email address") : e.email = "Email is required", A.billingEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(A.billingEmail) && (e.billingEmail = "Please enter a valid email address"), A.country || (e.country = "Country is required"), A.line1.trim() || (e.line1 = "Address line 1 is required"), A.city.trim() || (e.city = "City is required"), A.country === "IN" && !A.state && (e.state = "State is required for India"), A.postalCode.trim() || (e.postalCode = "Postal code is required"), N(e), Object.keys(e).length === 0;
+	}, [A]), G = async (e) => {
+		if (e.preventDefault(), !W()) return;
+		let t = {
+			name: A.name.trim(),
+			email: A.email.trim(),
+			currency: A.currency
+		};
+		A.billingEmail?.trim() && (t.billingEmail = A.billingEmail.trim()), A.taxId?.trim() && (t.taxId = A.taxId.trim());
+		let n = {
+			country: A.country,
+			line1: A.line1.trim(),
+			city: A.city.trim(),
+			postalCode: A.postalCode.trim()
+		};
+		A.line2?.trim() && (n.line2 = A.line2.trim()), A.state && (n.state = A.state), await T(t, n);
+	}, K = (e, t) => {
+		j((n) => {
+			let r = {
+				...n,
+				[e]: t
+			};
+			return e === "country" && t === "IN" && n.currency !== "INR" && (r.currency = "INR"), e === "country" && t !== n.country && (r.state = ""), r;
+		}), M[e] && N((t) => {
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	};
+	return C ? /* @__PURE__ */ _("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": "modal-title",
+		children: [/* @__PURE__ */ g("div", {
+			className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+			onClick: E ? void 0 : w,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ _("div", {
+			ref: R,
+			className: "relative w-full max-w-2xl mx-4 bg-card border border-border rounded-lg shadow-xl max-h-[90vh] flex flex-col overflow-hidden",
+			children: [
+				/* @__PURE__ */ _("header", {
+					className: "flex items-center justify-between p-4 border-b border-border shrink-0",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ g("div", {
+							className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center",
+							children: /* @__PURE__ */ g(o, { className: "w-5 h-5 text-primary" })
+						}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h2", {
+							id: "modal-title",
+							className: "text-lg font-semibold text-foreground",
+							children: "Create Billing Account"
+						}), /* @__PURE__ */ g("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Set up a new billing account for your organization"
+						})] })]
+					}), /* @__PURE__ */ g("button", {
+						onClick: w,
+						disabled: E,
+						className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50",
+						"aria-label": "Close modal",
+						children: /* @__PURE__ */ g(m, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ _("form", {
+					onSubmit: G,
+					className: "p-4 space-y-4 overflow-y-auto flex-1",
+					children: [
+						D && /* @__PURE__ */ _("div", {
+							className: "flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20 text-destructive",
+							children: [/* @__PURE__ */ g(a, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ g("p", {
+								className: "text-sm",
+								children: D
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "space-y-1.5",
+							children: [
+								/* @__PURE__ */ _("label", {
+									htmlFor: "name",
+									className: "block text-sm font-medium text-foreground",
+									children: ["Account Name ", /* @__PURE__ */ g("span", {
+										className: "text-destructive",
+										children: "*"
+									})]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ g(o, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+										ref: z,
+										type: "text",
+										id: "name",
+										value: A.name,
+										onChange: (e) => K("name", e.target.value),
+										className: `
+                  w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-background text-foreground
+                  placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                  ${M.name ? "border-destructive" : "border-input"}
+                `,
+										placeholder: "e.g., Acme Corporation",
+										disabled: E
+									})]
+								}),
+								M.name && /* @__PURE__ */ g("p", {
+									className: "text-sm text-destructive",
+									children: M.name
+								})
+							]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ _("div", {
+								className: "space-y-1.5",
+								children: [
+									/* @__PURE__ */ _("label", {
+										htmlFor: "email",
+										className: "block text-sm font-medium text-foreground",
+										children: ["Email ", /* @__PURE__ */ g("span", {
+											className: "text-destructive",
+											children: "*"
+										})]
+									}),
+									/* @__PURE__ */ _("div", {
+										className: "relative",
+										children: [/* @__PURE__ */ g(d, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+											type: "email",
+											id: "email",
+											value: A.email,
+											onChange: (e) => K("email", e.target.value),
+											className: `
+                    w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-background text-foreground
+                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                    ${M.email ? "border-destructive" : "border-input"}
+                  `,
+											placeholder: "contact@company.com",
+											disabled: E
+										})]
+									}),
+									M.email && /* @__PURE__ */ g("p", {
+										className: "text-sm text-destructive",
+										children: M.email
+									})
+								]
+							}), /* @__PURE__ */ _("div", {
+								className: "space-y-1.5",
+								children: [
+									/* @__PURE__ */ _("label", {
+										htmlFor: "billingEmail",
+										className: "block text-sm font-medium text-foreground",
+										children: ["Billing Email ", /* @__PURE__ */ g("span", {
+											className: "text-muted-foreground text-xs",
+											children: "(optional)"
+										})]
+									}),
+									/* @__PURE__ */ _("div", {
+										className: "relative",
+										children: [/* @__PURE__ */ g(d, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+											type: "email",
+											id: "billingEmail",
+											value: A.billingEmail || "",
+											onChange: (e) => K("billingEmail", e.target.value),
+											className: `
+                    w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-background text-foreground
+                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                    ${M.billingEmail ? "border-destructive" : "border-input"}
+                  `,
+											placeholder: "billing@company.com",
+											disabled: E
+										})]
+									}),
+									M.billingEmail && /* @__PURE__ */ g("p", {
+										className: "text-sm text-destructive",
+										children: M.billingEmail
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "pt-3 border-t border-border",
+							children: [
+								/* @__PURE__ */ _("h3", {
+									className: "text-sm font-medium text-foreground mb-3 flex items-center gap-2",
+									children: [/* @__PURE__ */ g(f, { className: "w-4 h-4 text-muted-foreground" }), "Billing Address"]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3",
+									children: [/* @__PURE__ */ _("div", {
+										className: "space-y-1.5",
+										children: [
+											/* @__PURE__ */ _("label", {
+												htmlFor: "country",
+												className: "block text-sm font-medium text-foreground",
+												children: ["Country ", /* @__PURE__ */ g("span", {
+													className: "text-destructive",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ _("select", {
+												id: "country",
+												value: A.country,
+												onChange: (e) => K("country", e.target.value),
+												className: `
+                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
+                    focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                    ${M.country ? "border-destructive" : "border-input"}
+                  `,
+												disabled: E,
+												children: [/* @__PURE__ */ g("option", {
+													value: "",
+													children: k("billing.overview.selectCountry", "Select a country")
+												}), y.map((e) => /* @__PURE__ */ g("option", {
+													value: e.code,
+													children: e.name
+												}, e.code))]
+											}),
+											M.country && /* @__PURE__ */ g("p", {
+												className: "text-sm text-destructive",
+												children: M.country
+											})
+										]
+									}), /* @__PURE__ */ _("div", {
+										className: "space-y-1.5",
+										children: [
+											/* @__PURE__ */ _("label", {
+												htmlFor: "line1",
+												className: "block text-sm font-medium text-foreground",
+												children: ["Address Line 1 ", /* @__PURE__ */ g("span", {
+													className: "text-destructive",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ g("input", {
+												type: "text",
+												id: "line1",
+												value: A.line1,
+												onChange: (e) => K("line1", e.target.value),
+												className: `
+                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
+                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                    ${M.line1 ? "border-destructive" : "border-input"}
+                  `,
+												placeholder: "Street address, P.O. box",
+												disabled: E
+											}),
+											M.line1 && /* @__PURE__ */ g("p", {
+												className: "text-sm text-destructive",
+												children: M.line1
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: "space-y-1.5 mb-3",
+									children: [/* @__PURE__ */ _("label", {
+										htmlFor: "line2",
+										className: "block text-sm font-medium text-foreground",
+										children: ["Address Line 2 ", /* @__PURE__ */ g("span", {
+											className: "text-muted-foreground text-xs",
+											children: "(optional)"
+										})]
+									}), /* @__PURE__ */ g("input", {
+										type: "text",
+										id: "line2",
+										value: A.line2,
+										onChange: (e) => K("line2", e.target.value),
+										className: "w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+										placeholder: "Apartment, suite, unit, building, floor",
+										disabled: E
+									})]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: "grid grid-cols-2 sm:grid-cols-3 gap-3 mb-3",
+									children: [
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1.5",
+											children: [
+												/* @__PURE__ */ _("label", {
+													htmlFor: "city",
+													className: "block text-sm font-medium text-foreground",
+													children: ["City ", /* @__PURE__ */ g("span", {
+														className: "text-destructive",
+														children: "*"
+													})]
+												}),
+												/* @__PURE__ */ g("input", {
+													type: "text",
+													id: "city",
+													value: A.city,
+													onChange: (e) => K("city", e.target.value),
+													className: `
+                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
+                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                    ${M.city ? "border-destructive" : "border-input"}
+                  `,
+													placeholder: "City",
+													disabled: E
+												}),
+												M.city && /* @__PURE__ */ g("p", {
+													className: "text-sm text-destructive",
+													children: M.city
+												})
+											]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1.5",
+											children: [
+												/* @__PURE__ */ _("label", {
+													htmlFor: "state",
+													className: "block text-sm font-medium text-foreground",
+													children: ["State ", A.country === "IN" && /* @__PURE__ */ g("span", {
+														className: "text-destructive",
+														children: "*"
+													})]
+												}),
+												A.country === "IN" ? /* @__PURE__ */ _("select", {
+													id: "state",
+													value: A.state,
+													onChange: (e) => K("state", e.target.value),
+													className: `
+                      w-full px-3 py-2 border rounded-lg bg-background text-foreground
+                      focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                      ${M.state ? "border-destructive" : "border-input"}
+                    `,
+													disabled: E,
+													children: [/* @__PURE__ */ g("option", {
+														value: "",
+														children: "Select state"
+													}), b.map((e) => /* @__PURE__ */ g("option", {
+														value: e,
+														children: e
+													}, e))]
+												}) : /* @__PURE__ */ g("input", {
+													type: "text",
+													id: "state",
+													value: A.state,
+													onChange: (e) => K("state", e.target.value),
+													className: "w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+													placeholder: "State/Province",
+													disabled: E
+												}),
+												M.state && /* @__PURE__ */ g("p", {
+													className: "text-sm text-destructive",
+													children: M.state
+												})
+											]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "space-y-1.5 col-span-2 sm:col-span-1",
+											children: [
+												/* @__PURE__ */ _("label", {
+													htmlFor: "postalCode",
+													className: "block text-sm font-medium text-foreground",
+													children: ["Postal Code ", /* @__PURE__ */ g("span", {
+														className: "text-destructive",
+														children: "*"
+													})]
+												}),
+												/* @__PURE__ */ g("input", {
+													type: "text",
+													id: "postalCode",
+													value: A.postalCode,
+													onChange: (e) => K("postalCode", e.target.value),
+													className: `
+                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
+                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+                    ${M.postalCode ? "border-destructive" : "border-input"}
+                  `,
+													placeholder: A.country === "IN" ? "600001" : "ZIP/Postal code",
+													disabled: E
+												}),
+												M.postalCode && /* @__PURE__ */ g("p", {
+													className: "text-sm text-destructive",
+													children: M.postalCode
+												})
+											]
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3 border-t border-border",
+							children: [/* @__PURE__ */ _("div", {
+								className: "space-y-1.5",
+								children: [/* @__PURE__ */ g("label", {
+									className: "block text-sm font-medium text-foreground",
+									children: k("billing.overview.currency", "Currency")
+								}), /* @__PURE__ */ _("div", {
+									className: "relative",
+									ref: B,
+									children: [/* @__PURE__ */ _("button", {
+										type: "button",
+										onClick: () => !E && F(!P),
+										disabled: E,
+										className: `
+                  w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg border
+                  transition-all duration-200 text-left
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                  ${P ? "border-primary ring-1 ring-primary" : "border-input hover:border-primary/50"}
+                `,
+										children: [/* @__PURE__ */ _("div", {
+											className: "flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ g("span", {
+													className: "text-base",
+													children: S(U.flag)
+												}),
+												/* @__PURE__ */ g("span", {
+													className: "font-medium text-foreground",
+													children: U.code
+												}),
+												/* @__PURE__ */ _("span", {
+													className: "text-sm text-muted-foreground",
+													children: [
+														U.symbol,
+														" · ",
+														U.name
+													]
+												})
+											]
+										}), /* @__PURE__ */ g(c, { className: `h-4 w-4 text-muted-foreground transition-transform ${P ? "rotate-180" : ""}` })]
+									}), P && /* @__PURE__ */ _("div", {
+										className: "absolute z-50 w-full bottom-full mb-1 bg-popover border border-border rounded-lg shadow-lg overflow-hidden",
+										onMouseDown: (e) => e.stopPropagation(),
+										children: [/* @__PURE__ */ g("div", {
+											className: "max-h-48 overflow-y-auto",
+											children: H.length === 0 ? /* @__PURE__ */ g("div", {
+												className: "px-3 py-4 text-sm text-muted-foreground text-center",
+												children: "No currencies found"
+											}) : H.map((e) => {
+												let t = e.code === A.currency;
+												return /* @__PURE__ */ _("button", {
+													type: "button",
+													onClick: () => {
+														K("currency", e.code), F(!1), L("");
+													},
+													className: `
+                              w-full flex items-center gap-3 px-3 py-2 text-left
+                              transition-colors
+                              ${t ? "bg-primary/10 text-foreground" : "hover:bg-muted/50 text-foreground"}
+                            `,
+													children: [
+														/* @__PURE__ */ g("span", {
+															className: "text-base shrink-0",
+															children: S(e.flag)
+														}),
+														/* @__PURE__ */ _("div", {
+															className: "flex-1 min-w-0",
+															children: [/* @__PURE__ */ _("div", {
+																className: "flex items-center gap-2",
+																children: [/* @__PURE__ */ g("span", {
+																	className: "font-medium",
+																	children: e.code
+																}), /* @__PURE__ */ g("span", {
+																	className: "text-xs text-muted-foreground",
+																	children: e.symbol
+																})]
+															}), /* @__PURE__ */ g("p", {
+																className: "text-xs text-muted-foreground truncate",
+																children: e.name
+															})]
+														}),
+														t && /* @__PURE__ */ g(s, { className: "h-4 w-4 text-primary shrink-0" })
+													]
+												}, e.code);
+											})
+										}), /* @__PURE__ */ g("div", {
+											className: "p-2 border-t border-border",
+											children: /* @__PURE__ */ _("div", {
+												className: "relative",
+												children: [/* @__PURE__ */ g(p, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+													ref: V,
+													type: "text",
+													placeholder: "Search currency...",
+													value: I,
+													onChange: (e) => L(e.target.value),
+													onMouseDown: (e) => e.stopPropagation(),
+													className: "w-full pl-8 pr-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
+												})]
+											})
+										})]
+									})]
+								})]
+							}), /* @__PURE__ */ _("div", {
+								className: "space-y-1.5",
+								children: [/* @__PURE__ */ _("label", {
+									htmlFor: "taxId",
+									className: "block text-sm font-medium text-foreground",
+									children: [
+										"Tax ID / VAT Number",
+										" ",
+										/* @__PURE__ */ g("span", {
+											className: "text-muted-foreground text-xs",
+											children: "(optional)"
+										})
+									]
+								}), /* @__PURE__ */ _("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ g(l, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+										type: "text",
+										id: "taxId",
+										value: A.taxId || "",
+										onChange: (e) => K("taxId", e.target.value),
+										className: "w-full pl-[3.25rem] pr-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+										placeholder: A.country === "IN" ? "e.g., 22AAAAA0000A1Z5" : "Tax ID / VAT Number",
+										disabled: E
+									})]
+								})]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ _("footer", {
+					className: "flex items-center justify-end gap-3 p-4 border-t border-border bg-muted/30 rounded-b-lg shrink-0",
+					children: [/* @__PURE__ */ g("button", {
+						type: "button",
+						onClick: w,
+						disabled: E,
+						className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-50",
+						children: "Cancel"
+					}), /* @__PURE__ */ g("button", {
+						onClick: G,
+						disabled: E,
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50",
+						children: E ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(u, { className: "w-4 h-4 animate-spin" }), "Creating..."] }) : "Create Account"
+					})]
+				})
+			]
+		})]
+	}) : null;
+};
+//#endregion
+export { C as CreateBillingAccountModal };
+
+//# sourceMappingURL=CreateBillingAccountModal.js.map