@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/checkout/components/RazorpayPaymentButton.js

@@ -0,0 +1,169 @@
+import { getPaymentProviderThemeColor as e } from "../../../shared/utils/paymentTheme.js";
+import "../../../shared/utils/index.js";
+import { useCallback as t, useEffect as n, useState as r } from "react";
+import { AlertCircle as i, Check as a, CreditCard as o, Loader2 as s, Lock as c, Smartphone as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/checkout/components/RazorpayPaymentButton.tsx
+var m = ({ orderId: m, keyId: h, amount: g, currency: _, name: v = "Burdenoff", description: y = "Purchase", customerId: b, prefill: x, notes: S, onSuccess: C, onError: w, onCancel: T, disabled: E = !1 }) => {
+	let { t: D } = p(), O = (e, t) => {
+		let n = D(e);
+		return n === e ? t : n;
+	}, [k, A] = r("idle"), [j, M] = r(null), [N, P] = r(!1);
+	n(() => {
+		if (typeof window < "u" && !window.Razorpay) {
+			let e = document.createElement("script");
+			e.src = "https://checkout.razorpay.com/v1/checkout.js", e.async = !0, e.onload = () => {
+				P(!0);
+			}, e.onerror = () => {
+				M("Failed to load payment gateway");
+			}, document.body.appendChild(e);
+		} else window.Razorpay && P(!0);
+	}, []);
+	let F = t(() => {
+		if (!N || !window.Razorpay) {
+			M("Payment gateway not ready");
+			return;
+		}
+		A("processing"), M(null);
+		let t = {
+			key: h,
+			amount: g,
+			currency: _.toUpperCase(),
+			name: v,
+			description: y,
+			order_id: m,
+			prefill: x || {},
+			notes: S || {},
+			handler: (e) => {
+				A("success"), C(e);
+			},
+			modal: {
+				ondismiss: () => {
+					A("idle"), T?.();
+				},
+				escape: !0,
+				confirm_close: !0
+			}
+		}, n = e();
+		n && (t.theme = { color: n }), b && (t.customer_id = b, t.remember_customer = !0);
+		try {
+			let e = window.Razorpay;
+			if (!e) throw Error("Payment gateway not ready");
+			let n = new e(t);
+			n.on("payment.failed", (e) => {
+				let t = e, n = t?.error?.description || t?.error?.reason || "Payment failed";
+				M(n), A("error"), w(n);
+			}), n.open();
+		} catch (e) {
+			let t = e instanceof Error ? e.message : "Failed to open payment gateway";
+			M(t), A("error"), w(t);
+		}
+	}, [
+		N,
+		h,
+		g,
+		_,
+		v,
+		y,
+		b,
+		m,
+		x,
+		S,
+		C,
+		w,
+		T
+	]), I = (g / 100).toLocaleString("en-IN", {
+		style: "currency",
+		currency: "INR"
+	});
+	return k === "success" ? /* @__PURE__ */ d("div", {
+		className: "p-6 rounded-lg border border-border-subtle bg-status-success-bg-subtle",
+		children: /* @__PURE__ */ f("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ d("div", {
+				className: "p-2 rounded-full bg-status-success-bg-subtle text-status-success-text",
+				children: /* @__PURE__ */ d(a, { className: "h-6 w-6" })
+			}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h3", {
+				className: "font-semibold text-status-success-text",
+				children: "Payment Successful!"
+			}), /* @__PURE__ */ d("p", {
+				className: "text-sm text-status-success-text",
+				children: "Your payment has been processed successfully."
+			})] })]
+		})
+	}) : /* @__PURE__ */ f("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ d(o, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ d(l, { className: "h-4 w-4 text-muted-foreground" })]
+					}), /* @__PURE__ */ d("span", {
+						className: "font-medium text-foreground",
+						children: "Razorpay Payment"
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "flex items-center gap-1 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ d(c, { className: "h-3 w-3" }), "Secured by Razorpay"]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "p-4 rounded-lg border border-border bg-muted/30",
+				children: [/* @__PURE__ */ d("p", {
+					className: "text-sm text-muted-foreground mb-3",
+					children: "Pay using any of these methods:"
+				}), /* @__PURE__ */ d("div", {
+					className: "grid grid-cols-2 sm:grid-cols-4 gap-2",
+					children: [
+						"UPI",
+						"Cards",
+						"Netbanking",
+						"Wallets"
+					].map((e) => /* @__PURE__ */ d("div", {
+						className: "px-3 py-2 rounded border border-border bg-background text-center text-sm text-foreground",
+						children: e
+					}, e))
+				})]
+			}),
+			j && /* @__PURE__ */ f("div", {
+				className: "flex items-center gap-2 p-3 rounded-lg bg-destructive/10 text-destructive text-sm",
+				children: [/* @__PURE__ */ d(i, { className: "h-4 w-4 shrink-0" }), j]
+			}),
+			!N && /* @__PURE__ */ f("div", {
+				className: "flex items-center justify-center gap-2 py-4 text-muted-foreground",
+				children: [/* @__PURE__ */ d(s, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ d("span", {
+					className: "text-sm",
+					children: O("billing.checkout.loadingGateway", "Loading payment gateway...")
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex gap-3",
+				children: [T && /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: T,
+					disabled: k === "processing" || E,
+					className: "flex-1 px-4 py-3 rounded-lg border border-border text-foreground font-medium\n              hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+					children: "Cancel"
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: F,
+					disabled: !N || k === "processing" || E,
+					className: "flex-1 px-4 py-3 rounded-lg bg-action-primary-bg text-action-primary-text font-medium\n            hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\n            flex items-center justify-center gap-2",
+					children: k === "processing" ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(s, { className: "h-4 w-4 animate-spin" }), "Processing..."] }) : /* @__PURE__ */ f(u, { children: ["Pay ", I] })
+				})]
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "text-center text-xs text-muted-foreground",
+				children: "Your payment is secured with 256-bit encryption. Powered by Razorpay."
+			})
+		]
+	});
+};
+//#endregion
+export { m as RazorpayPaymentButton };
+
+//# sourceMappingURL=RazorpayPaymentButton.js.map

