add shared comfy credit conversion helpers (#7061)

Introduces cents<->usd<->credit converters plus basic formatters and
adds test. Lays groundwork to start converting UI components into
displaying comfy credits.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7061-add-shared-comfy-credit-conversion-helpers-2bb6d73d3650810bb34fdf9bb3fc115b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>

tests-ui/tests/base/credits/comfyCredits.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  CREDITS_PER_USD,
+  COMFY_CREDIT_RATE_CENTS,
+  centsToCredits,
+  creditsToCents,
+  creditsToUsd,
+  formatCredits,
+  formatCreditsFromCents,
+  formatCreditsFromUsd,
+  formatUsd,
+  formatUsdFromCents,
+  usdToCents,
+  usdToCredits
+} from '@/base/credits/comfyCredits'
+
+describe('comfyCredits helpers', () => {
+  test('exposes the fixed conversion rate', () => {
+    expect(CREDITS_PER_USD).toBe(211)
+    expect(COMFY_CREDIT_RATE_CENTS).toBeCloseTo(2.11) // credits per cent
+  })
+
+  test('converts between USD and cents', () => {
+    expect(usdToCents(1.23)).toBe(123)
+    expect(formatUsdFromCents({ cents: 123, locale: 'en-US' })).toBe('1.23')
+  })
+
+  test('converts cents to credits and back', () => {
+    expect(centsToCredits(100)).toBe(211) // 100 cents = 211 credits
+    expect(creditsToCents(211)).toBe(100) // 211 credits = 100 cents
+  })
+
+  test('converts USD to credits and back', () => {
+    expect(usdToCredits(1)).toBe(211) // 1 USD = 211 credits
+    expect(creditsToUsd(211)).toBe(1) // 211 credits = 1 USD
+  })
+
+  test('formats credits and USD values using en-US locale', () => {
+    const locale = 'en-US'
+    expect(formatCredits({ value: 1234.567, locale })).toBe('1,234.57')
+    expect(formatCreditsFromCents({ cents: 100, locale })).toBe('211.00')
+    expect(formatCreditsFromUsd({ usd: 1, locale })).toBe('211.00')
+    expect(formatUsd({ value: 4.2, locale })).toBe('4.20')
+  })
+})

tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it } from 'vitest'
+
+import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+const mountOption = (
+  props?: Partial<{ credits: number; description: string; selected: boolean }>
+) =>
+  mount(CreditTopUpOption, {
+    props: {
+      credits: 1000,
+      description: '~100 videos*',
+      selected: false,
+      ...props
+    },
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('CreditTopUpOption', () => {
+  it('renders credit amount and description', () => {
+    const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
+    expect(wrapper.text()).toContain('5,000')
+    expect(wrapper.text()).toContain('~500 videos*')
+  })
+
+  it('applies selected styling when selected', () => {
+    const wrapper = mountOption({ selected: true })
+    expect(wrapper.find('div').classes()).toContain('bg-surface-secondary')
+    expect(wrapper.find('div').classes()).toContain('border-primary')
+  })
+
+  it('applies unselected styling when not selected', () => {
+    const wrapper = mountOption({ selected: false })
+    expect(wrapper.find('div').classes()).toContain('bg-surface-tertiary')
+    expect(wrapper.find('div').classes()).toContain('border-border-primary')
+  })
+
+  it('emits select event when clicked', async () => {
+    const wrapper = mountOption()
+    await wrapper.find('div').trigger('click')
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+})

tests-ui/tests/composables/node/useCreditsBadge.test.ts

@@ -17,6 +17,14 @@ vi.mock('@/stores/workspace/colorPaletteStore', () => ({
   })
 }))
 
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      subscriptionTiersEnabled: false // Test legacy badge behavior
+    }
+  })
+}))
+
 const { updateSubgraphCredits } = usePriceBadge()
 
 const mockNode = new LGraphNode('mock node')

tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts

@@ -17,9 +17,9 @@ const mockSubscriptionData = {
 }
 
 const mockCreditsData = {
-  totalCredits: '10.00',
-  monthlyBonusCredits: '5.00',
-  prepaidCredits: '5.00',
+  totalCredits: '10.00 Credits',
+  monthlyBonusCredits: '5.00 Credits',
+  prepaidCredits: '5.00 Credits',
   isLoadingBalance: false
 }
 
