@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1 @@
+{"version":3,"file":"StripePaymentForm.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/StripePaymentForm.tsx"],"sourcesContent":["/**\n * Stripe Payment Form Component\n * Integrates with Stripe Elements for card payment\n */\n\nimport { type FC, useState, useCallback, useEffect, useRef } from 'react';\nimport { CreditCard, Lock, Loader2, Check, AlertCircle } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { getStripeCardElementStyle, statusTokens } from '../../../shared/utils';\n\n// Stripe types - local definitions to avoid conflicts with external type declarations\ninterface LocalStripeCardElement {\n  mount: (element: HTMLElement) => void;\n  unmount: () => void;\n  destroy: () => void;\n  on: (event: string, handler: (event: LocalStripeCardChangeEvent) => void) => void;\n}\n\ninterface LocalStripeCardChangeEvent {\n  complete: boolean;\n  error?: { message: string };\n}\n\ninterface LocalStripeElements {\n  create: (type: 'card', options?: Record<string, unknown>) => LocalStripeCardElement;\n}\n\ninterface LocalStripePaymentMethod {\n  id: string;\n  card?: {\n    last4: string;\n    brand: string;\n  };\n}\n\ninterface LocalStripeInstance {\n  elements: () => LocalStripeElements;\n  createPaymentMethod: (options: {\n    type: 'card';\n    card: LocalStripeCardElement;\n  }) => Promise<{ paymentMethod?: LocalStripePaymentMethod; error?: { message: string } }>;\n  confirmCardPayment: (\n    clientSecret: string,\n    options?: { payment_method: string }\n  ) => Promise<{\n    paymentIntent?: { id: string; status: string };\n    error?: { message: string };\n  }>;\n}\n\n// Use type assertion when accessing window.Stripe\ntype StripeFactory = (key: string) => LocalStripeInstance;\n\ninterface StripePaymentFormProps {\n  clientSecret: string;\n  publishableKey: string;\n  amount: number;\n  currency: string;\n  onSuccess: (paymentIntentId: string) => void;\n  onError: (error: string) => void;\n  onCancel?: () => void;\n  disabled?: boolean;\n  isCompletingExistingPayment?: boolean; // True for saved cards that need 3D Secure\n}\n\ntype PaymentState = 'idle' | 'loading' | 'processing' | 'success' | 'error';\n\n/**\n * Load Stripe.js SDK dynamically\n */\nconst loadStripeSDK = (): Promise<void> => {\n  return new Promise((resolve, reject) => {\n    if (window.Stripe) {\n      resolve();\n      return;\n    }\n\n    const existingScript = document.querySelector('script[src=\"https://js.stripe.com/v3/\"]');\n    if (existingScript) {\n      // Wait for existing script to load\n      const checkStripe = setInterval(() => {\n        if (window.Stripe) {\n          clearInterval(checkStripe);\n          resolve();\n        }\n      }, 100);\n      return;\n    }\n\n    const script = document.createElement('script');\n    script.src = 'https://js.stripe.com/v3/';\n    script.async = true;\n    script.onload = () => resolve();\n    script.onerror = () => reject(new Error('Failed to load Stripe SDK'));\n    document.body.appendChild(script);\n  });\n};\n\nexport const StripePaymentForm: FC<StripePaymentFormProps> = ({\n  clientSecret,\n  publishableKey,\n  amount,\n  currency,\n  onSuccess,\n  onError,\n  onCancel,\n  disabled = false,\n  isCompletingExistingPayment = 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 [sdkLoaded, setSdkLoaded] = useState(false);\n  const [cardComplete, setCardComplete] = useState(false);\n  const [cardError, setCardError] = useState<string | null>(null);\n\n  const cardElementRef = useRef<HTMLDivElement>(null);\n  const stripeRef = useRef<LocalStripeInstance | null>(null);\n  const cardElementInstanceRef = useRef<LocalStripeCardElement | null>(null);\n  const isMountedRef = useRef(false);\n\n  // Load Stripe SDK\n  useEffect(() => {\n    loadStripeSDK()\n      .then(() => {\n        setSdkLoaded(true);\n      })\n      .catch(() => {\n        setError('Failed to load payment gateway');\n      });\n  }, []);\n\n  // Initialize Stripe and mount card element (only for new card payments)\n  useEffect(() => {\n    // Skip card input for completing existing payments (saved cards with 3D Secure)\n    if (isCompletingExistingPayment) {\n      return;\n    }\n\n    const windowStripe = (window as unknown as { Stripe?: StripeFactory }).Stripe;\n    if (!sdkLoaded || !publishableKey || !windowStripe || isMountedRef.current) {\n      return;\n    }\n\n    // Initialize Stripe\n    const stripeInstance = windowStripe(publishableKey);\n    stripeRef.current = stripeInstance;\n\n    // Create elements\n    const elements = stripeInstance.elements();\n    const cardElement = elements.create('card', {\n      style: getStripeCardElementStyle(),\n    });\n    cardElementInstanceRef.current = cardElement;\n\n    // Mount card element\n    if (cardElementRef.current) {\n      cardElement.mount(cardElementRef.current);\n      isMountedRef.current = true;\n\n      // Listen to card element changes\n      cardElement.on('change', (event: LocalStripeCardChangeEvent) => {\n        setCardError(event.error ? event.error.message : null);\n        setCardComplete(event.complete);\n      });\n    }\n\n    // Cleanup\n    return () => {\n      if (cardElementInstanceRef.current && isMountedRef.current) {\n        try {\n          cardElementInstanceRef.current.unmount();\n          cardElementInstanceRef.current.destroy();\n        } catch {\n          // Element might already be destroyed\n        }\n        cardElementInstanceRef.current = null;\n        isMountedRef.current = false;\n      }\n    };\n  }, [sdkLoaded, publishableKey, isCompletingExistingPayment]);\n\n  // Auto-confirm payment for saved cards (requires 3D Secure or similar action)\n  useEffect(() => {\n    if (!isCompletingExistingPayment || !sdkLoaded || !publishableKey || paymentState !== 'idle') {\n      return;\n    }\n\n    const confirmExistingPayment = async () => {\n      const windowStripe = (window as unknown as { Stripe?: StripeFactory }).Stripe;\n      if (!windowStripe) {\n        setError('Payment gateway not loaded');\n        return;\n      }\n\n      // Initialize Stripe if not already done\n      if (!stripeRef.current) {\n        stripeRef.current = windowStripe(publishableKey);\n      }\n\n      setPaymentState('processing');\n      setError(null);\n\n      try {\n        // Confirm the payment (payment method already attached by backend)\n        // This will show 3D Secure popup if needed\n        const { paymentIntent, error: confirmError } =\n          await stripeRef.current.confirmCardPayment(clientSecret);\n\n        if (confirmError) {\n          throw new Error(confirmError.message || 'Payment confirmation failed');\n        }\n\n        if (paymentIntent?.status === 'succeeded') {\n          setPaymentState('success');\n          onSuccess(paymentIntent.id);\n        } else if (paymentIntent?.status === 'processing') {\n          setPaymentState('processing');\n          // Keep in processing state - webhook will handle completion\n        } else {\n          throw new Error('Payment was not successful');\n        }\n      } catch (err) {\n        const errorMessage = err instanceof Error ? err.message : 'Payment confirmation failed';\n        setError(errorMessage);\n        setPaymentState('error');\n        onError(errorMessage);\n      }\n    };\n\n    confirmExistingPayment();\n  }, [\n    isCompletingExistingPayment,\n    sdkLoaded,\n    publishableKey,\n    clientSecret,\n    paymentState,\n    onSuccess,\n    onError,\n  ]);\n\n  const handleSubmit = useCallback(\n    async (e: React.FormEvent) => {\n      e.preventDefault();\n\n      const stripe = stripeRef.current;\n      const cardElement = cardElementInstanceRef.current;\n\n      if (!stripe || !cardElement) {\n        setError('Payment form not ready');\n        return;\n      }\n\n      if (!cardComplete) {\n        setCardError('Please enter complete card details');\n        return;\n      }\n\n      setPaymentState('processing');\n      setError(null);\n      setCardError(null);\n\n      try {\n        // Step 1: Create PaymentMethod\n        const { paymentMethod, error: pmError } = await stripe.createPaymentMethod({\n          type: 'card',\n          card: cardElement,\n        });\n\n        if (pmError) {\n          throw new Error(pmError.message || 'Failed to create payment method');\n        }\n\n        if (!paymentMethod) {\n          throw new Error('No payment method returned');\n        }\n\n        // Step 2: Confirm the payment with the client secret\n        const { paymentIntent, error: confirmError } = await stripe.confirmCardPayment(\n          clientSecret,\n          { payment_method: paymentMethod.id }\n        );\n\n        if (confirmError) {\n          throw new Error(confirmError.message || 'Payment failed');\n        }\n\n        if (paymentIntent?.status === 'succeeded') {\n          setPaymentState('success');\n          onSuccess(paymentIntent.id);\n        } else if (paymentIntent?.status === 'processing') {\n          setPaymentState('processing');\n        } else {\n          throw new Error('Payment was not successful');\n        }\n      } catch (err) {\n        const errorMessage = err instanceof Error ? err.message : 'Payment failed';\n        setError(errorMessage);\n        setPaymentState('error');\n        onError(errorMessage);\n      }\n    },\n    [clientSecret, cardComplete, onSuccess, onError]\n  );\n\n  // Render success state\n  if (paymentState === 'success') {\n    return (\n      <div\n        className={`p-6 rounded-lg border ${statusTokens.success.border} ${statusTokens.success.bg}`}\n      >\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={`p-2 rounded-full ${statusTokens.success.bg} ${statusTokens.success.icon}`}\n          >\n            <Check className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <h3 className={`font-semibold ${statusTokens.success.text}`}>Payment Successful!</h3>\n            <p className={`text-sm ${statusTokens.success.text}`}>\n              Your payment has been processed successfully.\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Show loading while SDK loads\n  if (!sdkLoaded) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex items-center gap-2\">\n          <CreditCard className=\"h-5 w-5 text-muted-foreground\" />\n          <span className=\"font-medium text-foreground\">\n            {tr('billing.checkout.cardPayment', 'Card Payment')}\n          </span>\n        </div>\n        <div className=\"p-6 rounded-lg border border-border bg-muted/30 flex items-center justify-center\">\n          <Loader2 className=\"h-6 w-6 animate-spin text-muted-foreground\" />\n          <span className=\"ml-2 text-muted-foreground\">\n            {tr('billing.checkout.loadingPaymentForm', 'Loading payment form...')}\n          </span>\n        </div>\n      </div>\n    );\n  }\n\n  // For saved card payments that need confirmation (3D Secure, etc.)\n  if (isCompletingExistingPayment) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex items-center gap-2\">\n          <Lock className=\"h-5 w-5 text-primary\" />\n          <span className=\"font-medium text-foreground\">Secure Payment Verification</span>\n        </div>\n\n        {paymentState === 'processing' && (\n          <div className=\"p-6 rounded-lg border border-border bg-muted/30 flex flex-col items-center justify-center space-y-3\">\n            <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n            <p className=\"text-sm text-muted-foreground text-center\">\n              Confirming payment with your saved card...\n              <br />\n              <span className=\"text-xs\">Please complete any security verification if prompted</span>\n            </p>\n          </div>\n        )}\n\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            <div>\n              <p className=\"font-medium\">\n                {tr('billing.checkout.paymentFailed', 'Payment Failed')}\n              </p>\n              <p className=\"text-xs\">{error}</p>\n            </div>\n          </div>\n        )}\n\n        {(paymentState === 'error' || error) && onCancel && (\n          <div className=\"flex gap-3\">\n            <button\n              type=\"button\"\n              onClick={onCancel}\n              className=\"flex-1 px-4 py-3 rounded-lg border border-border text-foreground font-medium\n                hover:bg-muted transition-colors\"\n            >\n              Back to Checkout\n            </button>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <CreditCard className=\"h-5 w-5 text-muted-foreground\" />\n          <span className=\"font-medium text-foreground\">Card 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 Stripe\n        </div>\n      </div>\n\n      {/* Stripe Card Element container - NO conditional rendering inside */}\n      <div className=\"space-y-2\">\n        <div\n          ref={cardElementRef}\n          className=\"min-h-[50px] rounded-lg border border-border bg-background p-4\"\n        />\n        {cardError && <p className=\"text-sm text-destructive\">{cardError}</p>}\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      {/* 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=\"submit\"\n          disabled={paymentState === 'processing' || disabled || !cardComplete}\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\"\n        >\n          {paymentState === 'processing' ? (\n            <>\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              Processing...\n            </>\n          ) : (\n            <>\n              Pay{' '}\n              {new Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: currency.toUpperCase(),\n              }).format(amount / 100)}\n            </>\n          )}\n        </button>\n      </div>\n\n      {/* Security note */}\n      <p className=\"text-center text-xs text-muted-foreground\">\n        Your payment information is encrypted and secure. We never store your full card details.\n      </p>\n    </form>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+interface Subscription {
+    id: string;
+    status: string;
+    startDate: string;
+    endDate: string;
+    plan?: {
+        id: string;
+        name: string;
+        productID?: string;
+        product?: {
+            id: string;
+            name: string;
+        } | null;
+    } | null;
+}
+interface SubscriptionSelectorProps {
+    subscriptions: Subscription[];
+    selectedSubscriptionId: string | null;
+    onSelect: (subscriptionId: string | null) => void;
+    isLoading?: boolean;
+}
+export declare const SubscriptionSelector: FC<SubscriptionSelectorProps>;
+export {};
+//# sourceMappingURL=SubscriptionSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionSelector.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/SubscriptionSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAK7D,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE;YACR,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;SACd,GAAG,IAAI,CAAC;KACV,GAAG,IAAI,CAAC;CACV;AAED,UAAU,yBAAyB;IACjC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAuI9D,CAAC"}

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