package/dist/billing/modules/checkout/components/RazorpayPaymentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RazorpayPaymentButton.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/RazorpayPaymentButton.tsx"],"sourcesContent":["/**\n * {tr('billing.checkout.razorpayPayment', 'Razorpay Payment')} Button Component\n * Integrates with Razorpay checkout for INR payments\n */\n\nimport { type FC, useState, useCallback, useEffect } from 'react';\nimport { CreditCard, Lock, Loader2, Check, AlertCircle, Smartphone } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type {\n  RazorpaySuccessResponse,\n  CheckoutRazorpayOptions,\n  CheckoutRazorpayInstance,\n} from '../types';\nimport { getPaymentProviderThemeColor } from '../../../shared/utils';\n\ntype RazorpayCheckoutOptions = CheckoutRazorpayOptions & {\n  customer_id?: string;\n  remember_customer?: boolean;\n  handler: (response: RazorpaySuccessResponse) => void;\n};\n\ninterface RazorpayPaymentButtonProps {\n  orderId: string;\n  keyId: string;\n  amount: number; // In paise (smallest currency unit)\n  currency: string;\n  name?: string;\n  description?: string;\n  customerId?: string; // Razorpay customer ID for saved cards\n  prefill?: {\n    name?: string;\n    email?: string;\n    contact?: string;\n  };\n  notes?: Record<string, string>;\n  onSuccess: (response: RazorpaySuccessResponse) => void;\n  onError: (error: string) => void;\n  onCancel?: () => void;\n  disabled?: boolean;\n}\n\ntype PaymentState = 'idle' | 'loading' | 'processing' | 'success' | 'error';\n\nexport const RazorpayPaymentButton: FC<RazorpayPaymentButtonProps> = ({\n  orderId,\n  keyId,\n  amount,\n  currency,\n  name = 'Burdenoff',\n  description = 'Purchase',\n  customerId,\n  prefill,\n  notes,\n  onSuccess,\n  onError,\n  onCancel,\n  disabled = false,\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 [paymentState, setPaymentState] = useState<PaymentState>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [isRazorpayLoaded, setIsRazorpayLoaded] = useState(false);\n\n  // Load Razorpay SDK dynamically\n  useEffect(() => {\n    if (typeof window !== 'undefined' && !window.Razorpay) {\n      const script = document.createElement('script');\n      script.src = 'https://checkout.razorpay.com/v1/checkout.js';\n      script.async = true;\n      script.onload = () => {\n        setIsRazorpayLoaded(true);\n      };\n      script.onerror = () => {\n        setError('Failed to load payment gateway');\n      };\n      document.body.appendChild(script);\n    } else if (window.Razorpay) {\n      setIsRazorpayLoaded(true);\n    }\n  }, []);\n\n  const handlePayment = useCallback(() => {\n    if (!isRazorpayLoaded || !window.Razorpay) {\n      setError('Payment gateway not ready');\n      return;\n    }\n\n    setPaymentState('processing');\n    setError(null);\n\n    // Build Razorpay options - customer_id enables saved cards feature\n    const options: RazorpayCheckoutOptions = {\n      key: keyId,\n      amount: amount, // Amount in paise\n      currency: currency.toUpperCase(),\n      name,\n      description,\n      order_id: orderId,\n      prefill: prefill || {},\n      notes: notes || {},\n      handler: (response: RazorpaySuccessResponse) => {\n        setPaymentState('success');\n        onSuccess(response);\n      },\n      modal: {\n        ondismiss: () => {\n          setPaymentState('idle');\n          onCancel?.();\n        },\n        escape: true,\n        confirm_close: true,\n      },\n    };\n\n    const providerThemeColor = getPaymentProviderThemeColor();\n    if (providerThemeColor) {\n      options.theme = { color: providerThemeColor };\n    }\n\n    // Add customer_id for saved cards feature\n    if (customerId) {\n      options.customer_id = customerId;\n      options.remember_customer = true;\n    }\n\n    try {\n      const RazorpayConstructor = (\n        window as unknown as {\n          Razorpay?: new (options: RazorpayCheckoutOptions) => CheckoutRazorpayInstance;\n        }\n      ).Razorpay;\n\n      if (!RazorpayConstructor) {\n        throw new Error('Payment gateway not ready');\n      }\n\n      const razorpay = new RazorpayConstructor(options);\n\n      razorpay.on('payment.failed', (response: unknown) => {\n        const errorResponse = response as {\n          error?: {\n            code?: string;\n            description?: string;\n            reason?: string;\n          };\n        };\n        const errorMessage =\n          errorResponse?.error?.description || errorResponse?.error?.reason || 'Payment failed';\n        setError(errorMessage);\n        setPaymentState('error');\n        onError(errorMessage);\n      });\n\n      razorpay.open();\n    } catch (err) {\n      const errorMessage = err instanceof Error ? err.message : 'Failed to open payment gateway';\n      setError(errorMessage);\n      setPaymentState('error');\n      onError(errorMessage);\n    }\n  }, [\n    isRazorpayLoaded,\n    keyId,\n    amount,\n    currency,\n    name,\n    description,\n    customerId,\n    orderId,\n    prefill,\n    notes,\n    onSuccess,\n    onError,\n    onCancel,\n  ]);\n\n  // Format amount for display (convert from paise to rupees)\n  const displayAmount = (amount / 100).toLocaleString('en-IN', {\n    style: 'currency',\n    currency: 'INR',\n  });\n\n  // Render success state\n  if (paymentState === 'success') {\n    return (\n      <div className=\"p-6 rounded-lg border border-border-subtle bg-status-success-bg-subtle\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"p-2 rounded-full bg-status-success-bg-subtle text-status-success-text\">\n            <Check className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <h3 className=\"font-semibold text-status-success-text\">Payment Successful!</h3>\n            <p className=\"text-sm text-status-success-text\">\n              Your payment has been processed successfully.\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"flex items-center gap-1\">\n            <CreditCard className=\"h-5 w-5 text-muted-foreground\" />\n            <Smartphone className=\"h-4 w-4 text-muted-foreground\" />\n          </div>\n          <span className=\"font-medium text-foreground\">Razorpay Payment</span>\n        </div>\n        <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n          <Lock className=\"h-3 w-3\" />\n          Secured by Razorpay\n        </div>\n      </div>\n\n      {/* Payment methods info */}\n      <div className=\"p-4 rounded-lg border border-border bg-muted/30\">\n        <p className=\"text-sm text-muted-foreground mb-3\">Pay using any of these methods:</p>\n        <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n          {['UPI', 'Cards', 'Netbanking', 'Wallets'].map((method) => (\n            <div\n              key={method}\n              className=\"px-3 py-2 rounded border border-border bg-background text-center text-sm text-foreground\"\n            >\n              {method}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-center gap-2 p-3 rounded-lg bg-destructive/10 text-destructive text-sm\">\n          <AlertCircle className=\"h-4 w-4 shrink-0\" />\n          {error}\n        </div>\n      )}\n\n      {/* Loading state */}\n      {!isRazorpayLoaded && (\n        <div className=\"flex items-center justify-center gap-2 py-4 text-muted-foreground\">\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n          <span className=\"text-sm\">\n            {tr('billing.checkout.loadingGateway', 'Loading payment gateway...')}\n          </span>\n        </div>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex gap-3\">\n        {onCancel && (\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            disabled={paymentState === 'processing' || disabled}\n            className=\"flex-1 px-4 py-3 rounded-lg border border-border text-foreground font-medium\n              hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            Cancel\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handlePayment}\n          disabled={!isRazorpayLoaded || paymentState === 'processing' || disabled}\n          className=\"flex-1 px-4 py-3 rounded-lg bg-action-primary-bg text-action-primary-text font-medium\n            hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\n            flex items-center justify-center gap-2\"\n        >\n          {paymentState === 'processing' ? (\n            <>\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              Processing...\n            </>\n          ) : (\n            <>Pay {displayAmount}</>\n          )}\n        </button>\n      </div>\n\n      {/* Security note */}\n      <p className=\"text-center text-xs text-muted-foreground\">\n        Your payment is secured with 256-bit encryption. Powered by Razorpay.\n      </p>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/checkout/components/SavedCardSelector.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { SavedPaymentMethod } from '../types';
+
+interface SavedCardSelectorProps {
+    savedCards: SavedPaymentMethod[];
+    selectedCardId: string | null;
+    onSelectCard: (cardId: string | null) => void;
+    onRemoveCard?: (cardId: string) => void;
+    isLoading?: boolean;
+}
+export declare const SavedCardSelector: FC<SavedCardSelectorProps>;
+export {};
+//# sourceMappingURL=SavedCardSelector.d.ts.map

package/dist/billing/modules/checkout/components/SavedCardSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SavedCardSelector.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/SavedCardSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAW1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD,UAAU,sBAAsB;IAC9B,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoGD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA4KxD,CAAC"}

package/dist/billing/modules/checkout/components/SavedCardSelector.js

@@ -0,0 +1,4 @@
+import "react";
+import "lucide-react";
+import "react/jsx-runtime";
+import "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";

package/dist/billing/modules/checkout/components/SimpleAutoPayToggle.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+interface SimpleAutoPayToggleProps {
+    enabled: boolean;
+    onToggle: (enabled: boolean) => void;
+    hasPaymentMethodSelected: boolean;
+    selectedPaymentMethodDisplay?: string;
+    isNewCard?: boolean;
+    disabled?: boolean;
+}
+export declare const SimpleAutoPayToggle: FC<SimpleAutoPayToggleProps>;
+export {};
+//# sourceMappingURL=SimpleAutoPayToggle.d.ts.map

package/dist/billing/modules/checkout/components/SimpleAutoPayToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleAutoPayToggle.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/SimpleAutoPayToggle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAI1C,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wBAAwB,EAAE,OAAO,CAAC;IAClC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiG5D,CAAC"}

package/dist/billing/modules/checkout/components/SimpleAutoPayToggle.js

@@ -0,0 +1,78 @@
+import { useState as e } from "react";
+import { Info as t, RefreshCw as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useI18n as a } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/checkout/components/SimpleAutoPayToggle.tsx
+var o = ({ enabled: o, onToggle: s, hasPaymentMethodSelected: c, selectedPaymentMethodDisplay: l, isNewCard: u = !1, disabled: d = !1 }) => {
+	let { t: f } = a(), p = (e, t) => {
+		let n = f(e);
+		return n === e ? t : n;
+	}, [m, h] = e(!1), g = c;
+	return /* @__PURE__ */ i("div", {
+		className: "pt-3 border-t border-border space-y-2",
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: () => {
+					g && s(!o);
+				},
+				disabled: d || !g,
+				className: `
+            relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent
+            transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+            ${o ? "bg-primary" : "bg-muted"}
+            ${(!g || d) && "opacity-50 cursor-not-allowed"}
+          `,
+				children: /* @__PURE__ */ r("span", { className: `
+              pointer-events-none inline-block h-4 w-4 transform rounded-full bg-bg-surface shadow ring-0
+              transition duration-200 ease-in-out
+              ${o ? "translate-x-4" : "translate-x-0"}
+            ` })
+			}), /* @__PURE__ */ i("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ i("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ r(n, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }),
+						/* @__PURE__ */ r("span", {
+							className: "text-xs font-medium text-foreground",
+							children: p("billing.checkout.autoRenew", "Auto-renew subscription")
+						}),
+						/* @__PURE__ */ r("button", {
+							type: "button",
+							onClick: () => h(!m),
+							className: "p-0.5 hover:bg-muted rounded transition-colors",
+							children: /* @__PURE__ */ r(t, { className: "h-3.5 w-3.5 text-muted-foreground" })
+						})
+					]
+				}), o && l && u ? /* @__PURE__ */ r("div", {
+					className: "text-xs text-accent-blue mt-0.5",
+					children: "ℹ️ This payment method will be saved for future renewals"
+				}) : o && l ? /* @__PURE__ */ i("div", {
+					className: "text-xs text-success mt-0.5",
+					children: ["✓ Will renew using ", l]
+				}) : g ? null : /* @__PURE__ */ r("div", {
+					className: "text-xs text-warning mt-0.5",
+					children: p("billing.checkout.selectPaymentFirst", "Select a payment method first")
+				})]
+			})]
+		}), m && /* @__PURE__ */ i("div", {
+			className: "p-3 rounded-lg bg-muted/50 border border-border",
+			children: [/* @__PURE__ */ r("p", {
+				className: "text-xs text-muted-foreground",
+				children: g ? "Your subscription will automatically renew when it expires using the payment method selected on the left." : "Enable auto-renewal to automatically charge your payment method when the subscription expires. Select a payment method first."
+			}), !g && /* @__PURE__ */ i("div", {
+				className: "flex items-start gap-2 p-2 rounded bg-warning/10 mt-2",
+				children: [/* @__PURE__ */ r(t, { className: "h-3.5 w-3.5 text-warning shrink-0 mt-0.5" }), /* @__PURE__ */ r("p", {
+					className: "text-xs text-warning",
+					children: "You can save a card during this purchase, then enable auto-renew for future subscriptions."
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+export { o as SimpleAutoPayToggle };
+
+//# sourceMappingURL=SimpleAutoPayToggle.js.map

package/dist/billing/modules/checkout/components/SimpleAutoPayToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleAutoPayToggle.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/SimpleAutoPayToggle.tsx"],"sourcesContent":["/**\n * Simple Auto-Pay Toggle Component\n * Just enables/disables auto-renewal using the selected payment method\n */\n\nimport { type FC, useState } from 'react';\nimport { RefreshCw, Info } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface SimpleAutoPayToggleProps {\n  enabled: boolean;\n  onToggle: (enabled: boolean) => void;\n  hasPaymentMethodSelected: boolean;\n  selectedPaymentMethodDisplay?: string;\n  isNewCard?: boolean; // Whether the selected payment method is a new card (not saved)\n  disabled?: boolean;\n}\n\nexport const SimpleAutoPayToggle: FC<SimpleAutoPayToggleProps> = ({\n  enabled,\n  onToggle,\n  hasPaymentMethodSelected,\n  selectedPaymentMethodDisplay,\n  isNewCard = false,\n  disabled = false,\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 [showInfo, setShowInfo] = useState(false);\n  const canEnable = hasPaymentMethodSelected;\n\n  return (\n    <div className=\"pt-3 border-t border-border space-y-2\">\n      {/* Toggle Row */}\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => {\n            if (!canEnable) return;\n            onToggle(!enabled);\n          }}\n          disabled={disabled || !canEnable}\n          className={`\n            relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent\n            transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\n            ${enabled ? 'bg-primary' : 'bg-muted'}\n            ${(!canEnable || disabled) && 'opacity-50 cursor-not-allowed'}\n          `}\n        >\n          <span\n            className={`\n              pointer-events-none inline-block h-4 w-4 transform rounded-full bg-bg-surface shadow ring-0\n              transition duration-200 ease-in-out\n              ${enabled ? 'translate-x-4' : 'translate-x-0'}\n            `}\n          />\n        </button>\n\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-1.5\">\n            <RefreshCw className=\"h-3.5 w-3.5 text-muted-foreground shrink-0\" />\n            <span className=\"text-xs font-medium text-foreground\">\n              {tr('billing.checkout.autoRenew', 'Auto-renew subscription')}\n            </span>\n            <button\n              type=\"button\"\n              onClick={() => setShowInfo(!showInfo)}\n              className=\"p-0.5 hover:bg-muted rounded transition-colors\"\n            >\n              <Info className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            </button>\n          </div>\n\n          {/* Status Message */}\n          {enabled && selectedPaymentMethodDisplay && isNewCard ? (\n            <div className=\"text-xs text-accent-blue mt-0.5\">\n              ℹ️ This payment method will be saved for future renewals\n            </div>\n          ) : enabled && selectedPaymentMethodDisplay ? (\n            <div className=\"text-xs text-success mt-0.5\">\n              ✓ Will renew using {selectedPaymentMethodDisplay}\n            </div>\n          ) : !canEnable ? (\n            <div className=\"text-xs text-warning mt-0.5\">\n              {tr('billing.checkout.selectPaymentFirst', 'Select a payment method first')}\n            </div>\n          ) : null}\n        </div>\n      </div>\n\n      {/* Info Panel */}\n      {showInfo && (\n        <div className=\"p-3 rounded-lg bg-muted/50 border border-border\">\n          <p className=\"text-xs text-muted-foreground\">\n            {canEnable\n              ? 'Your subscription will automatically renew when it expires using the payment method selected on the left.'\n              : 'Enable auto-renewal to automatically charge your payment method when the subscription expires. Select a payment method first.'}\n          </p>\n\n          {!canEnable && (\n            <div className=\"flex items-start gap-2 p-2 rounded bg-warning/10 mt-2\">\n              <Info className=\"h-3.5 w-3.5 text-warning shrink-0 mt-0.5\" />\n              <p className=\"text-xs text-warning\">\n                You can save a card during this purchase, then enable auto-renew for future\n                subscriptions.\n              </p>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAkBA,IAAa,KAAqD,EAChE,YACA,aACA,6BACA,iCACA,eAAY,IACZ,cAAW,SACP;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAY;AAElB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe;AACR,UACL,EAAS,CAAC,EAAQ;;IAEpB,UAAU,KAAY,CAAC;IACvB,WAAW;;;cAGP,IAAU,eAAe,WAAW;eACnC,CAAC,KAAa,MAAa,gCAAgC;;cAGhE,kBAAC,QAAD,EACE,WAAW;;;gBAGP,IAAU,kBAAkB,gBAAgB;eAEhD,CAAA;IACK,CAAA,EAET,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD,EAAW,WAAU,8CAA+C,CAAA;MACpE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAG,8BAA8B,0BAA0B;OACvD,CAAA;MACP,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAY,CAAC,EAAS;OACrC,WAAU;iBAEV,kBAAC,GAAD,EAAM,WAAU,qCAAsC,CAAA;OAC/C,CAAA;MACL;QAGL,KAAW,KAAgC,IAC1C,kBAAC,OAAD;KAAK,WAAU;eAAkC;KAE3C,CAAA,GACJ,KAAW,IACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CAA6C,uBACvB,EAChB;SACH,IAID,OAHF,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAG,uCAAuC,gCAAgC;KACvE,CAAA,CAEJ;MACF;MAGL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cACV,IACG,8GACA;IACF,CAAA,EAEH,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAM,WAAU,4CAA6C,CAAA,EAC7D,kBAAC,KAAD;KAAG,WAAU;eAAuB;KAGhC,CAAA,CACA;MAEJ;KAEJ"}

package/dist/billing/modules/checkout/components/StripePaymentForm.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+interface StripePaymentFormProps {
+    clientSecret: string;
+    publishableKey: string;
+    amount: number;
+    currency: string;
+    onSuccess: (paymentIntentId: string) => void;
+    onError: (error: string) => void;
+    onCancel?: () => void;
+    disabled?: boolean;
+    isCompletingExistingPayment?: boolean;
+}
+export declare const StripePaymentForm: FC<StripePaymentFormProps>;
+export {};
+//# sourceMappingURL=StripePaymentForm.d.ts.map

package/dist/billing/modules/checkout/components/StripePaymentForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StripePaymentForm.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/StripePaymentForm.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA4C,MAAM,OAAO,CAAC;AAgD1E,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAmCD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAwXxD,CAAC"}

package/dist/billing/modules/checkout/components/StripePaymentForm.js

@@ -0,0 +1,253 @@
+import { statusTokens as e } from "../../../shared/utils/tokens.js";
+import { getStripeCardElementStyle as t } from "../../../shared/utils/paymentTheme.js";
+import "../../../shared/utils/index.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { AlertCircle as o, Check as s, CreditCard as c, Loader2 as l, Lock as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/checkout/components/StripePaymentForm.tsx
+var h = () => new Promise((e, t) => {
+	if (window.Stripe) {
+		e();
+		return;
+	}
+	if (document.querySelector("script[src=\"https://js.stripe.com/v3/\"]")) {
+		let t = setInterval(() => {
+			window.Stripe && (clearInterval(t), e());
+		}, 100);
+		return;
+	}
+	let n = document.createElement("script");
+	n.src = "https://js.stripe.com/v3/", n.async = !0, n.onload = () => e(), n.onerror = () => t(/* @__PURE__ */ Error("Failed to load Stripe SDK")), document.body.appendChild(n);
+}), g = ({ clientSecret: g, publishableKey: _, amount: v, currency: y, onSuccess: b, onError: x, onCancel: S, disabled: C = !1, isCompletingExistingPayment: w = !1 }) => {
+	let { t: T } = m(), E = (e, t) => {
+		let n = T(e);
+		return n === e ? t : n;
+	}, [D, O] = a("idle"), [k, A] = a(null), [j, M] = a(!1), [N, P] = a(!1), [F, I] = a(null), L = i(null), R = i(null), z = i(null), B = i(!1);
+	r(() => {
+		h().then(() => {
+			M(!0);
+		}).catch(() => {
+			A("Failed to load payment gateway");
+		});
+	}, []), r(() => {
+		if (w) return;
+		let e = window.Stripe;
+		if (!j || !_ || !e || B.current) return;
+		let n = e(_);
+		R.current = n;
+		let r = n.elements().create("card", { style: t() });
+		return z.current = r, L.current && (r.mount(L.current), B.current = !0, r.on("change", (e) => {
+			I(e.error ? e.error.message : null), P(e.complete);
+		})), () => {
+			if (z.current && B.current) {
+				try {
+					z.current.unmount(), z.current.destroy();
+				} catch {}
+				z.current = null, B.current = !1;
+			}
+		};
+	}, [
+		j,
+		_,
+		w
+	]), r(() => {
+		!w || !j || !_ || D !== "idle" || (async () => {
+			let e = window.Stripe;
+			if (!e) {
+				A("Payment gateway not loaded");
+				return;
+			}
+			R.current ||= e(_), O("processing"), A(null);
+			try {
+				let { paymentIntent: e, error: t } = await R.current.confirmCardPayment(g);
+				if (t) throw Error(t.message || "Payment confirmation failed");
+				if (e?.status === "succeeded") O("success"), b(e.id);
+				else if (e?.status === "processing") O("processing");
+				else throw Error("Payment was not successful");
+			} catch (e) {
+				let t = e instanceof Error ? e.message : "Payment confirmation failed";
+				A(t), O("error"), x(t);
+			}
+		})();
+	}, [
+		w,
+		j,
+		_,
+		g,
+		D,
+		b,
+		x
+	]);
+	let V = n(async (e) => {
+		e.preventDefault();
+		let t = R.current, n = z.current;
+		if (!t || !n) {
+			A("Payment form not ready");
+			return;
+		}
+		if (!N) {
+			I("Please enter complete card details");
+			return;
+		}
+		O("processing"), A(null), I(null);
+		try {
+			let { paymentMethod: e, error: r } = await t.createPaymentMethod({
+				type: "card",
+				card: n
+			});
+			if (r) throw Error(r.message || "Failed to create payment method");
+			if (!e) throw Error("No payment method returned");
+			let { paymentIntent: i, error: a } = await t.confirmCardPayment(g, { payment_method: e.id });
+			if (a) throw Error(a.message || "Payment failed");
+			if (i?.status === "succeeded") O("success"), b(i.id);
+			else if (i?.status === "processing") O("processing");
+			else throw Error("Payment was not successful");
+		} catch (e) {
+			let t = e instanceof Error ? e.message : "Payment failed";
+			A(t), O("error"), x(t);
+		}
+	}, [
+		g,
+		N,
+		b,
+		x
+	]);
+	return D === "success" ? /* @__PURE__ */ f("div", {
+		className: `p-6 rounded-lg border ${e.success.border} ${e.success.bg}`,
+		children: /* @__PURE__ */ p("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ f("div", {
+				className: `p-2 rounded-full ${e.success.bg} ${e.success.icon}`,
+				children: /* @__PURE__ */ f(s, { className: "h-6 w-6" })
+			}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
+				className: `font-semibold ${e.success.text}`,
+				children: "Payment Successful!"
+			}), /* @__PURE__ */ f("p", {
+				className: `text-sm ${e.success.text}`,
+				children: "Your payment has been processed successfully."
+			})] })]
+		})
+	}) : j ? w ? /* @__PURE__ */ p("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ f(u, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ f("span", {
+					className: "font-medium text-foreground",
+					children: "Secure Payment Verification"
+				})]
+			}),
+			D === "processing" && /* @__PURE__ */ p("div", {
+				className: "p-6 rounded-lg border border-border bg-muted/30 flex flex-col items-center justify-center space-y-3",
+				children: [/* @__PURE__ */ f(l, { className: "h-8 w-8 animate-spin text-primary" }), /* @__PURE__ */ p("p", {
+					className: "text-sm text-muted-foreground text-center",
+					children: [
+						"Confirming payment with your saved card...",
+						/* @__PURE__ */ f("br", {}),
+						/* @__PURE__ */ f("span", {
+							className: "text-xs",
+							children: "Please complete any security verification if prompted"
+						})
+					]
+				})]
+			}),
+			k && /* @__PURE__ */ p("div", {
+				className: "flex items-center gap-2 p-3 rounded-lg bg-destructive/10 text-destructive text-sm",
+				children: [/* @__PURE__ */ f(o, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+					className: "font-medium",
+					children: E("billing.checkout.paymentFailed", "Payment Failed")
+				}), /* @__PURE__ */ f("p", {
+					className: "text-xs",
+					children: k
+				})] })]
+			}),
+			(D === "error" || k) && S && /* @__PURE__ */ f("div", {
+				className: "flex gap-3",
+				children: /* @__PURE__ */ f("button", {
+					type: "button",
+					onClick: S,
+					className: "flex-1 px-4 py-3 rounded-lg border border-border text-foreground font-medium\n                hover:bg-muted transition-colors",
+					children: "Back to Checkout"
+				})
+			})
+		]
+	}) : /* @__PURE__ */ p("form", {
+		onSubmit: V,
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f(c, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ f("span", {
+						className: "font-medium text-foreground",
+						children: "Card Payment"
+					})]
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-1 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ f(u, { className: "h-3 w-3" }), "Secured by Stripe"]
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ f("div", {
+					ref: L,
+					className: "min-h-[50px] rounded-lg border border-border bg-background p-4"
+				}), F && /* @__PURE__ */ f("p", {
+					className: "text-sm text-destructive",
+					children: F
+				})]
+			}),
+			k && /* @__PURE__ */ p("div", {
+				className: "flex items-center gap-2 p-3 rounded-lg bg-destructive/10 text-destructive text-sm",
+				children: [/* @__PURE__ */ f(o, { className: "h-4 w-4 shrink-0" }), k]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flex gap-3",
+				children: [S && /* @__PURE__ */ f("button", {
+					type: "button",
+					onClick: S,
+					disabled: D === "processing" || C,
+					className: "flex-1 px-4 py-3 rounded-lg border border-border text-foreground font-medium\n              hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+					children: "Cancel"
+				}), /* @__PURE__ */ f("button", {
+					type: "submit",
+					disabled: D === "processing" || C || !N,
+					className: "flex-1 px-4 py-3 rounded-lg bg-primary text-primary-foreground font-medium\n            hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\n            flex items-center justify-center gap-2",
+					children: D === "processing" ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(l, { className: "h-4 w-4 animate-spin" }), "Processing..."] }) : /* @__PURE__ */ p(d, { children: [
+						"Pay",
+						" ",
+						new Intl.NumberFormat("en-US", {
+							style: "currency",
+							currency: y.toUpperCase()
+						}).format(v / 100)
+					] })
+				})]
+			}),
+			/* @__PURE__ */ f("p", {
+				className: "text-center text-xs text-muted-foreground",
+				children: "Your payment information is encrypted and secure. We never store your full card details."
+			})
+		]
+	}) : /* @__PURE__ */ p("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ p("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ f(c, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ f("span", {
+				className: "font-medium text-foreground",
+				children: E("billing.checkout.cardPayment", "Card Payment")
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: "p-6 rounded-lg border border-border bg-muted/30 flex items-center justify-center",
+			children: [/* @__PURE__ */ f(l, { className: "h-6 w-6 animate-spin text-muted-foreground" }), /* @__PURE__ */ f("span", {
+				className: "ml-2 text-muted-foreground",
+				children: E("billing.checkout.loadingPaymentForm", "Loading payment form...")
+			})]
+		})]
+	});
+};
+//#endregion
+export { g as StripePaymentForm };
+
+//# sourceMappingURL=StripePaymentForm.js.map