@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,147 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import { EmptyState as n } from "../../../shared/components/EmptyState.js";
+import "../../../shared/components/index.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 o } from "../../dashboard/components/AddPaymentMethodModal.js";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/billing/pages/PaymentMethodsPage.tsx
+var d = {
+	visa: "💳",
+	mastercard: "💳",
+	amex: "💳",
+	default: "💳"
+}, f = {
+	CREDIT_CARD: "Credit Card",
+	DEBIT_CARD: "Debit Card",
+	WALLET: "Digital Wallet",
+	NETBANKING: "Net Banking",
+	BANK_TRANSFER: "Bank Transfer",
+	PAYPAL: "PayPal",
+	CRYPTO: "Cryptocurrency"
+}, p = () => {
+	let { t: d } = u(), f = (e, t) => {
+		let n = d(e);
+		return n === e ? t : n;
+	}, p = i(), { emit: h } = r(), { billingAccount: g, paymentMethods: _, isLoading: v } = a(), [y, b] = s(!1);
+	return p.canViewPaymentMethods ? v ? /* @__PURE__ */ l("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ c("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ c("div", {
+			className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+			children: [
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ c("div", { className: "h-32 bg-muted animate-pulse rounded-lg" }, e))
+		})]
+	}) : /* @__PURE__ */ l("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ c(t, {
+				title: f("billing.paymentMethods.title", "Payment Methods"),
+				description: f("billing.paymentMethods.subtitle", "Manage your saved payment methods"),
+				actions: p.canManagePaymentMethods && /* @__PURE__ */ c("button", {
+					onClick: () => b(!0),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Add Payment Method"
+				})
+			}),
+			_.length === 0 ? /* @__PURE__ */ c(n, {
+				icon: /* @__PURE__ */ c("svg", {
+					className: "w-6 h-6 text-muted-foreground",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ c("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: f("billing.paymentMethods.noPaymentMethods", "No payment methods"),
+				description: f("billing.paymentMethods.noPaymentMethodsDesc", "Add a payment method to make purchases and manage subscriptions."),
+				action: p.canManagePaymentMethods && /* @__PURE__ */ c("button", {
+					onClick: () => b(!0),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90",
+					children: "Add Payment Method"
+				})
+			}) : /* @__PURE__ */ c("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+				children: _.map((e) => /* @__PURE__ */ c(m, {
+					method: e,
+					canManage: p.canManagePaymentMethods
+				}, e.id))
+			}),
+			/* @__PURE__ */ c(o, {
+				isOpen: y,
+				onClose: () => b(!1),
+				billingAccountId: g?.id ?? "",
+				currency: g?.currency ?? "USD",
+				country: g?.billingAddresses?.[0]?.country ?? void 0,
+				onSuccess: () => {
+					h("billing.payment_method.added", {
+						route: "/billing/payment-methods",
+						entityId: g?.id,
+						source: "payment-methods"
+					}), b(!1);
+				}
+			})
+		]
+	}) : /* @__PURE__ */ c(e, { message: f("billing.paymentMethods.noViewPermission", "You don't have permission to view payment methods.") });
+}, m = ({ method: e, canManage: t }) => {
+	let n = e.expiryYear && e.expiryMonth ? new Date(e.expiryYear, e.expiryMonth - 1) < /* @__PURE__ */ new Date() : !1;
+	return /* @__PURE__ */ l("div", {
+		className: `border rounded-lg bg-card p-4 ${e.isDefault ? "border-primary" : "border-border"}`,
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex items-start justify-between",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ c("span", {
+					className: "text-2xl",
+					children: d[e.brand?.toLowerCase() ?? "default"]
+				}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ l("p", {
+						className: "font-medium text-foreground",
+						children: [
+							e.brand ?? f[e.type],
+							" •••• ",
+							e.last4
+						]
+					}), e.isDefault && /* @__PURE__ */ c("span", {
+						className: "px-1.5 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded",
+						children: "Default"
+					})]
+				}), e.expiryMonth && e.expiryYear && /* @__PURE__ */ l("p", {
+					className: `text-sm ${n ? "text-status-error-text" : "text-muted-foreground"}`,
+					children: [
+						n ? "Expired" : "Expires",
+						" ",
+						e.expiryMonth,
+						"/",
+						e.expiryYear
+					]
+				})] })]
+			})
+		}), t && /* @__PURE__ */ l("div", {
+			className: "flex items-center gap-2 mt-4 pt-4 border-t border-border",
+			children: [!e.isDefault && /* @__PURE__ */ c("button", {
+				className: "text-sm text-primary hover:underline",
+				children: "Set as default"
+			}), /* @__PURE__ */ c("button", {
+				className: "text-sm text-status-error-text hover:underline ml-auto",
+				children: "Remove"
+			})]
+		})]
+	});
+};
+//#endregion
+export { p as PaymentMethodsPage };
+
+//# sourceMappingURL=PaymentMethodsPage.js.map

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

@@ -0,0 +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 { useState, type FC } from 'react';\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 { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n  const [showAddModal, setShowAddModal] = useState(false);\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-muted 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-muted 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              onClick={() => setShowAddModal(true)}\n              className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n            >\n              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=\"w-6 h-6 text-muted-foreground\"\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                onClick={() => setShowAddModal(true)}\n                className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/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={() => setShowAddModal(false)}\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        }}\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-card p-4 ${\n        method.isDefault ? 'border-primary' : 'border-border'\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-foreground\">\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-primary/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-muted-foreground'}`}\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\">\n          {!method.isDefault && (\n            <button className=\"text-sm text-primary hover:underline\">Set as default</button>\n          )}\n          <button className=\"text-sm text-status-error-text hover:underline ml-auto\">Remove</button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/billing/pages/RefundsPage.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const RefundsPage: FC;
+//# sourceMappingURL=RefundsPage.d.ts.map

package/dist/billing/modules/billing/pages/RefundsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefundsPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/billing/pages/RefundsPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAwxBnF,eAAO,MAAM,WAAW,EAAE,EA2hBzB,CAAC"}