add shared comfy credit conversion helpers

src/base/credits/comfyCredits.ts

@@ -0,0 +1,115 @@
+const DEFAULT_NUMBER_FORMAT: Intl.NumberFormatOptions = {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}
+
+const formatNumber = ({
+  value,
+  locale,
+  options
+}: {
+  value: number
+  locale?: string
+  options?: Intl.NumberFormatOptions
+}): string => {
+  const merged: Intl.NumberFormatOptions = {
+    ...DEFAULT_NUMBER_FORMAT,
+    ...options
+  }
+
+  if (
+    typeof merged.maximumFractionDigits === 'number' &&
+    typeof merged.minimumFractionDigits === 'number' &&
+    merged.maximumFractionDigits < merged.minimumFractionDigits
+  ) {
+    merged.minimumFractionDigits = merged.maximumFractionDigits
+  }
+
+  return new Intl.NumberFormat(locale, merged).format(value)
+}
+
+export const COMFY_CREDIT_RATE_CENTS = 210
+export const COMFY_CREDIT_RATE_USD = COMFY_CREDIT_RATE_CENTS / 100
+
+export const usdToCents = (usd: number): number => Math.round(usd * 100)
+
+export const centsToCredits = (cents: number): number =>
+  cents / COMFY_CREDIT_RATE_CENTS
+
+export const creditsToCents = (credits: number): number =>
+  Math.round(credits * COMFY_CREDIT_RATE_CENTS)
+
+export const usdToCredits = (usd: number): number =>
+  centsToCredits(usdToCents(usd))
+
+export const creditsToUsd = (credits: number): number =>
+  creditsToCents(credits) / 100
+
+export type FormatOptions = {
+  value: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}
+
+export const formatCredits = ({
+  value,
+  locale,
+  numberOptions
+}: FormatOptions): string =>
+  formatNumber({ value, locale, options: numberOptions })
+
+export const formatCreditsFromCents = ({
+  cents,
+  locale,
+  numberOptions
+}: {
+  cents: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}): string =>
+  formatCredits({
+    value: centsToCredits(cents),
+    locale,
+    numberOptions
+  })
+
+export const formatCreditsFromUsd = ({
+  usd,
+  locale,
+  numberOptions
+}: {
+  usd: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}): string =>
+  formatCredits({
+    value: usdToCredits(usd),
+    locale,
+    numberOptions
+  })
+
+export const formatUsd = ({
+  value,
+  locale,
+  numberOptions
+}: FormatOptions): string =>
+  formatNumber({
+    value,
+    locale,
+    options: numberOptions
+  })
+
+export const formatUsdFromCents = ({
+  cents,
+  locale,
+  numberOptions
+}: {
+  cents: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}): string =>
+  formatUsd({
+    value: cents / 100,
+    locale,
+    numberOptions
+  })

src/components/common/UserCredit.vue

@@ -9,7 +9,7 @@
   <div v-else class="flex items-center gap-1">
     <Tag
       severity="secondary"
-      icon="pi pi-dollar"
+      icon="pi pi-wallet"
       rounded
       class="p-1 text-amber-400"
     />
@@ -21,19 +21,26 @@
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const { textClass } = defineProps<{
   textClass?: string
 }>()
 
 const authStore = useFirebaseAuthStore()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
+const { t, locale } = useI18n()
 
 const formattedBalance = computed(() => {
-  if (!authStore.balance) return '0.00'
-  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+  // Backend returns cents despite the *_micros naming convention.
+  const cents = authStore.balance?.amount_micros ?? 0
+  const amount = formatCreditsFromCents({
+    cents,
+    locale: locale.value
+  })
+  return `${amount} ${t('credits.credits')}`
 })
 </script>

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -2,24 +2,36 @@
   <div class="flex items-center gap-2">
     <Tag
       severity="secondary"
-      icon="pi pi-dollar"
+      icon="pi pi-wallet"
       rounded
       class="p-1 text-amber-400"
     />
-    <InputNumber
-      v-if="editable"
-      v-model="customAmount"
-      :min="1"
-      :max="1000"
-      :step="1"
-      show-buttons
-      :allow-empty="false"
-      :highlight-on-focus="true"
-      pt:pc-input-text:root="w-24"
-      @blur="(e: InputNumberBlurEvent) => (customAmount = Number(e.value))"
-      @input="(e: InputNumberInputEvent) => (customAmount = Number(e.value))"
-    />
-    <span v-else class="text-xl">{{ amount }}</span>
+    <div v-if="editable" class="flex items-center gap-2">
+      <InputNumber
+        v-model="customAmount"
+        :min="1"
+        :max="1000"
+        :step="1"
+        show-buttons
+        :allow-empty="false"
+        :highlight-on-focus="true"
+        prefix="$"
+        pt:pc-input-text:root="w-28"
+        @blur="
+          (e: InputNumberBlurEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+        @input="
+          (e: InputNumberInputEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+      />
+      <span class="text-xs text-muted">{{ formattedCredits }}</span>
+    </div>
+    <div v-else class="flex flex-col leading-tight">
+      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
+      <span class="text-xs text-muted">{{ formattedUsd }}</span>
+    </div>
   </div>
   <ProgressSpinner v-if="loading" class="h-8 w-8" />
   <Button
@@ -40,8 +52,10 @@ import type {
 } from 'primevue/inputnumber'
 import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromUsd, formatUsd } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useTelemetry } from '@/platform/telemetry'
 
