@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

package/dist/billing/modules/credits/pages/CreditsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreditsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credits Page\n * Displays credit balance and transaction history\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatDate,\n  formatRelativeTime,\n  formatCreditTransactionType,\n} from '../../../shared/utils/format';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccount?.id || '',\n    days,\n    page,\n    pageSize: 20,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary max-w-sm\">\n            You don&apos;t have permission to view credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions = transactions.filter((tx) => {\n    if (filterType === 'all') return true;\n    return tx.type === filterType;\n  });\n\n  // Loading state\n  if (isLoading && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div className=\"border border-border-subtle rounded-lg p-6\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded mb-2\" />\n            <div className=\"h-10 w-32 bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Failed to load credits</h2>\n          <p className=\"text-sm text-text-secondary\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const creditBalance = billingAccount?.creditAmount || 0;\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n            {tr('billing.credits.title', 'Credits')}\n          </h1>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            Manage your credit balance and view transaction history\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/credits/withdraw')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n            Withdraw\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/checkout/credits')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Purchase Credits\n          </button>\n        </div>\n      </div>\n\n      {/* Balance Card */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div className=\"border border-border-subtle rounded-lg bg-gradient-to-br from-[var(--color-accent-soft)] to-[var(--color-accent-soft)] p-6\">\n          <p className=\"text-sm text-text-secondary\">Available Balance</p>\n          <p className=\"text-3xl font-bold text-text-primary mt-2\">\n            {creditBalance.toLocaleString()} Credits\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">{billingAccount?.name}</p>\n        </div>\n\n        <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5\">\n          <p className=\"text-sm text-text-secondary\">Transactions ({days}d)</p>\n          <p className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary mt-2\">\n            {pagination.totalCount}\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">Total transactions</p>\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {[7, 30, 90].map((d) => (\n            <button\n              type=\"button\"\n              key={d}\n              onClick={() => setDays(d)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                days === d\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {(['all', 'purchase', 'usage', 'adjustment', 'granted'] as FilterType[]).map((type) => (\n            <button\n              type=\"button\"\n              key={type}\n              onClick={() => setFilterType(type)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 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            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary\">No transactions found</h3>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            {filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'No credit transactions in this period.'}\n          </p>\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((tx) => (\n            <TransactionRow key={tx.id} transaction={tx} />\n          ))}\n\n          {/* Pagination */}\n          {pagination.hasMore && (\n            <div className=\"flex justify-center pt-4\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((p) => p + 1)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Load More\n              </button>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Transaction Row Component\n// ============================================================================\n\ninterface TransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst TransactionRow: FC<TransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n  const isCredit =\n    transaction.type === 'purchase' ||\n    transaction.type === 'adjustment' ||\n    transaction.type === 'granted';\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`size-10 rounded-full flex items-center justify-center ${\n          isCredit ? statusTokens.success.bg : statusTokens.warning.bg\n        }`}\n      >\n        {isCredit ? (\n          <svg\n            className={`size-5 ${statusTokens.success.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n          </svg>\n        ) : (\n          <svg\n            className={`size-5 ${statusTokens.warning.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 12H4\" />\n          </svg>\n        )}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"font-medium text-text-primary capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n        </div>\n        <p className=\"text-sm text-text-secondary mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDate(transaction.createdAt, 'short')}\n        </p>\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right\">\n        <p\n          className={`font-semibold ${isCredit ? statusTokens.success.text : 'text-text-primary'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {transaction.amount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreditsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credits Page\n * Displays credit balance and transaction history\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatDate,\n  formatRelativeTime,\n  formatCreditTransactionType,\n} from '../../../shared/utils/format';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccount?.id || '',\n    days,\n    page,\n    pageSize: 20,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary max-w-sm\">\n            You don&apos;t have permission to view credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions = transactions.filter((tx) => {\n    if (filterType === 'all') return true;\n    return tx.type === filterType;\n  });\n\n  // Loading state\n  if (isLoading && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div className=\"border border-border-subtle rounded-lg p-6\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded mb-2\" />\n            <div className=\"h-10 w-32 bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Failed to load credits</h2>\n          <p className=\"text-sm text-text-secondary\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const creditBalance = billingAccount?.creditAmount || 0;\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n            {tr('billing.credits.title', 'Credits')}\n          </h1>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            Manage your credit balance and view transaction history\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/credits/withdraw')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n            Withdraw\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/checkout/credits')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Purchase Credits\n          </button>\n        </div>\n      </div>\n\n      {/* Balance Card */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <EmphasisPanel className=\"p-6\">\n          <p className=\"text-sm text-text-secondary\">Available Balance</p>\n          <p className=\"text-3xl font-bold tabular-nums text-text-primary mt-2\">\n            {creditBalance.toLocaleString()} Credits\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">{billingAccount?.name}</p>\n        </EmphasisPanel>\n\n        <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5\">\n          <p className=\"text-sm text-text-secondary\">Transactions ({days}d)</p>\n          <p className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary mt-2\">\n            {pagination.totalCount}\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">Total transactions</p>\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {[7, 30, 90].map((d) => (\n            <button\n              type=\"button\"\n              key={d}\n              onClick={() => setDays(d)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                days === d\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {(['all', 'purchase', 'usage', 'adjustment', 'granted'] as FilterType[]).map((type) => (\n            <button\n              type=\"button\"\n              key={type}\n              onClick={() => setFilterType(type)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 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            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary\">No transactions found</h3>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            {filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'No credit transactions in this period.'}\n          </p>\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((tx) => (\n            <TransactionRow key={tx.id} transaction={tx} />\n          ))}\n\n          {/* Pagination */}\n          {pagination.hasMore && (\n            <div className=\"flex justify-center pt-4\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((p) => p + 1)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Load More\n              </button>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Transaction Row Component\n// ============================================================================\n\ninterface TransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst TransactionRow: FC<TransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n  const isCredit =\n    transaction.type === 'purchase' ||\n    transaction.type === 'adjustment' ||\n    transaction.type === 'granted';\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`size-10 rounded-full flex items-center justify-center ${\n          isCredit ? statusTokens.success.bg : statusTokens.warning.bg\n        }`}\n      >\n        {isCredit ? (\n          <svg\n            className={`size-5 ${statusTokens.success.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n          </svg>\n        ) : (\n          <svg\n            className={`size-5 ${statusTokens.warning.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 12H4\" />\n          </svg>\n        )}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"font-medium text-text-primary capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n        </div>\n        <p className=\"text-sm text-text-secondary mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDate(transaction.createdAt, 'short')}\n        </p>\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right\">\n        <p\n          className={`font-semibold ${isCredit ? statusTokens.success.text : 'text-text-primary'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {transaction.amount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -23,7 +23,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 	}, [h?.endDate]), D = E !== null && E <= 7 && E > 0, O = E !== null && E <= 0, k = () => O ? `${t.error.text} ${t.error.bg}` : D ? `${t.warning.text} ${t.warning.bg}` : `${t.success.text} ${t.success.bg}`, A = () => O ? "Expired" : D ? "Expiring Soon" : "Active";
 	if (!h) return /* @__PURE__ */ f("section", {
 		"data-tour": x,
-		className: `border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5 ${b}`,
+		className: `border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 ${b}`,
 		children: /* @__PURE__ */ p("div", {
 			className: "flex flex-col items-center text-center py-4",
 			children: [
@@ -51,7 +51,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 	let j = h.plan;
 	return /* @__PURE__ */ p("section", {
 		"data-tour": x,
-		className: `border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden ${b}`,
+		className: `border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden ${b}`,
 		children: [
 			D && /* @__PURE__ */ f("div", {
 				className: `px-4 py-2 ${e.warning.container} border-b`,

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-subtle 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-subtle rounded-card bg-bg-surface shadow-elevation-1 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-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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"}

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

@@ -194,7 +194,7 @@ var h = (e, t) => new Promise((n, r) => {
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ m("div", {
 			ref: ne,
-			className: "relative w-full max-w-md max-h-[90vh] mx-4 bg-bg-surface border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] flex flex-col",
+			className: "relative w-full max-w-md max-h-[90vh] mx-4 bg-bg-surface border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] flex flex-col",
 			children: [
 				/* @__PURE__ */ m("header", {
 					className: "flex items-center justify-between p-4 border-b border-border-subtle flex-shrink-0",

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

@@ -1 +1 @@
-{"version":3,"file":"AddPaymentMethodModal.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/AddPaymentMethodModal.tsx"],"sourcesContent":["/**\n * Add Payment Method Modal Component\n * Modal for adding a new payment method via Stripe or Razorpay SDKs\n */\n\nimport { type FC, useState, useCallback, useEffect, useRef } from 'react';\nimport { X, CreditCard, Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePaymentProviderConfig, useDashboardMutations } from '../hooks';\nimport { PaymentProviderPreference } from '../../../shared/types';\nimport { getStripeCardElementStyle } from '../../../shared/utils';\n\n// Stripe types (loaded dynamically)\ndeclare global {\n  interface Window {\n    Stripe?: (key: string) => StripeInstance;\n    Razorpay?: new (options: RazorpayOptions) => RazorpayInstance;\n  }\n}\n\ninterface StripeInstance {\n  elements: () => StripeElements;\n  createPaymentMethod: (options: {\n    type: 'card';\n    card: StripeCardElement;\n    billing_details?: { name?: string };\n  }) => Promise<{\n    paymentMethod?: {\n      id: string;\n      card?: { brand: string; last4: string; exp_month: number; exp_year: number };\n    };\n    error?: { message: string };\n  }>;\n  confirmCardSetup: (\n    clientSecret: string,\n    options?: {\n      payment_method?: {\n        card: StripeCardElement;\n        billing_details?: { name?: string };\n      };\n    }\n  ) => Promise<{\n    setupIntent?: {\n      id: string;\n      status: string;\n      payment_method?: string;\n    };\n    error?: { message: string };\n  }>;\n}\n\ninterface StripeElements {\n  create: (type: 'card', options?: object) => StripeCardElement;\n}\n\ninterface StripeCardElement {\n  mount: (element: HTMLElement | string) => void;\n  unmount: () => void;\n  on: (\n    event: string,\n    handler: (event: { complete: boolean; error?: { message: string } }) => void\n  ) => void;\n  destroy: () => void;\n}\n\ninterface RazorpayOptions {\n  key: string;\n  amount: number;\n  currency: string;\n  order_id: string;\n  customer_id?: string;\n  name: string;\n  description: string;\n  method?: 'card' | 'upi' | 'netbanking' | 'wallet' | 'emi' | 'cardless_emi';\n  handler: (response: RazorpayResponse) => void;\n  modal?: { ondismiss?: () => void };\n  prefill?: { name?: string; email?: string; contact?: string };\n  notes?: Record<string, string>;\n  config?: {\n    display?: {\n      hide?: Array<{ method: string }>;\n      preferences?: {\n        show_default_blocks?: boolean;\n      };\n    };\n  };\n}\n\ninterface RazorpayInstance {\n  open: () => void;\n  close: () => void;\n}\n\ninterface RazorpayResponse {\n  razorpay_payment_id: string;\n  razorpay_token?: string;\n}\n\ninterface AddPaymentMethodModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  billingAccountId: string;\n  currency: string; // e.g., 'INR', 'USD'\n  country?: string; // e.g., 'IN', 'US' - from billing address\n  onSuccess?: () => void;\n}\n\ntype ModalStep = 'select-provider' | 'add-card' | 'processing' | 'success';\n\n// Load external script dynamically\nconst loadScript = (src: string, id: string): Promise<void> => {\n  return new Promise((resolve, reject) => {\n    if (document.getElementById(id)) {\n      resolve();\n      return;\n    }\n    const script = document.createElement('script');\n    script.id = id;\n    script.src = src;\n    script.async = true;\n    script.onload = () => resolve();\n    script.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(script);\n  });\n};\n\nexport const AddPaymentMethodModal: FC<AddPaymentMethodModalProps> = ({\n  isOpen,\n  onClose,\n  billingAccountId,\n  currency,\n  country,\n  onSuccess,\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 modalRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<HTMLDivElement>(null);\n  const stripeCardElementRef = useRef<StripeCardElement | null>(null);\n  const stripeRef = useRef<StripeInstance | null>(null);\n\n  // Only fetch payment provider config when modal is open\n  const {\n    stripeEnabled,\n    stripePublishableKey,\n    razorpayEnabled,\n    isLoading: isLoadingConfig,\n  } = usePaymentProviderConfig(!isOpen);\n  const { isAddingPaymentMethod, verifyPaymentMethod } = useDashboardMutations();\n\n  // Determine which providers to show based on currency and country\n  // Razorpay: India only (INR currency OR IN country)\n  // Stripe: International (non-INR OR non-IN country)\n  const isIndianAccount = currency?.toUpperCase() === 'INR' || country?.toUpperCase() === 'IN';\n  const showRazorpay = razorpayEnabled && isIndianAccount;\n  const showStripe = stripeEnabled && !isIndianAccount;\n\n  const [step, setStep] = useState<ModalStep>('select-provider');\n  const [selectedProvider, setSelectedProvider] = useState<'stripe' | 'razorpay' | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [isLoadingSdk, setIsLoadingSdk] = useState(false);\n  const [cardholderName, setCardholderName] = useState('');\n  const [setAsDefault, setSetAsDefault] = useState(true);\n  const [isCardComplete, setIsCardComplete] = useState(false);\n\n  // Must be declared before the effects that reference it\n  const handleSelectProvider = useCallback((provider: 'stripe' | 'razorpay') => {\n    setSelectedProvider(provider);\n    setStep('add-card');\n    setError(null);\n  }, []);\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      setStep('select-provider');\n      setSelectedProvider(null);\n      setError(null);\n      setCardholderName('');\n      setSetAsDefault(true);\n      setIsCardComplete(false);\n    } else {\n      // Cleanup Stripe element when modal closes\n      if (stripeCardElementRef.current) {\n        stripeCardElementRef.current.destroy();\n        stripeCardElementRef.current = null;\n      }\n    }\n  }, [isOpen]);\n\n  // Auto-select provider when only one is available (skip the select-provider screen)\n  useEffect(() => {\n    if (step !== 'select-provider' || isLoadingConfig) return;\n    if (showStripe && !showRazorpay) {\n      handleSelectProvider('stripe');\n    } else if (showRazorpay && !showStripe) {\n      handleSelectProvider('razorpay');\n    }\n  }, [step, isLoadingConfig, showStripe, showRazorpay, handleSelectProvider]);\n\n  // Initialize Stripe when provider is selected\n  useEffect(() => {\n    if (step !== 'add-card' || selectedProvider !== 'stripe') return;\n\n    // Show error if config loaded but key is missing\n    if (!stripePublishableKey && !isLoadingConfig) {\n      setError('Stripe is not configured. Please contact support.');\n      return;\n    }\n\n    if (!stripePublishableKey) return;\n\n    const initStripe = async () => {\n      setIsLoadingSdk(true);\n      try {\n        await loadScript('https://js.stripe.com/v3/', 'stripe-js');\n\n        if (!window.Stripe) {\n          throw new Error('Stripe SDK failed to load');\n        }\n\n        const stripe = window.Stripe(stripePublishableKey);\n        stripeRef.current = stripe;\n\n        // Wait for the card element container to be mounted in the DOM\n        let attempts = 0;\n        while (!cardElementRef.current && attempts < 50) {\n          await new Promise((resolve) => setTimeout(resolve, 100));\n          attempts++;\n        }\n\n        if (!cardElementRef.current) {\n          throw new Error('Card element container not found after 5 seconds');\n        }\n\n        if (stripeCardElementRef.current) {\n          return;\n        }\n\n        const elements = stripe.elements();\n        const cardElement = elements.create('card', {\n          style: getStripeCardElementStyle('system-ui, -apple-system, sans-serif'),\n        });\n\n        cardElement.mount(cardElementRef.current);\n        stripeCardElementRef.current = cardElement;\n\n        cardElement.on('change', (event) => {\n          setIsCardComplete(event.complete);\n          if (event.error) {\n            setError(event.error.message);\n          } else {\n            setError(null);\n          }\n        });\n      } catch (err) {\n        setError(err instanceof Error ? err.message : 'Failed to load Stripe');\n      } finally {\n        setIsLoadingSdk(false);\n      }\n    };\n\n    initStripe();\n\n    return () => {\n      if (stripeCardElementRef.current) {\n        try {\n          stripeCardElementRef.current.destroy();\n          stripeCardElementRef.current = null;\n        } catch {\n          // Stripe element may already be detached during modal teardown.\n        }\n      }\n    };\n  }, [step, selectedProvider, stripePublishableKey, isLoadingConfig]);\n\n  // Handle escape key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen && !isProcessing) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, isProcessing, onClose]);\n\n  const handleStripeSubmit = useCallback(async () => {\n    if (!stripeRef.current || !stripeCardElementRef.current) {\n      setError('Stripe not initialized');\n      return;\n    }\n\n    if (!cardholderName.trim()) {\n      setError('Please enter the cardholder name');\n      return;\n    }\n\n    setIsProcessing(true);\n    setError(null);\n\n    try {\n      // Step 1: Call backend to create SetupIntent and get client secret\n      const verificationResult = await verifyPaymentMethod({\n        billingAccountId,\n        currency: 'USD',\n        provider: PaymentProviderPreference.STRIPE,\n        setAsDefault,\n      });\n\n      if (!verificationResult.clientSecret) {\n        throw new Error('Failed to initiate card verification');\n      }\n\n      // Step 2: Confirm card setup using the client secret (no charge)\n      const { setupIntent, error: stripeError } = await stripeRef.current.confirmCardSetup(\n        verificationResult.clientSecret,\n        {\n          payment_method: {\n            card: stripeCardElementRef.current,\n            billing_details: { name: cardholderName },\n          },\n        }\n      );\n\n      if (stripeError) {\n        throw new Error(stripeError.message);\n      }\n\n      if (setupIntent?.status !== 'succeeded') {\n        throw new Error('Card verification failed');\n      }\n\n      // Step 3: Show success (webhook will save the payment method)\n      setStep('success');\n\n      // Wait for webhook to process (2 seconds) before refetching\n      await new Promise((resolve) => setTimeout(resolve, 2000));\n      onSuccess?.();\n\n      // Show success message briefly before closing\n      setTimeout(() => {\n        onClose();\n      }, 500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to add payment method');\n      setIsProcessing(false);\n    }\n  }, [cardholderName, setAsDefault, billingAccountId, verifyPaymentMethod, onSuccess, onClose]);\n\n  const handleRazorpaySubmit = useCallback(async () => {\n    setIsProcessing(true);\n    setError(null);\n\n    try {\n      // Load Razorpay SDK\n      setIsLoadingSdk(true);\n      try {\n        await loadScript('https://checkout.razorpay.com/v1/checkout.js', 'razorpay-sdk');\n      } catch {\n        setError('Failed to load Razorpay SDK');\n        setIsProcessing(false);\n        setIsLoadingSdk(false);\n        return;\n      }\n      setIsLoadingSdk(false);\n\n      // Initiate ₹1 verification payment\n      const verificationResult = await verifyPaymentMethod({\n        billingAccountId,\n        currency: 'INR',\n        provider: PaymentProviderPreference.RAZORPAY,\n        setAsDefault,\n      });\n\n      if (\n        !verificationResult.success ||\n        !verificationResult.orderId ||\n        !verificationResult.razorpayKeyId\n      ) {\n        setError(verificationResult.error || 'Failed to initiate verification');\n        setIsProcessing(false);\n        return;\n      }\n\n      // Open Razorpay checkout with ALL payment methods\n      if (!window.Razorpay) {\n        setError('Razorpay SDK not loaded');\n        setIsProcessing(false);\n        return;\n      }\n\n      const options = {\n        key: verificationResult.razorpayKeyId,\n        amount: (verificationResult.amount ?? 0) * 100, // Convert to paise\n        currency: verificationResult.currency.toUpperCase(),\n        order_id: verificationResult.orderId,\n        customer_id: verificationResult.razorpayCustomerId, // Link to customer for saving\n        name: 'Add Payment Method',\n        description: `₹${verificationResult.amount} verification charge (refundable)`,\n        prefill: {\n          name: verificationResult.prefillName,\n          email: verificationResult.prefillEmail,\n          contact: verificationResult.prefillContact,\n        },\n        notes: {\n          purchaseType: 'PAYMENT_METHOD_VERIFICATION',\n          default_method: setAsDefault.toString(),\n        },\n        handler: async () => {\n          // Payment successful - payment method will be saved via webhook\n          setStep('success');\n\n          // Wait for webhook to process (2 seconds) before refetching\n          await new Promise((resolve) => setTimeout(resolve, 2000));\n          onSuccess?.();\n\n          // Show success message briefly before closing\n          setTimeout(() => {\n            onClose();\n          }, 500);\n        },\n        modal: {\n          ondismiss: () => {\n            setIsProcessing(false);\n            setError('Payment cancelled');\n          },\n        },\n      };\n\n      const rzp = new window.Razorpay(options);\n      rzp.open();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to add payment method');\n      setIsProcessing(false);\n    }\n  }, [setAsDefault, billingAccountId, verifyPaymentMethod, onSuccess, onClose]);\n\n  const handleSubmit = useCallback(() => {\n    if (selectedProvider === 'stripe') {\n      handleStripeSubmit();\n    } else if (selectedProvider === 'razorpay') {\n      handleRazorpaySubmit();\n    }\n  }, [selectedProvider, handleStripeSubmit, handleRazorpaySubmit]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modal-title\"\n    >\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-bg-overlay backdrop-blur-sm\"\n        onClick={!isProcessing ? onClose : undefined}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div\n        ref={modalRef}\n        className=\"relative w-full max-w-md max-h-[90vh] mx-4 bg-bg-surface border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] flex flex-col\"\n      >\n        {/* Header */}\n        <header className=\"flex items-center justify-between p-4 border-b border-border-subtle flex-shrink-0\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n              <CreditCard className=\"size-5 text-text-link\" />\n            </div>\n            <div>\n              <h2 id=\"modal-title\" className=\"text-lg font-semibold text-text-primary\">\n                {step === 'success' ? 'Payment Method Added' : 'Add Payment Method'}\n              </h2>\n              <p className=\"text-sm text-text-secondary\">\n                {step === 'select-provider' && 'Choose a payment provider'}\n                {step === 'add-card' &&\n                  (selectedProvider === 'stripe'\n                    ? 'Add card via Stripe'\n                    : 'Add payment method with ₹1 verification')}\n                {step === 'processing' && 'Processing...'}\n                {step === 'success' && 'Your payment method has been saved'}\n              </p>\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isProcessing}\n            className=\"p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50\"\n            aria-label=\"Close modal\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </header>\n\n        {/* Content */}\n        <div className=\"p-4 overflow-y-auto flex-1\">\n          {isLoadingConfig ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n            </div>\n          ) : step === 'select-provider' ? (\n            <div className=\"space-y-3\">\n              {showStripe && (\n                <button\n                  type=\"button\"\n                  onClick={() => handleSelectProvider('stripe')}\n                  className=\"w-full flex items-center gap-4 p-4 border border-border-subtle rounded-lg hover:border-border-strong hover:bg-[var(--color-accent-soft)] transition-colors text-left\"\n                >\n                  <div className=\"size-12 rounded-lg bg-accent-violet-subtle flex items-center justify-center\">\n                    <CreditCard className=\"size-6 text-accent-violet\" />\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-text-primary\">Stripe</p>\n                    <p className=\"text-sm text-text-secondary\">Cards, Apple Pay, Google Pay</p>\n                  </div>\n                </button>\n              )}\n              {showRazorpay && (\n                <button\n                  type=\"button\"\n                  onClick={() => handleSelectProvider('razorpay')}\n                  className=\"w-full flex items-center gap-4 p-4 border border-border-subtle rounded-lg hover:border-border-strong hover:bg-[var(--color-accent-soft)] transition-colors text-left\"\n                >\n                  <div className=\"size-12 rounded-lg bg-status-info-bg-subtle flex items-center justify-center\">\n                    <CreditCard className=\"size-6 text-accent-blue\" />\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-text-primary\">Razorpay</p>\n                    <p className=\"text-sm text-text-secondary\">UPI, Netbanking, Cards</p>\n                  </div>\n                </button>\n              )}\n              {!showStripe && !showRazorpay && (\n                <div className=\"flex flex-col items-center py-8 text-center\">\n                  <AlertCircle className=\"size-12 text-status-warning-text mb-3\" />\n                  <p className=\"font-medium text-text-primary\">\n                    {tr('billing.overview.noPaymentProviders', 'No Payment Providers Available')}\n                  </p>\n                  <p className=\"text-sm text-text-secondary mt-1\">\n                    {isIndianAccount\n                      ? 'Razorpay is not configured for Indian accounts. Please contact support.'\n                      : 'Stripe is not configured for international accounts. Please contact support.'}\n                  </p>\n                </div>\n              )}\n            </div>\n          ) : step === 'add-card' ? (\n            <div className=\"space-y-4\">\n              {/* Error Message */}\n              {error && (\n                <div className=\"flex items-center gap-2 p-3 rounded-lg bg-status-error-bg-subtle border border-status-error-border text-status-error-text\">\n                  <AlertCircle className=\"size-4 flex-shrink-0\" />\n                  <p className=\"text-sm\">{error}</p>\n                </div>\n              )}\n\n              {/* Cardholder Name - only for Stripe */}\n              {selectedProvider === 'stripe' && (\n                <div className=\"space-y-1.5\">\n                  <label\n                    htmlFor=\"cardholderName\"\n                    className=\"block text-sm font-medium text-text-primary\"\n                  >\n                    Cardholder Name\n                  </label>\n                  <input\n                    type=\"text\"\n                    id=\"cardholderName\"\n                    value={cardholderName}\n                    onChange={(e) => setCardholderName(e.target.value)}\n                    className=\"w-full px-3 py-2 border border-border-default rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong\"\n                    placeholder=\"John Doe\"\n                    disabled={isProcessing}\n                  />\n                </div>\n              )}\n\n              {/* Stripe Card Element */}\n              {selectedProvider === 'stripe' && (\n                <div className=\"space-y-1.5\">\n                  <label className=\"block text-sm font-medium text-text-primary\">\n                    {tr('billing.overview.cardDetails', 'Card Details')}\n                  </label>\n                  <div className=\"relative\">\n                    <div\n                      ref={cardElementRef}\n                      className=\"p-3 border border-border-default rounded-lg bg-bg-surface min-h-[56px]\"\n                    />\n                    {isLoadingSdk && (\n                      <div className=\"absolute inset-0 flex items-center justify-center bg-bg-overlay rounded-lg\">\n                        <Loader2 className=\"size-5 animate-spin text-text-secondary\" />\n                        <span className=\"ml-2 text-sm text-text-secondary\">Loading Stripe…</span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )}\n\n              {/* Razorpay - Verification Info */}\n              {selectedProvider === 'razorpay' && (\n                <div className=\"p-3 border border-border-subtle rounded-lg bg-status-info-bg-subtle\">\n                  <p className=\"text-sm text-status-info-text\">\n                    <strong>Verification Process:</strong> A ₹1 charge will be made to verify your\n                    payment method. This amount will be refunded immediately after verification.\n                  </p>\n                </div>\n              )}\n\n              {/* Set as default */}\n              <label className=\"flex items-center gap-2 cursor-pointer\">\n                <input\n                  type=\"checkbox\"\n                  checked={setAsDefault}\n                  onChange={(e) => setSetAsDefault(e.target.checked)}\n                  className=\"size-4 rounded border-border-default text-text-link focus:ring-[var(--color-focus-ring)]\"\n                  disabled={isProcessing}\n                />\n                <span className=\"text-sm text-text-primary\">\n                  {tr('billing.overview.setAsDefault', 'Set as default payment method')}\n                </span>\n              </label>\n\n              {/* Provider badge */}\n              <div className=\"flex items-center gap-2 pt-2 border-t border-border-subtle\">\n                <span className=\"text-xs text-text-secondary\">Secured by</span>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${\n                    selectedProvider === 'stripe'\n                      ? 'bg-accent-violet-subtle text-accent-violet'\n                      : 'bg-status-info-bg-subtle text-status-info-text'\n                  }`}\n                >\n                  {selectedProvider === 'stripe' ? 'Stripe' : 'Razorpay'}\n                </span>\n              </div>\n            </div>\n          ) : (\n            /* Success state */\n            <div className=\"flex flex-col items-center py-8 text-center\">\n              <div className=\"size-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center mb-4\">\n                <CheckCircle2 className=\"size-8 text-status-success-text\" />\n              </div>\n              <p className=\"font-medium text-text-primary\">\n                {tr('billing.overview.paymentMethodAdded', 'Payment method added successfully!')}\n              </p>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                Your payment method has been securely saved.\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        {step !== 'success' && (\n          <footer className=\"flex items-center justify-between gap-3 p-4 border-t border-border-subtle bg-bg-sunken rounded-b-lg flex-shrink-0\">\n            {step === 'add-card' && showStripe && showRazorpay ? (\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setStep('select-provider');\n                  setSelectedProvider(null);\n                  setError(null);\n                  // Cleanup Stripe element\n                  if (stripeCardElementRef.current) {\n                    stripeCardElementRef.current.destroy();\n                    stripeCardElementRef.current = null;\n                  }\n                }}\n                disabled={isProcessing}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary hover:text-text-link transition-colors disabled:opacity-50\"\n              >\n                Back\n              </button>\n            ) : (\n              <div />\n            )}\n            <div className=\"flex items-center gap-3\">\n              <button\n                type=\"button\"\n                onClick={onClose}\n                disabled={isProcessing}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n              >\n                Cancel\n              </button>\n              {step === 'add-card' && (\n                <button\n                  type=\"button\"\n                  onClick={handleSubmit}\n                  disabled={\n                    isProcessing ||\n                    isAddingPaymentMethod ||\n                    isLoadingSdk ||\n                    (selectedProvider === 'stripe' && !isCardComplete)\n                  }\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-lg hover:bg-action-primary-bgHover transition-colors disabled:opacity-50\"\n                >\n                  {isProcessing || isAddingPaymentMethod ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" />\n                      {selectedProvider === 'razorpay' ? 'Processing...' : 'Saving...'}\n                    </>\n                  ) : isLoadingSdk ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" />\n                      Loading…\n                    </>\n                  ) : selectedProvider === 'stripe' ? (\n                    'Add Card'\n                  ) : (\n                    'Add Payment Method (₹1)'\n                  )}\n                </button>\n              )}\n            </div>\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AddPaymentMethodModal.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/AddPaymentMethodModal.tsx"],"sourcesContent":["/**\n * Add Payment Method Modal Component\n * Modal for adding a new payment method via Stripe or Razorpay SDKs\n */\n\nimport { type FC, useState, useCallback, useEffect, useRef } from 'react';\nimport { X, CreditCard, Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePaymentProviderConfig, useDashboardMutations } from '../hooks';\nimport { PaymentProviderPreference } from '../../../shared/types';\nimport { getStripeCardElementStyle } from '../../../shared/utils';\n\n// Stripe types (loaded dynamically)\ndeclare global {\n  interface Window {\n    Stripe?: (key: string) => StripeInstance;\n    Razorpay?: new (options: RazorpayOptions) => RazorpayInstance;\n  }\n}\n\ninterface StripeInstance {\n  elements: () => StripeElements;\n  createPaymentMethod: (options: {\n    type: 'card';\n    card: StripeCardElement;\n    billing_details?: { name?: string };\n  }) => Promise<{\n    paymentMethod?: {\n      id: string;\n      card?: { brand: string; last4: string; exp_month: number; exp_year: number };\n    };\n    error?: { message: string };\n  }>;\n  confirmCardSetup: (\n    clientSecret: string,\n    options?: {\n      payment_method?: {\n        card: StripeCardElement;\n        billing_details?: { name?: string };\n      };\n    }\n  ) => Promise<{\n    setupIntent?: {\n      id: string;\n      status: string;\n      payment_method?: string;\n    };\n    error?: { message: string };\n  }>;\n}\n\ninterface StripeElements {\n  create: (type: 'card', options?: object) => StripeCardElement;\n}\n\ninterface StripeCardElement {\n  mount: (element: HTMLElement | string) => void;\n  unmount: () => void;\n  on: (\n    event: string,\n    handler: (event: { complete: boolean; error?: { message: string } }) => void\n  ) => void;\n  destroy: () => void;\n}\n\ninterface RazorpayOptions {\n  key: string;\n  amount: number;\n  currency: string;\n  order_id: string;\n  customer_id?: string;\n  name: string;\n  description: string;\n  method?: 'card' | 'upi' | 'netbanking' | 'wallet' | 'emi' | 'cardless_emi';\n  handler: (response: RazorpayResponse) => void;\n  modal?: { ondismiss?: () => void };\n  prefill?: { name?: string; email?: string; contact?: string };\n  notes?: Record<string, string>;\n  config?: {\n    display?: {\n      hide?: Array<{ method: string }>;\n      preferences?: {\n        show_default_blocks?: boolean;\n      };\n    };\n  };\n}\n\ninterface RazorpayInstance {\n  open: () => void;\n  close: () => void;\n}\n\ninterface RazorpayResponse {\n  razorpay_payment_id: string;\n  razorpay_token?: string;\n}\n\ninterface AddPaymentMethodModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  billingAccountId: string;\n  currency: string; // e.g., 'INR', 'USD'\n  country?: string; // e.g., 'IN', 'US' - from billing address\n  onSuccess?: () => void;\n}\n\ntype ModalStep = 'select-provider' | 'add-card' | 'processing' | 'success';\n\n// Load external script dynamically\nconst loadScript = (src: string, id: string): Promise<void> => {\n  return new Promise((resolve, reject) => {\n    if (document.getElementById(id)) {\n      resolve();\n      return;\n    }\n    const script = document.createElement('script');\n    script.id = id;\n    script.src = src;\n    script.async = true;\n    script.onload = () => resolve();\n    script.onerror = () => reject(new Error(`Failed to load ${src}`));\n    document.head.appendChild(script);\n  });\n};\n\nexport const AddPaymentMethodModal: FC<AddPaymentMethodModalProps> = ({\n  isOpen,\n  onClose,\n  billingAccountId,\n  currency,\n  country,\n  onSuccess,\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 modalRef = useRef<HTMLDivElement>(null);\n  const cardElementRef = useRef<HTMLDivElement>(null);\n  const stripeCardElementRef = useRef<StripeCardElement | null>(null);\n  const stripeRef = useRef<StripeInstance | null>(null);\n\n  // Only fetch payment provider config when modal is open\n  const {\n    stripeEnabled,\n    stripePublishableKey,\n    razorpayEnabled,\n    isLoading: isLoadingConfig,\n  } = usePaymentProviderConfig(!isOpen);\n  const { isAddingPaymentMethod, verifyPaymentMethod } = useDashboardMutations();\n\n  // Determine which providers to show based on currency and country\n  // Razorpay: India only (INR currency OR IN country)\n  // Stripe: International (non-INR OR non-IN country)\n  const isIndianAccount = currency?.toUpperCase() === 'INR' || country?.toUpperCase() === 'IN';\n  const showRazorpay = razorpayEnabled && isIndianAccount;\n  const showStripe = stripeEnabled && !isIndianAccount;\n\n  const [step, setStep] = useState<ModalStep>('select-provider');\n  const [selectedProvider, setSelectedProvider] = useState<'stripe' | 'razorpay' | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [isLoadingSdk, setIsLoadingSdk] = useState(false);\n  const [cardholderName, setCardholderName] = useState('');\n  const [setAsDefault, setSetAsDefault] = useState(true);\n  const [isCardComplete, setIsCardComplete] = useState(false);\n\n  // Must be declared before the effects that reference it\n  const handleSelectProvider = useCallback((provider: 'stripe' | 'razorpay') => {\n    setSelectedProvider(provider);\n    setStep('add-card');\n    setError(null);\n  }, []);\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      setStep('select-provider');\n      setSelectedProvider(null);\n      setError(null);\n      setCardholderName('');\n      setSetAsDefault(true);\n      setIsCardComplete(false);\n    } else {\n      // Cleanup Stripe element when modal closes\n      if (stripeCardElementRef.current) {\n        stripeCardElementRef.current.destroy();\n        stripeCardElementRef.current = null;\n      }\n    }\n  }, [isOpen]);\n\n  // Auto-select provider when only one is available (skip the select-provider screen)\n  useEffect(() => {\n    if (step !== 'select-provider' || isLoadingConfig) return;\n    if (showStripe && !showRazorpay) {\n      handleSelectProvider('stripe');\n    } else if (showRazorpay && !showStripe) {\n      handleSelectProvider('razorpay');\n    }\n  }, [step, isLoadingConfig, showStripe, showRazorpay, handleSelectProvider]);\n\n  // Initialize Stripe when provider is selected\n  useEffect(() => {\n    if (step !== 'add-card' || selectedProvider !== 'stripe') return;\n\n    // Show error if config loaded but key is missing\n    if (!stripePublishableKey && !isLoadingConfig) {\n      setError('Stripe is not configured. Please contact support.');\n      return;\n    }\n\n    if (!stripePublishableKey) return;\n\n    const initStripe = async () => {\n      setIsLoadingSdk(true);\n      try {\n        await loadScript('https://js.stripe.com/v3/', 'stripe-js');\n\n        if (!window.Stripe) {\n          throw new Error('Stripe SDK failed to load');\n        }\n\n        const stripe = window.Stripe(stripePublishableKey);\n        stripeRef.current = stripe;\n\n        // Wait for the card element container to be mounted in the DOM\n        let attempts = 0;\n        while (!cardElementRef.current && attempts < 50) {\n          await new Promise((resolve) => setTimeout(resolve, 100));\n          attempts++;\n        }\n\n        if (!cardElementRef.current) {\n          throw new Error('Card element container not found after 5 seconds');\n        }\n\n        if (stripeCardElementRef.current) {\n          return;\n        }\n\n        const elements = stripe.elements();\n        const cardElement = elements.create('card', {\n          style: getStripeCardElementStyle('system-ui, -apple-system, sans-serif'),\n        });\n\n        cardElement.mount(cardElementRef.current);\n        stripeCardElementRef.current = cardElement;\n\n        cardElement.on('change', (event) => {\n          setIsCardComplete(event.complete);\n          if (event.error) {\n            setError(event.error.message);\n          } else {\n            setError(null);\n          }\n        });\n      } catch (err) {\n        setError(err instanceof Error ? err.message : 'Failed to load Stripe');\n      } finally {\n        setIsLoadingSdk(false);\n      }\n    };\n\n    initStripe();\n\n    return () => {\n      if (stripeCardElementRef.current) {\n        try {\n          stripeCardElementRef.current.destroy();\n          stripeCardElementRef.current = null;\n        } catch {\n          // Stripe element may already be detached during modal teardown.\n        }\n      }\n    };\n  }, [step, selectedProvider, stripePublishableKey, isLoadingConfig]);\n\n  // Handle escape key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen && !isProcessing) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, isProcessing, onClose]);\n\n  const handleStripeSubmit = useCallback(async () => {\n    if (!stripeRef.current || !stripeCardElementRef.current) {\n      setError('Stripe not initialized');\n      return;\n    }\n\n    if (!cardholderName.trim()) {\n      setError('Please enter the cardholder name');\n      return;\n    }\n\n    setIsProcessing(true);\n    setError(null);\n\n    try {\n      // Step 1: Call backend to create SetupIntent and get client secret\n      const verificationResult = await verifyPaymentMethod({\n        billingAccountId,\n        currency: 'USD',\n        provider: PaymentProviderPreference.STRIPE,\n        setAsDefault,\n      });\n\n      if (!verificationResult.clientSecret) {\n        throw new Error('Failed to initiate card verification');\n      }\n\n      // Step 2: Confirm card setup using the client secret (no charge)\n      const { setupIntent, error: stripeError } = await stripeRef.current.confirmCardSetup(\n        verificationResult.clientSecret,\n        {\n          payment_method: {\n            card: stripeCardElementRef.current,\n            billing_details: { name: cardholderName },\n          },\n        }\n      );\n\n      if (stripeError) {\n        throw new Error(stripeError.message);\n      }\n\n      if (setupIntent?.status !== 'succeeded') {\n        throw new Error('Card verification failed');\n      }\n\n      // Step 3: Show success (webhook will save the payment method)\n      setStep('success');\n\n      // Wait for webhook to process (2 seconds) before refetching\n      await new Promise((resolve) => setTimeout(resolve, 2000));\n      onSuccess?.();\n\n      // Show success message briefly before closing\n      setTimeout(() => {\n        onClose();\n      }, 500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to add payment method');\n      setIsProcessing(false);\n    }\n  }, [cardholderName, setAsDefault, billingAccountId, verifyPaymentMethod, onSuccess, onClose]);\n\n  const handleRazorpaySubmit = useCallback(async () => {\n    setIsProcessing(true);\n    setError(null);\n\n    try {\n      // Load Razorpay SDK\n      setIsLoadingSdk(true);\n      try {\n        await loadScript('https://checkout.razorpay.com/v1/checkout.js', 'razorpay-sdk');\n      } catch {\n        setError('Failed to load Razorpay SDK');\n        setIsProcessing(false);\n        setIsLoadingSdk(false);\n        return;\n      }\n      setIsLoadingSdk(false);\n\n      // Initiate ₹1 verification payment\n      const verificationResult = await verifyPaymentMethod({\n        billingAccountId,\n        currency: 'INR',\n        provider: PaymentProviderPreference.RAZORPAY,\n        setAsDefault,\n      });\n\n      if (\n        !verificationResult.success ||\n        !verificationResult.orderId ||\n        !verificationResult.razorpayKeyId\n      ) {\n        setError(verificationResult.error || 'Failed to initiate verification');\n        setIsProcessing(false);\n        return;\n      }\n\n      // Open Razorpay checkout with ALL payment methods\n      if (!window.Razorpay) {\n        setError('Razorpay SDK not loaded');\n        setIsProcessing(false);\n        return;\n      }\n\n      const options = {\n        key: verificationResult.razorpayKeyId,\n        amount: (verificationResult.amount ?? 0) * 100, // Convert to paise\n        currency: verificationResult.currency.toUpperCase(),\n        order_id: verificationResult.orderId,\n        customer_id: verificationResult.razorpayCustomerId, // Link to customer for saving\n        name: 'Add Payment Method',\n        description: `₹${verificationResult.amount} verification charge (refundable)`,\n        prefill: {\n          name: verificationResult.prefillName,\n          email: verificationResult.prefillEmail,\n          contact: verificationResult.prefillContact,\n        },\n        notes: {\n          purchaseType: 'PAYMENT_METHOD_VERIFICATION',\n          default_method: setAsDefault.toString(),\n        },\n        handler: async () => {\n          // Payment successful - payment method will be saved via webhook\n          setStep('success');\n\n          // Wait for webhook to process (2 seconds) before refetching\n          await new Promise((resolve) => setTimeout(resolve, 2000));\n          onSuccess?.();\n\n          // Show success message briefly before closing\n          setTimeout(() => {\n            onClose();\n          }, 500);\n        },\n        modal: {\n          ondismiss: () => {\n            setIsProcessing(false);\n            setError('Payment cancelled');\n          },\n        },\n      };\n\n      const rzp = new window.Razorpay(options);\n      rzp.open();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to add payment method');\n      setIsProcessing(false);\n    }\n  }, [setAsDefault, billingAccountId, verifyPaymentMethod, onSuccess, onClose]);\n\n  const handleSubmit = useCallback(() => {\n    if (selectedProvider === 'stripe') {\n      handleStripeSubmit();\n    } else if (selectedProvider === 'razorpay') {\n      handleRazorpaySubmit();\n    }\n  }, [selectedProvider, handleStripeSubmit, handleRazorpaySubmit]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modal-title\"\n    >\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-bg-overlay backdrop-blur-sm\"\n        onClick={!isProcessing ? onClose : undefined}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div\n        ref={modalRef}\n        className=\"relative w-full max-w-md max-h-[90vh] mx-4 bg-bg-surface border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] flex flex-col\"\n      >\n        {/* Header */}\n        <header className=\"flex items-center justify-between p-4 border-b border-border-subtle flex-shrink-0\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n              <CreditCard className=\"size-5 text-text-link\" />\n            </div>\n            <div>\n              <h2 id=\"modal-title\" className=\"text-lg font-semibold text-text-primary\">\n                {step === 'success' ? 'Payment Method Added' : 'Add Payment Method'}\n              </h2>\n              <p className=\"text-sm text-text-secondary\">\n                {step === 'select-provider' && 'Choose a payment provider'}\n                {step === 'add-card' &&\n                  (selectedProvider === 'stripe'\n                    ? 'Add card via Stripe'\n                    : 'Add payment method with ₹1 verification')}\n                {step === 'processing' && 'Processing...'}\n                {step === 'success' && 'Your payment method has been saved'}\n              </p>\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isProcessing}\n            className=\"p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50\"\n            aria-label=\"Close modal\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </header>\n\n        {/* Content */}\n        <div className=\"p-4 overflow-y-auto flex-1\">\n          {isLoadingConfig ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n            </div>\n          ) : step === 'select-provider' ? (\n            <div className=\"space-y-3\">\n              {showStripe && (\n                <button\n                  type=\"button\"\n                  onClick={() => handleSelectProvider('stripe')}\n                  className=\"w-full flex items-center gap-4 p-4 border border-border-subtle rounded-lg hover:border-border-strong hover:bg-[var(--color-accent-soft)] transition-colors text-left\"\n                >\n                  <div className=\"size-12 rounded-lg bg-accent-violet-subtle flex items-center justify-center\">\n                    <CreditCard className=\"size-6 text-accent-violet\" />\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-text-primary\">Stripe</p>\n                    <p className=\"text-sm text-text-secondary\">Cards, Apple Pay, Google Pay</p>\n                  </div>\n                </button>\n              )}\n              {showRazorpay && (\n                <button\n                  type=\"button\"\n                  onClick={() => handleSelectProvider('razorpay')}\n                  className=\"w-full flex items-center gap-4 p-4 border border-border-subtle rounded-lg hover:border-border-strong hover:bg-[var(--color-accent-soft)] transition-colors text-left\"\n                >\n                  <div className=\"size-12 rounded-lg bg-status-info-bg-subtle flex items-center justify-center\">\n                    <CreditCard className=\"size-6 text-accent-blue\" />\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-text-primary\">Razorpay</p>\n                    <p className=\"text-sm text-text-secondary\">UPI, Netbanking, Cards</p>\n                  </div>\n                </button>\n              )}\n              {!showStripe && !showRazorpay && (\n                <div className=\"flex flex-col items-center py-8 text-center\">\n                  <AlertCircle className=\"size-12 text-status-warning-text mb-3\" />\n                  <p className=\"font-medium text-text-primary\">\n                    {tr('billing.overview.noPaymentProviders', 'No Payment Providers Available')}\n                  </p>\n                  <p className=\"text-sm text-text-secondary mt-1\">\n                    {isIndianAccount\n                      ? 'Razorpay is not configured for Indian accounts. Please contact support.'\n                      : 'Stripe is not configured for international accounts. Please contact support.'}\n                  </p>\n                </div>\n              )}\n            </div>\n          ) : step === 'add-card' ? (\n            <div className=\"space-y-4\">\n              {/* Error Message */}\n              {error && (\n                <div className=\"flex items-center gap-2 p-3 rounded-lg bg-status-error-bg-subtle border border-status-error-border text-status-error-text\">\n                  <AlertCircle className=\"size-4 flex-shrink-0\" />\n                  <p className=\"text-sm\">{error}</p>\n                </div>\n              )}\n\n              {/* Cardholder Name - only for Stripe */}\n              {selectedProvider === 'stripe' && (\n                <div className=\"space-y-1.5\">\n                  <label\n                    htmlFor=\"cardholderName\"\n                    className=\"block text-sm font-medium text-text-primary\"\n                  >\n                    Cardholder Name\n                  </label>\n                  <input\n                    type=\"text\"\n                    id=\"cardholderName\"\n                    value={cardholderName}\n                    onChange={(e) => setCardholderName(e.target.value)}\n                    className=\"w-full px-3 py-2 border border-border-default rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong\"\n                    placeholder=\"John Doe\"\n                    disabled={isProcessing}\n                  />\n                </div>\n              )}\n\n              {/* Stripe Card Element */}\n              {selectedProvider === 'stripe' && (\n                <div className=\"space-y-1.5\">\n                  <label className=\"block text-sm font-medium text-text-primary\">\n                    {tr('billing.overview.cardDetails', 'Card Details')}\n                  </label>\n                  <div className=\"relative\">\n                    <div\n                      ref={cardElementRef}\n                      className=\"p-3 border border-border-default rounded-lg bg-bg-surface min-h-[56px]\"\n                    />\n                    {isLoadingSdk && (\n                      <div className=\"absolute inset-0 flex items-center justify-center bg-bg-overlay rounded-lg\">\n                        <Loader2 className=\"size-5 animate-spin text-text-secondary\" />\n                        <span className=\"ml-2 text-sm text-text-secondary\">Loading Stripe…</span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )}\n\n              {/* Razorpay - Verification Info */}\n              {selectedProvider === 'razorpay' && (\n                <div className=\"p-3 border border-border-subtle rounded-lg bg-status-info-bg-subtle\">\n                  <p className=\"text-sm text-status-info-text\">\n                    <strong>Verification Process:</strong> A ₹1 charge will be made to verify your\n                    payment method. This amount will be refunded immediately after verification.\n                  </p>\n                </div>\n              )}\n\n              {/* Set as default */}\n              <label className=\"flex items-center gap-2 cursor-pointer\">\n                <input\n                  type=\"checkbox\"\n                  checked={setAsDefault}\n                  onChange={(e) => setSetAsDefault(e.target.checked)}\n                  className=\"size-4 rounded border-border-default text-text-link focus:ring-[var(--color-focus-ring)]\"\n                  disabled={isProcessing}\n                />\n                <span className=\"text-sm text-text-primary\">\n                  {tr('billing.overview.setAsDefault', 'Set as default payment method')}\n                </span>\n              </label>\n\n              {/* Provider badge */}\n              <div className=\"flex items-center gap-2 pt-2 border-t border-border-subtle\">\n                <span className=\"text-xs text-text-secondary\">Secured by</span>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${\n                    selectedProvider === 'stripe'\n                      ? 'bg-accent-violet-subtle text-accent-violet'\n                      : 'bg-status-info-bg-subtle text-status-info-text'\n                  }`}\n                >\n                  {selectedProvider === 'stripe' ? 'Stripe' : 'Razorpay'}\n                </span>\n              </div>\n            </div>\n          ) : (\n            /* Success state */\n            <div className=\"flex flex-col items-center py-8 text-center\">\n              <div className=\"size-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center mb-4\">\n                <CheckCircle2 className=\"size-8 text-status-success-text\" />\n              </div>\n              <p className=\"font-medium text-text-primary\">\n                {tr('billing.overview.paymentMethodAdded', 'Payment method added successfully!')}\n              </p>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                Your payment method has been securely saved.\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        {step !== 'success' && (\n          <footer className=\"flex items-center justify-between gap-3 p-4 border-t border-border-subtle bg-bg-sunken rounded-b-lg flex-shrink-0\">\n            {step === 'add-card' && showStripe && showRazorpay ? (\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setStep('select-provider');\n                  setSelectedProvider(null);\n                  setError(null);\n                  // Cleanup Stripe element\n                  if (stripeCardElementRef.current) {\n                    stripeCardElementRef.current.destroy();\n                    stripeCardElementRef.current = null;\n                  }\n                }}\n                disabled={isProcessing}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary hover:text-text-link transition-colors disabled:opacity-50\"\n              >\n                Back\n              </button>\n            ) : (\n              <div />\n            )}\n            <div className=\"flex items-center gap-3\">\n              <button\n                type=\"button\"\n                onClick={onClose}\n                disabled={isProcessing}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n              >\n                Cancel\n              </button>\n              {step === 'add-card' && (\n                <button\n                  type=\"button\"\n                  onClick={handleSubmit}\n                  disabled={\n                    isProcessing ||\n                    isAddingPaymentMethod ||\n                    isLoadingSdk ||\n                    (selectedProvider === 'stripe' && !isCardComplete)\n                  }\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-lg hover:bg-action-primary-bgHover transition-colors disabled:opacity-50\"\n                >\n                  {isProcessing || isAddingPaymentMethod ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" />\n                      {selectedProvider === 'razorpay' ? 'Processing...' : 'Saving...'}\n                    </>\n                  ) : isLoadingSdk ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" />\n                      Loading…\n                    </>\n                  ) : selectedProvider === 'stripe' ? (\n                    'Add Card'\n                  ) : (\n                    'Add Payment Method (₹1)'\n                  )}\n                </button>\n              )}\n            </div>\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AA8GA,IAAM,KAAc,GAAa,MACxB,IAAI,SAAS,GAAS,MAAW;AACtC,KAAI,SAAS,eAAe,EAAG,EAAE;AAC/B,KAAS;AACT;;CAEF,IAAM,IAAS,SAAS,cAAc,SAAS;AAM/C,CALA,EAAO,KAAK,GACZ,EAAO,MAAM,GACb,EAAO,QAAQ,IACf,EAAO,eAAe,GAAS,EAC/B,EAAO,gBAAgB,EAAO,gBAAI,MAAM,kBAAkB,IAAM,CAAC,EACjE,SAAS,KAAK,YAAY,EAAO;EACjC,EAGS,KAAyD,EACpE,WACA,YACA,qBACA,aACA,YACA,mBACI;CACJ,IAAM,EAAE,SAAM,IAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,KAAW,EAAuB,KAAK,EACvC,IAAiB,EAAuB,KAAK,EAC7C,IAAuB,EAAiC,KAAK,EAC7D,IAAY,EAA8B,KAAK,EAG/C,EACJ,kBACA,yBACA,oBACA,WAAW,MACT,EAAyB,CAAC,EAAO,EAC/B,EAAE,0BAAuB,2BAAwB,GAAuB,EAKxE,IAAkB,GAAU,aAAa,KAAK,SAAS,GAAS,aAAa,KAAK,MAClF,IAAe,KAAmB,GAClC,IAAa,KAAiB,CAAC,GAE/B,CAAC,GAAM,KAAW,EAAoB,kBAAkB,EACxD,CAAC,GAAkB,KAAuB,EAAuC,KAAK,EACtF,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,CAAC,GAAc,KAAmB,EAAS,GAAK,EAChD,CAAC,IAAgB,KAAqB,EAAS,GAAM,EAGrD,IAAuB,GAAa,MAAoC;AAG5E,EAFA,EAAoB,EAAS,EAC7B,EAAQ,WAAW,EACnB,EAAS,KAAK;IACb,EAAE,CAAC;AA2GN,CAxGA,QAAgB;AACd,EAAI,KACF,EAAQ,kBAAkB,EAC1B,EAAoB,KAAK,EACzB,EAAS,KAAK,EACd,EAAkB,GAAG,EACrB,EAAgB,GAAK,EACrB,EAAkB,GAAM,IAKtB,EAAqB,aADrB,EAAqB,QAAQ,SAAS,EACP;IAGlC,CAAC,EAAO,CAAC,EAGZ,QAAgB;AACV,QAAS,qBAAqB,MAC9B,KAAc,CAAC,IACjB,EAAqB,SAAS,GACrB,KAAgB,CAAC,KAC1B,EAAqB,WAAW;IAEjC;EAAC;EAAM;EAAiB;EAAY;EAAc;EAAqB,CAAC,EAG3E,QAAgB;AACV,cAAS,cAAc,MAAqB,WAGhD;OAAI,CAAC,KAAwB,CAAC,GAAiB;AAC7C,MAAS,oDAAoD;AAC7D;;AAyDF,UAtDK,MAEc,YAAY;AAC7B,MAAgB,GAAK;AACrB,QAAI;AAGF,SAFA,MAAM,EAAW,6BAA6B,YAAY,EAEtD,CAAC,OAAO,OACV,OAAU,MAAM,4BAA4B;KAG9C,IAAM,IAAS,OAAO,OAAO,EAAqB;AAClD,OAAU,UAAU;KAGpB,IAAI,IAAW;AACf,YAAO,CAAC,EAAe,WAAW,IAAW,IAE3C,CADA,MAAM,IAAI,SAAS,MAAY,WAAW,GAAS,IAAI,CAAC,EACxD;AAGF,SAAI,CAAC,EAAe,QAClB,OAAU,MAAM,mDAAmD;AAGrE,SAAI,EAAqB,QACvB;KAIF,IAAM,IADW,EAAO,UAAU,CACL,OAAO,QAAQ,EAC1C,OAAO,EAA0B,uCAAuC,EACzE,CAAC;AAKF,KAHA,EAAY,MAAM,EAAe,QAAQ,EACzC,EAAqB,UAAU,GAE/B,EAAY,GAAG,WAAW,MAAU;AAElC,MADA,EAAkB,EAAM,SAAS,EAC7B,EAAM,QACR,EAAS,EAAM,MAAM,QAAQ,GAE7B,EAAS,KAAK;OAEhB;aACK,GAAK;AACZ,OAAS,aAAe,QAAQ,EAAI,UAAU,wBAAwB;cAC9D;AACR,OAAgB,GAAM;;OAId,QAEC;AACX,QAAI,EAAqB,QACvB,KAAI;AAEF,KADA,EAAqB,QAAQ,SAAS,EACtC,EAAqB,UAAU;YACzB;QA3De;;IAgE1B;EAAC;EAAM;EAAkB;EAAsB;EAAgB,CAAC,EAGnE,QAAgB;EACd,IAAM,KAAiB,MAAqB;AAC1C,GAAI,EAAE,QAAQ,YAAY,KAAU,CAAC,KACnC,GAAS;;AAIb,SADA,SAAS,iBAAiB,WAAW,EAAc,QACtC,SAAS,oBAAoB,WAAW,EAAc;IAClE;EAAC;EAAQ;EAAc;EAAQ,CAAC;CAEnC,IAAM,IAAqB,EAAY,YAAY;AACjD,MAAI,CAAC,EAAU,WAAW,CAAC,EAAqB,SAAS;AACvD,KAAS,yBAAyB;AAClC;;AAGF,MAAI,CAAC,EAAe,MAAM,EAAE;AAC1B,KAAS,mCAAmC;AAC5C;;AAIF,EADA,EAAgB,GAAK,EACrB,EAAS,KAAK;AAEd,MAAI;GAEF,IAAM,IAAqB,MAAM,EAAoB;IACnD;IACA,UAAU;IACV,UAAU,EAA0B;IACpC;IACD,CAAC;AAEF,OAAI,CAAC,EAAmB,aACtB,OAAU,MAAM,uCAAuC;GAIzD,IAAM,EAAE,gBAAa,OAAO,MAAgB,MAAM,EAAU,QAAQ,iBAClE,EAAmB,cACnB,EACE,gBAAgB;IACd,MAAM,EAAqB;IAC3B,iBAAiB,EAAE,MAAM,GAAgB;IAC1C,EACF,CACF;AAED,OAAI,EACF,OAAU,MAAM,EAAY,QAAQ;AAGtC,OAAI,GAAa,WAAW,YAC1B,OAAU,MAAM,2BAA2B;AAW7C,GAPA,EAAQ,UAAU,EAGlB,MAAM,IAAI,SAAS,MAAY,WAAW,GAAS,IAAK,CAAC,EACzD,KAAa,EAGb,iBAAiB;AACf,OAAS;MACR,IAAI;WACA,GAAK;AAEZ,GADA,EAAS,aAAe,QAAQ,EAAI,UAAU,+BAA+B,EAC7E,EAAgB,GAAM;;IAEvB;EAAC;EAAgB;EAAc;EAAkB;EAAqB;EAAW;EAAQ,CAAC,EAEvF,IAAuB,EAAY,YAAY;AAEnD,EADA,EAAgB,GAAK,EACrB,EAAS,KAAK;AAEd,MAAI;AAEF,KAAgB,GAAK;AACrB,OAAI;AACF,UAAM,EAAW,gDAAgD,eAAe;WAC1E;AAGN,IAFA,EAAS,8BAA8B,EACvC,EAAgB,GAAM,EACtB,EAAgB,GAAM;AACtB;;AAEF,KAAgB,GAAM;GAGtB,IAAM,IAAqB,MAAM,EAAoB;IACnD;IACA,UAAU;IACV,UAAU,EAA0B;IACpC;IACD,CAAC;AAEF,OACE,CAAC,EAAmB,WACpB,CAAC,EAAmB,WACpB,CAAC,EAAmB,eACpB;AAEA,IADA,EAAS,EAAmB,SAAS,kCAAkC,EACvE,EAAgB,GAAM;AACtB;;AAIF,OAAI,CAAC,OAAO,UAAU;AAEpB,IADA,EAAS,0BAA0B,EACnC,EAAgB,GAAM;AACtB;;GAGF,IAAM,IAAU;IACd,KAAK,EAAmB;IACxB,SAAS,EAAmB,UAAU,KAAK;IAC3C,UAAU,EAAmB,SAAS,aAAa;IACnD,UAAU,EAAmB;IAC7B,aAAa,EAAmB;IAChC,MAAM;IACN,aAAa,IAAI,EAAmB,OAAO;IAC3C,SAAS;KACP,MAAM,EAAmB;KACzB,OAAO,EAAmB;KAC1B,SAAS,EAAmB;KAC7B;IACD,OAAO;KACL,cAAc;KACd,gBAAgB,EAAa,UAAU;KACxC;IACD,SAAS,YAAY;AASnB,KAPA,EAAQ,UAAU,EAGlB,MAAM,IAAI,SAAS,MAAY,WAAW,GAAS,IAAK,CAAC,EACzD,KAAa,EAGb,iBAAiB;AACf,SAAS;QACR,IAAI;;IAET,OAAO,EACL,iBAAiB;AAEf,KADA,EAAgB,GAAM,EACtB,EAAS,oBAAoB;OAEhC;IACF;AAEW,OAAI,OAAO,SAAS,EAAQ,CACpC,MAAM;WACH,GAAK;AAEZ,GADA,EAAS,aAAe,QAAQ,EAAI,UAAU,+BAA+B,EAC7E,EAAgB,GAAM;;IAEvB;EAAC;EAAc;EAAkB;EAAqB;EAAW;EAAQ,CAAC,EAEvE,KAAe,QAAkB;AACrC,EAAI,MAAqB,WACvB,GAAoB,GACX,MAAqB,cAC9B,GAAsB;IAEvB;EAAC;EAAkB;EAAoB;EAAqB,CAAC;AAIhE,QAFK,IAGH,kBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAW;EACX,mBAAgB;YAJlB,CAOE,kBAAC,OAAD;GACE,WAAU;GACV,SAAU,IAAyB,KAAA,IAAV;GACzB,eAAY;GACZ,CAAA,EAGF,kBAAC,OAAD;GACE,KAAK;GACL,WAAU;aAFZ;IAKE,kBAAC,UAAD;KAAQ,WAAU;eAAlB,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAY,WAAU,yBAA0B,CAAA;OAC5C,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;OAAI,IAAG;OAAc,WAAU;iBAC5B,MAAS,YAAY,yBAAyB;OAC5C,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,MAAS,qBAAqB;QAC9B,MAAS,eACP,MAAqB,WAClB,wBACA;QACL,MAAS,gBAAgB;QACzB,MAAS,aAAa;QACrB;SACA,EAAA,CAAA,CACF;SACN,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAU;MACV,cAAW;gBAEX,kBAAC,IAAD,EAAG,WAAU,UAAW,CAAA;MACjB,CAAA,CACF;;IAGT,kBAAC,OAAD;KAAK,WAAU;eACZ,IACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAS,WAAU,2CAA4C,CAAA;MAC3D,CAAA,GACJ,MAAS,oBACX,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,KACC,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAqB,SAAS;QAC7C,WAAU;kBAHZ,CAKE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD,EAAY,WAAU,6BAA8B,CAAA;SAChD,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAgC;SAAU,CAAA,EACvD,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAgC,CAAA,CACvE,EAAA,CAAA,CACC;;OAEV,KACC,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAqB,WAAW;QAC/C,WAAU;kBAHZ,CAKE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD,EAAY,WAAU,2BAA4B,CAAA;SAC9C,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAgC;SAAY,CAAA,EACzD,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAA0B,CAAA,CACjE,EAAA,CAAA,CACC;;OAEV,CAAC,KAAc,CAAC,KACf,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD,EAAa,WAAU,yCAA0C,CAAA;SACjE,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAG,uCAAuC,iCAAiC;UAC1E,CAAA;SACJ,kBAAC,KAAD;UAAG,WAAU;oBACV,IACG,4EACA;UACF,CAAA;SACA;;OAEJ;UACJ,MAAS,aACX,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEG,KACC,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAa,WAAU,wBAAyB,CAAA,EAChD,kBAAC,KAAD;SAAG,WAAU;mBAAW;SAAU,CAAA,CAC9B;;OAIP,MAAqB,YACpB,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SACE,SAAQ;SACR,WAAU;mBACX;SAEO,CAAA,EACR,kBAAC,SAAD;SACE,MAAK;SACL,IAAG;SACH,OAAO;SACP,WAAW,MAAM,EAAkB,EAAE,OAAO,MAAM;SAClD,WAAU;SACV,aAAY;SACZ,UAAU;SACV,CAAA,CACE;;OAIP,MAAqB,YACpB,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SAAO,WAAU;mBACd,EAAG,gCAAgC,eAAe;SAC7C,CAAA,EACR,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UACE,KAAK;UACL,WAAU;UACV,CAAA,EACD,KACC,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAS,WAAU,2CAA4C,CAAA,EAC/D,kBAAC,QAAD;WAAM,WAAU;qBAAmC;WAAsB,CAAA,CACrE;YAEJ;WACF;;OAIP,MAAqB,cACpB,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,KAAD;SAAG,WAAU;mBAAb,CACE,kBAAC,UAAD,EAAA,UAAQ,yBAA8B,CAAA,EAAA,wHAEpC;;QACA,CAAA;OAIR,kBAAC,SAAD;QAAO,WAAU;kBAAjB,CACE,kBAAC,SAAD;SACE,MAAK;SACL,SAAS;SACT,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;SAClD,WAAU;SACV,UAAU;SACV,CAAA,EACF,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,iCAAiC,gCAAgC;SAChE,CAAA,CACD;;OAGR,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAiB,CAAA,EAC/D,kBAAC,QAAD;SACE,WAAW,oEACT,MAAqB,WACjB,+CACA;mBAGL,MAAqB,WAAW,WAAW;SACvC,CAAA,CACH;;OACF;UAGN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAc,WAAU,mCAAoC,CAAA;QACxD,CAAA;OACN,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAG,uCAAuC,qCAAqC;QAC9E,CAAA;OACJ,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAE5C,CAAA;OACA;;KAEJ,CAAA;IAGL,MAAS,aACR,kBAAC,UAAD;KAAQ,WAAU;eAAlB,CACG,MAAS,cAAc,KAAc,IACpC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe;AAKb,OAJA,EAAQ,kBAAkB,EAC1B,EAAoB,KAAK,EACzB,EAAS,KAAK,EAEd,AAEE,EAAqB,aADrB,EAAqB,QAAQ,SAAS,EACP;;MAGnC,UAAU;MACV,WAAU;gBACX;MAEQ,CAAA,GAET,kBAAC,OAAD,EAAO,CAAA,EAET,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAU;iBACX;OAEQ,CAAA,EACR,MAAS,cACR,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UACE,KACA,KACA,KACC,MAAqB,YAAY,CAAC;OAErC,WAAU;iBAET,KAAgB,IACf,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAC1C,MAAqB,aAAa,kBAAkB,YACpD,EAAA,CAAA,GACD,IACF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAAA,WAE1C,EAAA,CAAA,GACD,MAAqB,WACvB,aAEA;OAEK,CAAA,CAEP;QACC;;IAEP;KACF;MArRY"}

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

@@ -12,9 +12,9 @@ var p = ({ account: p, isDefault: m = !1, isSelected: h = !1, onSelect: g, onEdi
 	return /* @__PURE__ */ d("article", {
 		"data-tour": x,
 		className: `
-        relative border rounded-card bg-bg-surface transition-all duration-200 ease-[var(--motion-easing-out)]
-        ${h ? "border-border-strong ring-1 ring-[var(--color-focus-ring)]" : "border-border-subtle"}
-        ${w ? "shadow-elevation-2" : "shadow-elevation-1"}
+        relative border rounded-card bg-bg-surface transition-[box-shadow,transform] duration-200 ease-[var(--motion-easing-out)]
+        ${h ? "border-border-strong ring-1 ring-[var(--color-focus-ring)]" : "border-border-seam"}
+        ${w ? "shadow-elevation-2 motion-safe:-translate-y-[var(--pop-lift-y)]" : "shadow-[var(--shadow-pop)]"}
         ${g ? "cursor-pointer" : ""}
         ${b}
       `,

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

@@ -1 +1 @@
-{"version":3,"file":"BillingAccountCard.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/BillingAccountCard.tsx"],"sourcesContent":["/**\n * Billing Account Card Component\n * Displays billing account details with actions\n */\n\nimport { type FC, useState } from 'react';\nimport {\n  Building2,\n  Mail,\n  CreditCard,\n  Edit2,\n  ChevronRight,\n  Coins,\n  Check,\n  Calendar,\n} from 'lucide-react';\nimport type { BillingAccount } from '../../../shared/types';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface BillingAccountCardProps {\n  account: BillingAccount;\n  isDefault?: boolean;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  onEdit?: () => void;\n  onViewTransactions?: () => void;\n  onViewCreditTransactions?: () => void;\n  className?: string;\n  /** Optional tour anchor applied to the card root (for onboarding tours). */\n  dataTour?: string;\n}\n\nexport const BillingAccountCard: FC<BillingAccountCardProps> = ({\n  account,\n  isDefault = false,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onViewTransactions,\n  onViewCreditTransactions,\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 [isHovered, setIsHovered] = useState(false);\n\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  };\n\n  return (\n    <article\n      data-tour={dataTour}\n      className={`\n        relative border rounded-card bg-bg-surface transition-all duration-200 ease-[var(--motion-easing-out)]\n        ${isSelected ? 'border-border-strong ring-1 ring-[var(--color-focus-ring)]' : 'border-border-subtle'}\n        ${isHovered ? 'shadow-elevation-2' : 'shadow-elevation-1'}\n        ${onSelect ? 'cursor-pointer' : ''}\n        ${className}\n      `}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={onSelect}\n      role={onSelect ? 'button' : 'article'}\n      tabIndex={onSelect ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (onSelect && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          onSelect();\n        }\n      }}\n    >\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 min-w-0\">\n            <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center flex-shrink-0\">\n              <Building2 className=\"size-5 text-text-link\" />\n            </div>\n            <div className=\"min-w-0\">\n              <div className=\"flex items-center gap-2\">\n                <h3 className=\"font-semibold text-text-primary truncate\">{account.name}</h3>\n                {isDefault && (\n                  <span className=\"inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-accent-soft)] text-text-link\">\n                    {tr('billing.overview.default', 'Default')}\n                  </span>\n                )}\n                {isSelected && (\n                  <span className=\"inline-flex items-center justify-center size-5 rounded-full bg-action-primary-bg\">\n                    <Check className=\"size-3 text-action-primary-text\" />\n                  </span>\n                )}\n              </div>\n              <p className=\"text-sm text-text-secondary truncate flex items-center gap-1\">\n                <Mail className=\"size-3.5\" />\n                {account.email}\n              </p>\n            </div>\n          </div>\n          {onEdit && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onEdit();\n              }}\n              className=\"p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors\"\n              aria-label=\"Edit billing account\"\n            >\n              <Edit2 className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 space-y-4\">\n        {/* Stats Grid */}\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Credit Balance\n            </p>\n            <p className=\"text-lg font-semibold text-text-primary flex items-center gap-1.5\">\n              <Coins className={`size-4 ${statusTokens.warning.icon}`} />\n              {(account.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Payment Currency\n            </p>\n            <p className=\"text-lg font-semibold text-text-primary flex items-center gap-1.5\">\n              <CreditCard className=\"size-4 text-text-link\" />\n              {account.currency || 'USD'}\n            </p>\n          </div>\n        </div>\n\n        {/* Meta Info */}\n        <div className=\"pt-3 border-t border-border-subtle\">\n          <p className=\"text-xs text-text-secondary flex items-center gap-1\">\n            <Calendar className=\"size-3.5\" />\n            Created {formatDate(account.createdAt)}\n          </p>\n        </div>\n      </div>\n\n      {/* Footer Actions */}\n      {(onViewTransactions || onViewCreditTransactions) && (\n        <footer className=\"px-4 py-3 border-t border-border-subtle bg-bg-sunken rounded-b-card\">\n          <div className=\"flex items-center gap-2\">\n            {onViewTransactions && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onViewTransactions();\n                }}\n                className=\"flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n              >\n                Transactions\n                <ChevronRight className=\"size-4\" />\n              </button>\n            )}\n            {onViewCreditTransactions && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onViewCreditTransactions();\n                }}\n                className=\"flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n              >\n                Credit History\n                <ChevronRight className=\"size-4\" />\n              </button>\n            )}\n          </div>\n        </footer>\n      )}\n\n      {/* Status indicator */}\n      {!account.isActive && (\n        <div className=\"absolute inset-0 bg-bg-overlay backdrop-blur-sm rounded-card flex items-center justify-center\">\n          <span className=\"px-3 py-1.5 rounded-full bg-status-error-bg-subtle text-status-error-text text-sm font-medium\">\n            Inactive\n          </span>\n        </div>\n      )}\n    </article>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"BillingAccountCard.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/BillingAccountCard.tsx"],"sourcesContent":["/**\n * Billing Account Card Component\n * Displays billing account details with actions\n */\n\nimport { type FC, useState } from 'react';\nimport {\n  Building2,\n  Mail,\n  CreditCard,\n  Edit2,\n  ChevronRight,\n  Coins,\n  Check,\n  Calendar,\n} from 'lucide-react';\nimport type { BillingAccount } from '../../../shared/types';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface BillingAccountCardProps {\n  account: BillingAccount;\n  isDefault?: boolean;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  onEdit?: () => void;\n  onViewTransactions?: () => void;\n  onViewCreditTransactions?: () => void;\n  className?: string;\n  /** Optional tour anchor applied to the card root (for onboarding tours). */\n  dataTour?: string;\n}\n\nexport const BillingAccountCard: FC<BillingAccountCardProps> = ({\n  account,\n  isDefault = false,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onViewTransactions,\n  onViewCreditTransactions,\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 [isHovered, setIsHovered] = useState(false);\n\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  };\n\n  return (\n    <article\n      data-tour={dataTour}\n      className={`\n        relative border rounded-card bg-bg-surface transition-[box-shadow,transform] duration-200 ease-[var(--motion-easing-out)]\n        ${isSelected ? 'border-border-strong ring-1 ring-[var(--color-focus-ring)]' : 'border-border-seam'}\n        ${isHovered ? 'shadow-elevation-2 motion-safe:-translate-y-[var(--pop-lift-y)]' : 'shadow-[var(--shadow-pop)]'}\n        ${onSelect ? 'cursor-pointer' : ''}\n        ${className}\n      `}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={onSelect}\n      role={onSelect ? 'button' : 'article'}\n      tabIndex={onSelect ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (onSelect && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          onSelect();\n        }\n      }}\n    >\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 min-w-0\">\n            <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center flex-shrink-0\">\n              <Building2 className=\"size-5 text-text-link\" />\n            </div>\n            <div className=\"min-w-0\">\n              <div className=\"flex items-center gap-2\">\n                <h3 className=\"font-semibold text-text-primary truncate\">{account.name}</h3>\n                {isDefault && (\n                  <span className=\"inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-accent-soft)] text-text-link\">\n                    {tr('billing.overview.default', 'Default')}\n                  </span>\n                )}\n                {isSelected && (\n                  <span className=\"inline-flex items-center justify-center size-5 rounded-full bg-action-primary-bg\">\n                    <Check className=\"size-3 text-action-primary-text\" />\n                  </span>\n                )}\n              </div>\n              <p className=\"text-sm text-text-secondary truncate flex items-center gap-1\">\n                <Mail className=\"size-3.5\" />\n                {account.email}\n              </p>\n            </div>\n          </div>\n          {onEdit && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onEdit();\n              }}\n              className=\"p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors\"\n              aria-label=\"Edit billing account\"\n            >\n              <Edit2 className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 space-y-4\">\n        {/* Stats Grid */}\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Credit Balance\n            </p>\n            <p className=\"text-lg font-semibold text-text-primary flex items-center gap-1.5\">\n              <Coins className={`size-4 ${statusTokens.warning.icon}`} />\n              {(account.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Payment Currency\n            </p>\n            <p className=\"text-lg font-semibold text-text-primary flex items-center gap-1.5\">\n              <CreditCard className=\"size-4 text-text-link\" />\n              {account.currency || 'USD'}\n            </p>\n          </div>\n        </div>\n\n        {/* Meta Info */}\n        <div className=\"pt-3 border-t border-border-subtle\">\n          <p className=\"text-xs text-text-secondary flex items-center gap-1\">\n            <Calendar className=\"size-3.5\" />\n            Created {formatDate(account.createdAt)}\n          </p>\n        </div>\n      </div>\n\n      {/* Footer Actions */}\n      {(onViewTransactions || onViewCreditTransactions) && (\n        <footer className=\"px-4 py-3 border-t border-border-subtle bg-bg-sunken rounded-b-card\">\n          <div className=\"flex items-center gap-2\">\n            {onViewTransactions && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onViewTransactions();\n                }}\n                className=\"flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n              >\n                Transactions\n                <ChevronRight className=\"size-4\" />\n              </button>\n            )}\n            {onViewCreditTransactions && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onViewCreditTransactions();\n                }}\n                className=\"flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n              >\n                Credit History\n                <ChevronRight className=\"size-4\" />\n              </button>\n            )}\n          </div>\n        </footer>\n      )}\n\n      {/* Status indicator */}\n      {!account.isActive && (\n        <div className=\"absolute inset-0 bg-bg-overlay backdrop-blur-sm rounded-card flex items-center justify-center\">\n          <span className=\"px-3 py-1.5 rounded-full bg-status-error-bg-subtle text-status-error-text text-sm font-medium\">\n            Inactive\n          </span>\n        </div>\n      )}\n    </article>\n  );\n};\n"],"mappings":"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"}

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

@@ -550,7 +550,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ _("div", {
 			ref: R,
-			className: "relative w-full max-w-2xl mx-4 bg-bg-surface border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-h-[90vh] flex flex-col overflow-hidden",
+			className: "relative w-full max-w-2xl mx-4 bg-bg-surface border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] max-h-[90vh] flex flex-col overflow-hidden",
 			children: [
 				/* @__PURE__ */ _("header", {
 					className: "flex items-center justify-between p-4 border-b border-border-subtle shrink-0",
@@ -938,7 +938,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 											]
 										}), /* @__PURE__ */ g(c, { className: `size-4 text-text-secondary transition-transform ${P ? "rotate-180" : ""}` })]
 									}), P && /* @__PURE__ */ _("div", {
-										className: "absolute z-50 w-full bottom-full mb-1 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 overflow-hidden",
+										className: "absolute z-50 w-full bottom-full mb-1 bg-bg-elevated border border-border-seam rounded-card shadow-elevation-3 overflow-hidden",
 										onMouseDown: (e) => e.stopPropagation(),
 										children: [/* @__PURE__ */ g("div", {
 											className: "max-h-48 overflow-y-auto",