@@ -154,8 +154,8 @@ describe('SubscriptionPanel', () => {
   describe('credit display functionality', () => {
     it('displays dynamic credit values correctly', () => {
       const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('$10.00') // totalCredits
-      expect(wrapper.text()).toContain('$5.00') // both monthlyBonus and prepaid
+      expect(wrapper.text()).toContain('10.00 Credits')
+      expect(wrapper.text()).toContain('5.00 Credits')
     })
 
     it('shows loading skeleton when fetching balance', () => {

tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts

@@ -1,8 +1,27 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import * as comfyCredits from '@/base/credits/comfyCredits'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import type { operations } from '@/types/comfyRegistryTypes'
+
+type GetCustomerBalanceResponse =
+  operations['GetCustomerBalance']['responses']['200']['content']['application/json']
+
+vi.mock(
+  'vue-i18n',
+  async (importOriginal: () => Promise<typeof import('vue-i18n')>) => {
+    const actual = await importOriginal()
+    return {
+      ...actual,
+      useI18n: () => ({
+        t: () => 'Credits',
+        locale: { value: 'en-US' }
+      })
+    }
+  }
+)
 
 // Mock Firebase Auth and related modules
 vi.mock('vuefire', () => ({
@@ -55,14 +74,6 @@ vi.mock('@/stores/apiKeyAuthStore', () => ({
   })
 }))
 
-// Mock formatMetronomeCurrency
-vi.mock('@/utils/formatUtil', () => ({
-  formatMetronomeCurrency: vi.fn((micros: number) => {
-    // Simple mock that converts micros to dollars
-    return (micros / 1000000).toFixed(2)
-  })
-}))
-
 describe('useSubscriptionCredits', () => {
   let authStore: ReturnType<typeof useFirebaseAuthStore>
 
@@ -73,63 +84,66 @@ describe('useSubscriptionCredits', () => {
   })
 
   describe('totalCredits', () => {
-    it('should return "0.00" when balance is null', () => {
+    it('should return "0.00 Credits" when balance is null', () => {
       authStore.balance = null
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
     })
 
-    it('should return "0.00" when amount_micros is missing', () => {
-      authStore.balance = {} as any
+    it('should return "0.00 Credits" when amount_micros is missing', () => {
+      authStore.balance = {} as GetCustomerBalanceResponse
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
     })
 
     it('should format amount_micros correctly', () => {
-      authStore.balance = { amount_micros: 5000000 } as any
+      authStore.balance = { amount_micros: 100 } as GetCustomerBalanceResponse
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('5.00')
+      expect(totalCredits.value).toBe('211.00 Credits')
     })
 
-    it('should handle formatting errors gracefully', async () => {
-      const mockFormatMetronomeCurrency = vi.mocked(
-        await import('@/utils/formatUtil')
-      ).formatMetronomeCurrency
-      mockFormatMetronomeCurrency.mockImplementationOnce(() => {
+    it('should handle formatting errors by throwing', async () => {
+      const formatSpy = vi.spyOn(comfyCredits, 'formatCreditsFromCents')
+      formatSpy.mockImplementationOnce(() => {
         throw new Error('Formatting error')
       })
 
-      authStore.balance = { amount_micros: 5000000 } as any
+      authStore.balance = { amount_micros: 100 } as GetCustomerBalanceResponse
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(() => totalCredits.value).toThrow('Formatting error')
+      formatSpy.mockRestore()
     })
   })
 
   describe('monthlyBonusCredits', () => {
-    it('should return "0.00" when cloud_credit_balance_micros is missing', () => {
-      authStore.balance = {} as any
+    it('should return "0.00 Credits" when cloud_credit_balance_micros is missing', () => {
+      authStore.balance = {} as GetCustomerBalanceResponse
       const { monthlyBonusCredits } = useSubscriptionCredits()
-      expect(monthlyBonusCredits.value).toBe('0.00')
+      expect(monthlyBonusCredits.value).toBe('0.00 Credits')
     })
 
     it('should format cloud_credit_balance_micros correctly', () => {
-      authStore.balance = { cloud_credit_balance_micros: 2500000 } as any
+      authStore.balance = {
+        cloud_credit_balance_micros: 200
+      } as GetCustomerBalanceResponse
       const { monthlyBonusCredits } = useSubscriptionCredits()
-      expect(monthlyBonusCredits.value).toBe('2.50')
+      expect(monthlyBonusCredits.value).toBe('422.00 Credits')
     })
   })
 
   describe('prepaidCredits', () => {
-    it('should return "0.00" when prepaid_balance_micros is missing', () => {
-      authStore.balance = {} as any
+    it('should return "0.00 Credits" when prepaid_balance_micros is missing', () => {
+      authStore.balance = {} as GetCustomerBalanceResponse
       const { prepaidCredits } = useSubscriptionCredits()
-      expect(prepaidCredits.value).toBe('0.00')
+      expect(prepaidCredits.value).toBe('0.00 Credits')
     })
 
     it('should format prepaid_balance_micros correctly', () => {
-      authStore.balance = { prepaid_balance_micros: 7500000 } as any
+      authStore.balance = {
+        prepaid_balance_micros: 300
+      } as GetCustomerBalanceResponse
       const { prepaidCredits } = useSubscriptionCredits()
-      expect(prepaidCredits.value).toBe('7.50')
+      expect(prepaidCredits.value).toBe('633.00 Credits')
     })
   })