@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,388 @@
+import { PaymentProviderPreference as e } from "../../../shared/types/graphql.js";
+import { getStripeCardElementStyle as t } from "../../../shared/utils/paymentTheme.js";
+import "../../../shared/utils/index.js";
+import { useDashboardMutations as n, usePaymentProviderConfig as r } from "../hooks/useDashboard.js";
+import "../hooks/index.js";
+import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { AlertCircle as c, CheckCircle2 as l, CreditCard as u, Loader2 as d, X as ee } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/dashboard/components/AddPaymentMethodModal.tsx
+var g = (e, t) => new Promise((n, r) => {
+	if (document.getElementById(t)) {
+		n();
+		return;
+	}
+	let i = document.createElement("script");
+	i.id = t, i.src = e, i.async = !0, i.onload = () => n(), i.onerror = () => r(/* @__PURE__ */ Error(`Failed to load ${e}`)), document.head.appendChild(i);
+}), _ = ({ isOpen: _, onClose: v, billingAccountId: y, currency: b, country: x, onSuccess: S }) => {
+	let { t: te } = h(), C = (e, t) => {
+		let n = te(e);
+		return n === e ? t : n;
+	}, w = o(null), T = o(null), E = o(null), D = o(null), { stripeEnabled: O, stripePublishableKey: k, razorpayEnabled: A, isLoading: ne } = r(!_), { isAddingPaymentMethod: j, verifyPaymentMethod: M } = n(), N = b?.toUpperCase() === "INR" || x?.toUpperCase() === "IN", P = A && N, F = O && !N, [I, L] = s("select-provider"), [R, z] = s(null), [B, V] = s(null), [H, U] = s(!1), [W, G] = s(!1), [K, q] = s(""), [J, Y] = s(!0), [re, X] = s(!1);
+	a(() => {
+		_ ? (L("select-provider"), z(null), V(null), q(""), Y(!0), X(!1)) : E.current &&= (E.current.destroy(), null);
+	}, [_]), a(() => I !== "add-card" || R !== "stripe" || !k ? void 0 : ((async () => {
+		G(!0);
+		try {
+			if (await g("https://js.stripe.com/v3/", "stripe-js"), !window.Stripe) throw Error("Stripe SDK failed to load");
+			let e = window.Stripe(k);
+			D.current = e;
+			let n = 0;
+			for (; !T.current && n < 50;) await new Promise((e) => setTimeout(e, 100)), n++;
+			if (!T.current) throw Error("Card element container not found after 5 seconds");
+			if (E.current) return;
+			let r = e.elements().create("card", { style: t("system-ui, -apple-system, sans-serif") });
+			r.mount(T.current), E.current = r, r.on("change", (e) => {
+				X(e.complete), e.error ? V(e.error.message) : V(null);
+			});
+		} catch (e) {
+			V(e instanceof Error ? e.message : "Failed to load Stripe");
+		} finally {
+			G(!1);
+		}
+	})(), () => {
+		if (E.current) try {
+			E.current.destroy(), E.current = null;
+		} catch {}
+	}), [
+		I,
+		R,
+		k
+	]), a(() => {
+		let e = (e) => {
+			e.key === "Escape" && _ && !H && v();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		_,
+		H,
+		v
+	]);
+	let Z = i((e) => {
+		z(e), L("add-card"), V(null);
+	}, []), Q = i(async () => {
+		if (!D.current || !E.current) {
+			V("Stripe not initialized");
+			return;
+		}
+		if (!K.trim()) {
+			V("Please enter the cardholder name");
+			return;
+		}
+		U(!0), V(null);
+		try {
+			let t = await M({
+				billingAccountId: y,
+				currency: "USD",
+				provider: e.STRIPE,
+				setAsDefault: J
+			});
+			if (!t.clientSecret) throw Error("Failed to initiate card verification");
+			let { setupIntent: n, error: r } = await D.current.confirmCardSetup(t.clientSecret, { payment_method: {
+				card: E.current,
+				billing_details: { name: K }
+			} });
+			if (r) throw Error(r.message);
+			if (n?.status !== "succeeded") throw Error("Card verification failed");
+			L("success"), await new Promise((e) => setTimeout(e, 2e3)), S?.(), setTimeout(() => {
+				v();
+			}, 500);
+		} catch (e) {
+			V(e instanceof Error ? e.message : "Failed to add payment method"), U(!1);
+		}
+	}, [
+		K,
+		J,
+		y,
+		M,
+		S,
+		v
+	]), $ = i(async () => {
+		U(!0), V(null);
+		try {
+			G(!0);
+			try {
+				await g("https://checkout.razorpay.com/v1/checkout.js", "razorpay-sdk");
+			} catch {
+				V("Failed to load Razorpay SDK"), U(!1), G(!1);
+				return;
+			}
+			G(!1);
+			let t = await M({
+				billingAccountId: y,
+				currency: "INR",
+				provider: e.RAZORPAY,
+				setAsDefault: J
+			});
+			if (!t.success || !t.orderId || !t.razorpayKeyId) {
+				V(t.error || "Failed to initiate verification"), U(!1);
+				return;
+			}
+			if (!window.Razorpay) {
+				V("Razorpay SDK not loaded"), U(!1);
+				return;
+			}
+			let n = {
+				key: t.razorpayKeyId,
+				amount: (t.amount ?? 0) * 100,
+				currency: t.currency.toUpperCase(),
+				order_id: t.orderId,
+				customer_id: t.razorpayCustomerId,
+				name: "Add Payment Method",
+				description: `₹${t.amount} verification charge (refundable)`,
+				prefill: {
+					name: t.prefillName,
+					email: t.prefillEmail,
+					contact: t.prefillContact
+				},
+				notes: {
+					purchaseType: "PAYMENT_METHOD_VERIFICATION",
+					default_method: J.toString()
+				},
+				handler: async () => {
+					L("success"), await new Promise((e) => setTimeout(e, 2e3)), S?.(), setTimeout(() => {
+						v();
+					}, 500);
+				},
+				modal: { ondismiss: () => {
+					U(!1), V("Payment cancelled");
+				} }
+			};
+			new window.Razorpay(n).open();
+		} catch (e) {
+			V(e instanceof Error ? e.message : "Failed to add payment method"), U(!1);
+		}
+	}, [
+		J,
+		y,
+		M,
+		S,
+		v
+	]), ie = i(() => {
+		R === "stripe" ? Q() : R === "razorpay" && $();
+	}, [
+		R,
+		Q,
+		$
+	]);
+	return _ ? /* @__PURE__ */ m("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": "modal-title",
+		children: [/* @__PURE__ */ p("div", {
+			className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+			onClick: H ? void 0 : v,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ m("div", {
+			ref: w,
+			className: "relative w-full max-w-md max-h-[90vh] mx-4 bg-card border border-border rounded-lg shadow-xl flex flex-col",
+			children: [
+				/* @__PURE__ */ m("header", {
+					className: "flex items-center justify-between p-4 border-b border-border flex-shrink-0",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ p("div", {
+							className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center",
+							children: /* @__PURE__ */ p(u, { className: "w-5 h-5 text-primary" })
+						}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h2", {
+							id: "modal-title",
+							className: "text-lg font-semibold text-foreground",
+							children: I === "success" ? "Payment Method Added" : "Add Payment Method"
+						}), /* @__PURE__ */ m("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								I === "select-provider" && "Choose a payment provider",
+								I === "add-card" && (R === "stripe" ? "Add card via Stripe" : "Add payment method with ₹1 verification"),
+								I === "processing" && "Processing...",
+								I === "success" && "Your payment method has been saved"
+							]
+						})] })]
+					}), /* @__PURE__ */ p("button", {
+						onClick: v,
+						disabled: H,
+						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__ */ p(ee, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "p-4 overflow-y-auto flex-1",
+					children: ne ? /* @__PURE__ */ p("div", {
+						className: "flex items-center justify-center py-8",
+						children: /* @__PURE__ */ p(d, { className: "w-6 h-6 animate-spin text-muted-foreground" })
+					}) : I === "select-provider" ? /* @__PURE__ */ m("div", {
+						className: "space-y-3",
+						children: [
+							F && /* @__PURE__ */ m("button", {
+								onClick: () => Z("stripe"),
+								className: "w-full flex items-center gap-4 p-4 border border-border rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-left",
+								children: [/* @__PURE__ */ p("div", {
+									className: "w-12 h-12 rounded-lg bg-accent-violet-subtle flex items-center justify-center",
+									children: /* @__PURE__ */ p(u, { className: "w-6 h-6 text-accent-violet" })
+								}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+									className: "font-medium text-foreground",
+									children: "Stripe"
+								}), /* @__PURE__ */ p("p", {
+									className: "text-sm text-muted-foreground",
+									children: "Cards, Apple Pay, Google Pay"
+								})] })]
+							}),
+							P && /* @__PURE__ */ m("button", {
+								onClick: () => Z("razorpay"),
+								className: "w-full flex items-center gap-4 p-4 border border-border rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-left",
+								children: [/* @__PURE__ */ p("div", {
+									className: "w-12 h-12 rounded-lg bg-status-info-bg-subtle flex items-center justify-center",
+									children: /* @__PURE__ */ p(u, { className: "w-6 h-6 text-accent-blue" })
+								}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+									className: "font-medium text-foreground",
+									children: "Razorpay"
+								}), /* @__PURE__ */ p("p", {
+									className: "text-sm text-muted-foreground",
+									children: "UPI, Netbanking, Cards"
+								})] })]
+							}),
+							!F && !P && /* @__PURE__ */ m("div", {
+								className: "flex flex-col items-center py-8 text-center",
+								children: [
+									/* @__PURE__ */ p(c, { className: "w-12 h-12 text-status-warning-text mb-3" }),
+									/* @__PURE__ */ p("p", {
+										className: "font-medium text-foreground",
+										children: C("billing.overview.noPaymentProviders", "No Payment Providers Available")
+									}),
+									/* @__PURE__ */ p("p", {
+										className: "text-sm text-muted-foreground mt-1",
+										children: N ? "Razorpay is not configured for Indian accounts. Please contact support." : "Stripe is not configured for international accounts. Please contact support."
+									})
+								]
+							})
+						]
+					}) : I === "add-card" ? /* @__PURE__ */ m("div", {
+						className: "space-y-4",
+						children: [
+							B && /* @__PURE__ */ m("div", {
+								className: "flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20 text-destructive",
+								children: [/* @__PURE__ */ p(c, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ p("p", {
+									className: "text-sm",
+									children: B
+								})]
+							}),
+							R === "stripe" && /* @__PURE__ */ m("div", {
+								className: "space-y-1.5",
+								children: [/* @__PURE__ */ p("label", {
+									htmlFor: "cardholderName",
+									className: "block text-sm font-medium text-foreground",
+									children: "Cardholder Name"
+								}), /* @__PURE__ */ p("input", {
+									type: "text",
+									id: "cardholderName",
+									value: K,
+									onChange: (e) => q(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: "John Doe",
+									disabled: H
+								})]
+							}),
+							R === "stripe" && /* @__PURE__ */ m("div", {
+								className: "space-y-1.5",
+								children: [/* @__PURE__ */ p("label", {
+									className: "block text-sm font-medium text-foreground",
+									children: C("billing.overview.cardDetails", "Card Details")
+								}), /* @__PURE__ */ m("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ p("div", {
+										ref: T,
+										className: "px-3 py-3 border border-input rounded-lg bg-background min-h-[44px]"
+									}), W && /* @__PURE__ */ m("div", {
+										className: "absolute inset-0 flex items-center justify-center bg-background/80 rounded-lg",
+										children: [/* @__PURE__ */ p(d, { className: "w-5 h-5 animate-spin text-muted-foreground" }), /* @__PURE__ */ p("span", {
+											className: "ml-2 text-sm text-muted-foreground",
+											children: "Loading Stripe..."
+										})]
+									})]
+								})]
+							}),
+							R === "razorpay" && /* @__PURE__ */ p("div", {
+								className: "p-3 border border-border-subtle rounded-lg bg-status-info-bg-subtle",
+								children: /* @__PURE__ */ m("p", {
+									className: "text-sm text-status-info-text",
+									children: [/* @__PURE__ */ p("strong", { children: "Verification Process:" }), " A ₹1 charge will be made to verify your payment method. This amount will be refunded immediately after verification."]
+								})
+							}),
+							/* @__PURE__ */ m("label", {
+								className: "flex items-center gap-2 cursor-pointer",
+								children: [/* @__PURE__ */ p("input", {
+									type: "checkbox",
+									checked: J,
+									onChange: (e) => Y(e.target.checked),
+									className: "w-4 h-4 rounded border-input text-primary focus:ring-primary/20",
+									disabled: H
+								}), /* @__PURE__ */ p("span", {
+									className: "text-sm text-foreground",
+									children: C("billing.overview.setAsDefault", "Set as default payment method")
+								})]
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "flex items-center gap-2 pt-2 border-t border-border",
+								children: [/* @__PURE__ */ p("span", {
+									className: "text-xs text-muted-foreground",
+									children: "Secured by"
+								}), /* @__PURE__ */ p("span", {
+									className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${R === "stripe" ? "bg-accent-violet-subtle text-accent-violet" : "bg-status-info-bg-subtle text-status-info-text"}`,
+									children: R === "stripe" ? "Stripe" : "Razorpay"
+								})]
+							})
+						]
+					}) : /* @__PURE__ */ m("div", {
+						className: "flex flex-col items-center py-8 text-center",
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "w-16 h-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center mb-4",
+								children: /* @__PURE__ */ p(l, { className: "w-8 h-8 text-status-success-text" })
+							}),
+							/* @__PURE__ */ p("p", {
+								className: "font-medium text-foreground",
+								children: C("billing.overview.paymentMethodAdded", "Payment method added successfully!")
+							}),
+							/* @__PURE__ */ p("p", {
+								className: "text-sm text-muted-foreground mt-1",
+								children: "Your payment method has been securely saved."
+							})
+						]
+					})
+				}),
+				I !== "success" && /* @__PURE__ */ m("footer", {
+					className: "flex items-center justify-between gap-3 p-4 border-t border-border bg-muted/30 rounded-b-lg flex-shrink-0",
+					children: [I === "add-card" && F && P ? /* @__PURE__ */ p("button", {
+						type: "button",
+						onClick: () => {
+							L("select-provider"), z(null), V(null), E.current &&= (E.current.destroy(), null);
+						},
+						disabled: H,
+						className: "px-4 py-2 text-sm font-medium text-foreground hover:text-primary transition-colors disabled:opacity-50",
+						children: "Back"
+					}) : /* @__PURE__ */ p("div", {}), /* @__PURE__ */ m("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ p("button", {
+							type: "button",
+							onClick: v,
+							disabled: H,
+							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"
+						}), I === "add-card" && /* @__PURE__ */ p("button", {
+							onClick: ie,
+							disabled: H || j || W || R === "stripe" && !re,
+							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: H || j ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(d, { className: "w-4 h-4 animate-spin" }), R === "razorpay" ? "Processing..." : "Saving..."] }) : W ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(d, { className: "w-4 h-4 animate-spin" }), "Loading..."] }) : R === "stripe" ? "Add Card" : "Add Payment Method (₹1)"
+						})]
+					})]
+				})
+			]
+		})]
+	}) : null;
+};
+//#endregion
+export { _ as AddPaymentMethodModal };
+
+//# sourceMappingURL=AddPaymentMethodModal.js.map

package/dist/billing/modules/dashboard/components/AddPaymentMethodModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPaymentMethodModal.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/AddPaymentMethodModal.tsx"],"sourcesContent":["/**\n * Add Payment Method Modal Component\n * Modal for adding a new payment method via Stripe or Razorpay SDKs\n */\n\nimport { type FC, useState, useCallback, useEffect, useRef } from 'react';\nimport { X, CreditCard, Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePaymentProviderConfig, useDashboardMutations } from '../hooks';\nimport { PaymentProviderPreference } from '../../../shared/types';\nimport { getStripeCardElementStyle } from '../../../shared/utils';\n\n// Stripe types (loaded dynamically)\ndeclare global {\n  interface Window {\n    Stripe?: (key: string) => StripeInstance;\n    Razorpay?: new (options: RazorpayOptions) => RazorpayInstance;\n  }\n}\n\ninterface StripeInstance {\n  elements: () => StripeElements;\n  createPaymentMethod: (options: {\n    type: 'card';\n    card: StripeCardElement;\n    billing_details?: { name?: string };\n  }) => Promise<{\n    paymentMethod?: {\n      id: string;\n      card?: { brand: string; last4: string; exp_month: number; exp_year: number };\n    };\n    error?: { message: string };\n  }>;\n  confirmCardSetup: (\n    clientSecret: string,\n    options?: {\n      payment_method?: {\n        card: StripeCardElement;\n        billing_details?: { name?: string };\n      };\n    }\n  ) => Promise<{\n    setupIntent?: {\n      id: string;\n      status: string;\n      payment_method?: string;\n    };\n    error?: { message: string };\n  }>;\n}\n\ninterface StripeElements {\n  create: (type: 'card', options?: object) => StripeCardElement;\n}\n\ninterface StripeCardElement {\n  mount: (element: HTMLElement | string) => void;\n  unmount: () => void;\n  on: (\n    event: string,\n    handler: (event: { complete: boolean; error?: { message: string } }) => void\n  ) => void;\n  destroy: () => void;\n}\n\ninterface RazorpayOptions {\n  key: string;\n  amount: number;\n  currency: string;\n  order_id: string;\n  customer_id?: string;\n  name: string;\n  description: string;\n  method?: 'card' | 'upi' | 'netbanking' | 'wallet' | 'emi' | 'cardless_emi';\n  handler: (response: RazorpayResponse) => void;\n  modal?: { ondismiss?: () => void };\n  prefill?: { name?: string; email?: string; contact?: string };\n  notes?: Record<string, string>;\n  config?: {\n    display?: {\n      hide?: Array<{ method: string }>;\n      preferences?: {\n        show_default_blocks?: boolean;\n      };\n    };\n  };\n}\n\ninterface RazorpayInstance {\n  open: () => void;\n  close: () => void;\n}\n\ninterface RazorpayResponse {\n  razorpay_payment_id: string;\n  razorpay_token?: string;\n}\n\ninterface AddPaymentMethodModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  billingAccountId: string;\n  currency: string; // e.g., 'INR', 'USD'\n  country?: string; // e.g., 'IN', 'US' - from billing address\n  onSuccess?: () => void;\n}\n\ntype ModalStep = 'select-provider' | 'add-card' | 'processing' | 'success';\n\n// Load external script dynamically\nconst loadScript = (src: string, id: string): Promise<void> => {\n  return new Promise((resolve, reject) => {\n    if (document.getElementById(id)) {\n      resolve();\n      return;\n    }\n    const script = document.createElement('script');\n    script.id = id;\n    script.src = src;\n    script.async = true;\n    script.onload = () => resolve();\n    script.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(script);\n  });\n};\n\nexport const AddPaymentMethodModal: FC<AddPaymentMethodModalProps> = ({\n  isOpen,\n  onClose,\n  billingAccountId,\n  currency,\n  country,\n  onSuccess,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const modalRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<HTMLDivElement>(null);\n  const stripeCardElementRef = useRef<StripeCardElement | null>(null);\n  const stripeRef = useRef<StripeInstance | null>(null);\n\n  // Only fetch payment provider config when modal is open\n  const {\n    stripeEnabled,\n    stripePublishableKey,\n    razorpayEnabled,\n    isLoading: isLoadingConfig,\n  } = usePaymentProviderConfig(!isOpen);\n  const { isAddingPaymentMethod, verifyPaymentMethod } = useDashboardMutations();\n\n  // Determine which providers to show based on currency and country\n  // Razorpay: India only (INR currency OR IN country)\n  // Stripe: International (non-INR OR non-IN country)\n  const isIndianAccount = currency?.toUpperCase() === 'INR' || country?.toUpperCase() === 'IN';\n  const showRazorpay = razorpayEnabled && isIndianAccount;\n  const showStripe = stripeEnabled && !isIndianAccount;\n\n  const [step, setStep] = useState<ModalStep>('select-provider');\n  const [selectedProvider, setSelectedProvider] = useState<'stripe' | 'razorpay' | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [isLoadingSdk, setIsLoadingSdk] = useState(false);\n  const [cardholderName, setCardholderName] = useState('');\n  const [setAsDefault, setSetAsDefault] = useState(true);\n  const [isCardComplete, setIsCardComplete] = useState(false);\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      // Always start with provider selection\n      setStep('select-provider');\n      setSelectedProvider(null);\n      setError(null);\n      setCardholderName('');\n      setSetAsDefault(true);\n      setIsCardComplete(false);\n    } else {\n      // Cleanup Stripe element when modal closes\n      if (stripeCardElementRef.current) {\n        stripeCardElementRef.current.destroy();\n        stripeCardElementRef.current = null;\n      }\n    }\n  }, [isOpen]);\n\n  // Note: We always show provider selection, even if only one is available\n  // This ensures the user explicitly chooses their payment provider\n\n  // Initialize Stripe when provider is selected\n  useEffect(() => {\n    if (step !== 'add-card' || selectedProvider !== 'stripe' || !stripePublishableKey) return;\n\n    const initStripe = async () => {\n      setIsLoadingSdk(true);\n      try {\n        await loadScript('https://js.stripe.com/v3/', 'stripe-js');\n\n        if (!window.Stripe) {\n          throw new Error('Stripe SDK failed to load');\n        }\n\n        const stripe = window.Stripe(stripePublishableKey);\n        stripeRef.current = stripe;\n\n        // Wait for the card element container to be mounted in the DOM\n        let attempts = 0;\n        while (!cardElementRef.current && attempts < 50) {\n          await new Promise((resolve) => setTimeout(resolve, 100));\n          attempts++;\n        }\n\n        if (!cardElementRef.current) {\n          throw new Error('Card element container not found after 5 seconds');\n        }\n\n        if (stripeCardElementRef.current) {\n          return;\n        }\n\n        const elements = stripe.elements();\n        const cardElement = elements.create('card', {\n          style: getStripeCardElementStyle('system-ui, -apple-system, sans-serif'),\n        });\n\n        cardElement.mount(cardElementRef.current);\n        stripeCardElementRef.current = cardElement;\n\n        cardElement.on('change', (event) => {\n          setIsCardComplete(event.complete);\n          if (event.error) {\n            setError(event.error.message);\n          } else {\n            setError(null);\n          }\n        });\n      } catch (err) {\n        setError(err instanceof Error ? err.message : 'Failed to load Stripe');\n      } finally {\n        setIsLoadingSdk(false);\n      }\n    };\n\n    initStripe();\n\n    return () => {\n      if (stripeCardElementRef.current) {\n        try {\n          stripeCardElementRef.current.destroy();\n          stripeCardElementRef.current = null;\n        } catch {\n          // Stripe element may already be detached during modal teardown.\n        }\n      }\n    };\n  }, [step, selectedProvider, stripePublishableKey]);\n\n  // Handle escape key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen && !isProcessing) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, isProcessing, onClose]);\n\n  const handleSelectProvider = useCallback((provider: 'stripe' | 'razorpay') => {\n    setSelectedProvider(provider);\n    setStep('add-card');\n    setError(null);\n  }, []);\n\n  const handleStripeSubmit = useCallback(async () => {\n    if (!stripeRef.current || !stripeCardElementRef.current) {\n      setError('Stripe not initialized');\n      return;\n    }\n\n    if (!cardholderName.trim()) {\n      setError('Please enter the cardholder name');\n      return;\n    }\n\n    setIsProcessing(true);\n    setError(null);\n\n    try {\n      // Step 1: Call backend to create SetupIntent and get client secret\n      const verificationResult = await verifyPaymentMethod({\n        billingAccountId,\n        currency: 'USD',\n        provider: PaymentProviderPreference.STRIPE,\n        setAsDefault,\n      });\n\n      if (!verificationResult.clientSecret) {\n        throw new Error('Failed to initiate card verification');\n      }\n\n      // Step 2: Confirm card setup using the client secret (no charge)\n      const { setupIntent, error: stripeError } = await stripeRef.current.confirmCardSetup(\n        verificationResult.clientSecret,\n        {\n          payment_method: {\n            card: stripeCardElementRef.current,\n            billing_details: { name: cardholderName },\n          },\n        }\n      );\n\n      if (stripeError) {\n        throw new Error(stripeError.message);\n      }\n\n      if (setupIntent?.status !== 'succeeded') {\n        throw new Error('Card verification failed');\n      }\n\n      // Step 3: Show success (webhook will save the payment method)\n      setStep('success');\n\n      // Wait for webhook to process (2 seconds) before refetching\n      await new Promise((resolve) => setTimeout(resolve, 2000));\n      onSuccess?.();\n\n      // Show success message briefly before closing\n      setTimeout(() => {\n        onClose();\n      }, 500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to add payment method');\n      setIsProcessing(false);\n    }\n  }, [cardholderName, setAsDefault, billingAccountId, verifyPaymentMethod, onSuccess, onClose]);\n\n  const handleRazorpaySubmit = useCallback(async () => {\n    setIsProcessing(true);\n    setError(null);\n\n    try {\n      // Load Razorpay SDK\n      setIsLoadingSdk(true);\n      try {\n        await loadScript('https://checkout.razorpay.com/v1/checkout.js', 'razorpay-sdk');\n      } catch {\n        setError('Failed to load Razorpay SDK');\n        setIsProcessing(false);\n        setIsLoadingSdk(false);\n        return;\n      }\n      setIsLoadingSdk(false);\n\n      // Initiate ₹1 verification payment\n      const verificationResult = await verifyPaymentMethod({\n        billingAccountId,\n        currency: 'INR',\n        provider: PaymentProviderPreference.RAZORPAY,\n        setAsDefault,\n      });\n\n      if (\n        !verificationResult.success ||\n        !verificationResult.orderId ||\n        !verificationResult.razorpayKeyId\n      ) {\n        setError(verificationResult.error || 'Failed to initiate verification');\n        setIsProcessing(false);\n        return;\n      }\n\n      // Open Razorpay checkout with ALL payment methods\n      if (!window.Razorpay) {\n        setError('Razorpay SDK not loaded');\n        setIsProcessing(false);\n        return;\n      }\n\n      const options = {\n        key: verificationResult.razorpayKeyId,\n        amount: (verificationResult.amount ?? 0) * 100, // Convert to paise\n        currency: verificationResult.currency.toUpperCase(),\n        order_id: verificationResult.orderId,\n        customer_id: verificationResult.razorpayCustomerId, // Link to customer for saving\n        name: 'Add Payment Method',\n        description: `₹${verificationResult.amount} verification charge (refundable)`,\n        prefill: {\n          name: verificationResult.prefillName,\n          email: verificationResult.prefillEmail,\n          contact: verificationResult.prefillContact,\n        },\n        notes: {\n          purchaseType: 'PAYMENT_METHOD_VERIFICATION',\n          default_method: setAsDefault.toString(),\n        },\n        handler: async () => {\n          // Payment successful - payment method will be saved via webhook\n          setStep('success');\n\n          // Wait for webhook to process (2 seconds) before refetching\n          await new Promise((resolve) => setTimeout(resolve, 2000));\n          onSuccess?.();\n\n          // Show success message briefly before closing\n          setTimeout(() => {\n            onClose();\n          }, 500);\n        },\n        modal: {\n          ondismiss: () => {\n            setIsProcessing(false);\n            setError('Payment cancelled');\n          },\n        },\n      };\n\n      const rzp = new window.Razorpay(options);\n      rzp.open();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to add payment method');\n      setIsProcessing(false);\n    }\n  }, [setAsDefault, billingAccountId, verifyPaymentMethod, onSuccess, onClose]);\n\n  const handleSubmit = useCallback(() => {\n    if (selectedProvider === 'stripe') {\n      handleStripeSubmit();\n    } else if (selectedProvider === 'razorpay') {\n      handleRazorpaySubmit();\n    }\n  }, [selectedProvider, handleStripeSubmit, handleRazorpaySubmit]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modal-title\"\n    >\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\"\n        onClick={!isProcessing ? onClose : undefined}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div\n        ref={modalRef}\n        className=\"relative w-full max-w-md max-h-[90vh] mx-4 bg-card border border-border rounded-lg shadow-xl flex flex-col\"\n      >\n        {/* Header */}\n        <header className=\"flex items-center justify-between p-4 border-b border-border flex-shrink-0\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center\">\n              <CreditCard className=\"w-5 h-5 text-primary\" />\n            </div>\n            <div>\n              <h2 id=\"modal-title\" className=\"text-lg font-semibold text-foreground\">\n                {step === 'success' ? 'Payment Method Added' : 'Add Payment Method'}\n              </h2>\n              <p className=\"text-sm text-muted-foreground\">\n                {step === 'select-provider' && 'Choose a payment provider'}\n                {step === 'add-card' &&\n                  (selectedProvider === 'stripe'\n                    ? 'Add card via Stripe'\n                    : 'Add payment method with ₹1 verification')}\n                {step === 'processing' && 'Processing...'}\n                {step === 'success' && 'Your payment method has been saved'}\n              </p>\n            </div>\n          </div>\n          <button\n            onClick={onClose}\n            disabled={isProcessing}\n            className=\"p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50\"\n            aria-label=\"Close modal\"\n          >\n            <X className=\"w-5 h-5\" />\n          </button>\n        </header>\n\n        {/* Content */}\n        <div className=\"p-4 overflow-y-auto flex-1\">\n          {isLoadingConfig ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Loader2 className=\"w-6 h-6 animate-spin text-muted-foreground\" />\n            </div>\n          ) : step === 'select-provider' ? (\n            <div className=\"space-y-3\">\n              {showStripe && (\n                <button\n                  onClick={() => handleSelectProvider('stripe')}\n                  className=\"w-full flex items-center gap-4 p-4 border border-border rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-left\"\n                >\n                  <div className=\"w-12 h-12 rounded-lg bg-accent-violet-subtle flex items-center justify-center\">\n                    <CreditCard className=\"w-6 h-6 text-accent-violet\" />\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-foreground\">Stripe</p>\n                    <p className=\"text-sm text-muted-foreground\">Cards, Apple Pay, Google Pay</p>\n                  </div>\n                </button>\n              )}\n              {showRazorpay && (\n                <button\n                  onClick={() => handleSelectProvider('razorpay')}\n                  className=\"w-full flex items-center gap-4 p-4 border border-border rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-left\"\n                >\n                  <div className=\"w-12 h-12 rounded-lg bg-status-info-bg-subtle flex items-center justify-center\">\n                    <CreditCard className=\"w-6 h-6 text-accent-blue\" />\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-foreground\">Razorpay</p>\n                    <p className=\"text-sm text-muted-foreground\">UPI, Netbanking, Cards</p>\n                  </div>\n                </button>\n              )}\n              {!showStripe && !showRazorpay && (\n                <div className=\"flex flex-col items-center py-8 text-center\">\n                  <AlertCircle className=\"w-12 h-12 text-status-warning-text mb-3\" />\n                  <p className=\"font-medium text-foreground\">\n                    {tr('billing.overview.noPaymentProviders', 'No Payment Providers Available')}\n                  </p>\n                  <p className=\"text-sm text-muted-foreground mt-1\">\n                    {isIndianAccount\n                      ? 'Razorpay is not configured for Indian accounts. Please contact support.'\n                      : 'Stripe is not configured for international accounts. Please contact support.'}\n                  </p>\n                </div>\n              )}\n            </div>\n          ) : step === 'add-card' ? (\n            <div className=\"space-y-4\">\n              {/* Error Message */}\n              {error && (\n                <div className=\"flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20 text-destructive\">\n                  <AlertCircle className=\"w-4 h-4 flex-shrink-0\" />\n                  <p className=\"text-sm\">{error}</p>\n                </div>\n              )}\n\n              {/* Cardholder Name - only for Stripe */}\n              {selectedProvider === 'stripe' && (\n                <div className=\"space-y-1.5\">\n                  <label\n                    htmlFor=\"cardholderName\"\n                    className=\"block text-sm font-medium text-foreground\"\n                  >\n                    Cardholder Name\n                  </label>\n                  <input\n                    type=\"text\"\n                    id=\"cardholderName\"\n                    value={cardholderName}\n                    onChange={(e) => setCardholderName(e.target.value)}\n                    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\"\n                    placeholder=\"John Doe\"\n                    disabled={isProcessing}\n                  />\n                </div>\n              )}\n\n              {/* Stripe Card Element */}\n              {selectedProvider === 'stripe' && (\n                <div className=\"space-y-1.5\">\n                  <label className=\"block text-sm font-medium text-foreground\">\n                    {tr('billing.overview.cardDetails', 'Card Details')}\n                  </label>\n                  <div className=\"relative\">\n                    <div\n                      ref={cardElementRef}\n                      className=\"px-3 py-3 border border-input rounded-lg bg-background min-h-[44px]\"\n                    />\n                    {isLoadingSdk && (\n                      <div className=\"absolute inset-0 flex items-center justify-center bg-background/80 rounded-lg\">\n                        <Loader2 className=\"w-5 h-5 animate-spin text-muted-foreground\" />\n                        <span className=\"ml-2 text-sm text-muted-foreground\">\n                          Loading Stripe...\n                        </span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )}\n\n              {/* Razorpay - Verification Info */}\n              {selectedProvider === 'razorpay' && (\n                <div className=\"p-3 border border-border-subtle rounded-lg bg-status-info-bg-subtle\">\n                  <p className=\"text-sm text-status-info-text\">\n                    <strong>Verification Process:</strong> A ₹1 charge will be made to verify your\n                    payment method. This amount will be refunded immediately after verification.\n                  </p>\n                </div>\n              )}\n\n              {/* Set as default */}\n              <label className=\"flex items-center gap-2 cursor-pointer\">\n                <input\n                  type=\"checkbox\"\n                  checked={setAsDefault}\n                  onChange={(e) => setSetAsDefault(e.target.checked)}\n                  className=\"w-4 h-4 rounded border-input text-primary focus:ring-primary/20\"\n                  disabled={isProcessing}\n                />\n                <span className=\"text-sm text-foreground\">\n                  {tr('billing.overview.setAsDefault', 'Set as default payment method')}\n                </span>\n              </label>\n\n              {/* Provider badge */}\n              <div className=\"flex items-center gap-2 pt-2 border-t border-border\">\n                <span className=\"text-xs text-muted-foreground\">Secured by</span>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${\n                    selectedProvider === 'stripe'\n                      ? 'bg-accent-violet-subtle text-accent-violet'\n                      : 'bg-status-info-bg-subtle text-status-info-text'\n                  }`}\n                >\n                  {selectedProvider === 'stripe' ? 'Stripe' : 'Razorpay'}\n                </span>\n              </div>\n            </div>\n          ) : (\n            /* Success state */\n            <div className=\"flex flex-col items-center py-8 text-center\">\n              <div className=\"w-16 h-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center mb-4\">\n                <CheckCircle2 className=\"w-8 h-8 text-status-success-text\" />\n              </div>\n              <p className=\"font-medium text-foreground\">\n                {tr('billing.overview.paymentMethodAdded', 'Payment method added successfully!')}\n              </p>\n              <p className=\"text-sm text-muted-foreground mt-1\">\n                Your payment method has been securely saved.\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        {step !== 'success' && (\n          <footer className=\"flex items-center justify-between gap-3 p-4 border-t border-border bg-muted/30 rounded-b-lg flex-shrink-0\">\n            {step === 'add-card' && showStripe && showRazorpay ? (\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setStep('select-provider');\n                  setSelectedProvider(null);\n                  setError(null);\n                  // Cleanup Stripe element\n                  if (stripeCardElementRef.current) {\n                    stripeCardElementRef.current.destroy();\n                    stripeCardElementRef.current = null;\n                  }\n                }}\n                disabled={isProcessing}\n                className=\"px-4 py-2 text-sm font-medium text-foreground hover:text-primary transition-colors disabled:opacity-50\"\n              >\n                Back\n              </button>\n            ) : (\n              <div />\n            )}\n            <div className=\"flex items-center gap-3\">\n              <button\n                type=\"button\"\n                onClick={onClose}\n                disabled={isProcessing}\n                className=\"px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-50\"\n              >\n                Cancel\n              </button>\n              {step === 'add-card' && (\n                <button\n                  onClick={handleSubmit}\n                  disabled={\n                    isProcessing ||\n                    isAddingPaymentMethod ||\n                    isLoadingSdk ||\n                    (selectedProvider === 'stripe' && !isCardComplete)\n                  }\n                  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\"\n                >\n                  {isProcessing || isAddingPaymentMethod ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 animate-spin\" />\n                      {selectedProvider === 'razorpay' ? 'Processing...' : 'Saving...'}\n                    </>\n                  ) : isLoadingSdk ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 animate-spin\" />\n                      Loading...\n                    </>\n                  ) : selectedProvider === 'stripe' ? (\n                    'Add Card'\n                  ) : (\n                    'Add Payment Method (₹1)'\n                  )}\n                </button>\n              )}\n            </div>\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/dashboard/components/BillingAccountCard.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { BillingAccount } from '../../../shared/types';
+
+interface BillingAccountCardProps {
+    account: BillingAccount;
+    isDefault?: boolean;
+    isSelected?: boolean;
+    onSelect?: () => void;
+    onEdit?: () => void;
+    onViewTransactions?: () => void;
+    onViewCreditTransactions?: () => void;
+    className?: string;
+}
+export declare const BillingAccountCard: FC<BillingAccountCardProps>;
+export {};
+//# sourceMappingURL=BillingAccountCard.d.ts.map

package/dist/billing/modules/dashboard/components/BillingAccountCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingAccountCard.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/dashboard/components/BillingAccountCard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAW1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAI5D,UAAU,uBAAuB;IAC/B,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAmK1D,CAAC"}

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

@@ -0,0 +1,146 @@
+import { statusTokens as e } from "../../../shared/utils/tokens.js";
+import { useState as t } from "react";
+import { Building2 as n, Calendar as r, Check as i, ChevronRight as a, Coins as o, CreditCard as s, Edit2 as c, Mail as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/dashboard/components/BillingAccountCard.tsx
+var p = ({ account: p, isDefault: m = !1, isSelected: h = !1, onSelect: g, onEdit: _, onViewTransactions: v, onViewCreditTransactions: y, className: b = "" }) => {
+	let { t: x } = f(), S = (e, t) => {
+		let n = x(e);
+		return n === e ? t : n;
+	}, [C, w] = t(!1);
+	return /* @__PURE__ */ d("article", {
+		className: `
+        relative border rounded-lg bg-card transition-all duration-200
+        ${h ? "border-primary ring-2 ring-primary/20" : "border-border"}
+        ${C ? "shadow-md" : "shadow-sm"}
+        ${g ? "cursor-pointer" : ""}
+        ${b}
+      `,
+		onMouseEnter: () => w(!0),
+		onMouseLeave: () => w(!1),
+		onClick: g,
+		role: g ? "button" : "article",
+		tabIndex: g ? 0 : void 0,
+		onKeyDown: (e) => {
+			g && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), g());
+		},
+		children: [
+			/* @__PURE__ */ u("header", {
+				className: "p-4 border-b border-border",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex items-start justify-between gap-3",
+					children: [/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-3 min-w-0",
+						children: [/* @__PURE__ */ u("div", {
+							className: "w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0",
+							children: /* @__PURE__ */ u(n, { className: "w-5 h-5 text-primary" })
+						}), /* @__PURE__ */ d("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ d("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ u("h3", {
+										className: "font-semibold text-foreground truncate",
+										children: p.name
+									}),
+									m && /* @__PURE__ */ u("span", {
+										className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary",
+										children: S("billing.overview.default", "Default")
+									}),
+									h && /* @__PURE__ */ u("span", {
+										className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary",
+										children: /* @__PURE__ */ u(i, { className: "w-3 h-3 text-primary-foreground" })
+									})
+								]
+							}), /* @__PURE__ */ d("p", {
+								className: "text-sm text-muted-foreground truncate flex items-center gap-1",
+								children: [/* @__PURE__ */ u(l, { className: "w-3.5 h-3.5" }), p.email]
+							})]
+						})]
+					}), _ && /* @__PURE__ */ u("button", {
+						onClick: (e) => {
+							e.stopPropagation(), _();
+						},
+						className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+						"aria-label": "Edit billing account",
+						children: /* @__PURE__ */ u(c, { className: "w-4 h-4" })
+					})]
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "p-4 space-y-4",
+				children: [/* @__PURE__ */ d("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ d("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ u("p", {
+							className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+							children: "Credit Balance"
+						}), /* @__PURE__ */ d("p", {
+							className: "text-lg font-semibold text-foreground flex items-center gap-1.5",
+							children: [
+								/* @__PURE__ */ u(o, { className: `w-4 h-4 ${e.warning.icon}` }),
+								(p.creditAmount || 0).toLocaleString(),
+								" Credits"
+							]
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ u("p", {
+							className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+							children: "Payment Currency"
+						}), /* @__PURE__ */ d("p", {
+							className: "text-lg font-semibold text-foreground flex items-center gap-1.5",
+							children: [/* @__PURE__ */ u(s, { className: "w-4 h-4 text-primary" }), p.currency || "USD"]
+						})]
+					})]
+				}), /* @__PURE__ */ u("div", {
+					className: "pt-3 border-t border-border",
+					children: /* @__PURE__ */ d("p", {
+						className: "text-xs text-muted-foreground flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ u(r, { className: "w-3.5 h-3.5" }),
+							"Created ",
+							((e) => new Date(e).toLocaleDateString("en-US", {
+								year: "numeric",
+								month: "short",
+								day: "numeric"
+							}))(p.createdAt)
+						]
+					})
+				})]
+			}),
+			(v || y) && /* @__PURE__ */ u("footer", {
+				className: "px-4 py-3 border-t border-border bg-muted/30 rounded-b-lg",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2",
+					children: [v && /* @__PURE__ */ d("button", {
+						onClick: (e) => {
+							e.stopPropagation(), v();
+						},
+						className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+						children: ["Transactions", /* @__PURE__ */ u(a, { className: "w-4 h-4" })]
+					}), y && /* @__PURE__ */ d("button", {
+						onClick: (e) => {
+							e.stopPropagation(), y();
+						},
+						className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+						children: ["Credit History", /* @__PURE__ */ u(a, { className: "w-4 h-4" })]
+					})]
+				})
+			}),
+			!p.isActive && /* @__PURE__ */ u("div", {
+				className: "absolute inset-0 bg-background/60 backdrop-blur-sm rounded-lg flex items-center justify-center",
+				children: /* @__PURE__ */ u("span", {
+					className: "px-3 py-1.5 rounded-full bg-destructive/10 text-destructive text-sm font-medium",
+					children: "Inactive"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { p as BillingAccountCard };
+
+//# sourceMappingURL=BillingAccountCard.js.map