fix(billing): preserve local invoice actions

Amp-Thread-ID: https://ampcode.com/threads/T-019fc87c-d73e-7635-83db-1f7c0e65e42d
Co-authored-by: Amp <amp@ampcode.com>

Author: dante01yoon

src/locales/en/main.json

@@ -2642,6 +2642,7 @@
     "changesToPlanOnDate": "Changes to {plan} on {date}",
     "manageSubscription": "Manage subscription",
     "billingAndInvoices": "Billing & invoices",
+    "manageBilling": "Manage billing",
     "changePlan": "Change plan",
     "cancelPlan": "Cancel plan",
     "canceled": "Canceled",
@@ -2748,6 +2749,7 @@
     "saveYearly": "Save 20%",
     "tierNameYearly": "{name} Yearly",
     "messageSupport": "Message support",
+    "invoiceHistory": "Invoice history",
     "refreshCredits": "Refresh credits",
     "benefits": {
       "benefit1": "Monthly credits for Partner Nodes — top up when needed",

src/platform/cloud/subscription/components/SubscriptionFooterLinks.test.ts

@@ -7,10 +7,24 @@ import { createI18n } from 'vue-i18n'
 import SubscriptionFooterLinks from './SubscriptionFooterLinks.vue'
 
 const state = vi.hoisted(() => ({
+  isCloud: true,
+  manageSubscription: vi.fn(),
   handleLearnMoreClick: vi.fn(),
   handleMessageSupport: vi.fn()
 }))
 
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return state.isCloud
+  }
+}))
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    manageSubscription: state.manageSubscription
+  })
+}))
+
 vi.mock('@/composables/useExternalLink', () => ({
   useExternalLink: () => ({
     buildDocsUrl: vi.fn(() => 'https://docs.comfy.org/partner-nodes'),
@@ -37,14 +51,16 @@ const i18n = createI18n({
       subscription: {
         learnMore: 'Learn more',
         partnerNodesPricingTable: 'Partner Nodes pricing',
-        messageSupport: 'Message support'
+        messageSupport: 'Message support',
+        invoiceHistory: 'Invoice history'
       }
     }
   }
 })
 
-function renderComponent() {
+function renderComponent(showInvoiceHistory?: boolean) {
   return render(SubscriptionFooterLinks, {
+    props: showInvoiceHistory === undefined ? {} : { showInvoiceHistory },
     global: {
       plugins: [i18n],
       stubs: {
@@ -61,6 +77,7 @@ function renderComponent() {
 describe('SubscriptionFooterLinks', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    state.isCloud = true
   })
 
   afterEach(() => {
@@ -99,4 +116,24 @@ describe('SubscriptionFooterLinks', () => {
       '_blank'
     )
   })
+
+  it('keeps Invoice history working outside the cloud distribution', async () => {
+    const user = userEvent.setup()
+    state.isCloud = false
+    renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Invoice history' }))
+
+    expect(state.manageSubscription).toHaveBeenCalledOnce()
+  })
+
+  it('hides Invoice history from local users without billing permission', () => {
+    state.isCloud = false
+    renderComponent(false)
+
+    expect(
+      screen.queryByRole('button', { name: 'Invoice history' })
+    ).not.toBeInTheDocument()
+    expect(state.manageSubscription).not.toHaveBeenCalled()
+  })
 })

src/platform/cloud/subscription/components/SubscriptionFooterLinks.vue

@@ -29,19 +29,42 @@
         {{ $t('subscription.messageSupport') }}
       </Button>
     </div>
+
+    <Button
+      v-if="!isCloud && showInvoiceHistory"
+      variant="muted-textonly"
+      class="text-xs text-text-secondary"
+      @click="handleInvoiceHistory"
+    >
+      {{ $t('subscription.invoiceHistory') }}
+      <i class="pi pi-external-link text-xs text-text-secondary" />
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+import { isCloud } from '@/platform/distribution/types'
+
+const { showInvoiceHistory = true } = defineProps<{
+  showInvoiceHistory?: boolean
+}>()
 
 const { buildDocsUrl, docsPaths } = useExternalLink()
 
+const { manageSubscription } = useBillingContext()
+
 const { isLoadingSupport, handleMessageSupport, handleLearnMoreClick } =
   useSubscriptionActions()
 
+async function handleInvoiceHistory() {
+  if (!showInvoiceHistory) return
+  await manageSubscription()
+}
+
 function handleOpenPartnerNodesInfo() {
   window.open(
     buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),

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

@@ -24,6 +24,13 @@ const { mockIsSettingUp, mockSubscriptionActionOperation } = vi.hoisted(() => ({
     value: undefined as { actionUrl: string } | undefined
   }
 }))
+const mockDistributionState = vi.hoisted(() => ({ isCloud: true }))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockDistributionState.isCloud
+  }
+}))
 
 const RENEWAL_DATE_ISO = '2026-06-20T12:00:00Z'
 const END_DATE_ISO = '2026-01-20T12:00:00Z'
@@ -265,7 +272,9 @@ const ButtonStub = {
 }
 
 const SubscriptionFooterLinksStub = {
-  template: '<div data-testid="subscription-footer-links" />'
+  props: ['showInvoiceHistory'],
+  template:
+    '<div data-testid="subscription-footer-links" :data-show-invoice-history="String(showInvoiceHistory)" />'
 }
 
 const DropdownMenuStub = {
@@ -297,6 +306,7 @@ describe('SubscriptionPanelContentWorkspace', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockDistributionState.isCloud = true
     mockSubscriptionStatus.value = 'active'
     mockBillingStatus.value = 'paid'
     mockRenewalDate.value = RENEWAL_DATE_ISO
@@ -372,6 +382,10 @@ describe('SubscriptionPanelContentWorkspace', () => {
       screen.getByText(`Renews on ${formatPanelDate(RENEWAL_DATE_ISO)}`)
     ).toBeInTheDocument()
     expect(screen.getByTestId('subscription-footer-links')).toBeInTheDocument()
+    expect(screen.getByTestId('subscription-footer-links')).toHaveAttribute(
+      'data-show-invoice-history',
+      'true'
+    )
   })
 
   it('shows a scheduled plan change instead of the renewal date', () => {
@@ -471,6 +485,22 @@ describe('SubscriptionPanelContentWorkspace', () => {
     expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
   })
 
+  it('preserves local Manage billing and Invoice history actions', async () => {
+    const user = userEvent.setup()
+    mockDistributionState.isCloud = false
+    renderComponent()
+
+    expect(
+      screen.queryByRole('button', { name: 'Billing & invoices' })
+    ).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Manage billing' }))
+    expect(mockManageSubscription).toHaveBeenCalledOnce()
+    expect(screen.getByTestId('subscription-footer-links')).toHaveAttribute(
+      'data-show-invoice-history',
+      'true'
+    )
+  })
+
   it('keeps a Personal workspace Team-plan member view read-only', () => {
     mockIsInPersonalWorkspace.value = true
     mockCanManageSubscription.value = false
@@ -494,6 +524,10 @@ describe('SubscriptionPanelContentWorkspace', () => {
       screen.getByRole('button', { name: 'Leave Workspace' })
     ).toBeInTheDocument()
     expect(screen.getByText('Invite members')).toBeInTheDocument()
+    expect(screen.getByTestId('subscription-footer-links')).toHaveAttribute(
+      'data-show-invoice-history',
+      'false'
+    )
   })
 
   it('uses Team-plan change copy in a Personal workspace', () => {

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -108,7 +108,7 @@
               </div>
               <div class="flex flex-wrap gap-2 md:ml-auto">
                 <Button
-                  v-if="permissions.canManageSubscription"
+                  v-if="isCloud && permissions.canManageSubscription"
                   size="lg"
                   variant="secondary"
                   class="rounded-lg bg-interface-menu-component-surface-selected px-4 text-sm font-normal text-text-primary"
@@ -174,7 +174,7 @@
               </div>
               <div class="flex flex-wrap gap-2 md:ml-auto">
                 <Button
-                  v-if="permissions.canManageSubscription"
+                  v-if="isCloud && permissions.canManageSubscription"
                   size="lg"
                   variant="secondary"
                   class="rounded-lg bg-interface-menu-component-surface-selected px-4 text-sm font-normal text-text-primary"
@@ -236,13 +236,22 @@
                 class="flex flex-wrap gap-2 md:ml-auto"
               >
                 <Button
-                  v-if="permissions.canManageSubscription"
+                  v-if="
+                    permissions.canManageSubscription &&
+                    (isCloud || !isFreeTierPlan)
+                  "
                   size="lg"
                   variant="secondary"
                   class="rounded-lg bg-interface-menu-component-surface-selected px-4 text-sm font-normal text-text-primary"
                   @click="manageSubscription"
                 >
-                  {{ $t('subscription.billingAndInvoices') }}
+                  {{
+                    $t(
+                      isCloud
+                        ? 'subscription.billingAndInvoices'
+                        : 'subscription.manageBilling'
+                    )
+                  }}
                 </Button>
                 <Button
                   v-if="
@@ -377,7 +386,10 @@
         </Button>
       </div>
 
-      <SubscriptionFooterLinks class="mt-auto pt-6" />
+      <SubscriptionFooterLinks
+        class="mt-auto pt-6"
+        :show-invoice-history="permissions.canManageSubscription"
+      />
     </template>
   </div>
 </template>
@@ -398,6 +410,7 @@ import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables
 import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
 import type { TierBenefit } from '@/platform/cloud/subscription/utils/tierBenefits'
 import { getCommonTierBenefits } from '@/platform/cloud/subscription/utils/tierBenefits'
+import { isCloud } from '@/platform/distribution/types'
 import { useResubscribe } from '@/platform/workspace/composables/useResubscribe'
 import { useWorkspaceMenuItems } from '@/platform/workspace/composables/useWorkspaceMenuItems'
 import { useWorkspacePlanPricing } from '@/platform/workspace/composables/useWorkspacePlanPricing'