@burdenoff/microfe-billing 2026.917.3 → 2026.918.1

package/dist/billing/modules/checkout/hooks/useCheckout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckout.js","names":[],"sources":["../../../../../src/billing/modules/checkout/hooks/useCheckout.ts"],"sourcesContent":["/**\n * Main checkout hook for managing checkout state and payment processing\n */\n\nimport { useState, useCallback, useMemo, useEffect } from 'react';\nimport {\n  useInitiatePaymentCheckoutMutation,\n  useSpendCreditsCheckoutMutation,\n  useConvertCurrencyLazyQuery,\n  useValidateCouponLazyQuery,\n} from '../../../../generated/global-operations';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useEnsureStoreOrderBillingOrder } from './useStoreShipping';\nimport type {\n  CheckoutItem,\n  CheckoutBillingAccount,\n  PaymentProvider,\n  Currency,\n  CheckoutState,\n  PaymentInitResponse,\n  PromoCodeResult,\n  PurchaseType,\n} from '../types';\n\n/**\n * Credit conversion rate: How many credits equal 1 USD\n * This should match the backend creditRate.rateUSD (default 0.01 means 100 credits = $1)\n */\n// Exported so callers that need a per-item (rather than aggregate) credits\n// amount — e.g. the success page's itemized \"Items Purchased\" list — convert\n// consistently with creditsRequired/hasEnoughCredits below, instead of each\n// re-declaring their own copy of this rate.\nexport const CREDITS_PER_USD = 100;\n\ninterface UseCheckoutOptions {\n  billingAccountId?: string;\n  defaultCurrency?: Currency;\n  defaultSaveCard?: boolean;\n  upgradeFromSubscriptionId?: string;\n  /** For plan downgrades — old sub auto-renewal cancelled, runs to natural expiry */\n  downgradeFromSubscriptionId?: string;\n  /** For addon purchases - pre-selected subscription ID */\n  defaultSubscriptionId?: string;\n}\n\ninterface UseCheckoutResult {\n  // State\n  items: CheckoutItem[];\n  billingAccount: CheckoutBillingAccount | null;\n  selectedProvider: PaymentProvider;\n  selectedCurrency: Currency;\n  promoCode: string;\n  promoDiscount: number;\n  promoDiscountType: 'PERCENTAGE' | 'FIXED';\n  useCredits: boolean;\n  creditsToUse: number;\n  checkoutState: CheckoutState;\n  error: string | null;\n\n  // Saved card state\n  selectedPaymentMethodId: string | null;\n  saveCard: boolean;\n\n  // Auto-pay state (for subscription purchases)\n  autoRenew: boolean;\n  autoRenewPaymentMethodId: string | null;\n\n  // Subscription state (for addon purchases)\n  selectedSubscriptionId: string | null;\n\n  // Computed values\n  subtotal: number;\n  subtotalUSD: number;\n  discountAmount: number;\n  taxAmount: number;\n  taxRate: number;\n  taxType: string;\n  total: number;\n  totalInSelectedCurrency: number;\n  availableCredits: number;\n  /** subtotalUSD converted to credits (CREDITS_PER_USD) — the actual amount a\n   * CREDITS-provider purchase charges, in credits. total/totalInSelectedCurrency\n   * are in the selected display currency and must never be shown/used as a\n   * credits amount (they're a different number). */\n  creditsRequired: number;\n  hasEnoughCredits: boolean;\n  canPayWithCredits: boolean;\n  isLoading: boolean;\n  isProcessing: boolean;\n  isCalculatingTax: boolean;\n\n  // Currency conversion\n  conversionRate: number;\n  convertedAmount: number | null;\n\n  // Actions\n  addItem: (item: CheckoutItem) => void;\n  removeItem: (itemId: string) => void;\n  updateItemQuantity: (itemId: string, quantity: number) => void;\n  updateItemPrice: (itemId: string, price: number, currency?: Currency) => void;\n  clearItems: () => void;\n  setBillingAccount: (account: CheckoutBillingAccount | null) => void;\n  setPaymentProvider: (provider: PaymentProvider) => void;\n  setCurrency: (currency: Currency) => void;\n  setPromoCode: (code: string) => void;\n  validatePromoCode: () => Promise<PromoCodeResult>;\n  clearPromoCode: () => void;\n  setUseCredits: (use: boolean) => void;\n  setCreditsToUse: (amount: number) => void;\n  setSelectedPaymentMethodId: (id: string | null) => void;\n  setSaveCard: (save: boolean) => void;\n  setAutoRenew: (enabled: boolean) => void;\n  setAutoRenewPaymentMethodId: (id: string | null) => void;\n  setSelectedSubscriptionId: (id: string | null) => void;\n  initiatePayment: () => Promise<PaymentInitResponse>;\n  reset: () => void;\n}\n\nexport function useCheckout(options: UseCheckoutOptions = {}): UseCheckoutResult {\n  const { currentUser } = useBilling();\n  const {\n    defaultCurrency = 'USD',\n    defaultSaveCard = false, // CRITICAL: Never save cards without explicit user consent\n    upgradeFromSubscriptionId,\n    downgradeFromSubscriptionId,\n    defaultSubscriptionId,\n  } = options;\n\n  // Core state\n  const [items, setItems] = useState<CheckoutItem[]>([]);\n  const [billingAccount, setBillingAccount] = useState<CheckoutBillingAccount | null>(null);\n  const [selectedProvider, setSelectedProvider] = useState<PaymentProvider>('AUTO');\n  const [selectedCurrency, setSelectedCurrency] = useState<Currency>(defaultCurrency);\n  const [promoCode, setPromoCode] = useState('');\n  const [promoDiscount, setPromoDiscount] = useState(0);\n  const [promoDiscountType, setPromoDiscountType] = useState<'PERCENTAGE' | 'FIXED'>('PERCENTAGE');\n  const [useCredits, setUseCredits] = useState(false);\n  const [creditsToUse, setCreditsToUse] = useState(0);\n  const [checkoutState, setCheckoutState] = useState<CheckoutState>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [taxAmount, setTaxAmount] = useState(0);\n  const [taxRate, setTaxRate] = useState(0);\n  const [taxType, setTaxType] = useState<string>('NONE');\n\n  // Saved card state\n  const [selectedPaymentMethodId, setSelectedPaymentMethodId] = useState<string | null>(null);\n  const [saveCard, setSaveCard] = useState(defaultSaveCard);\n\n  // Auto-pay state (for subscription purchases)\n  const [autoRenew, setAutoRenew] = useState(false);\n  const [autoRenewPaymentMethodId, setAutoRenewPaymentMethodId] = useState<string | null>(null);\n\n  // Subscription state (for addon purchases)\n  const [selectedSubscriptionId, setSelectedSubscriptionId] = useState<string | null>(\n    defaultSubscriptionId ?? null\n  );\n\n  // GraphQL mutations and queries\n  const [initiatePaymentMutation] = useInitiatePaymentCheckoutMutation();\n  const [ensureStoreOrderBillingOrderMutation] = useEnsureStoreOrderBillingOrder();\n  const [spendCreditsMutation] = useSpendCreditsCheckoutMutation();\n  const [convertCurrency, { data: currencyData, loading: currencyLoading }] =\n    useConvertCurrencyLazyQuery();\n  // Separate lazy query (not the display-currency one above) for converting a\n  // non-USD native-currency subtotal into USD for the credits check — see the\n  // itemsNeedUsdConversion effect below for why this can't reuse convertCurrency.\n  const [convertNativeSubtotalToUsd, { data: usdSubtotalData }] = useConvertCurrencyLazyQuery();\n  const [validateCoupon] = useValidateCouponLazyQuery();\n\n  // Computed values\n\n  // The currency `total`/`subtotal` are actually denominated in. Plans,\n  // addons, and credits are priced in USD; store orders are priced in the\n  // order's own currency (item.currency), which may not be USD. Converting\n  // `total` to the selected currency must pivot FROM this currency, not\n  // always assume USD — see BOFF-7127 (a ₹50 item was shown as $4,748.50\n  // because the conversion always requested a USD→X rate and multiplied,\n  // which is only correct when the source amount actually is in USD).\n  const nativeCurrency = useMemo<Currency>(() => items[0]?.currency ?? 'USD', [items]);\n\n  const subtotal = useMemo(() => {\n    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n  }, [items]);\n\n  // Plans/addons always carry a real priceUSD (from the catalog's currencyPrices.USD\n  // — see CheckoutPage's addon/plan item construction). Store-order items only\n  // get priceUSD when their native currency already IS USD (buildStoreOrderCheckoutItems);\n  // when a store order is natively priced in, say, INR, there is no catalog USD\n  // price to fall back on — it has to be looked up live.\n  const itemsNeedLiveUsdConversion = useMemo(\n    () =>\n      items.length > 0 &&\n      nativeCurrency !== 'USD' &&\n      items.some((item) => item.priceUSD === undefined),\n    [items, nativeCurrency]\n  );\n\n  // Fetches the USD equivalent of the native-currency subtotal for the credits\n  // check. This is intentionally separate from the display-currency conversion\n  // effect further below: that effect is skipped whenever nativeCurrency ===\n  // selectedCurrency (the common case — e.g. an INR-priced store item viewed\n  // with INR selected), which is exactly when this conversion is still needed.\n  // Without it, subtotalUSD previously fell back to the raw native-currency\n  // number treated as if it were already USD (₹349 read as $349), inflating\n  // the credits requirement ~100x (BOFF-7192: \"need 34,900 credits\" for a\n  // ₹349 item that should need well under 500).\n  useEffect(() => {\n    if (!itemsNeedLiveUsdConversion || subtotal <= 0) return;\n    void convertNativeSubtotalToUsd({\n      variables: { amount: subtotal, toCurrency: 'USD', fromCurrency: nativeCurrency },\n    });\n  }, [itemsNeedLiveUsdConversion, subtotal, nativeCurrency, convertNativeSubtotalToUsd]);\n\n  const liveUsdSubtotal = usdSubtotalData?.convertCurrency?.amount ?? null;\n\n  // USD subtotal — always use priceUSD (base price) for credit calculations.\n  // item.price may be in a local currency (INR, EUR, etc.) when currencyPrices is set.\n  const subtotalUSD = useMemo(() => {\n    if (itemsNeedLiveUsdConversion) {\n      // 0 while the live rate is loading (rather than the un-converted native\n      // amount) keeps hasEnoughCredits conservatively false instead of\n      // briefly showing a wildly wrong credits-required figure.\n      return liveUsdSubtotal ?? 0;\n    }\n    return items.reduce((sum, item) => sum + (item.priceUSD ?? item.price) * item.quantity, 0);\n  }, [items, itemsNeedLiveUsdConversion, liveUsdSubtotal]);\n\n  const discountAmount = useMemo(() => {\n    if (!promoDiscount) return 0;\n    // promoDiscount now contains the actual discount amount from backend validation\n    // (not the percentage value), so use it directly\n    return Math.min(promoDiscount, subtotal);\n  }, [subtotal, promoDiscount]);\n\n  // Total includes tax (calculated via calculateTax query)\n  const total = useMemo(() => {\n    const afterDiscount = subtotal - discountAmount;\n    const withCredits = useCredits ? Math.max(0, afterDiscount - creditsToUse) : afterDiscount;\n    return withCredits + taxAmount;\n  }, [subtotal, discountAmount, useCredits, creditsToUse, taxAmount]);\n\n  const availableCredits = billingAccount?.creditAmount ?? 0;\n\n  // Use subtotalUSD so this works correctly for any display currency\n  const creditsRequired = useMemo(() => subtotalUSD * CREDITS_PER_USD, [subtotalUSD]);\n\n  const hasEnoughCredits = useMemo(\n    () => availableCredits >= creditsRequired,\n    [availableCredits, creditsRequired]\n  );\n\n  // Can only pay with credits if not buying credits\n  const canPayWithCredits = useMemo(() => {\n    const hasCreditsPurchase = items.some((item) => item.type === 'CREDITS');\n    return !hasCreditsPurchase && availableCredits > 0;\n  }, [items, availableCredits]);\n\n  // Currency conversion result\n  const convertedAmount = currencyData?.convertCurrency?.amount ?? null;\n  const conversionRate = currencyData?.convertCurrency?.exchangeRate ?? 1;\n  const totalInSelectedCurrency = convertedAmount ?? total;\n\n  const isLoading = checkoutState === 'loading' || currencyLoading;\n  const isProcessing = checkoutState === 'processing';\n\n  // Effect to trigger currency conversion when total or currency changes\n  // This ensures the converted amount is always up-to-date\n  useEffect(() => {\n    // Skip conversion for credit payments (no currency conversion needed)\n    if (selectedProvider === 'CREDITS') {\n      return;\n    }\n\n    // Skip if no items yet (cart is still loading)\n    if (items.length === 0) {\n      return;\n    }\n\n    // Skip conversion if items already have prices in selected currency\n    // (Plans/Addons with multi-currency pricing have currencyPrices stored)\n    const allItemsHaveLocalizedPrices = items.every(\n      (item) => item.currency === selectedCurrency || item.type === 'CREDITS'\n    );\n\n    if (allItemsHaveLocalizedPrices) {\n      // Items are already priced in the selected currency (from currencyPrices)\n      // No conversion needed - subtotal and total are already correct!\n      return;\n    }\n\n    // Only fetch if we have a valid total and it needs converting at all.\n    if (total > 0 && nativeCurrency !== selectedCurrency) {\n      // For INR, wait until tax has been calculated (taxAmount > 0 or taxRate is set)\n      // This prevents double API calls - one before tax, one after\n      if (selectedCurrency === 'INR' && taxAmount === 0 && subtotal > 0) {\n        // Tax hasn't been calculated yet, skip this conversion\n        // The effect will run again when taxAmount changes\n        return;\n      }\n\n      convertCurrency({\n        variables: {\n          amount: total,\n          toCurrency: selectedCurrency,\n          fromCurrency: nativeCurrency,\n        },\n      });\n    }\n  }, [\n    total,\n    selectedCurrency,\n    selectedProvider,\n    convertCurrency,\n    taxAmount,\n    subtotal,\n    items,\n    nativeCurrency,\n  ]);\n\n  // Effect to calculate tax when billing account, subtotal, or currency changes\n  // Tax is only applied for INR payments (18% GST)\n  useEffect(() => {\n    // Only calculate tax if we have a billing account and items\n    if (!billingAccount || subtotal <= 0) {\n      // Reset tax if no billing account or empty cart\n      setTaxAmount(0);\n      setTaxRate(0);\n      setTaxType('NONE');\n      return;\n    }\n\n    // Skip if paying with credits (no tax on credit payments)\n    if (selectedProvider === 'CREDITS') {\n      setTaxAmount(0);\n      setTaxRate(0);\n      setTaxType('NONE');\n      return;\n    }\n\n    // Only apply tax for INR payments\n    if (selectedCurrency !== 'INR') {\n      setTaxAmount(0);\n      setTaxRate(0);\n      setTaxType('NONE');\n      return;\n    }\n\n    // For INR: Calculate 18% GST on the USD amount, then we'll convert for display\n    const afterDiscount = subtotal - discountAmount;\n    const GST_RATE = 0.18;\n    const taxInUSD = afterDiscount * GST_RATE;\n\n    setTaxAmount(taxInUSD);\n    setTaxRate(GST_RATE);\n    setTaxType('GST');\n  }, [billingAccount, subtotal, discountAmount, selectedCurrency, selectedProvider]);\n\n  // Actions\n  const addItem = useCallback((item: CheckoutItem) => {\n    setItems((prev) => {\n      // Plans can only be purchased once - quantity is always 1\n      if (item.type === 'PLAN') {\n        // Check if any plan already exists in cart\n        const existingPlan = prev.find((i) => i.type === 'PLAN');\n        if (existingPlan) {\n          // Replace existing plan with new one (can only have 1 plan)\n          return prev.map((i) => (i.type === 'PLAN' ? { ...item, quantity: 1 } : i));\n        }\n        // Add new plan with quantity forced to 1\n        return [...prev, { ...item, quantity: 1 }];\n      }\n\n      // For addons and credits, allow quantity increment\n      const existing = prev.find((i) => i.id === item.id);\n      if (existing) {\n        return prev.map((i) =>\n          i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i\n        );\n      }\n      return [...prev, item];\n    });\n  }, []);\n\n  const removeItem = useCallback((itemId: string) => {\n    setItems((prev) => prev.filter((i) => i.id !== itemId));\n  }, []);\n\n  const updateItemQuantity = useCallback(\n    (itemId: string, quantity: number) => {\n      if (quantity <= 0) {\n        removeItem(itemId);\n        return;\n      }\n      setItems((prev) =>\n        prev.map((i) => {\n          if (i.id !== itemId) return i;\n          // Plans can only have quantity 1\n          if (i.type === 'PLAN') {\n            return { ...i, quantity: 1 };\n          }\n          return { ...i, quantity };\n        })\n      );\n    },\n    [removeItem]\n  );\n\n  const updateItemPrice = useCallback((itemId: string, price: number, currency?: Currency) => {\n    setItems((prev) =>\n      prev.map((i) => {\n        if (i.id !== itemId) return i;\n        // Update price and optionally currency\n        const updates: Partial<CheckoutItem> = { price };\n        if (currency) {\n          updates.currency = currency;\n        }\n        return { ...i, ...updates };\n      })\n    );\n  }, []);\n\n  const clearItems = useCallback(() => {\n    setItems([]);\n  }, []);\n\n  const handleSetBillingAccount = useCallback((account: CheckoutBillingAccount | null) => {\n    setBillingAccount(account);\n    // Reset credits usage when billing account changes — different accounts\n    // carry different credit balances, so a CREDITS selection made against\n    // the previous account may no longer be valid (or even offered) for\n    // this one. Without also resetting the provider, the order summary kept\n    // displaying amounts in Credits (and checkout could still submit with\n    // provider: 'CREDITS') even after the Credits option had disappeared\n    // from the payment method list for the new account.\n    setUseCredits(false);\n    setCreditsToUse(0);\n    setSelectedProvider((prev) => (prev === 'CREDITS' ? 'AUTO' : prev));\n  }, []);\n\n  const handleSetCurrency = useCallback(\n    (currency: Currency) => {\n      setSelectedCurrency(currency);\n      // Skip conversion if items already have localized prices\n      // (Plans/Addons with multi-currency pricing don't need conversion)\n      const allItemsHaveLocalizedPrices = items.every(\n        (item) => item.currency === currency || item.type === 'CREDITS'\n      );\n\n      // Only fetch conversion rate if items don't have localized prices\n      if (total > 0 && nativeCurrency !== currency && !allItemsHaveLocalizedPrices) {\n        convertCurrency({\n          variables: {\n            amount: total,\n            toCurrency: currency,\n            fromCurrency: nativeCurrency,\n          },\n        });\n      }\n    },\n    [total, convertCurrency, items, nativeCurrency]\n  );\n\n  const handleSetPaymentProvider = useCallback(\n    (provider: PaymentProvider) => {\n      setSelectedProvider(provider);\n      // Razorpay only supports INR\n      if (provider === 'RAZORPAY' && selectedCurrency !== 'INR') {\n        setSelectedCurrency('INR');\n      }\n      // Credits purchases don't support coupons yet (BOFF-7192) — clear any\n      // promo applied under a card provider so it can't leak into the\n      // credits success screen's displayed total.\n      if (provider === 'CREDITS') {\n        setPromoCode('');\n        setPromoDiscount(0);\n        setPromoDiscountType('PERCENTAGE');\n      }\n    },\n    [selectedCurrency]\n  );\n\n  const validatePromoCode = useCallback(async (): Promise<PromoCodeResult> => {\n    if (!promoCode.trim()) {\n      return {\n        valid: false,\n        code: '',\n        discountType: 'PERCENTAGE',\n        discountValue: 0,\n        error: 'Please enter a promo code',\n      };\n    }\n\n    try {\n      setCheckoutState('loading');\n\n      // Build validation input. planId/addonId let the backend resolve\n      // product/entity-type coupon scoping (BOFF-7391) from the actual Plan/\n      // Addon record — never send a raw product/entity string here, the\n      // backend derives it server-side from these IDs.\n      const firstCheckoutItem = items[0];\n      const validationInput = {\n        code: promoCode.trim().toUpperCase(),\n        userId: currentUser?.id ?? '',\n        userEmail: currentUser?.email,\n        amount: subtotal,\n        currency: selectedCurrency,\n        planId:\n          firstCheckoutItem?.type === 'PLAN'\n            ? (firstCheckoutItem.metadata?.planId as string) || firstCheckoutItem.id\n            : undefined,\n        addonId:\n          firstCheckoutItem?.type === 'ADDON'\n            ? (firstCheckoutItem.metadata?.addonId as string) || firstCheckoutItem.id\n            : undefined,\n      };\n\n      const { data, error: queryError } = await validateCoupon({\n        variables: {\n          input: validationInput,\n        },\n      });\n\n      if (queryError || !data?.validateCoupon) {\n        setPromoDiscount(0);\n        setCheckoutState('idle');\n        return {\n          valid: false,\n          code: promoCode,\n          discountType: 'PERCENTAGE',\n          discountValue: 0,\n          error: 'Failed to validate coupon',\n        };\n      }\n\n      const response = data.validateCoupon;\n\n      if (!response.valid) {\n        setPromoDiscount(0);\n        setCheckoutState('idle');\n        return {\n          valid: false,\n          code: promoCode,\n          discountType: 'PERCENTAGE',\n          discountValue: 0,\n          error: response.error || 'Invalid coupon code',\n        };\n      }\n\n      // Extract discount details from coupon\n      const coupon = response.coupon;\n      if (!coupon) {\n        setPromoDiscount(0);\n        setCheckoutState('idle');\n        return {\n          valid: false,\n          code: promoCode,\n          discountType: 'PERCENTAGE',\n          discountValue: 0,\n          error: 'Coupon data not found',\n        };\n      }\n\n      // Use the ACTUAL discount amount from validation (includes caps and currency conversion)\n      const actualDiscountAmount = response.discountAmount || 0;\n\n      const discountType = coupon.type === 'FIXED_AMOUNT' ? 'FIXED' : 'PERCENTAGE';\n      setPromoDiscount(actualDiscountAmount); // Use actual discount, not coupon.value\n      setPromoDiscountType(discountType);\n      setCheckoutState('idle');\n\n      return {\n        valid: true,\n        code: coupon.code,\n        discountType,\n        discountValue: actualDiscountAmount, // Use actual discount, not coupon.value\n      };\n    } catch {\n      setPromoDiscount(0);\n      setCheckoutState('idle');\n      return {\n        valid: false,\n        code: promoCode,\n        discountType: 'PERCENTAGE',\n        discountValue: 0,\n        error: 'Failed to validate coupon',\n      };\n    }\n  }, [\n    currentUser?.email,\n    currentUser?.id,\n    items,\n    promoCode,\n    selectedCurrency,\n    subtotal,\n    validateCoupon,\n  ]);\n\n  const clearPromoCode = useCallback(() => {\n    setPromoCode('');\n    setPromoDiscount(0);\n    setPromoDiscountType('PERCENTAGE');\n  }, []);\n\n  const handleSetCreditsToUse = useCallback(\n    (amount: number) => {\n      const maxCredits = Math.min(amount, availableCredits, subtotal - discountAmount);\n      setCreditsToUse(Math.max(0, maxCredits));\n    },\n    [availableCredits, subtotal, discountAmount]\n  );\n\n  const initiatePayment = useCallback(async (): Promise<PaymentInitResponse> => {\n    if (!billingAccount) {\n      return {\n        success: false,\n        provider: 'AUTO',\n        subtotal: 0,\n        taxAmount: 0,\n        taxRate: 0,\n        total: 0,\n        taxType: 'NONE',\n        jurisdiction: 'UNKNOWN',\n        currency: selectedCurrency,\n        error: 'Please select a billing account',\n      };\n    }\n\n    if (items.length === 0) {\n      return {\n        success: false,\n        provider: 'AUTO',\n        subtotal: 0,\n        taxAmount: 0,\n        taxRate: 0,\n        total: 0,\n        taxType: 'NONE',\n        jurisdiction: 'UNKNOWN',\n        currency: selectedCurrency,\n        error: 'No items in checkout',\n      };\n    }\n\n    try {\n      setCheckoutState('processing');\n      setError(null);\n\n      // Determine purchase type from first item\n      const firstItem = items[0];\n      let purchaseType: PurchaseType = firstItem.type;\n\n      // Check if this is a store order checkout (detect early)\n      const storeOrderItem = items.find((item) => item.metadata?.storeOrderId);\n      const storeOrderId = storeOrderItem?.metadata?.storeOrderId as string | undefined;\n      let billingOrderId =\n        (items.find((item) => item.metadata?.billingOrderId)?.metadata?.billingOrderId as\n          string | undefined) || undefined;\n\n      // For store orders, use 'ORDER' purchase type\n      if (storeOrderId) {\n        purchaseType = 'ORDER' as PurchaseType;\n      }\n\n      // Calculate amount to charge\n      const chargeAmount = subtotal - discountAmount;\n\n      // Determine provider\n      let provider = selectedProvider;\n      if (provider === 'AUTO') {\n        provider = selectedCurrency === 'INR' ? 'RAZORPAY' : 'STRIPE';\n      }\n\n      // If this is a store order without a billing order yet, let the store service\n      // create it from its authoritative order snapshot. This persists the billing\n      // order ID and registers the signed callback on the same service that owns\n      // the order; browser line-item prices and shipping values are never sent to\n      // billing as the order snapshot.\n      if (purchaseType === 'ORDER' && !billingOrderId && storeOrderId && billingAccount) {\n        const { data: billingOrderResult } = await ensureStoreOrderBillingOrderMutation({\n          variables: {\n            storeOrderId,\n            billingAccountId: billingAccount.id,\n            currency: selectedCurrency,\n          },\n        });\n        const ensureResult = billingOrderResult?.ensureStoreOrderBillingOrder;\n\n        if (ensureResult?.success && ensureResult.billingOrderId) {\n          billingOrderId = ensureResult.billingOrderId;\n        } else {\n          const errMsg = ensureResult?.error ?? 'Failed to create billing order';\n          setCheckoutState('error');\n          setError(errMsg);\n          return {\n            success: false,\n            provider,\n            subtotal: chargeAmount,\n            taxAmount: 0,\n            taxRate: 0,\n            total: chargeAmount,\n            taxType: 'NONE',\n            jurisdiction: 'UNKNOWN',\n            currency: selectedCurrency,\n            error: errMsg,\n          };\n        }\n      }\n\n      // ========================================\n      // CREDITS PAYMENT - use spendCredits mutation\n      // Supports multiple addons\n      // ========================================\n      if (provider === 'CREDITS') {\n        const addonItems = items.filter((item) => item.type === 'ADDON');\n        const planItem = items.find((item) => item.type === 'PLAN');\n\n        const { data } = await spendCreditsMutation({\n          variables: {\n            input: {\n              billingAccountId: billingAccount.id,\n              // Store order purchase: the only one of planId/addOnIds/orderId\n              // spendCredits actually needs for this purchase type. Without\n              // it, the mutation has nothing to charge and the backend\n              // rejects it outright (BOFF-7192).\n              orderId: purchaseType === 'ORDER' ? billingOrderId : undefined,\n              planId: planItem ? (planItem.metadata?.planId as string) || planItem.id : undefined,\n              // Multiple addons supported via addOnIds array\n              addOnIds:\n                addonItems.length > 0\n                  ? addonItems.map((item) => ({\n                      id: (item.metadata?.addonId as string) || item.id,\n                      quantity: item.quantity,\n                    }))\n                  : undefined,\n              isAnnual: planItem?.metadata?.duration === 'yearly',\n              // Include upgrade context if changing plans\n              upgradeFromSubscriptionId: upgradeFromSubscriptionId || undefined,\n              // Include downgrade context if downgrading\n              downgradeFromSubscriptionId: downgradeFromSubscriptionId || undefined,\n              // For addon purchases - subscription to attach to\n              subscriptionId: addonItems.length > 0 ? selectedSubscriptionId : undefined,\n              // For PER_SEAT plans - pass seat count for credit calculation + subscription storage\n              seatCount: planItem?.metadata?.seatCount as number | undefined,\n            },\n          },\n        });\n\n        const response = data?.spendCredits;\n\n        if (!response?.creditTransactionID) {\n          setCheckoutState('error');\n          setError('Failed to process credit payment');\n          return {\n            success: false,\n            provider: 'CREDITS',\n            subtotal: chargeAmount,\n            taxAmount: 0,\n            taxRate: 0,\n            total: chargeAmount,\n            taxType: 'NONE',\n            jurisdiction: 'UNKNOWN',\n            currency: selectedCurrency,\n            error: 'Failed to process credit payment',\n          };\n        }\n\n        setCheckoutState('success');\n        return {\n          success: true,\n          provider: 'CREDITS',\n          subtotal: chargeAmount,\n          taxAmount: 0,\n          taxRate: 0,\n          total: chargeAmount,\n          taxType: 'NONE',\n          jurisdiction: 'UNKNOWN',\n          currency: selectedCurrency,\n          // Return transaction ID for success handling\n          orderId: response.creditTransactionID,\n        };\n      }\n\n      // ========================================\n      // CARD PAYMENT (Stripe/Razorpay) - use initiatePayment\n      // Supports single or multiple addons\n      // Supports store orders (via orderId parameter)\n      // ========================================\n      const addonItems = items.filter((item) => item.type === 'ADDON');\n\n      // Build addon IDs and quantities for the mutation\n      const addonIds =\n        addonItems.length > 0\n          ? addonItems.map((item) => (item.metadata?.addonId as string) || item.id)\n          : undefined;\n      const quantities =\n        addonItems.length > 0 ? addonItems.map((item) => item.quantity) : undefined;\n\n      // Determine if this is an annual plan purchase\n      const planItem = items.find((item) => item.type === 'PLAN');\n      const isAnnualPlan = planItem?.metadata?.duration === 'yearly';\n\n      // Determine auto-renew payment method\n      const autoRenewPMId =\n        purchaseType === 'PLAN' && autoRenew\n          ? autoRenewPaymentMethodId || selectedPaymentMethodId || undefined\n          : undefined;\n\n      const { data } = await initiatePaymentMutation({\n        variables: {\n          input: {\n            billingAccountId: billingAccount.id,\n            amount: chargeAmount, // Note: Backend IGNORES this and calculates from DB\n            currency: selectedCurrency,\n            purchaseType,\n            provider: provider,\n            // Store order - use orderId parameter (billing order ID)\n            orderId: billingOrderId || undefined,\n            creditAmount: purchaseType === 'CREDITS' ? firstItem.quantity : undefined,\n            planId:\n              purchaseType === 'PLAN'\n                ? (firstItem.metadata?.planId as string) || firstItem.id\n                : undefined,\n            // Single addon (backwards compatible) - skip if store order\n            addonId:\n              purchaseType === 'ADDON' && addonItems.length === 1 && !billingOrderId\n                ? (addonItems[0].metadata?.addonId as string) || addonItems[0].id\n                : undefined,\n            quantity:\n              purchaseType === 'ADDON' && addonItems.length === 1 && !billingOrderId\n                ? addonItems[0].quantity\n                : undefined,\n            // Multiple addons (cart checkout) - skip if store order\n            addonIds:\n              purchaseType === 'ADDON' && addonItems.length > 1 && !billingOrderId\n                ? addonIds\n                : undefined,\n            quantities:\n              purchaseType === 'ADDON' && addonItems.length > 1 && !billingOrderId\n                ? quantities\n                : undefined,\n            // For addon purchases - subscription to attach to (skip for store orders)\n            subscriptionId:\n              purchaseType === 'ADDON' && !billingOrderId ? selectedSubscriptionId : undefined,\n            // Saved card support\n            paymentMethodId: selectedPaymentMethodId || undefined,\n            // Save card if: user checked save card OR auto-renewal is enabled (which requires a saved card)\n            // Only save if not using existing card (selectedPaymentMethodId is null)\n            saveCard: !selectedPaymentMethodId ? saveCard || autoRenew : undefined,\n            // Include upgrade context if changing plans\n            upgradeFromSubscriptionId: upgradeFromSubscriptionId || undefined,\n            // Include downgrade context if downgrading\n            downgradeFromSubscriptionId: downgradeFromSubscriptionId || undefined,\n            // Annual plan flag (for pricing calculation)\n            isAnnual: isAnnualPlan || undefined,\n            // Promo code (validated and applied on backend)\n            promoCode: promoCode || undefined,\n            // Auto-renewal (for plan purchases only)\n            autoRenew: purchaseType === 'PLAN' && autoRenew ? true : undefined,\n            autoRenewPaymentMethodId: autoRenewPMId,\n          },\n        },\n      });\n\n      const response = data?.initiatePayment;\n\n      if (!response?.success) {\n        setCheckoutState('error');\n        setError(response?.error ?? 'Payment initiation failed');\n        return {\n          success: false,\n          provider: provider,\n          subtotal: chargeAmount,\n          taxAmount: 0,\n          taxRate: 0,\n          total: chargeAmount,\n          taxType: 'NONE',\n          jurisdiction: 'UNKNOWN',\n          currency: selectedCurrency,\n          error: response?.error ?? 'Payment initiation failed',\n        };\n      }\n\n      // Note: Tax is already calculated upfront in the effect, don't overwrite\n      // The response tax is in converted currency which would mess up display\n      setCheckoutState('success');\n\n      return response;\n    } catch (err) {\n      const errorMessage = err instanceof Error ? err.message : 'An error occurred';\n      setCheckoutState('error');\n      setError(errorMessage);\n      return {\n        success: false,\n        provider: 'AUTO',\n        subtotal: 0,\n        taxAmount: 0,\n        taxRate: 0,\n        total: 0,\n        taxType: 'NONE',\n        jurisdiction: 'UNKNOWN',\n        currency: selectedCurrency,\n        error: errorMessage,\n      };\n    }\n  }, [\n    billingAccount,\n    items,\n    selectedCurrency,\n    selectedProvider,\n    subtotal,\n    discountAmount,\n    promoCode,\n    selectedPaymentMethodId,\n    saveCard,\n    autoRenew,\n    autoRenewPaymentMethodId,\n    selectedSubscriptionId,\n    upgradeFromSubscriptionId,\n    downgradeFromSubscriptionId,\n    initiatePaymentMutation,\n    ensureStoreOrderBillingOrderMutation,\n    spendCreditsMutation,\n  ]);\n\n  const reset = useCallback(() => {\n    setItems([]);\n    setBillingAccount(null);\n    setSelectedProvider('AUTO');\n    setSelectedCurrency(defaultCurrency);\n    setPromoCode('');\n    setPromoDiscount(0);\n    setPromoDiscountType('PERCENTAGE');\n    setUseCredits(false);\n    setCreditsToUse(0);\n    setCheckoutState('idle');\n    setError(null);\n    setTaxAmount(0);\n    setTaxRate(0);\n    setTaxType('NONE');\n    setSelectedPaymentMethodId(null);\n    setSaveCard(defaultSaveCard);\n    setAutoRenew(false);\n    setAutoRenewPaymentMethodId(null);\n    setSelectedSubscriptionId(defaultSubscriptionId ?? null);\n  }, [defaultCurrency, defaultSaveCard, defaultSubscriptionId]);\n\n  return {\n    // State\n    items,\n    billingAccount,\n    selectedProvider,\n    selectedCurrency,\n    promoCode,\n    promoDiscount,\n    promoDiscountType,\n    useCredits,\n    creditsToUse,\n    checkoutState,\n    error,\n\n    // Saved card state\n    selectedPaymentMethodId,\n    saveCard,\n\n    // Auto-pay state\n    autoRenew,\n    autoRenewPaymentMethodId,\n\n    // Subscription state (for addon purchases)\n    selectedSubscriptionId,\n\n    // Computed\n    subtotal,\n    subtotalUSD,\n    discountAmount,\n    taxAmount,\n    taxRate,\n    taxType,\n    total,\n    totalInSelectedCurrency,\n    availableCredits,\n    creditsRequired,\n    hasEnoughCredits,\n    canPayWithCredits,\n    isLoading,\n    isProcessing,\n    isCalculatingTax: false, // Tax is calculated synchronously now\n    conversionRate,\n    convertedAmount,\n\n    // Actions\n    addItem,\n    removeItem,\n    updateItemQuantity,\n    updateItemPrice,\n    clearItems,\n    setBillingAccount: handleSetBillingAccount,\n    setPaymentProvider: handleSetPaymentProvider,\n    setCurrency: handleSetCurrency,\n    setPromoCode,\n    validatePromoCode,\n    clearPromoCode,\n    setUseCredits,\n    setCreditsToUse: handleSetCreditsToUse,\n    setSelectedPaymentMethodId,\n    setSaveCard,\n    setAutoRenew,\n    setAutoRenewPaymentMethodId,\n    setSelectedSubscriptionId,\n    initiatePayment,\n    reset,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useCheckout.js","names":[],"sources":["../../../../../src/billing/modules/checkout/hooks/useCheckout.ts"],"sourcesContent":["/**\n * Main checkout hook for managing checkout state and payment processing\n */\n\nimport { useState, useCallback, useMemo, useEffect } from 'react';\nimport {\n  useInitiatePaymentCheckoutMutation,\n  useSpendCreditsCheckoutMutation,\n  useConvertCurrencyLazyQuery,\n  useValidateCouponLazyQuery,\n} from '../../../../generated/global-operations';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useEnsureStoreOrderBillingOrder } from './useStoreShipping';\nimport type {\n  CheckoutItem,\n  CheckoutBillingAccount,\n  PaymentProvider,\n  Currency,\n  CheckoutState,\n  PaymentInitResponse,\n  PromoCodeResult,\n  PurchaseType,\n} from '../types';\n\n/**\n * Credit conversion rate: How many credits equal 1 USD\n * This should match the backend creditRate.rateUSD (default 0.01 means 100 credits = $1)\n */\n// Exported so callers that need a per-item (rather than aggregate) credits\n// amount — e.g. the success page's itemized \"Items Purchased\" list — convert\n// consistently with creditsRequired/hasEnoughCredits below, instead of each\n// re-declaring their own copy of this rate.\nexport const CREDITS_PER_USD = 100;\n\ninterface UseCheckoutOptions {\n  billingAccountId?: string;\n  defaultCurrency?: Currency;\n  defaultSaveCard?: boolean;\n  upgradeFromSubscriptionId?: string;\n  /** For plan downgrades — old sub auto-renewal cancelled, runs to natural expiry */\n  downgradeFromSubscriptionId?: string;\n  /** For addon purchases - pre-selected subscription ID */\n  defaultSubscriptionId?: string;\n}\n\ninterface UseCheckoutResult {\n  // State\n  items: CheckoutItem[];\n  billingAccount: CheckoutBillingAccount | null;\n  selectedProvider: PaymentProvider;\n  selectedCurrency: Currency;\n  promoCode: string;\n  promoDiscount: number;\n  promoDiscountType: 'PERCENTAGE' | 'FIXED';\n  useCredits: boolean;\n  creditsToUse: number;\n  checkoutState: CheckoutState;\n  error: string | null;\n\n  // Saved card state\n  selectedPaymentMethodId: string | null;\n  saveCard: boolean;\n\n  // Auto-pay state (for subscription purchases)\n  autoRenew: boolean;\n  autoRenewPaymentMethodId: string | null;\n\n  // Subscription state (for addon purchases)\n  selectedSubscriptionId: string | null;\n\n  // Computed values\n  subtotal: number;\n  subtotalUSD: number;\n  discountAmount: number;\n  taxAmount: number;\n  taxRate: number;\n  taxType: string;\n  total: number;\n  totalInSelectedCurrency: number;\n  availableCredits: number;\n  /** subtotalUSD converted to credits (CREDITS_PER_USD) — the actual amount a\n   * CREDITS-provider purchase charges, in credits. total/totalInSelectedCurrency\n   * are in the selected display currency and must never be shown/used as a\n   * credits amount (they're a different number). */\n  creditsRequired: number;\n  hasEnoughCredits: boolean;\n  canPayWithCredits: boolean;\n  isLoading: boolean;\n  isProcessing: boolean;\n  isCalculatingTax: boolean;\n\n  // Currency conversion\n  conversionRate: number;\n  convertedAmount: number | null;\n\n  // Actions\n  addItem: (item: CheckoutItem) => void;\n  removeItem: (itemId: string) => void;\n  updateItemQuantity: (itemId: string, quantity: number) => void;\n  updateItemPrice: (itemId: string, price: number, currency?: Currency) => void;\n  clearItems: () => void;\n  setBillingAccount: (account: CheckoutBillingAccount | null) => void;\n  setPaymentProvider: (provider: PaymentProvider) => void;\n  setCurrency: (currency: Currency) => void;\n  setPromoCode: (code: string) => void;\n  validatePromoCode: () => Promise<PromoCodeResult>;\n  clearPromoCode: () => void;\n  setUseCredits: (use: boolean) => void;\n  setCreditsToUse: (amount: number) => void;\n  setSelectedPaymentMethodId: (id: string | null) => void;\n  setSaveCard: (save: boolean) => void;\n  setAutoRenew: (enabled: boolean) => void;\n  setAutoRenewPaymentMethodId: (id: string | null) => void;\n  setSelectedSubscriptionId: (id: string | null) => void;\n  initiatePayment: () => Promise<PaymentInitResponse>;\n  reset: () => void;\n}\n\nexport function useCheckout(options: UseCheckoutOptions = {}): UseCheckoutResult {\n  const { currentUser } = useBilling();\n  const {\n    defaultCurrency = 'USD',\n    defaultSaveCard = false, // CRITICAL: Never save cards without explicit user consent\n    upgradeFromSubscriptionId,\n    downgradeFromSubscriptionId,\n    defaultSubscriptionId,\n  } = options;\n\n  // Core state\n  const [items, setItems] = useState<CheckoutItem[]>([]);\n  const [billingAccount, setBillingAccount] = useState<CheckoutBillingAccount | null>(null);\n  const [selectedProvider, setSelectedProvider] = useState<PaymentProvider>('AUTO');\n  const [selectedCurrency, setSelectedCurrency] = useState<Currency>(defaultCurrency);\n  const [promoCode, setPromoCode] = useState('');\n  const [promoDiscount, setPromoDiscount] = useState(0);\n  const [promoDiscountType, setPromoDiscountType] = useState<'PERCENTAGE' | 'FIXED'>('PERCENTAGE');\n  const [useCredits, setUseCredits] = useState(false);\n  const [creditsToUse, setCreditsToUse] = useState(0);\n  const [checkoutState, setCheckoutState] = useState<CheckoutState>('idle');\n  const [error, setError] = useState<string | null>(null);\n  const [taxAmount, setTaxAmount] = useState(0);\n  const [taxRate, setTaxRate] = useState(0);\n  const [taxType, setTaxType] = useState<string>('NONE');\n\n  // Saved card state\n  const [selectedPaymentMethodId, setSelectedPaymentMethodId] = useState<string | null>(null);\n  const [saveCard, setSaveCard] = useState(defaultSaveCard);\n\n  // Auto-pay state (for subscription purchases)\n  const [autoRenew, setAutoRenew] = useState(false);\n  const [autoRenewPaymentMethodId, setAutoRenewPaymentMethodId] = useState<string | null>(null);\n\n  // Subscription state (for addon purchases)\n  const [selectedSubscriptionId, setSelectedSubscriptionId] = useState<string | null>(\n    defaultSubscriptionId ?? null\n  );\n\n  // GraphQL mutations and queries\n  const [initiatePaymentMutation] = useInitiatePaymentCheckoutMutation();\n  const [ensureStoreOrderBillingOrderMutation] = useEnsureStoreOrderBillingOrder();\n  const [spendCreditsMutation] = useSpendCreditsCheckoutMutation();\n  const [convertCurrency, { data: currencyData, loading: currencyLoading }] =\n    useConvertCurrencyLazyQuery();\n  // Separate lazy query (not the display-currency one above) for converting a\n  // non-USD native-currency subtotal into USD for the credits check — see the\n  // itemsNeedUsdConversion effect below for why this can't reuse convertCurrency.\n  const [convertNativeSubtotalToUsd, { data: usdSubtotalData }] = useConvertCurrencyLazyQuery();\n  const [validateCoupon] = useValidateCouponLazyQuery();\n\n  // Computed values\n\n  // The currency `total`/`subtotal` are actually denominated in. Plans,\n  // addons, and credits are priced in USD; store orders are priced in the\n  // order's own currency (item.currency), which may not be USD. Converting\n  // `total` to the selected currency must pivot FROM this currency, not\n  // always assume USD — see BOFF-7127 (a ₹50 item was shown as $4,748.50\n  // because the conversion always requested a USD→X rate and multiplied,\n  // which is only correct when the source amount actually is in USD).\n  const nativeCurrency = useMemo<Currency>(() => items[0]?.currency ?? 'USD', [items]);\n\n  const subtotal = useMemo(() => {\n    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n  }, [items]);\n\n  // Plans/addons always carry a real priceUSD (from the catalog's currencyPrices.USD\n  // — see CheckoutPage's addon/plan item construction). Store-order items only\n  // get priceUSD when their native currency already IS USD (buildStoreOrderCheckoutItems);\n  // when a store order is natively priced in, say, INR, there is no catalog USD\n  // price to fall back on — it has to be looked up live.\n  const itemsNeedLiveUsdConversion = useMemo(\n    () =>\n      items.length > 0 &&\n      nativeCurrency !== 'USD' &&\n      items.some((item) => item.priceUSD === undefined),\n    [items, nativeCurrency]\n  );\n\n  // Fetches the USD equivalent of the native-currency subtotal for the credits\n  // check. This is intentionally separate from the display-currency conversion\n  // effect further below: that effect is skipped whenever nativeCurrency ===\n  // selectedCurrency (the common case — e.g. an INR-priced store item viewed\n  // with INR selected), which is exactly when this conversion is still needed.\n  // Without it, subtotalUSD previously fell back to the raw native-currency\n  // number treated as if it were already USD (₹349 read as $349), inflating\n  // the credits requirement ~100x (BOFF-7192: \"need 34,900 credits\" for a\n  // ₹349 item that should need well under 500).\n  useEffect(() => {\n    if (!itemsNeedLiveUsdConversion || subtotal <= 0) return;\n    void convertNativeSubtotalToUsd({\n      variables: { amount: subtotal, toCurrency: 'USD', fromCurrency: nativeCurrency },\n    });\n  }, [itemsNeedLiveUsdConversion, subtotal, nativeCurrency, convertNativeSubtotalToUsd]);\n\n  const liveUsdSubtotal = usdSubtotalData?.convertCurrency?.amount ?? null;\n\n  // USD subtotal — always use priceUSD (base price) for credit calculations.\n  // item.price may be in a local currency (INR, EUR, etc.) when currencyPrices is set.\n  const subtotalUSD = useMemo(() => {\n    if (itemsNeedLiveUsdConversion) {\n      // 0 while the live rate is loading (rather than the un-converted native\n      // amount) keeps hasEnoughCredits conservatively false instead of\n      // briefly showing a wildly wrong credits-required figure.\n      return liveUsdSubtotal ?? 0;\n    }\n    return items.reduce((sum, item) => sum + (item.priceUSD ?? item.price) * item.quantity, 0);\n  }, [items, itemsNeedLiveUsdConversion, liveUsdSubtotal]);\n\n  const discountAmount = useMemo(() => {\n    if (!promoDiscount) return 0;\n    // promoDiscount now contains the actual discount amount from backend validation\n    // (not the percentage value), so use it directly\n    return Math.min(promoDiscount, subtotal);\n  }, [subtotal, promoDiscount]);\n\n  // Total includes tax (calculated via calculateTax query)\n  const total = useMemo(() => {\n    const afterDiscount = subtotal - discountAmount;\n    const withCredits = useCredits ? Math.max(0, afterDiscount - creditsToUse) : afterDiscount;\n    return withCredits + taxAmount;\n  }, [subtotal, discountAmount, useCredits, creditsToUse, taxAmount]);\n\n  const availableCredits = billingAccount?.creditAmount ?? 0;\n\n  // Use subtotalUSD so this works correctly for any display currency\n  const creditsRequired = useMemo(() => subtotalUSD * CREDITS_PER_USD, [subtotalUSD]);\n\n  const hasEnoughCredits = useMemo(\n    () => availableCredits >= creditsRequired,\n    [availableCredits, creditsRequired]\n  );\n\n  // Can only pay with credits if not buying credits\n  const canPayWithCredits = useMemo(() => {\n    const hasCreditsPurchase = items.some((item) => item.type === 'CREDITS');\n    return !hasCreditsPurchase && availableCredits > 0;\n  }, [items, availableCredits]);\n\n  // Currency conversion result\n  const convertedAmount = currencyData?.convertCurrency?.amount ?? null;\n  const conversionRate = currencyData?.convertCurrency?.exchangeRate ?? 1;\n  const totalInSelectedCurrency = convertedAmount ?? total;\n\n  const isLoading = checkoutState === 'loading' || currencyLoading;\n  const isProcessing = checkoutState === 'processing';\n\n  // Effect to trigger currency conversion when total or currency changes\n  // This ensures the converted amount is always up-to-date\n  useEffect(() => {\n    // Skip conversion for credit payments (no currency conversion needed)\n    if (selectedProvider === 'CREDITS') {\n      return;\n    }\n\n    // Skip if no items yet (cart is still loading)\n    if (items.length === 0) {\n      return;\n    }\n\n    // Skip conversion if items already have prices in selected currency\n    // (Plans/Addons with multi-currency pricing have currencyPrices stored)\n    const allItemsHaveLocalizedPrices = items.every(\n      (item) => item.currency === selectedCurrency || item.type === 'CREDITS'\n    );\n\n    if (allItemsHaveLocalizedPrices) {\n      // Items are already priced in the selected currency (from currencyPrices)\n      // No conversion needed - subtotal and total are already correct!\n      return;\n    }\n\n    // Only fetch if we have a valid total and it needs converting at all.\n    if (total > 0 && nativeCurrency !== selectedCurrency) {\n      // For INR, wait until tax has been calculated (taxAmount > 0 or taxRate is set)\n      // This prevents double API calls - one before tax, one after\n      if (selectedCurrency === 'INR' && taxAmount === 0 && subtotal > 0) {\n        // Tax hasn't been calculated yet, skip this conversion\n        // The effect will run again when taxAmount changes\n        return;\n      }\n\n      convertCurrency({\n        variables: {\n          amount: total,\n          toCurrency: selectedCurrency,\n          fromCurrency: nativeCurrency,\n        },\n      });\n    }\n  }, [\n    total,\n    selectedCurrency,\n    selectedProvider,\n    convertCurrency,\n    taxAmount,\n    subtotal,\n    items,\n    nativeCurrency,\n  ]);\n\n  // Effect to calculate tax when billing account, subtotal, or currency changes\n  // Tax is only applied for INR payments (18% GST)\n  useEffect(() => {\n    // Only calculate tax if we have a billing account and items\n    if (!billingAccount || subtotal <= 0) {\n      // Reset tax if no billing account or empty cart\n      setTaxAmount(0);\n      setTaxRate(0);\n      setTaxType('NONE');\n      return;\n    }\n\n    // Skip if paying with credits (no tax on credit payments)\n    if (selectedProvider === 'CREDITS') {\n      setTaxAmount(0);\n      setTaxRate(0);\n      setTaxType('NONE');\n      return;\n    }\n\n    // Only apply tax for INR payments\n    if (selectedCurrency !== 'INR') {\n      setTaxAmount(0);\n      setTaxRate(0);\n      setTaxType('NONE');\n      return;\n    }\n\n    // For INR: Calculate 18% GST on the USD amount, then we'll convert for display\n    const afterDiscount = subtotal - discountAmount;\n    const GST_RATE = 0.18;\n    const taxInUSD = afterDiscount * GST_RATE;\n\n    setTaxAmount(taxInUSD);\n    setTaxRate(GST_RATE);\n    setTaxType('GST');\n  }, [billingAccount, subtotal, discountAmount, selectedCurrency, selectedProvider]);\n\n  // Actions\n  const addItem = useCallback((item: CheckoutItem) => {\n    setItems((prev) => {\n      // Plans can only be purchased once - quantity is always 1\n      if (item.type === 'PLAN') {\n        // Check if any plan already exists in cart\n        const existingPlan = prev.find((i) => i.type === 'PLAN');\n        if (existingPlan) {\n          // Replace existing plan with new one (can only have 1 plan)\n          return prev.map((i) => (i.type === 'PLAN' ? { ...item, quantity: 1 } : i));\n        }\n        // Add new plan with quantity forced to 1\n        return [...prev, { ...item, quantity: 1 }];\n      }\n\n      // For addons and credits, allow quantity increment\n      const existing = prev.find((i) => i.id === item.id);\n      if (existing) {\n        return prev.map((i) =>\n          i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i\n        );\n      }\n      return [...prev, item];\n    });\n  }, []);\n\n  const removeItem = useCallback((itemId: string) => {\n    setItems((prev) => prev.filter((i) => i.id !== itemId));\n  }, []);\n\n  const updateItemQuantity = useCallback(\n    (itemId: string, quantity: number) => {\n      if (quantity <= 0) {\n        removeItem(itemId);\n        return;\n      }\n      setItems((prev) =>\n        prev.map((i) => {\n          if (i.id !== itemId) return i;\n          // Plans can only have quantity 1\n          if (i.type === 'PLAN') {\n            return { ...i, quantity: 1 };\n          }\n          return { ...i, quantity };\n        })\n      );\n    },\n    [removeItem]\n  );\n\n  const updateItemPrice = useCallback((itemId: string, price: number, currency?: Currency) => {\n    setItems((prev) =>\n      prev.map((i) => {\n        if (i.id !== itemId) return i;\n        // Update price and optionally currency\n        const updates: Partial<CheckoutItem> = { price };\n        if (currency) {\n          updates.currency = currency;\n        }\n        return { ...i, ...updates };\n      })\n    );\n  }, []);\n\n  const clearItems = useCallback(() => {\n    setItems([]);\n  }, []);\n\n  const handleSetBillingAccount = useCallback((account: CheckoutBillingAccount | null) => {\n    setBillingAccount(account);\n    // Reset credits usage when billing account changes — different accounts\n    // carry different credit balances, so a CREDITS selection made against\n    // the previous account may no longer be valid (or even offered) for\n    // this one. Without also resetting the provider, the order summary kept\n    // displaying amounts in Credits (and checkout could still submit with\n    // provider: 'CREDITS') even after the Credits option had disappeared\n    // from the payment method list for the new account.\n    setUseCredits(false);\n    setCreditsToUse(0);\n    setSelectedProvider((prev) => (prev === 'CREDITS' ? 'AUTO' : prev));\n  }, []);\n\n  const handleSetCurrency = useCallback(\n    (currency: Currency) => {\n      setSelectedCurrency(currency);\n      // Skip conversion if items already have localized prices\n      // (Plans/Addons with multi-currency pricing don't need conversion)\n      const allItemsHaveLocalizedPrices = items.every(\n        (item) => item.currency === currency || item.type === 'CREDITS'\n      );\n\n      // Only fetch conversion rate if items don't have localized prices\n      if (total > 0 && nativeCurrency !== currency && !allItemsHaveLocalizedPrices) {\n        convertCurrency({\n          variables: {\n            amount: total,\n            toCurrency: currency,\n            fromCurrency: nativeCurrency,\n          },\n        });\n      }\n    },\n    [total, convertCurrency, items, nativeCurrency]\n  );\n\n  const handleSetPaymentProvider = useCallback(\n    (provider: PaymentProvider) => {\n      setSelectedProvider(provider);\n      // Razorpay only supports INR\n      if (provider === 'RAZORPAY' && selectedCurrency !== 'INR') {\n        setSelectedCurrency('INR');\n      }\n      // Credits purchases don't support coupons yet (BOFF-7192) — clear any\n      // promo applied under a card provider so it can't leak into the\n      // credits success screen's displayed total.\n      if (provider === 'CREDITS') {\n        setPromoCode('');\n        setPromoDiscount(0);\n        setPromoDiscountType('PERCENTAGE');\n      }\n    },\n    [selectedCurrency]\n  );\n\n  const validatePromoCode = useCallback(async (): Promise<PromoCodeResult> => {\n    if (!promoCode.trim()) {\n      return {\n        valid: false,\n        code: '',\n        discountType: 'PERCENTAGE',\n        discountValue: 0,\n        error: 'Please enter a promo code',\n      };\n    }\n\n    try {\n      setCheckoutState('loading');\n\n      // Build validation input. planId/addonId let the backend resolve\n      // product/entity-type coupon scoping (BOFF-7391) from the actual Plan/\n      // Addon record — never send a raw product/entity string here, the\n      // backend derives it server-side from these IDs.\n      const firstCheckoutItem = items[0];\n      const validationInput = {\n        code: promoCode.trim().toUpperCase(),\n        userId: currentUser?.id ?? '',\n        userEmail: currentUser?.email,\n        amount: subtotal,\n        currency: selectedCurrency,\n        planId:\n          firstCheckoutItem?.type === 'PLAN'\n            ? (firstCheckoutItem.metadata?.planId as string) || firstCheckoutItem.id\n            : undefined,\n        addonId:\n          firstCheckoutItem?.type === 'ADDON'\n            ? (firstCheckoutItem.metadata?.addonId as string) || firstCheckoutItem.id\n            : undefined,\n      };\n\n      const { data, error: queryError } = await validateCoupon({\n        variables: {\n          input: validationInput,\n        },\n      });\n\n      if (queryError || !data?.validateCoupon) {\n        setPromoDiscount(0);\n        setCheckoutState('idle');\n        return {\n          valid: false,\n          code: promoCode,\n          discountType: 'PERCENTAGE',\n          discountValue: 0,\n          error: 'Failed to validate coupon',\n        };\n      }\n\n      const response = data.validateCoupon;\n\n      if (!response.valid) {\n        setPromoDiscount(0);\n        setCheckoutState('idle');\n        return {\n          valid: false,\n          code: promoCode,\n          discountType: 'PERCENTAGE',\n          discountValue: 0,\n          error: response.error || 'Invalid coupon code',\n        };\n      }\n\n      // Extract discount details from coupon\n      const coupon = response.coupon;\n      if (!coupon) {\n        setPromoDiscount(0);\n        setCheckoutState('idle');\n        return {\n          valid: false,\n          code: promoCode,\n          discountType: 'PERCENTAGE',\n          discountValue: 0,\n          error: 'Coupon data not found',\n        };\n      }\n\n      // Use the ACTUAL discount amount from validation (includes caps and currency conversion)\n      const actualDiscountAmount = response.discountAmount || 0;\n\n      const discountType = coupon.type === 'FIXED_AMOUNT' ? 'FIXED' : 'PERCENTAGE';\n      setPromoDiscount(actualDiscountAmount); // Use actual discount, not coupon.value\n      setPromoDiscountType(discountType);\n      setCheckoutState('idle');\n\n      return {\n        valid: true,\n        code: coupon.code,\n        discountType,\n        discountValue: actualDiscountAmount, // Use actual discount, not coupon.value\n      };\n    } catch {\n      setPromoDiscount(0);\n      setCheckoutState('idle');\n      return {\n        valid: false,\n        code: promoCode,\n        discountType: 'PERCENTAGE',\n        discountValue: 0,\n        error: 'Failed to validate coupon',\n      };\n    }\n  }, [\n    currentUser?.email,\n    currentUser?.id,\n    items,\n    promoCode,\n    selectedCurrency,\n    subtotal,\n    validateCoupon,\n  ]);\n\n  const clearPromoCode = useCallback(() => {\n    setPromoCode('');\n    setPromoDiscount(0);\n    setPromoDiscountType('PERCENTAGE');\n  }, []);\n\n  const handleSetCreditsToUse = useCallback(\n    (amount: number) => {\n      const maxCredits = Math.min(amount, availableCredits, subtotal - discountAmount);\n      setCreditsToUse(Math.max(0, maxCredits));\n    },\n    [availableCredits, subtotal, discountAmount]\n  );\n\n  const initiatePayment = useCallback(async (): Promise<PaymentInitResponse> => {\n    if (!billingAccount) {\n      return {\n        success: false,\n        provider: 'AUTO',\n        subtotal: 0,\n        taxAmount: 0,\n        taxRate: 0,\n        total: 0,\n        taxType: 'NONE',\n        jurisdiction: 'UNKNOWN',\n        currency: selectedCurrency,\n        error: 'Please select a billing account',\n      };\n    }\n\n    if (items.length === 0) {\n      return {\n        success: false,\n        provider: 'AUTO',\n        subtotal: 0,\n        taxAmount: 0,\n        taxRate: 0,\n        total: 0,\n        taxType: 'NONE',\n        jurisdiction: 'UNKNOWN',\n        currency: selectedCurrency,\n        error: 'No items in checkout',\n      };\n    }\n\n    try {\n      setCheckoutState('processing');\n      setError(null);\n\n      // Determine purchase type from first item\n      const firstItem = items[0];\n      let purchaseType: PurchaseType = firstItem.type;\n\n      // Check if this is a store order checkout (detect early)\n      const storeOrderItem = items.find((item) => item.metadata?.storeOrderId);\n      const storeOrderId = storeOrderItem?.metadata?.storeOrderId as string | undefined;\n      let billingOrderId =\n        (items.find((item) => item.metadata?.billingOrderId)?.metadata?.billingOrderId as\n          | string\n          | undefined) || undefined;\n\n      // For store orders, use 'ORDER' purchase type\n      if (storeOrderId) {\n        purchaseType = 'ORDER' as PurchaseType;\n      }\n\n      // Calculate amount to charge\n      const chargeAmount = subtotal - discountAmount;\n\n      // Determine provider\n      let provider = selectedProvider;\n      if (provider === 'AUTO') {\n        provider = selectedCurrency === 'INR' ? 'RAZORPAY' : 'STRIPE';\n      }\n\n      // If this is a store order without a billing order yet, let the store service\n      // create it from its authoritative order snapshot. This persists the billing\n      // order ID and registers the signed callback on the same service that owns\n      // the order; browser line-item prices and shipping values are never sent to\n      // billing as the order snapshot.\n      if (purchaseType === 'ORDER' && !billingOrderId && storeOrderId && billingAccount) {\n        const { data: billingOrderResult } = await ensureStoreOrderBillingOrderMutation({\n          variables: {\n            storeOrderId,\n            billingAccountId: billingAccount.id,\n            currency: selectedCurrency,\n          },\n        });\n        const ensureResult = billingOrderResult?.ensureStoreOrderBillingOrder;\n\n        if (ensureResult?.success && ensureResult.billingOrderId) {\n          billingOrderId = ensureResult.billingOrderId;\n        } else {\n          const errMsg = ensureResult?.error ?? 'Failed to create billing order';\n          setCheckoutState('error');\n          setError(errMsg);\n          return {\n            success: false,\n            provider,\n            subtotal: chargeAmount,\n            taxAmount: 0,\n            taxRate: 0,\n            total: chargeAmount,\n            taxType: 'NONE',\n            jurisdiction: 'UNKNOWN',\n            currency: selectedCurrency,\n            error: errMsg,\n          };\n        }\n      }\n\n      // ========================================\n      // CREDITS PAYMENT - use spendCredits mutation\n      // Supports multiple addons\n      // ========================================\n      if (provider === 'CREDITS') {\n        const addonItems = items.filter((item) => item.type === 'ADDON');\n        const planItem = items.find((item) => item.type === 'PLAN');\n\n        const { data } = await spendCreditsMutation({\n          variables: {\n            input: {\n              billingAccountId: billingAccount.id,\n              // Store order purchase: the only one of planId/addOnIds/orderId\n              // spendCredits actually needs for this purchase type. Without\n              // it, the mutation has nothing to charge and the backend\n              // rejects it outright (BOFF-7192).\n              orderId: purchaseType === 'ORDER' ? billingOrderId : undefined,\n              planId: planItem ? (planItem.metadata?.planId as string) || planItem.id : undefined,\n              // Multiple addons supported via addOnIds array\n              addOnIds:\n                addonItems.length > 0\n                  ? addonItems.map((item) => ({\n                      id: (item.metadata?.addonId as string) || item.id,\n                      quantity: item.quantity,\n                    }))\n                  : undefined,\n              isAnnual: planItem?.metadata?.duration === 'yearly',\n              // Include upgrade context if changing plans\n              upgradeFromSubscriptionId: upgradeFromSubscriptionId || undefined,\n              // Include downgrade context if downgrading\n              downgradeFromSubscriptionId: downgradeFromSubscriptionId || undefined,\n              // For addon purchases - subscription to attach to\n              subscriptionId: addonItems.length > 0 ? selectedSubscriptionId : undefined,\n              // For PER_SEAT plans - pass seat count for credit calculation + subscription storage\n              seatCount: planItem?.metadata?.seatCount as number | undefined,\n            },\n          },\n        });\n\n        const response = data?.spendCredits;\n\n        if (!response?.creditTransactionID) {\n          setCheckoutState('error');\n          setError('Failed to process credit payment');\n          return {\n            success: false,\n            provider: 'CREDITS',\n            subtotal: chargeAmount,\n            taxAmount: 0,\n            taxRate: 0,\n            total: chargeAmount,\n            taxType: 'NONE',\n            jurisdiction: 'UNKNOWN',\n            currency: selectedCurrency,\n            error: 'Failed to process credit payment',\n          };\n        }\n\n        setCheckoutState('success');\n        return {\n          success: true,\n          provider: 'CREDITS',\n          subtotal: chargeAmount,\n          taxAmount: 0,\n          taxRate: 0,\n          total: chargeAmount,\n          taxType: 'NONE',\n          jurisdiction: 'UNKNOWN',\n          currency: selectedCurrency,\n          // Return transaction ID for success handling\n          orderId: response.creditTransactionID,\n        };\n      }\n\n      // ========================================\n      // CARD PAYMENT (Stripe/Razorpay) - use initiatePayment\n      // Supports single or multiple addons\n      // Supports store orders (via orderId parameter)\n      // ========================================\n      const addonItems = items.filter((item) => item.type === 'ADDON');\n\n      // Build addon IDs and quantities for the mutation\n      const addonIds =\n        addonItems.length > 0\n          ? addonItems.map((item) => (item.metadata?.addonId as string) || item.id)\n          : undefined;\n      const quantities =\n        addonItems.length > 0 ? addonItems.map((item) => item.quantity) : undefined;\n\n      // Determine if this is an annual plan purchase\n      const planItem = items.find((item) => item.type === 'PLAN');\n      const isAnnualPlan = planItem?.metadata?.duration === 'yearly';\n\n      // Determine auto-renew payment method\n      const autoRenewPMId =\n        purchaseType === 'PLAN' && autoRenew\n          ? autoRenewPaymentMethodId || selectedPaymentMethodId || undefined\n          : undefined;\n\n      const { data } = await initiatePaymentMutation({\n        variables: {\n          input: {\n            billingAccountId: billingAccount.id,\n            amount: chargeAmount, // Note: Backend IGNORES this and calculates from DB\n            currency: selectedCurrency,\n            purchaseType,\n            provider: provider,\n            // Store order - use orderId parameter (billing order ID)\n            orderId: billingOrderId || undefined,\n            creditAmount: purchaseType === 'CREDITS' ? firstItem.quantity : undefined,\n            planId:\n              purchaseType === 'PLAN'\n                ? (firstItem.metadata?.planId as string) || firstItem.id\n                : undefined,\n            // Single addon (backwards compatible) - skip if store order\n            addonId:\n              purchaseType === 'ADDON' && addonItems.length === 1 && !billingOrderId\n                ? (addonItems[0].metadata?.addonId as string) || addonItems[0].id\n                : undefined,\n            quantity:\n              purchaseType === 'ADDON' && addonItems.length === 1 && !billingOrderId\n                ? addonItems[0].quantity\n                : undefined,\n            // Multiple addons (cart checkout) - skip if store order\n            addonIds:\n              purchaseType === 'ADDON' && addonItems.length > 1 && !billingOrderId\n                ? addonIds\n                : undefined,\n            quantities:\n              purchaseType === 'ADDON' && addonItems.length > 1 && !billingOrderId\n                ? quantities\n                : undefined,\n            // For addon purchases - subscription to attach to (skip for store orders)\n            subscriptionId:\n              purchaseType === 'ADDON' && !billingOrderId ? selectedSubscriptionId : undefined,\n            // Saved card support\n            paymentMethodId: selectedPaymentMethodId || undefined,\n            // Save card if: user checked save card OR auto-renewal is enabled (which requires a saved card)\n            // Only save if not using existing card (selectedPaymentMethodId is null)\n            saveCard: !selectedPaymentMethodId ? saveCard || autoRenew : undefined,\n            // Include upgrade context if changing plans\n            upgradeFromSubscriptionId: upgradeFromSubscriptionId || undefined,\n            // Include downgrade context if downgrading\n            downgradeFromSubscriptionId: downgradeFromSubscriptionId || undefined,\n            // Annual plan flag (for pricing calculation)\n            isAnnual: isAnnualPlan || undefined,\n            // Promo code (validated and applied on backend)\n            promoCode: promoCode || undefined,\n            // Auto-renewal (for plan purchases only)\n            autoRenew: purchaseType === 'PLAN' && autoRenew ? true : undefined,\n            autoRenewPaymentMethodId: autoRenewPMId,\n          },\n        },\n      });\n\n      const response = data?.initiatePayment;\n\n      if (!response?.success) {\n        setCheckoutState('error');\n        setError(response?.error ?? 'Payment initiation failed');\n        return {\n          success: false,\n          provider: provider,\n          subtotal: chargeAmount,\n          taxAmount: 0,\n          taxRate: 0,\n          total: chargeAmount,\n          taxType: 'NONE',\n          jurisdiction: 'UNKNOWN',\n          currency: selectedCurrency,\n          error: response?.error ?? 'Payment initiation failed',\n        };\n      }\n\n      // Note: Tax is already calculated upfront in the effect, don't overwrite\n      // The response tax is in converted currency which would mess up display\n      setCheckoutState('success');\n\n      return response;\n    } catch (err) {\n      const errorMessage = err instanceof Error ? err.message : 'An error occurred';\n      setCheckoutState('error');\n      setError(errorMessage);\n      return {\n        success: false,\n        provider: 'AUTO',\n        subtotal: 0,\n        taxAmount: 0,\n        taxRate: 0,\n        total: 0,\n        taxType: 'NONE',\n        jurisdiction: 'UNKNOWN',\n        currency: selectedCurrency,\n        error: errorMessage,\n      };\n    }\n  }, [\n    billingAccount,\n    items,\n    selectedCurrency,\n    selectedProvider,\n    subtotal,\n    discountAmount,\n    promoCode,\n    selectedPaymentMethodId,\n    saveCard,\n    autoRenew,\n    autoRenewPaymentMethodId,\n    selectedSubscriptionId,\n    upgradeFromSubscriptionId,\n    downgradeFromSubscriptionId,\n    initiatePaymentMutation,\n    ensureStoreOrderBillingOrderMutation,\n    spendCreditsMutation,\n  ]);\n\n  const reset = useCallback(() => {\n    setItems([]);\n    setBillingAccount(null);\n    setSelectedProvider('AUTO');\n    setSelectedCurrency(defaultCurrency);\n    setPromoCode('');\n    setPromoDiscount(0);\n    setPromoDiscountType('PERCENTAGE');\n    setUseCredits(false);\n    setCreditsToUse(0);\n    setCheckoutState('idle');\n    setError(null);\n    setTaxAmount(0);\n    setTaxRate(0);\n    setTaxType('NONE');\n    setSelectedPaymentMethodId(null);\n    setSaveCard(defaultSaveCard);\n    setAutoRenew(false);\n    setAutoRenewPaymentMethodId(null);\n    setSelectedSubscriptionId(defaultSubscriptionId ?? null);\n  }, [defaultCurrency, defaultSaveCard, defaultSubscriptionId]);\n\n  return {\n    // State\n    items,\n    billingAccount,\n    selectedProvider,\n    selectedCurrency,\n    promoCode,\n    promoDiscount,\n    promoDiscountType,\n    useCredits,\n    creditsToUse,\n    checkoutState,\n    error,\n\n    // Saved card state\n    selectedPaymentMethodId,\n    saveCard,\n\n    // Auto-pay state\n    autoRenew,\n    autoRenewPaymentMethodId,\n\n    // Subscription state (for addon purchases)\n    selectedSubscriptionId,\n\n    // Computed\n    subtotal,\n    subtotalUSD,\n    discountAmount,\n    taxAmount,\n    taxRate,\n    taxType,\n    total,\n    totalInSelectedCurrency,\n    availableCredits,\n    creditsRequired,\n    hasEnoughCredits,\n    canPayWithCredits,\n    isLoading,\n    isProcessing,\n    isCalculatingTax: false, // Tax is calculated synchronously now\n    conversionRate,\n    convertedAmount,\n\n    // Actions\n    addItem,\n    removeItem,\n    updateItemQuantity,\n    updateItemPrice,\n    clearItems,\n    setBillingAccount: handleSetBillingAccount,\n    setPaymentProvider: handleSetPaymentProvider,\n    setCurrency: handleSetCurrency,\n    setPromoCode,\n    validatePromoCode,\n    clearPromoCode,\n    setUseCredits,\n    setCreditsToUse: handleSetCreditsToUse,\n    setSelectedPaymentMethodId,\n    setSaveCard,\n    setAutoRenew,\n    setAutoRenewPaymentMethodId,\n    setSelectedSubscriptionId,\n    initiatePayment,\n    reset,\n  };\n}\n"],"mappings":"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"}

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