@@ -61,9 +75,31 @@ const {
 const customAmount = ref(amount)
 const didClickBuyNow = ref(false)
 const loading = ref(false)
+const { t, locale } = useI18n()
+
+const clampUsd = (value: number) => {
+  const safe = Number.isNaN(value) ? 0 : value
+  return Math.min(1000, Math.max(1, safe))
+}
+
+const displayUsdAmount = computed(() =>
+  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
+)
+
+const formattedCredits = computed(
+  () =>
+    `${formatCreditsFromUsd({
+      usd: displayUsdAmount.value,
+      locale: locale.value
+    })} ${t('credits.credits')}`
+)
+
+const formattedUsd = computed(
+  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
+)
 
 const handleBuyNow = async () => {
-  const creditAmount = editable ? customAmount.value : amount
+  const creditAmount = displayUsdAmount.value
   telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
 
   loading.value = true

src/platform/cloud/subscription/composables/useSubscriptionCredits.ts

@@ -1,56 +1,59 @@
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 /**
  * Composable for handling subscription credit calculations and formatting
  */
 export function useSubscriptionCredits() {
   const authStore = useFirebaseAuthStore()
+  const { t, locale } = useI18n()
+
+  const formatBalance = (maybeCents?: number) => {
+    // Backend returns cents despite the *_micros naming convention.
+    const cents = maybeCents ?? 0
+    const amount = formatCreditsFromCents({
+      cents,
+      locale: locale.value
+    })
+    return `${amount} ${t('credits.credits')}`
+  }
 
   const totalCredits = computed(() => {
-    if (!authStore.balance?.amount_micros) return '0.00'
     try {
-      return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+      return formatBalance(authStore.balance?.amount_micros)
     } catch (error) {
       console.error(
         '[useSubscriptionCredits] Error formatting total credits:',
         error
       )
-      return '0.00'
+      return formatBalance(0)
     }
   })
 
   const monthlyBonusCredits = computed(() => {
-    if (!authStore.balance?.cloud_credit_balance_micros) return '0.00'
     try {
-      return formatMetronomeCurrency(
-        authStore.balance.cloud_credit_balance_micros,
-        'usd'
-      )
+      return formatBalance(authStore.balance?.cloud_credit_balance_micros)
     } catch (error) {
       console.error(
         '[useSubscriptionCredits] Error formatting monthly bonus credits:',
         error
       )
-      return '0.00'
+      return formatBalance(0)
     }
   })
 
   const prepaidCredits = computed(() => {
-    if (!authStore.balance?.prepaid_balance_micros) return '0.00'
     try {
-      return formatMetronomeCurrency(
-        authStore.balance.prepaid_balance_micros,
-        'usd'
-      )
+      return formatBalance(authStore.balance?.prepaid_balance_micros)
     } catch (error) {
       console.error(
         '[useSubscriptionCredits] Error formatting prepaid credits:',
         error
       )
-      return '0.00'
+      return formatBalance(0)
     }
   })
 

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

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  COMFY_CREDIT_RATE_CENTS,
+  COMFY_CREDIT_RATE_USD,
+  centsToCredits,
+  creditsToCents,
+  creditsToUsd,
+  formatCredits,
+  formatCreditsFromCents,
+  formatCreditsFromUsd,
+  formatUsd,
+  formatUsdFromCents,
+  usdToCents,
+  usdToCredits
+} from '@/base/credits/comfyCredits'
+
+describe('comfyCredits helpers', () => {
+  test('exposes the fixed conversion rate', () => {
+    expect(COMFY_CREDIT_RATE_CENTS).toBe(210)
+    expect(COMFY_CREDIT_RATE_USD).toBeCloseTo(2.1)
+  })
+
+  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(210)).toBeCloseTo(1)
+    expect(creditsToCents(5)).toBe(1050)
+  })
+
+  test('converts USD to credits and back', () => {
+    expect(usdToCredits(2.1)).toBeCloseTo(1)
+    expect(creditsToUsd(3.5)).toBeCloseTo(7.35)
+  })
+
+  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: 210, locale })).toBe('1.00')
+    expect(formatCreditsFromUsd({ usd: 4.2, locale })).toBe('2.00')
+    expect(formatUsd({ value: 4.2, locale })).toBe('4.20')
+  })
+})