[feat] Gate top-up functionality on active subscription

Prevent users without active subscriptions from accessing credit top-up features by checking isActiveSubscription across all entry points.

Changes:
- Hide Purchase Credits button in CreditsPanel when no active subscription
- Block purchaseCredits function execution if subscription inactive
- Gate showTopUpCreditsDialog service method
- Prevent auto-trigger of top-up dialog on insufficient credits error
- Fix CurrentUserPopover test mock for isActiveSubscription ref

Author: christian-byrne

src/components/dialog/content/setting/CreditsPanel.vue

@@ -15,7 +15,7 @@
           <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
-            v-else
+            v-else-if="isActiveSubscription"
             :label="$t('credits.purchaseCredits')"
             :loading="loading"
             @click="handlePurchaseCreditsClick"
@@ -116,6 +116,7 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -132,6 +133,7 @@ const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
 const commandStore = useCommandStore()
+const { isActiveSubscription } = useSubscription()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 

src/components/topbar/CurrentUserPopover.test.ts

@@ -81,7 +81,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
 // Mock the useSubscription composable
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: vi.fn(() => ({
-    isActiveSubscription: vi.fn().mockReturnValue(true)
+    isActiveSubscription: { value: true }
   }))
 }))
 

src/composables/auth/useFirebaseAuthActions.ts

@@ -7,6 +7,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -21,6 +22,7 @@ export const useFirebaseAuthActions = () => {
   const authStore = useFirebaseAuthStore()
   const toastStore = useToastStore()
   const { wrapWithErrorHandlingAsync, toastErrorHandler } = useErrorHandling()
+  const { isActiveSubscription } = useSubscription()
 
   const accessError = ref(false)
 
@@ -82,6 +84,8 @@ export const useFirebaseAuthActions = () => {
   )
 
   const purchaseCredits = wrapWithErrorHandlingAsync(async (amount: number) => {
+    if (!isActiveSubscription.value) return
+
     const response = await authStore.initiateCreditPurchase({
       amount_micros: usdToMicros(amount),
       currency: 'usd'

src/scripts/app.ts

@@ -47,6 +47,7 @@ import { getMp3Metadata } from '@/scripts/metadata/mp3'
 import { getOggMetadata } from '@/scripts/metadata/ogg'
 import { getSvgMetadata } from '@/scripts/metadata/svg'
 import { useDialogService } from '@/services/dialogService'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphService } from '@/services/subgraphService'
@@ -698,9 +699,12 @@ export class ComfyApp {
           'Payment Required: Please add credits to your account to use this node.'
         )
       ) {
-        useDialogService().showTopUpCreditsDialog({
-          isInsufficientCredits: true
-        })
+        const { isActiveSubscription } = useSubscription()
+        if (isActiveSubscription.value) {
+          useDialogService().showTopUpCreditsDialog({
+            isInsufficientCredits: true
+          })
+        }
       } else {
         useDialogService().showExecutionErrorDialog(detail)
       }

src/services/dialogService.ts

@@ -14,6 +14,7 @@ import ComfyOrgHeader from '@/components/dialog/header/ComfyOrgHeader.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -340,6 +341,9 @@ export const useDialogService = () => {
   function showTopUpCreditsDialog(options?: {
     isInsufficientCredits?: boolean
   }) {
+    const { isActiveSubscription } = useSubscription()
+    if (!isActiveSubscription.value) return
+
     return dialogStore.showDialog({
       key: 'top-up-credits',
       component: TopUpCreditsDialogContent,