@@ -113,7 +113,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 			/* @__PURE__ */ p("div", {
 				className: "p-4 sm:p-6",
 				children: [/* @__PURE__ */ p("div", {
-					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
+					className: "grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4",
 					children: [
 						/* @__PURE__ */ p("div", {
 							className: "space-y-1.5",

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveSubscriptionCard.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/ActiveSubscriptionCard.tsx"],"sourcesContent":["/**\n * Active Subscription Card Component\n * Displays the active subscription details with renewal info\n */\n\nimport { type FC, useMemo } from 'react';\nimport {\n  Crown,\n  Calendar,\n  ArrowRight,\n  RefreshCw,\n  Clock,\n  CreditCard,\n  Zap,\n  AlertTriangle,\n  Coins,\n} from 'lucide-react';\nimport type { BillingSubscription } from '../../../shared/types';\nimport { statusTokens, alertTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface ActiveSubscriptionCardProps {\n  subscription: BillingSubscription | null;\n  onViewDetails?: () => void;\n  onUpgrade?: () => void;\n  onManage?: () => void;\n  onPurchasePlan?: () => void;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nexport const ActiveSubscriptionCard: FC<ActiveSubscriptionCardProps> = ({\n  subscription,\n  onViewDetails,\n  onUpgrade,\n  onManage,\n  onPurchasePlan,\n  className = '',\n  dataTour,\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 formatDate = (dateString: string | undefined) => {\n    if (!dateString) return 'N/A';\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    });\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const daysUntilEnd = useMemo(() => {\n    if (!subscription?.endDate) return null;\n    const end = new Date(subscription.endDate);\n    const now = new Date();\n    const diff = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));\n    return diff;\n  }, [subscription?.endDate]);\n\n  const isExpiringSoon = daysUntilEnd !== null && daysUntilEnd <= 7 && daysUntilEnd > 0;\n  const isExpired = daysUntilEnd !== null && daysUntilEnd <= 0;\n\n  const getStatusColor = () => {\n    if (isExpired) return `${statusTokens.error.text} ${statusTokens.error.bg}`;\n    if (isExpiringSoon) return `${statusTokens.warning.text} ${statusTokens.warning.bg}`;\n    return `${statusTokens.success.text} ${statusTokens.success.bg}`;\n  };\n\n  const getStatusText = () => {\n    if (isExpired) return 'Expired';\n    if (isExpiringSoon) return 'Expiring Soon';\n    return 'Active';\n  };\n\n  // No subscription state\n  if (!subscription) {\n    return (\n      <section\n        data-tour={dataTour}\n        className={`border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 ${className}`}\n      >\n        <div className=\"flex flex-col items-center text-center py-4\">\n          <div className=\"size-16 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <Zap className=\"size-8 text-text-link\" />\n          </div>\n          <h3 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('billing.overview.noActiveSubscription', 'No Active Subscription')}\n          </h3>\n          <p className=\"text-sm text-text-secondary mb-6 max-w-sm\">\n            Subscribe to a plan to unlock premium features and get the most out of your account\n          </p>\n          {onPurchasePlan && (\n            <button\n              type=\"button\"\n              onClick={onPurchasePlan}\n              className=\"inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n            >\n              Browse Plans\n              <ArrowRight className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  const plan = subscription.plan;\n\n  return (\n    <section\n      data-tour={dataTour}\n      className={`border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden ${className}`}\n    >\n      {/* Expiring Soon Banner */}\n      {isExpiringSoon && (\n        <div className={`px-4 py-2 ${alertTokens.warning.container} border-b`}>\n          <div className={`flex items-center gap-2 ${alertTokens.warning.text}`}>\n            <AlertTriangle className=\"size-4\" />\n            <span className=\"text-sm font-medium\">\n              Your subscription expires in {daysUntilEnd} day{daysUntilEnd !== 1 ? 's' : ''}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Header */}\n      <header className=\"p-4 sm:p-6 border-b border-border-subtle\">\n        <div className=\"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"size-12 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0\">\n              <Crown className=\"size-6 text-action-primary-text\" />\n            </div>\n            <div>\n              <div className=\"flex items-center gap-2 flex-wrap\">\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {plan?.name || 'Subscription'}\n                </h3>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}\n                >\n                  {getStatusText()}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                {plan && formatCurrency(plan.price, plan.currency)} / {plan?.duration || 'month'}\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {onManage && (\n              <button\n                type=\"button\"\n                onClick={onManage}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Manage\n              </button>\n            )}\n            {onUpgrade && !isExpired && (\n              <button\n                type=\"button\"\n                onClick={onUpgrade}\n                className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Upgrade\n              </button>\n            )}\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 sm:p-6\">\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n          {/* Start Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Started\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <Calendar className=\"size-4 text-text-secondary\" />\n              {formatDate(subscription.startDate)}\n            </p>\n          </div>\n\n          {/* End Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              {isExpired ? 'Expired' : 'Ends'}\n            </p>\n            <p\n              className={`text-sm font-medium flex items-center gap-2 ${isExpired ? statusTokens.error.text : isExpiringSoon ? statusTokens.warning.text : 'text-text-primary'}`}\n            >\n              <Clock className=\"size-4\" />\n              {formatDate(subscription.endDate)}\n            </p>\n          </div>\n\n          {/* Auto Renewal */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Auto Renewal\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <RefreshCw\n                className={`size-4 ${subscription.autoRenewal ? statusTokens.success.icon : 'text-text-secondary'}`}\n              />\n              {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n            </p>\n          </div>\n\n          {/* Payment Gateway */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Payment Via\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              {subscription.paymentGateway === 'CREDITS' ? (\n                <Coins className={`size-4 ${statusTokens.warning.icon}`} />\n              ) : (\n                <CreditCard className=\"size-4 text-text-secondary\" />\n              )}\n              {subscription.paymentGateway === 'CREDITS'\n                ? 'Credits'\n                : subscription.paymentGateway === 'STRIPE'\n                  ? 'Stripe'\n                  : subscription.paymentGateway === 'RAZORPAY'\n                    ? 'Razorpay'\n                    : subscription.paymentGateway || 'N/A'}\n            </p>\n          </div>\n        </div>\n\n        {/* Next Billing */}\n        {subscription.nextBillingDate && subscription.autoRenewal && !isExpired && (\n          <div className=\"mt-6 p-4 rounded-lg bg-bg-sunken border border-border-subtle\">\n            <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2\">\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tr('billing.overview.nextBillingDate', 'Next billing date')}\n                </p>\n                <p className=\"text-xs text-text-secondary\">You&apos;ll be charged automatically</p>\n              </div>\n              <p className=\"text-sm font-semibold text-text-primary\">\n                {formatDate(subscription.nextBillingDate)}\n              </p>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Footer */}\n      {onViewDetails && (\n        <footer className=\"px-4 sm:px-6 py-3 border-t border-border-subtle bg-bg-sunken\">\n          <button\n            type=\"button\"\n            onClick={onViewDetails}\n            className=\"w-full flex items-center justify-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View Subscription Details\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </footer>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ActiveSubscriptionCard.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/ActiveSubscriptionCard.tsx"],"sourcesContent":["/**\n * Active Subscription Card Component\n * Displays the active subscription details with renewal info\n */\n\nimport { type FC, useMemo } from 'react';\nimport {\n  Crown,\n  Calendar,\n  ArrowRight,\n  RefreshCw,\n  Clock,\n  CreditCard,\n  Zap,\n  AlertTriangle,\n  Coins,\n} from 'lucide-react';\nimport type { BillingSubscription } from '../../../shared/types';\nimport { statusTokens, alertTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface ActiveSubscriptionCardProps {\n  subscription: BillingSubscription | null;\n  onViewDetails?: () => void;\n  onUpgrade?: () => void;\n  onManage?: () => void;\n  onPurchasePlan?: () => void;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nexport const ActiveSubscriptionCard: FC<ActiveSubscriptionCardProps> = ({\n  subscription,\n  onViewDetails,\n  onUpgrade,\n  onManage,\n  onPurchasePlan,\n  className = '',\n  dataTour,\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 formatDate = (dateString: string | undefined) => {\n    if (!dateString) return 'N/A';\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    });\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const daysUntilEnd = useMemo(() => {\n    if (!subscription?.endDate) return null;\n    const end = new Date(subscription.endDate);\n    const now = new Date();\n    const diff = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));\n    return diff;\n  }, [subscription?.endDate]);\n\n  const isExpiringSoon = daysUntilEnd !== null && daysUntilEnd <= 7 && daysUntilEnd > 0;\n  const isExpired = daysUntilEnd !== null && daysUntilEnd <= 0;\n\n  const getStatusColor = () => {\n    if (isExpired) return `${statusTokens.error.text} ${statusTokens.error.bg}`;\n    if (isExpiringSoon) return `${statusTokens.warning.text} ${statusTokens.warning.bg}`;\n    return `${statusTokens.success.text} ${statusTokens.success.bg}`;\n  };\n\n  const getStatusText = () => {\n    if (isExpired) return 'Expired';\n    if (isExpiringSoon) return 'Expiring Soon';\n    return 'Active';\n  };\n\n  // No subscription state\n  if (!subscription) {\n    return (\n      <section\n        data-tour={dataTour}\n        className={`border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 ${className}`}\n      >\n        <div className=\"flex flex-col items-center text-center py-4\">\n          <div className=\"size-16 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <Zap className=\"size-8 text-text-link\" />\n          </div>\n          <h3 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('billing.overview.noActiveSubscription', 'No Active Subscription')}\n          </h3>\n          <p className=\"text-sm text-text-secondary mb-6 max-w-sm\">\n            Subscribe to a plan to unlock premium features and get the most out of your account\n          </p>\n          {onPurchasePlan && (\n            <button\n              type=\"button\"\n              onClick={onPurchasePlan}\n              className=\"inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n            >\n              Browse Plans\n              <ArrowRight className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  const plan = subscription.plan;\n\n  return (\n    <section\n      data-tour={dataTour}\n      className={`border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden ${className}`}\n    >\n      {/* Expiring Soon Banner */}\n      {isExpiringSoon && (\n        <div className={`px-4 py-2 ${alertTokens.warning.container} border-b`}>\n          <div className={`flex items-center gap-2 ${alertTokens.warning.text}`}>\n            <AlertTriangle className=\"size-4\" />\n            <span className=\"text-sm font-medium\">\n              Your subscription expires in {daysUntilEnd} day{daysUntilEnd !== 1 ? 's' : ''}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Header */}\n      <header className=\"p-4 sm:p-6 border-b border-border-subtle\">\n        <div className=\"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"size-12 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0\">\n              <Crown className=\"size-6 text-action-primary-text\" />\n            </div>\n            <div>\n              <div className=\"flex items-center gap-2 flex-wrap\">\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {plan?.name || 'Subscription'}\n                </h3>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}\n                >\n                  {getStatusText()}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                {plan && formatCurrency(plan.price, plan.currency)} / {plan?.duration || 'month'}\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {onManage && (\n              <button\n                type=\"button\"\n                onClick={onManage}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Manage\n              </button>\n            )}\n            {onUpgrade && !isExpired && (\n              <button\n                type=\"button\"\n                onClick={onUpgrade}\n                className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Upgrade\n              </button>\n            )}\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 sm:p-6\">\n        <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4\">\n          {/* Start Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Started\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <Calendar className=\"size-4 text-text-secondary\" />\n              {formatDate(subscription.startDate)}\n            </p>\n          </div>\n\n          {/* End Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              {isExpired ? 'Expired' : 'Ends'}\n            </p>\n            <p\n              className={`text-sm font-medium flex items-center gap-2 ${isExpired ? statusTokens.error.text : isExpiringSoon ? statusTokens.warning.text : 'text-text-primary'}`}\n            >\n              <Clock className=\"size-4\" />\n              {formatDate(subscription.endDate)}\n            </p>\n          </div>\n\n          {/* Auto Renewal */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Auto Renewal\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <RefreshCw\n                className={`size-4 ${subscription.autoRenewal ? statusTokens.success.icon : 'text-text-secondary'}`}\n              />\n              {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n            </p>\n          </div>\n\n          {/* Payment Gateway */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Payment Via\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              {subscription.paymentGateway === 'CREDITS' ? (\n                <Coins className={`size-4 ${statusTokens.warning.icon}`} />\n              ) : (\n                <CreditCard className=\"size-4 text-text-secondary\" />\n              )}\n              {subscription.paymentGateway === 'CREDITS'\n                ? 'Credits'\n                : subscription.paymentGateway === 'STRIPE'\n                  ? 'Stripe'\n                  : subscription.paymentGateway === 'RAZORPAY'\n                    ? 'Razorpay'\n                    : subscription.paymentGateway || 'N/A'}\n            </p>\n          </div>\n        </div>\n\n        {/* Next Billing */}\n        {subscription.nextBillingDate && subscription.autoRenewal && !isExpired && (\n          <div className=\"mt-6 p-4 rounded-lg bg-bg-sunken border border-border-subtle\">\n            <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2\">\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tr('billing.overview.nextBillingDate', 'Next billing date')}\n                </p>\n                <p className=\"text-xs text-text-secondary\">You&apos;ll be charged automatically</p>\n              </div>\n              <p className=\"text-sm font-semibold text-text-primary\">\n                {formatDate(subscription.nextBillingDate)}\n              </p>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Footer */}\n      {onViewDetails && (\n        <footer className=\"px-4 sm:px-6 py-3 border-t border-border-subtle bg-bg-sunken\">\n          <button\n            type=\"button\"\n            onClick={onViewDetails}\n            className=\"w-full flex items-center justify-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View Subscription Details\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </footer>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}

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

@@ -173,7 +173,7 @@ var h = ({ brand: e, className: t }) => {
 		className: `space-y-4 ${l}`,
 		"data-tour": u,
 		children: [/* @__PURE__ */ p("header", {
-			className: "flex items-center justify-between",
+			className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3",
 			children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
 				className: "text-lg font-semibold text-text-primary",
 				children: h("billing.overview.paymentMethods", "Payment Methods")
@@ -183,7 +183,7 @@ var h = ({ brand: e, className: t }) => {
 			})] }), /* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: n,
-				className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors",
+				className: "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors sm:flex-shrink-0",
 				children: [/* @__PURE__ */ f(c, { className: "size-4" }), "Add Method"]
 			})]
 		}), s ? /* @__PURE__ */ f("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodsSection.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/PaymentMethodsSection.tsx"],"sourcesContent":["/**\n * Payment Methods Section Component\n * Displays and manages payment methods\n * Note: Provider config is fetched in the modal, not here\n */\n\nimport { type FC, useState } from 'react';\nimport { CreditCard, Plus, MoreVertical, Trash2, Star, Loader2, CheckCircle2 } from 'lucide-react';\nimport type { PaymentMethod, PaymentMethodType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { nativeConfirm, nativeImpact, nativeNotify } from '../../../../utils/nativeBridge';\n\ninterface PaymentMethodsSectionProps {\n  paymentMethods: PaymentMethod[];\n  billingAccountId: string;\n  onAddPaymentMethod: () => void;\n  onSetDefault: (id: string) => Promise<void>;\n  onDelete: (id: string) => Promise<void>;\n  isLoading?: boolean;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\n// Card brand icons mapping\nconst CardBrandIcon: FC<{ brand?: string; className?: string }> = ({ brand, className }) => {\n  const brandLower = brand?.toLowerCase() || '';\n\n  // In a real app, you'd use actual brand SVGs/images\n  const brandColors: Record<string, string> = {\n    visa: 'text-accent-blue',\n    mastercard: 'text-accent-orange',\n    amex: 'text-accent-blue',\n    discover: 'text-accent-orange',\n    default: 'text-text-secondary',\n  };\n\n  const color = brandColors[brandLower] || brandColors.default;\n\n  return (\n    <div className={`w-10 h-6 rounded bg-bg-sunken flex items-center justify-center ${className}`}>\n      <CreditCard className={`size-5 ${color}`} />\n    </div>\n  );\n};\n\nconst PaymentMethodCard: FC<{\n  method: PaymentMethod;\n  onSetDefault: (id: string) => Promise<void>;\n  onDelete: (id: string) => Promise<void>;\n}> = ({ method, onSetDefault, onDelete }) => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const [isSettingDefault, setIsSettingDefault] = useState(false);\n  const [isDeleting, setIsDeleting] = useState(false);\n  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);\n\n  const handleSetDefault = async () => {\n    setIsMenuOpen(false);\n    setIsSettingDefault(true);\n    try {\n      await onSetDefault(method.id);\n    } finally {\n      setIsSettingDefault(false);\n    }\n  };\n\n  const handleDeleteRequest = async () => {\n    setIsMenuOpen(false);\n    void nativeImpact('medium');\n    const confirmed = await nativeConfirm({\n      title: 'Delete payment method',\n      message: 'Are you sure you want to remove this payment method?',\n      okButtonTitle: 'Delete',\n      cancelButtonTitle: 'Cancel',\n    });\n    if (confirmed === true) {\n      setIsDeleting(true);\n      try {\n        await onDelete(method.id);\n        void nativeNotify('success');\n      } catch {\n        void nativeNotify('error');\n      } finally {\n        setIsDeleting(false);\n      }\n      return;\n    }\n    if (confirmed === null) {\n      setIsConfirmingDelete(true);\n    }\n  };\n\n  const handleDelete = async () => {\n    setIsDeleting(true);\n    try {\n      await onDelete(method.id);\n      void nativeNotify('success');\n    } catch {\n      void nativeNotify('error');\n    } finally {\n      setIsDeleting(false);\n      setIsConfirmingDelete(false);\n    }\n  };\n\n  const getMethodTypeLabel = (type: PaymentMethodType) => {\n    const labels: Record<PaymentMethodType, string> = {\n      CREDIT_CARD: 'Credit Card',\n      DEBIT_CARD: 'Debit Card',\n      BANK_TRANSFER: 'UPI',\n      PAYPAL: 'PayPal',\n      CRYPTO: 'Crypto',\n      WALLET: 'Wallet',\n      NETBANKING: 'Netbanking',\n    };\n    return labels[type] || type;\n  };\n\n  const getExpiryText = () => {\n    if (method.expiryMonth && method.expiryYear) {\n      const monthStr = String(method.expiryMonth).padStart(2, '0');\n      const yearStr = String(method.expiryYear).slice(-2);\n      return `${monthStr}/${yearStr}`;\n    }\n    return null;\n  };\n\n  const isExpired = () => {\n    if (!method.expiryMonth || !method.expiryYear) return false;\n    const now = new Date();\n    const expiry = new Date(method.expiryYear, method.expiryMonth, 0);\n    return expiry < now;\n  };\n\n  const getProviderBadge = () => {\n    if (method.stripePaymentMethodId) {\n      return (\n        <span className=\"inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-accent-violet-subtle text-accent-violet\">\n          Stripe\n        </span>\n      );\n    }\n    if (method.razorpayPaymentMethodId) {\n      return (\n        <span className=\"inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-status-info-bg-subtle text-status-info-text\">\n          Razorpay\n        </span>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <div\n      className={`\n        relative p-4 border rounded-lg transition-all overflow-visible\n        ${method.isDefault ? 'border-border-strong bg-[var(--color-accent-soft)]' : 'border-border-subtle bg-bg-surface'}\n        ${isDeleting ? 'opacity-50' : ''}\n      `}\n    >\n      <div className=\"flex items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3 min-w-0\">\n          <CardBrandIcon brand={method.brand} />\n          <div className=\"min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium text-text-primary\">\n                {method.brand || getMethodTypeLabel(method.type)} •••• {method.last4 || '****'}\n              </p>\n              {method.isDefault && (\n                <span className=\"inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-accent-soft)] text-text-link\">\n                  <Star className=\"size-2.5 fill-current\" />\n                  Default\n                </span>\n              )}\n              {getProviderBadge()}\n            </div>\n            <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n              {getExpiryText() && (\n                <>\n                  <span className={isExpired() ? 'text-status-error-text' : ''}>\n                    Expires {getExpiryText()}\n                  </span>\n                  {isExpired() && <span className=\"text-status-error-text text-xs\">(Expired)</span>}\n                </>\n              )}\n              {method.isVerified && (\n                <span className=\"flex items-center gap-1 text-status-success-text\">\n                  <CheckCircle2 className=\"size-3\" />\n                  Verified\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Actions Menu */}\n        <div className=\"relative\">\n          <button\n            type=\"button\"\n            onClick={() => setIsMenuOpen(!isMenuOpen)}\n            className=\"p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors\"\n            disabled={isSettingDefault || isDeleting}\n            aria-label=\"Payment method options\"\n          >\n            {isSettingDefault || isDeleting ? (\n              <Loader2 className=\"size-4 animate-spin\" />\n            ) : (\n              <MoreVertical className=\"size-4\" />\n            )}\n          </button>\n\n          {isMenuOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsMenuOpen(false)} />\n              <div className=\"absolute top-full right-0 mt-1 min-w-[140px] rounded-card border border-border-seam bg-bg-elevated shadow-elevation-3 z-20 overflow-hidden whitespace-nowrap\">\n                {!method.isDefault && (\n                  <button\n                    type=\"button\"\n                    onClick={handleSetDefault}\n                    className=\"w-full flex items-center gap-2 px-3 py-2.5 text-sm text-text-primary hover:bg-bg-sunken transition-colors text-left\"\n                  >\n                    <Star className=\"size-4 flex-shrink-0\" />\n                    Set as default\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  onClick={handleDeleteRequest}\n                  className=\"w-full flex items-center gap-2 px-3 py-2.5 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors text-left\"\n                >\n                  <Trash2 className=\"size-4 flex-shrink-0\" />\n                  Remove\n                </button>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {isConfirmingDelete && (\n        <div className=\"mt-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle p-3\">\n          <p className=\"text-sm font-medium text-status-error-text\">\n            Remove this payment method from your billing account?\n          </p>\n          <div className=\"mt-3 flex justify-end gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => setIsConfirmingDelete(false)}\n              className=\"rounded-button border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleDelete}\n              disabled={isDeleting}\n              className=\"rounded-button bg-action-danger-bg px-3 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-danger-bgHover disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              {isDeleting ? 'Removing…' : 'Remove'}\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const PaymentMethodsSection: FC<PaymentMethodsSectionProps> = ({\n  paymentMethods,\n  billingAccountId: _billingAccountId,\n  onAddPaymentMethod,\n  onSetDefault,\n  onDelete,\n  isLoading = false,\n  className = '',\n  dataTour,\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  // billingAccountId is available for future use\n  void _billingAccountId;\n\n  const hasPaymentMethods = paymentMethods.length > 0;\n\n  return (\n    <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n      {/* Header */}\n      <header className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.overview.paymentMethods', 'Payment Methods')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Manage your payment methods for subscriptions and purchases\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onAddPaymentMethod}\n          className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          <Plus className=\"size-4\" />\n          Add Method\n        </button>\n      </header>\n\n      {/* Content */}\n      {isLoading ? (\n        <div className=\"flex items-center justify-center py-8\">\n          <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n        </div>\n      ) : hasPaymentMethods ? (\n        <div className=\"space-y-3 overflow-visible\">\n          {paymentMethods\n            .filter((method): method is PaymentMethod => method !== null && method !== undefined)\n            .map((method) => (\n              <PaymentMethodCard\n                key={method.id}\n                method={method}\n                onSetDefault={onSetDefault}\n                onDelete={onDelete}\n              />\n            ))}\n        </div>\n      ) : (\n        <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border-subtle rounded-lg\">\n          <div className=\"size-12 rounded-full bg-bg-sunken flex items-center justify-center mb-4\">\n            <CreditCard className=\"size-6 text-text-secondary\" />\n          </div>\n          <h4 className=\"text-base font-medium text-text-primary\">No payment methods</h4>\n          <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n            Add a payment method to enable automatic payments for your subscriptions\n          </p>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PaymentMethodsSection.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/PaymentMethodsSection.tsx"],"sourcesContent":["/**\n * Payment Methods Section Component\n * Displays and manages payment methods\n * Note: Provider config is fetched in the modal, not here\n */\n\nimport { type FC, useState } from 'react';\nimport { CreditCard, Plus, MoreVertical, Trash2, Star, Loader2, CheckCircle2 } from 'lucide-react';\nimport type { PaymentMethod, PaymentMethodType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { nativeConfirm, nativeImpact, nativeNotify } from '../../../../utils/nativeBridge';\n\ninterface PaymentMethodsSectionProps {\n  paymentMethods: PaymentMethod[];\n  billingAccountId: string;\n  onAddPaymentMethod: () => void;\n  onSetDefault: (id: string) => Promise<void>;\n  onDelete: (id: string) => Promise<void>;\n  isLoading?: boolean;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\n// Card brand icons mapping\nconst CardBrandIcon: FC<{ brand?: string; className?: string }> = ({ brand, className }) => {\n  const brandLower = brand?.toLowerCase() || '';\n\n  // In a real app, you'd use actual brand SVGs/images\n  const brandColors: Record<string, string> = {\n    visa: 'text-accent-blue',\n    mastercard: 'text-accent-orange',\n    amex: 'text-accent-blue',\n    discover: 'text-accent-orange',\n    default: 'text-text-secondary',\n  };\n\n  const color = brandColors[brandLower] || brandColors.default;\n\n  return (\n    <div className={`w-10 h-6 rounded bg-bg-sunken flex items-center justify-center ${className}`}>\n      <CreditCard className={`size-5 ${color}`} />\n    </div>\n  );\n};\n\nconst PaymentMethodCard: FC<{\n  method: PaymentMethod;\n  onSetDefault: (id: string) => Promise<void>;\n  onDelete: (id: string) => Promise<void>;\n}> = ({ method, onSetDefault, onDelete }) => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const [isSettingDefault, setIsSettingDefault] = useState(false);\n  const [isDeleting, setIsDeleting] = useState(false);\n  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);\n\n  const handleSetDefault = async () => {\n    setIsMenuOpen(false);\n    setIsSettingDefault(true);\n    try {\n      await onSetDefault(method.id);\n    } finally {\n      setIsSettingDefault(false);\n    }\n  };\n\n  const handleDeleteRequest = async () => {\n    setIsMenuOpen(false);\n    void nativeImpact('medium');\n    const confirmed = await nativeConfirm({\n      title: 'Delete payment method',\n      message: 'Are you sure you want to remove this payment method?',\n      okButtonTitle: 'Delete',\n      cancelButtonTitle: 'Cancel',\n    });\n    if (confirmed === true) {\n      setIsDeleting(true);\n      try {\n        await onDelete(method.id);\n        void nativeNotify('success');\n      } catch {\n        void nativeNotify('error');\n      } finally {\n        setIsDeleting(false);\n      }\n      return;\n    }\n    if (confirmed === null) {\n      setIsConfirmingDelete(true);\n    }\n  };\n\n  const handleDelete = async () => {\n    setIsDeleting(true);\n    try {\n      await onDelete(method.id);\n      void nativeNotify('success');\n    } catch {\n      void nativeNotify('error');\n    } finally {\n      setIsDeleting(false);\n      setIsConfirmingDelete(false);\n    }\n  };\n\n  const getMethodTypeLabel = (type: PaymentMethodType) => {\n    const labels: Record<PaymentMethodType, string> = {\n      CREDIT_CARD: 'Credit Card',\n      DEBIT_CARD: 'Debit Card',\n      BANK_TRANSFER: 'UPI',\n      PAYPAL: 'PayPal',\n      CRYPTO: 'Crypto',\n      WALLET: 'Wallet',\n      NETBANKING: 'Netbanking',\n    };\n    return labels[type] || type;\n  };\n\n  const getExpiryText = () => {\n    if (method.expiryMonth && method.expiryYear) {\n      const monthStr = String(method.expiryMonth).padStart(2, '0');\n      const yearStr = String(method.expiryYear).slice(-2);\n      return `${monthStr}/${yearStr}`;\n    }\n    return null;\n  };\n\n  const isExpired = () => {\n    if (!method.expiryMonth || !method.expiryYear) return false;\n    const now = new Date();\n    const expiry = new Date(method.expiryYear, method.expiryMonth, 0);\n    return expiry < now;\n  };\n\n  const getProviderBadge = () => {\n    if (method.stripePaymentMethodId) {\n      return (\n        <span className=\"inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-accent-violet-subtle text-accent-violet\">\n          Stripe\n        </span>\n      );\n    }\n    if (method.razorpayPaymentMethodId) {\n      return (\n        <span className=\"inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-status-info-bg-subtle text-status-info-text\">\n          Razorpay\n        </span>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <div\n      className={`\n        relative p-4 border rounded-lg transition-all overflow-visible\n        ${method.isDefault ? 'border-border-strong bg-[var(--color-accent-soft)]' : 'border-border-subtle bg-bg-surface'}\n        ${isDeleting ? 'opacity-50' : ''}\n      `}\n    >\n      <div className=\"flex items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3 min-w-0\">\n          <CardBrandIcon brand={method.brand} />\n          <div className=\"min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium text-text-primary\">\n                {method.brand || getMethodTypeLabel(method.type)} •••• {method.last4 || '****'}\n              </p>\n              {method.isDefault && (\n                <span className=\"inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-accent-soft)] text-text-link\">\n                  <Star className=\"size-2.5 fill-current\" />\n                  Default\n                </span>\n              )}\n              {getProviderBadge()}\n            </div>\n            <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n              {getExpiryText() && (\n                <>\n                  <span className={isExpired() ? 'text-status-error-text' : ''}>\n                    Expires {getExpiryText()}\n                  </span>\n                  {isExpired() && <span className=\"text-status-error-text text-xs\">(Expired)</span>}\n                </>\n              )}\n              {method.isVerified && (\n                <span className=\"flex items-center gap-1 text-status-success-text\">\n                  <CheckCircle2 className=\"size-3\" />\n                  Verified\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Actions Menu */}\n        <div className=\"relative\">\n          <button\n            type=\"button\"\n            onClick={() => setIsMenuOpen(!isMenuOpen)}\n            className=\"p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors\"\n            disabled={isSettingDefault || isDeleting}\n            aria-label=\"Payment method options\"\n          >\n            {isSettingDefault || isDeleting ? (\n              <Loader2 className=\"size-4 animate-spin\" />\n            ) : (\n              <MoreVertical className=\"size-4\" />\n            )}\n          </button>\n\n          {isMenuOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsMenuOpen(false)} />\n              <div className=\"absolute top-full right-0 mt-1 min-w-[140px] rounded-card border border-border-seam bg-bg-elevated shadow-elevation-3 z-20 overflow-hidden whitespace-nowrap\">\n                {!method.isDefault && (\n                  <button\n                    type=\"button\"\n                    onClick={handleSetDefault}\n                    className=\"w-full flex items-center gap-2 px-3 py-2.5 text-sm text-text-primary hover:bg-bg-sunken transition-colors text-left\"\n                  >\n                    <Star className=\"size-4 flex-shrink-0\" />\n                    Set as default\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  onClick={handleDeleteRequest}\n                  className=\"w-full flex items-center gap-2 px-3 py-2.5 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors text-left\"\n                >\n                  <Trash2 className=\"size-4 flex-shrink-0\" />\n                  Remove\n                </button>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {isConfirmingDelete && (\n        <div className=\"mt-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle p-3\">\n          <p className=\"text-sm font-medium text-status-error-text\">\n            Remove this payment method from your billing account?\n          </p>\n          <div className=\"mt-3 flex justify-end gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => setIsConfirmingDelete(false)}\n              className=\"rounded-button border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleDelete}\n              disabled={isDeleting}\n              className=\"rounded-button bg-action-danger-bg px-3 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-danger-bgHover disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              {isDeleting ? 'Removing…' : 'Remove'}\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const PaymentMethodsSection: FC<PaymentMethodsSectionProps> = ({\n  paymentMethods,\n  billingAccountId: _billingAccountId,\n  onAddPaymentMethod,\n  onSetDefault,\n  onDelete,\n  isLoading = false,\n  className = '',\n  dataTour,\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  // billingAccountId is available for future use\n  void _billingAccountId;\n\n  const hasPaymentMethods = paymentMethods.length > 0;\n\n  return (\n    <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n      {/* Header */}\n      <header className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n        <div>\n          <h3 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.overview.paymentMethods', 'Payment Methods')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Manage your payment methods for subscriptions and purchases\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onAddPaymentMethod}\n          className=\"inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors sm:flex-shrink-0\"\n        >\n          <Plus className=\"size-4\" />\n          Add Method\n        </button>\n      </header>\n\n      {/* Content */}\n      {isLoading ? (\n        <div className=\"flex items-center justify-center py-8\">\n          <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n        </div>\n      ) : hasPaymentMethods ? (\n        <div className=\"space-y-3 overflow-visible\">\n          {paymentMethods\n            .filter((method): method is PaymentMethod => method !== null && method !== undefined)\n            .map((method) => (\n              <PaymentMethodCard\n                key={method.id}\n                method={method}\n                onSetDefault={onSetDefault}\n                onDelete={onDelete}\n              />\n            ))}\n        </div>\n      ) : (\n        <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border-subtle rounded-lg\">\n          <div className=\"size-12 rounded-full bg-bg-sunken flex items-center justify-center mb-4\">\n            <CreditCard className=\"size-6 text-text-secondary\" />\n          </div>\n          <h4 className=\"text-base font-medium text-text-primary\">No payment methods</h4>\n          <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n            Add a payment method to enable automatic payments for your subscriptions\n          </p>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}

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

@@ -150,7 +150,7 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 		"data-tour": x,
 		children: [
 			/* @__PURE__ */ h("header", {
-				className: "flex items-center justify-between",
+				className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3",
 				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ m(d, { className: "size-5 text-status-warning-text" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
@@ -163,7 +163,7 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 				}), /* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: s,
-					className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-link hover:text-text-link transition-colors",
+					className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-link hover:text-text-link transition-colors sm:flex-shrink-0",
 					children: ["View All", /* @__PURE__ */ m(a, { className: "size-4" })]
 				})]
 			}),

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

@@ -1 +1 @@
-{"version":3,"file":"RecommendedAddonsSection.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/RecommendedAddonsSection.tsx"],"sourcesContent":["/**\n * Recommended Addons Section Component\n * Displays recommended addons that users might want to purchase\n * Supports add to cart functionality\n */\n\nimport { type FC, useState, useMemo } from 'react';\nimport {\n  Package,\n  ArrowRight,\n  Sparkles,\n  ChevronRight,\n  Loader2,\n  ShoppingCart,\n  Check,\n  Plus,\n  Minus,\n  Trash2,\n} from 'lucide-react';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n * e.g., 10 bots + 10 bots = 20 bots (shown as one feature)\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\ninterface RecommendedAddonsSectionProps {\n  addons: Addon[];\n  hasSubscription: boolean;\n  onViewAddon: (addonId: string) => void;\n  onPurchaseAddon: (addonId: string) => void;\n  onViewAllAddons: () => void;\n  /** Handler for adding addon to cart */\n  onAddToCart?: (addon: Addon) => void;\n  /** Check if addon is in cart */\n  isInCart?: (addonId: string) => boolean;\n  /** Get cart quantity for addon */\n  getCartQuantity?: (addonId: string) => number;\n  /** Update quantity in cart */\n  onUpdateQuantity?: (addonId: string, quantity: number) => void;\n  /** Remove from cart */\n  onRemoveFromCart?: (addonId: string) => void;\n  /** Maximum number of addons to show (default: 3) */\n  maxAddons?: number;\n  isLoading?: boolean;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nconst AddonCard: FC<{\n  addon: Addon;\n  onView: () => void;\n  onPurchase: () => void;\n  onAddToCart?: () => void;\n  isInCart?: boolean;\n  cartQuantity?: number;\n  onUpdateQuantity?: (quantity: number) => void;\n  onRemoveFromCart?: () => void;\n}> = ({\n  addon,\n  onView,\n  onPurchase,\n  onAddToCart,\n  isInCart = false,\n  cartQuantity = 0,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const [justAdded, setJustAdded] = useState(false);\n\n  const handleAddToCart = () => {\n    if (onAddToCart) {\n      onAddToCart();\n      setJustAdded(true);\n      setTimeout(() => setJustAdded(false), 2000);\n    } else {\n      onPurchase();\n    }\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 0,\n      maximumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const getDurationLabel = (duration: PlanDuration) => {\n    return duration === 'yearly' ? 'year' : 'month';\n  };\n\n  // Combine duplicate quotas (e.g., 10 bots + 10 bots = 20 bots)\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features as SubscriptionFeatures[]);\n  }, [addon.features]);\n\n  return (\n    <article className=\"flex flex-col border border-border-seam rounded-card bg-bg-surface shadow-[var(--shadow-pop)] overflow-hidden hover:shadow-elevation-2 [@media(hover:none)]: transition-[box-shadow,transform] duration-200 ease-[var(--motion-easing-out)]\">\n      {/* Header */}\n      <header className=\"p-4 border-b border-border-subtle\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-lg bg-status-success-bg-subtle flex items-center justify-center\">\n              <Package className=\"size-5 text-status-success-text\" />\n            </div>\n            <div>\n              <h4 className=\"font-semibold text-text-primary\">{addon.name}</h4>\n              <p className=\"text-sm text-text-secondary\">\n                {formatCurrency(addon.price, addon.currency)}/{getDurationLabel(addon.duration)}\n              </p>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 flex-1\">\n        {combinedQuotas.length > 0 ? (\n          <ul className=\"space-y-2\">\n            {combinedQuotas.slice(0, 2).map((quota) => (\n              <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"size-1.5 rounded-full bg-status-success-bg\" />\n                  <span className=\"text-text-secondary\">{quota.name}</span>\n                </div>\n                <span className=\"font-medium text-text-primary\">\n                  {quota.totalValue.toLocaleString()}\n                </span>\n              </li>\n            ))}\n            {combinedQuotas.length > 2 && (\n              <li className=\"text-xs text-text-secondary\">\n                +{combinedQuotas.length - 2} more quotas\n              </li>\n            )}\n          </ul>\n        ) : (\n          <p className=\"text-sm text-text-secondary\">\n            Enhance your subscription with additional features\n          </p>\n        )}\n      </div>\n\n      {/* Footer */}\n      <footer className=\"p-4 border-t border-border-subtle bg-bg-sunken flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={onView}\n          className=\"flex-1 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors text-center\"\n        >\n          View Details\n        </button>\n        {isInCart && onUpdateQuantity ? (\n          // Quantity controls when in cart\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={onRemoveFromCart}\n              className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-button transition-colors\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity - 1)}\n              className=\"p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n            >\n              <Minus className=\"size-4\" />\n            </button>\n            <span className=\"w-8 text-center font-medium text-text-primary\">{cartQuantity}</span>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity + 1)}\n              className=\"p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          // Add to cart button\n          <button\n            type=\"button\"\n            onClick={handleAddToCart}\n            disabled={justAdded}\n            className={`flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-center flex items-center justify-center gap-1.5 ${\n              justAdded\n                ? 'bg-status-success-bg text-action-primary-text hover:bg-status-success-bg/90'\n                : 'text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bgHover'\n            }`}\n          >\n            {justAdded ? (\n              <>\n                <Check className=\"size-4\" />\n                Added\n              </>\n            ) : (\n              <>\n                <ShoppingCart className=\"size-4\" />\n                Add to Cart\n              </>\n            )}\n          </button>\n        )}\n      </footer>\n    </article>\n  );\n};\n\nexport const RecommendedAddonsSection: FC<RecommendedAddonsSectionProps> = ({\n  addons,\n  hasSubscription,\n  onViewAddon,\n  onPurchaseAddon,\n  onViewAllAddons,\n  onAddToCart,\n  isInCart,\n  getCartQuantity,\n  onUpdateQuantity,\n  onRemoveFromCart,\n  maxAddons = 3,\n  isLoading = false,\n  className = '',\n  dataTour,\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  // Only show if user has a subscription\n  if (!hasSubscription) {\n    return null;\n  }\n\n  // Limit addons to maxAddons\n  const displayAddons = addons.slice(0, maxAddons);\n\n  if (isLoading) {\n    return (\n      <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n        <header>\n          <h3 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.overview.recommendedAddons', 'Recommended Add-ons')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Enhance your subscription with these popular add-ons\n          </p>\n        </header>\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n        </div>\n      </section>\n    );\n  }\n\n  if (displayAddons.length === 0) {\n    return null;\n  }\n\n  return (\n    <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n      {/* Header */}\n      <header className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <Sparkles className=\"size-5 text-status-warning-text\" />\n          <div>\n            <h3 className=\"text-lg font-semibold text-text-primary\">Recommended Add-ons</h3>\n            <p className=\"text-sm text-text-secondary\">\n              Enhance your subscription with these popular add-ons\n            </p>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onViewAllAddons}\n          className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-link hover:text-text-link transition-colors\"\n        >\n          View All\n          <ChevronRight className=\"size-4\" />\n        </button>\n      </header>\n\n      {/* Addons Grid - Limited to maxAddons */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        {displayAddons.map((addon) => (\n          <AddonCard\n            key={addon.id}\n            addon={addon}\n            onView={() => onViewAddon(addon.id)}\n            onPurchase={() => onPurchaseAddon(addon.id)}\n            onAddToCart={onAddToCart ? () => onAddToCart(addon) : undefined}\n            isInCart={isInCart ? isInCart(addon.id) : false}\n            cartQuantity={getCartQuantity ? getCartQuantity(addon.id) : 0}\n            onUpdateQuantity={\n              onUpdateQuantity ? (qty) => onUpdateQuantity(addon.id, qty) : undefined\n            }\n            onRemoveFromCart={onRemoveFromCart ? () => onRemoveFromCart(addon.id) : undefined}\n          />\n        ))}\n      </div>\n\n      {/* See More Link - show if there are more addons */}\n      {addons.length > maxAddons && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            type=\"button\"\n            onClick={onViewAllAddons}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View all {addons.length} add-ons\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"RecommendedAddonsSection.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/RecommendedAddonsSection.tsx"],"sourcesContent":["/**\n * Recommended Addons Section Component\n * Displays recommended addons that users might want to purchase\n * Supports add to cart functionality\n */\n\nimport { type FC, useState, useMemo } from 'react';\nimport {\n  Package,\n  ArrowRight,\n  Sparkles,\n  ChevronRight,\n  Loader2,\n  ShoppingCart,\n  Check,\n  Plus,\n  Minus,\n  Trash2,\n} from 'lucide-react';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n * e.g., 10 bots + 10 bots = 20 bots (shown as one feature)\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\ninterface RecommendedAddonsSectionProps {\n  addons: Addon[];\n  hasSubscription: boolean;\n  onViewAddon: (addonId: string) => void;\n  onPurchaseAddon: (addonId: string) => void;\n  onViewAllAddons: () => void;\n  /** Handler for adding addon to cart */\n  onAddToCart?: (addon: Addon) => void;\n  /** Check if addon is in cart */\n  isInCart?: (addonId: string) => boolean;\n  /** Get cart quantity for addon */\n  getCartQuantity?: (addonId: string) => number;\n  /** Update quantity in cart */\n  onUpdateQuantity?: (addonId: string, quantity: number) => void;\n  /** Remove from cart */\n  onRemoveFromCart?: (addonId: string) => void;\n  /** Maximum number of addons to show (default: 3) */\n  maxAddons?: number;\n  isLoading?: boolean;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nconst AddonCard: FC<{\n  addon: Addon;\n  onView: () => void;\n  onPurchase: () => void;\n  onAddToCart?: () => void;\n  isInCart?: boolean;\n  cartQuantity?: number;\n  onUpdateQuantity?: (quantity: number) => void;\n  onRemoveFromCart?: () => void;\n}> = ({\n  addon,\n  onView,\n  onPurchase,\n  onAddToCart,\n  isInCart = false,\n  cartQuantity = 0,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const [justAdded, setJustAdded] = useState(false);\n\n  const handleAddToCart = () => {\n    if (onAddToCart) {\n      onAddToCart();\n      setJustAdded(true);\n      setTimeout(() => setJustAdded(false), 2000);\n    } else {\n      onPurchase();\n    }\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 0,\n      maximumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const getDurationLabel = (duration: PlanDuration) => {\n    return duration === 'yearly' ? 'year' : 'month';\n  };\n\n  // Combine duplicate quotas (e.g., 10 bots + 10 bots = 20 bots)\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features as SubscriptionFeatures[]);\n  }, [addon.features]);\n\n  return (\n    <article className=\"flex flex-col border border-border-seam rounded-card bg-bg-surface shadow-[var(--shadow-pop)] overflow-hidden hover:shadow-elevation-2 [@media(hover:none)]: transition-[box-shadow,transform] duration-200 ease-[var(--motion-easing-out)]\">\n      {/* Header */}\n      <header className=\"p-4 border-b border-border-subtle\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-lg bg-status-success-bg-subtle flex items-center justify-center\">\n              <Package className=\"size-5 text-status-success-text\" />\n            </div>\n            <div>\n              <h4 className=\"font-semibold text-text-primary\">{addon.name}</h4>\n              <p className=\"text-sm text-text-secondary\">\n                {formatCurrency(addon.price, addon.currency)}/{getDurationLabel(addon.duration)}\n              </p>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 flex-1\">\n        {combinedQuotas.length > 0 ? (\n          <ul className=\"space-y-2\">\n            {combinedQuotas.slice(0, 2).map((quota) => (\n              <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"size-1.5 rounded-full bg-status-success-bg\" />\n                  <span className=\"text-text-secondary\">{quota.name}</span>\n                </div>\n                <span className=\"font-medium text-text-primary\">\n                  {quota.totalValue.toLocaleString()}\n                </span>\n              </li>\n            ))}\n            {combinedQuotas.length > 2 && (\n              <li className=\"text-xs text-text-secondary\">\n                +{combinedQuotas.length - 2} more quotas\n              </li>\n            )}\n          </ul>\n        ) : (\n          <p className=\"text-sm text-text-secondary\">\n            Enhance your subscription with additional features\n          </p>\n        )}\n      </div>\n\n      {/* Footer */}\n      <footer className=\"p-4 border-t border-border-subtle bg-bg-sunken flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={onView}\n          className=\"flex-1 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors text-center\"\n        >\n          View Details\n        </button>\n        {isInCart && onUpdateQuantity ? (\n          // Quantity controls when in cart\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={onRemoveFromCart}\n              className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-button transition-colors\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity - 1)}\n              className=\"p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n            >\n              <Minus className=\"size-4\" />\n            </button>\n            <span className=\"w-8 text-center font-medium text-text-primary\">{cartQuantity}</span>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity + 1)}\n              className=\"p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          // Add to cart button\n          <button\n            type=\"button\"\n            onClick={handleAddToCart}\n            disabled={justAdded}\n            className={`flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-center flex items-center justify-center gap-1.5 ${\n              justAdded\n                ? 'bg-status-success-bg text-action-primary-text hover:bg-status-success-bg/90'\n                : 'text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bgHover'\n            }`}\n          >\n            {justAdded ? (\n              <>\n                <Check className=\"size-4\" />\n                Added\n              </>\n            ) : (\n              <>\n                <ShoppingCart className=\"size-4\" />\n                Add to Cart\n              </>\n            )}\n          </button>\n        )}\n      </footer>\n    </article>\n  );\n};\n\nexport const RecommendedAddonsSection: FC<RecommendedAddonsSectionProps> = ({\n  addons,\n  hasSubscription,\n  onViewAddon,\n  onPurchaseAddon,\n  onViewAllAddons,\n  onAddToCart,\n  isInCart,\n  getCartQuantity,\n  onUpdateQuantity,\n  onRemoveFromCart,\n  maxAddons = 3,\n  isLoading = false,\n  className = '',\n  dataTour,\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  // Only show if user has a subscription\n  if (!hasSubscription) {\n    return null;\n  }\n\n  // Limit addons to maxAddons\n  const displayAddons = addons.slice(0, maxAddons);\n\n  if (isLoading) {\n    return (\n      <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n        <header>\n          <h3 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.overview.recommendedAddons', 'Recommended Add-ons')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Enhance your subscription with these popular add-ons\n          </p>\n        </header>\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n        </div>\n      </section>\n    );\n  }\n\n  if (displayAddons.length === 0) {\n    return null;\n  }\n\n  return (\n    <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n      {/* Header */}\n      <header className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n        <div className=\"flex items-center gap-2\">\n          <Sparkles className=\"size-5 text-status-warning-text\" />\n          <div>\n            <h3 className=\"text-lg font-semibold text-text-primary\">Recommended Add-ons</h3>\n            <p className=\"text-sm text-text-secondary\">\n              Enhance your subscription with these popular add-ons\n            </p>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onViewAllAddons}\n          className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-link hover:text-text-link transition-colors sm:flex-shrink-0\"\n        >\n          View All\n          <ChevronRight className=\"size-4\" />\n        </button>\n      </header>\n\n      {/* Addons Grid - Limited to maxAddons */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        {displayAddons.map((addon) => (\n          <AddonCard\n            key={addon.id}\n            addon={addon}\n            onView={() => onViewAddon(addon.id)}\n            onPurchase={() => onPurchaseAddon(addon.id)}\n            onAddToCart={onAddToCart ? () => onAddToCart(addon) : undefined}\n            isInCart={isInCart ? isInCart(addon.id) : false}\n            cartQuantity={getCartQuantity ? getCartQuantity(addon.id) : 0}\n            onUpdateQuantity={\n              onUpdateQuantity ? (qty) => onUpdateQuantity(addon.id, qty) : undefined\n            }\n            onRemoveFromCart={onRemoveFromCart ? () => onRemoveFromCart(addon.id) : undefined}\n          />\n        ))}\n      </div>\n\n      {/* See More Link - show if there are more addons */}\n      {addons.length > maxAddons && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            type=\"button\"\n            onClick={onViewAllAddons}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View all {addons.length} add-ons\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}