fix(billing): refresh workspace billing status after completed top-up (FE-932)

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.test.ts

@@ -0,0 +1,177 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import TopUpCreditsDialogContentWorkspace from './TopUpCreditsDialogContentWorkspace.vue'
+
+type TopupStatus = 'pending' | 'completed' | 'failed'
+
+interface CreateTopupResponse {
+  billing_op_id: string
+  topup_id: string
+  status: TopupStatus
+  amount_cents: number
+}
+
+const mockFetchBalance = vi.fn()
+const mockFetchStatus = vi.fn()
+const mockCreateTopup = vi.fn<() => Promise<CreateTopupResponse>>()
+const mockStartOperation = vi.fn()
+const mockShowSettings = vi.fn()
+const mockToastAdd = vi.fn()
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    fetchBalance: mockFetchBalance,
+    fetchStatus: mockFetchStatus
+  })
+}))
+
+vi.mock('@/platform/workspace/api/workspaceApi', () => ({
+  workspaceApi: {
+    createTopup: () => mockCreateTopup()
+  }
+}))
+
+vi.mock('@/platform/workspace/stores/billingOperationStore', () => ({
+  useBillingOperationStore: () => ({
+    hasPendingOperations: false,
+    startOperation: mockStartOperation
+  })
+}))
+
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: () => ({ show: mockShowSettings })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({ closeDialog: vi.fn() })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackApiCreditTopupButtonPurchaseClicked: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/telemetry/topupTracker', () => ({
+  clearTopupTracking: vi.fn()
+}))
+
+vi.mock('@/composables/useExternalLink', () => ({
+  useExternalLink: () => ({
+    buildDocsUrl: () => 'https://docs.comfy.org',
+    docsPaths: { partnerNodesPricing: '' }
+  })
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: mockToastAdd })
+}))
+
+vi.mock('@/base/credits/comfyCredits', () => ({
+  creditsToUsd: (credits: number) => credits,
+  usdToCredits: (usd: number) => usd
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { close: 'Close' },
+      subscription: { addCredits: 'Add credits' },
+      credits: {
+        topUp: {
+          addMoreCredits: 'Add more credits',
+          addMoreCreditsToRun: 'Add more credits to run',
+          selectAmount: 'Select amount',
+          youPay: 'You pay',
+          youGet: 'You get',
+          purchaseSuccess: 'Credits added successfully!',
+          purchaseError: 'Purchase Failed',
+          purchaseErrorDetail: 'Failed to purchase credits: {error}',
+          unknownError: 'An unknown error occurred',
+          minRequired: 'Minimum required',
+          maxAllowed: 'Maximum allowed',
+          needMore: 'Need more?',
+          contactUs: 'Contact us',
+          viewPricing: 'View pricing',
+          insufficientWorkflowMessage: 'Insufficient credits'
+        }
+      }
+    }
+  }
+})
+
+function topupResponse(
+  status: CreateTopupResponse['status']
+): CreateTopupResponse {
+  return {
+    billing_op_id: 'op-1',
+    topup_id: 'topup-1',
+    status,
+    amount_cents: 5000
+  }
+}
+
+function renderDialog() {
+  return render(TopUpCreditsDialogContentWorkspace, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        FormattedNumberStepper: {
+          name: 'FormattedNumberStepper',
+          props: ['modelValue'],
+          template: '<div />'
+        }
+      }
+    }
+  })
+}
+
+async function clickAddCredits() {
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: 'Add credits' }))
+}
+
+describe('TopUpCreditsDialogContentWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchBalance.mockResolvedValue(undefined)
+    mockFetchStatus.mockResolvedValue(undefined)
+  })
+
+  it('refreshes both balance and status after a completed top-up', async () => {
+    mockCreateTopup.mockResolvedValue(topupResponse('completed'))
+
+    renderDialog()
+    await clickAddCredits()
+
+    expect(mockFetchBalance).toHaveBeenCalledOnce()
+    expect(mockFetchStatus).toHaveBeenCalledOnce()
+    expect(mockShowSettings).toHaveBeenCalledWith('workspace')
+  })
+
+  it('does not refresh balance or status for a pending top-up', async () => {
+    mockCreateTopup.mockResolvedValue(topupResponse('pending'))
+
+    renderDialog()
+    await clickAddCredits()
+
+    expect(mockStartOperation).toHaveBeenCalledWith('op-1', 'topup')
+    expect(mockFetchBalance).not.toHaveBeenCalled()
+    expect(mockFetchStatus).not.toHaveBeenCalled()
+  })
+
+  it('does not refresh balance or status for a failed top-up', async () => {
+    mockCreateTopup.mockResolvedValue(topupResponse('failed'))
+
+    renderDialog()
+    await clickAddCredits()
+
+    expect(mockFetchBalance).not.toHaveBeenCalled()
+    expect(mockFetchStatus).not.toHaveBeenCalled()
+  })
+})

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue

@@ -177,7 +177,7 @@ const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const { fetchBalance } = useBillingContext()
+const { fetchBalance, fetchStatus } = useBillingContext()
 
 const billingOperationStore = useBillingOperationStore()
 const isPolling = computed(() => billingOperationStore.hasPendingOperations)
@@ -265,7 +265,7 @@ async function handleBuy() {
         summary: t('credits.topUp.purchaseSuccess'),
         life: 5000
       })
-      await fetchBalance()
+      await Promise.all([fetchBalance(), fetchStatus()])
       handleClose(false)
       settingsDialog.show('workspace')
     } else if (response.status === 'pending') {