@@ -0,0 +1,84 @@
+import { statusTokens as e } from "../../../shared/utils/tokens.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { AlertCircle as i, Check as a, ChevronDown as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/checkout/components/SubscriptionSelector.tsx
+var u = ({ subscriptions: u, selectedSubscriptionId: d, onSelect: f, isLoading: p = !1 }) => {
+	let { t: m } = l(), h = (e, t) => {
+		let n = m(e);
+		return n === e ? t : n;
+	}, [g, _] = r(!1), v = n(null);
+	t(() => {
+		let e = (e) => {
+			v.current && !v.current.contains(e.target) && _(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), t(() => {
+		u.length === 1 && !d && f(u[0].id);
+	}, [
+		u,
+		d,
+		f
+	]);
+	let y = u.find((e) => e.id === d), b = (e) => {
+		let t = e.plan?.name || "Subscription", n = e.plan?.product?.name;
+		return n ? `${n} - ${t}` : t;
+	};
+	return p ? /* @__PURE__ */ s("div", { className: "h-9 bg-muted animate-pulse rounded-md" }) : u.length === 0 ? /* @__PURE__ */ c("div", {
+		className: `flex items-center gap-2 p-2 rounded-md ${e.warning.bg} border ${e.warning.border}`,
+		children: [/* @__PURE__ */ s(i, { className: `h-4 w-4 ${e.warning.icon} shrink-0` }), /* @__PURE__ */ s("span", {
+			className: `text-sm ${e.warning.text}`,
+			children: "No active subscription. Subscribe to a plan first."
+		})]
+	}) : u.length === 1 ? null : /* @__PURE__ */ c("div", {
+		className: "relative",
+		ref: v,
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ s("span", {
+				className: "text-sm text-muted-foreground shrink-0",
+				children: h("billing.checkout.attachTo", "Attach to:")
+			}), /* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: () => _(!g),
+				className: `
+            flex-1 flex items-center justify-between gap-2 px-3 py-1.5 rounded-md border text-sm
+            transition-colors text-left
+            ${g ? "border-primary ring-1 ring-primary" : d ? "border-border hover:border-primary/50 bg-background" : `${e.warning.border} ${e.warning.bg}`}
+          `,
+				children: [y ? /* @__PURE__ */ s("span", {
+					className: "font-medium text-foreground truncate",
+					children: b(y)
+				}) : /* @__PURE__ */ s("span", {
+					className: e.warning.text,
+					children: h("billing.checkout.selectSubscription", "Select subscription")
+				}), /* @__PURE__ */ s(o, { className: `h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${g ? "rotate-180" : ""}` })]
+			})]
+		}), g && /* @__PURE__ */ s("div", {
+			className: "absolute left-0 right-0 z-50 mt-1 max-h-48 overflow-auto rounded-md border border-border bg-popover shadow-lg",
+			children: u.map((e) => {
+				let t = e.id === d;
+				return /* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: () => {
+						f(e.id), _(!1);
+					},
+					className: `
+                  w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-left
+                  transition-colors
+                  ${t ? "bg-primary/5" : "hover:bg-muted/50"}
+                `,
+					children: [/* @__PURE__ */ s("span", {
+						className: "font-medium text-foreground truncate",
+						children: b(e)
+					}), t && /* @__PURE__ */ s(a, { className: "h-3.5 w-3.5 text-primary shrink-0" })]
+				}, e.id);
+			})
+		})]
+	});
+};
+//#endregion
+export { u as SubscriptionSelector };
+
+//# sourceMappingURL=SubscriptionSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionSelector.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/SubscriptionSelector.tsx"],"sourcesContent":["/**\n * Subscription Selector Component\n * Compact inline dropdown for choosing subscription when purchasing addons\n * Only shows when multiple subscriptions exist - single subscription auto-selects silently\n */\n\nimport { type FC, useState, useRef, useEffect } from 'react';\nimport { ChevronDown, Check, AlertCircle } from 'lucide-react';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface Subscription {\n  id: string;\n  status: string;\n  startDate: string;\n  endDate: string;\n  plan?: {\n    id: string;\n    name: string;\n    productID?: string;\n    product?: {\n      id: string;\n      name: string;\n    } | null;\n  } | null;\n}\n\ninterface SubscriptionSelectorProps {\n  subscriptions: Subscription[];\n  selectedSubscriptionId: string | null;\n  onSelect: (subscriptionId: string | null) => void;\n  isLoading?: boolean;\n}\n\nexport const SubscriptionSelector: FC<SubscriptionSelectorProps> = ({\n  subscriptions,\n  selectedSubscriptionId,\n  onSelect,\n  isLoading = 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 [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  // Auto-select if only one subscription (silently, no UI shown)\n  useEffect(() => {\n    if (subscriptions.length === 1 && !selectedSubscriptionId) {\n      onSelect(subscriptions[0].id);\n    }\n  }, [subscriptions, selectedSubscriptionId, onSelect]);\n\n  const selectedSubscription = subscriptions.find((s) => s.id === selectedSubscriptionId);\n\n  // Format subscription display name: \"Product - Plan\" or just \"Plan\"\n  const getDisplayName = (subscription: Subscription) => {\n    const planName = subscription.plan?.name || 'Subscription';\n    const productName = subscription.plan?.product?.name;\n    return productName ? `${productName} - ${planName}` : planName;\n  };\n\n  // Loading state - compact\n  if (isLoading) {\n    return <div className=\"h-9 bg-muted animate-pulse rounded-md\" />;\n  }\n\n  // No subscriptions - compact warning\n  if (subscriptions.length === 0) {\n    return (\n      <div\n        className={`flex items-center gap-2 p-2 rounded-md ${statusTokens.warning.bg} border ${statusTokens.warning.border}`}\n      >\n        <AlertCircle className={`h-4 w-4 ${statusTokens.warning.icon} shrink-0`} />\n        <span className={`text-sm ${statusTokens.warning.text}`}>\n          No active subscription. Subscribe to a plan first.\n        </span>\n      </div>\n    );\n  }\n\n  // Only one subscription - don't show anything, auto-select happens silently\n  if (subscriptions.length === 1) {\n    return null;\n  }\n\n  // Multiple subscriptions - compact dropdown\n  return (\n    <div className=\"relative\" ref={dropdownRef}>\n      <div className=\"flex items-center gap-2\">\n        <span className=\"text-sm text-muted-foreground shrink-0\">\n          {tr('billing.checkout.attachTo', 'Attach to:')}\n        </span>\n        <button\n          type=\"button\"\n          onClick={() => setIsOpen(!isOpen)}\n          className={`\n            flex-1 flex items-center justify-between gap-2 px-3 py-1.5 rounded-md border text-sm\n            transition-colors text-left\n            ${\n              isOpen\n                ? 'border-primary ring-1 ring-primary'\n                : selectedSubscriptionId\n                  ? 'border-border hover:border-primary/50 bg-background'\n                  : `${statusTokens.warning.border} ${statusTokens.warning.bg}`\n            }\n          `}\n        >\n          {selectedSubscription ? (\n            <span className=\"font-medium text-foreground truncate\">\n              {getDisplayName(selectedSubscription)}\n            </span>\n          ) : (\n            <span className={statusTokens.warning.text}>\n              {tr('billing.checkout.selectSubscription', 'Select subscription')}\n            </span>\n          )}\n          <ChevronDown\n            className={`h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${\n              isOpen ? 'rotate-180' : ''\n            }`}\n          />\n        </button>\n      </div>\n\n      {/* Dropdown menu */}\n      {isOpen && (\n        <div className=\"absolute left-0 right-0 z-50 mt-1 max-h-48 overflow-auto rounded-md border border-border bg-popover shadow-lg\">\n          {subscriptions.map((subscription) => {\n            const isSelected = subscription.id === selectedSubscriptionId;\n            return (\n              <button\n                key={subscription.id}\n                type=\"button\"\n                onClick={() => {\n                  onSelect(subscription.id);\n                  setIsOpen(false);\n                }}\n                className={`\n                  w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-left\n                  transition-colors\n                  ${isSelected ? 'bg-primary/5' : 'hover:bg-muted/50'}\n                `}\n              >\n                <span className=\"font-medium text-foreground truncate\">\n                  {getDisplayName(subscription)}\n                </span>\n                {isSelected && <Check className=\"h-3.5 w-3.5 text-primary shrink-0\" />}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAkCA,IAAa,KAAuD,EAClE,kBACA,2BACA,aACA,eAAY,SACR;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAc,EAAuB,KAAK;AAehD,CAZA,QAAgB;EACd,IAAM,KAAsB,MAAsB;AAChD,GAAI,EAAY,WAAW,CAAC,EAAY,QAAQ,SAAS,EAAM,OAAe,IAC5E,EAAU,GAAM;;AAKpB,SADA,SAAS,iBAAiB,aAAa,EAAmB,QAC7C,SAAS,oBAAoB,aAAa,EAAmB;IACzE,EAAE,CAAC,EAGN,QAAgB;AACd,EAAI,EAAc,WAAW,KAAK,CAAC,KACjC,EAAS,EAAc,GAAG,GAAG;IAE9B;EAAC;EAAe;EAAwB;EAAS,CAAC;CAErD,IAAM,IAAuB,EAAc,MAAM,MAAM,EAAE,OAAO,EAAuB,EAGjF,KAAkB,MAA+B;EACrD,IAAM,IAAW,EAAa,MAAM,QAAQ,gBACtC,IAAc,EAAa,MAAM,SAAS;AAChD,SAAO,IAAc,GAAG,EAAY,KAAK,MAAa;;AA4BxD,QAxBI,IACK,kBAAC,OAAD,EAAK,WAAU,yCAA0C,CAAA,GAI9D,EAAc,WAAW,IAEzB,kBAAC,OAAD;EACE,WAAW,0CAA0C,EAAa,QAAQ,GAAG,UAAU,EAAa,QAAQ;YAD9G,CAGE,kBAAC,GAAD,EAAa,WAAW,WAAW,EAAa,QAAQ,KAAK,YAAc,CAAA,EAC3E,kBAAC,QAAD;GAAM,WAAW,WAAW,EAAa,QAAQ;aAAQ;GAElD,CAAA,CACH;MAKN,EAAc,WAAW,IACpB,OAKP,kBAAC,OAAD;EAAK,WAAU;EAAW,KAAK;YAA/B,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAG,6BAA6B,aAAa;IACzC,CAAA,EACP,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAU,CAAC,EAAO;IACjC,WAAW;;;cAIP,IACI,uCACA,IACE,wDACA,GAAG,EAAa,QAAQ,OAAO,GAAG,EAAa,QAAQ,KAC9D;;cAZL,CAeG,IACC,kBAAC,QAAD;KAAM,WAAU;eACb,EAAe,EAAqB;KAChC,CAAA,GAEP,kBAAC,QAAD;KAAM,WAAW,EAAa,QAAQ;eACnC,EAAG,uCAAuC,sBAAsB;KAC5D,CAAA,EAET,kBAAC,GAAD,EACE,WAAW,mEACT,IAAS,eAAe,MAE1B,CAAA,CACK;MACL;MAGL,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAc,KAAK,MAAiB;IACnC,IAAM,IAAa,EAAa,OAAO;AACvC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;AAEb,MADA,EAAS,EAAa,GAAG,EACzB,EAAU,GAAM;;KAElB,WAAW;;;oBAGP,IAAa,iBAAiB,oBAAoB;;eAVxD,CAaE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAe,EAAa;MACxB,CAAA,EACN,KAAc,kBAAC,GAAD,EAAO,WAAU,qCAAsC,CAAA,CAC/D;OAhBF,EAAa,GAgBX;KAEX;GACE,CAAA,CAEJ"}

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { SavedPaymentMethod } from '../types';
+
+interface UnifiedPaymentMethodSelectorProps {
+    savedPaymentMethods: SavedPaymentMethod[];
+    selectedPaymentMethodId: string | null;
+    onSelectSavedCard: (id: string | null) => void;
+    selectedProvider: 'CREDITS' | 'STRIPE' | 'RAZORPAY' | 'AUTO';
+    onSelectProvider: (provider: 'CREDITS' | 'STRIPE' | 'RAZORPAY') => void;
+    stripeEnabled: boolean;
+    razorpayEnabled: boolean;
+    canPayWithCredits: boolean;
+    availableCredits: number;
+    totalAmount: number;
+    billingCountry?: string;
+    saveCard: boolean;
+    onSaveCardChange: (save: boolean) => void;
+    autoRenewEnabled?: boolean;
+    isLoading?: boolean;
+}
+export declare const UnifiedPaymentMethodSelector: FC<UnifiedPaymentMethodSelectorProps>;
+export {};
+//# sourceMappingURL=UnifiedPaymentMethodSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnifiedPaymentMethodSelector.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/UnifiedPaymentMethodSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD,UAAU,iCAAiC;IAEzC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAG/C,gBAAgB,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D,gBAAgB,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,KAAK,IAAI,CAAC;IAGxE,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAG1C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAeD,eAAO,MAAM,4BAA4B,EAAE,EAAE,CAAC,iCAAiC,CAkU9E,CAAC"}

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

