@burdenoff/microfe-billing 2026.625.4 → 2026.625.5

package/dist/billing/modules/billing/pages/PaymentMethodsPage.js

@@ -1,24 +1,24 @@
 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 { EmptyState as r } from "../../../shared/components/EmptyState.js";
 import "../../../shared/components/index.js";
-import { useBillingEventEmitter as i } from "../../../hooks/useBillingEventEmitter.js";
-import { useBillingPermissions as a } from "../../../hooks/useBillingPermissions.js";
-import { useDefaultDashboardAccount as o } from "../../dashboard/hooks/useDashboard.js";
+import { useBillingEventEmitter as r } from "../../../hooks/useBillingEventEmitter.js";
+import { useBillingPermissions as i } from "../../../hooks/useBillingPermissions.js";
+import { useDefaultDashboardAccount as a } from "../../dashboard/hooks/useDashboard.js";
 import "../../dashboard/hooks/index.js";
-import { AddPaymentMethodModal as s } from "../../dashboard/components/AddPaymentMethodModal.js";
-import { useCallback as c, useEffect as l, useState as u } from "react";
-import { useLocation as d } from "react-router-dom";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AddPaymentMethodModal as o } from "../../dashboard/components/AddPaymentMethodModal.js";
+import { useCallback as s, useEffect as c, useState as l } from "react";
+import { useLocation as u } from "react-router-dom";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { IllustratedEmptyState as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/billing/pages/PaymentMethodsPage.tsx
-var h = {
+var g = {
 	visa: "💳",
 	mastercard: "💳",
 	amex: "💳",
 	default: "💳"
-}, g = {
+}, _ = {
 	CREDIT_CARD: "Credit Card",
 	DEBIT_CARD: "Debit Card",
 	WALLET: "Digital Wallet",
@@ -26,109 +26,99 @@ var h = {
 	BANK_TRANSFER: "Bank Transfer",
 	PAYPAL: "PayPal",
 	CRYPTO: "Cryptocurrency"
-}, _ = () => {
-	let { t: h } = m(), g = (e, t) => {
-		let n = h(e);
+}, v = () => {
+	let { t: g } = p(), _ = (e, t) => {
+		let n = g(e);
 		return n === e ? t : n;
-	}, _ = a(), { emit: y } = i(), { navigate: b, basePath: x } = e(), { pathname: S } = d(), { billingAccount: C, paymentMethods: w, isLoading: T } = o(), [E, D] = u(!1), O = c((e) => x && x !== "/" ? `${x.endsWith("/") ? x.slice(0, -1) : x}/${e}` : `/${e}`, [x]), k = c(() => {
-		b(O("payment-methods/add"));
-	}, [b, O]);
-	return l(() => {
-		S.replace(/\/+$/, "").endsWith("/payment-methods/add") && D(!0);
-	}, [S]), _.canViewPaymentMethods ? T ? /* @__PURE__ */ p("div", {
+	}, v = i(), { emit: b } = r(), { navigate: x, basePath: S } = e(), { pathname: C } = u(), { billingAccount: w, paymentMethods: T, isLoading: E } = a(), [D, O] = l(!1), k = s((e) => S && S !== "/" ? `${S.endsWith("/") ? S.slice(0, -1) : S}/${e}` : `/${e}`, [S]), A = s(() => {
+		x(k("payment-methods/add"));
+	}, [x, k]);
+	return c(() => {
+		C.replace(/\/+$/, "").endsWith("/payment-methods/add") && O(!0);
+	}, [C]), v.canViewPaymentMethods ? E ? /* @__PURE__ */ f("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ f("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", {
 			className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
 			children: [
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ f("div", { className: "h-32 bg-bg-sunken animate-pulse rounded-lg" }, e))
+			].map((e) => /* @__PURE__ */ d("div", { className: "h-32 bg-bg-sunken animate-pulse rounded-lg" }, e))
 		})]
-	}) : /* @__PURE__ */ p("div", {
+	}) : /* @__PURE__ */ f("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ f(n, {
-				title: g("billing.paymentMethods.title", "Payment Methods"),
-				description: g("billing.paymentMethods.subtitle", "Manage your saved payment methods"),
-				actions: _.canManagePaymentMethods && /* @__PURE__ */ f("button", {
+			/* @__PURE__ */ d(n, {
+				title: _("billing.paymentMethods.title", "Payment Methods"),
+				description: _("billing.paymentMethods.subtitle", "Manage your saved payment methods"),
+				actions: v.canManagePaymentMethods && /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: k,
+					onClick: A,
 					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors",
-					children: g("billing.paymentMethods.add", "Add payment method")
+					children: _("billing.paymentMethods.add", "Add payment method")
 				})
 			}),
-			w.length === 0 ? /* @__PURE__ */ f(r, {
-				icon: /* @__PURE__ */ f("svg", {
-					className: "size-6 text-text-secondary",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					stroke: "currentColor",
-					children: /* @__PURE__ */ f("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: 2,
-						d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-					})
-				}),
-				title: g("billing.paymentMethods.noPaymentMethods", "No payment methods"),
-				description: g("billing.paymentMethods.noPaymentMethodsDesc", "Add a payment method to make purchases and manage subscriptions."),
-				action: _.canManagePaymentMethods && /* @__PURE__ */ f("button", {
+			/* @__PURE__ */ d(h, { children: _("billing.paymentMethods.purpose", "Save and manage the cards and payment options used to pay invoices, subscriptions and one-off purchases. Add a method, mark one as default for automatic billing, or remove ones you no longer use.") }),
+			T.length === 0 ? /* @__PURE__ */ d(m, {
+				illustration: "empty-generic",
+				title: _("billing.paymentMethods.noPaymentMethods", "No payment methods"),
+				description: _("billing.paymentMethods.noPaymentMethodsDesc", "Add a payment method to make purchases and manage subscriptions."),
+				action: v.canManagePaymentMethods ? /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => D(!0),
+					onClick: () => O(!0),
 					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90",
 					children: "Add Payment Method"
-				})
-			}) : /* @__PURE__ */ f("div", {
+				}) : void 0
+			}) : /* @__PURE__ */ d("div", {
 				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-				children: w.map((e) => /* @__PURE__ */ f(v, {
+				children: T.map((e) => /* @__PURE__ */ d(y, {
 					method: e,
-					canManage: _.canManagePaymentMethods
+					canManage: v.canManagePaymentMethods
 				}, e.id))
 			}),
-			/* @__PURE__ */ f(s, {
-				isOpen: E,
+			/* @__PURE__ */ d(o, {
+				isOpen: D,
 				onClose: () => {
-					D(!1), S.replace(/\/+$/, "").endsWith("/payment-methods/add") && b(O("payment-methods"));
+					O(!1), C.replace(/\/+$/, "").endsWith("/payment-methods/add") && x(k("payment-methods"));
 				},
-				billingAccountId: C?.id ?? "",
-				currency: C?.currency ?? "USD",
-				country: C?.billingAddresses?.[0]?.country ?? void 0,
+				billingAccountId: w?.id ?? "",
+				currency: w?.currency ?? "USD",
+				country: w?.billingAddresses?.[0]?.country ?? void 0,
 				onSuccess: () => {
-					y("billing.payment_method.added", {
+					b("billing.payment_method.added", {
 						route: "/billing/payment-methods",
-						entityId: C?.id,
+						entityId: w?.id,
 						source: "payment-methods"
-					}), D(!1), S.replace(/\/+$/, "").endsWith("/payment-methods/add") && b(O("payment-methods"));
+					}), O(!1), C.replace(/\/+$/, "").endsWith("/payment-methods/add") && x(k("payment-methods"));
 				}
 			})
 		]
-	}) : /* @__PURE__ */ f(t, { message: g("billing.paymentMethods.noViewPermission", "You don't have permission to view payment methods.") });
-}, v = ({ method: e, canManage: t }) => {
+	}) : /* @__PURE__ */ d(t, { message: _("billing.paymentMethods.noViewPermission", "You don't have permission to view payment methods.") });
+}, y = ({ method: e, canManage: t }) => {
 	let n = e.expiryYear && e.expiryMonth ? new Date(e.expiryYear, e.expiryMonth - 1) < /* @__PURE__ */ new Date() : !1;
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ f("div", {
 		className: `border rounded-lg bg-bg-surface p-4 ${e.isDefault ? "border-primary" : "border-border-subtle"}`,
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ d("div", {
 			className: "flex items-start justify-between",
-			children: /* @__PURE__ */ p("div", {
+			children: /* @__PURE__ */ f("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ f("span", {
+				children: [/* @__PURE__ */ d("span", {
 					className: "text-2xl",
-					children: h[e.brand?.toLowerCase() ?? "default"]
-				}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
+					children: g[e.brand?.toLowerCase() ?? "default"]
+				}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ p("p", {
+					children: [/* @__PURE__ */ f("p", {
 						className: "font-medium text-text-primary",
 						children: [
-							e.brand ?? g[e.type],
+							e.brand ?? _[e.type],
 							" •••• ",
 							e.last4
 						]
-					}), e.isDefault && /* @__PURE__ */ f("span", {
+					}), e.isDefault && /* @__PURE__ */ d("span", {
 						className: "px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-primary rounded",
 						children: "Default"
 					})]
-				}), e.expiryMonth && e.expiryYear && /* @__PURE__ */ p("p", {
+				}), e.expiryMonth && e.expiryYear && /* @__PURE__ */ f("p", {
 					className: `text-sm ${n ? "text-status-error-text" : "text-text-secondary"}`,
 					children: [
 						n ? "Expired" : "Expires",
@@ -139,13 +129,13 @@ var h = {
 					]
 				})] })]
 			})
-		}), t && /* @__PURE__ */ p("div", {
+		}), t && /* @__PURE__ */ f("div", {
 			className: "flex items-center gap-2 mt-4 pt-4 border-t border-border-subtle",
-			children: [!e.isDefault && /* @__PURE__ */ f("button", {
+			children: [!e.isDefault && /* @__PURE__ */ d("button", {
 				type: "button",
 				className: "text-sm text-primary hover:underline",
 				children: "Set as default"
-			}), /* @__PURE__ */ f("button", {
+			}), /* @__PURE__ */ d("button", {
 				type: "button",
 				className: "text-sm text-status-error-text hover:underline ml-auto",
 				children: "Remove"
@@ -154,6 +144,6 @@ var h = {
 	});
 };
 //#endregion
-export { _ as PaymentMethodsPage };
+export { v as PaymentMethodsPage };
 
 //# sourceMappingURL=PaymentMethodsPage.js.map

package/dist/billing/modules/billing/pages/PaymentMethodsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/PaymentMethodsPage.tsx"],"sourcesContent":["/**\n * Billing Module - Payment Methods Page\n * Displays and manages payment methods\n */\n\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useDefaultDashboardAccount } from '../../dashboard/hooks';\nimport { AccessDenied, PageHeader, EmptyState } from '../../../shared/components';\nimport { AddPaymentMethodModal } from '../../dashboard/components/AddPaymentMethodModal';\nimport type { PaymentMethod, PaymentMethodType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst CARD_ICONS: Record<string, string> = {\n  visa: '💳',\n  mastercard: '💳',\n  amex: '💳',\n  default: '💳',\n};\n\nconst METHOD_TYPE_LABELS: Record<PaymentMethodType, string> = {\n  CREDIT_CARD: 'Credit Card',\n  DEBIT_CARD: 'Debit Card',\n  WALLET: 'Digital Wallet',\n  NETBANKING: 'Net Banking',\n  BANK_TRANSFER: 'Bank Transfer',\n  PAYPAL: 'PayPal',\n  CRYPTO: 'Cryptocurrency',\n};\n\nexport const PaymentMethodsPage: FC = () => {\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 permissions = useBillingPermissions();\n  const { emit } = useBillingEventEmitter();\n  const { navigate, basePath } = useBilling();\n  const { pathname } = useLocation();\n  const { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n  const [showAddModal, setShowAddModal] = useState(false);\n\n  // basePath-aware path join, mirroring OverviewPage's navigateTo helper.\n  const toFullPath = useCallback(\n    (path: string) => {\n      if (basePath && basePath !== '/') {\n        const base = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n        return `${base}/${path}`;\n      }\n      return `/${path}`;\n    },\n    [basePath]\n  );\n\n  // Navigate (basePath-aware) to the dedicated add-payment-method route.\n  const navigateToAdd = useCallback(() => {\n    navigate(toFullPath('payment-methods/add'));\n  }, [navigate, toFullPath]);\n\n  // The /payment-methods/add route renders this same page; open the add modal\n  // automatically when landing there so the route is actually functional.\n  useEffect(() => {\n    if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n      setShowAddModal(true);\n    }\n  }, [pathname]);\n\n  if (!permissions.canViewPaymentMethods) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.paymentMethods.noViewPermission',\n          \"You don't have permission to view payment methods.\"\n        )}\n      />\n    );\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"h-32 bg-bg-sunken animate-pulse rounded-lg\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.paymentMethods.title', 'Payment Methods')}\n        description={tr('billing.paymentMethods.subtitle', 'Manage your saved payment methods')}\n        actions={\n          permissions.canManagePaymentMethods && (\n            <button\n              type=\"button\"\n              onClick={navigateToAdd}\n              className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n            >\n              {tr('billing.paymentMethods.add', 'Add payment method')}\n            </button>\n          )\n        }\n      />\n\n      {/* Payment Methods List */}\n      {paymentMethods.length === 0 ? (\n        <EmptyState\n          icon={\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          }\n          title={tr('billing.paymentMethods.noPaymentMethods', 'No payment methods')}\n          description={tr(\n            'billing.paymentMethods.noPaymentMethodsDesc',\n            'Add a payment method to make purchases and manage subscriptions.'\n          )}\n          action={\n            permissions.canManagePaymentMethods && (\n              <button\n                type=\"button\"\n                onClick={() => setShowAddModal(true)}\n                className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90\"\n              >\n                Add Payment Method\n              </button>\n            )\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {paymentMethods.map((method) => (\n            <PaymentMethodCard\n              key={method.id}\n              method={method}\n              canManage={permissions.canManagePaymentMethods}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Add Payment Method Modal (Stripe + Razorpay) */}\n      <AddPaymentMethodModal\n        isOpen={showAddModal}\n        onClose={() => {\n          setShowAddModal(false);\n          // If we arrived via the /add route, return to the list URL.\n          if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n            navigate(toFullPath('payment-methods'));\n          }\n        }}\n        billingAccountId={billingAccount?.id ?? ''}\n        currency={billingAccount?.currency ?? 'USD'}\n        country={billingAccount?.billingAddresses?.[0]?.country ?? undefined}\n        onSuccess={() => {\n          emit('billing.payment_method.added', {\n            route: '/billing/payment-methods',\n            entityId: billingAccount?.id,\n            source: 'payment-methods',\n          });\n          // Refetch billing account to get updated payment methods\n          setShowAddModal(false);\n          if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n            navigate(toFullPath('payment-methods'));\n          }\n        }}\n      />\n    </div>\n  );\n};\n\n// ============================================================================\n// Payment Method Card Component\n// ============================================================================\n\ninterface PaymentMethodCardProps {\n  method: PaymentMethod;\n  canManage: boolean;\n}\n\nconst PaymentMethodCard: FC<PaymentMethodCardProps> = ({ method, canManage }) => {\n  const isExpired =\n    method.expiryYear && method.expiryMonth\n      ? new Date(method.expiryYear, method.expiryMonth - 1) < new Date()\n      : false;\n\n  return (\n    <div\n      className={`border rounded-lg bg-bg-surface p-4 ${\n        method.isDefault ? 'border-primary' : 'border-border-subtle'\n      }`}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"text-2xl\">{CARD_ICONS[method.brand?.toLowerCase() ?? 'default']}</span>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium text-text-primary\">\n                {method.brand ?? METHOD_TYPE_LABELS[method.type]} •••• {method.last4}\n              </p>\n              {method.isDefault && (\n                <span className=\"px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-primary rounded\">\n                  Default\n                </span>\n              )}\n            </div>\n            {method.expiryMonth && method.expiryYear && (\n              <p\n                className={`text-sm ${isExpired ? 'text-status-error-text' : 'text-text-secondary'}`}\n              >\n                {isExpired ? 'Expired' : 'Expires'} {method.expiryMonth}/{method.expiryYear}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {canManage && (\n        <div className=\"flex items-center gap-2 mt-4 pt-4 border-t border-border-subtle\">\n          {!method.isDefault && (\n            <button type=\"button\" className=\"text-sm text-primary hover:underline\">\n              Set as default\n            </button>\n          )}\n          <button type=\"button\" className=\"text-sm text-status-error-text hover:underline ml-auto\">\n            Remove\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/PaymentMethodsPage.tsx"],"sourcesContent":["/**\n * Billing Module - Payment Methods Page\n * Displays and manages payment methods\n */\n\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useDefaultDashboardAccount } from '../../dashboard/hooks';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { AddPaymentMethodModal } from '../../dashboard/components/AddPaymentMethodModal';\nimport type { PaymentMethod, PaymentMethodType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\n\nconst CARD_ICONS: Record<string, string> = {\n  visa: '💳',\n  mastercard: '💳',\n  amex: '💳',\n  default: '💳',\n};\n\nconst METHOD_TYPE_LABELS: Record<PaymentMethodType, string> = {\n  CREDIT_CARD: 'Credit Card',\n  DEBIT_CARD: 'Debit Card',\n  WALLET: 'Digital Wallet',\n  NETBANKING: 'Net Banking',\n  BANK_TRANSFER: 'Bank Transfer',\n  PAYPAL: 'PayPal',\n  CRYPTO: 'Cryptocurrency',\n};\n\nexport const PaymentMethodsPage: FC = () => {\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 permissions = useBillingPermissions();\n  const { emit } = useBillingEventEmitter();\n  const { navigate, basePath } = useBilling();\n  const { pathname } = useLocation();\n  const { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n  const [showAddModal, setShowAddModal] = useState(false);\n\n  // basePath-aware path join, mirroring OverviewPage's navigateTo helper.\n  const toFullPath = useCallback(\n    (path: string) => {\n      if (basePath && basePath !== '/') {\n        const base = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n        return `${base}/${path}`;\n      }\n      return `/${path}`;\n    },\n    [basePath]\n  );\n\n  // Navigate (basePath-aware) to the dedicated add-payment-method route.\n  const navigateToAdd = useCallback(() => {\n    navigate(toFullPath('payment-methods/add'));\n  }, [navigate, toFullPath]);\n\n  // The /payment-methods/add route renders this same page; open the add modal\n  // automatically when landing there so the route is actually functional.\n  useEffect(() => {\n    if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n      setShowAddModal(true);\n    }\n  }, [pathname]);\n\n  if (!permissions.canViewPaymentMethods) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.paymentMethods.noViewPermission',\n          \"You don't have permission to view payment methods.\"\n        )}\n      />\n    );\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"h-32 bg-bg-sunken animate-pulse rounded-lg\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.paymentMethods.title', 'Payment Methods')}\n        description={tr('billing.paymentMethods.subtitle', 'Manage your saved payment methods')}\n        actions={\n          permissions.canManagePaymentMethods && (\n            <button\n              type=\"button\"\n              onClick={navigateToAdd}\n              className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n            >\n              {tr('billing.paymentMethods.add', 'Add payment method')}\n            </button>\n          )\n        }\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.paymentMethods.purpose',\n          'Save and manage the cards and payment options used to pay invoices, subscriptions and one-off purchases. Add a method, mark one as default for automatic billing, or remove ones you no longer use.'\n        )}\n      </PagePurpose>\n\n      {/* Payment Methods List */}\n      {paymentMethods.length === 0 ? (\n        <IllustratedEmptyState\n          illustration=\"empty-generic\"\n          title={tr('billing.paymentMethods.noPaymentMethods', 'No payment methods')}\n          description={tr(\n            'billing.paymentMethods.noPaymentMethodsDesc',\n            'Add a payment method to make purchases and manage subscriptions.'\n          )}\n          action={\n            permissions.canManagePaymentMethods ? (\n              <button\n                type=\"button\"\n                onClick={() => setShowAddModal(true)}\n                className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90\"\n              >\n                Add Payment Method\n              </button>\n            ) : undefined\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {paymentMethods.map((method) => (\n            <PaymentMethodCard\n              key={method.id}\n              method={method}\n              canManage={permissions.canManagePaymentMethods}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Add Payment Method Modal (Stripe + Razorpay) */}\n      <AddPaymentMethodModal\n        isOpen={showAddModal}\n        onClose={() => {\n          setShowAddModal(false);\n          // If we arrived via the /add route, return to the list URL.\n          if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n            navigate(toFullPath('payment-methods'));\n          }\n        }}\n        billingAccountId={billingAccount?.id ?? ''}\n        currency={billingAccount?.currency ?? 'USD'}\n        country={billingAccount?.billingAddresses?.[0]?.country ?? undefined}\n        onSuccess={() => {\n          emit('billing.payment_method.added', {\n            route: '/billing/payment-methods',\n            entityId: billingAccount?.id,\n            source: 'payment-methods',\n          });\n          // Refetch billing account to get updated payment methods\n          setShowAddModal(false);\n          if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n            navigate(toFullPath('payment-methods'));\n          }\n        }}\n      />\n    </div>\n  );\n};\n\n// ============================================================================\n// Payment Method Card Component\n// ============================================================================\n\ninterface PaymentMethodCardProps {\n  method: PaymentMethod;\n  canManage: boolean;\n}\n\nconst PaymentMethodCard: FC<PaymentMethodCardProps> = ({ method, canManage }) => {\n  const isExpired =\n    method.expiryYear && method.expiryMonth\n      ? new Date(method.expiryYear, method.expiryMonth - 1) < new Date()\n      : false;\n\n  return (\n    <div\n      className={`border rounded-lg bg-bg-surface p-4 ${\n        method.isDefault ? 'border-primary' : 'border-border-subtle'\n      }`}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"text-2xl\">{CARD_ICONS[method.brand?.toLowerCase() ?? 'default']}</span>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium text-text-primary\">\n                {method.brand ?? METHOD_TYPE_LABELS[method.type]} •••• {method.last4}\n              </p>\n              {method.isDefault && (\n                <span className=\"px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-primary rounded\">\n                  Default\n                </span>\n              )}\n            </div>\n            {method.expiryMonth && method.expiryYear && (\n              <p\n                className={`text-sm ${isExpired ? 'text-status-error-text' : 'text-text-secondary'}`}\n              >\n                {isExpired ? 'Expired' : 'Expires'} {method.expiryMonth}/{method.expiryYear}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {canManage && (\n        <div className=\"flex items-center gap-2 mt-4 pt-4 border-t border-border-subtle\">\n          {!method.isDefault && (\n            <button type=\"button\" className=\"text-sm text-primary hover:underline\">\n              Set as default\n            </button>\n          )}\n          <button type=\"button\" className=\"text-sm text-status-error-text hover:underline ml-auto\">\n            Remove\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}