[Backport] update subscription panel for new designs (#6397)

## Summary
Backport of PR #6378 to `rh-test` branch.

## Changes
- Extract credit calculations into useSubscriptionCredits composable
- Extract action handlers into useSubscriptionActions composable
- Add comprehensive component and unit tests
- Update subscription panel layout to match Figma design exactly
- Add proper design tokens for modal card surfaces
- Update terminology from "API Nodes" to "Partner Nodes"
- Make credit breakdown dynamic with real API data
- Add proper loading states and error handling
- Remove unused tailwindcss eslint dependencies

## Conflicts Resolved
- Resolved merge conflicts in `packages/design-system/src/css/style.css`
related to button surface CSS variables

## Test plan
- Existing tests pass
- New tests for subscription composables and components

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6397-Backport-update-subscription-panel-for-new-designs-29c6d73d3650812aaa12ff242fd5e078)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>

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

@@ -0,0 +1,213 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SubscriptionPanel from '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
+
+// Mock composables
+const mockSubscriptionData = {
+  isActiveSubscription: false,
+  isCancelled: false,
+  formattedRenewalDate: '2024-12-31',
+  formattedEndDate: '2024-12-31',
+  formattedMonthlyPrice: '$9.99',
+  manageSubscription: vi.fn(),
+  handleInvoiceHistory: vi.fn()
+}
+
+const mockCreditsData = {
+  totalCredits: '10.00',
+  monthlyBonusCredits: '5.00',
+  prepaidCredits: '5.00',
+  isLoadingBalance: false
+}
+
+const mockActionsData = {
+  isLoadingSupport: false,
+  refreshTooltip: 'Refreshes on 2024-12-31',
+  handleAddApiCredits: vi.fn(),
+  handleMessageSupport: vi.fn(),
+  handleRefresh: vi.fn(),
+  handleLearnMoreClick: vi.fn()
+}
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => mockSubscriptionData
+}))
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionCredits',
+  () => ({
+    useSubscriptionCredits: () => mockCreditsData
+  })
+)
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionActions',
+  () => ({
+    useSubscriptionActions: () => mockActionsData
+  })
+)
+
+// Create i18n instance for testing
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      subscription: {
+        title: 'Subscription',
+        perMonth: '/ month',
+        subscribeNow: 'Subscribe Now',
+        manageSubscription: 'Manage Subscription',
+        partnerNodesBalance: 'Partner Nodes Balance',
+        partnerNodesDescription: 'Credits for partner nodes',
+        totalCredits: 'Total Credits',
+        monthlyBonusDescription: 'Monthly bonus',
+        prepaidDescription: 'Prepaid credits',
+        monthlyCreditsRollover: 'Monthly credits rollover info',
+        prepaidCreditsInfo: 'Prepaid credits info',
+        viewUsageHistory: 'View Usage History',
+        addCredits: 'Add Credits',
+        yourPlanIncludes: 'Your plan includes',
+        learnMore: 'Learn More',
+        messageSupport: 'Message Support',
+        invoiceHistory: 'Invoice History',
+        renewsDate: 'Renews {date}',
+        expiresDate: 'Expires {date}'
+      }
+    }
+  }
+})
+
+function createWrapper(overrides = {}) {
+  return mount(SubscriptionPanel, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      stubs: {
+        CloudBadge: true,
+        SubscribeButton: true,
+        SubscriptionBenefits: true,
+        Button: {
+          template:
+            '<button @click="$emit(\'click\')" :disabled="loading" :data-testid="label" :data-icon="icon">{{ label }}</button>',
+          props: [
+            'loading',
+            'label',
+            'icon',
+            'text',
+            'severity',
+            'size',
+            'iconPos',
+            'pt'
+          ],
+          emits: ['click']
+        },
+        Skeleton: {
+          template: '<div class="skeleton"></div>'
+        }
+      }
+    },
+    ...overrides
+  })
+}
+
+describe('SubscriptionPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('subscription state functionality', () => {
+    it('shows correct UI for active subscription', () => {
+      mockSubscriptionData.isActiveSubscription = true
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Manage Subscription')
+      expect(wrapper.text()).toContain('Add Credits')
+    })
+
+    it('shows correct UI for inactive subscription', () => {
+      mockSubscriptionData.isActiveSubscription = false
+      const wrapper = createWrapper()
+      expect(wrapper.findComponent({ name: 'SubscribeButton' }).exists()).toBe(
+        true
+      )
+      expect(wrapper.text()).not.toContain('Manage Subscription')
+      expect(wrapper.text()).not.toContain('Add Credits')
+    })
+
+    it('shows renewal date for active non-cancelled subscription', () => {
+      mockSubscriptionData.isActiveSubscription = true
+      mockSubscriptionData.isCancelled = false
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Renews 2024-12-31')
+    })
+
+    it('shows expiry date for cancelled subscription', () => {
+      mockSubscriptionData.isActiveSubscription = true
+      mockSubscriptionData.isCancelled = true
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Expires 2024-12-31')
+    })
+  })
+
+  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
+    })
+
+    it('shows loading skeleton when fetching balance', () => {
+      mockCreditsData.isLoadingBalance = true
+      const wrapper = createWrapper()
+      expect(wrapper.findAll('.skeleton').length).toBeGreaterThan(0)
+    })
+
+    it('hides skeleton when balance loaded', () => {
+      mockCreditsData.isLoadingBalance = false
+      const wrapper = createWrapper()
+      expect(wrapper.findAll('.skeleton').length).toBe(0)
+    })
+  })
+
+  describe('action buttons', () => {
+    it('should call handleLearnMoreClick when learn more is clicked', async () => {
+      const wrapper = createWrapper()
+      const learnMoreButton = wrapper.find('[data-testid="Learn More"]')
+      await learnMoreButton.trigger('click')
+      expect(mockActionsData.handleLearnMoreClick).toHaveBeenCalledOnce()
+    })
+
+    it('should call handleMessageSupport when message support is clicked', async () => {
+      const wrapper = createWrapper()
+      const supportButton = wrapper.find('[data-testid="Message Support"]')
+      await supportButton.trigger('click')
+      expect(mockActionsData.handleMessageSupport).toHaveBeenCalledOnce()
+    })
+
+    it('should call handleRefresh when refresh button is clicked', async () => {
+      const wrapper = createWrapper()
+      // Find the refresh button by icon
+      const refreshButton = wrapper.find('[data-icon="pi pi-sync"]')
+      await refreshButton.trigger('click')
+      expect(mockActionsData.handleRefresh).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('loading states', () => {
+    it('should show loading state on support button when loading', () => {
+      mockActionsData.isLoadingSupport = true
+      const wrapper = createWrapper()
+      const supportButton = wrapper.find('[data-testid="Message Support"]')
+      expect(supportButton.attributes('disabled')).toBeDefined()
+    })
+
+    it('should show loading state on refresh button when loading balance', () => {
+      mockCreditsData.isLoadingBalance = true
+      const wrapper = createWrapper()
+      const refreshButton = wrapper.find('[data-icon="pi pi-sync"]')
+      expect(refreshButton.attributes('disabled')).toBeDefined()
+    })
+  })
+})

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

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+
+// Mock dependencies
+const mockFetchBalance = vi.fn()
+const mockFetchStatus = vi.fn()
+const mockShowTopUpCreditsDialog = vi.fn()
+const mockExecute = vi.fn()
+const mockT = vi.fn((key: string) => {
+  if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
+  return key
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}))
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: () => ({
+    fetchBalance: mockFetchBalance
+  })
+}))
+
+const mockFormattedRenewalDate = { value: '2024-12-31' }
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => ({
+    fetchStatus: mockFetchStatus,
+    formattedRenewalDate: mockFormattedRenewalDate
+  })
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showTopUpCreditsDialog: mockShowTopUpCreditsDialog
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: mockExecute
+  })
+}))
+
+// Mock window.open
+const mockOpen = vi.fn()
+Object.defineProperty(window, 'open', {
+  writable: true,
+  value: mockOpen
+})
+
+describe('useSubscriptionActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFormattedRenewalDate.value = '2024-12-31'
+  })
+
+  describe('refreshTooltip', () => {
+    it('should format tooltip with renewal date', () => {
+      const { refreshTooltip } = useSubscriptionActions()
+      expect(refreshTooltip.value).toBe('Refreshes on 2024-12-31')
+    })
+
+    it('should use fallback text when no renewal date', () => {
+      mockFormattedRenewalDate.value = ''
+      const { refreshTooltip } = useSubscriptionActions()
+      expect(refreshTooltip.value).toBe('Refreshes on next billing cycle')
+      expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
+    })
+  })
+
+  describe('handleAddApiCredits', () => {
+    it('should call showTopUpCreditsDialog', () => {
+      const { handleAddApiCredits } = useSubscriptionActions()
+      handleAddApiCredits()
+      expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('handleMessageSupport', () => {
+    it('should execute support command and manage loading state', async () => {
+      const { handleMessageSupport, isLoadingSupport } =
+        useSubscriptionActions()
+
+      expect(isLoadingSupport.value).toBe(false)
+
+      const promise = handleMessageSupport()
+      expect(isLoadingSupport.value).toBe(true)
+
+      await promise
+      expect(mockExecute).toHaveBeenCalledWith('Comfy.ContactSupport')
+      expect(isLoadingSupport.value).toBe(false)
+    })
+
+    it('should handle errors gracefully', async () => {
+      mockExecute.mockRejectedValueOnce(new Error('Command failed'))
+      const { handleMessageSupport, isLoadingSupport } =
+        useSubscriptionActions()
+
+      await handleMessageSupport()
+      expect(isLoadingSupport.value).toBe(false)
+    })
+  })
+
+  describe('handleRefresh', () => {
+    it('should call both fetchBalance and fetchStatus', async () => {
+      const { handleRefresh } = useSubscriptionActions()
+      await handleRefresh()
+
+      expect(mockFetchBalance).toHaveBeenCalledOnce()
+      expect(mockFetchStatus).toHaveBeenCalledOnce()
+    })
+
+    it('should handle errors gracefully', async () => {
+      mockFetchBalance.mockRejectedValueOnce(new Error('Fetch failed'))
+      const { handleRefresh } = useSubscriptionActions()
+
+      // Should not throw
+      await expect(handleRefresh()).resolves.toBeUndefined()
+    })
+  })
+
+  describe('handleLearnMoreClick', () => {
+    it('should open learn more URL', () => {
+      const { handleLearnMoreClick } = useSubscriptionActions()
+      handleLearnMoreClick()
+
+      expect(mockOpen).toHaveBeenCalledWith(
+        'https://docs.comfy.org/get_started/cloud',
+        '_blank'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,146 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+// Mock Firebase Auth and related modules
+vi.mock('vuefire', () => ({
+  useFirebaseAuth: vi.fn(() => ({
+    onAuthStateChanged: vi.fn(),
+    setPersistence: vi.fn()
+  }))
+}))
+
+vi.mock('firebase/auth', () => ({
+  onAuthStateChanged: vi.fn(() => {
+    // Mock the callback to be called immediately for testing
+    return vi.fn()
+  }),
+  onIdTokenChanged: vi.fn(),
+  setPersistence: vi.fn().mockResolvedValue(undefined),
+  browserLocalPersistence: {},
+  GoogleAuthProvider: class {
+    addScope = vi.fn()
+    setCustomParameters = vi.fn()
+  },
+  GithubAuthProvider: class {
+    addScope = vi.fn()
+    setCustomParameters = vi.fn()
+  }
+}))
+
+// Mock other dependencies
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    track: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+  useToastStore: () => ({
+    add: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/apiKeyAuthStore', () => ({
+  useApiKeyAuthStore: () => ({
+    headers: {}
+  })
+}))
+
+// 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>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    authStore = useFirebaseAuthStore()
+    vi.clearAllMocks()
+  })
+
+  describe('totalCredits', () => {
+    it('should return "0.00" when balance is null', () => {
+      authStore.balance = null
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('0.00')
+    })
+
+    it('should return "0.00" when amount_micros is missing', () => {
+      authStore.balance = {} as any
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('0.00')
+    })
+
+    it('should format amount_micros correctly', () => {
+      authStore.balance = { amount_micros: 5000000 } as any
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('5.00')
+    })
+
+    it('should handle formatting errors gracefully', async () => {
+      const mockFormatMetronomeCurrency = vi.mocked(
+        await import('@/utils/formatUtil')
+      ).formatMetronomeCurrency
+      mockFormatMetronomeCurrency.mockImplementationOnce(() => {
+        throw new Error('Formatting error')
+      })
+
+      authStore.balance = { amount_micros: 5000000 } as any
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('0.00')
+    })
+  })
+
+  describe('monthlyBonusCredits', () => {
+    it('should return "0.00" when cloud_credit_balance_micros is missing', () => {
+      authStore.balance = {} as any
+      const { monthlyBonusCredits } = useSubscriptionCredits()
+      expect(monthlyBonusCredits.value).toBe('0.00')
+    })
+
+    it('should format cloud_credit_balance_micros correctly', () => {
+      authStore.balance = { cloud_credit_balance_micros: 2500000 } as any
+      const { monthlyBonusCredits } = useSubscriptionCredits()
+      expect(monthlyBonusCredits.value).toBe('2.50')
+    })
+  })
+
+  describe('prepaidCredits', () => {
+    it('should return "0.00" when prepaid_balance_micros is missing', () => {
+      authStore.balance = {} as any
+      const { prepaidCredits } = useSubscriptionCredits()
+      expect(prepaidCredits.value).toBe('0.00')
+    })
+
+    it('should format prepaid_balance_micros correctly', () => {
+      authStore.balance = { prepaid_balance_micros: 7500000 } as any
+      const { prepaidCredits } = useSubscriptionCredits()
+      expect(prepaidCredits.value).toBe('7.50')
+    })
+  })
+
+  describe('isLoadingBalance', () => {
+    it('should reflect authStore.isFetchingBalance', () => {
+      authStore.isFetchingBalance = true
+      const { isLoadingBalance } = useSubscriptionCredits()
+      expect(isLoadingBalance.value).toBe(true)
+
+      authStore.isFetchingBalance = false
+      expect(isLoadingBalance.value).toBe(false)
+    })
+  })
+})