@@ -0,0 +1,229 @@
+import { useState as e } from "react";
+import { ChevronDown as t, Coins as n, CreditCard as r, Wallet as i } from "lucide-react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/checkout/components/UnifiedPaymentMethodSelector.tsx
+var l = (e) => o(e === "WALLET" ? i : r, { className: "h-4 w-4" }), u = (e) => `${e.type === "CREDIT_CARD" ? "Credit Card" : e.type === "DEBIT_CARD" ? "Debit Card" : e.type}${e.last4 ? ` •••• ${e.last4}` : ""}${e.brand ? ` (${e.brand})` : ""}`, d = ({ savedPaymentMethods: i, selectedPaymentMethodId: d, onSelectSavedCard: f, selectedProvider: p, onSelectProvider: m, stripeEnabled: h, razorpayEnabled: g, canPayWithCredits: _, availableCredits: v, totalAmount: y, billingCountry: b, saveCard: x, onSaveCardChange: S, autoRenewEnabled: C = !1, isLoading: w = !1 }) => {
+	let { t: T } = c(), E = (e, t) => {
+		let n = T(e);
+		return n === e ? t : n;
+	}, [D, O] = e(!1), k = v >= y, A = b === "IN", j = i.find((e) => e.isDefault) || i[0], M = i.filter((e) => e.id !== j?.id), N = (e, t) => {
+		if (e === "saved") {
+			let e = i.find((e) => e.id === t);
+			e && (f(t), e.razorpayPaymentMethodId ? m("RAZORPAY") : e.stripePaymentMethodId && m("STRIPE"));
+		} else f(null), m(t);
+	}, P = (e, t) => e === "saved" ? d === t : !d && p === t;
+	return /* @__PURE__ */ s("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ o("h3", {
+			className: "text-sm font-medium text-foreground",
+			children: E("billing.checkout.paymentMethod", "Payment Method")
+		}), w ? /* @__PURE__ */ s("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ o("div", { className: "h-16 rounded-lg border border-border bg-muted animate-pulse" }), /* @__PURE__ */ o("div", { className: "h-16 rounded-lg border border-border bg-muted animate-pulse" })]
+		}) : /* @__PURE__ */ s("div", {
+			className: "space-y-2",
+			children: [
+				_ && /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => N("new", "CREDITS"),
+					disabled: !k,
+					className: `
+                w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left
+                ${P("new", "CREDITS") ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-primary/50 hover:bg-muted/50"}
+                ${!k && "opacity-50 cursor-not-allowed"}
+              `,
+					children: [
+						/* @__PURE__ */ o(n, { className: `h-5 w-5 shrink-0 ${P("new", "CREDITS") ? "text-primary" : "text-muted-foreground"}` }),
+						/* @__PURE__ */ s("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ o("div", {
+								className: "text-sm font-medium text-foreground",
+								children: "Pay with Credits"
+							}), /* @__PURE__ */ o("div", {
+								className: "text-xs text-muted-foreground",
+								children: k ? `Available: ${v.toLocaleString()} credits` : `Insufficient credits (need ${y.toLocaleString()})`
+							})]
+						}),
+						k && /* @__PURE__ */ o("span", {
+							className: "text-xs px-2 py-0.5 rounded bg-success/10 text-success",
+							children: "Instant"
+						})
+					]
+				}),
+				i.length > 0 && /* @__PURE__ */ s(a, { children: [
+					/* @__PURE__ */ o("div", {
+						className: "text-xs font-medium text-muted-foreground uppercase tracking-wide pt-2",
+						children: "Saved Cards"
+					}),
+					j && /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => N("saved", j.id),
+						className: `
+                    w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left
+                    ${P("saved", j.id) ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-primary/50 hover:bg-muted/50"}
+                  `,
+						children: [
+							l(j.type),
+							/* @__PURE__ */ s("div", {
+								className: "flex-1 min-w-0",
+								children: [/* @__PURE__ */ o("div", {
+									className: "text-sm font-medium text-foreground",
+									children: u(j)
+								}), j.expiryMonth && j.expiryYear && /* @__PURE__ */ s("div", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										"Expires ",
+										j.expiryMonth.toString().padStart(2, "0"),
+										"/",
+										j.expiryYear
+									]
+								})]
+							}),
+							j.isDefault && /* @__PURE__ */ o("span", {
+								className: "text-xs px-2 py-0.5 rounded bg-primary/10 text-primary",
+								children: "Default"
+							})
+						]
+					}),
+					M.length > 0 && /* @__PURE__ */ o(a, { children: D ? /* @__PURE__ */ s(a, { children: [M.map((e) => /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => N("saved", e.id),
+						className: `
+                            w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left
+                            ${P("saved", e.id) ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-primary/50 hover:bg-muted/50"}
+                          `,
+						children: [l(e.type), /* @__PURE__ */ s("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ o("div", {
+								className: "text-sm font-medium text-foreground",
+								children: u(e)
+							}), e.expiryMonth && e.expiryYear && /* @__PURE__ */ s("div", {
+								className: "text-xs text-muted-foreground",
+								children: [
+									"Expires ",
+									e.expiryMonth.toString().padStart(2, "0"),
+									"/",
+									e.expiryYear
+								]
+							})]
+						})]
+					}, e.id)), /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => O(!1),
+						className: "text-xs text-primary hover:underline flex items-center gap-1 pl-1",
+						children: [/* @__PURE__ */ o(t, { className: "h-3 w-3 rotate-180" }), "Hide other cards"]
+					})] }) : /* @__PURE__ */ s("button", {
+						type: "button",
+						onClick: () => O(!0),
+						className: "text-xs text-primary hover:underline flex items-center gap-1 pl-1",
+						children: [
+							/* @__PURE__ */ o(t, { className: "h-3 w-3" }),
+							"Show ",
+							M.length,
+							" more card",
+							M.length > 1 ? "s" : ""
+						]
+					}) })
+				] }),
+				/* @__PURE__ */ o("div", {
+					className: "text-xs font-medium text-muted-foreground uppercase tracking-wide pt-2",
+					children: i.length > 0 ? "Or use new card" : _ ? "Or pay with card" : "Pay with Card"
+				}),
+				g && A && /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => N("new", "RAZORPAY"),
+					className: `
+                w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left
+                ${P("new", "RAZORPAY") ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-primary/50 hover:bg-muted/50"}
+              `,
+					children: [
+						/* @__PURE__ */ o(r, { className: `h-5 w-5 shrink-0 ${P("new", "RAZORPAY") ? "text-primary" : "text-muted-foreground"}` }),
+						/* @__PURE__ */ s("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ o("div", {
+								className: "text-sm font-medium text-foreground",
+								children: "UPI / Cards / Netbanking"
+							}), /* @__PURE__ */ o("div", {
+								className: "text-xs text-muted-foreground",
+								children: "Razorpay"
+							})]
+						}),
+						/* @__PURE__ */ o("span", {
+							className: "text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue",
+							children: "Recommended"
+						})
+					]
+				}),
+				h && /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => N("new", "STRIPE"),
+					className: `
+                w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left
+                ${P("new", "STRIPE") ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-primary/50 hover:bg-muted/50"}
+              `,
+					children: [
+						/* @__PURE__ */ o(r, { className: `h-5 w-5 shrink-0 ${P("new", "STRIPE") ? "text-primary" : "text-muted-foreground"}` }),
+						/* @__PURE__ */ s("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ o("div", {
+								className: "text-sm font-medium text-foreground",
+								children: "Credit / Debit Cards"
+							}), /* @__PURE__ */ o("div", {
+								className: "text-xs text-muted-foreground",
+								children: "Stripe - Multi-currency"
+							})]
+						}),
+						!A && /* @__PURE__ */ o("span", {
+							className: "text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue",
+							children: "Recommended"
+						})
+					]
+				}),
+				!d && p !== "CREDITS" && p !== "AUTO" && !C && /* @__PURE__ */ o("div", {
+					className: "mt-4 pt-4 border-t border-border",
+					children: /* @__PURE__ */ s("label", {
+						className: "flex items-start gap-3 cursor-pointer group",
+						children: [/* @__PURE__ */ o("input", {
+							type: "checkbox",
+							checked: x,
+							onChange: (e) => S(e.target.checked),
+							className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0"
+						}), /* @__PURE__ */ s("div", {
+							className: "flex-1",
+							children: [/* @__PURE__ */ o("div", {
+								className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors",
+								children: "Save card for future use"
+							}), /* @__PURE__ */ o("div", {
+								className: "text-xs text-muted-foreground mt-0.5",
+								children: "Securely save this payment method for faster checkout next time"
+							})]
+						})]
+					})
+				}),
+				!d && p !== "CREDITS" && p !== "AUTO" && C && /* @__PURE__ */ o("div", {
+					className: "mt-4 pt-4 border-t border-border",
+					children: /* @__PURE__ */ s("div", {
+						className: "flex items-start gap-2 text-xs text-muted-foreground bg-muted/50 p-3 rounded-lg",
+						children: [/* @__PURE__ */ o("svg", {
+							className: "h-4 w-4 mt-0.5 flex-shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ o("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							})
+						}), /* @__PURE__ */ o("div", { children: "Your payment method will be securely saved for auto-renewal" })]
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { d as UnifiedPaymentMethodSelector };
+
+//# sourceMappingURL=UnifiedPaymentMethodSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnifiedPaymentMethodSelector.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/UnifiedPaymentMethodSelector.tsx"],"sourcesContent":["/**\n * Unified Payment Method Selector\n * Combines payment providers and saved payment methods into one clear interface\n */\n\nimport { type FC, useState } from 'react';\nimport { Coins, CreditCard, Wallet, ChevronDown } from 'lucide-react';\nimport type { SavedPaymentMethod } from '../types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface UnifiedPaymentMethodSelectorProps {\n  // Saved cards\n  savedPaymentMethods: SavedPaymentMethod[];\n  selectedPaymentMethodId: string | null;\n  onSelectSavedCard: (id: string | null) => void;\n\n  // Provider selection (for new cards)\n  selectedProvider: 'CREDITS' | 'STRIPE' | 'RAZORPAY' | 'AUTO';\n  onSelectProvider: (provider: 'CREDITS' | 'STRIPE' | 'RAZORPAY') => void;\n\n  // Provider availability\n  stripeEnabled: boolean;\n  razorpayEnabled: boolean;\n  canPayWithCredits: boolean;\n  availableCredits: number;\n  totalAmount: number;\n  billingCountry?: string;\n\n  // Save card option\n  saveCard: boolean;\n  onSaveCardChange: (save: boolean) => void;\n\n  // Auto-renewal (when enabled, card must be saved - checkbox hidden)\n  autoRenewEnabled?: boolean;\n\n  isLoading?: boolean;\n}\n\nconst getCardIcon = (type: string) => {\n  if (type === 'WALLET') return <Wallet className=\"h-4 w-4\" />;\n  return <CreditCard className=\"h-4 w-4\" />;\n};\n\nconst getCardDisplay = (pm: SavedPaymentMethod): string => {\n  const type =\n    pm.type === 'CREDIT_CARD' ? 'Credit Card' : pm.type === 'DEBIT_CARD' ? 'Debit Card' : pm.type;\n  const last4 = pm.last4 ? ` •••• ${pm.last4}` : '';\n  const brand = pm.brand ? ` (${pm.brand})` : '';\n  return `${type}${last4}${brand}`;\n};\n\nexport const UnifiedPaymentMethodSelector: FC<UnifiedPaymentMethodSelectorProps> = ({\n  savedPaymentMethods,\n  selectedPaymentMethodId,\n  onSelectSavedCard,\n  selectedProvider,\n  onSelectProvider,\n  stripeEnabled,\n  razorpayEnabled,\n  canPayWithCredits,\n  availableCredits,\n  totalAmount,\n  billingCountry,\n  saveCard,\n  onSaveCardChange,\n  autoRenewEnabled = false,\n  isLoading = 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 [showAllSavedCards, setShowAllSavedCards] = useState(false);\n  const hasEnoughCredits = availableCredits >= totalAmount;\n  const isIndia = billingCountry === 'IN';\n\n  // Get default card or first card for collapsible view\n  const defaultSavedCard = savedPaymentMethods.find((pm) => pm.isDefault) || savedPaymentMethods[0];\n  const otherSavedCards = savedPaymentMethods.filter((pm) => pm.id !== defaultSavedCard?.id);\n\n  const handleSelect = (type: 'saved' | 'new', value: string) => {\n    if (type === 'saved') {\n      // When selecting saved card, set it and auto-determine provider\n      const selectedCard = savedPaymentMethods.find((pm) => pm.id === value);\n      if (selectedCard) {\n        onSelectSavedCard(value);\n        // Auto-set provider based on card type\n        if (selectedCard.razorpayPaymentMethodId) {\n          onSelectProvider('RAZORPAY');\n        } else if (selectedCard.stripePaymentMethodId) {\n          onSelectProvider('STRIPE');\n        }\n      }\n    } else {\n      // When selecting new card payment, clear saved card selection\n      onSelectSavedCard(null);\n      onSelectProvider(value as 'CREDITS' | 'STRIPE' | 'RAZORPAY');\n    }\n  };\n\n  const isSelected = (type: 'saved' | 'new', value: string): boolean => {\n    if (type === 'saved') {\n      return selectedPaymentMethodId === value;\n    } else {\n      return !selectedPaymentMethodId && selectedProvider === value;\n    }\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      <h3 className=\"text-sm font-medium text-foreground\">\n        {tr('billing.checkout.paymentMethod', 'Payment Method')}\n      </h3>\n\n      {isLoading ? (\n        <div className=\"space-y-2\">\n          <div className=\"h-16 rounded-lg border border-border bg-muted animate-pulse\" />\n          <div className=\"h-16 rounded-lg border border-border bg-muted animate-pulse\" />\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          {/* Credits Option */}\n          {canPayWithCredits && (\n            <button\n              type=\"button\"\n              onClick={() => handleSelect('new', 'CREDITS')}\n              disabled={!hasEnoughCredits}\n              className={`\n                w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n                ${\n                  isSelected('new', 'CREDITS')\n                    ? 'border-primary bg-primary/5 ring-1 ring-primary'\n                    : 'border-border hover:border-primary/50 hover:bg-muted/50'\n                }\n                ${!hasEnoughCredits && 'opacity-50 cursor-not-allowed'}\n              `}\n            >\n              <Coins\n                className={`h-5 w-5 shrink-0 ${isSelected('new', 'CREDITS') ? 'text-primary' : 'text-muted-foreground'}`}\n              />\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-sm font-medium text-foreground\">Pay with Credits</div>\n                <div className=\"text-xs text-muted-foreground\">\n                  {hasEnoughCredits\n                    ? `Available: ${availableCredits.toLocaleString()} credits`\n                    : `Insufficient credits (need ${totalAmount.toLocaleString()})`}\n                </div>\n              </div>\n              {hasEnoughCredits && (\n                <span className=\"text-xs px-2 py-0.5 rounded bg-success/10 text-success\">\n                  Instant\n                </span>\n              )}\n            </button>\n          )}\n\n          {/* Saved Cards Section */}\n          {savedPaymentMethods.length > 0 && (\n            <>\n              <div className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide pt-2\">\n                Saved Cards\n              </div>\n\n              {/* Default/First Card - Always Shown */}\n              {defaultSavedCard && (\n                <button\n                  type=\"button\"\n                  onClick={() => handleSelect('saved', defaultSavedCard.id)}\n                  className={`\n                    w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n                    ${\n                      isSelected('saved', defaultSavedCard.id)\n                        ? 'border-primary bg-primary/5 ring-1 ring-primary'\n                        : 'border-border hover:border-primary/50 hover:bg-muted/50'\n                    }\n                  `}\n                >\n                  {getCardIcon(defaultSavedCard.type)}\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"text-sm font-medium text-foreground\">\n                      {getCardDisplay(defaultSavedCard)}\n                    </div>\n                    {defaultSavedCard.expiryMonth && defaultSavedCard.expiryYear && (\n                      <div className=\"text-xs text-muted-foreground\">\n                        Expires {defaultSavedCard.expiryMonth.toString().padStart(2, '0')}/\n                        {defaultSavedCard.expiryYear}\n                      </div>\n                    )}\n                  </div>\n                  {defaultSavedCard.isDefault && (\n                    <span className=\"text-xs px-2 py-0.5 rounded bg-primary/10 text-primary\">\n                      Default\n                    </span>\n                  )}\n                </button>\n              )}\n\n              {/* Other Cards - Collapsible */}\n              {otherSavedCards.length > 0 && (\n                <>\n                  {showAllSavedCards ? (\n                    <>\n                      {otherSavedCards.map((pm) => (\n                        <button\n                          key={pm.id}\n                          type=\"button\"\n                          onClick={() => handleSelect('saved', pm.id)}\n                          className={`\n                            w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n                            ${\n                              isSelected('saved', pm.id)\n                                ? 'border-primary bg-primary/5 ring-1 ring-primary'\n                                : 'border-border hover:border-primary/50 hover:bg-muted/50'\n                            }\n                          `}\n                        >\n                          {getCardIcon(pm.type)}\n                          <div className=\"flex-1 min-w-0\">\n                            <div className=\"text-sm font-medium text-foreground\">\n                              {getCardDisplay(pm)}\n                            </div>\n                            {pm.expiryMonth && pm.expiryYear && (\n                              <div className=\"text-xs text-muted-foreground\">\n                                Expires {pm.expiryMonth.toString().padStart(2, '0')}/{pm.expiryYear}\n                              </div>\n                            )}\n                          </div>\n                        </button>\n                      ))}\n                      <button\n                        type=\"button\"\n                        onClick={() => setShowAllSavedCards(false)}\n                        className=\"text-xs text-primary hover:underline flex items-center gap-1 pl-1\"\n                      >\n                        <ChevronDown className=\"h-3 w-3 rotate-180\" />\n                        Hide other cards\n                      </button>\n                    </>\n                  ) : (\n                    <button\n                      type=\"button\"\n                      onClick={() => setShowAllSavedCards(true)}\n                      className=\"text-xs text-primary hover:underline flex items-center gap-1 pl-1\"\n                    >\n                      <ChevronDown className=\"h-3 w-3\" />\n                      Show {otherSavedCards.length} more card\n                      {otherSavedCards.length > 1 ? 's' : ''}\n                    </button>\n                  )}\n                </>\n              )}\n            </>\n          )}\n\n          {/* New Card Options */}\n          <div className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide pt-2\">\n            {savedPaymentMethods.length > 0\n              ? 'Or use new card'\n              : canPayWithCredits\n                ? 'Or pay with card'\n                : 'Pay with Card'}\n          </div>\n\n          {/* Razorpay (India) */}\n          {razorpayEnabled && isIndia && (\n            <button\n              type=\"button\"\n              onClick={() => handleSelect('new', 'RAZORPAY')}\n              className={`\n                w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n                ${\n                  isSelected('new', 'RAZORPAY')\n                    ? 'border-primary bg-primary/5 ring-1 ring-primary'\n                    : 'border-border hover:border-primary/50 hover:bg-muted/50'\n                }\n              `}\n            >\n              <CreditCard\n                className={`h-5 w-5 shrink-0 ${isSelected('new', 'RAZORPAY') ? 'text-primary' : 'text-muted-foreground'}`}\n              />\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-sm font-medium text-foreground\">UPI / Cards / Netbanking</div>\n                <div className=\"text-xs text-muted-foreground\">Razorpay</div>\n              </div>\n              <span className=\"text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue\">\n                Recommended\n              </span>\n            </button>\n          )}\n\n          {/* Stripe (International) */}\n          {stripeEnabled && (\n            <button\n              type=\"button\"\n              onClick={() => handleSelect('new', 'STRIPE')}\n              className={`\n                w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n                ${\n                  isSelected('new', 'STRIPE')\n                    ? 'border-primary bg-primary/5 ring-1 ring-primary'\n                    : 'border-border hover:border-primary/50 hover:bg-muted/50'\n                }\n              `}\n            >\n              <CreditCard\n                className={`h-5 w-5 shrink-0 ${isSelected('new', 'STRIPE') ? 'text-primary' : 'text-muted-foreground'}`}\n              />\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-sm font-medium text-foreground\">Credit / Debit Cards</div>\n                <div className=\"text-xs text-muted-foreground\">Stripe - Multi-currency</div>\n              </div>\n              {!isIndia && (\n                <span className=\"text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue\">\n                  Recommended\n                </span>\n              )}\n            </button>\n          )}\n\n          {/* Save Card Checkbox - Only show when using new card (not saved card, not credits) */}\n          {!selectedPaymentMethodId &&\n            selectedProvider !== 'CREDITS' &&\n            selectedProvider !== 'AUTO' &&\n            !autoRenewEnabled && (\n              <div className=\"mt-4 pt-4 border-t border-border\">\n                <label className=\"flex items-start gap-3 cursor-pointer group\">\n                  <input\n                    type=\"checkbox\"\n                    checked={saveCard}\n                    onChange={(e) => onSaveCardChange(e.target.checked)}\n                    className=\"mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0\"\n                  />\n                  <div className=\"flex-1\">\n                    <div className=\"text-sm font-medium text-foreground group-hover:text-primary transition-colors\">\n                      Save card for future use\n                    </div>\n                    <div className=\"text-xs text-muted-foreground mt-0.5\">\n                      Securely save this payment method for faster checkout next time\n                    </div>\n                  </div>\n                </label>\n              </div>\n            )}\n\n          {/* Auto-renewal notice - Show when auto-renewal is enabled */}\n          {!selectedPaymentMethodId &&\n            selectedProvider !== 'CREDITS' &&\n            selectedProvider !== 'AUTO' &&\n            autoRenewEnabled && (\n              <div className=\"mt-4 pt-4 border-t border-border\">\n                <div className=\"flex items-start gap-2 text-xs text-muted-foreground bg-muted/50 p-3 rounded-lg\">\n                  <svg\n                    className=\"h-4 w-4 mt-0.5 flex-shrink-0\"\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=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n                    />\n                  </svg>\n                  <div>Your payment method will be securely saved for auto-renewal</div>\n                </div>\n              </div>\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+/**
+ * Checkout Module Components
+ */
+export { BillingAccountSelector } from './BillingAccountSelector';
+export { NativeCheckoutView } from './NativeCheckoutView';
+export { PaymentProviderSelector } from './PaymentProviderSelector';
+export { SavedCardSelector } from './SavedCardSelector';
+export { CurrencySelector } from './CurrencySelector';
+export { OrderSummary } from './OrderSummary';
+export { PromoCodeInput } from './PromoCodeInput';
+export { CreditsPaymentOption } from './CreditsPaymentOption';
+export { CreditsAmountInput } from './CreditsAmountInput';
+export { StripePaymentForm } from './StripePaymentForm';
+export { RazorpayPaymentButton } from './RazorpayPaymentButton';
+export { SubscriptionSelector } from './SubscriptionSelector';
+export { AutoPayToggle } from './AutoPayToggle';
+export { CompactAutoPayToggle } from './CompactAutoPayToggle';
+export { SimpleAutoPayToggle } from './SimpleAutoPayToggle';
+export { UnifiedPaymentMethodSelector } from './UnifiedPaymentMethodSelector';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC"}

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

@@ -0,0 +1,16 @@
+import "./NativeCheckoutView.js";
+import "./BillingAccountSelector.js";
+import "./PaymentProviderSelector.js";
+import "./SavedCardSelector.js";
+import "./CurrencySelector.js";
+import "./OrderSummary.js";
+import "./PromoCodeInput.js";
+import "./CreditsPaymentOption.js";
+import "./CreditsAmountInput.js";
+import "./StripePaymentForm.js";
+import "./RazorpayPaymentButton.js";
+import "./SubscriptionSelector.js";
+import "./AutoPayToggle.js";
+import "./CompactAutoPayToggle.js";
+import "./SimpleAutoPayToggle.js";
+import "./UnifiedPaymentMethodSelector.js";

package/dist/billing/modules/checkout/graphql/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Checkout Module GraphQL Operations
+ * Re-exports typed documents from generated operations
+ */
+export { GetPaymentProviderConfigCheckoutDocument as GET_PAYMENT_PROVIDER_CONFIG, GetBillingAccountsCheckoutDocument as GET_BILLING_ACCOUNTS, GetDefaultBillingAccountCheckoutDocument as GET_DEFAULT_BILLING_ACCOUNT, GetPlanCheckoutDocument as GET_PLAN, GetSelectedAddonCheckoutDocument as GET_ADDON, GetCostOfCreditsCheckoutDocument as GET_COST_OF_CREDITS, ConvertCurrencyDocument as CONVERT_CURRENCY, GetDiscountByCodeDocument as GET_DISCOUNT_BY_CODE, InitiatePaymentCheckoutDocument as INITIATE_PAYMENT, GetPaymentMethodsCheckoutDocument as GET_PAYMENT_METHODS, SpendCreditsCheckoutDocument as SPEND_CREDITS, GetPaymentStatusDocument as GET_PAYMENT_STATUS, GetCreditTransactionStatusDocument as GET_CREDIT_TRANSACTION_STATUS, GetActiveSubscriptionsDocument as GET_ACTIVE_SUBSCRIPTIONS, CalculateTaxDocument as CALCULATE_TAX, GetStoreOrderDocument as GET_STORE_ORDER, } from '../../../../generated/global-operations';
+//# sourceMappingURL=index.d.ts.map

package/dist/billing/modules/checkout/graphql/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/graphql/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,wCAAwC,IAAI,2BAA2B,EACvE,kCAAkC,IAAI,oBAAoB,EAC1D,wCAAwC,IAAI,2BAA2B,EACvE,uBAAuB,IAAI,QAAQ,EACnC,gCAAgC,IAAI,SAAS,EAC7C,gCAAgC,IAAI,mBAAmB,EACvD,uBAAuB,IAAI,gBAAgB,EAC3C,yBAAyB,IAAI,oBAAoB,EACjD,+BAA+B,IAAI,gBAAgB,EACnD,iCAAiC,IAAI,mBAAmB,EACxD,4BAA4B,IAAI,aAAa,EAC7C,wBAAwB,IAAI,kBAAkB,EAC9C,kCAAkC,IAAI,6BAA6B,EACnE,8BAA8B,IAAI,wBAAwB,EAC1D,oBAAoB,IAAI,aAAa,EACrC,qBAAqB,IAAI,eAAe,GACzC,MAAM,yCAAyC,CAAC"}

package/dist/billing/modules/checkout/hooks/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Checkout Module Hooks
+ */
+export { useCheckout } from './useCheckout';
+export { useNativeCheckout } from './useNativeCheckout';
+export { usePaymentProviders } from './usePaymentProviders';
+export { usePaymentStatusPolling } from './usePaymentStatusPolling';
+export type { PaymentStatus, CreditTransactionStatus, UnifiedPaymentStatus, PaymentStatusResult, UsePaymentStatusPollingOptions, UsePaymentStatusPollingResult, } from './usePaymentStatusPolling';
+//# sourceMappingURL=index.d.ts.map

package/dist/billing/modules/checkout/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EACV,aAAa,EACb,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,2BAA2B,CAAC"}

package/dist/billing/modules/checkout/hooks/index.js

@@ -0,0 +1,4 @@
+import "./useCheckout.js";
+import "./useNativeCheckout.js";
+import "./usePaymentProviders.js";
+import "./usePaymentStatusPolling.js";